/* ─────────────────────────────────────────────────────────────
   PERIFY — comment.css, la page « Comment ça marche » (refonte A, 30/10/2026)
   Chargée après site.css (jetons, en-tête, chapeau de page, plaque des visuels,
   bloc « Essai », « Suite », pied). Ici : les trois étapes et « En chiffres ».
   Rythme : chapeau (fond) → étapes (fond) → chiffres (la bande teintée) → essai → suite.
   ───────────────────────────────────────────────────────────── */

/* ── 1. les trois étapes ─────────────────────────────────── */
.etapes-bloc{padding-top:var(--space-lg)}
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-columns)}
.etape{min-width:0}
/* la plaque : même hauteur pour les trois captures, chacune posée à sa façon */
.etape-visu{position:relative;aspect-ratio:4 / 4.4;overflow:hidden;padding:0}
.etape-visu img{position:absolute;top:var(--space-xl);left:var(--space-lg);width:calc(100% - 2 * var(--space-lg));
  height:calc(100% - 2 * var(--space-xl));object-fit:contain}
/* la main qui tient le téléphone sort du bas de la plaque */
.etape-visu-bas img{height:calc(100% - var(--space-xl));object-position:50% 100%}
/* la capture des tampons, plus large que haute : posée au milieu, coins arrondis */
.etape-visu-large{padding:var(--space-lg)}
.etape-visu-large img{position:static;width:100%;height:auto;border-radius:16px}
.etape-qui{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg);font-weight:600;color:var(--color-muted)}
.etape-num{display:inline-grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:2px solid var(--color-ink);border-radius:50%;
  font-family:var(--font-display);font-weight:800;line-height:1;color:var(--color-ink)}
.etape h2{margin-top:var(--space-sm);font-size:var(--text-title);line-height:1.25}
.etape h2 + p{margin-top:var(--space-xs);color:var(--color-ink-2)}
.etapes-legende{text-align:center;margin-top:var(--space-xl)}

/* ── 2. en chiffres : des nombres fixes, chacun avec sa source ─────── */
.chiffres h2{margin-bottom:var(--space-xl)}
.nombres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xl) var(--gap-columns)}
.nombre{display:grid;align-content:start;gap:var(--space-xs);min-width:0;padding-top:var(--space-lg);border-top:2px solid var(--color-ink)}
.nombre b{font-family:var(--font-display);font-weight:800;font-size:clamp(2.25rem,2vw + 1.4rem,3rem);line-height:1.05;
  letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums;color:var(--color-ink)}
.nombre > span{color:var(--color-ink-2);line-height:1.5}
.nombre-src{font-size:var(--text-sm);color:var(--color-muted);line-height:1.4}
/* le renvoi vers la source : petit chiffre, mais une cible de 48 px (::after invisible) */
.nombre sup{line-height:0;white-space:nowrap}
.nombre sup a{position:relative;display:inline;margin-left:3px;padding:0 3px;font-size:12px;font-weight:700;line-height:1;color:var(--color-ink);text-decoration:underline;text-underline-offset:2px}
.nombre sup a::after{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%)}
.nombres-titre{margin:var(--space-2xl) 0 var(--space-lg);font-size:var(--text-title)}
.sources{display:grid;gap:var(--space-sm);margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-rule-2)}
.source{font-size:var(--text-sm);line-height:1.5;color:var(--color-muted);scroll-margin-top:var(--space-xl)}
.source a{font-weight:600;color:var(--color-ink);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.source:target{color:var(--color-ink);background:var(--color-paper-3);box-shadow:0 0 0 8px var(--color-paper-3);border-radius:4px}

/* ── 3. tailles d'écran ──────────────────────────────────── */
@media (max-width:60rem){
  .etapes{grid-template-columns:minmax(0,1fr);gap:var(--space-2xl);max-width:32rem;margin-inline:auto}
  .nombres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:40rem){
  .nombres{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .etape-visu{aspect-ratio:4 / 4.2}
}