/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PAGE SERVICES (révision du 20 sept. 2026).
   Chargé par cette page seulement. pages.css fournit l'en-tête, la bande
   noire, l'appel compact. Ici : un geste par section, tous construits en
   filets, aplats et un seul rouge porteur de sens par écran. Aucun
   dégradé, aucune lueur, aucune donnée inventée.
   ══════════════════════════════════════════════════════════════ */

.sv-micro { margin: 0; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-sourdine); }
.bande-noire .sv-micro { color: var(--muted); }

/* ── Le héros : un titre dominant, la convergence à droite ───────
   H1 sur les deux tiers (colonnes 1–8), 68–82 px sur grand écran ; à
   droite, trois matières (trame Web, flux, fragment d'interface) dont
   les liaisons se tracent jusqu'au joint rouge. */
.sv-heros { padding: var(--sp-7) 0 var(--sp-4); overflow: hidden; }
.sv-heros .cadre-section { grid-template-rows: auto auto auto auto auto; align-items: start; }
.sv-heros .label:first-child { grid-row: 1; }
.sv-heros .fil-entree { grid-row: 2; }
.sv-heros h1 { grid-column: 1 / span 8; grid-row: 3; font-size: clamp(2.6rem, 5.7vw, 5.125rem); line-height: 1; letter-spacing: -0.04em; max-width: 14ch; }
.sv-heros .page-chapo { grid-column: 1 / span 5; grid-row: 4; max-width: 40ch; margin-top: var(--sp-4); }
.sv-convergence { grid-column: 10 / -1; grid-row: 3 / span 4; margin: 0; align-self: center; justify-self: end; width: 100%; max-width: 520px; }
.sv-convergence svg { display: block; width: 100%; height: auto; overflow: visible; }
.cv-trait { fill: none; stroke: var(--pg-encre); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cv-plein { fill: var(--pg-encre); }
.cv-lien { fill: none; stroke: var(--pg-encre); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cv-joint { fill: var(--red); }
.cv-note { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--pg-sourdine); }
html[data-motion="on"] .cv-trame, html[data-motion="on"] .cv-flux, html[data-motion="on"] .cv-fiche { opacity: 0; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
html[data-motion="on"] .cv-trame { transform: translate(-16px, -10px); transition-delay: 300ms; }
html[data-motion="on"] .cv-flux { transform: translate(-16px, 10px); transition-delay: 420ms; }
html[data-motion="on"] .cv-fiche { transform: translate(16px, 0); transition-delay: 540ms; }
html[data-motion="on"] .cv-lien { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1100ms var(--ease-out); }
html[data-motion="on"] .cv-lien-1 { transition-delay: 900ms; }
html[data-motion="on"] .cv-lien-2 { transition-delay: 1050ms; }
html[data-motion="on"] .cv-lien-3 { transition-delay: 1200ms; }
html[data-motion="on"] .cv-joint { transform: scale(0); transform-origin: 310px 236px; transition: transform 380ms var(--ease-spring) 1900ms; }
html[data-motion="on"] .cv-note { opacity: 0; transition: opacity 600ms var(--ease-out) 2100ms; }
html[data-motion="on"].pret .cv-trame, html[data-motion="on"].pret .cv-flux, html[data-motion="on"].pret .cv-fiche { opacity: 1; transform: none; }
html[data-motion="on"].pret .cv-lien { stroke-dashoffset: 0; }
html[data-motion="on"].pret .cv-joint { transform: none; }
html[data-motion="on"].pret .cv-note { opacity: 1; }


/* ── L'index des trois services : la première chose qu'on doit comprendre ──
   Sur une page Services, le nom des trois offres est l'information que le
   visiteur cherche en premier. Il est donc posé en grand dans le premier
   écran, sur trois filets, et chaque entrée mène à sa section. Monochrome :
   le seul rouge de cet écran est le joint du schéma. */
.sv-index-tete { grid-column: 1 / span 9; grid-row: 5; margin: var(--sp-5) 0 var(--sp-2); font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-sourdine); }
.sv-index { grid-column: 1 / span 9; grid-row: 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-3); }
.sv-index a { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-2); align-content: start; padding: 14px 0 0; color: var(--pg-encre); }
/* le filet est tracé à l'arrivée : trois mesures qui se posent, l'une après l'autre */
.sv-index-filet { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--pg-encre); transform-origin: left center; }
.sv-index-nom { grid-column: 1; font-family: var(--f-mono); font-size: clamp(0.875rem, 1.05vw, 1rem); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; color: var(--pg-encre); }
.sv-index-fleche { grid-column: 2; grid-row: 1; font-family: var(--f-mono); font-size: 0.9375rem; color: var(--pg-sourdine); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
/* la plus-value porte l'emphase : c'est elle que le visiteur retient */
.sv-index-valeur { grid-column: 1 / -1; margin-top: 8px; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.sv-index a:hover .sv-index-fleche, .sv-index a:focus-visible .sv-index-fleche { transform: translateY(4px); color: var(--pg-encre); }
html[data-motion="on"] .sv-index-tete { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out) 380ms, transform 500ms var(--ease-out) 380ms; }
html[data-motion="on"] .sv-index-filet { transform: scaleX(0); transition: transform 520ms var(--ease-out); }
html[data-motion="on"] .sv-index a:nth-child(1) .sv-index-filet { transition-delay: 520ms; }
html[data-motion="on"] .sv-index a:nth-child(2) .sv-index-filet { transition-delay: 680ms; }
html[data-motion="on"] .sv-index a:nth-child(3) .sv-index-filet { transition-delay: 840ms; }
html[data-motion="on"] .sv-index-nom, html[data-motion="on"] .sv-index-fleche, html[data-motion="on"] .sv-index-valeur { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
html[data-motion="on"] .sv-index a:nth-child(1) .sv-index-nom, html[data-motion="on"] .sv-index a:nth-child(1) .sv-index-fleche { transition-delay: 760ms; }
html[data-motion="on"] .sv-index a:nth-child(1) .sv-index-valeur { transition-delay: 860ms; }
html[data-motion="on"] .sv-index a:nth-child(2) .sv-index-nom, html[data-motion="on"] .sv-index a:nth-child(2) .sv-index-fleche { transition-delay: 920ms; }
html[data-motion="on"] .sv-index a:nth-child(2) .sv-index-valeur { transition-delay: 1020ms; }
html[data-motion="on"] .sv-index a:nth-child(3) .sv-index-nom, html[data-motion="on"] .sv-index a:nth-child(3) .sv-index-fleche { transition-delay: 1080ms; }
html[data-motion="on"] .sv-index a:nth-child(3) .sv-index-valeur { transition-delay: 1180ms; }
html[data-motion="on"].pret .sv-index-tete, html[data-motion="on"].pret .sv-index-nom,
html[data-motion="on"].pret .sv-index-fleche, html[data-motion="on"].pret .sv-index-valeur { opacity: 1; transform: none; }
html[data-motion="on"].pret .sv-index-filet { transform: none; }


/* ── Le nom du service dans sa zone : lisible de loin, pas une légende ──
   Il reste sous le titre dans la hiérarchie sémantique, mais il cesse d'être
   un murmure de 13 px : corps plein, encre, sur un court filet. */
.sv-service { margin: 0 0 2px; font-family: var(--f-mono); font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; color: var(--pg-encre); position: relative; padding-top: 18px; }
.sv-service::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 2px; background: var(--pg-encre); }
.bande-noire .sv-service { color: var(--ink); }
.bande-noire .sv-service::before { background: var(--ink); }

/* ── Le repère de lecture : cinq noms sur un filet, le joint suit ──
   Collant sous le rail. Le joint rouge (9 px) glisse sous le nom actif
   (services.js pose --x). Sur la bande noire : inversé. */
.sv-repere { position: sticky; top: var(--rail-h); z-index: 30; background: var(--pg-ivoire); border-top: 1px solid var(--pg-encre); border-bottom: 1px solid var(--pg-filet); transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out); }
.sv-repere .cadre-section { position: relative; }
.sv-repere ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-4); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sv-repere ol::-webkit-scrollbar { display: none; }
.sv-repere a { display: inline-block; padding: 15px 0; font-family: var(--f-mono); font-size: var(--t-small); white-space: nowrap; color: var(--pg-sourdine); transition: color var(--dur) var(--ease); }
.sv-repere a:hover, .sv-repere a.actif { color: var(--pg-encre); }
.sv-repere-joint { position: absolute; left: var(--marge-cadre); bottom: -5px; width: 9px; height: 9px; background: var(--red); transform: translateX(var(--x, 0px)); opacity: 0; transition: transform 420ms var(--ease-out), opacity 240ms var(--ease-out); }
.sv-repere.suit .sv-repere-joint { opacity: 1; }
.sv-repere.sur-noir { background: var(--canvas); border-top-color: var(--ligne-ivoire-forte); border-bottom-color: var(--ligne-ivoire); }
.sv-repere.sur-noir a { color: var(--muted); }
.sv-repere.sur-noir a:hover, .sv-repere.sur-noir a.actif { color: var(--ink); }
.sv-repere.sur-noir a:focus-visible { outline-color: var(--ink); }

/* ── Les zones ─────────────────────────────────────────────────── */
.sv-zone { padding: var(--sp-8) 0; }
.sv-zone + .sv-zone:not(.bande-noire) { border-top: 1px solid var(--pg-filet); }
.bande-noire + .sv-zone { border-top: 0; }
.sv-zone .cadre-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); align-items: center; }
.sv-texte { grid-column: 1 / span 5; display: grid; gap: var(--sp-3); align-content: start; }
.sv-texte-large { grid-column: 1 / span 7; }
.sv-texte h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.sv-texte > p:not(.label) { max-width: 46ch; }
.sv-texte > p:not(.label):nth-of-type(3) { color: var(--pg-encre); font-weight: 500; }
.bande-noire .sv-texte > p:not(.label):nth-of-type(3) { color: var(--ink); }
.sv-suite { margin-top: var(--sp-1); }

/* ── Sites Web : la fenêtre grand format, hors grille à droite ────
   Trois couches — message, hiérarchie, appel — entrent décalées et
   s'alignent en une page. La fenêtre déborde de la marge droite. */
.sv-web { overflow: hidden; }
.sv-fenetre { grid-column: 7 / -1; margin: 0 calc(-1 * var(--marge-cadre)) 0 0; display: grid; gap: var(--sp-2); }
.fenetre { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--pg-encre); border-right: 0; background: var(--pg-ivoire); overflow: hidden; }
.fenetre-barre { height: 28px; border-bottom: 1px solid var(--pg-encre); display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.fenetre-barre i { width: 7px; height: 7px; border: 1px solid var(--pg-encre); }
.couche { position: absolute; }
.couche-message { left: 7%; top: 18%; width: 46%; display: grid; gap: 10px; }
.f-titre { display: block; height: 9%; min-height: 18px; background: var(--pg-encre); }
.f-titre.courte { width: 62%; }
.couche-hierarchie { left: 7%; top: 46%; width: 86%; height: 44%; }
.couche-hierarchie .f-ligne { position: absolute; left: 0; height: 1px; background: var(--pg-encre); width: 40%; }
.couche-hierarchie .f-ligne:nth-child(1) { top: 0; }
.couche-hierarchie .f-ligne:nth-child(2) { top: 14%; }
.couche-hierarchie .f-ligne:nth-child(3) { top: 28%; width: 26%; }
.f-image { position: absolute; right: 0; top: 0; width: 38%; height: 100%; border: 1px solid var(--pg-encre); overflow: hidden; }
.f-image::after { content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 1px; background: var(--pg-filet-fort); transform-origin: left top; transform: rotate(38deg); }
.couche-appel { left: 7%; top: 72%; }
.f-bouton { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--pg-encre); }
.f-bouton::after { content: ""; width: 54px; height: 6px; background: var(--pg-ivoire); }
.f-bouton i { width: 7px; height: 7px; background: var(--red); }
html[data-motion="on"] [data-rv="couches"] .couche { opacity: 0; transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
html[data-motion="on"] [data-rv="couches"] .couche-message { transform: translate(-28px, -22px) rotate(-1.2deg); }
html[data-motion="on"] [data-rv="couches"] .couche-hierarchie { transform: translate(36px, 0) rotate(0.8deg); transition-delay: 220ms; }
html[data-motion="on"] [data-rv="couches"] .couche-appel { transform: translate(0, 34px); transition-delay: 460ms; }
html[data-motion="on"] [data-rv="couches"] .f-bouton i { transform: scale(0); transition: transform 320ms var(--ease-spring) 1300ms; }
html[data-motion="on"] [data-rv="couches"] .sv-micro { opacity: 0; transition: opacity 600ms var(--ease-out) 1400ms; }
html[data-motion="on"] [data-rv="couches"].vu .couche { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="couches"].vu .f-bouton i { transform: none; }
html[data-motion="on"] [data-rv="couches"].vu .sv-micro { opacity: 1; }

/* ── Automatisations : le relais traverse l'écran ─────────────────
   Une demande (carte) entre à gauche, se structure (champs), passe par
   la validation humaine (seul rouge), ressort à droite terminée. Une
   petite demande voyage sur le fil et s'arrête sur la décision. */
.sv-auto .sv-texte { grid-column: 1 / span 6; }
.sv-relais { margin: var(--sp-7) 0 0; display: block; }
.sv-relais .cadre-section { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.relais { position: relative; display: grid; grid-template-columns: 2fr 3fr 3fr 2fr; column-gap: var(--sp-3); align-items: start; padding-top: 48px; }
.relais-fil { position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.relais > div { position: relative; display: grid; gap: 10px; align-content: start; }
.relais b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.relais small { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.06em; color: var(--text); }
.relais-etape i { position: absolute; left: 0; top: -29px; width: 11px; height: 11px; background: var(--ink); }
.relais-humain i { width: 15px; height: 15px; left: -2px; top: -31px; border-radius: 50%; background: var(--red); }
.r-carte { position: relative; display: grid; gap: 8px; width: 100%; max-width: 160px; padding: 14px; border: 1px solid var(--ligne-ivoire-forte); margin-top: -34px; margin-bottom: 6px; background: var(--canvas); }
.r-l { display: block; height: 1px; background: var(--ligne-ivoire-forte); }
.r-l.courte { width: 60%; }
.r-l.pleine { height: 5px; background: var(--ink); }
.r-coche { position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; background: var(--ink); }
.r-champs { display: grid; gap: 6px; }
.r-champs span { position: relative; padding-left: 14px; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.r-champs span::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--ink); }
.relais-demande { position: absolute; left: 0; top: 20px; width: 9px; height: 9px; background: var(--ink); opacity: 0; }
html[data-motion="on"] [data-rv="relais"] .relais-fil { transform: scaleX(0); transition: transform 1600ms var(--ease-out); }
html[data-motion="on"] [data-rv="relais"] .relais > div > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
html[data-motion="on"] [data-rv="relais"] .relais-etape i { transform: scale(0); }
html[data-motion="on"] [data-rv="relais"] .relais-entree > * { transition-delay: 100ms; }
html[data-motion="on"] [data-rv="relais"] .relais-structure > * { transition-delay: 900ms; }
html[data-motion="on"] [data-rv="relais"] .relais-structure .r-champs span { opacity: 0; transition: opacity 400ms var(--ease-out); }
html[data-motion="on"] [data-rv="relais"] .relais-structure .r-champs span:nth-child(1) { transition-delay: 1200ms; }
html[data-motion="on"] [data-rv="relais"] .relais-structure .r-champs span:nth-child(2) { transition-delay: 1400ms; }
html[data-motion="on"] [data-rv="relais"] .relais-structure .r-champs span:nth-child(3) { transition-delay: 1600ms; }
html[data-motion="on"] [data-rv="relais"] .relais-humain > * { transition-delay: 2300ms; }
html[data-motion="on"] [data-rv="relais"] .relais-humain i { transition: transform 380ms var(--ease-spring) 2300ms; }
html[data-motion="on"] [data-rv="relais"] .relais-sortie > * { transition-delay: 3400ms; }
html[data-motion="on"] [data-rv="relais"] .sv-micro { opacity: 0; transition: opacity 600ms var(--ease-out) 3800ms; }
html[data-motion="on"] [data-rv="relais"].vu .relais-fil { transform: none; }
html[data-motion="on"] [data-rv="relais"].vu .relais > div > *, html[data-motion="on"] [data-rv="relais"].vu .r-champs span { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="relais"].vu .sv-micro { opacity: 1; }
html[data-motion="on"] [data-rv="relais"].vu .relais-demande { animation: relais-voyage 4200ms var(--ease-out) 200ms forwards; }
@keyframes relais-voyage {
  0%   { opacity: 1; left: 0; }
  22%  { left: 20%; }
  45%  { left: 50%; }
  62%  { left: 50%; }           /* l'arrêt : une personne décide */
  90%  { left: calc(100% - 9px); opacity: 1; }
  100% { left: calc(100% - 9px); opacity: 0; }
}

/* ── Applications : la fiche mobile devant, le dossier bureau derrière ──
   Trois états : saisie (les champs se remplissent sur le mobile),
   synchronisation (le lien se trace), dossier prêt (le bureau reçoit). */
.sv-continuite { grid-column: 7 / -1; position: relative; margin: 0; min-height: 440px; }
.bureau { position: absolute; right: 0; top: 0; width: 82%; aspect-ratio: 16 / 10; border: 1px solid var(--pg-encre); background: var(--pg-ivoire); }
.bureau-barre { height: 24px; border-bottom: 1px solid var(--pg-encre); }
.bureau-dossier { position: absolute; left: 34%; top: 24px; right: 0; bottom: 0; padding: 20px 22px; border-left: 1px solid var(--pg-filet); display: grid; gap: 14px; align-content: start; }
.b-titre { display: block; width: 46%; height: 12px; background: var(--pg-encre); margin-bottom: 4px; }
.b-champ, .m-champ { display: grid; gap: 5px; }
.b-champ em, .m-champ em { font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-sourdine); }
.b-champ b, .m-champ b { position: relative; display: block; height: 1px; background: var(--pg-filet-fort); }
.b-champ b::after, .m-champ b::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 58%; background: var(--pg-encre); transform-origin: left center; }
.b-champ[data-c="2"] b::after, .m-champ[data-c="2"] b::after { width: 40%; }
.b-champ[data-c="3"] b::after, .m-champ[data-c="3"] b::after { width: 30%; }
.b-etat { justify-self: start; margin-top: 6px; padding: 6px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-ivoire); background: var(--pg-encre); }
.mobile { position: absolute; left: 0; bottom: 0; width: 42%; max-width: 200px; aspect-ratio: 9 / 16; border: 1px solid var(--pg-encre); border-radius: 20px; background: var(--pg-ivoire); padding: 40px 18px 20px; display: grid; gap: 16px; align-content: start; }
.m-encoche { position: absolute; left: 50%; top: 12px; width: 48px; height: 5px; margin-left: -24px; border-radius: 3px; background: var(--pg-encre); }
.m-action { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 8px; padding: 9px 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-ivoire); background: var(--pg-encre); }
.m-action i { width: 7px; height: 7px; background: var(--red); }
.sync { position: absolute; left: calc(min(42%, 200px) - 1px); top: 62%; width: calc(58% + 1px); height: 1px; background: var(--pg-encre); transform-origin: left center; }
.sync::before { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; background: var(--pg-encre); }
.sv-continuite .sv-micro { position: absolute; left: 0; top: 0; }
html[data-motion="on"] [data-rv="continuite"] .m-champ b::after { transform: scaleX(0); transition: transform 500ms var(--ease-out); }
html[data-motion="on"] [data-rv="continuite"] .m-champ[data-c="1"] b::after { transition-delay: 300ms; }
html[data-motion="on"] [data-rv="continuite"] .m-champ[data-c="2"] b::after { transition-delay: 700ms; }
html[data-motion="on"] [data-rv="continuite"] .m-champ[data-c="3"] b::after { transition-delay: 1100ms; }
html[data-motion="on"] [data-rv="continuite"] .sync { transform: scaleX(0); transition: transform 700ms var(--ease-out) 1600ms; }
html[data-motion="on"] [data-rv="continuite"] .b-champ b::after { transform: scaleX(0); transition: transform 400ms var(--ease-out); }
html[data-motion="on"] [data-rv="continuite"] .b-champ[data-c="1"] b::after { transition-delay: 2300ms; }
html[data-motion="on"] [data-rv="continuite"] .b-champ[data-c="2"] b::after { transition-delay: 2500ms; }
html[data-motion="on"] [data-rv="continuite"] .b-champ[data-c="3"] b::after { transition-delay: 2700ms; }
html[data-motion="on"] [data-rv="continuite"] .b-etat { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease-out) 3200ms, transform 500ms var(--ease-out) 3200ms; }
html[data-motion="on"] [data-rv="continuite"].vu .m-champ b::after, html[data-motion="on"] [data-rv="continuite"].vu .sync, html[data-motion="on"] [data-rv="continuite"].vu .b-champ b::after { transform: none; }
html[data-motion="on"] [data-rv="continuite"].vu .b-etat { opacity: 1; transform: none; }

/* ── Diagnostic : deux formules, puis le tri ─────────────────────
   Les deux formules sont deux blocs distincts : l'express en filets
   légers, le complet encadré. En dessous, les quatre constats rejoignent
   un collecteur qui se sépare en trois sorties — la première, seule en
   rouge, est le premier geste utile. Aucun mot n'est ajouté au texte :
   le titre de la section dit déjà maintenant / plus tard / tranquille. */
.sv-diagnostic .cadre-section { align-items: start; }
.ancre-heritee { position: absolute; }

.formules { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-4); margin-top: var(--sp-2); }
.formule { margin: 0; display: grid; gap: 10px; align-content: start; }
.formule h3 { font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.015em; }
.formule-cond { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-sourdine); white-space: nowrap; }
.formule p { max-width: 42ch; font-size: 0.9375rem; }
.formule-express { grid-column: 1 / span 5; padding-top: var(--sp-3); border-top: 1px solid var(--pg-filet-fort); }
.formule-complet { grid-column: 7 / span 6; padding: var(--sp-3) var(--sp-3) var(--sp-4); border: 1px solid var(--pg-encre); }
html[data-motion="on"] [data-rv="formules"] .formule > * { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
html[data-motion="on"] [data-rv="formules"] .formule-complet > * { transition-delay: 160ms; }
html[data-motion="on"] [data-rv="formules"].vu .formule > * { opacity: 1; transform: none; }

/* le tri : chaque constat pousse son filet jusqu'au collecteur, qui se
   sépare en trois sorties. La première — seule en rouge — est le premier
   geste utile. Le dessin explique la relation ; il n'ajoute aucun mot. */
.tri { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--pg-filet); align-items: start; }
.tri-titre { grid-column: 1 / -1; margin: 0; }
.tri-constats { grid-column: 1 / span 7; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tri-constats li { position: relative; padding: 15px 0 15px 26px; border-bottom: 1px solid var(--pg-filet); font-size: 1.0625rem; line-height: 1.45; }
.tri-constats li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 8px; background: var(--pg-encre); }
.tri-constats li::after { content: ""; position: absolute; left: 100%; bottom: -1px; width: var(--sp-3); height: 1px; background: var(--pg-filet); transform-origin: left center; }
.tri-sortie { grid-column: 8 / span 5; position: relative; align-self: stretch; }
.tri-collecteur { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--pg-encre); transform-origin: top center; }
.tri-branche { position: absolute; left: 0; width: 58%; height: 1px; background: var(--pg-encre); transform-origin: left center; }
.tri-branche i { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; background: var(--pg-encre); }
.tri-branche-1 { top: 16%; width: 74%; }
.tri-branche-1 i { width: 13px; height: 13px; top: -6px; right: -6px; background: var(--red); }
.tri-branche-2 { top: 50%; }
.tri-branche-3 { top: 84%; width: 42%; }
html[data-motion="on"] [data-rv="tri"] .tri-constats li { opacity: 0; transform: translateY(8px); transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); transition-delay: calc(var(--o) * 120ms); }
html[data-motion="on"] [data-rv="tri"] .tri-constats li::after { transform: scaleX(0); transition: transform 300ms var(--ease-out); transition-delay: calc(var(--o) * 120ms + 220ms); }
html[data-motion="on"] [data-rv="tri"] .tri-collecteur { transform: scaleY(0); transition: transform 520ms var(--ease-out) 620ms; }
html[data-motion="on"] [data-rv="tri"] .tri-branche { transform: scaleX(0); transition: transform 420ms var(--ease-out); }
html[data-motion="on"] [data-rv="tri"] .tri-branche-1 { transition-delay: 980ms; }
html[data-motion="on"] [data-rv="tri"] .tri-branche-2 { transition-delay: 1100ms; }
html[data-motion="on"] [data-rv="tri"] .tri-branche-3 { transition-delay: 1220ms; }
html[data-motion="on"] [data-rv="tri"] .tri-branche i { transform: scale(0); transition: transform 320ms var(--ease-spring); }
html[data-motion="on"] [data-rv="tri"] .tri-branche-1 i { transition-delay: 1300ms; }
html[data-motion="on"] [data-rv="tri"] .tri-branche-2 i { transition-delay: 1420ms; }
html[data-motion="on"] [data-rv="tri"] .tri-branche-3 i { transition-delay: 1540ms; }
html[data-motion="on"] [data-rv="tri"].vu .tri-constats li { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="tri"].vu .tri-constats li::after,
html[data-motion="on"] [data-rv="tri"].vu .tri-collecteur,
html[data-motion="on"] [data-rv="tri"].vu .tri-branche,
html[data-motion="on"] [data-rv="tri"].vu .tri-branche i { transform: none; }

.sv-conclusion { grid-column: 1 / span 7; display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.sv-conclusion p { max-width: 52ch; color: var(--pg-encre); font-weight: 500; }
.sv-reserve { font-family: var(--f-mono); font-size: var(--t-annot) !important; letter-spacing: 0.04em; color: var(--pg-sourdine) !important; font-weight: 400 !important; max-width: none !important; }

/* ── Déroulement : trois verbes, un seul travail qui se transforme ──
   Un fil vertical relie les trois livrables (colonne 9) ; chaque phase
   pose son verbe en grand, son texte, et un livrable qui se construit. */
.sv-deroulement .cadre-section { align-items: start; }
.phases { grid-column: 1 / -1; list-style: none; margin: var(--sp-2) 0 0; padding: 0; position: relative; display: grid; row-gap: 0; }
.phases::before { content: ""; position: absolute; left: calc((100% + var(--sp-3)) * 8 / 12); top: 0; bottom: 0; width: 1px; background: var(--pg-encre); transform-origin: top center; }
.phase { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); align-items: start; padding: var(--sp-5) 0; border-top: 1px solid var(--pg-filet); }
.phase-verbe { grid-column: 1 / span 4; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.04em; }
.phase > p { grid-column: 5 / span 4; max-width: 34ch; margin: 0.35em 0 0; }
.livrable { grid-column: 9 / span 4; position: relative; margin-left: var(--sp-3); min-height: 96px; }
.livrable::before { content: ""; position: absolute; left: calc(-1 * var(--sp-3) - 5px); top: 10px; width: 9px; height: 9px; background: var(--pg-encre); }
.lv-ligne { display: block; height: 1px; background: var(--pg-encre); width: 78%; margin-top: 16px; }
.lv-ligne.courte { width: 50%; }
.livrable-constat { display: grid; align-content: start; }
.lv-annotation { position: absolute; left: 62%; top: 4px; display: grid; gap: 6px; padding-left: 12px; border-left: 1px solid var(--pg-encre); }
.lv-annotation i { width: 7px; height: 7px; background: var(--pg-encre); }
.lv-note { display: block; width: 44px; height: 5px; background: var(--pg-encre); }
.livrable-ecran { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-2); align-items: end; }
.lv-cadre { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--pg-encre); }
.lv-cadre .lv-ligne { margin: 0; }
.lv-bloc { display: block; width: 40%; height: 10px; background: var(--pg-encre); }
.lv-valide { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-encre); padding-bottom: 2px; border-bottom: 1px solid var(--pg-encre); }
.livrable-dossier { min-height: 60px; }
.lv-rail { position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--pg-encre); transform-origin: left center; }
.lv-dossier { position: absolute; left: calc(100% - 96px); top: 6px; width: 18px; height: 17px; border: 1px solid var(--pg-encre); background: var(--pg-ivoire); }
.lv-arrivee { position: absolute; right: 0; top: 32px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-encre); }
.lv-arrivee i { width: 13px; height: 13px; border-radius: 50%; background: var(--red); }
html[data-motion="on"] [data-rv="phases"]::before { transform: scaleY(0); transition: transform 2400ms var(--ease-out); }
html[data-motion="on"] [data-rv="phases"] .phase > * { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--o) * 700ms + 100ms); }
html[data-motion="on"] [data-rv="phases"] .livrable::before { transform: scale(0); transition: transform 320ms var(--ease-spring); transition-delay: calc(var(--o) * 700ms + 400ms); }
html[data-motion="on"] [data-rv="phases"] .lv-annotation { opacity: 0; transition: opacity 500ms var(--ease-out) 900ms; }
html[data-motion="on"] [data-rv="phases"] .lv-valide { opacity: 0; transition: opacity 500ms var(--ease-out) 1700ms; }
html[data-motion="on"] [data-rv="phases"] .lv-rail { transform: scaleX(0); transition: transform 1200ms var(--ease-out) 2000ms; }
html[data-motion="on"] [data-rv="phases"] .lv-dossier { left: 0; transition: left 1200ms var(--ease-out) 2000ms; }
html[data-motion="on"] [data-rv="phases"] .lv-arrivee i { transform: scale(0); transition: transform 360ms var(--ease-spring) 3200ms; }
html[data-motion="on"] [data-rv="phases"].vu::before { transform: none; }
html[data-motion="on"] [data-rv="phases"].vu .phase > *, html[data-motion="on"] [data-rv="phases"].vu .livrable::before { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="phases"].vu .lv-annotation, html[data-motion="on"] [data-rv="phases"].vu .lv-valide { opacity: 1; }
html[data-motion="on"] [data-rv="phases"].vu .lv-rail { transform: none; }
html[data-motion="on"] [data-rv="phases"].vu .lv-dossier { left: calc(100% - 96px); }
html[data-motion="on"] [data-rv="phases"].vu .lv-arrivee i { transform: none; }

/* ── Prix : la bande de confiance ─────────────────────────────────── */
.sv-prix { padding: var(--sp-5) 0; border-top: 1px solid var(--pg-encre); border-bottom: 1px solid var(--pg-encre); }
.sv-prix .cadre-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); align-items: start; }
.sv-prix .label { grid-column: 1 / span 2; padding-top: 6px; }
.sv-prix h2 { grid-column: 3 / span 4; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.sv-prix p:not(.label) { grid-column: 8 / span 5; margin: 0; max-width: 46ch; }

/* ── L'appel : le parallèle rouge traverse, le joint avance au survol ── */
.sv-appel { position: relative; border-top: 0; padding-top: var(--sp-8); overflow: hidden; }
.sv-parallele { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--red); transform-origin: right center; }
.sv-parallele i { position: absolute; left: var(--marge-cadre); top: -6px; width: 13px; height: 13px; background: var(--red); }
.sv-appel .appel-action i { transition: transform 260ms var(--ease-out); }
.sv-appel .appel-action:hover i, .sv-appel .appel-action:focus-visible i { transform: translateX(6px); }
.sv-appel .appel-action:hover { gap: 0.6em; }
.appel-risque { grid-column: 1 / span 7; margin: var(--sp-2) 0 0 !important; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.06em; color: var(--pg-sourdine); max-width: none !important; }
html[data-motion="on"] .sv-appel .sv-parallele { transform: scaleX(0); transition: transform 1400ms var(--ease-out); }
html[data-motion="on"] .sv-appel .sv-parallele i { transform: scale(0); transition: transform 360ms var(--ease-spring) 1300ms; }
html[data-motion="on"] .sv-appel.vu .sv-parallele { transform: none; }
html[data-motion="on"] .sv-appel.vu .sv-parallele i { transform: none; }

/* ═══ LARGEURS INTERMÉDIAIRES ═══ */
@media (max-width: 1100px) {
  .sv-heros h1 { grid-column: 1 / span 9; }
  .sv-convergence { grid-column: 8 / -1; grid-row: 4; align-self: start; }
  .sv-index-tete { grid-column: 1 / -1; grid-row: 5; }
  .sv-index { grid-column: 1 / -1; grid-row: 6; }
  .sv-texte { grid-column: 1 / span 6; }
  .sv-fenetre { grid-column: 7 / -1; }
  .sv-continuite { grid-column: 7 / -1; min-height: 380px; }
  .relais { grid-template-columns: 1fr 1fr; row-gap: var(--sp-5); }
  .relais-fil { display: none; }
  .relais-etape i { position: static; }
  .relais-demande { display: none; }
  .r-carte { margin-top: 0; }
}

/* ═══ TÉLÉPHONE ═══ */
@media (max-width: 860px) {
  .sv-heros { padding: var(--sp-5) 0 var(--sp-4); }
  .sv-heros .cadre-section { grid-template-columns: 1fr; grid-template-rows: none; }
  .sv-heros h1, .sv-heros .page-chapo, .sv-convergence, .sv-index, .sv-index-tete { grid-column: auto; grid-row: auto; }
  .sv-index-tete { margin: var(--sp-4) 0 var(--sp-1); }
  .sv-index { grid-template-columns: 1fr; margin-top: var(--sp-4); }
  .sv-index a { padding: 14px 0 16px; }
  .sv-index a + a { border-top-width: 1px; }
  .sv-heros h1 { font-size: clamp(2.2rem, 9.6vw, 3rem); max-width: none; }
  .sv-heros .page-chapo { margin-top: var(--sp-2); }
  .sv-convergence { max-width: 360px; justify-self: start; margin-top: var(--sp-3); }
  .sv-repere ol { gap: var(--sp-3); }
  .sv-repere a { padding: 13px 0; font-size: var(--t-annot); }
  .sv-zone { padding: var(--sp-6) 0; }
  .sv-zone .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .sv-texte, .sv-texte-large, .sv-auto .sv-texte, .sv-fenetre, .sv-continuite, .sv-conclusion, .phases,
  .formules, .formule-express, .formule-complet, .tri, .tri-titre, .tri-constats, .tri-sortie { grid-column: auto; }
  .formules, .tri { grid-template-columns: 1fr; }
  .tri { margin-top: var(--sp-4); }
  .tri-constats li::after { display: none; }
  .tri-sortie { height: 92px; margin-top: var(--sp-3); margin-left: 4px; }
  .tri-collecteur { left: 0; top: 0; bottom: auto; width: 100%; height: 1px; transform-origin: left center; }
  .tri-branche { top: 0; left: 8%; width: 1px; height: 64px; transform-origin: top center; }
  .tri-branche i { right: auto; left: -4px; top: auto; bottom: -4px; }
  .tri-branche-1 { left: 8%; width: 1px; height: 78px; }
  .tri-branche-1 i { left: -6px; bottom: -6px; }
  .tri-branche-2 { left: 50%; }
  .tri-branche-3 { left: 92%; height: 46px; }
  html[data-motion="on"] [data-rv="tri"] .tri-collecteur { transform: scaleX(0); }
  html[data-motion="on"] [data-rv="tri"] .tri-branche { transform: scaleY(0); }
  .appel-risque { grid-column: auto; }
  .sv-fenetre { margin-right: calc(-1 * var(--marge-cadre)); }
  .sv-relais { margin-top: var(--sp-5); }
  .relais { grid-template-columns: 1fr; row-gap: var(--sp-4); padding-top: 0; padding-left: 26px; }
  .relais-fil { display: block; left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top center; }
  .relais-etape i { position: absolute; left: -26px; top: 4px; }
  .relais-humain i { left: -28px; top: 2px; }
  .r-carte { margin-top: 0; }
  .relais-entree::before, .relais-sortie::before { content: ""; position: absolute; left: -26px; top: 4px; width: 11px; height: 11px; background: var(--ink); }
  html[data-motion="on"] [data-rv="relais"] .relais-fil { transform: scaleY(0); }
  .sv-continuite { min-height: 0; display: grid; gap: var(--sp-3); }
  .bureau { position: static; width: 100%; }
  .mobile { position: static; width: 60%; max-width: 200px; margin-top: calc(-1 * var(--sp-6)); margin-left: var(--sp-3); }
  .sync { display: none; }
  .sv-continuite .sv-micro { position: static; order: 3; }
  .phases::before { left: 0; }
  .phase { grid-template-columns: 1fr; padding: var(--sp-4) 0 var(--sp-4) 24px; row-gap: var(--sp-2); }
  .phase-verbe, .phase > p, .livrable { grid-column: auto; }
  .livrable { margin-left: 0; margin-top: var(--sp-2); max-width: 320px; }
  .livrable::before { left: -29px; }
  .sv-prix .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-2); }
  .sv-prix .label, .sv-prix h2, .sv-prix p:not(.label) { grid-column: auto; }
  .sv-appel { padding-top: var(--sp-6); }
}
@media (max-width: 480px) {
  .sv-heros h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); }
}

/* ═══ MOUVEMENT RÉDUIT : tout est posé, rien ne bouge ═══ */
@media (prefers-reduced-motion: reduce) {
  .cv-trame, .cv-flux, .cv-fiche, .cv-joint, .cv-note, .couche, .f-bouton i, .sv-micro,
  .relais-fil, .relais > div > *, .r-champs span, .relais-etape i,
  .m-champ b::after, .sync, .b-champ b::after, .b-etat,
  .formule > *, .tri-constats li, .tri-constats li::after, .tri-collecteur, .tri-branche, .tri-branche i,
  .phases::before, .phase > *, .livrable::before, .lv-annotation, .lv-valide, .lv-rail, .lv-arrivee i,
  .sv-index-tete, .sv-index-filet, .sv-index-nom, .sv-index-fleche, .sv-index-valeur,
  .sv-parallele, .sv-parallele i, .sv-repere-joint { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .cv-lien { stroke-dashoffset: 0 !important; transition: none !important; }
  .relais-demande { display: none !important; }
  .lv-dossier { left: calc(100% - 96px) !important; transition: none !important; }
}