/* qui-suis-je.css : ce qui est propre à la page « Qui suis-je ? ». Se charge après base.css puis accueil.css (écran de promesse, ligne de preuve et bande finale viennent de l'accueil).
   Aucune taille de police écrite à la main : seules les 6 variables --t-* de base.css. Points de rupture : 640 et 960 px (écrits en min-width). */

/* Texte réservé aux lecteurs d'écran (garde « : » dans les titres de la frise) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Lien de la page courante (menu et pied de page) : couleur et soulignement */
.nav-link[aria-current="page"],.foot-links a[aria-current="page"]{color:var(--violet-dark);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}

/* Écran de promesse : portrait sous les boutons sur mobile, deux colonnes dès 640 px (portrait 260 px), 380 px dès 960 px */
.hero-photo{margin:var(--sp-4) 0 0;width:min(100%,320px)}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:12px;background:#0b0b0e}
@media (min-width:640px){
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--sp-4);align-items:center}
  .hero-photo{margin:0;width:100%}
  .hero-cta{flex-direction:column;align-items:flex-start}
}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-6)}
  .hero-photo img{aspect-ratio:auto;object-fit:fill}
  .hero-cta{flex-direction:row;align-items:center}
}

/* Titre de section : mots en violet */
.t-accent{color:var(--violet-dark)}

/* Frise « L'histoire de Steven Giron » : cartes blanches autour d'un trait. Une colonne (trait à gauche) sous 960 px, zigzag dès 960 px.
   Un segment de trait par étape (li::before), le premier et le dernier s'arrêtent au rond. */
.zig{list-style:none;margin:0 auto;padding:0;max-width:var(--w-wide)}
.zig > li{position:relative;padding:0 0 var(--sp-3) 36px}
.zig > li::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:#C9B8FB}
.zig > li:first-child::before{top:32px}
.zig > li:last-child{padding-bottom:0}
.zig > li:last-child::before{bottom:auto;height:32px}
.zig-n{position:absolute;left:0;top:18px;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--violet);color:#fff;font-size:var(--t-label);font-weight:700;line-height:1}
.zig-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.zig-card--final{border:2px solid var(--violet)}

/* Titre d'étape sur deux niveaux : date en grand, sous-titre en gras. Les mots restent ceux du titre validé (« : » lu par les lecteurs d'écran) */
.zig-title{margin:0 0 var(--sp-2);display:flex;flex-direction:column;gap:4px}
.zig-date{font-size:var(--t-section);font-weight:800;line-height:var(--lh-title);letter-spacing:-.02em;color:var(--violet-dark)}
.zig-sub{font-size:var(--t-card);font-weight:700;line-height:1.3;color:var(--ink)}
.zig-sub::first-letter{text-transform:uppercase}
.zig-sub--xl{font-size:var(--t-section);font-weight:800;line-height:var(--lh-title);letter-spacing:-.02em}

/* Images des cartes */
/* Sous 640 px, les images sortent du cadre de la carte (jusqu'aux marges de page) ; la légende reste alignée sur le texte */
.frise-fig{position:relative;z-index:1;margin:var(--sp-2) -15px 0 -51px}
.frise-fig + .t-body{margin-top:var(--sp-2)}
.frise-fig figcaption{padding-inline:51px 15px}
.frise-fig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.frise-fig figcaption{margin-top:var(--sp-1);color:var(--muted)}
.frise-fig--sm{max-width:360px}
.frise-fig--selfie{max-width:350px}
.frise-fig--photo img{aspect-ratio:16/10;object-fit:cover}
.frise-fig--photo img[src*="conference"]{object-position:50% 70%}
.frise-fig--photo img[src*="mastermind"]{object-position:50% 40%}
.frise-zoom{display:block;border-radius:12px;cursor:zoom-in}
.frise-zoom:focus-visible{outline:3px solid var(--violet-dark);outline-offset:3px}
@media (min-width:640px){
  .frise-fig{margin:var(--sp-2) 0 0;max-width:380px}
  .frise-fig--sm{max-width:300px}
  .frise-fig--selfie{max-width:280px}
  .frise-fig figcaption{padding-inline:0}
    .zig > li{padding-left:64px}
  .zig > li::before{left:21px}
  .zig-n{width:44px;height:44px;font-size:var(--t-card)}
  .zig > li:first-child::before{top:40px}
  .zig > li:last-child::before{height:40px}
  .zig-card{padding:var(--sp-3)}
  }
@media (min-width:960px){
  .zig > li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;padding:0 0 var(--sp-5)}
  .zig > li:last-child{padding-bottom:0}
  .zig > li::before{left:50%;margin-left:-1px}
  .zig-n{left:50%;margin-left:-22px;top:18px}
  .zig > li:nth-child(odd) .zig-card{grid-column:1;margin-right:var(--sp-5)}
  .zig > li:nth-child(even) .zig-card{grid-column:2;margin-left:var(--sp-5)}
  }

/* Bouton plein dans la carte de l'étape 6 */
.zig-cta{margin:var(--sp-3) 0 0}
.zig-cta .btn{width:100%;padding-inline:var(--sp-2)}
@media (min-width:640px){.zig-cta .btn{width:auto;padding-inline:30px}}

/* Avis : deux cartes, empilées sur mobile, côte à côte dès 640 px (aucun défilement horizontal) */
.reviews-2{display:grid;gap:var(--sp-2)}
@media (min-width:640px){.reviews-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}}