/* ==========================================================================
   ISMOD · Page Défilés
   Motif dominant : le galon (indigo clair sur noir), posé à l'horizontale
   sous le diptyque d'ouverture, sur toute la largeur : il ferme l'ouverture
   comme l'ourlet brodé d'une tenue. Aucun autre motif sur la page.
   1. Ouverture : titre et chapeau à gauche, diptyque 4:5 (defile-03 et
      defile-05), galon, légendes.
   2. Le défilé de fin de formation : composition centrée, deux volets égaux.
   3. Galerie : un plan large (defile-01), puis trois silhouettes.
   4. Pendant la formation : titre à pictogramme, texte.
   La fin de page est le composant commun .suite.
   ========================================================================== */

/* ---------- Légende de photographie (ouverture et galerie) ---------- */
.dfl-legende {
  margin-block-start: var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--texte-doux);
  max-width: 44ch;
}

/* Lien qui ouvre la visionneuse : la photo seule, sans signe ajouté.
   Le lien ne porte jamais data-revele : l'anneau de focus reste entier. */
.dfl-ouv__lien,
.dfl-piece__lien {
  display: block;
  overflow: hidden;
  background-color: var(--anthracite);
  text-decoration: none;
}
.dfl-piece__media {
  display: block;
  height: 100%;
}
.dfl-piece__media picture {
  display: contents;
}
.dfl-ouv__lien img,
.dfl-piece__lien img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   1. Ouverture
   Sur noir. Le titre et son chapeau en un bloc à gauche ; le diptyque de
   deux portraits 4:5 côte à côte, séparés par le jour de l'emblème ; sous
   les photos, le galon court sur toute la largeur et ferme l'ouverture ;
   les légendes viennent dessous. Grille partagée (subgrid) pour que le
   galon passe exactement entre les photos et leurs légendes.
   ========================================================================== */
.dfl-ouv {
  --dfl-galon: 2.5rem; /* une tuile entière, jamais mise à l'échelle */
  padding-block: clamp(var(--e-6), 1rem + 3vw, var(--e-8)) clamp(var(--e-7), 2rem + 3vw, var(--e-9));
}
.dfl-ouv__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto var(--dfl-galon) auto;
}
.dfl-ouv__texte {
  grid-row: 1;
  display: grid;
  gap: var(--e-5);
  margin-block-end: var(--e-7);
}
.dfl-ouv__titre {
  font-size: min(var(--titre-page), 14.5vw);
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-serre);
  text-wrap: balance;
  max-width: 12ch;
}
/* « de l'ISMOD » toujours sur sa propre ligne, sans insécable : le titre
   reste libre de se couper à 320 px et avec l'espacement de texte. */
.dfl-ouv__titre em {
  display: block;
}
.dfl-ouv__chapeau {
  color: var(--gris-300);
  max-width: 34ch;
}
.dfl-ouv__diptyque {
  grid-column: 1 / -1;
  grid-row: 2 / span 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: subgrid;
  column-gap: var(--sig-jour);
}
.dfl-ouv__piece,
.dfl-ouv__piece figure {
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  margin: 0;
  min-width: 0;
}
.dfl-ouv__lien {
  grid-row: 1;
  aspect-ratio: 4 / 5;
}
.dfl-ouv__piece .dfl-legende {
  grid-row: 3;
}
.dfl-ouv__piece:first-child .dfl-ouv__lien img {
  object-position: 54% 21%;
}
.dfl-ouv__piece:last-child .dfl-ouv__lien img {
  object-position: 49% 19%;
}
/* Le galon : masque du motif horizontal, indigo clair sur noir, tuiles
   centrées pour que la bande finisse de la même façon à ses deux bouts. */
.dfl-ouv__galon {
  grid-row: 3;
  grid-column: 1 / -1;
  background-color: var(--indigo-clair);
  -webkit-mask: url("../../assets/motifs/motif-galon-h.svg") 50% 0 / 40px 40px repeat-x;
          mask: url("../../assets/motifs/motif-galon-h.svg") 50% 0 / 40px 40px repeat-x;
}

@media (min-width: 64em) {
  .dfl-ouv__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    grid-template-rows: auto var(--dfl-galon) auto;
    column-gap: var(--gouttiere);
  }
  .dfl-ouv__texte {
    grid-column: 1 / span 6;
    grid-row: 1;
    align-self: end;
    margin: 0;
    padding-block-end: var(--e-6);
  }
  .dfl-ouv__diptyque {
    grid-column: 7 / -1;
    grid-row: 1 / span 3;
  }
  .dfl-ouv__galon {
    grid-row: 2;
  }
}
@media (min-width: 80em) {
  .dfl-ouv__texte {
    grid-column: 1 / span 5;
  }
  .dfl-ouv__diptyque {
    grid-column: 6 / -1;
  }
}

/* ==========================================================================
   2. Le défilé de fin de formation
   Composition centrée, la seule de la page : le titre et le texte sur l'axe,
   puis un diptyque de deux volets égaux séparés par un filet vertical.
   Aucun ordre n'est affirmé entre la soutenance et le défilé.
   ========================================================================== */
.dfl-fin__grille {
  display: grid;
  justify-items: center;
  text-align: center;
}
.dfl-fin__titre {
  max-width: 16ch;
}
.dfl-fin__texte {
  display: grid;
  justify-items: center;
  gap: var(--e-5);
  margin-block-start: var(--e-6);
}
.dfl-fin__texte p {
  font-size: var(--t-lg);
  line-height: 1.55;
  max-width: 50ch;
  text-wrap: pretty;
}
.dfl-fin__volets {
  display: grid;
  width: 100%;
  margin-block-start: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
  border-block-start: var(--filet-fin) solid var(--texte);
}
.dfl-volet {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--e-4);
  padding: var(--e-7) var(--e-4);
}
.dfl-volet + .dfl-volet {
  border-block-start: var(--filet-fin) solid var(--filet);
}
.dfl-volet__picto {
  width: 4rem;
  height: 4rem;
  color: var(--accent);
}
.dfl-volet__titre {
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.15;
}
.dfl-volet__texte {
  color: var(--texte-doux);
  max-width: 34ch;
}

@media (min-width: 48em) {
  .dfl-fin__volets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dfl-volet {
    padding-block: var(--e-8) 0;
  }
  .dfl-volet + .dfl-volet {
    border-block-start: 0;
    border-inline-start: var(--filet-fin) solid var(--filet);
  }
}

/* ==========================================================================
   3. Galerie
   Ordre de lecture et de visionneuse : defile-01, 04, 06, 02 (le même
   manteau n'apparaît jamais deux fois de suite).
   Mobile : une photo par ligne, 4:5 (defile-01 recadré en 4:5).
   48 em : le plan large sur toute la largeur, deux portraits, le dernier
   centré. 80 em : le plan large, puis une ligne de trois silhouettes
   entières, la sortie finale du défilé (427 px de large à 1440).
   ========================================================================== */
.dfl-galerie__titre {
  margin-block-end: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
}
.dfl-galerie__liste {
  display: grid;
  gap: var(--e-8) var(--gouttiere);
}
.dfl-piece figure {
  margin: 0;
}
.dfl-piece__lien {
  aspect-ratio: var(--ratio, 4 / 5);
}
.dfl-piece__lien img {
  object-position: var(--focale, 50% 0%);
}
.dfl-piece--large {
  --focale: 50% 50%;
}
.dfl-piece--large .dfl-legende {
  max-width: 60ch;
}
.dfl-piece--b {
  --focale: 50% 6.8%;
}

@media (min-width: 48em) {
  .dfl-galerie__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .dfl-piece {
    --ratio: 3 / 4;
  }
  .dfl-piece--large {
    grid-column: 1 / -1;
    --ratio: 1280 / 718;
    --focale: 50% 0%;
  }
  .dfl-piece--c {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 30rem);
    --ratio: 4 / 5;
  }
}

@media (min-width: 80em) {
  .dfl-galerie__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--e-9);
  }
  .dfl-piece--a,
  .dfl-piece--b,
  .dfl-piece--c {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
    --ratio: 9 / 16;
  }
  .dfl-piece--b {
    --focale: 50% 0%;
  }
}

/* Suivre l'ISMOD : en pied de galerie, sous un filet. */
.dfl-suivre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-7);
  margin-block-start: clamp(var(--e-8), 3rem + 3vw, var(--e-10));
  padding-block-start: var(--e-6);
  border-block-start: var(--filet-fin) solid var(--filet);
}
.dfl-suivre__titre {
  font-size: var(--t-xl);
  font-weight: var(--titre-graisse-petit);
}
.dfl-suivre__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-7);
}
.dfl-suivre__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: none;
}
.dfl-suivre__lien .icone {
  color: var(--accent);
}
.dfl-suivre__reseau {
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fort);
  text-underline-offset: 0.3em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duree-rapide) var(--ease-etat);
}
.dfl-suivre__compte {
  font-weight: 400;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.dfl-suivre__lien:hover .dfl-suivre__reseau,
.dfl-suivre__lien:focus-visible .dfl-suivre__reseau {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   4. Pendant la formation
   Sur blanc, entre la galerie noire et la fin de page voilée. Un seul
   pictogramme (le portant), devant le titre.
   ========================================================================== */
.dfl-annee {
  padding-block: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
}
.dfl-annee__grille {
  display: grid;
  gap: var(--e-5) var(--gouttiere);
}
/* h2 de bandeau : entre le h3 et le h2 courant (28 à 48 px). */
.dfl-annee__titre {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.1;
}
.dfl-annee__titre > span {
  max-width: 18ch;
}
.dfl-annee__picto {
  flex: none;
  width: 3rem;
  height: 3rem;
  color: var(--accent);
}
.dfl-annee__texte {
  display: grid;
  gap: var(--e-4);
  justify-items: start;
}

@media (min-width: 64em) {
  .dfl-annee__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    align-items: start;
  }
  .dfl-annee__titre {
    grid-column: 1 / span 7;
    font-weight: var(--titre-graisse);
  }
  .dfl-annee__texte {
    grid-column: 9 / -1;
    padding-block-start: var(--e-2);
  }
}