/* ═══════════════════════════════════════════════════════════════════════════
   Quotum — accueil : héros en deux couches, récit au défilement, chiffres.
   Jetons de quotum.css seulement (DESIGN.md, mouvement.defilement).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La platine : le fond du bureau en CSS, le panneau détouré par-dessus ── */

.bureau {
  background-color:var(--fond-surface);
  background-image:image-set(url("images/scenes/fond-bureau-clair@1x.webp") 1x, url("images/scenes/fond-bureau-clair@2x.webp") 2x);
  background-size:cover;
  background-position:0 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .bureau {
    background-image:image-set(url("images/scenes/fond-bureau-sombre@1x.webp") 1x, url("images/scenes/fond-bureau-sombre@2x.webp") 2x);
  }
}
:root[data-theme="sombre"] .bureau {
  background-image:image-set(url("images/scenes/fond-bureau-sombre@1x.webp") 1x, url("images/scenes/fond-bureau-sombre@2x.webp") 2x);
}

/* 440 pt de large, le panneau à 44 pt du haut et centré : la pose du banc de capture. */
.platine {
  width:440px;
  max-width:100%;
  margin:0 auto;
  padding:44px 0;
  border:1px solid var(--filet-discret);
  border-radius:12px;
  overflow:clip;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.platine picture { display:block; }
.platine img { width:320px; max-width:100%; height:auto; border:0; }

/* ── Ouverture ───────────────────────────────────────────────────────────── */

.ouverture {
  max-width:1120px;
  margin:0 auto;
  padding:64px var(--gouttiere) 0;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:48px;
}
.ouverture-texte h1 {
  font-size:clamp(40px, 6vw, 72px);
  line-height:1.04;
  letter-spacing:-0.025em;
  margin:0;
}
.ouverture-texte .phrase {
  font-size:18px;
  color:var(--encre-moyenne);
  max-width:560px;
  margin:24px 0 32px;
}
.ouverture-plan { margin:0; }
.ouverture-plan .echelle {
  max-width:440px;
  margin:12px auto 0;
  text-align:center;
}
@media (min-width: 960px) {
  .ouverture {
    grid-template-columns:minmax(0, 1fr) 440px;
    column-gap:72px;
    align-items:start;
    padding-top:72px;
  }
  .ouverture-texte { padding-top:56px; }
}

/* ── Récit ───────────────────────────────────────────────────────────────── */

.recit {
  max-width:1040px;
  margin:96px auto 0;
  padding:0 var(--gouttiere);
}
.recit-plan { margin:0 0 24px; }
.recit-texte { max-width:480px; margin:0 auto 72px; }
.recit-texte .num {
  display:block;
  margin:0 0 12px;
  padding-left:10px;
  border-left:2px solid var(--identite);
}
.recit-texte h2 {
  font-size:28px;
  line-height:1.15;
  margin:0 0 16px;
  text-wrap:balance;
}
.recit-texte p { font-size:17px; color:var(--encre-moyenne); margin:0 0 16px; }
.recit-texte p:last-child { margin-bottom:0; }
.recit-texte .liste {
  font-family:var(--police-donnee);
  font-size:13px;
  line-height:1.8;
  word-spacing:0.2em;
}

/* Bureau, sans mouvement : une rangée par étape, la capture à côté de son texte. C'est ce que
   voient Firefox, quiconque réduit les animations, et une fenêtre trop basse. */
@media (min-width: 880px) {
  .recit-grille {
    display:grid;
    grid-template-columns:440px minmax(0, 1fr);
    column-gap:72px;
    row-gap:64px;
    align-items:center;
  }
  .recit-plan, .recit-texte { margin:0; }
  .recit-plan { grid-column:1; }
  .recit-texte { grid-column:2; }
  .etape-1 { grid-row:1; }
  .etape-2 { grid-row:2; }
  .etape-3 { grid-row:3; }
  .etape-4 { grid-row:4; }
}

/* Bureau, défilement piloté : les quatre platines s'empilent, collées au centre de la fenêtre.
   Le panneau qui part s'efface en montant, puis celui qui arrive se pose depuis le haut, sans
   que les deux se superposent ; remonter rembobine. --pas : hauteur de défilement d'une étape. Les deux rangées d'amorce
   (50svh − pas/2) mettent le premier texte au centre au début de la plage contain, le dernier
   à la fin : les plages ci-dessous ne dépendent pas de --pas. */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (min-width: 880px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
    .recit-grille {
      --platine-h:min(800px, calc(100svh - 48px));
      --pas:80svh;
      view-timeline:--recit block;
      grid-template-rows:calc(50svh - var(--pas) / 2) repeat(4, var(--pas)) calc(50svh - var(--pas) / 2);
      row-gap:0;
      align-items:stretch;
    }
    .recit-grille > .recit-plan {
      grid-row:1 / -1;
      align-self:start;
      position:sticky;
      top:calc((100svh - var(--platine-h)) / 2);
    }
    .recit-grille > .recit-texte.etape-1 { grid-row:2; }
    .recit-grille > .recit-texte.etape-2 { grid-row:3; }
    .recit-grille > .recit-texte.etape-3 { grid-row:4; }
    .recit-grille > .recit-texte.etape-4 { grid-row:5; }
    .recit-texte {
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .recit-plan .platine { height:var(--platine-h); }
    /* Un panneau plus haut que la platine se réduit à elle, sans jamais être agrandi. */
    .recit-plan img {
      width:auto;
      max-height:calc(var(--platine-h) - 88px);
      transform-origin:50% 0;
    }

    .recit-plan.etape-1 { z-index:4; }
    .recit-plan.etape-2 { z-index:3; }
    .recit-plan.etape-3 { z-index:2; }
    .recit-plan.etape-4 { z-index:1; }
    /* Seule la platine du dessous garde le bureau : les autres le cacheraient, leur panneau parti. */
    .recit-plan:not(.etape-4) .platine.bureau { background:none; }

    .recit-plan.etape-1 img {
      animation:s-enleve linear both;
      animation-timeline:--recit;
      animation-range:contain 10% contain 20%;
    }
    .recit-plan.etape-2 img {
      animation:se-pose linear both, s-enleve linear both;
      animation-timeline:--recit, --recit;
      animation-range:contain 20% contain 30%, contain 43% contain 53%;
    }
    .recit-plan.etape-3 img {
      animation:se-pose linear both, s-enleve linear both;
      animation-timeline:--recit, --recit;
      animation-range:contain 53% contain 63%, contain 76% contain 86%;
    }
    .recit-plan.etape-4 img {
      animation:se-pose linear both;
      animation-timeline:--recit;
      animation-range:contain 86% contain 96%;
    }

    /* Le texte de l'étape en cours, seul à pleine encre ; les autres à peine en retrait. */
    .recit-texte > * {
      animation:etape-en-cours linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}

@keyframes s-enleve {
  to { opacity:0; translate:0 -24px; }
}
@keyframes se-pose {
  from { opacity:0; scale:0.97; }
}
/* ⛔ Le texte ne s'efface jamais sous 4,5:1 : l'encre faible, la plus pâle, n'y tient qu'à 0,886
   d'opacité sur le fond de page (0,848 en sombre). L'effacement franc reste aux panneaux. */
@keyframes etape-en-cours {
  0%, 100% { opacity:0.9; }
  30%, 70% { opacity:1; }
}

/* ── Bande de chiffres ───────────────────────────────────────────────────── */

.chiffres {
  max-width:1040px;
  margin:96px auto 0;
  padding:0 var(--gouttiere);
}
.chiffres ul {
  list-style:none;
  margin:0;
  padding:32px 0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:32px 24px;
  border-top:1px solid var(--filet-action);
  border-bottom:1px solid var(--filet-discret);
}
.chiffres li { margin:0; }
.chiffres .valeur {
  display:block;
  font-family:var(--police-donnee);
  font-variant-numeric:tabular-nums;
  font-size:40px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.015em;
  color:var(--encre-forte);
}
.chiffres .libelle {
  display:block;
  margin-top:8px;
  font-size:14px;
  color:var(--encre-moyenne);
}
@media (min-width: 720px) {
  .chiffres ul { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* ── Texte courant, prix, questions ──────────────────────────────────────── */

.suite {
  max-width:var(--lecture);
  margin:48px auto 0;
  padding:0 var(--gouttiere);
}
.suite p, .suite li { color:var(--encre-moyenne); }
.suite strong { color:var(--encre-forte); font-weight:500; }
.suite.faq { margin-top:96px; padding-bottom:96px; }
.suite.faq h3 { font-size:17px; margin-top:32px; }

.bloc-central h2 {
  font-size:12px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--identite);
  margin:0 0 16px;
}
.bloc-central .tertiaire, .bloc-central .meta { text-align:left; }

@media (max-width: 720px) {
  .ouverture { padding-top:40px; gap:40px; }
  .platine { padding:32px 0; }
  .recit { margin-top:64px; }
  .chiffres, .bloc-central { margin-top:64px; }
  .suite.faq { margin-top:64px; padding-bottom:64px; }
  .recit-texte h2 { font-size:24px; }
}