/* ------------------------------------------------------------------
   fiches.css — les seize fiches chantier.
   Trois gestes, communs aux seize :
     1. la grande photo émerge du fond au chargement, puis le titre ;
     2. le récit se lit comme une progression : la règle de chaque
        étape se trace, son repère s'allume, la photo change de côté
        entre l'avant et le pendant ;
     3. les chiffres se posent un par un.
   Et le comparateur fait un aller-retour tout seul quand on le croise,
   puis rend la main. Reprend les variables de site.css, n'en redéfinit
   aucune. Aucune bibliothèque ; l'état de base est l'état final lisible ;
   tout mouvement est en opt-in derrière prefers-reduced-motion.
   ------------------------------------------------------------------ */

/* ---------- la pastille « à compléter » ----------
   La parole du client manque là : on le dit, sans crier. */
.fiche .todo,
footer .todo {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .18em .65em .18em .5em;
  border: 1px solid var(--ecume-12); border-radius: 999px;
  background: rgba(234, 240, 236, .04);
  color: var(--ecume-60);
  font-family: var(--display); font-stretch: 85%; font-weight: 500;
  font-size: .72em; letter-spacing: .03em; line-height: 1.3;
  vertical-align: middle; white-space: normal;
}
.fiche .todo::before,
footer .todo::before {
  content: ""; flex: none; width: .45em; height: .45em; border-radius: 50%;
  background: var(--hi);
}
.fiche .chiffres b .todo { font-size: .44em; letter-spacing: .06em; font-stretch: 80%; }
.fiche .temoignage p .todo { font-size: .6em; }
footer .todo { font-size: .78rem; margin-top: .3rem; }

/* ---------- 1. l'émergence ----------
   La photo remonte du bleu profond ; le titre suit. Animation de
   chargement, courte, une seule fois. */
@media (prefers-reduced-motion: no-preference) {
  .fiche-hero .hero__media { animation: emerger 1.7s var(--ease) .12s backwards; }
  .fiche-hero .hero__content > * { animation: monter 1.1s var(--ease) backwards; }
  .fiche-hero .hero__content > .label       { animation-delay: .55s; }
  .fiche-hero .hero__content > .hero__title { animation-delay: .7s; }
  .fiche-hero .hero__content > .fiche-meta  { animation-delay: .9s; }
}
@keyframes emerger {
  0%   { opacity: 0; filter: blur(14px) saturate(.35) brightness(.6); transform: scale(1.07) translateY(2.5%); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0) saturate(1) brightness(1); transform: none; }
}
@keyframes monter {
  0%   { opacity: 0; transform: translateY(1.3rem); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  @keyframes emerger {
    0%   { opacity: 0; filter: blur(8px) saturate(.35) brightness(.6); transform: scale(1.06) translateY(2%); }
    60%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0) saturate(1) brightness(1); transform: none; }
  }
}

/* ---------- 2. le récit, étape par étape ---------- */
.fiche .etape { position: relative; }

/* la règle d'étape : une ligne d'eau posée sur la bordure d'ardoise */
.fiche .etape + .etape::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--eau) 0, var(--eau-2) 30%, transparent 70%);
  pointer-events: none; transform-origin: left center;
}

/* le repère d'étape : un point d'eau avant « 01 · Avant » */
.fiche .etape__num { position: relative; padding-left: 1.15rem; }
.fiche .etape__num::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--eau);
  box-shadow: 0 0 0 .3rem rgba(111, 163, 156, .16);
}

/* avant : la photo à gauche ; pendant : la photo à droite.
   La quatrième section de <main> est le « pendant » sur les fiches longues
   (photo, demande, avant, pendant) ; sur les fiches brèves c'est la grille
   des chiffres, qui n'a pas de figure : la règle n'y fait rien. */
@media (min-width: 861px) {
  .fiche > section:nth-of-type(4) .grid-2 > figure:first-child { order: 2; }
}

/* le mot du client : un guillemet qui ouvre */
.fiche .temoignage { position: relative; margin-top: 2.2rem; }
.fiche .temoignage::before {
  content: "«"; position: absolute; left: 1.2rem; top: -2.6rem;
  font-family: var(--display); font-stretch: 85%; font-weight: 800;
  font-size: 4.6rem; line-height: 1; color: var(--eau); opacity: .38;
  pointer-events: none;
}

/* ---------- 3. les chiffres ---------- */
.fiche .chiffres div { position: relative; }
.fiche .chiffres div::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--eau), transparent 85%);
  transform-origin: left center; pointer-events: none;
}
.fiche .chiffres b { color: var(--ecume); }
/* sur un téléphone, deux colonnes plutôt qu'une pile */
@media (max-width: 560px) {
  .fiche .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche .chiffres div { padding: 1rem .85rem; }
}
.fiche .chiffres div:nth-child(2)  { --i: 1; }
.fiche .chiffres div:nth-child(3)  { --i: 2; }
.fiche .chiffres div:nth-child(4)  { --i: 3; }
.fiche .chiffres div:nth-child(5)  { --i: 4; }
.fiche .chiffres div:nth-child(6)  { --i: 5; }
.fiche .chiffres div:nth-child(7)  { --i: 6; }
.fiche .chiffres div:nth-child(8)  { --i: 7; }
.fiche .chiffres div:nth-child(9)  { --i: 8; }
.fiche .chiffres div:nth-child(10) { --i: 9; }

/* ---------- le comparateur ---------- */
@property --pos {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}
.fiche .compare .bar {
  width: 2px;
  box-shadow: 0 0 0 1px rgba(11, 20, 22, .35), 0 0 16px rgba(234, 240, 236, .45);
}
.fiche .compare .bar::after {
  border-width: 1.5px;
  box-shadow: 0 8px 26px rgba(5, 10, 16, .6);
  backdrop-filter: blur(6px);
  transition: border-color .25s, scale .25s var(--ease);
}
.fiche .compare:hover .bar::after,
.fiche .compare:has(input:focus-visible) .bar::after { border-color: var(--hi); scale: 1.1; }
.fiche .compare .tag { backdrop-filter: blur(6px); }

/* ---------- l'appel final ---------- */
.fiche .fiche-cta > :nth-child(2) { --i: 1; }
.fiche .fiche-cta > :nth-child(3) { --i: 2; }
.fiche .fiche-cta > :nth-child(4) { --i: 3; }

/* ---------- la fiche brève ----------
   Deux photos et dix secondes : on le dit comme une note de marge. */
.fiche--breve .etape__head p { font-style: italic; }
.fiche--breve .galerie { gap: clamp(.9rem, 2.2vw, 1.8rem); }
.fiche--breve .chiffres { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* ------------------------------------------------------------------
   Piloté par le défilement. Tout ce qui suit est une couche par-dessus
   un document déjà complet ; Firefox et les lecteurs sans mouvement
   voient la page finie. `animation-timeline` toujours après `animation`.
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* la règle d'étape se trace de gauche à droite en arrivant */
    .fiche .etape + .etape::before {
      animation: tracer linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 32%;
    }

    /* le repère s'allume */
    .fiche .etape__num::before {
      animation: allumer linear both;
      animation-timeline: view();
      animation-range: cover 4% cover 40%;
    }

    /* titre, chapeau et texte de chaque étape montent d'un cran */
    .fiche .etape__head > *,
    .fiche .grid-2 > .prose,
    .fiche .grid-2 > div > .h-lg,
    .fiche .temoignage,
    .fiche .fiche-cta > * {
      animation: monter-vue linear both;
      animation-timeline: view();
      animation-range: cover calc(var(--i, 0) * 4%) cover calc(24% + var(--i, 0) * 4%);
    }
    .fiche .etape__head > h2 { --i: 1; }
    .fiche .etape__head > p  { --i: 2; }

    /* les chiffres se posent un par un ; la ligne d'eau suit */
    .fiche .chiffres div {
      animation-name: poser;
      animation-range: entry calc(var(--i, 0) * 7%) entry calc(58% + var(--i, 0) * 7%);
    }
    .fiche .chiffres div::before {
      animation: tracer linear both;
      animation-timeline: view();
      animation-range: cover calc(6% + var(--i, 0) * 3.5%) cover calc(30% + var(--i, 0) * 3.5%);
    }

    /* le comparateur montre qu'il se manipule : un aller-retour du curseur
       pendant qu'il entre dans la fenêtre, puis la valeur revient au
       curseur (fill-mode none : hors de la plage, l'animation ne pèse plus). */
    .fiche .compare {
      animation: balayer linear none;
      animation-timeline: view();
      animation-range: entry 35% contain 12%;
    }
  }
}

@keyframes tracer {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes allumer {
  0%   { background: var(--ardoise); box-shadow: 0 0 0 0 rgba(111, 163, 156, .5); }
  55%  { background: var(--eau);     box-shadow: 0 0 0 .7rem rgba(111, 163, 156, .3); }
  100% { background: var(--eau);     box-shadow: 0 0 0 .3rem rgba(111, 163, 156, .16); }
}
@keyframes monter-vue {
  0%   { opacity: .001; transform: translateY(1.4rem); }
  100% { opacity: 1; transform: none; }
}
@keyframes poser {
  0%   { opacity: .001; transform: translateY(1.8rem) scale(.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes balayer {
  0%   { --pos: 50%; }
  38%  { --pos: 76%; }
  78%  { --pos: 26%; }
  100% { --pos: 50%; }
}

@media print {
  .fiche .etape + .etape::before, .fiche .chiffres div::before { display: none; }
}