/* PixelRaise · « Registre » · feuille unique du site (toutes les familles de pages, FR et EN)
   Aucune ressource externe. L'état final est l'état par défaut : le mouvement est opt-in.
   Sections 1 à 17 : prototype validé. Sections 18 à 30 : composants communs du site (voir DESIGN_SYSTEM.md).
   Règle : pas de style inline ; un besoin propre à une page va dans assets/pages/<slug>.css. */

/* 1. Polices (fichiers locaux variables, aucun octet de plus que le site actuel).
   latin-ext AVANT latin : les plages se recouvrent (œ…), la dernière déclarée gagne, donc latin suffit. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-latext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.4%}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/JetBrainsMono-latext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/JetBrainsMono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. Jetons */
:root{
  color-scheme:light;
  --paper:#F6F4EF;--paper-2:#ECE9E1;--paper-3:#E1DDD2;--citation:#F2E3D4;
  --ink:#0B1A26;--ink-2:#3D4954;--ink-3:#5E6872;           /* ink-3 interdit sur paper-3 */
  --rule:#D5D5D3;--rule-strong:#989D9F;
  --orange:#DD792C;--orange-hover:#E89A5C;--orange-ink:#963F0B;  /* #DD792C : matière sur clair, texte sur nuit seulement */
  --night:#051424;--night-2:#0D2236;--on-night:#EEECE6;--on-night-2:#A7B2BD;--perimeter-line:#4A7AB0;
  --ok:#2E6B47;--ok-night:#6FC796;
  --font-sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --step-display:clamp(2.5rem,1.25rem + 4.6vw,5.75rem);
  --step-figure:clamp(4rem,2rem + 9vw,10rem);
  --step-figure-s:clamp(2.5rem,1.6rem + 3.5vw,4.5rem);
  --step-h2:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-h3:clamp(1.375rem,1.15rem + 1vw,1.875rem);
  --step-code:clamp(1.5rem,1rem + 2vw,2.5rem);
  --step-lead:clamp(1.1875rem,1.05rem + .6vw,1.5rem);
  --step-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-small:.875rem;--step-label:.8125rem;--step-data:.875rem;
  --space-2xs:.5rem;--space-xs:.75rem;--space-s:1rem;--space-m:1.5rem;--space-l:2rem;--space-xl:3rem;
  --space-2xl:clamp(3rem,2rem + 4vw,5rem);--space-section:clamp(4.5rem,2.5rem + 8vw,10rem);
  --gutter:clamp(1rem,.5rem + 2.5vw,3rem);--container:90rem;--col-gap:clamp(1rem,2vw,2rem);--header-h:4rem;
  --r-1:4px;--r-2:10px;--r-band:24px;--r-pill:999px;
  --shadow-pop:0 1px 0 var(--rule),0 16px 32px -16px rgb(11 26 38 / .25);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-micro:160ms;--dur-ui:280ms;--dur-reveal:700ms;
}
/* Jetons contextuels : les composants n'utilisent que --bg/--fg/--fg-2/--fg-3/--link/--line/--line-strong/--focus-* */
:root,.surface-paper{--bg:var(--paper);--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--link:var(--orange-ink);--line:var(--rule);--line-strong:var(--rule-strong);--status-ok:var(--ok);--focus-color:var(--ink);--focus-ring-color:var(--orange)}
.surface-paper-2{--bg:var(--paper-2)}
.surface-paper-3{--bg:var(--paper-3);--fg-3:var(--ink-2);--line:#CFCAC0}
.surface-night{--bg:var(--night);--fg:var(--on-night);--fg-2:var(--on-night-2);--fg-3:var(--on-night-2);--link:var(--on-night);--line:#24384D;--line-strong:#4A5D70;--status-ok:var(--ok-night);--focus-color:var(--on-night);--focus-ring-color:var(--orange)}
.surface-orange{--bg:var(--orange);--fg:var(--ink);--fg-2:var(--ink);--fg-3:var(--ink);--link:var(--ink);--line:rgb(11 26 38 / .28);--line-strong:var(--ink);--focus-color:var(--ink);--focus-ring-color:var(--paper)}
[class*="surface-"]{background:var(--bg);color:var(--fg)}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem);background:var(--paper)}
/* Chiffres à chasse fixe réservés aux données : posé sur body, tabular-nums met aussi le trait d'union
   d'Inter en chasse fixe (« aller-retour » se lit comme un tiret entouré d'espaces). */
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-body)/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.table,.fiche,.kpi,.kpi__value,.figure__value,.figure__value--s,.result,.result__value,.px-roi,output,[data-result],[aria-live]{font-variant-numeric:tabular-nums}
::selection{background:var(--citation);color:var(--ink)}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
p,li,dd{text-wrap:pretty}
[hidden]{display:none!important}
a{color:var(--link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
.surface-night a{text-decoration-color:var(--orange)}
:focus-visible{outline:3px solid var(--focus-color);outline-offset:3px;box-shadow:0 0 0 6px var(--focus-ring-color);border-radius:2px}
[tabindex="-1"]:focus{outline:none;box-shadow:none}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:.75rem 1rem;background:var(--ink);color:var(--paper)}
.skip-link:focus{top:.5rem}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 4. Typographie (titres à deux graisses : écho du logo « Pixel » léger, « raise » gras) */
.display{font-size:var(--step-display);font-weight:300;line-height:.96;letter-spacing:-.045em;max-width:14ch;text-wrap:balance;overflow-wrap:break-word}
.h2{font-size:var(--step-h2);font-weight:350;line-height:1;letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.h3{font-size:var(--step-h3);font-weight:500;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.lead{font-size:var(--step-lead);line-height:1.45;color:var(--fg-2);max-width:38ch}
.lead--wide{max-width:60ch}
.small{font-size:var(--step-small);line-height:1.5}
.label{font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.mono{font:400 var(--step-data)/1.5 var(--font-mono)}
.muted{color:var(--fg-2)}
strong{font-weight:600;color:var(--fg)}
.figure__value{font-size:var(--step-figure);font-weight:200;line-height:.85;letter-spacing:-.05em}
.figure__value--s{font-size:var(--step-figure-s);font-weight:200;line-height:.9;letter-spacing:-.04em}
.t-soft{color:var(--fg-2)}.t-strong{font-weight:600;color:var(--fg)}
.display>span,.h2>.t-block,.h2>.t-soft+.t-strong{display:block}
.weigh{display:inline-grid}.weigh>*,.weigh::after{grid-area:1/1}
.weigh__word,.weigh::after{font-weight:650;color:var(--fg)}
/* Copie fantôme en CSS (data-w) : réserve la largeur finale, absente du texte sans CSS et des lecteurs d'écran */
.weigh::after{content:attr(data-w);content:attr(data-w) / "";visibility:hidden;-webkit-user-select:none;user-select:none;pointer-events:none}

/* 5. Grille suisse et gabarit de section (marge numérotée « § ») */
.container{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
main{display:block;counter-reset:section -1}
.hero,.section{counter-increment:section}
.section__num::after{content:" " counter(section,decimal-leading-zero)}
.section__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--space-l);padding-block:var(--space-section);border-top:1px solid var(--line-strong)}
.section__margin,.section__body{grid-column:1/-1;min-width:0}
.section__body{container:body/inline-size;display:grid;gap:var(--space-xl);align-content:start}
.section__margin{display:grid;gap:var(--space-2xs);align-content:start}
.band+.section .section__grid{border-top:0}
.section__num,.section__label{font:500 var(--step-label)/1.3 var(--font-mono);color:var(--fg-2)}
.section__num{letter-spacing:.06em}
.band .section__grid{border-top:0}
.band{position:relative}
.surface-orange .section__label,.surface-orange .section__num{color:var(--ink)}
.stack-s{display:grid;gap:var(--space-s);align-content:start}.stack-m{display:grid;gap:var(--space-m);align-content:start}
@media (min-width:40rem){.section__grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (min-width:64rem){
  .section__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .section__margin{grid-column:1/4;position:sticky;top:calc(var(--header-h) + var(--space-l));align-self:start}
  .section__body{grid-column:4/13}
}

/* 6. En-tête et navigation (partials nav.html / nav-en.html).
   Rubriques et sous-rubriques (<details class="nav-group">) toujours visibles, sans bouton « Menu ».
   Dès 80rem : une seule ligne (logo, rubriques, actions) et sous-menu sous sa rubrique.
   En dessous : rubriques sur une seconde ligne, sous-menu en panneau sous l'en-tête.
   Sous 40rem, l'en-tête n'est plus collant : avec deux lignes de rubriques, il prendrait trop de hauteur sur téléphone. */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.site-header{background:rgb(246 244 239 / .88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
.site-header::after{content:"";display:none}
.site-header__inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-xs);padding-top:.375rem}
.brand{display:flex;align-items:center;min-height:44px;flex:none}
.brand img{height:32px;width:auto}
.site-header__actions{display:flex;align-items:center;gap:var(--space-xs);margin-left:auto;flex:none}
.nav-lang{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 .625rem;font:500 var(--step-label)/1 var(--font-mono);letter-spacing:.06em;color:var(--ink);text-decoration:none;border:1px solid var(--ink);border-radius:var(--r-pill)}
.nav-lang:hover{background:var(--paper-2)}
.nav-demo__short{display:none}
@media (max-width:39.99rem){.nav-demo__long{display:none}.nav-demo__short{display:inline}}
.site-nav{order:3;flex:1 0 100%;margin-top:.375rem;border-top:1px solid var(--rule)}
.site-nav__list{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-s);row-gap:0}
.nav-group summary,.nav-link{min-height:44px;display:flex;align-items:center;gap:.25rem;font:500 .9375rem/1.2 var(--font-sans);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;list-style:none}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary .icon{width:1rem;height:1rem}
.nav-group[open] summary .icon{rotate:180deg}
.nav-group ul{position:absolute;z-index:60;top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));column-gap:var(--space-m);padding:.5rem 1rem;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-pop)}
.nav-group a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.nav-group a:hover,.nav-link:hover{text-decoration:underline 1px;text-underline-offset:.3em}
.site-nav a[aria-current="page"],.site-nav a.is-current{text-decoration:underline 2px var(--orange);text-underline-offset:.35em}
.nav-group:has([aria-current="page"],.is-current)>summary{text-decoration:underline 2px var(--orange);text-underline-offset:.35em}
@media (max-width:39.99rem){
  :root{--header-h:0rem}
  .site-header{position:relative}
  .site-nav__list{column-gap:.875rem}
  .nav-group summary,.nav-link{font-size:.875rem}
}
@media (max-width:22.49rem){.site-header__inner,.site-header__actions{column-gap:.375rem}.brand img{height:28px}.site-header .btn--compact{padding:0 .75rem}.nav-lang{padding:0 .5rem}.site-nav__list{column-gap:.625rem}}
@media (min-width:40rem) and (max-width:79.99rem){:root{--header-h:6.5rem}}
@media (min-width:80rem){
  .site-header{height:var(--header-h)}
  .site-header__inner{height:100%;flex-wrap:nowrap;padding-top:0}
  .site-nav{order:0;flex:none;margin:0 0 0 auto;border:0}
  .site-header__actions{margin-left:var(--space-s)}
  .site-nav__list{flex-wrap:nowrap;gap:var(--space-m)}
  .site-nav .nav-group{position:relative}
  .site-nav .nav-group ul{display:block;top:calc(100% + .25rem);left:-1rem;right:auto;min-width:17rem}
}

/* 7. Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;font:600 1rem/1.1 var(--font-sans);text-decoration:none;text-align:center;cursor:pointer}
.btn--compact{min-height:44px;padding:0 1rem;font-size:.9375rem}
.btn--primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn--primary:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.btn--secondary{background:transparent;border-color:var(--fg);color:var(--fg)}
.btn--secondary:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#1C2E3D}
.btn:disabled{cursor:not-allowed;opacity:.7}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:500}
.link-arrow .icon{width:1.1em;height:1.1em}
.link-list{display:grid;gap:0}

/* 8. Statuts : la preuve est attribuée à une source, jamais « vérifiée » */
.status{display:inline-flex;align-items:center;gap:.5rem;font:500 var(--step-label)/1.3 var(--font-mono);color:var(--fg-2)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--fg-3)}
.status[data-status="source"]::before{background:var(--status-ok)}
.status[data-status="cadrer"]::before,.status[data-status="devis"]::before{background:var(--orange)}
.status[data-status="illustratif"]::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg-3)}

/* 9. Cellules à filets, fiches techniques, tableaux, divulgations, index */
.cells{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);grid-template-columns:1fr}
.cells>*{background:var(--bg);padding:var(--space-l) var(--space-m) var(--space-l) 0;display:grid;gap:var(--space-xs);align-content:start;min-width:0}
.cells p{color:var(--fg-2)}
@container body (min-width:36rem){.cells--2,.cells--3,.cells--4{grid-template-columns:repeat(2,minmax(0,1fr))}.cells>*{padding-inline:var(--space-m)}.cells--3>:last-child:nth-child(odd){grid-column:1/-1}}
@container body (min-width:75rem){.cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container body (min-width:56rem){.cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}.cells--3>:last-child:nth-child(odd){grid-column:auto}}
.cell--wide{grid-column:1/-1}
.cell__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:var(--space-xs)}
.cell__num{font:500 var(--step-label)/1 var(--font-mono);color:var(--fg-2)}
.pips{width:44px;height:12px;overflow:visible}
.pips circle{fill:var(--rule-strong)}.cells>:hover .pips circle{fill:var(--orange)}
.fiche{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;font:400 var(--step-data)/1.5 var(--font-mono)}
.fiche dt{color:var(--fg-3)}.fiche dd{color:var(--fg)}
@container body (max-width:26rem){.fiche{grid-template-columns:1fr;gap:.125rem}.fiche dd{margin-bottom:.625rem}}
.fiche--inline{grid-template-columns:1fr;gap:.125rem;padding-block:var(--space-s);border-block:1px solid var(--line)}
.fiche--inline dd{margin-bottom:.625rem}
@media (min-width:40rem){.fiche--inline{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;column-gap:var(--space-l)}.fiche--inline dd{margin:0}}
.table{width:100%;border-collapse:collapse;font-size:var(--step-small)}
.table caption{caption-side:top;text-align:left;padding-bottom:.75rem;color:var(--fg-2)}
.table th,.table td{text-align:left;vertical-align:top;padding:.875rem 1.25rem .875rem 0;border-bottom:1px solid var(--line)}
.table thead th{font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);border-bottom-color:var(--line-strong)}
.table tbody th{font-weight:500;color:var(--fg)}
.table td{color:var(--fg-2)}
.table .code-cell a{font:500 var(--step-data)/1.5 var(--font-mono);white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:39.99rem){
  .table--reflow thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table--reflow,.table--reflow tbody,.table--reflow tr{display:block}
  .table--reflow tr{padding-block:.875rem;border-bottom:1px solid var(--line)}
  .table--reflow th,.table--reflow td{display:block;border:0;padding:.125rem 0}
  .table--reflow td::before{content:attr(data-label);display:block;font:500 var(--step-label)/1.3 var(--font-mono);color:var(--fg-2);margin-top:.375rem}
  .table--reflow td.num,.table--reflow th.num{text-align:left}
  .table--reflow .code-cell::before{display:none}
  .table--reflow caption{display:block}
  .table--reflow tbody tr.is-highlight{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--orange);padding-inline:.75rem}
  .table--reflow tbody tr.is-highlight>*{background:none;box-shadow:none;padding-left:0}
}
.disclosure{border-block:1px solid var(--line)}
.disclosure summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;font-weight:500}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure[open] summary .icon{rotate:45deg}
.disclosure__body{padding-bottom:var(--space-m);display:grid;gap:var(--space-s);color:var(--fg-2)}
.index{border-top:1px solid var(--line)}
.index__row{display:grid;grid-template-columns:2.5rem 1fr auto;column-gap:var(--space-s);row-gap:.25rem;padding:var(--space-m) 0;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.index__num,.index__tag{font:500 var(--step-label)/1.3 var(--font-mono);color:var(--fg-2)}
.index__tag{grid-column:2;letter-spacing:.06em;text-transform:uppercase}
.index__title{grid-column:2;font-size:var(--step-h3);font-weight:400;line-height:1.15;letter-spacing:-.015em}
.index__desc{grid-column:2;color:var(--fg-2)}
.index__arrow{grid-column:3;grid-row:1/span 3;align-self:center;width:1.5rem;height:1.5rem}
.index__row:hover{background:var(--paper-2)}
.index__row:hover .index__title{text-decoration:underline 1px var(--orange-ink);text-underline-offset:.2em}
@container body (min-width:48rem){.index__row{grid-template-columns:3rem 10rem 1fr auto;padding-inline:0 var(--space-s)}.index__num{grid-row:1/span 2}.index__tag{grid-column:2;grid-row:1/span 2;padding-top:.45rem}.index__title,.index__desc{grid-column:3}.index__arrow{grid-column:4;grid-row:1/span 2}}

/* 10. § 00 Héros : texte, trame (motif signature à points ronds) et fenêtre de réponse sourcée */
.hero{padding-block:var(--space-2xl) 0}
.hero--page .fiche--inline{border-bottom:0;margin-top:var(--space-s)}
.hero__grid{display:grid;gap:var(--space-xl)}
.hero__text{display:grid;gap:var(--space-l);align-content:end;min-width:0}
.hero__kicker{font:500 var(--step-label)/1.5 var(--font-mono);color:var(--ink-2)}
.hero__kicker .section__num{color:var(--ink)}
.hero .lead{max-width:46ch}
.hero__note{font:400 var(--step-small)/1.4 var(--font-mono);color:var(--ink-2);margin-top:calc(-1 * var(--space-s))}
.hero__visual{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;overflow:hidden}
.hero__visual::before{content:"";grid-area:1/1;background:radial-gradient(circle at 8px 8px,var(--rule) 1.25px,transparent 1.75px) 0 0/16px 16px;-webkit-mask-image:radial-gradient(130% 100% at 0 0,#000 55%,transparent 100%);mask-image:radial-gradient(130% 100% at 0 0,#000 55%,transparent 100%)}
.trame{grid-area:1/1;align-self:start;justify-self:start;width:400px;height:240px;max-width:none;overflow:visible}
.trame__doc,.trame__packet{fill:var(--orange)}.trame__route{fill:none;stroke:var(--rule-strong);stroke-width:2;stroke-linecap:round;stroke-dasharray:0 8}
.trame__packet{transform:translate(108px,145px)}   /* état final : arrivés sous la fenêtre */
.trame__label{font:500 11px/1 var(--font-mono);fill:var(--ink-2);letter-spacing:.04em}
.hero__visual .answer{grid-area:1/1;position:relative;margin-top:10rem;align-self:end;justify-self:start;width:min(100%,32rem)}
.answer{background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--r-2);color:var(--ink)}
.answer__bar{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;padding:.75rem 1.25rem;border-bottom:1px solid var(--rule);font:400 var(--step-small)/1.4 var(--font-mono);color:var(--ink-2)}
.answer__body{padding:1.25rem;display:grid;gap:1rem}
.answer__q{justify-self:end;max-width:90%;padding:.75rem 1rem;background:var(--paper-2);border-radius:var(--r-1)}
.answer__a .answer__line{display:block}
.answer__src{font:400 var(--step-small)/1.4 var(--font-mono);color:var(--ink-2)}
.cite{display:inline-block;padding:0 .375rem;background:var(--citation);color:var(--orange-ink);border-radius:var(--r-1);font-weight:500}
.answer__checks{margin:0;padding:1rem 1.25rem;border-top:1px solid var(--rule);display:grid;gap:.5rem;font-size:var(--step-small);color:var(--ink-2)}
.answer__checks li{display:flex;gap:.5rem;align-items:center}
.answer__checks .icon{color:var(--ok)}
.answer__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.5rem 1.25rem;border-top:1px solid var(--rule)}
.answer__replay{min-height:44px;background:none;border:0;padding:0;font:500 var(--step-small)/1 var(--font-sans);color:var(--orange-ink);text-decoration:underline 1px;text-underline-offset:.2em;cursor:pointer}
.proofline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:var(--space-xl);padding-block:var(--space-s);border-top:1px solid var(--rule-strong);font:400 .875rem/1.5 var(--font-mono);color:var(--ink-2)}
.proofline .link-arrow{font-family:var(--font-mono)}
@media (min-width:40rem){.proofline li{white-space:nowrap}}
@media (min-width:64rem){
  .hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .hero__text{grid-column:1/8}
  .hero__visual{grid-column:8/13}
  .hero__visual .answer{justify-self:end;width:min(100%,26rem);margin-top:12.5rem}
  .trame{width:500px;height:300px}
}

/* 11. § 02 Preuve publique (bande nuit) */
.proof{display:grid;gap:var(--space-xl)}
.proof__figures,.proof__case{display:grid;gap:var(--space-m);align-content:start;min-width:0}
.proof__num{display:flex;align-items:flex-end;gap:var(--space-m)}
.proof__figure .figure__value{display:block;color:var(--fg)}
.label-figure{display:block;margin-top:var(--space-s);font:400 .875rem/1.5 var(--font-mono);color:var(--fg-2);max-width:30ch}
.raise{width:6px;height:76px;flex:none;margin-bottom:.15em}
.raise circle{fill:var(--orange)}.figures-s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-m);padding-block:var(--space-m);border-block:1px solid var(--line)}
.figures-s li{display:grid;gap:.5rem}
.figures-s .mono{color:var(--fg-2)}
.proof__links{display:flex;flex-wrap:wrap;gap:0 1.5rem}
@media (min-width:64rem){.proof{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--col-gap)}.proof__figures{grid-column:1/6}.proof__case{grid-column:6/10}}

/* 12. § 03 Méthode */
.steps{display:grid;gap:var(--space-s)}
.steps__item{background:var(--paper);border:1px solid var(--rule-strong);padding:clamp(1.25rem,.8rem + 2vw,2rem);display:grid;gap:var(--space-s);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mark dots" "title title" "text text";align-items:start}
.steps__mark{grid-area:mark;font:500 clamp(1.25rem,.9rem + 1.4vw,2.25rem)/1.1 var(--font-mono);letter-spacing:-.03em}
.steps__meta{display:block;margin-top:.5rem;font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.02em;color:var(--fg-2)}
.steps__dots{grid-area:dots;width:46px;height:10px;margin-top:.5rem}
.steps__dots circle{fill:var(--rule-strong)}.steps__dots .on{fill:var(--orange)}
.steps__item .h3{grid-area:title}
.steps__text{grid-area:text;display:grid;gap:var(--space-xs);color:var(--fg-2)}
.steps__text .mono{color:var(--ink-2)}
@media (min-width:64rem){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 13. § 04 Pipeline RAG : le bleu nuit = « votre périmètre » */
.rag{display:grid;gap:var(--space-xl)}
.rag__step{padding-block:var(--space-l);border-top:1px solid var(--line);display:grid;gap:var(--space-2xs);align-content:start}
.rag__step p{color:var(--fg-2);max-width:44ch}
.perimeter{position:relative;border-radius:var(--r-2);padding:var(--space-l) var(--space-l) var(--space-m)}
.perimeter::before{content:"";position:absolute;inset:10px;border:1px dashed var(--perimeter-line);border-radius:6px;pointer-events:none}
.perimeter__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:var(--space-m)}
.pipeline__node{position:relative;display:grid;grid-template-columns:1.25rem 1fr;column-gap:.875rem;padding-block:.5rem;color:var(--on-night)}
.pipeline__node::before{content:"";grid-row:1/span 2;justify-self:center;margin-top:.45em;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.pipeline__node:not(:last-child)::after{content:"";position:absolute;left:calc(.625rem - 1.5px);top:calc(.5rem + .45em + 14px);bottom:calc(-.5rem - .45em + 4px);width:3px;background:radial-gradient(circle,var(--on-night-2) 1.2px,transparent 1.5px) 0 0/3px 7px repeat-y}
.perimeter__title{font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.02em;color:var(--on-night)}
.pipeline__name{font-weight:500}
.pipeline__sub{grid-column:2;font:400 var(--step-small)/1.4 var(--font-mono);color:var(--on-night-2)}
.hours{width:100%;max-width:26rem;height:auto;overflow:visible;margin-block:var(--space-2xs)}
.hours rect{fill:var(--rule)}.hours .on{fill:var(--orange)}
.hours text{font:400 9px/1 var(--font-mono);fill:var(--ink-2)}
@media (min-width:64rem){.rag{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}.rag__steps{grid-column:1/6;grid-row:1}.perimeter{grid-column:6/10;grid-row:1;position:sticky;top:calc(var(--header-h) + 2rem)}}

/* 14. § 05 à § 07 */
.sectors{display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem;border-top:1px solid var(--line)}
.sectors li{display:flex;align-items:center;min-height:48px;padding:.25rem 0;border-bottom:1px solid var(--line);font-weight:500}
.sectors a{display:flex;align-items:center;min-height:44px}
@media (min-width:40rem){.sectors{display:flex;flex-wrap:wrap;column-gap:0;border-bottom:1px solid var(--line)}.sectors li{padding:.25rem 1.25rem;border-bottom:0;border-right:1px solid var(--line)}.sectors li:first-child{padding-left:0}.sectors li:last-child{border-right:0}}

/* 15. § 08 Contact : seul grand aplat orange, formulaire sur carte papier */
.contact{display:grid;gap:var(--space-xl)}
.contact__text{display:grid;gap:var(--space-m);align-content:start}
.contact .fiche{margin-top:var(--space-s);padding-top:var(--space-m);border-top:1px solid var(--line)}
.contact .fiche dt{color:var(--ink)}
.contact .h2{font-size:clamp(2rem,1.4rem + 2.2vw,3.25rem)}
.form-grid .btn{width:100%}
@media (min-width:64rem){.contact{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--col-gap)}.contact__text{grid-column:1/5}.form-card{grid-column:5/10}}
.form-card{container:form/inline-size;background:var(--paper);color:var(--ink);border-radius:var(--r-2);padding:clamp(1.25rem,1rem + 2vw,2.5rem);--bg:var(--paper);--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--link:var(--orange-ink);--line:var(--rule);--focus-color:var(--ink);--focus-ring-color:var(--orange)}
.form-grid{display:grid;gap:var(--space-m)}
.form-row{display:grid;gap:var(--space-m)}
@container form (min-width:25rem){.form-row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.375rem;align-content:start}
.field label{font:500 .9375rem/1.3 var(--font-sans);color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.75rem .875rem;font:inherit;color:var(--ink);background:#FFF;border:1px solid var(--ink-3);border-radius:var(--r-1)}
.field textarea{min-height:7.5rem;resize:vertical}
.field ::placeholder{color:var(--ink-3);opacity:1}
.form-error{padding:.875rem 1rem;background:var(--citation);color:var(--ink);border-left:4px solid var(--orange-ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{font-size:var(--step-small);color:var(--ink-2)}

/* 16. Pied de page */
.site-footer{padding-block:var(--space-2xl) var(--space-l)}
.site-footer__grid{display:grid;gap:var(--space-xl)}
.site-footer__brand{display:grid;gap:var(--space-s);align-content:start;max-width:30rem}
.site-footer__brand img{height:32px;width:auto}
.site-footer__brand p{color:var(--ink-2)}
.site-footer__nav{display:grid;gap:var(--space-l)}
.site-footer__nav h2{margin-bottom:var(--space-2xs)}
.site-footer__nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.site-footer__nav a:hover{text-decoration:underline 1px var(--orange-ink);text-underline-offset:.25em}
.trame-row{width:256px;height:16px;overflow:visible}.trame-row circle{fill:var(--orange)}
.site-footer__meta{display:grid;gap:var(--space-xs);padding-top:var(--space-m);border-top:1px solid var(--rule-strong);color:var(--ink-2)}
.site-footer__meta .mono{color:var(--ink-3)}
.site-footer__meta .btn{justify-self:start;margin-top:var(--space-2xs)}
.site-footer__links{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
.site-footer__legal{display:flex;flex-wrap:wrap;column-gap:1.5rem}
.site-footer__legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.site-footer__meta>nav{min-width:0}
@media (min-width:40rem){.site-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer__links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64rem){.site-footer__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}.site-footer__brand{grid-column:1/4}.site-footer__nav{grid-column:4/13;grid-template-columns:repeat(4,minmax(0,1fr))}.site-footer__nav--2{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer__links{grid-template-columns:repeat(4,minmax(0,1fr))}.trame-row,.site-footer__meta{grid-column:1/-1}.site-footer__meta{grid-template-columns:auto 1fr auto;align-items:center;column-gap:var(--space-l)}.site-footer__meta .btn{margin-top:0}}

/* 17. Page Nos engagements */
.hero--page .hero__text{gap:var(--space-l)}
.hero--page .display{max-width:16ch}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;font:400 var(--step-small)/1.4 var(--font-mono);color:var(--ink-2)}
.breadcrumb li:not(:last-child)::after{content:"/";content:"/" / "";margin-left:.5rem;color:var(--ink-3)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.toc{display:none}
.toc ol{display:grid;border-left:1px solid var(--line)}
.toc a{display:flex;align-items:flex-start;gap:.625rem;min-height:44px;padding-block:calc((44px - 1.3em) / 2);padding-left:1rem;font:400 var(--step-small)/1.3 var(--font-mono);color:var(--ink-2);text-decoration:none}
.toc a::before{content:"";flex:none;margin-top:calc(.65em - 3px);width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:inset 0 0 0 1.5px var(--orange)}
.toc a:hover{color:var(--ink);text-decoration:underline 1px}
@media (min-width:64rem){.toc{display:block;margin-top:var(--space-m)}}
.eng-list{border-top:1px solid var(--line-strong)}
.eng{display:grid;gap:var(--space-m);padding-block:var(--space-xl);border-bottom:1px solid var(--line-strong)}
.eng__code{display:grid;gap:var(--space-s);align-content:start}
.eng__permalink{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:500 var(--step-code)/1 var(--font-mono);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.eng__permalink:hover,.eng__permalink:focus-visible{text-decoration:underline 2px var(--orange-ink);text-underline-offset:.15em}
.eng__figure{display:grid;gap:.375rem}
.eng__figure .figure__value--s{font-size:clamp(2.5rem,1.8rem + 2vw,3.5rem);white-space:nowrap}
.eng__figure-note{color:var(--ink-2);max-width:24ch}
.eng__main{display:grid;gap:var(--space-s);align-content:start}
.eng__main .h3{max-width:22ch}
.eng__fiche{align-content:start;padding-top:var(--space-s);border-top:1px solid var(--line)}
@media (min-width:64rem){.eng{grid-template-columns:minmax(9rem,2fr) minmax(0,4fr) minmax(0,3fr);column-gap:var(--col-gap);align-items:start}.eng__fiche{padding-top:0;border-top:0}}

/* 18. En-tête de page : compléments de .hero--page (sur-titre = .hero__kicker, titre long, méta, étiquette, signature) */
.display--s{font-size:var(--step-h2);font-weight:300;line-height:1.02;letter-spacing:-.035em;max-width:22ch;text-wrap:balance;overflow-wrap:break-word}
.hero--page .display--s{max-width:22ch}
.page-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;font:400 var(--step-small)/1.5 var(--font-mono);color:var(--fg-2)}
.page-meta>li:not(:last-child)::after{content:"·";content:"·" / "";margin-left:.75rem;color:var(--fg-3)}
.tag{display:inline-flex;align-items:center;min-height:1.75rem;padding:0 .625rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);font:500 var(--step-label)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.byline,.updated{font:400 var(--step-small)/1.5 var(--font-mono);color:var(--fg-2)}
.byline a{color:var(--fg);font-weight:500}
.hero--page .hero__text>:is(.byline,.page-meta,.updated,.lead,.actions):last-child{padding-bottom:var(--space-l)}

/* 19. Article et prose (blog, pages éditoriales, pages légales) : flux vertical, mesure de lecture 68ch */
.article__aside{display:grid;gap:var(--space-s);align-content:start}
.prose{max-width:68ch;color:var(--fg-2);overflow-wrap:break-word}
.prose>*+*{margin-top:var(--space-s)}
.prose>:is(h2,h3,h4){color:var(--fg);text-wrap:balance}
.prose>h2{margin-top:var(--space-xl);font-size:var(--step-h3);font-weight:500;line-height:1.15;letter-spacing:-.015em}
.prose>h3{margin-top:var(--space-l);font-size:1.1875rem;font-weight:600;line-height:1.3}
.prose>h4{margin-top:var(--space-m);font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.prose>:is(h2,h3,h4)+*{margin-top:var(--space-xs)}
.prose>:first-child{margin-top:0}
.prose :is(ul,ol):not([class]){padding-left:1.25rem}
.prose ul:not([class]){list-style:disc}
.prose ol:not([class]){list-style:decimal}
.prose li:not([class])+li{margin-top:.375rem}
.prose li::marker{color:var(--orange-ink)}
.prose blockquote{margin-inline:0;padding-left:var(--space-m);border-left:3px solid var(--orange);font-size:var(--step-lead);line-height:1.45;color:var(--fg)}
.prose blockquote :is(footer,cite){display:block;margin-top:var(--space-2xs);font:400 var(--step-small)/1.5 var(--font-mono);font-style:normal;color:var(--fg-2)}
.prose :is(code,kbd){font:400 .875em/1.4 var(--font-mono);padding:.1em .35em;background:var(--paper-2);border-radius:var(--r-1);color:var(--ink)}
.prose pre{overflow-x:auto;padding:var(--space-s) var(--space-m);background:var(--night);color:var(--on-night);border-radius:var(--r-2);font:400 var(--step-data)/1.6 var(--font-mono)}
.prose pre code{padding:0;background:none;color:inherit;font-size:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:var(--space-xl)}
.prose :is(sup,sub){line-height:0}
.prose>:is(figure,.figure,.table-scroll,.table,.callout,.cta,.cells,.cards,.quote,.kpis){margin-block:var(--space-l)}
.prose--legal{max-width:72ch}
.prose--legal>h2{font-size:1.375rem}
@media (min-width:40rem){.prose--legal .table tbody th{width:10rem}}
.lines>*+*{margin-top:.25rem}

/* 20. Tableaux : compléments de .table (défilement horizontal, nombres, ligne recommandée, verdicts) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
.table-scroll>.table{min-width:var(--table-min,40rem)}
.table th:last-child,.table td:last-child{padding-right:0}
.table .num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.table tbody tr.is-highlight>*{background:var(--paper-2)}
.table tbody tr.is-highlight>:first-child{padding-left:.75rem;box-shadow:inset 3px 0 0 var(--orange)}
.table .is-yes{color:var(--status-ok);font-weight:600}
.table .is-no{color:var(--fg-3)}
.table .is-partial{color:var(--orange-ink)}
.table tfoot :is(th,td){font-weight:600;color:var(--fg);border-top:1px solid var(--line-strong)}
.table--compact :is(th,td){padding-block:.5rem}
.table-note{font:400 var(--step-small)/1.5 var(--font-mono);color:var(--fg-2)}

/* 21. Cartes et grilles de cartes (lien entier cliquable : <a class="card">) */
.cards{display:grid;gap:var(--col-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-min,18rem)),1fr))}
.cards--wide{--card-min:24rem}
.card{display:flex;flex-direction:column;gap:var(--space-xs);padding:clamp(1.25rem,1rem + 1vw,1.75rem);background:var(--bg);color:var(--fg);border:1px solid var(--line-strong);min-width:0}
.card p,.card__text{color:var(--fg-2)}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font:400 var(--step-small)/1.4 var(--font-mono);color:var(--fg-2)}
.card__title{font-size:1.375rem;font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
.card__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:var(--space-2xs);font:500 var(--step-small)/1.3 var(--font-mono);color:var(--link)}
.card__more .icon{width:1.1em;height:1.1em}
a.card{text-decoration:none}
a.card:hover{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
a.card:hover .card__title{text-decoration:underline 1px var(--orange-ink);text-underline-offset:.2em}
.card--accent{box-shadow:inset 0 3px 0 var(--orange)}

/* 22. Figures, schémas SVG et légendes. .diagram.surface-night garde lisibles les schémas existants à palette sombre */
.figure{display:grid;gap:var(--space-xs);min-width:0}
.figure__title{font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--fg)}
.figure__intro{font-size:var(--step-small);color:var(--fg-2);max-width:60ch}
.figure figcaption,.figure__caption{font:400 var(--step-small)/1.5 var(--font-mono);color:var(--fg-2);max-width:68ch}
.figure img{width:100%;height:auto}
.diagram{padding:clamp(1rem,.75rem + 1.5vw,2rem);background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-2);min-width:0}
.diagram>svg,.dgm{width:100%;height:auto}
@media (max-width:47.49rem){
  .diagram--scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram--scroll>svg{min-width:var(--diagram-min,var(--dgm-w,47.5rem))}
}
@media (max-width:47.49rem){.figure:has(.diagram--scroll)>figcaption::before{content:"↔ ";content:"↔ " / "";color:var(--orange-ink);font-weight:700}}

/* 23. Encadrés : note, avertissement, statut. Couleurs fixes (papier) : lisibles sur toutes les surfaces */
.callout{--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--link:var(--orange-ink);--line:var(--rule);--focus-color:var(--ink);--focus-ring-color:var(--orange);display:grid;gap:var(--space-2xs);align-content:start;padding:var(--space-s) var(--space-m);background:var(--paper-2);color:var(--ink);border-left:4px solid var(--ink);max-width:72ch}
.callout p{color:var(--ink-2)}
.callout__title{font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.callout :is(h2,h3){font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--ink)}
.callout--warning{background:var(--citation);border-left-color:var(--orange-ink)}
.callout--status{background:var(--paper);border:1px solid var(--rule-strong);border-left:4px solid var(--ok)}
.callout--status[data-status="cadrer"],.callout--status[data-status="devis"]{border-left-color:var(--orange)}
.callout--status[data-status="illustratif"]{border-left-color:var(--rule-strong)}

/* 24. FAQ : <details class="disclosure"> natif (ouvert et fermé sans JS), question en h3 dans <summary> */
.faq{display:grid;border-top:1px solid var(--line)}
.faq>.disclosure{border-top:0}
.faq__group{display:grid;gap:var(--space-m)}
.faq__group+.faq__group{margin-top:var(--space-2xl)}
.disclosure summary{padding-block:var(--space-xs)}
.disclosure summary>:is(h2,h3,h4){font-size:1.125rem;font-weight:500;line-height:1.35;color:var(--fg);text-wrap:balance}
.disclosure summary:hover>:is(h2,h3,h4){text-decoration:underline 1px var(--orange-ink);text-underline-offset:.2em}
.disclosure summary .icon{flex:none}
.disclosure__body>*{max-width:68ch}
.disclosure__body :is(ul,ol):not([class]){padding-left:1.25rem;list-style:disc}

/* 25. Sources, précédent / suivant, pagination du blog */
.sources{display:grid;gap:var(--space-xs);padding-top:var(--space-m);border-top:1px solid var(--line)}
.section__body>.sources:first-child,.stack-s:has(>.index)+.sources{border-top:0;padding-top:0}
.sources__list{display:grid;gap:.5rem;font:400 var(--step-small)/1.5 var(--font-mono);color:var(--fg-2);counter-reset:src}
.sources__list>li{position:relative;padding-left:1.25rem;min-width:0}
.sources__list>li::before{content:"";position:absolute;left:.25rem;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--fg-3)}
ol.sources__list>li{padding-left:2.25rem;counter-increment:src}
ol.sources__list>li::before{content:"[" counter(src) "]";content:"[" counter(src) "]" / "";top:0;left:0;width:auto;height:auto;border-radius:0;background:none;color:var(--fg-3)}
.sources__list a{overflow-wrap:anywhere}
.pager{display:grid;gap:var(--space-s)}
.pager__link{display:grid;gap:.375rem;align-content:start;padding:var(--space-m);border:1px solid var(--line-strong);color:var(--fg);text-decoration:none;min-width:0}
.pager__dir{display:flex;align-items:center;gap:.375rem;font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pager__dir .icon{width:1rem;height:1rem}
.pager__title{font-weight:500;line-height:1.35;text-wrap:balance}
.pager__link:hover{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
.pager__link:hover .pager__title{text-decoration:underline 1px var(--orange-ink);text-underline-offset:.2em}
@media (min-width:40rem){.pager{grid-template-columns:repeat(2,minmax(0,1fr))}.pager__link--next{grid-column:2;text-align:right}.pager__link--next .pager__dir{justify-content:flex-end}}
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2xs);margin-top:var(--space-l)}
.pagination__btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 .875rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--fg);font:500 var(--step-small)/1 var(--font-mono);text-decoration:none;cursor:pointer}
.pagination__btn:hover{background:color-mix(in srgb,var(--fg) 6%,var(--bg))}
.pagination__btn[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper);cursor:default}
.pagination__btn:disabled{opacity:.5;cursor:not-allowed}

/* 26. Glossaire : <dl> en registre, un <div> par entrée ; :target met en évidence l'ancre visitée */
.glossary{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));column-gap:var(--col-gap);border-bottom:1px solid var(--line)}
.glossary__item{display:grid;gap:var(--space-2xs);align-content:start;padding-block:var(--space-m);border-top:1px solid var(--line);min-width:0;scroll-margin-top:calc(var(--header-h) + 1rem)}
.glossary dt{font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--fg)}
.glossary dd{color:var(--fg-2)}
.glossary__item:target{background:var(--citation);box-shadow:-.75rem 0 0 var(--citation),.75rem 0 0 var(--citation)}
.glossary__item:has(:target){background:var(--citation);box-shadow:-.75rem 0 0 var(--citation),.75rem 0 0 var(--citation)}

/* 27. Outils : panneau de saisie, champs (compléments de .field), choix, curseurs, boutons segmentés, résultats, alertes, KPI */
.tool{display:grid;gap:var(--space-xl);align-items:start}
@media (min-width:64rem){.tool{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tool__panel{--bg:var(--paper);--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--link:var(--orange-ink);--line:var(--rule);container:form/inline-size;display:grid;gap:var(--space-m);align-content:start;padding:clamp(1.25rem,1rem + 2vw,2rem);background:var(--paper);color:var(--ink);border:1px solid var(--rule-strong);border-radius:var(--r-2);min-width:0}
.field__hint{font-size:var(--step-small);line-height:1.45;color:var(--ink-2)}
.field input[type="number"]{font-family:var(--font-mono)}
.field [aria-invalid="true"]{border:2px solid var(--orange-ink)}
.input-unit{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.input-unit input{width:9rem;flex:none;text-align:right}
.input-unit>span{font-size:var(--step-small);color:var(--ink-2)}
.choice-group{display:grid;gap:var(--space-2xs);margin:0;padding:0;border:0;min-width:0}
.choice-group legend{padding:0;margin-bottom:var(--space-xs);font-size:var(--step-h3);font-weight:500;line-height:1.15;letter-spacing:-.015em;color:var(--fg)}
.choice{display:flex;align-items:flex-start;gap:.75rem;min-height:48px;padding:.75rem .875rem;background:#FFF;color:var(--ink);border:1px solid var(--rule-strong);border-radius:var(--r-1);cursor:pointer}
.choice:hover{border-color:var(--ink-3)}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 3px 0 0 var(--orange)}
.choice input{flex:none;width:1.125rem;height:1.125rem;margin:.2rem 0 0;accent-color:var(--ink)}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:var(--ink)}
input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--ink-3)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--orange);border:2px solid var(--ink)}
input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:var(--ink-3)}
input[type="range"]::-moz-range-progress{height:4px;border-radius:2px;background:var(--ink)}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--orange);border:2px solid var(--ink)}
input[type="range"]:disabled{cursor:not-allowed;opacity:.5}
.range-field{display:grid;gap:.125rem;min-width:0}
.range-field__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem}
.range-field label{font:500 .9375rem/1.3 var(--font-sans);color:var(--fg)}
.range-field output,.output{font:600 var(--step-data)/1.3 var(--font-mono);color:var(--fg)}
.is-unavailable{opacity:.55}
.segmented{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.segmented>:is(button,a){min-height:44px;display:inline-flex;align-items:center;padding:0 1rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--fg);font:500 var(--step-small)/1 var(--font-mono);text-decoration:none;cursor:pointer}
.segmented>:is(button,a):hover{background:color-mix(in srgb,var(--fg) 6%,var(--bg))}
.segmented>[aria-pressed="true"],.segmented>[aria-current],.segmented>.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.result{--bg:var(--paper);--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--link:var(--orange-ink);--line:var(--rule);background:var(--paper);color:var(--ink);border:1px solid var(--rule-strong);border-radius:var(--r-2);overflow:hidden;min-width:0}
.result__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--rule);font:400 var(--step-small)/1.4 var(--font-mono);color:var(--ink-2)}
.result__rows{display:grid;padding:0 1.25rem}
.result__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;padding-block:.75rem;border-bottom:1px solid var(--rule)}
.result__row:last-child{border-bottom:0}
.result__label{font-size:var(--step-small);color:var(--ink-2)}
.result__value{font:600 var(--step-data)/1.4 var(--font-mono);color:var(--ink);text-align:right;margin-left:auto}
.result__row--total{padding-block:var(--space-s);border-block:1px solid var(--rule-strong)}
.result__row--total .result__label{font-size:1rem;font-weight:600;color:var(--ink)}
.result__row--total .result__value{font:200 var(--step-figure-s)/1 var(--font-sans);letter-spacing:-.04em}
.result__foot{display:grid;gap:var(--space-2xs);padding:.875rem 1.25rem;border-top:1px solid var(--rule);font:400 var(--step-small)/1.5 var(--font-mono);color:var(--ink-2)}
.result>.alert{margin:0 1.25rem 1.25rem}
.alert{padding:.875rem 1rem;background:var(--paper-2);color:var(--ink);border-left:4px solid var(--ink);font-size:var(--step-small);line-height:1.5}
.alert>*+*{margin-top:.375rem}
.alert strong{color:var(--ink)}
.alert--ok{border-left-color:var(--ok)}
.alert--warn{background:var(--citation);border-left-color:var(--orange-ink)}
.badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);font:500 .75rem/1.4 var(--font-mono);white-space:nowrap}
.badge--ok{background:transparent;box-shadow:inset 0 0 0 1px var(--ok);color:var(--ok)}
.badge--warn{background:var(--citation);color:var(--orange-ink)}
.kpis{display:grid;gap:var(--space-s);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.kpi{display:grid;gap:.375rem;align-content:start;padding:var(--space-m);background:var(--bg);border:1px solid var(--line-strong);min-width:0}
.kpi__label{font:500 var(--step-label)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.kpi__value{font-size:var(--step-figure-s);font-weight:200;line-height:.95;letter-spacing:-.04em;color:var(--fg);overflow-wrap:anywhere}
.kpi__sub{font:400 var(--step-small)/1.45 var(--font-mono);color:var(--fg-2)}
.kpi--accent{border-color:var(--ink);box-shadow:inset 0 3px 0 var(--orange)}

/* 28. Simulateur ROI partagé (balisage généré par roi-widget.js, accueils FR/EN et simulateur) : remplace roi-widget.css */
.px-roi{display:grid;gap:var(--space-m);color:var(--fg);min-width:0}
.px-roi>h2{font-size:var(--step-h3);font-weight:500;line-height:1.15;letter-spacing:-.015em;max-width:30ch;text-wrap:balance}
.px-roi h3{font-size:1.125rem;font-weight:600;line-height:1.3}
.px-roi p{color:var(--fg-2);max-width:68ch}
.px-roi form{display:grid;gap:var(--space-m)}
.px-roi .roi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--space-m)}
.px-roi label{display:grid;gap:.375rem;align-content:start;font:500 .9375rem/1.35 var(--font-sans);color:var(--fg)}
.px-roi :is(input,select){width:100%;min-height:48px;padding:.75rem .875rem;font:400 1rem/1.3 var(--font-mono);color:var(--ink);background:#FFF;border:1px solid var(--ink-3);border-radius:var(--r-1)}
.px-roi [aria-invalid="true"]{border:2px solid var(--orange-ink)}
.px-roi details{border-block:1px solid var(--line);padding-bottom:var(--space-s)}
.px-roi details+details{border-top:0}
.px-roi summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.px-roi details>:is(p,.roi-grid){margin-top:var(--space-s)}
.px-roi .roi-results{display:grid;gap:var(--space-m)}
.px-roi .roi-card{display:grid;gap:var(--space-2xs);align-content:start;padding:var(--space-m);background:var(--paper);color:var(--ink);border:1px solid var(--rule-strong)}
.px-roi .roi-card p{color:var(--ink-2)}
.px-roi strong[data-result]{display:block;font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);font-weight:300;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.px-roi .roi-table{overflow-x:auto}
.px-roi table{width:100%;border-collapse:collapse;font-size:var(--step-small)}
.px-roi :is(th,td){padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.px-roi th{font-weight:500;color:var(--fg-2)}
.px-roi td{font-family:var(--font-mono);color:var(--fg)}
.px-roi button{display:inline-flex;align-items:center;min-height:44px;padding:0 1.25rem;margin:0 .75rem .75rem 0;border:1px solid var(--fg);border-radius:var(--r-pill);background:transparent;color:var(--fg);font:600 .9375rem/1 var(--font-sans);cursor:pointer}
.px-roi button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.px-roi button:disabled{opacity:.55;cursor:not-allowed}
.px-roi .roi-error{color:var(--orange-ink);font-weight:500}
.surface-night .px-roi .roi-error{color:var(--orange)}
.px-roi [role="status"]{min-height:1.5em}
.roi-print-only{display:none}

/* 29. Appel à l'action, citation, listes à puces, étapes numérotées, avatar */
.cta{display:grid;gap:var(--space-s);justify-items:start;padding:clamp(1.5rem,1rem + 3vw,3rem);border-radius:var(--r-2)}
.cta__title{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);font-weight:350;line-height:1.05;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.cta__text{color:var(--fg-2);max-width:52ch}
.cta .actions{margin-top:var(--space-2xs)}
.quote{display:grid;gap:var(--space-xs);padding-left:var(--space-m);border-left:3px solid var(--orange)}
.quote blockquote{margin:0;font-size:var(--step-lead);line-height:1.45;color:var(--fg)}
.quote figcaption{font:400 var(--step-small)/1.5 var(--font-mono);color:var(--fg-2)}
.checklist{display:grid;gap:.5rem}
.checklist>li{position:relative;padding-left:1.375rem;color:var(--fg-2)}
.checklist>li::before{content:"";position:absolute;left:.25rem;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.checklist--no>li::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg-3)}
.steps-list{counter-reset:step;border-top:1px solid var(--line)}
.steps-list>li{counter-increment:step;position:relative;padding:var(--space-m) 0 var(--space-m) 3.25rem;border-bottom:1px solid var(--line);color:var(--fg-2)}
.steps-list>li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:var(--space-m);font:500 var(--step-label)/1.9 var(--font-mono);color:var(--fg-2)}
.steps-list>li>*+*{margin-top:var(--space-2xs)}
.avatar{width:6rem;height:6rem;flex:none;border-radius:50%;object-fit:cover;background:var(--paper-2)}

/* 30. Utilitaires : états basculés par les scripts existants, mise en page */
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.container--narrow{width:min(100% - 2 * var(--gutter),48rem);margin-inline:auto}
.section__body>*,.hero__text>*,.prose,.tool>*{min-width:0}
.section__grid--full .section__margin,.section__grid--full .section__body{grid-column:1/-1;position:static}
.stack-l{display:grid;gap:var(--space-l);align-content:start}.stack-xl{display:grid;gap:var(--space-xl);align-content:start}
.measure{max-width:68ch}
.nowrap{white-space:nowrap}

/* 31. Mouvement : tout est déclaré sous no-preference ET hors interrupteur « off » */
@keyframes rise{from{opacity:0;translate:0 1.25rem}}
@keyframes appear{from{opacity:0}}
@keyframes settle{from{transform:translate(var(--dx,0),var(--dy,0));opacity:.3}to{transform:none;opacity:1}}
@keyframes route{0%{transform:translate(0,0);opacity:0}8%{opacity:1}45%{transform:translate(108px,0)}100%{transform:translate(108px,145px);opacity:1}}
@keyframes gain{from{font-weight:350}to{font-weight:650}}
@keyframes lift{50%{translate:0 -3px}}
@keyframes raise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes open-band{from{clip-path:inset(0 clamp(.5rem,3vw,2.5rem) round var(--r-band))}to{clip-path:inset(0 0 round 0)}}
@keyframes grow{from{scale:0 1}to{scale:1 1}}
@keyframes light{from{color:var(--on-night-2)}to{color:var(--on-night)}}
@keyframes light-dot{from{background:transparent;box-shadow:inset 0 0 0 1.5px var(--on-night-2)}to{background:var(--orange);box-shadow:none}}
@keyframes toc-on{from,to{color:var(--ink);text-decoration:underline 2px var(--orange);text-underline-offset:.3em}}
@keyframes dot-fill{from{background:transparent}to{background:var(--orange)}}
@keyframes header-rule{from{border-bottom-color:transparent}to{border-bottom-color:var(--rule)}}

@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]){
    & a,& .btn,& .index__row,& .nav-group summary .icon,& .disclosure summary .icon,& .pagination__btn,& .segmented>*,& .choice,& .px-roi button{transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),text-decoration-thickness var(--dur-micro),rotate var(--dur-ui) var(--ease-out)}
    & .link-arrow .icon,& .index__arrow,& .card__more .icon{transition:translate var(--dur-micro) var(--ease-out)}
    & .link-arrow:hover .icon,& .index__row:hover .index__arrow,& a.card:hover .card__more .icon{translate:3px 0}
    & a[target="_blank"].link-arrow:hover .icon{translate:2px -2px}
    /* A. Héros : séquence unique minutée, fin à 4,2 s */
    & .hero__h1>span{animation:rise var(--dur-reveal) var(--ease-out) both}
    & .hero__h1>span:nth-child(2){animation-delay:120ms}
    & .trame__doc{animation:settle 1200ms var(--ease-out) both;animation-delay:var(--d,0ms)}
    & .trame__doc:nth-child(8n+1){--dx:-46px;--dy:30px} & .trame__doc:nth-child(8n+2){--dx:38px;--dy:-24px}
    & .trame__doc:nth-child(8n+3){--dx:-22px;--dy:-40px} & .trame__doc:nth-child(8n+4){--dx:52px;--dy:18px}
    & .trame__doc:nth-child(8n+5){--dx:-60px;--dy:-8px} & .trame__doc:nth-child(8n+6){--dx:14px;--dy:46px}
    & .trame__doc:nth-child(8n+7){--dx:30px;--dy:34px} & .trame__doc:nth-child(8n){--dx:-34px;--dy:52px}
    & .trame__doc:nth-child(6n+2){--d:90ms} & .trame__doc:nth-child(6n+3){--d:180ms} & .trame__doc:nth-child(6n+4){--d:270ms}
    & .trame__doc:nth-child(6n+5){--d:360ms} & .trame__doc:nth-child(6n){--d:450ms}
    & .trame__route{animation:appear 600ms var(--ease-out) 900ms both}
    & .trame__packet{animation:route 1100ms var(--ease-in-out) 1300ms both}
    & .trame__packet:nth-of-type(2){animation-delay:1450ms} & .trame__packet:nth-of-type(3){animation-delay:1600ms}
    & .answer__q{animation:appear 400ms var(--ease-out) 600ms both}
    & .answer__a .answer__line:nth-child(1){animation:appear 400ms var(--ease-out) 2400ms both}
    & .answer__a .answer__line:nth-child(2){animation:appear 400ms var(--ease-out) 2750ms both}
    & .answer__a .answer__line:nth-child(3){animation:appear 400ms var(--ease-out) 3100ms both}
    & .answer__src{animation:appear 400ms var(--ease-out) 3450ms both}
    & .answer__checks{animation:appear 400ms var(--ease-out) 3800ms both}
    /* B. Mot qui prend du poids, au chargement (engagements, au-dessus de la ligne de flottaison) */
    & .page-engagements .hero .weigh__word{animation:gain 900ms var(--ease-out) 300ms both}
    /* C. Points qui se lèvent en escalier au survol */
    & .cells>:hover .pips circle{animation:lift 320ms var(--ease-out)}
    & .pips circle:nth-child(2){animation-delay:25ms} & .pips circle:nth-child(3){animation-delay:50ms}
    & .pips circle:nth-child(4){animation-delay:75ms} & .pips circle:nth-child(5){animation-delay:100ms}
    /* G. Méthode : cartes collantes empilées */
    @media (min-width:64rem){
      & .steps{grid-template-columns:1fr;gap:28vh;padding-bottom:4rem}
      & .steps__item{position:sticky;top:calc(var(--header-h) + 1.5rem + var(--i,0) * 1rem);min-height:15rem;padding:var(--space-xl);grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;grid-template-areas:"mark title dots" "mark text dots";column-gap:var(--space-xl);align-content:start}
      & .steps__item:nth-child(2){--i:1} & .steps__item:nth-child(3){--i:2} & .steps__item:nth-child(4){--i:3}
      & .rag__step{min-height:55vh}
    }
    /* H. Menu mobile : entrée en 280 ms */
  }
  /* L. Transitions entre les deux pages (Chrome, Edge, Safari) */
  @view-transition{navigation:auto}
  .brand{view-transition-name:brand}
  h1{view-transition-name:titre}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:250ms}
}
html[data-motion="off"]::view-transition-group(*),html[data-motion="off"]::view-transition-old(*),html[data-motion="off"]::view-transition-new(*){animation-duration:0s}

/* Animations liées au défilement (Chrome/Edge 115+, Safari 26). Sans support : page statique complète */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    :root:not([data-motion="off"]){
      /* E'. Filet bas de l'en-tête après 80 px (sinon : filet fixe, bordure statique de .site-header) */
      & .site-header{animation:header-rule linear both;animation-timeline:scroll(root);animation-range:0 80px}
      & .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
      & #rag .weigh__word{animation:gain linear both;animation-timeline:view();animation-range:entry 60% cover 50%}
      & .site-header::after{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);transform-origin:0 50%;animation:grow linear both;animation-timeline:scroll(root)}
      & .raise{animation:raise linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
      & .band--open{animation:open-band linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    }
  }
}
/* Timelines nommées : pipeline (accueil) et sommaire (engagements) */
@supports (timeline-scope:--a) and (animation-timeline:view()){
  @media (min-width:64rem) and (prefers-reduced-motion:no-preference){
    :root:not([data-motion="off"]){
      & .rag{timeline-scope:--s1,--s2,--s3,--s4}
      & .rag__step{view-timeline-inset:0 40%}
      & .rag__step:nth-child(1){view-timeline-name:--s1} & .rag__step:nth-child(2){view-timeline-name:--s2}
      & .rag__step:nth-child(3){view-timeline-name:--s3} & .rag__step:nth-child(4){view-timeline-name:--s4}
      & .pipeline__node,& .pipeline__node::before{animation:light linear both;animation-range:entry 0% entry 100%}
      & .pipeline__node::before{animation-name:light-dot}
      & .pipeline__node:nth-child(-n+2),& .pipeline__node:nth-child(-n+2)::before{animation-timeline:--s1}
      & .pipeline__node:nth-child(n+3):nth-child(-n+4),& .pipeline__node:nth-child(n+3):nth-child(-n+4)::before{animation-timeline:--s2}
      & .pipeline__node:nth-child(5),& .pipeline__node:nth-child(5)::before{animation-timeline:--s3}
      & .pipeline__node:nth-child(n+6),& .pipeline__node:nth-child(n+6)::before{animation-timeline:--s4}
      & #detail{timeline-scope:--e1,--e2,--e3,--e4,--e5}
      & .eng{view-timeline-inset:45% 50%}
      & .eng:nth-child(1){view-timeline-name:--e1} & .eng:nth-child(2){view-timeline-name:--e2} & .eng:nth-child(3){view-timeline-name:--e3}
      & .eng:nth-child(4){view-timeline-name:--e4} & .eng:nth-child(5){view-timeline-name:--e5}
      & .toc a{animation:toc-on linear none;animation-range:cover 0% cover 100%}
      & .toc a::before{animation:dot-fill linear both;animation-range:entry 0% entry 100%}
      & .toc li:nth-child(1) a,& .toc li:nth-child(1) a::before{animation-timeline:--e1} & .toc li:nth-child(2) a,& .toc li:nth-child(2) a::before{animation-timeline:--e2}
      & .toc li:nth-child(3) a,& .toc li:nth-child(3) a::before{animation-timeline:--e3} & .toc li:nth-child(4) a,& .toc li:nth-child(4) a::before{animation-timeline:--e4}
      & .toc li:nth-child(5) a,& .toc li:nth-child(5) a::before{animation-timeline:--e5}
    }
  }
}

/* 32. Impression (charte jointe à un dossier de consultation) */
@media print{
  @page{size:A4;margin:18mm 16mm}
  :root{--bg:#fff;--fg:#000;--fg-2:#222;--fg-3:#333;--link:#000;--line:#999;--line-strong:#000}
  body,[class*="surface-"]{background:#fff!important;color:#000!important}
  .site-header,.site-nav,.skip-link,.answer__replay,[data-motion-toggle],.trame,.hero__visual::before,.trame-row,.raise,.pips,.toc,.band--open .btn,#simulateur,.form-card,.site-footer__nav,.steps__dots,.pagination,.pager,.cta .actions{display:none!important}
  .display--s{font-size:22pt}.prose,.disclosure__body>*{max-width:none}
  .callout,.figure,.kpi,.card,.glossary__item,.result,.quote{break-inside:avoid}
  .diagram.surface-night{background:var(--night)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .section__grid{padding-block:8mm;grid-template-columns:1fr}.section__margin,.section__body{grid-column:1/-1;position:static}
  .display{font-size:28pt;font-weight:300}.h2{font-size:18pt}.h3,.eng h2{font-size:13pt}
  .hero__visual .answer{margin-top:0}
  .eng,.cells>*,tr,.disclosure,.steps__item{break-inside:avoid}
  .steps__item{position:static}
  details.disclosure>:not(summary){display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt}
  a[href^="#"]::after,a[href="index.html"]::after,.eng__permalink::after,.index__row::after,.brand::after{content:""}
  .perimeter{border:1px dashed #000;background:#fff;color:#000}.pipeline__node{color:#000}.pipeline__sub{color:#333}
  *{animation:none!important;transition:none!important}
  /* Rapport du simulateur ROI : seul le bloc .roi-print-only s'imprime quand body.roi-print est posé par roi-widget.js */
  body.roi-print>*{display:none!important}
  body.roi-print>.roi-print-only{display:block!important;overflow:visible!important;height:auto!important;padding:20px;background:#fff;color:#111;font:11pt/1.5 var(--font-sans)}
  body.roi-print>.roi-print-only table{width:100%;border-collapse:collapse}
  body.roi-print>.roi-print-only :is(td,th){border:1px solid #888;padding:6px;text-align:left}
  body.roi-print>.roi-print-only thead{display:table-header-group}
  body.roi-print>.roi-print-only tr{break-inside:avoid}
  body.roi-print>.roi-print-only h2{font-size:18pt;break-after:avoid}
  body.roi-print>.roi-print-only h3{font-size:13pt;break-after:avoid}
}

/* 31. Corrections communes issues de la revue des pages (fusionnées depuis les feuilles de page) */
.prose code{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.site-footer [data-motion-toggle] [data-motion-state]{display:contents}
@media (max-width:39.99rem){.site-footer [data-motion-toggle]{padding-block:.375rem;border-radius:var(--r-2)}}
.px-roi .roi-grid>label{grid-template-rows:1fr auto}
.px-roi .roi-table+h3{margin-top:var(--space-m)}