/* B.Galy — le site dans le plan bleu. Tout part de v3 : mêmes tons, mêmes faces, même rail. */
:root{
  --amber:#f4ad45;
  --ink:#eef6ff; --ground:rgba(12,44,78,.42); --mute:rgba(198,222,244,.74);
  --cu:#dcecfb; --cu60:rgba(220,236,251,.6); --cu30:rgba(220,236,251,.3); --cu14:rgba(220,236,251,.14);
  --txt:#f4faff; --txt2:#c9dff4; --txt3:#9dbfe0;
  --padX:24px;
  --padY:clamp(22px,4.6vh,66px);
  --chakra:"Chakra Petch","Bahnschrift","DIN Alternate",sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Plan Bleu role tokens: semantic roles retain the approved rendered values. */
  --home-deep-blue:#07264e;
  --home-vat-blue:#0a2a50;
  --home-stage-wash-light:rgba(150,198,240,.11);
  --home-stage-wash-subtle:rgba(150,198,240,.06);
  --home-kicker:#c8dded;
  --home-title:#f8fcff;
  --home-copy:#d3e7fa;
  --home-copy-muted:#a4c3e2;
  --home-action-ink:#12314f;
  --home-action-hover:#ffc36d;
  --home-action-shadow:rgba(244,173,69,.18);
  --home-action-secondary-ink:#e6f2fe;
  --home-action-secondary-border:rgba(198,225,248,.52);
  --home-action-secondary-hover:rgba(224,244,255,.06);
  --home-nav-ink:#dceefc;
  --home-nav-hover-border:rgba(220,236,251,.7);
  --home-nav-border:rgba(206,230,250,.5);
  --home-nav-border-strong:rgba(206,230,250,.95);
  --home-link-border:rgba(220,236,251,.35);
  --home-white:#fff;
  --home-hint-ink:rgba(214,234,251,.8);
  --home-hint-border:rgba(198,225,248,.5);
  --home-hint-control-ink:rgba(230,242,254,.92);
  --home-replay-ink:rgba(210,232,250,.82);
  --home-replay-bg:rgba(12,44,78,.5);
  --home-replay-border:rgba(178,212,242,.36);
  --home-replay-hover:#f2f8ff;
  --home-replay-hover-border:rgba(206,230,250,.72);
  --paper-sheet:#f3f7fb;
  --paper-secondary:#2f527c;
  --paper-ink:#0b2c4f;
  --paper-accent:#c8811a;
  --paper-link:#1f5a96;
  --paper-wash:rgba(31,90,150,.06);
  --paper-border:rgba(11,44,79,.22);
  --paper-border-soft:rgba(11,44,79,.16);
  --paper-action-shadow:rgba(200,129,26,.20);
  --paper-action-border:rgba(11,44,79,.55);
  --paper-action-hover:rgba(11,44,79,.06);
  --paper-link-border:rgba(31,90,150,.4);
  --paper-link-line:rgba(31,90,150,.35);
  --paper-strong-border:rgba(11,44,79,.85);
  --paper-soft-border:rgba(31,90,150,.22);
  --paper-active-inset:rgba(31,90,150,.16);
  --paper-surface:rgba(31,90,150,.05);
  --paper-inset-border:rgba(31,90,150,.10);
  --paper-rule:rgba(31,90,150,.18);
  --paper-card-shadow:rgba(11,44,79,.10);
  --home-heading:#eef7ff;
  --home-quote-style:italic;
  --home-eyebrow:#cfe3f8;
  --paper-divider:#ced7df;
  --home-faint-rule:rgba(220,236,251,.16);
  --home-grid-dot:#44627e;
  --home-grid-marker:#6b94aa;
  --home-diagram-guide:#4a6f93;
  --home-diagram-line:#c6e0ec;
  --home-diagram-node-fill:#0b3549;
  --home-diagram-node-stroke:#d0e4ed;
  --home-diagram-label:#a3c3d3;
  --home-diagram-rule:#4c6888;
  --home-diagram-caption:#759fb2;
  --home-image-border:rgba(238,246,255,.35);
  --home-on-blue-link-border:rgba(206,230,250,.45);
  --home-box-bg:rgba(12,44,78,.12);
  --home-box-shadow:rgba(12,44,78,.2);
  --home-box-inset-border:rgba(220,236,251,.10);
  --home-box-active-border:rgba(238,246,255,.85);
  --home-box-active-bg:rgba(20,62,108,.55);
  --home-box-active-shadow:rgba(238,246,255,.18);
  --home-box-active-deep-shadow:rgba(4,18,36,.28);
  --home-box-active-inset:rgba(238,246,255,.22);
  --home-callout-bg:rgba(12,44,78,.30);
  --home-timeline-bg:rgba(12,44,78,.28);
  --home-timeline-rule:rgba(220,236,251,.75);
  --paper-filter-core:#7b98ae;
  --paper-colophon-border:#415a7a;
  --paper-button-border:#73879c;
  --paper-link-border-soft:#9eb8d3;
  --paper-grid:#b7c9dc;
  --paper-guide:#7d9bb8;
  --paper-diagram-guide:#9db4cc;
  --paper-muted:#5b7ea6;
  --paper-muted-mobile:#4d6f95;
  --icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z' fill='black'/%3E%3C/svg%3E");
  --home-mask-ink:#000;
}
@media (min-width:600px){ :root{ --padX:clamp(40px,9.8vw,150px) } }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--home-deep-blue);overflow-x:clip;width:100%}
body{font-family:var(--sans);color:var(--txt)}
img,svg,canvas{max-width:100%}
a{color:inherit}

/* ================= premier écran ================= */
.stage{position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;background:var(--home-vat-blue);background-image:radial-gradient(70% 55% at 22% 8%,var(--home-stage-wash-light),transparent 70%),radial-gradient(60% 50% at 82% 70%,var(--home-stage-wash-subtle),transparent 70%)}   /* the ground is a plain vat blue with two soft washes — the painted sheet is gone (remark 42) */
#paper,#paper2{display:none}
@supports not (height:100svh){ .stage{height:100vh} }
#paper{position:absolute;inset:0;width:100%;height:100%;display:block}
#phare3d{position:absolute;pointer-events:none;-webkit-mask-image:linear-gradient(var(--home-mask-ink) 86%,transparent 100%);mask-image:linear-gradient(var(--home-mask-ink) 86%,transparent 100%)}
#phare3d canvas{display:block;width:100%;height:100%}
/* le phare du labo : la mer se dissout vers le texte, ses cotes et étiquettes restent cachées */
#phare3d .bg-phare>canvas{-webkit-mask-image:linear-gradient(to right,transparent 20%,var(--home-mask-ink) 48%);mask-image:linear-gradient(to right,transparent 20%,var(--home-mask-ink) 48%)}
#phare3d .bg-phare-labels,#phare3d .bg-phare-annotations{display:none}
@media (max-width:859px){ #phare3d .bg-phare>canvas{-webkit-mask-image:none;mask-image:none} }
#lux,#board{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#lux{mix-blend-mode:screen;pointer-events:none}
#board{pointer-events:none}

.copy{position:absolute;inset:0;padding:var(--padY) var(--padX);
      display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}

/* ---- la plaque ---- */
.plq{position:relative;display:inline-grid;justify-items:center;border:.07em solid;
     border-color:rgba(238,246,255,var(--fa,1));border-radius:.14em;padding:.5em .8em .44em;
     color:var(--ink);background:var(--ground);font-family:var(--chakra);line-height:1}
.plq-name{display:inline-flex;align-items:baseline;white-space:nowrap;font-weight:700;letter-spacing:.03em}
.plq-pt{display:inline-block;flex:none;width:.3em;height:.3em;margin:0 .04em;color:var(--amber);transform:translateY(.04em);overflow:visible}
.plq-pt path{fill:currentColor}
.plq-sub{margin-top:.16em;font-weight:500;font-size:.17em;letter-spacing:.34em;color:var(--mute);white-space:nowrap}
.plq-sc{position:absolute;width:.19em;height:.19em}
.plq-sc.tl{top:.1em;left:.1em}.plq-sc.tr{top:.1em;right:.1em}.plq-sc.bl{bottom:.1em;left:.1em}.plq-sc.br{bottom:.1em;right:.1em}
.plq-sc circle{fill:var(--ground);stroke:var(--ink);stroke-width:1.5}
.plq-sc line{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
#plaque{font-size:clamp(24px,2.9vw,42px);flex:none;--fa:0;background:rgba(12,44,78,calc(.42 * var(--fa)))}
#plaque .plq-name,#plaque .plq-sub,#plaque .plq-sc,#plaque .plq-pt{opacity:0}

/* ---- la baseline ---- */
.say{opacity:0;max-width:100%}
.sur{margin-top:clamp(44px,12vh,150px);   /* the copy sits lower under the plaque, as on the lab's home (remark 24) */
    display:flex;align-items:center;gap:clamp(9px,.85vw,13px);
     font-family:var(--chakra);font-weight:500;
     font-size:clamp(11.5px,calc(.82vw + 2px),13.5px);letter-spacing:.235em;text-transform:uppercase;color:var(--home-kicker)}
/* le ✦ ambre scintille : une respiration lente, jamais un clignotement */
.sur .spark{flex:none;color:var(--amber);font-size:1.85em;line-height:1;animation:spark 5.2s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:.66;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){ .sur .spark{animation:none;opacity:.92} }
.sur + .ttl{margin-top:clamp(13px,2.4vh,26px)}
.ttl{margin:clamp(30px,8vh,100px) 0 0;font-family:var(--chakra);font-weight:700;
     font-size:clamp(29px,calc(4.2vw + 2px),54px);line-height:1.19;letter-spacing:.003em;color:var(--home-title);
     text-shadow:0 2px 26px rgba(5,26,52,.4);max-width:min(100%,15.2em)}
.ttl .ln{display:block}
.tsp{display:inline-block;width:.2em;height:.2em;margin:0 .045em;overflow:visible;vertical-align:baseline}
.tsp path{fill:var(--amber)}
.sub{margin-top:clamp(16px,3.3vh,40px);font-size:clamp(17px,calc(1.42vw + 2px),21.5px);line-height:1.5;font-weight:400;
     color:var(--home-copy);max-width:min(100%,26em)}
.sub .ln{display:block}
.sub .ln.dim{margin-top:.6em;font-size:.78em;color:var(--home-copy-muted)}
.cta{margin-top:clamp(18px,3.6vh,44px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.1vw,16px);pointer-events:auto}
/* les boutons : primaire ambre plein, secondaire à filet clair — la facture du labo */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
     min-height:48px;padding:12px clamp(17px,1.55vw,23px);
     font-family:var(--chakra);font-weight:700;font-size:clamp(12.5px,1vw,14px);letter-spacing:.045em;line-height:1.3;
     border:1px solid transparent;border-radius:3px;cursor:pointer;white-space:nowrap;
     transition:background .2s,border-color .2s,box-shadow .2s,color .2s}
.btn .ico{display:inline-block;flex:0 0 auto;width:1em;height:1em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.btn .ico.play{-webkit-mask-image:var(--icon-play);mask-image:var(--icon-play)}
.btn .ico.arrow{-webkit-mask-image:var(--icon-arrow);mask-image:var(--icon-arrow)}
.btn.p{background:var(--amber);border-color:var(--amber);color:var(--home-action-ink);gap:clamp(16px,1.7vw,25px)}
.btn.p:hover{background:var(--home-action-hover);border-color:var(--home-action-hover);box-shadow:0 3px 22px var(--home-action-shadow)}
.btn.p .ico{width:1.05em;height:1.05em}
.btn.s{background:transparent;color:var(--home-action-secondary-ink);border-color:var(--home-action-secondary-border);gap:12px}
.btn.s:hover{border-color:var(--home-action-secondary-ink);background:var(--home-action-secondary-hover)}
.btn.s .ico.play{width:1.42em;height:1.42em;transform:translateY(-.01em)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

nav.top{position:absolute;top:calc(var(--padY) + .2em);right:var(--padX);display:flex;gap:clamp(14px,2vw,30px);align-items:center;pointer-events:auto}
nav.top a{font-family:var(--chakra);font-weight:500;font-size:clamp(11px,.9vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--home-nav-ink);text-decoration:none;
  padding:9px 0;border-bottom:1px solid transparent;transition:border-color .2s}
nav.top a:hover{border-bottom-color:var(--home-nav-hover-border)}
nav.top a.login{padding:9px 14px;border:1px solid var(--home-nav-border);border-radius:1.5px}
nav.top a.login:hover{border-color:var(--home-nav-border-strong)}
nav.top a.signup{padding:9px 14px;border:1px solid var(--amber);border-radius:1.5px;background:var(--amber);color:var(--home-action-ink)}   /* the account is created from the header too (third pass, remark 17) */
nav.top a.signup:hover{background:var(--home-action-hover);border-color:var(--home-action-hover)}
/* the language selector: the current language, at the far right of the bar, a chevron that opens the other
   one (fifth pass, remark 8). A <details>, so it works without a script; the script only closes it. */
nav.top details.lang{position:relative;font-family:var(--chakra);font-weight:500;font-size:clamp(11px,.9vw,13px);letter-spacing:.2em;text-transform:uppercase;color:var(--home-nav-ink)}
nav.top details.lang summary{list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:9px 0 8px;border-bottom:1px solid transparent}
nav.top details.lang summary::-webkit-details-marker{display:none}
nav.top details.lang summary:hover{border-bottom-color:var(--home-nav-hover-border)}
nav.top details.lang summary svg{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
nav.top details.lang[open] summary svg{transform:rotate(180deg)}
nav.top details.lang a{position:absolute;right:0;top:calc(100% + 6px);padding:9px 14px;background:var(--home-vat-blue);border:1px solid var(--home-nav-border);border-radius:1.5px;letter-spacing:.2em;white-space:nowrap;z-index:5}
nav.top details.lang a:hover{border-color:var(--home-nav-border-strong)}
/* the phone header: the WHOLE navigation stays reachable. It moves to the foot of the first screen
   and wraps into two rows — the plain links and the language on one, the two buttons on the next.
   Hiding « Notre méthodologie » and « Tarifs » left the method page with no way back to the pricing. */
@media (max-width:600px){
  nav.top{top:auto;bottom:calc(var(--padY) + 30px);left:var(--padX);right:var(--padX);
          flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:9px clamp(12px,3.6vw,18px)}
  nav.top a{padding:4px 0}
  nav.top a.login,nav.top a.signup{padding:9px 13px}
  /* the short pages have no fixed first screen: there the header takes its place in the flow,
     under the buttons, instead of being laid over them */
  body.inner nav.top{position:static;margin-top:clamp(26px,4.2vh,44px);padding:0 var(--padX)}
  nav.top details.lang{margin-left:auto}
  nav.top details.lang a{top:auto;bottom:calc(100% + 6px)}   /* the bar sits at the foot of the first screen: the menu opens upward, or the screen's edge would cut it */
}
.lnk{display:inline-flex;align-items:center;font-family:var(--chakra);font-weight:500;font-size:clamp(12px,.98vw,14px);letter-spacing:.1em;text-transform:uppercase;color:var(--home-nav-ink);text-decoration:none;margin-left:6px;border-bottom:1px solid var(--home-link-border)}
.lnk:hover{border-bottom-color:var(--home-white)}
/* « Suivez le fil » : la pastille du labo, et le trait qui continue la descente sous elle */
.hint{position:absolute;left:var(--padX);bottom:clamp(12px,2.4vh,26px);display:flex;flex-direction:column;align-items:flex-start;gap:7px;
      font-family:var(--chakra);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--home-hint-ink);pointer-events:none}
.hint .cue{display:flex;align-items:center;gap:12px}
.hint .cue b svg{display:block;width:10px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hint .cue b{display:grid;place-items:center;flex:none;width:19px;height:28px;border:1px solid var(--home-hint-border);border-radius:12px;
      font-family:var(--sans);font-weight:400;font-size:14px;line-height:1;color:var(--home-hint-control-ink)}
@media (max-height:640px){ .hint{display:none} }

.replay{position:fixed;right:clamp(12px,1.6vw,26px);bottom:clamp(12px,1.6vh,18px);z-index:9;
  font-family:var(--chakra);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--home-replay-ink);background:var(--home-replay-bg);border:1px solid var(--home-replay-border);
  padding:7px 13px 6px;border-radius:1px;cursor:pointer}
.replay:hover{color:var(--home-replay-hover);border-color:var(--home-replay-hover-border)}

/* ---- la page « Notre méthodologie » : un en-tête court, sans phare ---- */
body.inner .stage{height:auto;min-height:0;padding-bottom:clamp(60px,9vh,110px)}
body.inner .copy{position:relative;inset:auto}
body.inner #phare3d{display:none}
body.inner .ttl{margin-top:clamp(26px,6vh,72px)}
a.plq,a.plq-link{text-decoration:none;pointer-events:auto}

/* ================= la suite ================= */
#deck{position:relative;width:100%;overflow:clip;background:var(--home-vat-blue)}
#paper2{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the sheet's ruling, chosen on 6 September 2026 among twelve: 25px squares, a firmer line every 125px, quiet on the blue */
#grain,#grain0{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='125' height='125'><path d='M0 25.5H125M25.5 0V125M0 50.5H125M50.5 0V125M0 75.5H125M75.5 0V125M0 100.5H125M100.5 0V125' stroke='%23ffffff' stroke-opacity='.019' stroke-width='.6'/><path d='M0 .5H125M.5 0V125' stroke='%23ffffff' stroke-opacity='.046' stroke-width='.8'/></svg>");background-size:125px 125px}
#rail{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}

.sec{position:relative;isolation:isolate;padding:clamp(84px,12vh,150px) var(--padX) clamp(40px,6vh,80px);max-width:calc(1240px + 2 * var(--padX));}
.sec.suite{padding-top:clamp(40px,6vh,72px)}

/* ---- l'alternance : une section sur deux est un tirage inversé, blanc, la police en bleu ---- */
.light{--txt:var(--paper-ink);--txt2:var(--paper-secondary);--txt3:var(--paper-muted);--amb2:var(--paper-accent);--ink:var(--paper-ink);--ground:var(--paper-wash);--mute:var(--paper-muted);color:var(--txt)}
.light::before{content:"";position:absolute;top:0;bottom:0;left:0;width:100vw;background:var(--paper-sheet) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='125' height='125'><path d='M0 25.5H125M25.5 0V125M0 50.5H125M50.5 0V125M0 75.5H125M75.5 0V125M0 100.5H125M100.5 0V125' stroke='%230a2a50' stroke-opacity='.028' stroke-width='.6'/><path d='M0 .5H125M.5 0V125' stroke='%230a2a50' stroke-opacity='.067' stroke-width='.8'/></svg>") repeat;background-size:125px 125px;z-index:-1}   /* the same ruling in the vat blue, firmer: slate greyed at this alpha — a quarter lighter than it
      was, because on a mostly white section it was reading as a drawing of its own (sixth pass, remark 6) */
.light .eyebrow{color:var(--paper-secondary)}
.light .eyebrow b{color:var(--amb2)}
.light .h2,.light h3{color:var(--paper-ink)}
.light .lead{color:var(--txt2)}
.light .band{border-color:var(--paper-border);border-bottom-color:var(--paper-link);background:var(--paper-wash)}
.light .band b{color:var(--amb2)}
.light .band span{color:var(--paper-ink)}
.light .at b,.light .at.lit b{color:var(--paper-ink)}
.light .at p{color:var(--txt2)}
.light .at small{color:var(--txt3)}
.light .after{color:var(--txt2);border-color:var(--paper-border-soft)}
.light .callout{background:var(--paper-wash);border-color:var(--paper-border-soft)}
.light .callout p{color:var(--txt2)}
.light .regle .txt p{color:var(--txt2)}
.light .prob .k{color:var(--paper-ink)}
.light .prob p{color:var(--txt2)}
.light .illus .cap{color:var(--txt3)}
/* sur le tirage blanc : l'ambre reste, le filet du secondaire passe à l'encre */
.light .btn.p{background:var(--amber);border-color:var(--amber);color:var(--home-action-ink)}
.light .btn.p:hover{background:var(--home-action-hover);border-color:var(--home-action-hover);box-shadow:0 3px 22px var(--paper-action-shadow)}
.light .btn.s{color:var(--paper-ink);border-color:var(--paper-action-border);background:transparent}
.light .btn.s:hover{border-color:var(--paper-ink);background:var(--paper-action-hover)}
.light .lnk{color:var(--paper-link);border-bottom-color:var(--paper-link-border)}
.light .lnk:hover{border-bottom-color:var(--paper-ink)}
.light .plq{background:var(--home-white);border-color:var(--paper-strong-border)}   /* on the white, the plaque's edge is ink — the pale edge vanished */
/* le bandeau des six stations, sur le blanc */
.light .boxes li{border-color:var(--paper-soft-border);background:var(--paper-surface);box-shadow:none}
.light .boxes li::before{border-color:var(--paper-inset-border)}
.light .boxes li b{color:var(--paper-ink)}
.light .boxes li span{color:var(--paper-secondary);border-top-color:var(--paper-rule)}
.light .boxes li.lit{border-color:var(--paper-link);background:var(--home-white);box-shadow:0 10px 30px var(--paper-card-shadow)}
.light .boxes li.lit b{color:var(--paper-ink)}
.light .boxes li.lit::before{border-color:var(--paper-active-inset)}
.journey{isolation:isolate}

/* ---- les ateliers : un bloc épinglé le temps que tout paraisse, et rien n'est visible avant que le fil n'y arrive ---- */
.pin{position:relative}
.pin.on .pinned{position:sticky;top:0;height:100vh;height:100svh;padding-bottom:0;box-sizing:border-box}
.rail3{display:none}
.pin.on .rail3{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}

/* ---- le parcours : une scène épinglée le temps du défilement ---- */
.journey{position:relative;height:623vh}   /* long enough for the second half of the story to unroll at half speed (remark 33) */
.scene{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:clamp(18px,3.5vh,40px) var(--padX) clamp(16px,3vh,34px)}
/* le titre de la section reste en haut de l'écran tout le temps de la scène ; il paraît quand le fil passe */
.scene .shead{flex:none;max-width:1240px;opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.scene .shead.in{opacity:1;transform:none}
.scene .shead .h2{margin-top:clamp(8px,1.2vh,14px)}
.scene .shead{margin-bottom:clamp(8px,1.6vh,18px)}
.scene .boxes{flex:none;max-width:1240px}
.stitle{flex:none;margin:0;max-width:1240px;text-align:center;font-family:var(--chakra);font-weight:700;font-size:clamp(20px,2.7vw,34px);line-height:1.25;letter-spacing:.004em;color:var(--home-heading);min-height:1.3em}
.light .stitle{color:var(--paper-ink)}
.stitle.swap{animation:stitle .55s cubic-bezier(.2,.7,.2,1)}
@keyframes stitle{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.h2.one{white-space:nowrap}
/* the section's number and name are the title the wire lands on; what used to be the title is the subtitle under it */
.h2 b{color:var(--amber);font-weight:700;margin-right:.45em}
.sub2{margin:clamp(16px,2.6vh,30px) 0 0;font-family:var(--chakra);font-weight:500;font-size:clamp(20px,2.05vw,30px);line-height:1.3;letter-spacing:-.005em;color:var(--txt2);max-width:32em}   /* bigger and further from the title (third pass, remark 8) */
.light .sub2{color:var(--paper-secondary)}
.sub2.quote{font-style:var(--home-quote-style)}
.scene .shead .sub2{margin-top:clamp(10px,1.8vh,20px)}
@media (max-width:859px){ .h2.one{white-space:normal} }
.boardWrap{position:relative;flex:1;min-height:0;max-width:1240px;margin-top:clamp(14px,2.6vh,28px)}
.board{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rail2{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sec.fin{padding-bottom:clamp(60px,9vh,110px)}
#deck .sec:first-of-type{padding-top:clamp(44px,6vh,72px)}
.head{max-width:min(100%,46em)}
.eyebrow{font-family:var(--chakra);font-weight:500;font-size:clamp(10px,.86vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--home-eyebrow)}
.eyebrow b{display:inline-block;font-weight:700;color:var(--amber);margin-right:.9em}
.h2{margin:clamp(12px,1.8vh,20px) 0 0;font-family:var(--chakra);font-weight:700;
    font-size:clamp(25px,3.1vw,40px);line-height:1.22;letter-spacing:.004em;color:var(--txt);text-wrap:balance}
.h2.big{font-size:clamp(28px,3.6vw,48px)}
.lead{margin:clamp(12px,2vh,20px) 0 0;font-size:clamp(15px,1.3vw,18.5px);line-height:1.58;color:var(--txt2);max-width:38em}
h3{margin:0;font-family:var(--chakra);font-weight:700;font-size:clamp(18px,1.72vw,23px);line-height:1.32;letter-spacing:.006em;color:var(--home-heading)}
p{margin:0}

/* ce qui paraît quand le fil arrive : jamais depuis rien, depuis un état lisible mais en retrait */
.rv{opacity:.34;transform:translateY(10px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* --- 01 --- */
.probs{margin-top:clamp(30px,4.6vh,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.4vw,34px) clamp(22px,3vw,44px);max-width:60em}
.prob .k{display:block;font-family:var(--chakra);font-weight:700;font-size:clamp(15.5px,1.28vw,18px);line-height:1.35;color:var(--home-heading)}
.prob p{margin-top:7px;font-size:clamp(14px,1.14vw,16px);line-height:1.58;color:var(--txt2)}
#depart .illus{margin-top:clamp(26px,4vh,52px);aspect-ratio:5/1;max-width:60em}
@media (max-width:700px){ #depart .illus{aspect-ratio:3/1} }

/* --- 01 : les quatre défis, dessinés au trait --- */
.challenges{margin-top:clamp(30px,5vh,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px)}
.chal{padding:clamp(18px,2.4vh,26px) 0 0;border-top:1px solid var(--paper-divider)}
.chal h3{font-family:var(--chakra);font-weight:700;font-size:clamp(16px,1.35vw,19px);line-height:1.3;color:var(--paper-ink);margin:0 0 12px}
.chal p{font-size:clamp(13.5px,1.05vw,15px);line-height:1.55;color:var(--txt2);min-height:5.2em}
.chal svg{width:100%;max-width:240px;height:78px;color:var(--paper-link);margin-top:18px;overflow:visible}
.chal svg path,.chal svg circle,.chal svg rect,.chal svg ellipse{stroke-width:1.2}
.hinge{margin-top:clamp(40px,6vh,72px);padding-top:clamp(20px,3vh,30px);border-top:1px solid var(--paper-divider);color:var(--txt2);font-size:clamp(19px,1.8vw,24px);line-height:1.45;letter-spacing:-.2px;max-width:40em}
.hinge strong{color:var(--paper-ink);font-weight:600}
@media (max-width:1000px){ .challenges{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,3vw,40px)} }
@media (max-width:560px){ .challenges{grid-template-columns:1fr} .chal p{min-height:0} }

/* --- le pied : une section à part entière, la plaque et tout ce qui va avec --- */
.sec.foot{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(28px,4vh,48px)}
.sec.foot.light::before{bottom:calc(-1 * var(--padB, 0px))}
#foot{opacity:0;transition:opacity .9s}
#foot.in{opacity:1}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px);align-items:start}
.foot-brand .plq{font-size:clamp(20px,2.2vw,32px)}
.foot-tag{margin:18px 0 0;font-size:clamp(14px,1.1vw,16px);line-height:1.55;color:var(--txt2);max-width:20em}
.foot-col h4{margin:0 0 12px;font-family:var(--chakra);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt3)}
.foot-col a{display:block;font-size:clamp(14px,1.05vw,15.5px);line-height:1.5;color:var(--txt);text-decoration:none;padding:3px 0}
.foot-col a:hover{color:var(--amber)}
.light .foot-col a:hover{color:var(--amb2)}
.foot-col p{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--txt2)}
.colophon{margin:clamp(28px,4vh,44px) 0 0;padding-top:clamp(16px,2.4vh,24px);border-top:1px solid var(--home-faint-rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;font-size:12px;letter-spacing:.02em;color:var(--txt3)}
.light .colophon{border-top-color:var(--paper-border-soft)}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* --- les pages légales --- */
.legal-page .prose{margin-top:clamp(26px,4vh,44px);max-width:46em}
.prose h3{margin-top:clamp(26px,3.6vh,38px);font-size:clamp(16px,1.3vw,18px);color:var(--paper-ink)}
.prose p,.prose li{margin-top:10px;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.62;color:var(--txt2)}
.prose ul{margin:6px 0 0;padding-left:1.2em}
.prose a{color:var(--paper-link);text-decoration:none;border-bottom:1px solid var(--paper-link-line)}
.prose a:hover{border-bottom-color:var(--paper-ink)}
.prose strong{color:var(--paper-ink);font-weight:600}
.prose .meta{margin-top:clamp(22px,3vh,32px);font-family:var(--chakra);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}

/* --- 02 : les trois règles, avec les mécanismes du labo --- */
.principle{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(40px,6vh,64px);padding-top:clamp(36px,5vh,64px)}   /* no rule above a pillar: the wire is the page's only line (fifth pass, remark 11) */
.principle h3{font-family:var(--chakra);font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:.004em;color:var(--amber);margin:0 0 16px}
.principle-lead{font-family:var(--chakra);font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1.16;letter-spacing:-.4px;color:var(--txt);margin-bottom:22px}
.principle-copy>p:not(.principle-lead){font-size:clamp(14px,1.1vw,15.5px);line-height:1.6;color:var(--txt2);max-width:405px}
.principle-copy>p:last-child{margin-top:13px}
.mechanism{position:relative;min-width:0;margin:0;background-image:radial-gradient(var(--home-grid-dot) .7px,transparent .7px);background-size:20px 20px;padding:10px 0 0}
.mechanism::before,.mechanism::after{position:absolute;content:"+";top:0;font-family:var(--chakra);color:var(--home-grid-marker);font-size:18px}
.mechanism::before{left:0}.mechanism::after{right:0}
.mechanism>svg{width:100%;height:auto;display:block;overflow:visible}
.diagram-guides{stroke:var(--home-diagram-guide);stroke-width:.7;fill:none;stroke-dasharray:4 5}
.diagram-lines{stroke:var(--home-diagram-line);stroke-width:1.3;fill:none}
.diagram-lines .strong-route{stroke:var(--amber);stroke-width:2.5}
.diagram-nodes{fill:var(--home-diagram-node-fill);stroke:var(--home-diagram-node-stroke);stroke-width:1.3}
.diagram-text{fill:var(--home-diagram-label);font-family:var(--chakra);font-size:10px;letter-spacing:1px;text-transform:uppercase}   /* the labels are keyed in sentence case; the capitals are the style's */
.diagram-text .amber-text{fill:var(--amber)}
.moving-packets{fill:var(--amber);opacity:0}
.access .moving-packets{fill:var(--home-vat-blue);stroke:var(--amber);stroke-width:2}
.mechanism figcaption{font-size:11px;color:var(--txt2);display:flex;align-items:baseline;gap:20px;padding-top:20px;border-top:1px solid var(--home-diagram-rule);margin-top:8px}
.mechanism figcaption span{font:10px var(--chakra);color:var(--home-diagram-caption);white-space:nowrap}
@media (max-width:820px){ .principle{grid-template-columns:1fr} }

/* --- qui est derrière --- */
.founder{margin-top:clamp(30px,5vh,56px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;max-width:56em}
.founder-pic{width:clamp(110px,12vw,160px);height:auto;border-radius:3px;border:1px solid var(--paper-border);display:block}
.founder-quote{margin:0 0 clamp(18px,3vh,28px);font-family:var(--chakra);font-weight:500;font-style:var(--home-quote-style);font-size:clamp(19px,1.9vw,27px);line-height:1.35;letter-spacing:-.005em;color:var(--paper-ink);max-width:24em}
.founder-txt h3{margin-top:8px}
/* a quotation in a section's head, set like the founder's words on the home page (fifth pass, remark 10) */
.quote{margin:clamp(22px,3.4vh,36px) 0 0}
.quote blockquote{margin:0;font-family:var(--chakra);font-weight:500;font-style:var(--home-quote-style);font-size:clamp(19px,1.9vw,27px);line-height:1.35;letter-spacing:-.005em;color:var(--home-heading);max-width:24em}
.quote figcaption{margin-top:10px;font-family:var(--chakra);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.light .quote blockquote{color:var(--paper-ink)}
.light .quote figcaption{color:var(--amb2)}
/* the founder on the blue (third pass, remark 16): « Les résultats » took the light slot before it */
.sec:not(.light) .founder-pic{border-color:var(--home-image-border)}
.sec:not(.light) .founder-quote,.sec:not(.light) .founder-txt h3{color:var(--home-heading)}
.sec:not(.light) .founder-role{color:var(--amber)}
.sec:not(.light) .founder-in{color:var(--home-eyebrow);border-bottom-color:var(--home-on-blue-link-border)}
.sec:not(.light) .founder-in:hover{color:var(--home-white);border-bottom-color:var(--home-white)}
.founder-in{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--chakra);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-link);text-decoration:none;border-bottom:1px solid var(--paper-link-line);padding-bottom:2px}
.founder-in svg{width:15px;height:15px;fill:currentColor}
.founder-in:hover{color:var(--paper-ink);border-bottom-color:var(--paper-ink)}
.founder-role{margin-top:6px;font-family:var(--chakra);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amb2,var(--paper-accent))}
.founder-txt p:not(.founder-role){margin-top:12px;font-size:clamp(14.5px,1.2vw,17px);line-height:1.6;color:var(--txt2)}
@media (max-width:600px){ .founder{grid-template-columns:1fr} }

/* --- 02 (ancien) --- */
.regle{margin-top:clamp(56px,9vh,110px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}
.regle.flip .txt{order:2}
.regle .txt p{margin-top:12px;font-size:clamp(14.5px,1.2vw,17px);line-height:1.6;color:var(--txt2);max-width:30em}
.regle .txt h3{margin-top:12px}
.regle .txt .eyebrow{margin-bottom:2px}
@media (max-width:820px){ .regle{grid-template-columns:1fr} .regle.flip .txt{order:0} }

.illus{position:relative;width:100%;aspect-ratio:4/3}
.illus canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.illus .cap{position:absolute;left:0;right:0;bottom:-4px;font-family:var(--chakra);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);text-align:right}
.regle .illus{aspect-ratio:5/4}
@media (max-width:820px){ .regle .illus{aspect-ratio:16/10} }

/* --- la plateforme : six conteneurs enchaînés par le fil, à la manière du deck --- */
.boxes{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,28px)}
.boxes li{position:relative;padding:clamp(16px,1.6vw,24px) clamp(10px,1vw,16px) clamp(14px,1.4vw,20px);text-align:center;
  border:1px solid var(--home-faint-rule);border-radius:3px;background:var(--home-box-bg);
  box-shadow:inset 0 0 0 1px var(--home-box-shadow);transition:border-color .5s,background .5s,box-shadow .5s,transform .5s}
.boxes li b,.boxes li span{opacity:0;transition:opacity .55s .08s}
.boxes li.lit b,.boxes li.lit span{opacity:1}
.boxes li::before{content:"";position:absolute;inset:4px;border:1px solid var(--home-box-inset-border);border-radius:2px;pointer-events:none}
.boxes li b{display:block;font-family:var(--chakra);font-weight:700;font-size:clamp(13px,1.08vw,15.5px);line-height:1.3;letter-spacing:.01em;color:var(--home-heading);min-height:2.6em}
.boxes li span{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--home-faint-rule);font-size:clamp(12px,.98vw,14px);line-height:1.5;color:var(--txt2)}
.boxes li.lit{border-color:var(--home-box-active-border);background:var(--home-box-active-bg);box-shadow:0 0 0 1px var(--home-box-active-shadow),0 10px 40px var(--home-box-active-deep-shadow);transform:translateY(-3px)}
.boxes li.lit b{color:var(--home-white)}
.boxes li.lit::before{border-color:var(--home-box-active-inset)}
@media (max-width:859px){
  .boxes{gap:4px}
  .boxes li{padding:7px 2px}
  .boxes li b{font-size:8.5px;min-height:0;line-height:1.2;letter-spacing:0;overflow-wrap:anywhere}
  .boxes li span{display:none}
}
.duo{margin-top:clamp(36px,5.5vh,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2.4vw,32px)}
.callout{position:relative;padding:clamp(16px,1.8vw,26px) clamp(18px,2vw,30px);background:var(--home-callout-bg);border:1px solid var(--home-faint-rule);border-left:3px solid var(--amber)}
.callout p{margin-top:9px;font-size:clamp(14px,1.14vw,16px);line-height:1.58;color:var(--txt2)}
.sec .after{margin-top:clamp(26px,4vh,40px);padding-top:clamp(16px,2vh,24px);border-top:1px solid var(--home-faint-rule);font-size:clamp(14px,1.14vw,16px);line-height:1.55;color:var(--txt2);font-style:var(--home-quote-style);max-width:60em}

/* --- 04 : la timeline des ateliers, comme dans le deck --- */
.tline{position:relative;margin-top:clamp(34px,5vh,64px)}
.tline .bands{display:grid;grid-template-columns:1fr 4fr 1fr;gap:10px;margin-bottom:clamp(28px,4vh,44px)}
.tline .band{opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.tline .band.in{opacity:1;transform:none}
.tline .band{border:1px solid var(--cu30);border-bottom:2px solid var(--home-timeline-rule);padding:10px 14px 9px;text-align:center;background:var(--home-timeline-bg)}
.tline .band b{display:block;font-family:var(--chakra);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.tline .band span{display:block;margin-top:3px;font-family:var(--chakra);font-weight:700;font-size:clamp(13px,1.1vw,15px);color:var(--home-heading)}
.tline .track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.2vw,18px)}
.tline .at{position:relative;display:block;padding:0 4px;border:0;text-align:center}
.tline .at.up{padding-bottom:clamp(52px,7vh,72px);align-self:end}
.tline .at.dn{padding-top:clamp(52px,7vh,72px);grid-row:2;align-self:start}
.tline .at i{display:none}
.tline .at b{display:block;font-family:var(--chakra);font-weight:700;font-size:clamp(14.5px,1.16vw,16.5px);color:var(--home-heading)}
.tline .at p{margin-top:4px;font-size:clamp(13px,1.02vw,14.5px);line-height:1.5;color:var(--txt2)}
.tline .at small{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.02em;color:var(--txt3)}
.tline .at.up{grid-row:1}
.tline .track{grid-template-rows:auto auto}
.tline .at:nth-of-type(1){grid-column:1}.tline .at:nth-of-type(2){grid-column:2}.tline .at:nth-of-type(3){grid-column:3}.tline .at:nth-of-type(4){grid-column:4}.tline .at:nth-of-type(5){grid-column:5}.tline .at:nth-of-type(6){grid-column:6}
.tline .after{margin-top:clamp(26px,4vh,40px);font-size:clamp(14px,1.14vw,16px);line-height:1.55;color:var(--txt2);font-style:var(--home-quote-style);border:0;padding:0}
.tline .at{opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.tline .at.lit{opacity:1;transform:none}
.tline .at.lit b{color:var(--home-white)}
@media (max-width:859px){
  .tline .bands{grid-template-columns:1fr;gap:6px}
  .tline .track{grid-template-columns:1fr;grid-template-rows:none;gap:14px}
  .tline .at,.tline .at.up,.tline .at.dn{grid-row:auto;grid-column:1;padding:0 0 0 44px;text-align:left;align-self:auto}
}

/* --- la fin : un appel, la plaque --- */
.fin .head{max-width:min(100%,40em)}
.cta2{margin-top:clamp(22px,3.4vh,36px);display:flex;flex-wrap:wrap;gap:12px}
/* THE CLOSING ROW IS CENTRED ON THE PAGE, not inside its section. A section stops at 1240 px and
   carries no auto margin — it is pinned to the left, which is right for a paragraph the wire
   annotates in the margin, and wrong for the one row of the site that addresses the whole width:
   at 1900 px the buttons sat 190 px left of centre (acceptance pass 7, remark 3). The section
   alone widens; its heading keeps its own max-width and does not move, so the ring on the wire
   still lands beside it. */
#deck .sec.fin{max-width:none}
.fin .cta2{margin-top:clamp(54px,8vh,90px);justify-content:center;padding:0 clamp(12px,3vw,40px)}
@media (max-width:859px){ .fin .cta2{justify-content:flex-start;padding:0} }

/* ================= début du bloc « méthodologie » (remarques 14 et 15) =================
   Deux choses, et rien d'autre : les blocs épinglés de la page Notre méthodologie, dont les
   étapes paraissent au rythme du défilement ; et la chasse aux opacités partielles au repos —
   sur cette page, un gris plus clair est une couleur, jamais une transparence. */

/* une étape : elle n'existe pas, puis elle est là, entière et nette. Jamais de long fondu. */
.st{opacity:0;transform:translateY(8px);transition:opacity .18s linear,transform .22s cubic-bezier(.2,.7,.2,1)}
.st.in{opacity:1;transform:none}

/* le fond clair court sur toute la hauteur du bloc, pas sur la seule fenêtre épinglée */
.pin.light{isolation:isolate}

/* --- 01 : les quatre défis, un bloc épinglé --- */

/* --- 02 : les trois piliers, un bloc épinglé chacun --- */
/* the section opens the page and no longer carries a title: it sits where the first section sits,
   not a screen and a half below the first one (sixth pass, remark 4) */
#deck #approche.sec{padding-top:clamp(11px,1.5vh,18px);padding-bottom:clamp(20px,3vh,40px)}
/* THE QUOTE IS THE PAGE, so it takes the section-title step rather than the quote step it kept
   from the days it followed a title — and half the air above it (acceptance pass 7, remark 6). */
#approche .quote blockquote{font-size:clamp(25px,3.1vw,40px)}
/* the quote OPENS the section — it is the important thing on this page — and the sentence follows it,
   at the distance the quote used to keep from the title above it (sixth pass, remark 5) */
#approche .head > .quote{margin-top:0}
/* Two points more than the body step, written as the sum so the instruction stays readable.
   It was four at remark 7, and two of them came back at remark 23. */
#approche .head > .lead{margin-top:clamp(22px,3.4vh,36px);font-size:calc(clamp(15px,1.3vw,18.5px) + 2pt)}
.pin.on .principle{margin-top:0;padding-top:0}
/* les libellés du mécanisme paraissent d'un coup : l'état posé est 0 ou 1, la douceur est ici */
.decision-label,.refused-label,.allowed-label,.access-stop,.moving-packets,.moving-packets [data-packet]{transition:opacity .2s linear}
.filter-core{stroke:var(--paper-filter-core)}

/* les derniers traits de la page : mêmes gris, posés en couleur au lieu d'une transparence */
body.inner .colophon{border-top-color:var(--paper-colophon-border)}
body.inner .light .btn.s{border-color:var(--paper-button-border)}
body.inner .light .lnk{border-bottom-color:var(--paper-link-border-soft)}
/* the pillars alternate blue and white (third pass, remark 5): the same drawings, in the colours of the white print */
.light .principle-lead{color:var(--paper-ink)}
.light .principle-copy>p:not(.principle-lead){color:var(--paper-secondary)}
.light .mechanism{background-image:radial-gradient(var(--paper-grid) .7px,transparent .7px)}
.light .mechanism::before,.light .mechanism::after{color:var(--paper-guide)}
.light .diagram-guides{stroke:var(--paper-diagram-guide)}
.light .diagram-lines{stroke:var(--paper-link)}
.light .diagram-lines .strong-route{stroke:var(--amb2)}
.light .diagram-nodes{fill:var(--paper-sheet);stroke:var(--paper-link)}
.light .diagram-text{fill:var(--paper-secondary)}
.light .diagram-text .amber-text{fill:var(--amb2)}
.light .moving-packets{fill:var(--amb2)}
.light .access .moving-packets{fill:var(--paper-sheet);stroke:var(--amb2)}
.light .mechanism figcaption{color:var(--paper-secondary);border-top-color:var(--paper-grid)}
.light .mechanism figcaption span{color:var(--paper-muted)}
.light .filter-core{stroke:var(--paper-guide)}
.light .principle h3{color:var(--amber)}
/* ================= fin du bloc « méthodologie » ================= */

/* ---- the pricing grid (third pass, remark 15): four plans, the software factory lit ---- */
/* THE GRID HAS TO FIT THE SCREEN TO BE PINNED. A block taller than the window stays in the flow and
   reveals all at once — the fallback, not the intent. The section's own top padding is what pushed it
   over on an ordinary laptop, and a pinned block re-centres itself anyway (acceptance pass 8, remark 3). */
#pin-grille .pinned{padding-top:clamp(24px,3.5vh,48px);padding-bottom:clamp(24px,3.5vh,48px)}
.plans{list-style:none;margin:clamp(30px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.plan{position:relative;display:flex;flex-direction:column;margin:0;padding:clamp(20px,2vw,30px) clamp(16px,1.6vw,24px);border:1px solid var(--paper-soft-border);border-radius:3px;background:var(--paper-surface)}
.plan::before{content:"";position:absolute;inset:4px;border:1px solid var(--paper-inset-border);border-radius:2px;pointer-events:none}
/* `lit` is the pinned block's own vocabulary — it strips that class from every step it reveals — so
   the recommended card cannot wear it (acceptance pass 8, remark 3). */
.plan.recommended{border-color:var(--paper-link);background:var(--home-white);box-shadow:0 10px 30px var(--paper-card-shadow)}
/* THE CARDS THAT READ GREY TAKE THE BLUE GROUND (acceptance pass 7, remark 18). Their ground was
   the vat blue at five per cent, which on paper reads as grey and as nothing else; on this site a
   blue ground is the vat blue, the one the dark sections stand on.
   The recommended card was never grey — it is white — so it keeps its ground and goes on leading
   the row: the inversion makes it the one light card among three, which is more, not less, of a
   signal.
   The card carries its own palette rather than every rule below being rewritten: the paper aliases
   point at the blue-ground tokens, and `.plan .price`, `.plan li` and the rest go on reading them. */
.plan:not(.recommended){
  --paper-ink:var(--home-title);
  --paper-secondary:var(--cu60);
  --paper-link:var(--cu);
  --paper-rule:var(--home-faint-rule);
  --paper-inset-border:var(--home-box-inset-border);
  --paper-action-border:var(--home-action-secondary-border);
  --paper-action-hover:var(--home-action-secondary-hover);
  --txt2:var(--home-copy);
  --txt3:var(--home-copy-muted);
  background:var(--home-vat-blue);
  border-color:var(--home-vat-blue);
}
/* The secondary button sits on the blue now, so it takes the blue ground's own treatment rather
   than the paper one the section would otherwise hand it. */
.plan:not(.recommended) .btn.s{color:var(--home-action-secondary-ink);border-color:var(--home-action-secondary-border)}
.plan:not(.recommended) .btn.s:hover{color:var(--home-white);border-color:var(--home-nav-border-strong);background:var(--home-action-secondary-hover)}
.plan.recommended::before{border-color:var(--paper-active-inset)}
.plan p{margin:0}
.plan .tier{font-family:var(--chakra);font-weight:500;font-size:clamp(10px,.86vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--paper-secondary)}
.plan.recommended .tier{color:var(--amb2)}
.plan .price{margin-top:clamp(12px,1.6vh,18px);font-family:var(--chakra);font-weight:700;font-size:clamp(26px,2.4vw,38px);line-height:1;letter-spacing:-.01em;color:var(--paper-ink)}
.plan .price small{display:block;margin-top:8px;font-weight:500;font-size:clamp(10.5px,.84vw,12px);letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:var(--txt3)}
.plan .what{margin-top:clamp(12px,1.6vh,18px);padding-top:clamp(12px,1.6vh,18px);border-top:1px solid var(--paper-rule);font-size:clamp(14px,1.1vw,16px);line-height:1.5;font-weight:600;color:var(--paper-ink)}
.plan ul{margin:10px 0 0;padding:0;list-style:none}
.plan li{position:relative;padding-left:16px;margin-top:6px;font-size:clamp(13.5px,1.02vw,15px);line-height:1.5;color:var(--txt2)}
.plan li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--paper-link)}
.plan .open{margin-top:auto;padding-top:clamp(16px,2.2vh,24px);font-family:var(--chakra);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--txt3)}
.plan .btn{margin-top:14px;align-self:flex-start}
.plans-note{margin:clamp(22px,3.4vh,36px) 0 0;max-width:46em;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.62;color:var(--txt2)}
@media (max-width:1100px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .plans{grid-template-columns:minmax(0,1fr)} }
/* ================= the phone, from 393 px up =================
   Everything below is scoped to a narrow viewport, so the validated desktop is untouched, pixel
   for pixel. Three things were wrong and each one is answered here: the first screen put its own
   furniture on top of the lighthouse, the sections carried desktop-sized empty bands, and the
   grey of --txt3 fell to 3.9:1 on the white print — legible on a monitor, not on a phone in
   daylight. The board of « 01 La plateforme » is answered in s4-scene.js, where its camera lives. */

@media (max-width:859px){
  /* the small grey on the white print: 3.92:1 → 4.85:1. The blue print was already at 7.5:1. */
  .light{--txt3:var(--paper-muted-mobile)}

  /* the wire's journey through the board: six stations at a phone's reading pace instead of a
     desktop's. 623vh was 4 456 px of scroll, 53 % of the whole page, for a scene that never
     showed a station whole. */
  .journey{height:460vh}

  /* the scene gives the board its height back: the head keeps its size, the padding stops
     spending 40 px on a screen that has 852 of them */
  .scene{padding-top:clamp(14px,2.2vh,26px);padding-bottom:clamp(10px,1.6vh,20px)}
  .scene .shead{margin-bottom:clamp(4px,.8vh,10px)}
  .scene .shead .sub2{margin-top:clamp(6px,1.1vh,12px)}
  .boardWrap{margin-top:clamp(8px,1.4vh,16px)}

  /* what waits for the wire: on a phone a whole screenful can be in that state at once, and at
     .34 it reads as a page that failed to load rather than as a page about to be written */
  .rv{opacity:.5}

  /* the three « Temps » are a legend for the workshops under them: one row of three, not three
     full-width bars pushing the first workshop off the screen */
  .tline .bands{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tline .band{padding:8px 4px 7px}
  .tline .band b{font-size:9.5px;letter-spacing:.12em}
  .tline .band span{font-size:11.5px;line-height:1.25}

  /* the sections: the vertical rhythm of a 900 px monitor, on a screen that is 393 wide */
  .sec{padding-top:clamp(56px,8vh,150px);padding-bottom:clamp(32px,4.5vh,80px)}
  .fin .cta2{margin-top:clamp(30px,4.4vh,90px)}
  .cta2 .btn{flex:1 1 auto;justify-content:center}
  .hinge{margin-top:clamp(28px,4vh,72px)}
  .challenges{gap:clamp(22px,3.4vh,34px) 0}
}

@media (max-width:600px){
  /* the first screen: the copy climbs so the buttons stop sitting on the lighthouse's gallery.
     12vh of nothing between the plaque and the eyebrow is a desktop measure. */
  .sur{margin-top:clamp(26px,4.6vh,54px)}
  .cta{margin-top:clamp(16px,2.8vh,44px)}
  .cta .btn{flex:1 1 42%}
  /* « Suivez le fil » sits under the navigation bar, not across it */
  .hint{bottom:clamp(10px,1.6vh,18px)}
  .founder{gap:clamp(16px,3vw,44px)}
}

/* ================= prefers-reduced-motion =================
   What the wire draws as you scroll STAYS: it is under the reader's own finger, and switching it
   off would leave a page of blank frames. What goes is everything that moves on its own — the
   little arrows that circle on the return, the halo of the pen, the swap of the scene's title —
   and every reveal becomes a state instead of a fade: what the wire has reached is simply there.
   Nothing here changes a RESTING state — an element waiting for the wire keeps the grey it has,
   and one the wire has passed keeps the ink it has. Only the travel between the two goes. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.st,.tline .at,.tline .band,.boxes li,.boxes li b,.boxes li span,#foot,
  #accompagnement .head.rv,.tline .after.rv,.scene .shead,.btn,.plan{transition:none}
  .stitle.swap{animation:none}
}