/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — ACCUEIL PRÉCISION 47 : tout ce qui suit le héros.
   Le héros vit dans precision47.css et n'est pas touché ici.
   Sections : 2 « Ce qu'on fait » (variante A, préfixe va-) · 3 démonstration
   (demo-) · 5 interlude (interlude-) · 6 projets livrés (livre-) ·
   7 municipalités (gov-) · 8 déroulement (etape-) · 9 fondateur (qui-) ·
   10 appel (appel-) · 11 pied de page (pied-).
   Surfaces : noir #131110 / ivoire #f2efe9 en alternance ; rouge #e1061a rare.
   ══════════════════════════════════════════════════════════════ */

:root {
  --va-ivoire: #f2efe9;
  --va-encre: #131110;
  --va-texte: #3d3935;      /* corps sur ivoire — 11:1 */
  --va-sourdine: #625b53;   /* étiquettes sur ivoire — 5,6:1 */
  --va-filet: rgba(19, 17, 16, 0.14);
  --va-filet-fort: rgba(19, 17, 16, 0.34);
  --va-centre-y: 300px;     /* le point d'impact, sous le haut de la section */
}

/* ── La transition : le fil traverse encore le noir ─────────── */
.va-transition { position: relative; height: 90px; background: var(--canvas); }   /* −25 % : un changement de chapitre, pas un vide */
.va-fil { position: absolute; left: var(--xj); width: 1px; }
.va-fil-noir { top: 0; bottom: 0; background: var(--ligne-ivoire); }

/* ── La section ivoire ──────────────────────────────────────── */
.va-cqf { position: relative; background: var(--va-ivoire); color: var(--va-texte); overflow: hidden; }
.va-cqf h2, .va-cqf h3 { color: var(--va-encre); }
.va-cqf .label { color: var(--va-sourdine); }
.va-cqf :focus-visible { outline-color: var(--va-encre); }

.va-zone-tete { position: relative; overflow: hidden; }
.va-matiere { position: absolute; inset: 0; pointer-events: none; }
.va-fil-ivoire { top: 0; height: var(--va-centre-y); background: var(--va-filet-fort); transform-origin: top center; }
.cernes {
  position: absolute;
  left: var(--xj); top: var(--va-centre-y);
  transform: translate(-50%, -50%);
  width: 1120px; height: 1120px;
}
.cerne, .fente { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fente { stroke: var(--va-encre); stroke-opacity: 0.5; stroke-width: 1; }
.impact { transform-origin: center; transform: scale(0); }

/* tracé des cernes au premier passage */
html[data-motion="on"] [data-rv="cernes"] { opacity: 1; }
html[data-motion="on"] [data-rv="cernes"] .va-fil-ivoire { transform: scaleY(0); transition: transform 500ms var(--ease-out); }
html[data-motion="on"] [data-rv="cernes"] .cerne { transition: stroke-dashoffset 1100ms var(--ease-out) calc(600ms + var(--k) * 60ms); }
html[data-motion="on"] [data-rv="cernes"] .fente { transition: stroke-dashoffset 900ms var(--ease-out) 1700ms; }
html[data-motion="on"] [data-rv="cernes"] .impact { transition: transform 360ms var(--ease-spring) 480ms; }
html[data-motion="on"] [data-rv="cernes"].vu .va-fil-ivoire { transform: none; }
html[data-motion="on"] [data-rv="cernes"].vu .cerne,
html[data-motion="on"] [data-rv="cernes"].vu .fente { stroke-dashoffset: 0; }
html[data-motion="on"] [data-rv="cernes"].vu .impact { transform: scale(1); }
html[data-motion="off"] .cerne, html[data-motion="off"] .fente { stroke-dashoffset: 0; }
html[data-motion="off"] .impact { transform: none; }

/* ── L'en-tête : étiquette, titre, deux paragraphes aérés ───── */
.va-tete { position: relative; padding: 120px 0 104px; max-width: 900px; }
.va-label { display: flex; align-items: center; gap: 12px; }
.va-marques { display: inline-flex; gap: 5px; }
.va-marques i { width: 3px; height: 12px; background: var(--va-encre); }
.va-marques i:nth-child(2) { height: 8px; align-self: flex-end; }
.va-marques i:nth-child(3) { height: 10px; align-self: flex-end; }
.va-tete h2 { margin-top: var(--sp-3); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }
.va-intro { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.va-intro p { font-size: 1.125rem; line-height: 1.55; max-width: 46ch; }

/* ── Les expertises : une séquence, trois compositions ──────── */
.va-exp { position: relative; padding: var(--sp-8) 0; border-top: 1px solid var(--va-filet); }
.va-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-3); align-items: start; }
.va-entete { grid-column: 1 / -1; display: grid; gap: 6px; }
.va-no { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.14em; color: var(--va-sourdine); }   /* le numéro : un repère de série, rien de plus */
.va-service { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--va-encre); }   /* le nom du service domine */
.va-exp-2 .va-no { color: var(--muted); }
.va-exp-2 .va-service { color: var(--ink); }
.va-exp .va-phrase { font-size: clamp(1.4rem, 2.1vw, 1.85rem); font-weight: 600; color: var(--va-encre); line-height: 1.1; letter-spacing: -0.025em; max-width: 20ch; text-wrap: balance; }
.va-texte { display: grid; gap: var(--sp-2); }
.va-texte p { font-size: 1.0625rem; line-height: 1.6; max-width: 46ch; }
@media (max-width: 860px) { .va-texte p, .va-intro p { font-size: 1.0625rem; } }
.va-action { margin-top: var(--sp-1); color: var(--va-encre); border-bottom-color: var(--va-filet-fort); }
.va-action:hover { border-bottom-color: var(--va-encre); }
.va-demo { position: relative; }

/* 01 : texte à gauche, le plan de page à droite */
.va-exp-1 .va-phrase { grid-column: 1 / span 5; grid-row: 2; }
.va-exp-1 .va-texte { grid-column: 1 / span 5; grid-row: 3; }
.va-exp-1 .va-page { grid-column: 7 / -1; grid-row: 2 / span 2; }
.va-plan { width: 100%; height: auto; display: block; }
.va-trace path, .va-trace rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
.va-contenu > * { opacity: 0; transform: translateY(6px); transform-box: fill-box; }
.va-joint { transform-origin: center; transform-box: fill-box; transform: scale(0); }
html[data-motion="on"] .va-exp-1 .va-trace > * { transition: stroke-dashoffset 700ms var(--ease-out) calc(200ms + var(--o) * 140ms); }
html[data-motion="on"] .va-exp-1 .va-contenu > * { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(750ms + var(--o) * 70ms); }
html[data-motion="on"] .va-exp-1 .va-joint { transition: transform 360ms var(--ease-spring) 1500ms; }
.va-exp-1.vu .va-trace > *, html[data-motion="off"] .va-trace > * { stroke-dashoffset: 0; }
.va-exp-1.vu .va-contenu > *, html[data-motion="off"] .va-contenu > * { opacity: 1; transform: none; }
.va-exp-1.vu .va-joint, html[data-motion="off"] .va-joint { transform: scale(1); }

/* 02 : la bande sombre — la chaîne pleine largeur, puis le texte */
.va-exp-2 { background: var(--canvas); color: var(--text); border-top: 0; }
.va-exp-2 .va-phrase { color: var(--ink); grid-column: 1 / span 6; grid-row: 3; }
.va-exp-2 .label { color: var(--muted); }
.va-exp-2 .va-texte { grid-column: 7 / -1; grid-row: 3; }
.va-exp-2 .va-texte p { color: var(--text); }
.va-exp-2 .va-action { color: var(--ink); border-bottom-color: var(--ligne-ivoire-forte); }
.va-exp-2 .va-action:hover { border-bottom-color: var(--ink); }
.va-chaine { grid-column: 1 / -1; grid-row: 2; height: 150px; margin: var(--sp-3) 0 var(--sp-4); }
.va-rail { position: absolute; left: 0; right: 0; top: 40px; height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.va-tache { position: absolute; left: 0; top: 34px; width: 13px; height: 13px; margin-left: -6px; background: var(--ink); }
.va-noeud { position: absolute; top: 40px; width: 30%; display: grid; gap: 3px; }
.va-n1 { left: 0; }
.va-n2 { left: 50%; transform: translateX(-50%); text-align: center; }
.va-n3 { right: 0; text-align: right; }
.va-noeud i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin: -4px 0 16px; }
.va-n2 i { margin-left: auto; margin-right: auto; width: 13px; height: 13px; margin-top: -6px; background: var(--red); }
.va-n3 i { margin-left: auto; }
.va-noeud b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.va-noeud small { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.04em; color: var(--muted); }
html[data-motion="on"] .va-exp-2 .va-rail { transform: scaleX(0); transition: transform 900ms var(--ease-out) 100ms; }
html[data-motion="on"] .va-exp-2.vu .va-rail { transform: none; }
html[data-motion="on"] .va-exp-2 .va-noeud i { transform: scale(0); transition: transform 380ms var(--ease-spring); }
html[data-motion="on"] .va-exp-2 .va-n1 i { transition-delay: 200ms; }
html[data-motion="on"] .va-exp-2 .va-n2 i { transition-delay: 1500ms; }
html[data-motion="on"] .va-exp-2 .va-n3 i { transition-delay: 2900ms; }
html[data-motion="on"] .va-exp-2.vu .va-noeud i { transform: none; }
html[data-motion="on"] .va-exp-2 .va-tache { opacity: 0; }
html[data-motion="on"] .va-exp-2.vu .va-tache { animation: va-voyage 3200ms var(--ease-out) 300ms forwards; }
@keyframes va-voyage {
  0%   { opacity: 0; left: 0; }
  8%   { opacity: 1; }
  38%  { left: 50%; }
  54%  { left: 50%; }
  92%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
html[data-motion="off"] .va-tache { left: 100%; opacity: 0; }

/* 03 : la note de terrain à gauche, le texte à droite */
.va-exp-3 .va-phrase { grid-column: 8 / -1; grid-row: 2; }
.va-exp-3 .va-texte { grid-column: 8 / -1; grid-row: 3; }
.va-exp-3 .va-terrain { grid-column: 1 / span 6; grid-row: 2 / span 2; display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.1fr); align-items: center; gap: var(--sp-2); }
.va-note { position: relative; padding: 28px 24px 24px; min-height: 220px; border: 1px solid var(--va-filet-fort); overflow: hidden; display: grid; align-content: space-between; gap: var(--sp-3); }
.va-note .grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.38; }
.va-note p { position: relative; font-family: var(--f-mono); font-size: 1rem; line-height: 1.5; color: var(--va-encre); }
.va-note-meta { position: relative; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--va-sourdine); }
.va-fleche { position: relative; height: 1px; background: var(--va-filet-fort); transform-origin: left center; }
.va-fleche::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--va-encre); border-right: 1px solid var(--va-encre); transform: rotate(45deg); }
.va-fiche { border-top: 1px solid var(--va-encre); }
.va-champ { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--sp-2); padding: 10px 0; border-bottom: 1px solid var(--va-filet); font-size: 1rem; color: var(--va-encre); }
.va-champ em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--va-sourdine); align-self: center; }
.va-prio { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.va-prio i { width: 8px; height: 8px; background: var(--red); }   /* l'étape active */
html[data-motion="on"] .va-exp-3 .va-note { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
html[data-motion="on"] .va-exp-3 .va-fleche { transform: scaleX(0); transition: transform 500ms var(--ease-out) 500ms; }
html[data-motion="on"] .va-exp-3 .va-champ { opacity: 0; transform: translateX(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(900ms + var(--o) * 110ms); }
html[data-motion="on"] .va-exp-3.vu .va-note { opacity: 1; transform: none; }
html[data-motion="on"] .va-exp-3.vu .va-fleche { transform: none; }
html[data-motion="on"] .va-exp-3.vu .va-champ { opacity: 1; transform: none; }


/* ═══════════════ TÉLÉPHONE : chaque expertise devient une étape ═══════════════ */
@media (max-width: 860px) {
  .va-transition { height: 64px; }
  .va-fil { left: 12px; }
  :root { --va-centre-y: 120px; }
  .cernes { left: auto; right: -360px; top: var(--va-centre-y); width: 840px; height: 840px; transform: translate(0, -50%); }
  .va-fil-ivoire { display: none; }
  .va-tete { padding: 72px 0 56px; }
  .va-tete h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .va-intro { grid-template-columns: 1fr; gap: var(--sp-3); }
  .va-intro p { font-size: 1.0625rem; max-width: none; }

  .va-exp { padding: var(--sp-6) 0; }
  .va-grille { display: flex; flex-direction: column; gap: var(--sp-3); }
  .va-exp .va-phrase { order: 1; max-width: none; }
  .va-service { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .va-demo { order: 2; margin: var(--sp-2) 0; }
  .va-texte { order: 3; }
  .va-texte p { max-width: none; }

  /* 02 : la chaîne devient verticale, la tâche descend */
  .va-chaine { height: auto; min-height: 0; margin: var(--sp-2) 0; }
  .va-rail { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top center; }
  html[data-motion="on"] .va-exp-2 .va-rail { transform: scaleY(0); }
  .va-tache { left: 0; top: 0; margin: -6px 0 0 0; }
  .va-noeud { position: relative; top: auto; left: auto; right: auto; width: auto; transform: none; text-align: left; padding: 0 0 28px 28px; }
  .va-noeud i { position: absolute; left: 2px; top: 5px; margin: 0; }
  .va-n2 i { left: 0; top: 3px; }
  .va-n3 i { margin: 0; }
  .va-n3 { padding-bottom: 0; }
  @keyframes va-voyage {
    0%   { opacity: 0; top: 0; }
    8%   { opacity: 1; }
    38%  { top: 50%; }
    54%  { top: 50%; }
    92%  { top: 100%; opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  /* 03 : note, flèche vers le bas, fiche */
  .va-exp-3 .va-terrain { grid-template-columns: 1fr; gap: var(--sp-2); }
  .va-fleche { width: 1px; height: 32px; margin-left: 12px; transform-origin: top center; }
  .va-fleche::after { right: auto; left: -4px; top: auto; bottom: 0; transform: rotate(135deg); }
  html[data-motion="on"] .va-exp-3 .va-fleche { transform: scaleY(0); }
  .va-note { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cerne, .fente, .va-trace path, .va-trace rect { stroke-dashoffset: 0 !important; }
  .impact, .va-joint, .va-noeud i { transform: none !important; }
  .va-contenu > *, .va-note, .va-champ { opacity: 1 !important; transform: none !important; }
  .va-tache { display: none; }
}


/* ═══════════════════ 3. DÉMONSTRATION ═══════════════════ */
.demo { background: var(--canvas); color: var(--text); padding: var(--sp-8) 0; }
.demo-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.demo-tete h2 { margin-top: var(--sp-3); color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; }
.demo-intro { margin-top: var(--sp-4); font-size: 1.125rem; line-height: 1.55; max-width: 40ch; }
.demo-fine { margin-top: var(--sp-4); font-size: 0.9375rem; line-height: 1.55; color: var(--muted); max-width: 44ch; }
.demo .label { display: inline-flex; align-items: center; gap: 10px; }
.demo-vif { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
html[data-motion="on"] .demo-vif { animation: demo-vif 2.4s ease-out infinite; }
@keyframes demo-vif { 0% { box-shadow: 0 0 0 0 rgba(225, 6, 26, 0.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(225, 6, 26, 0); } }

/* L'outil : un fil vertical à gauche, comme la chaîne d'automatisation. */
.demo-outil { position: relative; padding-left: 36px; }
.demo-outil::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--ligne-ivoire-forte); }
.demo-forme { display: grid; gap: 12px; }
.demo-forme .label { color: var(--text); }
.demo-forme textarea, .demo-forme select {
  width: 100%; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--ligne-ivoire-forte); padding: 12px 0;
  font: inherit; font-size: 1.0625rem; line-height: 1.5; resize: vertical;
}
.demo-forme textarea::placeholder { color: var(--muted); }
.demo-forme textarea:focus-visible, .demo-forme select:focus-visible { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.demo-forme select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2efe9' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center; }
.demo-forme select option { color: var(--canvas); }
.demo-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; }
.demo-bouton {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 46px; padding: 0 18px;
  font: inherit; font-family: var(--f-mono); font-size: var(--t-small); font-weight: 500; color: var(--canvas);
  background: var(--ink); border: 0; cursor: pointer; transition: transform var(--dur) var(--ease);
}
.demo-bouton:hover span { transform: translateX(2px); }
.demo-bouton span { transition: transform var(--dur) var(--ease); }
.demo-bouton:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.demo-compteur { font-family: var(--f-mono); font-size: var(--t-annot); color: var(--muted); text-align: right; }
.demo-compteur.trop { color: var(--red); }

.demo-sortie { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--ligne-ivoire); }
.demo-sortie-titre { margin-bottom: var(--sp-2); }
.demo-comprise { color: var(--ink); font-size: 1.0625rem; max-width: 52ch; }
.demo-etapes { margin: var(--sp-4) 0; padding: 0; list-style: none; display: grid; gap: 0; }
.demo-etapes li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.demo-etapes li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.demo-etapes li.humain::before { width: 13px; height: 13px; left: -2px; top: 17px; background: var(--red); }
.demo-etapes li.resultat::before { border-radius: 0; background: var(--ink); }
.demo-etapes b { font-weight: 600; color: var(--ink); }
.demo-etapes small { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.06em; color: var(--muted); }
.demo-etapes li.humain small { color: var(--text); }
.demo-temps { color: var(--text); max-width: 52ch; }
.demo-temps b { color: var(--ink); font-weight: 600; }
.demo-suite { margin-top: var(--sp-3); }
html[data-motion="on"] .demo-etapes li { transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
html[data-motion="on"] .demo-sortie.calcul .demo-etapes li { opacity: 0; transform: translateX(10px); }

/* ═══════════════════ 5. INTERLUDE — LE PIC-BOIS ═══════════════════ */
.interlude { position: relative; background: #020202; color: var(--ink); min-height: min(88vh, 820px); display: grid; align-items: end; overflow: hidden; }
/* Actif v2 (1672 × 941) : la photographie porte elle-même son tiers gauche
   noir, elle couvre donc toute la section ; les mots se posent dans ce noir.
   Cadrage : ancré à droite, légèrement haut, pour garder huppe, œil et bec. */
.interlude-image { position: absolute; inset: 0; margin: 0; }
.interlude-image img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 42%; display: block; }
.interlude-texte { position: relative; z-index: 2; width: 100%; padding-top: 96px; padding-bottom: 80px; }
.interlude-mots { margin: 0; display: grid; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; text-transform: uppercase; color: var(--ink); max-width: 36%; }
html[data-motion="on"] [data-rv="image"] { opacity: 1; }
html[data-motion="on"] .interlude-image img { opacity: 0; transition: opacity 1400ms var(--ease-out); }
html[data-motion="on"] .interlude-image.vu img { opacity: 1; }
html[data-motion="on"] .interlude-mots span { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
html[data-motion="on"] .interlude-mots span:nth-child(2) { transition-delay: 180ms; }
html[data-motion="on"] .interlude-mots span:nth-child(3) { transition-delay: 360ms; }
html[data-motion="on"] .interlude-texte.vu .interlude-mots span { opacity: 1; transform: none; }

/* ═══════════════════ 6. PROJETS LIVRÉS ═══════════════════
   Deux projets sur deux colonnes d'alignement. À gauche : l'image 01 et la
   légende 02 partagent le même bord (colonne 2). À droite : la légende 01
   et l'image 02 commencent toutes deux sur l'axe (colonne 9), un fil qui
   court de l'une à l'autre. Index en marge, repères de coin, étiquette mono. */
.livres { background: var(--va-ivoire); color: var(--va-texte); padding: var(--sp-7) 0 var(--sp-7); }
.livres .label { color: var(--va-sourdine); }
.livres :focus-visible, .etapes :focus-visible, .appel :focus-visible { outline-color: var(--va-encre); }
.livres-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--va-encre); }
.livres-etiquette { margin: 0; font-weight: 500; }
.livres .lien-mono { color: var(--va-encre); border-bottom-color: var(--va-filet-fort); }
.livres .lien-mono:hover { border-bottom-color: var(--va-encre); }
.livres-grille { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: 0; }
/* l'axe : dans la gouttière avant la colonne 9, du haut de la légende 01 au haut de l'image 02 */
.livres-axe { grid-column: 9; grid-row: 1; position: relative; margin-left: calc(-1 * var(--sp-3) / 2); width: 1px; justify-self: start; align-self: start; background: var(--va-filet-fort); margin-top: var(--sp-5); height: calc(100% - var(--sp-5) + var(--sp-6)); }
.livres-axe i { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; background: var(--va-encre); }
.livre { position: relative; margin: 0; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--sp-3); align-items: start; padding: var(--sp-5) 0 0; }
.livre-index { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.12em; color: var(--va-encre); padding-top: 2px; }
.livre-cadre { position: relative; display: block; }
.livre-image { position: relative; display: block; overflow: hidden; background: var(--band); }
.livre-image img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; transition: transform 900ms var(--ease-out); }
.livre-image:hover img { transform: scale(1.015); }
/* repères de coin, comme les croix du cadre du héros : deux L en encre, posés hors de l'image (des traits de coupe) */
.livre-coin { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.livre-coin-hg { left: -8px; top: -8px; border-left: 1px solid var(--va-encre); border-top: 1px solid var(--va-encre); }
.livre-coin-bd { right: -8px; bottom: -8px; border-right: 1px solid var(--va-encre); border-bottom: 1px solid var(--va-encre); }
.livre figcaption { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; padding-top: 14px; border-top: 1px solid var(--va-encre); }
.livre-nom { font-size: 1.25rem; font-weight: 600; color: var(--va-encre); letter-spacing: -0.01em; }
.livre-desc { max-width: 30ch; }
.livre-repere { margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--va-sourdine); }
/* 01 : index col 1 · image cols 2–7 (3 : 2) · légende cols 9–11, sur l'axe */
.livre-a { grid-row: 1; }
.livre-a .livre-index { grid-column: 1; }
.livre-a .livre-cadre { grid-column: 2 / span 6; }
.livre-a .livre-image { aspect-ratio: 3 / 2; }
.livre-a figcaption { grid-column: 9 / span 3; }
/* 02 : index col 1 · légende cols 2–4, sur le bord de l'image 01 · image cols 9–11 (4 : 5), sur l'axe */
.livre-b { grid-row: 2; padding-top: var(--sp-6); }
.livre-b .livre-index { grid-column: 1; grid-row: 1; }
.livre-b figcaption { grid-column: 2 / span 3; grid-row: 1; }
.livre-b .livre-cadre { grid-column: 9 / span 3; grid-row: 1; }
.livre-b .livre-image { aspect-ratio: 4 / 5; }
/* la légende 02 se pose à la même hauteur que le haut de l'image 02 ; son filet prolonge le bord de l'image 01 */
.livre-b figcaption { border-top-color: var(--va-encre); }
html[data-motion="on"] [data-rv="masque"] .livre-image { clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease-out); }
html[data-motion="on"] [data-rv="masque"].vu .livre-image { clip-path: inset(0 0 0 0); }
html[data-motion="on"] [data-rv="masque"] figcaption { opacity: 0; transform: translateY(var(--rise-block)); transition: opacity 600ms var(--ease-out) 250ms, transform 600ms var(--ease-out) 250ms; }
html[data-motion="on"] [data-rv="masque"].vu figcaption { opacity: 1; transform: none; }

/* ═══════════════════ 7. MUNICIPALITÉS ═══════════════════
   Le fil entre par le haut dans la colonne 9, longe deux annotations,
   descend jusqu'au parcours et le rencontre sur la décision humaine : le
   seul point rouge de la section. Le parcours court d'un bord à l'autre,
   dépôt → suivi → décision → réponse ; la demande (un carré) avance,
   s'arrête là où une personne tranche, puis repart vers la réponse. */
.gov { position: relative; background: var(--canvas); color: var(--text); padding: 0 0 var(--sp-8); overflow: hidden; }
.gov-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-6); align-items: start; }
.gov-tete { grid-column: 1 / span 4; grid-row: 1; padding-top: var(--sp-8); }
.gov-tete h2 { margin-top: var(--sp-3); color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; }
.gov-texte { grid-column: 5 / span 4; grid-row: 1; display: grid; gap: var(--sp-3); padding-top: var(--sp-8); }
.gov-lead { font-size: 1.2rem; line-height: 1.45; color: var(--ink); max-width: 36ch; letter-spacing: -0.01em; }
.gov-texte p:not(.gov-lead) { max-width: 46ch; }
/* la colonne du fil : colonne 9, du haut de la section jusqu'au parcours */
.gov-colonne { grid-column: 9 / span 4; grid-row: 1; align-self: stretch; position: relative; min-height: 100%; }
.gov-entree { position: absolute; left: 0; top: 0; bottom: calc(-1 * var(--sp-6)); width: 1px; background: var(--ligne-ivoire-forte); transform-origin: top center; }
.gov-annot { position: absolute; left: 18px; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.12em; line-height: 1.6; color: var(--muted); text-transform: uppercase; }
.gov-annot-1 { top: var(--sp-8); }
.gov-annot-2 { top: calc(var(--sp-8) + 44px); }
/* le parcours : une ligne, quatre stations posées sur les colonnes 1, 4, 9 et le bord droit */
.gov-parcours { grid-column: 1 / -1; grid-row: 2; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); padding-top: 40px; }
.gov-fil { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.gov-demande { position: absolute; left: 0; top: -6px; width: 13px; height: 13px; margin-left: -6px; background: var(--ink); }
.gov-etape { position: relative; display: grid; gap: 4px; }
.gov-e1 { grid-column: 1 / span 3; }
.gov-e2 { grid-column: 4 / span 3; }
.gov-e3 { grid-column: 9 / span 2; }
.gov-e4 { grid-column: 11 / span 2; }
.gov-etape i { position: absolute; left: 0; top: -44px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--ink); }
.gov-etape.humain i { width: 13px; height: 13px; top: -46px; margin-left: -6px; background: var(--red); }
.gov-e4 i { left: auto; right: 0; margin-left: 0; margin-right: -4px; }
.gov-e4 { text-align: right; }
.gov-etape b { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.gov-etape small { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.04em; line-height: 1.5; color: var(--muted); }
/* le fil vertical se prolonge jusqu'à la ligne ; le point rouge est posé à son pied */
html[data-motion="on"] .gov-entree { transform: scaleY(0); transition: transform 900ms var(--ease-out); }
html[data-motion="on"] .gov-colonne.vu .gov-entree { transform: none; }
html[data-motion="on"] [data-rv="trace"] { opacity: 1; }
html[data-motion="on"] [data-rv="trace"] .gov-fil { transform: scaleX(0); transition: transform 1100ms var(--ease-out) 500ms; }
html[data-motion="on"] [data-rv="trace"] .gov-etape { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(700ms + var(--o) * 260ms); }
html[data-motion="on"] [data-rv="trace"] .gov-etape i { transform: scale(0); transition: transform 360ms var(--ease-spring); transition-delay: calc(700ms + var(--o) * 260ms); }
html[data-motion="on"] [data-rv="trace"].vu .gov-fil { transform: none; }
html[data-motion="on"] [data-rv="trace"].vu .gov-etape { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="trace"].vu .gov-etape i { transform: none; }
html[data-motion="on"] .gov-demande { opacity: 0; }
html[data-motion="on"] [data-rv="trace"].vu .gov-demande { animation: gov-avance 4200ms var(--ease-out) 1400ms forwards; }
/* la demande part du dépôt, passe le suivi, s'arrête sur la décision (colonne 10), puis rejoint la réponse */
@keyframes gov-avance {
  0%   { opacity: 0; left: 0; }
  8%   { opacity: 1; }
  30%  { left: var(--gov-x2); }
  40%  { left: var(--gov-x2); }
  66%  { left: var(--gov-x3); }
  80%  { left: var(--gov-x3); }
  100% { left: 100%; opacity: 1; }
}
/* positions des stations 2 et 3 sur la ligne : bord gauche des colonnes 4 et 10, en fraction de la largeur (12 colonnes, 11 gouttières de 24 px) */
.gov-parcours { --gov-x2: calc((100% + var(--sp-3)) * 3 / 12); --gov-x3: calc((100% + var(--sp-3)) * 8 / 12); }
html:not([data-motion="on"]) .gov-demande { left: 100%; }   /* sans JavaScript ou mouvement coupé : la demande est arrivée */

/* ═══════════════════ 8. DÉROULEMENT — un fil qui descend en escalier ═══════════════════
   Trois rangées, trois étapes de quatre colonnes, chacune un cran plus bas et
   plus à droite. Le fil longe la gauche de chaque étape, tourne au bas, court
   jusqu'à la suivante, et finit sur le point rouge de la mise en service. */
.etapes { background: var(--va-ivoire); color: var(--va-texte); padding: var(--sp-8) 0; }
.etapes .label { color: var(--va-sourdine); }
.etapes-tete h2 { margin-top: var(--sp-3); color: var(--va-encre); font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
.etapes-liste { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: 0; position: relative; align-items: start; }
.etape { position: relative; padding: var(--sp-3) 0 var(--sp-4) 28px; display: grid; gap: 10px; align-content: start; }
.etape:nth-child(1) { grid-column: 1 / span 4; grid-row: 1; }
.etape:nth-child(2) { grid-column: 5 / span 4; grid-row: 2; }
.etape:nth-child(3) { grid-column: 9 / span 4; grid-row: 3; }
/* le fil vertical de chaque étape, de son haut à son bas */
.etape::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--va-encre); transform-origin: top center; }
/* le coude : au bas de l'étape, le fil court vers la gauche de la suivante (une largeur d'étape + une gouttière) */
.etape:not(.etape-fin)::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% + var(--sp-3)); height: 1px; background: var(--va-encre); transform-origin: left center; }
/* le nœud : un carré posé sur le fil, à hauteur du numéro */
.etape-no { position: relative; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.12em; color: var(--va-sourdine); }
.etape-no::before { content: ""; position: absolute; left: -32px; top: 4px; width: 9px; height: 9px; background: var(--va-encre); }
.etape h3 { color: var(--va-encre); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.15; letter-spacing: -0.02em; }
.etape p { max-width: 34ch; }
/* le point d'arrivée, rouge, posé au pied du dernier fil : la mise en service */
.etape-fin { padding-bottom: var(--sp-3); }
.etape-arrivee { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-2); font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--va-encre); }
.etape-arrivee i { position: absolute; left: -34px; top: 50%; margin-top: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--red); }
.etape-fin::before { bottom: auto; height: calc(100% - var(--sp-3) - 6px); }   /* le fil s'arrête sur le point rouge */
.etapes-suite { margin: var(--sp-4) 0 0 calc((100% + var(--sp-3)) * 8 / 12 + 28px); }   /* sous 03, dans le prolongement du fil */
.etapes .lien-mono { color: var(--va-encre); border-bottom-color: var(--va-filet-fort); }
.etapes .lien-mono:hover { border-bottom-color: var(--va-encre); }
/* révélation : le fil descend, l'étape apparaît quand il l'atteint, le coude court vers la suivante */
html[data-motion="on"] [data-rv="fil"] { opacity: 1; }
html[data-motion="on"] [data-rv="fil"] .etape::before { transform: scaleY(0); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--o) * 1000ms); }
html[data-motion="on"] [data-rv="fil"] .etape::after { transform: scaleX(0); transition: transform 350ms var(--ease-out); transition-delay: calc(var(--o) * 1000ms + 650ms); }
html[data-motion="on"] [data-rv="fil"] .etape > * { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--o) * 1000ms + 180ms); }
html[data-motion="on"] [data-rv="fil"] .etape-no::before { transform: scale(0); transition: transform 320ms var(--ease-spring); transition-delay: calc(var(--o) * 1000ms + 120ms); }
html[data-motion="on"] [data-rv="fil"] .etape-arrivee i { transform: scale(0); transition: transform 360ms var(--ease-spring) 2800ms; }
html[data-motion="on"] [data-rv="fil"].vu .etape::before, html[data-motion="on"] [data-rv="fil"].vu .etape::after, html[data-motion="on"] [data-rv="fil"].vu .etape-no::before { transform: none; }
html[data-motion="on"] [data-rv="fil"].vu .etape > * { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="fil"].vu .etape-arrivee i { transform: none; }

/* ═══════════════════ 9. FONDATEUR ═══════════════════
   La photographie est posée grande, à gauche, jusqu'au bord de l'écran
   (colonnes 1–5), en noir et blanc presque complet, avec un grain très fin
   et une ombre intérieure qui fond le gris du studio dans le noir. À hauteur
   du regard, un fil part de la photo et rejoint le titre : un point rouge. */
.qui { background: var(--canvas); color: var(--text); padding: var(--sp-8) 0 0; overflow: hidden; }
.qui-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); align-items: start; }
.qui-portrait { grid-column: 1 / span 5; grid-row: 1; position: relative; margin: 0 0 0 calc(-1 * var(--marge-cadre)); }
.qui-cadre { position: relative; display: block; overflow: hidden; background: var(--band); }
.qui-cadre::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -140px 110px -80px var(--canvas), inset -90px 0 90px -90px var(--canvas); pointer-events: none; }
.qui-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; filter: grayscale(0.88) contrast(1.12) brightness(0.84); }
/* le grain : un bruit SVG très léger, fondu en lumière douce — pas un dégradé, pas un flou */
.qui-grain { position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  background-size: 160px 160px; }
.qui-legende { position: absolute; left: var(--marge-cadre); bottom: 18px; margin: 0; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* le fil du regard : part du bord droit de la photo, à hauteur des yeux (≈ 31 % de la hauteur), et s'arrête sur un point rouge dans la gouttière du titre */
.qui-regard { position: absolute; left: 100%; top: 23%; width: calc((100% - var(--marge-cadre) - 4 * var(--sp-3)) / 5 + 2 * var(--sp-3) - 20px); height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.qui-regard i { position: absolute; right: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.qui-texte { grid-column: 7 / -1; grid-row: 1; display: grid; gap: var(--sp-3); padding-top: clamp(80px, 9vw, 150px); padding-bottom: var(--sp-8); }
.qui-texte h2 { color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; }
.qui-lead { font-size: 1.25rem; line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; }
.qui-texte p:not(.qui-lead) { max-width: 46ch; }
html[data-motion="on"] .qui-portrait[data-rv="masque"] .qui-cadre { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-out); }
html[data-motion="on"] .qui-portrait[data-rv="masque"].vu .qui-cadre { clip-path: inset(0 0 0 0); }
html[data-motion="on"] .qui-portrait[data-rv="masque"] .qui-regard { transform: scaleX(0); transition: transform 500ms var(--ease-out) 900ms; }
html[data-motion="on"] .qui-portrait[data-rv="masque"] .qui-regard i { transform: scale(0); transition: transform 360ms var(--ease-spring) 1350ms; }
html[data-motion="on"] .qui-portrait[data-rv="masque"].vu .qui-regard, html[data-motion="on"] .qui-portrait[data-rv="masque"].vu .qui-regard i { transform: none; }

/* ═══════════════════ 10. APPEL FINAL — la ligne arrive quelque part ═══════════════════
   Le 47e parallèle entre par la droite, à 120 px du haut, avec de l'air.
   Il traverse la section et s'arrête sur un point rouge posé au-dessus du
   titre, au bord gauche du cadre : la destination. Du point, un court fil
   descend jusqu'au titre ; sous le titre, l'action. Les coordonnées tiennent
   les colonnes 10–12, sous la ligne. */
.appel { position: relative; background: var(--va-ivoire); color: var(--va-texte); padding: 120px 0 var(--sp-8); overflow: hidden; }
.appel-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-6); align-items: start; padding-top: 64px; }
.appel-parallele { position: absolute; left: max(var(--marge-cadre), calc((100% - 1600px) / 2 + var(--marge-cadre))); right: 0; top: 120px; height: 2px; }
.appel-ligne { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform-origin: right center; }
.appel-etiquette { position: absolute; left: 28px; top: 12px; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.12em; color: var(--va-encre); }
.appel-joint { position: absolute; left: 0; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--red); }
.appel-descente { position: absolute; left: 0; top: 8px; width: 1px; height: 44px; background: var(--va-encre); transform-origin: top center; }
html[data-motion="on"] .appel-parallele[data-rv="trace"] .appel-ligne { transform: scaleX(0); transition: transform 1000ms var(--ease-out); }
html[data-motion="on"] .appel-parallele[data-rv="trace"] .appel-joint { transform: scale(0); transition: transform 360ms var(--ease-spring) 900ms; }
html[data-motion="on"] .appel-parallele[data-rv="trace"] .appel-descente { transform: scaleY(0); transition: transform 400ms var(--ease-out) 1100ms; }
html[data-motion="on"] .appel-parallele[data-rv="trace"].vu .appel-ligne, html[data-motion="on"] .appel-parallele[data-rv="trace"].vu .appel-joint, html[data-motion="on"] .appel-parallele[data-rv="trace"].vu .appel-descente { transform: none; }
.appel-texte { grid-column: 1 / span 7; display: grid; gap: var(--sp-3); }
.appel-texte h2 { color: var(--va-encre); font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 14ch; text-wrap: balance; }
.appel-texte p { font-size: 1.125rem; line-height: 1.55; max-width: 44ch; }
/* l'action : noir, mono, angles vifs ; un joint rouge devant, deux repères de coin autour — le langage du héros */
.appel-action {
  position: relative; justify-self: start; margin-top: var(--sp-2);
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 56px; padding: 0 26px 0 22px;
  font-family: var(--f-mono); font-size: 1.0625rem; font-weight: 500; color: var(--va-ivoire); background: var(--va-encre);
  transition: gap var(--dur) var(--ease);
}
.appel-action i { width: 8px; height: 8px; background: var(--red); }
.appel-action::before, .appel-action::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; transition: transform var(--dur) var(--ease); }
.appel-action::before { left: -7px; top: -7px; border-left: 1px solid var(--va-encre); border-top: 1px solid var(--va-encre); }
.appel-action::after { right: -7px; bottom: -7px; border-right: 1px solid var(--va-encre); border-bottom: 1px solid var(--va-encre); }
.appel-action:hover { gap: 1em; }
.appel-action:hover::before { transform: translate(-3px, -3px); }
.appel-action:hover::after { transform: translate(3px, 3px); }
.appel-action:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
/* les coordonnées, colonnes 10–12, sous la ligne */
.appel-coords { grid-column: 10 / -1; margin: 0; display: grid; gap: var(--sp-3); border-top: 1px solid var(--va-encre); padding-top: var(--sp-3); }
.appel-coords .label { color: var(--va-sourdine); }
.appel-coords dd { margin: 6px 0 0; color: var(--va-encre); max-width: 26ch; }
.appel-coords a { display: inline-block; padding: 12px 0; border-bottom: 1px solid var(--va-filet-fort); transition: border-color var(--dur) var(--ease); }
.appel-coords a:hover { border-bottom-color: var(--va-encre); }

/* ═══════════════════ TÉLÉPHONE ═══════════════════ */
@media (max-width: 860px) {
  .demo { padding: var(--sp-7) 0; }
  .demo-grille { grid-template-columns: 1fr; gap: var(--sp-5); }
  .demo-tete h2 { max-width: none; }
  .demo-intro, .demo-fine { max-width: none; }
  .demo-outil { padding-left: 0; }
  .demo-outil::before { display: none; }
  .demo-bas { grid-template-columns: 1fr; }
  .demo-bouton { justify-content: center; width: 100%; }
  .demo-forme textarea, .demo-forme select { font-size: 1rem; }

  .interlude { min-height: 0; }
  .interlude-image { position: relative; inset: auto; aspect-ratio: 3 / 4; max-height: none; }
  .interlude-image img { object-position: center; }
  .interlude-texte { padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
  .interlude-mots { font-size: clamp(2.2rem, 11vw, 3.2rem); max-width: none; }


  .livres { padding: var(--sp-6) 0 var(--sp-7); }
  .livres-grille { grid-template-columns: auto 1fr; column-gap: var(--sp-2); }
  /* sur téléphone, l'axe devient un fil à gauche, dans la colonne des index, qui relie 01 à 02 */
  .livres-axe { grid-column: 1; grid-row: 1; justify-self: start; margin: calc(var(--sp-4) + 26px) 0 0 4px; height: calc(100% - var(--sp-4) - 26px + var(--sp-5) - 8px); }
  .livres-axe i { display: none; }
  .livre { grid-column: 1 / -1; grid-template-columns: subgrid; padding: var(--sp-4) 0 0; }
  .livre-index { grid-column: 1; grid-row: 1; padding-right: var(--sp-2); }
  .livre .livre-cadre { grid-column: 2; grid-row: 1; }
  .livre figcaption { grid-column: 2; grid-row: 2; margin-top: var(--sp-3); }
  .livre-a .livre-image { aspect-ratio: 4 / 3; }
  .livre-b { padding-top: var(--sp-5); }
  .livre-b .livre-cadre { width: 72%; justify-self: end; }
  .livre-b .livre-image { aspect-ratio: 4 / 5; }   /* deux compositions, même sur téléphone */
  .livre-b figcaption { grid-row: 2; }
  .livre-coin { width: 10px; height: 10px; }
  .livre-coin-hg { left: -6px; top: -6px; }
  .livre-coin-bd { right: -6px; bottom: -6px; }

  .gov { padding: 0 0 var(--sp-7); }
  .gov-grille { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .gov-tete, .gov-texte { grid-column: auto; grid-row: auto; padding-top: 0; }
  .gov-tete { padding-top: var(--sp-7); }
  .gov-tete h2, .gov-lead, .gov-texte p { max-width: none; }
  /* le fil entre par la gauche, dans la marge du parcours, et descend jusqu'au dépôt */
  .gov-colonne { grid-column: auto; grid-row: auto; display: none; }
  .gov-parcours { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-2) 0 0 28px; margin-top: var(--sp-2); }
  .gov-parcours::before { content: ""; position: absolute; left: 6px; top: calc(-1 * var(--sp-4) - var(--sp-2)); height: calc(var(--sp-4) + var(--sp-2)); width: 1px; background: var(--ligne-ivoire); }
  .gov-e1, .gov-e2, .gov-e3, .gov-e4 { grid-column: auto; text-align: left; }
  .gov-fil { left: 6px; right: auto; top: 0; bottom: auto; width: 1px; height: calc(100% - 40px); transform-origin: top center; }   /* jusqu'au nœud de la réponse */
  html[data-motion="on"] [data-rv="trace"] .gov-fil { transform: scaleY(0); }
  .gov-demande { left: 0; top: 0; margin: -6px 0 0 0; }
  @keyframes gov-avance { 0% { opacity: 0; top: 0; } 8% { opacity: 1; } 30% { top: 30%; } 40% { top: 30%; } 66% { top: 60%; } 80% { top: 60%; } 100% { top: calc(100% - 40px); opacity: 1; } }
  html:not([data-motion="on"]) .gov-demande { left: 0; top: calc(100% - 40px); }
  .gov-etape i, .gov-e4 i { left: -26px; right: auto; top: 6px; margin: 0; }
  .gov-etape.humain i { left: -28px; top: 4px; }

  .etapes { padding: var(--sp-7) 0; }
  /* sur téléphone : le même fil, en un seul trait vertical à gauche ; chaque étape s'y accroche par son nœud,
     et le fil descend d'un cran vers la droite à chaque étape (8 px) pour garder l'escalier */
  .etapes-liste { grid-template-columns: 1fr; row-gap: 0; margin-top: var(--sp-5); }
  .etape:nth-child(n) { grid-column: auto; grid-row: auto; padding: var(--sp-3) 0 var(--sp-5) 28px; }
  .etape:nth-child(2) { margin-left: 12px; }
  .etape:nth-child(3) { margin-left: 24px; }
  .etape:not(.etape-fin)::after { width: 12px; }
  .etape-no::before { left: -32px; }
  .etape p { max-width: none; }
  .etapes-suite { margin: var(--sp-3) 0 0 52px; }   /* sous 03, décalé comme lui */

  .qui { padding: var(--sp-7) 0 0; }
  .qui-grille { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .qui-portrait { grid-column: auto; grid-row: auto; width: calc(78% + var(--marge-cadre)); margin: 0 0 0 calc(-1 * var(--marge-cadre)); }
  .qui-portrait img { aspect-ratio: 4 / 5; }
  .qui-regard { display: none; }   /* le texte est dessous : le fil du regard n'a pas de cible */
  .qui-legende { position: static; display: block; margin-top: 12px; padding-left: var(--marge-cadre); }
  .qui-texte { grid-column: auto; grid-row: auto; padding-top: 0; padding-bottom: var(--sp-7); }
  .qui-texte h2, .qui-texte p { max-width: none; }

  .appel { padding: 96px 0 var(--sp-7); }
  .appel-grille { grid-template-columns: 1fr; row-gap: var(--sp-5); padding-top: 56px; }
  .appel-descente { height: 36px; }
  .appel-texte, .appel-coords { grid-column: auto; }
  .appel-texte h2 { max-width: none; }
  .appel-action { width: 100%; justify-content: center; white-space: nowrap; font-size: 1rem; }
}
@media (max-width: 480px) { .appel-action { font-size: 0.9375rem; padding: 0 18px 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  .demo-vif { animation: none !important; }
  .interlude-image img, .interlude-mots span, .gov-etape, .gov-etape i, .demo-etapes li { opacity: 1 !important; transform: none !important; }
  .gov-fil, .gov-entree, .etape::before, .etape::after, .etape-no::before, .appel-ligne, .appel-joint, .appel-descente, .qui-regard, .qui-regard i { transform: none !important; }
  .gov-demande { display: none; }
  .etape > *, .etape-arrivee i { opacity: 1 !important; transform: none !important; }
  .livre-image, .qui-cadre { clip-path: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   LE HÉROS SUR TÉLÉPHONE — correctif du 25 sept. 2026, approuvé.
   Élément verrouillé rouvert sur instruction.

   POURQUOI. Sur ordinateur, les cinq « entrées » sont la moitié gauche
   d'un schéma : ce qui entre converge vers le joint rouge, qui ressort
   en trois réponses. C'est une géométrie HORIZONTALE.

   Empilée sur un téléphone, cette géométrie disparaît. Il reste cinq
   mots sans étiquette, posés juste au-dessus de trois autres — et rien
   ne dit au visiteur lesquels sont l'offre. Le seul message qui compte
   dans le premier écran s'en trouve dilué.

   Sans elles, le joint rouge relie directement la réalité du visiteur
   aux trois réponses : le récit tient, l'écran respire, et l'appel à
   défiler remonte dans le champ de vision. Le schéma complet reste
   intact sur tablette et sur ordinateur.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .heros .entrees { display: none; }
}