/* ==========================================================================
   SafeFacture — feuille de style unique du site vitrine.
   Pas de dépendance, pas de build, pas de police distante.

   ⚠️ Ce fichier est servi avec un cache d'un an (voir _headers). Son nom DOIT
   donc porter un hash : après toute modification, lancer ./rehash.sh à la
   racine du site — il renomme le fichier et met à jour les pages.
   ========================================================================== */

/* --- 1. Jetons de couleur ------------------------------------------------
   Repris à l'identique de la plateforme déjà construite
   (escrow-app/src/constants/theme.ts et escrow-bo/src/styles.css) : le site
   et l'application doivent se ressembler. Ne pas inventer d'autres teintes. */
:root {
  color-scheme: light dark;

  --ink:        #12211E;
  --ink-muted:  #5C6E69;
  --bg:         #F5F8F7;
  --card:       #FFFFFF;
  --line:       #DBE4E1;
  --teal:       #0C7E76;
  --teal-ink:   #0A635C;
  --teal-soft:  #E1F0ED;
  --teal-line:  #B6D8D2;
  --amber:      #9A6A11;
  --amber-soft: #FAF0DC;
  --amber-line: #EBD9AE;
  --success:    #1B8F63;
  --danger:     #C0432E;
  --on-teal:    #FFFFFF;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(18, 33, 30, .06), 0 8px 24px rgba(18, 33, 30, .05);
  --tap:        44px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #E9EFEC;
    --ink-muted:  #9DB2AC;
    --bg:         #0D1512;
    --card:       #151F1C;
    --line:       #26332F;
    --teal:       #43B9A9;
    --teal-ink:   #6ACDBF;
    --teal-soft:  #123029;
    --teal-line:  #1E4740;
    --amber:      #D9A94A;
    --amber-soft: #2A2112;
    --amber-line: #4A3B1C;
    --success:    #4BC08C;
    --danger:     #E77A63;
    --on-teal:    #071A17;
    --shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

/* --- 2. Socle ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); margin-top: 0; }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child, table:last-child { margin-bottom: 0; }

a { color: var(--teal-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

strong { font-weight: 650; }
small  { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

img, svg { max-width: 100%; height: auto; }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--teal); color: var(--on-teal);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 50; font-weight: 600;
}
.skip-link:focus { top: 0; color: var(--on-teal); }

/* --- 3. Mise en page ---------------------------------------------------- */
.wrap { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1.25rem; }
.wrap--narrow { max-width: 44rem; }

section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
section + section { border-top: 1px solid var(--line); }
.section-lede { color: var(--ink-muted); font-size: 1.1rem; max-width: 42rem; }

/* --- 4. Bandeau « service en préparation » ------------------------------
   Il est sur TOUTES les pages tant qu'aucun établissement de paiement agréé
   n'a signé. Il disparaît le jour de l'ouverture, pas avant. */
.bandeau {
  background: var(--amber-soft);
  border-bottom: 1px solid var(--amber-line);
  color: var(--amber);
  font-size: .9375rem;
  text-align: center;
  padding: .6rem 1.25rem;
}
.bandeau strong { color: var(--amber); font-weight: 700; }
.bandeau a { color: var(--amber); font-weight: 600; }
.bandeau a:hover { color: var(--ink); }

/* --- 5. En-tête et navigation ------------------------------------------- */
.entete { background: var(--card); border-bottom: 1px solid var(--line); }
.entete .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: center; justify-content: space-between;
  padding-block: .75rem;
}

.marque {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none;
  min-height: var(--tap);
}
.marque:hover { color: var(--ink); }
.marque-sceau { flex: none; width: 26px; height: 26px; color: var(--teal); }

.menu { display: flex; flex-wrap: wrap; gap: .15rem .4rem; align-items: center; }
.menu a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: .25rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 550;
}
.menu a:hover { background: var(--teal-soft); color: var(--teal-ink); }
.menu a[aria-current="page"] {
  background: var(--teal-soft); color: var(--teal-ink); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--teal-line);
}

/* --- 6. Boutons --------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .7rem 1.4rem;
  border: 1px solid var(--teal); border-radius: var(--radius-sm);
  background: var(--teal); color: var(--on-teal);
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  text-align: center;
}
.bouton:hover { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--on-teal); }
.bouton--creux { background: transparent; color: var(--teal-ink); border-color: var(--teal-line); }
.bouton--creux:hover { background: var(--teal-soft); color: var(--teal-ink); border-color: var(--teal); }
.bouton--bloc { width: 100%; }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --- 7. Accroche -------------------------------------------------------- */
.accroche { padding-block: clamp(2rem, 1.25rem + 3.5vw, 3.75rem); }
.accroche h1 { max-width: 34ch; }
.accroche-sous {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--ink-muted); max-width: 52ch;
}
.accroche .boutons { margin-top: 1.75rem; }
.accroche-note { margin-top: 1rem; color: var(--ink-muted); font-size: .9375rem; }

/* --- 8. Cartes ---------------------------------------------------------- */
.carte {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow);
}
.carte h3 { margin-bottom: .35rem; }
.carte p { color: var(--ink-muted); margin-bottom: 0; }

.grille { display: grid; gap: 1rem; }
@media (min-width: 46rem) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Le bloc qui lève le doute : qui détient l'argent. */
.carte--pivot {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
}
.carte--pivot h2 { color: var(--teal-ink); }
.carte--pivot p { color: var(--ink); font-size: 1.0625rem; }
.carte--pivot p:last-child { margin-bottom: 0; }

/* --- 9. Les étapes numérotées (c'est une séquence, pas une liste) ------- */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 1rem; }
.etapes > li {
  counter-increment: etape;
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.25rem 4.25rem;
}
.etapes > li::before {
  content: counter(etape);
  position: absolute; left: 1.25rem; top: 1.15rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: var(--teal); color: var(--on-teal);
  border-radius: 50%; font-weight: 700; font-size: 1.05rem;
}
.etapes > li > :last-child { margin-bottom: 0; }
.etapes strong { display: block; }

/* --- 10. Ce que ce n'est pas ------------------------------------------- */
.nest-pas { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 46rem) { .nest-pas { grid-template-columns: repeat(3, 1fr); } }
.nest-pas li {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm); padding: 1.1rem 1.2rem;
  color: var(--ink-muted);
}
.nest-pas strong { display: block; color: var(--ink); margin-bottom: .2rem; }

/* --- 11. Chiffres ------------------------------------------------------- */
.chiffres { display: grid; gap: 1rem; list-style: none; margin: 0 0 1rem; padding: 0; }
@media (min-width: 46rem) { .chiffres { grid-template-columns: repeat(3, 1fr); } }
.chiffres li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem;
}
.chiffre-valeur {
  display: block; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--teal-ink); line-height: 1.1;
}
.chiffres li p { margin: .35rem 0 0; color: var(--ink-muted); font-size: .9375rem; }
.source { color: var(--ink-muted); font-size: .875rem; }

/* --- 12. Tableaux ------------------------------------------------------- */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; background: var(--card); font-size: 1rem; }
caption { text-align: left; color: var(--ink-muted); font-size: .9375rem; padding-bottom: .6rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
thead th { background: var(--teal-soft); color: var(--teal-ink); font-size: .9375rem; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-cadre { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* --- 13. Questions (sans JavaScript : <details>) ----------------------- */
.questions { display: grid; gap: .75rem; }
details.question {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
details.question > summary {
  min-height: var(--tap);
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.2rem; cursor: pointer;
  font-weight: 650; color: var(--ink); list-style: none;
}
details.question > summary::-webkit-details-marker { display: none; }
details.question > summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--teal);
}
details.question[open] > summary::after { content: "–"; }
details.question[open] > summary { background: var(--teal-soft); color: var(--teal-ink); }
details.question > div { padding: 1rem 1.2rem 1.2rem; color: var(--ink-muted); }
details.question > div > :last-child { margin-bottom: 0; }

/* --- 14. Formulaire ---------------------------------------------------- */
.formulaire { display: grid; gap: 1.25rem; max-width: 34rem; }
.champ { display: grid; gap: .35rem; }
.champ > label { font-weight: 600; }
.champ .aide { color: var(--ink-muted); font-size: .9375rem; }
.requis { color: var(--danger); font-weight: 700; }

input[type="email"], input[type="text"], select, textarea {
  width: 100%; min-height: var(--tap);
  padding: .65rem .85rem;
  font: inherit; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: .75; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* Consentement : la case n'est JAMAIS pré-cochée (RGPD). */
.consentement {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  cursor: pointer;
}
.consentement input[type="checkbox"] {
  flex: none; width: 1.4rem; height: 1.4rem; margin: .15rem 0 0;
  accent-color: var(--teal);
}
.consentement span { font-size: .9375rem; }

.sous-bouton { color: var(--ink-muted); font-size: .9375rem; }

.message {
  border-radius: var(--radius); padding: 1rem 1.2rem;
  border: 1px solid var(--line); background: var(--card);
}
.message--ok    { background: var(--teal-soft);  border-color: var(--teal-line);  color: var(--ink); }
.message--alerte{ background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.message > :last-child { margin-bottom: 0; }

/* --- 15. Pages légales ------------------------------------------------- */
.legal { font-size: 1rem; }
.legal h2 { margin-top: 2.25rem; font-size: 1.3rem; }
.legal h3 { margin-top: 1.5rem; }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal dl { margin: 0 0 1em; }
.legal dt { font-weight: 650; margin-top: .9rem; }
.legal dd { margin: 0; color: var(--ink-muted); }

/* Un trou assumé, visible à l'écran : rien n'est inventé. */
.a-completer {
  display: inline-block;
  background: var(--amber-soft); color: var(--amber);
  border: 1px dashed var(--amber-line); border-radius: 5px;
  padding: .05em .45em; font-size: .9375rem; font-weight: 600;
}

/* --- 16. Pied de page -------------------------------------------------- */
.pied {
  background: var(--card); border-top: 1px solid var(--line);
  padding-block: 2.25rem; font-size: .9375rem; color: var(--ink-muted);
}
.pied-colonnes { display: grid; gap: 1.75rem; }
@media (min-width: 46rem) { .pied-colonnes { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
           color: var(--ink); margin-bottom: .6rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pied a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ink-muted); }
.pied a:hover { color: var(--teal-ink); }
.pied-bas { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pied-bas p { margin: 0 0 .4rem; }

/* ==========================================================================
   17. L'EXPLICATION EN MOUVEMENT
   Animation CSS pure, sans JavaScript et sans image : le SVG est dans la page.
   Une seule horloge de 20 s, découpée en quatre temps de 25 %.
   Chaque élément n'a qu'à ouvrir et fermer sa fenêtre dans cette horloge.
   Tout est désactivé si le visiteur demande moins d'animations : la scène
   s'arrête alors sur son état final, et les quatre temps sont lisibles d'un
   coup — l'information ne dépend jamais du mouvement.
   ========================================================================== */
.motion {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  --horloge: 20s;
}
.motion-scene { display: block; width: 100%; max-width: 23rem; height: auto; margin-inline: auto; }
@media (min-width: 46rem) {
  .motion { display: grid; grid-template-columns: minmax(0, 21rem) 1fr;
            gap: 1.75rem; align-items: center; padding: 1.5rem; }
  .motion-scene { max-width: none; }
  .motion-temps { margin-top: 0; }
  .motion figcaption { grid-column: 1 / -1; }
}
.motion figcaption { margin-top: .9rem; color: var(--ink-muted); font-size: .875rem; text-align: center; }

/* Le décor : ce qui ne bouge pas. */
.motion .boite { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.motion .boite-agree { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 7 6; opacity: .55; }
.motion .acteur { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.motion .pictogramme { fill: none; stroke: var(--ink-muted); stroke-width: 2.2;
                        stroke-linecap: round; stroke-linejoin: round; }
.motion .etiquette { fill: var(--ink); font: 650 15px var(--font); }
.motion .etiquette-fine { fill: var(--ink-muted); font: 500 12.5px var(--font); }
.motion .fleche { stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 5; fill: none; }

/* Les tranches du chantier, dans le compte dédié. */
.motion .tranche { fill: var(--bg); stroke: var(--teal-line); stroke-width: 1.5; rx: 5; }
.motion .tranche-pleine { fill: var(--teal-soft); }
.motion .tranche-versee { fill: var(--teal); }
.motion .jeton { fill: var(--amber); }
.motion .jeton-trait { stroke: var(--amber-line); stroke-width: 1.2; fill: none; }
.motion .coche { stroke: var(--on-teal); stroke-width: 2.6; fill: none;
                 stroke-linecap: round; stroke-linejoin: round; }
.motion .chrono { fill: var(--amber-soft); stroke: var(--amber-line); stroke-width: 1.5; }
.motion .chrono-texte { fill: var(--amber); font: 700 12px var(--font); }
.motion .pastille { fill: var(--teal); }
.motion .sur-teal { fill: var(--on-teal); font: 700 13px var(--font); }
.motion .sur-teal-fine { fill: var(--on-teal); font: 600 12.5px var(--font); }

/* --- Les quatre temps, en texte réel sous la scène -------------------- */
.motion-temps { list-style: none; counter-reset: temps; margin: 1.1rem 0 0; padding: 0;
                display: grid; gap: .5rem; }
.motion-temps li {
  counter-increment: temps;
  display: flex; gap: .7rem; align-items: baseline;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  font-size: .9375rem; color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
}
.motion-temps li::before {
  content: counter(temps); flex: none;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border-radius: 50%; font-size: .8125rem; font-weight: 700;
  background: var(--line); color: var(--ink);
}
.motion-temps strong { color: var(--ink); font-weight: 650; }

/* Sans transform-box, une transformation SVG se calcule par rapport au cadre
   entier et non à la forme : l'élément part hors écran. À poser avant tout le
   reste de l'horloge. */
.motion [class*="t1"], .motion [class*="t2-"], .motion [class*="t3-"],
.motion [class*="t4-"] { transform-box: fill-box; }
.motion .t1        { transform-origin: left center; }
.motion .t3-avance { transform-origin: left center; }
.motion .t3-outil  { transform-origin: center bottom; }
.motion .t4-coche  { transform-origin: center center; }

/* --- L'horloge --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Le temps actif s'éclaire en même temps que la scène. */
  .motion-temps li {
    animation: motion-temps-actif var(--horloge) linear infinite;
  }
  .motion-temps li:nth-child(1) { animation-delay: 0s; }
  .motion-temps li:nth-child(2) { animation-delay: calc(var(--horloge) * -.75); }
  .motion-temps li:nth-child(3) { animation-delay: calc(var(--horloge) * -.50); }
  .motion-temps li:nth-child(4) { animation-delay: calc(var(--horloge) * -.25); }

  @keyframes motion-temps-actif {
    0%, 2%     { background: var(--teal-soft); border-color: var(--teal-line); color: var(--ink); }
    23%, 25%   { background: var(--teal-soft); border-color: var(--teal-line); color: var(--ink); }
    27%, 100%  { background: transparent; border-color: transparent; color: var(--ink-muted); }
  }

  /* Temps 1 — la demande de paiement se découpe en tranches. */
  .motion .t1 { animation: motion-t1 var(--horloge) linear infinite; }
  .motion .t1-b { animation-delay: calc(var(--horloge) * .035); }
  .motion .t1-c { animation-delay: calc(var(--horloge) * .07); }
  @keyframes motion-t1 {
    0%          { opacity: 0; transform: translateX(-80px) scaleX(.2); }
    7%, 100%    { opacity: 1; transform: none; }
  }

  /* Temps 2 — le client dépose l'argent : les jetons traversent la scène. */
  .motion .t2-jeton { animation: motion-jeton var(--horloge) ease-in-out infinite; opacity: 0; }
  .motion .t2-jeton-b { animation-delay: calc(var(--horloge) * .05); }
  .motion .t2-jeton-c { animation-delay: calc(var(--horloge) * .10); }
  @keyframes motion-jeton {
    0%, 24%   { opacity: 0; transform: translateY(0); }
    27%       { opacity: 1; transform: translateY(8px); }
    42%       { opacity: 1; transform: translateY(119px); }
    46%, 100% { opacity: 0; transform: translateY(124px); }
  }

  /* Les tranches se remplissent une à une, dans l'ordre. */
  .motion .t2-plein { animation: motion-remplir var(--horloge) linear infinite; opacity: 0; }
  .motion .t2-plein-b { animation-delay: calc(var(--horloge) * .05); }
  .motion .t2-plein-c { animation-delay: calc(var(--horloge) * .10); }
  @keyframes motion-remplir { 0%, 40% { opacity: 0; } 43%, 100% { opacity: 1; } }

  /* Le compte dédié se referme : l'argent ne peut plus partir ailleurs. */
  .motion .t2-verrou { animation: motion-verrou var(--horloge) linear infinite; opacity: 0; }
  @keyframes motion-verrou { 0%, 48% { opacity: 0; } 52%, 100% { opacity: 1; } }

  /* Temps 3 — le travail avance sur la première tranche. */
  .motion .t3-avance { animation: motion-avance var(--horloge) linear infinite;
                       transform-origin: left center; }
  @keyframes motion-avance {
    0%, 52%   { transform: scaleX(0); opacity: 0; }
    54%       { transform: scaleX(0); opacity: 1; }
    70%, 100% { transform: scaleX(1); opacity: 1; }
  }
  .motion .t3-outil { animation: motion-outil var(--horloge) ease-in-out infinite; }
  @keyframes motion-outil {
    0%, 52%        { transform: none; }
    57%            { transform: translateY(-5px) rotate(-10deg); }
    62%            { transform: translateY(0) rotate(0deg); }
    67%            { transform: translateY(-5px) rotate(-10deg); }
    72%, 100%      { transform: none; }
  }

  /* Temps 4 — le client valide, la tranche part chez l'artisan.
     Le chrono rappelle que sans réponse, le versement se fait seul. */
  /* L'ordre du quatrième temps : le chrono rappelle la règle des 72 heures, la
     coche marque la validation et RESTE visible, puis la tranche devient versée
     et part chez l'artisan. La coche est dessinée après la tranche versée pour
     ne pas disparaître dessous. */
  .motion .t4-chrono { animation: motion-chrono var(--horloge) linear infinite; opacity: 0; }
  @keyframes motion-chrono { 0%, 74% { opacity: 0; } 77%, 86% { opacity: 1; } 88%, 100% { opacity: 0; } }

  .motion .t4-versee { animation: motion-versee var(--horloge) linear infinite; opacity: 0; }
  @keyframes motion-versee { 0%, 85% { opacity: 0; } 88%, 100% { opacity: 1; } }

  .motion .t4-coche { animation: motion-coche var(--horloge) linear infinite; opacity: 0; }
  @keyframes motion-coche {
    0%, 78%   { opacity: 0; transform: scale(.4); }
    81%, 100% { opacity: 1; transform: scale(1); }
  }

  .motion .t4-part { animation: motion-part var(--horloge) ease-in-out infinite; opacity: 0; }
  @keyframes motion-part {
    0%, 87%   { opacity: 0; transform: translateY(0); }
    90%       { opacity: 1; transform: translateY(8px); }
    97%       { opacity: 1; transform: translateY(170px); }
    99%, 100% { opacity: 0; transform: translateY(175px); }
  }
  .motion .t4-encaisse { animation: motion-encaisse var(--horloge) linear infinite; opacity: 0; }
  @keyframes motion-encaisse { 0%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
}

/* Moins d'animations : la scène se fige sur son état final, tout est lisible. */
@media (prefers-reduced-motion: reduce) {
  .motion .t2-jeton, .motion .t4-part, .motion .t4-chrono { display: none; }
  .motion .t1, .motion .t2-plein, .motion .t2-verrou, .motion .t3-avance,
  .motion .t4-coche, .motion .t4-versee, .motion .t4-encaisse { opacity: 1; }
  .motion-temps li { background: var(--bg); border-color: var(--line); color: var(--ink); }
}

/* ==========================================================================
   18. LA MISE EN SCÈNE
   Tout ce qui suit est de l'animation CSS pilotée par le DÉFILEMENT, sans une
   ligne de JavaScript. Deux garde-fous, dans cet ordre :
     · @supports — un navigateur qui ne sait pas faire affiche simplement le
       contenu, en place et lisible. Rien ne dépend de l'animation.
     · prefers-reduced-motion — qui demande moins de mouvement n'en a aucun.
   ========================================================================== */

/* --- 18.1 Révélation au défilement -------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .monte {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
    @keyframes monte {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }

    /* Un décalage par enfant : la grille se pose rang par rang, pas d'un bloc. */
    .monte-suite > * {
      animation: monte linear both;
      animation-timeline: view();
    }
    .monte-suite > :nth-child(1) { animation-range: entry 0%  entry 45%; }
    .monte-suite > :nth-child(2) { animation-range: entry 8%  entry 53%; }
    .monte-suite > :nth-child(3) { animation-range: entry 16% entry 61%; }
    .monte-suite > :nth-child(4) { animation-range: entry 24% entry 69%; }
  }
}

/* --- 18.2 Les chiffres ---------------------------------------------------
   Un chiffre n'impressionne pas parce qu'il bouge, mais parce qu'on peut le
   vérifier. Chaque carte porte donc sa source, visible, datée et cliquable.
   L'animation ne fait que guider l'œil dans l'ordre de lecture. */
.preuves { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 46rem) { .preuves { grid-template-columns: repeat(3, 1fr); } }

.preuve {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
  box-shadow: var(--shadow);
}
.preuve-valeur {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1;
  color: var(--teal-ink); font-variant-numeric: tabular-nums;
}
.preuve-unite { font-size: .5em; font-weight: 650; letter-spacing: -.01em; }
.preuve-quoi { margin: .6rem 0 0; color: var(--ink); font-size: .9375rem; }
.preuve-source {
  margin: auto 0 0; padding-top: 1rem;
  color: var(--ink-muted); font-size: .8125rem; line-height: 1.45;
}
.preuve-source a { color: var(--ink-muted); }
.preuve-source a:hover { color: var(--teal-ink); }
.preuve-source strong { color: var(--ink); font-weight: 600; }

/* La jauge : elle dit la proportion, ce qu'un nombre seul ne dit pas. */
.jauge {
  margin-top: .9rem; height: 7px; border-radius: 4px;
  background: var(--line); overflow: hidden;
}
.jauge > span {
  display: block; height: 100%; width: var(--part, 50%);
  background: var(--teal); border-radius: 4px;
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jauge > span {
      animation: jauge-pousse linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 65%;
    }
    @keyframes jauge-pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* --- 18.3 Une défaillance sur cinq --------------------------------------
   Cinq silhouettes, une seule teintée : la proportion se lit avant le texte.
   Les deux nombres qui la produisent sont écrits dessous, pour qu'on puisse
   refaire la division. */
.sur-cinq {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0;
  list-style: none;
}
.sur-cinq li {
  flex: 1 1 3.5rem; min-width: 3rem; height: 4.5rem;
  border-radius: var(--radius-sm);
  background: var(--line);
  display: grid; place-items: center;
}
.sur-cinq svg { width: 26px; height: 26px; opacity: .55; }
.sur-cinq .marque-une { background: var(--teal); }
.sur-cinq .marque-une svg { opacity: 1; color: var(--on-teal); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sur-cinq li {
      animation: monte linear both;
      animation-timeline: view(); animation-range: entry 0%  entry 42%;
    }
    .sur-cinq li:nth-child(2) { animation-range: entry 8%  entry 50%; }
    .sur-cinq li:nth-child(3) { animation-range: entry 16% entry 58%; }
    .sur-cinq li:nth-child(4) { animation-range: entry 24% entry 66%; }
    .sur-cinq li:nth-child(5) { animation-range: entry 32% entry 74%; }
  }
}

/* ==========================================================================
   18.4 LES DEUX RYTHMES
   La pièce qui convainc : deux colonnes, le même chantier, deux cadences.
   À gauche l'attente — un temps mort qui dure vraiment à l'écran, parce que
   c'est le sujet. À droite trois versements. Le contraste de rythme EST
   l'argument ; il n'a pas besoin d'être expliqué.
   ========================================================================== */
/* --- Le duel, en une image ----------------------------------------------
   Sur téléphone les deux colonnes s'empilent : on ne peut plus les comparer
   d'un coup d'œil, et c'est tout l'intérêt. Ces deux barres portent donc
   l'argument à elles seules, à n'importe quelle largeur. Elles sont à
   l'échelle : 21 jours font bien 32,8 % de 64. */
.duel { display: grid; gap: .9rem; margin: 0 0 1.75rem; }
.duel-ligne { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.duel-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .9375rem;
}
.duel-tete strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.duel-piste { height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.duel-barre {
  display: block; height: 100%; border-radius: 7px;
  transform-origin: left center;
}
.duel-ligne--sans .duel-barre { background: var(--danger); width: 100%; }
.duel-ligne--sans .duel-tete strong { color: var(--danger); }
.duel-ligne--avec .duel-barre { background: var(--teal); width: 32.8%; }
.duel-ligne--avec .duel-tete strong { color: var(--teal-ink); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .duel-barre {
      animation: duel-pousse linear both;
      animation-timeline: view(); animation-range: entry 8% entry 60%;
    }
    .duel-ligne--avec .duel-barre { animation-range: entry 16% entry 68%; }
    @keyframes duel-pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

.rythmes { --horloge: 20s; display: grid; gap: 1rem; }
@media (min-width: 52rem) { .rythmes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }

.rythme {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem;
  box-shadow: var(--shadow);
}
.rythme--avec { border-color: var(--teal-line); background: var(--teal-soft); }

.rythme-titre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin: 0 0 1.1rem;
}
.rythme-titre h3 { margin: 0; font-size: 1.05rem; }
.rythme--avec .rythme-titre h3 { color: var(--teal-ink); }
.rythme-bilan { font-size: .8125rem; font-weight: 650; color: var(--ink-muted); }

.rythme ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rythme li {
  display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .8rem;
  align-items: start;
  padding: .55rem 0; font-size: .9375rem; position: relative;
}
/* Le rail qui relie les étapes. */
.rythme li:not(:last-child)::before {
  content: ""; position: absolute; left: .7rem; top: 1.7rem; bottom: -.3rem;
  width: 2px; background: var(--line);
}
.rythme--avec li:not(:last-child)::before { background: var(--teal-line); }

.rythme-point {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  display: grid; place-items: center; position: relative; z-index: 1;
  font-size: .6875rem; font-weight: 700; color: var(--ink-muted);
}
.rythme-quand { color: var(--ink-muted); font-size: .8125rem; white-space: nowrap;
                font-variant-numeric: tabular-nums; }
.rythme-quoi { color: var(--ink); }
.rythme li[data-ton="attente"] .rythme-quoi,
.rythme li[data-ton="attente"] .rythme-quand { color: var(--ink-muted); }
.rythme li[data-ton="mauvais"] .rythme-point { border-color: var(--danger); color: var(--danger); }
.rythme li[data-ton="mauvais"] .rythme-quoi { color: var(--danger); font-weight: 650; }
.rythme li[data-ton="bon"] .rythme-point { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.rythme li[data-ton="bon"] .rythme-quoi { font-weight: 650; }

/* L'horloge commune : les deux colonnes avancent sur le même temps, donc le
   retard de la colonne de gauche se VOIT au lieu de se raconter. */
@media (prefers-reduced-motion: no-preference) {
  .rythme li { animation-duration: var(--horloge); animation-timing-function: linear;
                animation-iteration-count: infinite; opacity: .35; }

  /* Colonne « aujourd'hui » : trois étapes rapides, puis le trou. C'est le trou
     qui est l'argument — il dure vraiment à l'écran. */
  .rythme--sans li:nth-child(1) { animation-name: rythme-sans-1; }  /* Devis — 0.6 s */
  .rythme--sans li:nth-child(2) { animation-name: rythme-sans-2; }  /* Matériaux — 1.4 s */
  .rythme--sans li:nth-child(3) { animation-name: rythme-sans-3; }  /* Facture envoyée — 2.4 s */
  .rythme--sans li:nth-child(4) { animation-name: rythme-sans-4; }  /* Vous attendez (J+51) — 8.4 s */
  .rythme--sans li:nth-child(5) { animation-name: rythme-sans-5; }  /* Relance (J+60) — 11.6 s */
  .rythme--sans li:nth-child(6) { animation-name: rythme-sans-6; }  /* Payé — ou pas — 14.4 s */

  /* Colonne « avec » : l'argent est là d'emblée, et tout est soldé à 7.6 s,
     au moment précis où l'autre colonne commence seulement à attendre. Ce
     décalage se voit ; il n'a pas besoin d'être expliqué. */
  .rythme--avec li:nth-child(1) { animation-name: rythme-avec-1; }  /* Devis — 0.6 s */
  .rythme--avec li:nth-child(2) { animation-name: rythme-avec-2; }  /* 1 800 € déposés — 1.4 s */
  .rythme--avec li:nth-child(3) { animation-name: rythme-avec-3; }  /* 600 € versés — 3.2 s */
  .rythme--avec li:nth-child(4) { animation-name: rythme-avec-4; }  /* 800 € versés — 4.8 s */
  .rythme--avec li:nth-child(5) { animation-name: rythme-avec-5; }  /* 400 € versés — 6.4 s */
  .rythme--avec li:nth-child(6) { animation-name: rythme-avec-6; }  /* Aucune relance — 7.6 s */

  @keyframes rythme-sans-1 {
    0%, 3%      { opacity: .35; }
    6%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-sans-2 {
    0%, 7%      { opacity: .35; }
    10%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-sans-3 {
    0%, 12%      { opacity: .35; }
    15%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-sans-4 {
    0%, 42%      { opacity: .35; }
    45%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-sans-5 {
    0%, 58%      { opacity: .35; }
    61%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-sans-6 {
    0%, 72%      { opacity: .35; }
    75%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-avec-1 {
    0%, 3%      { opacity: .35; }
    6%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-avec-2 {
    0%, 7%      { opacity: .35; }
    10%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-avec-3 {
    0%, 16%      { opacity: .35; }
    19%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-avec-4 {
    0%, 24%      { opacity: .35; }
    27%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-avec-5 {
    0%, 32%      { opacity: .35; }
    35%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }
  @keyframes rythme-avec-6 {
    0%, 38%      { opacity: .35; }
    41%, 96%   { opacity: 1; }
    100%          { opacity: .35; }
  }

  /* Le temps mort respire, pour qu'on sente l'attente au lieu de la lire.
     Sur la pastille, pas sur la ligne : deux animations d'opacité sur le même
     élément, la seconde effacerait la première. */
  .rythme-attente .rythme-point { animation: rythme-respire 2.4s ease-in-out infinite; }
  @keyframes rythme-respire {
    0%, 100% { border-color: var(--line); }
    50%      { border-color: var(--amber); color: var(--amber); }
  }

.rythme-pied {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--ink-muted);
}
.rythme--avec .rythme-pied { border-top-color: var(--teal-line); }
.rythme-pied strong { color: var(--ink); }
.rythme--avec .rythme-pied strong { color: var(--teal-ink); }

/* --- 18.5 Finitions ------------------------------------------------------ */
.accroche { position: relative; overflow: hidden; }
.accroche::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 30% 0%, var(--teal-soft), transparent 70%);
  opacity: .7; pointer-events: none; z-index: -1;
}
.accroche h1 .surligne {
  background: linear-gradient(transparent 62%, var(--teal-soft) 62%);
  padding-inline: .1em;
}
.bouton { transition: transform .12s ease, background-color .12s ease; }
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: none; }
.carte { transition: border-color .15s ease, transform .15s ease; }
.carte:hover { border-color: var(--teal-line); }
@media (prefers-reduced-motion: reduce) {
  .bouton, .carte { transition: none; }
  .bouton:hover { transform: none; }
}