/* ==========================================================================
   ISMOD · Accueil (index.html)
   Propre à la page d'accueil. Chargée après base.css et components.css.
   Motif de la page : le fil, une seule fois, sous la déclaration. Le premier
   écran n'en porte aucun : la photo et le cartouche indigo de nuit suffisent.
   ========================================================================== */

/* ---------- En-tête : barre noire au-dessus du défilé ----------
   Tant que la page n'a pas défilé, l'en-tête est noir (il protège le logo
   de l'écran blanc de la photo) ; au défilement il reprend le blanc du site.
   Le logo en ligne prend la couleur du texte. Bascule franche : aucune
   transition de couleur, rien ne passe par un gris. */
.page-accueil .entete:not(.est-plein) {
  --fond: var(--noir);
  --texte: var(--blanc);
  --filet: var(--noir);
  --accent: var(--indigo-clair);
  --accent-plein: var(--blanc);
  --sur-accent: var(--noir);
  --focus: var(--blanc);
  --focus-contraste: var(--noir);
  --bouton-fond: var(--blanc);
  --bouton-texte: var(--noir);
  --bouton-survol-fond: var(--noir);
  --bouton-survol-texte: var(--blanc);
  --bouton-survol-bord: var(--blanc);
}
.page-accueil .entete__cta {
  transition: none;
}

/* ==========================================================================
   1. Premier écran : le défilé plein cadre
   Mobile et tablette : la photo, puis le cartouche indigo de nuit.
   Bureau (64 em) : la photo part du bord gauche et le cartouche la prend par
   son angle bas gauche. Échelle de la photo (source 1280 × 718) : 1,12 au
   plus, d'où un cadre de 89,5 rem (1 432 px) de large et 50,25 rem (804 px)
   de haut au plus ; au-delà, le noir de l'en-tête continue de part et d'autre.
   Le h1 n'est jamais plus petit que --titre-page.
   ========================================================================== */
.ouverture-accueil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--indigo-nuit);
  color: var(--blanc);
}
.ouverture-accueil__photo {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  height: clamp(15rem, 44svh, 30rem);
  background-color: var(--noir);
}
.ouverture-accueil__photo picture {
  display: block;
  height: 100%;
}
.ouverture-accueil__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait defile-02 : tête collée au bord haut, on ancre en haut. */
  object-position: 50% 0%;
}
.ouverture-accueil__legende {
  display: none;
}

.ouverture-accueil__cartouche {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--e-4);
  min-width: 0;
  padding: var(--e-5) var(--marge) var(--e-6);
  container-type: inline-size;
}
.ouverture-accueil__titre {
  /* « panafricaine » mesure 6,6 em : le titre se règle sur son bloc, sans
     jamais descendre sous l'échelle commune des h1. */
  font-size: max(var(--titre-page), min(var(--t-4xl), 14.5cqi));
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-serre);
  letter-spacing: -0.005em;
  color: var(--blanc);
  max-width: none;
  text-wrap: balance;
  /* Sous l'espacement de texte WCAG (1.4.12), « panafricaine » peut se couper
     plutôt que déborder ; à l'espacement normal le mot tient toujours. */
  overflow-wrap: anywhere;
}
.ouverture-accueil__titre em {
  display: block;
}
.ouverture-accueil__nom {
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.4;
  color: color-mix(in srgb, var(--blanc) 80%, var(--indigo-clair));
  text-wrap: balance;
}
.ouverture-accueil__faits {
  display: grid;
  gap: var(--e-2);
  margin-block-start: var(--e-1);
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--blanc);
}
.ouverture-accueil__faits li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.ouverture-accueil__faits .icone {
  color: var(--indigo-clair);
}
/* Un seul « S'inscrire » au premier écran : celui-ci ne sert que sous 30 em,
   là où l'en-tête n'affiche pas le sien. */
.ouverture-accueil__inscrire {
  --bouton-fond: var(--blanc);
  --bouton-texte: var(--noir);
  --bouton-survol-fond: var(--indigo-nuit);
  --bouton-survol-texte: var(--blanc);
  --bouton-survol-bord: var(--blanc);
  --focus: var(--blanc);
  --focus-contraste: var(--indigo-nuit);
  justify-self: start;
  margin-block-start: var(--e-2);
}
@media (min-width: 30em) {
  .ouverture-accueil__inscrire {
    display: none;
  }
  .ouverture-accueil__cartouche {
    padding-block: var(--e-6) var(--e-7);
  }
}

/* Tablette : la photo de défilé en paysage. */
@media (min-width: 48em) {
  .ouverture-accueil__photo {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .ouverture-accueil__photo img {
    object-position: 20% 18%;
  }
  .ouverture-accueil__legende {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: var(--e-2) var(--e-4);
    background-color: var(--noir);
    color: var(--blanc);
    font-size: var(--t-xs);
    line-height: 1.4;
  }
  .ouverture-accueil__faits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-5);
    margin-block-start: var(--e-4);
  }
  .ouverture-accueil__faits li {
    align-items: flex-start;
  }
}

/* Bureau : la photo plein cadre, le cartouche sur son angle bas gauche. */
@media (min-width: 64em) {
  .ouverture-accueil {
    /* Le cartouche loge « panafricaine » (6,6 em) à l'échelle du h1. */
    --cartouche: calc(var(--titre-page) * 6.8 + var(--marge) + var(--e-7));
    grid-template-columns: var(--cartouche) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding-inline: max(0px, (100% - 89.5rem) / 2);
    background-color: var(--noir);
    height: clamp(34rem, calc(100svh - var(--hauteur-entete)), 50.25rem);
  }
  .ouverture-accueil__photo {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    height: auto;
    aspect-ratio: auto;
  }
  .ouverture-accueil__cartouche {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 2;
    gap: var(--e-5);
    padding: var(--e-7) var(--e-7) var(--e-7) var(--marge);
    background-color: var(--indigo-nuit);
  }
  .ouverture-accueil__titre {
    font-size: var(--titre-page);
  }
  .ouverture-accueil__nom {
    font-size: var(--t-base);
  }
  .ouverture-accueil__faits {
    margin-block-start: var(--e-2);
  }
}
/* Petit bureau : le cartouche est étroit, les trois faits passent en liste. */
@media (min-width: 64em) and (max-width: 74.99em) {
  .ouverture-accueil__faits {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-2);
  }
  .ouverture-accueil__faits li {
    align-items: center;
  }
}

/* ==========================================================================
   2. Déclaration : la mission en une phrase, puis le fil
   ========================================================================== */
.declaration {
  padding-block-start: clamp(var(--e-8), 2rem + 6vw, var(--e-10));
}
.declaration__texte {
  font-family: var(--police-titre);
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.22;
  max-width: 34ch;
  text-wrap: pretty;
}
/* Le fil : le trait du I de l'emblème, étiré, parti du bord gauche de l'écran.
   Il passe sous la déclaration et conduit vers les portes. */
.fil {
  display: block;
  background-color: var(--indigo);
  -webkit-mask: url("../../assets/motifs/motif-fil.svg") 0 0 / 100% 100% no-repeat;
          mask: url("../../assets/motifs/motif-fil.svg") 0 0 / 100% 100% no-repeat;
}
.declaration__fil {
  width: 78%;
  height: 0.5rem;
  margin-block-start: clamp(var(--e-7), 1.5rem + 3vw, var(--e-8));
}
@media (min-width: 64em) {
  .declaration__texte {
    font-weight: var(--titre-graisse);
    margin-inline-start: calc((100% + var(--gouttiere)) / 12);
  }
  .declaration__fil {
    width: 64%;
    height: 0.625rem;
  }
}

/* ==========================================================================
   3. Portes : une photo d'ouverture, ou le grand pictogramme pour les pages
   qui s'ouvrent sans photo (Admissions, Contact)
   ========================================================================== */
.portes-accueil {
  padding-block: clamp(var(--e-7), 1.5rem + 4vw, var(--e-9)) var(--section);
}
.portes-accueil__titre {
  font-size: var(--t-3xl);
  margin-block-end: clamp(var(--e-6), 1rem + 2.5vw, var(--e-8));
}
.portes-accueil__liste {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--gouttiere);
}
.portes-accueil__liste > li:last-child {
  grid-column: 1 / -1;
}
.portes-accueil__liste > li:last-child .porte__media {
  --ratio: 16 / 9;
}
.portes-accueil .porte {
  min-width: 0;
}
/* Colonnes étroites (deux par ligne, ou cinq sous 80 em) : la carte entière
   est le lien, la flèche s'efface pour laisser l'intitulé sur une ligne. */
@media (max-width: 79.99em) {
  .portes-accueil__liste > li:not(:last-child) .porte__fleche {
    display: none;
  }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .portes-accueil__liste > li:last-child .porte__fleche {
    display: none;
  }
  .portes-accueil .porte__picto .icone {
    width: 1.5rem;
    height: 1.5rem;
  }
  .portes-accueil .porte__pied {
    gap: var(--e-2);
  }
  .portes-accueil .porte__intitule {
    font-size: var(--t-lg);
  }
}
/* Sous 25 em, deux colonnes de 136 px : l'intitulé passe seul, sans le petit
   pictogramme (la photo ou le grand pictogramme est juste au-dessus). */
@media (max-width: 24.99em) {
  .portes-accueil__liste > li:not(:last-child) .porte__picto {
    display: none;
  }
}
@media (max-width: 47.99em) {
  .portes-accueil .porte__picto .icone {
    width: 1.5rem;
    height: 1.5rem;
  }
  .portes-accueil .porte__pied {
    gap: var(--e-2);
  }
  .portes-accueil .porte__intitule {
    font-size: var(--t-lg);
  }
  .portes-accueil .porte__fleche {
    width: 1.25rem;
    height: 1.25rem;
  }
}
@media (min-width: 64em) {
  .portes-accueil__liste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .portes-accueil__liste > li:last-child {
    grid-column: auto;
  }
  .portes-accueil__liste > li:last-child .porte__media {
    --ratio: 4 / 5;
  }
}

/* ==========================================================================
   4. L'essentiel : une fiche, cinq lignes, chaque fait renvoie à sa page
   L'agrément ouvre la fiche ; la durée, seule ligne sans lien, la suit.
   ========================================================================== */
.essentiel {
  padding-block: clamp(var(--e-8), 2rem + 5vw, var(--e-10));
  background-color: var(--indigo-voile);
  color: var(--noir);
}
.essentiel__titre {
  font-size: var(--t-3xl);
  margin-block-end: clamp(var(--e-6), 1rem + 2.5vw, var(--e-8));
}
.essentiel__liste {
  border-block-start: var(--filet-fort) solid var(--indigo);
}
.essentiel__ligne {
  display: grid;
  gap: var(--e-2);
  padding-block: var(--e-5);
  border-block-end: var(--filet-fin) solid color-mix(in srgb, var(--indigo) 22%, transparent);
}
.essentiel__libelle {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--indigo);
}
.essentiel__valeur {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.25;
  max-width: 36ch;
  text-wrap: pretty;
}
.essentiel__lien .lien-fleche {
  color: var(--noir);
}
/* Noms de diplômes d'un seul tenant, sauf sous 30 em où ils peuvent se
   couper (espacement du texte, 1.4.12). */
@media (min-width: 30em) {
  .insecable {
    white-space: nowrap;
  }
}
/* Une seule colonne de texte sous 80 em : libellé, valeur, puis le lien. */
@media (min-width: 48em) and (max-width: 79.99em) {
  .essentiel__ligne {
    padding-block: var(--e-6);
  }
  .essentiel__valeur {
    max-width: 40ch;
  }
}
@media (min-width: 80em) {
  .essentiel__ligne {
    grid-template-columns: 16rem minmax(0, 1fr) 18rem;
    align-items: baseline;
    column-gap: var(--gouttiere);
    padding-block: var(--e-6);
  }
  .essentiel__libelle {
    align-self: start;
    padding-block-start: 0.3em;
  }
  .essentiel__lien {
    align-self: center;
  }
}

/* ==========================================================================
   5. Bande : de la table de l'atelier au podium (sur noir, sans motif)
   ========================================================================== */
.bande {
  padding-block: var(--section);
}
.bande__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.bande__photo {
  margin: 0;
  max-width: 34rem;
}
.bande__cadre {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--anthracite);
}
.bande__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.bande__legende {
  margin-block-start: var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--texte-doux);
}
.bande__video {
  max-width: 32rem;
}
.bande__suite {
  display: grid;
  justify-items: start;
  gap: var(--e-5);
}
.bande__texte {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.3;
  max-width: 26ch;
  color: var(--blanc);
}
.bande__lien {
  color: var(--blanc);
}
@media (min-width: 48em) {
  .bande__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gouttiere);
    row-gap: var(--e-6);
  }
  .bande__photo {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
  }
  .bande__video {
    grid-column: 7 / -1;
    grid-row: 1;
    margin-block-start: clamp(var(--e-6), 1rem + 5vw, var(--e-10));
  }
  .bande__suite {
    grid-column: 7 / -1;
    grid-row: 2;
    align-self: end;
  }
}
@media (min-width: 64em) {
  .bande__photo {
    grid-column: 1 / span 5;
  }
}