/**
 * Bloc etapes_photos — bandeau de photos légendées comme les repères de la courbe du hero
 *
 * Contenu : 1. En-tête  2. Grille  3. Photo (remplissage liquide, R11)  4. Légende (numéro + terme)
 *           5. Responsive (2 colonnes < 1024, numéro sur sa ligne ≤ 480)
 *
 * R3 (demande client) : habiller le site d'images, regroupées dans une seule section forte
 * (cf. CLAUDE.md, « Peu ou pas de photos »). Nombre de photos libre : grille auto-fit.
 * Section sombre : les photos y ressortent comme dans une galerie.
 * Ordre des photos (refroidissement sous « Premier crack ») : métaphore assumée, décision client R17.
 */

/* 1. En-tête --------------------------------------------------------------- */
.etapes-photos__head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }

/* 2. Grille ---------------------------------------------------------------- */
.etapes-photos__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-lg) var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.etapes-photos__item figure { margin: 0; display: grid; gap: var(--space-sm); }

/* 3. Photo ----------------------------------------------------------------- */
/* overflow: hidden requis par anim-image (masque + dézoom, js/common.js) */
.etapes-photos__media {
    position: relative; overflow: hidden; aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
}
/* R11 — tasse qui se remplit : __fill (la photo) est découpée par une surface en vague, calculée
   par js/blocs/etapes-photos.js ; sans JS, aucune découpe : la photo est entière.
   R13 — décision client : pas de liseré de crème au-dessus de la surface. */
.etapes-photos__fill { position: relative; height: 100%; }
/* Léger désaturé : les 4 photos, de sources différentes, se lisent comme une série */
.etapes-photos__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.04); }

/* 4. Légende --------------------------------------------------------------- */
/* Même pastille que les repères de la courbe du hero : le lien se voit */
.etapes-photos__caption {
    position: relative; display: grid; gap: var(--space-2xs);
    padding: var(--space-sm) 0 0 18px; border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 25%, transparent);
}
.etapes-photos__caption::before {
    content: ""; position: absolute; left: 0; top: calc(var(--space-sm) + 0.3em);
    width: 11px; height: 11px; border: 2px solid var(--color-accent); border-radius: 50%;
}
.etapes-photos__term {
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-accent);
}
.etapes-photos__gloss { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); }

/* 5. Responsive ------------------------------------------------------------ */
/* Deux colonnes sous 1024 px plutôt qu'une : 4 photos verticales empilées feraient un long tunnel.
   Fixé dès 1023 px : auto-fit donnait 3 colonnes entre 769 et ~940 px, donc une photo orpheline.
   (Avec un nombre impair de photos, la dernière reste seule sur son rang : accepté.) */
@media (max-width: 1023px) {
    .etapes-photos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .etapes-photos__list { gap: var(--space-md) var(--space-sm); }
    .etapes-photos__gloss { font-size: var(--fs-lg); }
}
/* Colonne de ~140 px : « 03 · Premier crack » se coupait au milieu. Le numéro passe sur sa ligne
   pour toutes les légendes (hauteurs égales d'une photo à l'autre), le « · » disparaît. */
@media (max-width: 480px) {
    .etapes-photos__num { display: block; }
    .etapes-photos__sep { display: none; }
}