/* STRIKE — base.css v4 « Précision », round 2.
   Papier, encre graphite, traits d'un pixel et nuages de points. L'orange marque seulement l'erreur trouvée.
   La couleur n'arrive que comme lumière : le spectre est les cinq fuites réunies (vert Trésorerie → bleu Commandes →
   violet Clients → rose Paie → orange Facturation) ; une fuite se montre par son segment de lumière, jamais par un aplat.
   Trois familles visuelles : les Dessins (objets isométriques au trait), les nuages de points structurés, les schémas à
   cadran. Le reste : typographie et filets.
   Chargé APRÈS motion.css et scene.css (la direction artistique a le dernier mot), AVANT dessin.css / schema.css / intro.css.
   smooth.js écrit --sp (progression de page) sur [data-sp] et le fil de progression [data-sp-bar] ; motion.js : reveals, --p. */

/* Dickens Condensed Regular — © Fenotype, licensed to Benjamin Chiche through Font Bros (web licence, order #FB307335,
   up to 10 000 page views a month). Served as delivered (@font-face only, no conversion or subsetting), never as OTF. */
@font-face { font-family: "Dickens Cnd"; src: url(fonts/dickens-condensed-regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/instrument-serif.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }   /* relais libre (OFL), le temps que Dickens arrive */
@font-face { font-family: "Geist"; src: url(fonts/geist.woff) format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono.woff) format("woff"); font-weight: 100 900; font-display: swap; }
@property --ba { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ============================================================================================================
   0 · Tokens
   ============================================================================================================ */
:root {
  --paper: #F7F5E8; --raised: #FBFAF4;
  --ink: #151715;
  --ink-2: rgba(21, 23, 21, .62);   /* body copy, small mono annotations (.fig) */
  --ink-h: rgba(21, 23, 21, .52);   /* the second clause of a headline: 3.5:1 on paper */
  --ink-m: rgba(21, 23, 21, .62);   /* small mono labels and numbers: 4.9:1 */
  --ink-3: rgba(21, 23, 21, .38);   /* tertiary: placeholders, inactive marks */
  --line: rgba(21, 23, 21, .12); --line-2: rgba(21, 23, 21, .22); --guide: rgba(21, 23, 21, .045);
  --orange: #F87A01;                /* the error that was found — nothing else */
  --g1: #4ADAAD; --g2: #32B5EC; --g3: #B471EF; --g4: #F046A4; --g5: #F87A01;
  --spectrum: linear-gradient(90deg, #4ADAAD, #32B5EC 25%, #B471EF 50%, #F046A4 75%, #F87A01);
  --spectrum-v: linear-gradient(180deg, #4ADAAD, #32B5EC 25%, #B471EF 50%, #F046A4 75%, #F87A01);
  --display: "Dickens Cnd", "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-hero: clamp(54px, min(7.3vw, 13.6vh), 120px);   /* short laptop screens keep the stats strip in view */
  --fs-h1: clamp(52px, 7.2vw, 118px);
  --fs-h2: clamp(40px, 5.2vw, 84px);
  --fs-h3: clamp(19px, 1.55vw, 23px);    /* Geist 600 — Bricolage only from 40 px */
  --fs-lead: clamp(17.5px, 1.32vw, 20.5px);
  --gutter: clamp(20px, 4.4vw, 64px); --container: 1320px; --gap: clamp(12px, 1.7vw, 24px);
  --nav-h: 76px; --r: 12px; --r-lg: 18px;
  --bg: var(--paper); --card: var(--raised); --accent: var(--orange);
  color-scheme: light;
}
/* a leak = its segment of the spectrum (a tiny gradient, a rim, a light in a scene) — never a flat colour */
[data-leak="tresorerie"] { --seg: linear-gradient(90deg, #4ADAAD, #3EC8CD); }
[data-leak="commandes"] { --seg: linear-gradient(90deg, #3EC8CD, #32B5EC 45%, #7393EE); }
[data-leak="clients"] { --seg: linear-gradient(90deg, #7393EE, #B471EF 50%, #D25CCA); }
[data-leak="paie"] { --seg: linear-gradient(90deg, #D25CCA, #F046A4 50%, #F46053); }
[data-leak="facturation"] { --seg: linear-gradient(90deg, #F46053, #F87A01); }

/* ============================================================================================================
   1 · Socle
   ============================================================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: relative; isolation: isolate; margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(180, 113, 239, .26); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; z-index: 200; left: 16px; top: -64px; padding: 12px 18px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); text-decoration: none; transition: top .25s; }
.skip:focus { top: 16px; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
section { position: relative; }
[id] { scroll-margin-top: 92px; }
.pad { padding-block: clamp(96px, 11vw, 160px); }
.pad-s { padding-block: clamp(72px, 8vw, 112px); }

/* ============================================================================================================
   2 · Couches fixes. Derrière : la grille de 12 colonnes en filets + le grain du papier (statiques).
   Devant, en multiplication : une seule nappe de lumière linéaire au pied de l'écran (≈ 24vh, α ≤ .12), deux teintes
   voisines par zone (vert→bleu, bleu→violet, violet→rose ; jamais rose + menthe), qui monte doucement avec --sp.
   Multipliée, elle teinte le papier et les aplats papier des scènes à l'identique (aucune couture) et laisse l'encre noire.
   ============================================================================================================ */
.aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aura::after { content: ""; position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .09  0 0 0 0 .08  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.aura__grid { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto; width: min(100% - 2 * var(--gutter), var(--container));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.aura__grid i { border-left: 1px solid var(--guide); }
.aura__grid i:last-child { border-right: 1px solid var(--guide); }
.wash { position: fixed; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 55; pointer-events: none; mix-blend-mode: multiply; --sp: 0;
  --wa: calc((.035 + var(--sp) * .075) * clamp(.5, calc((1.04 - var(--sp)) * 8), 1)); }
.wash__z { position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(calc(.72 + var(--sp) * .34)); will-change: opacity, transform;
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .4) 42%, transparent); mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .4) 42%, transparent); }
.wash__z--1 { background: linear-gradient(90deg, #4ADAAD, #32B5EC); opacity: calc(var(--wa) * clamp(0, calc((.44 - var(--sp)) * 5), 1)); }
.wash__z--2 { background: linear-gradient(90deg, #32B5EC, #B471EF); opacity: calc(var(--wa) * clamp(0, min(calc((var(--sp) - .3) * 5), calc((.82 - var(--sp)) * 5)), 1)); }
.wash__z--3 { background: linear-gradient(90deg, #B471EF, #F046A4); opacity: calc(var(--wa) * clamp(0, calc((var(--sp) - .68) * 5), 1)); }

/* ============================================================================================================
   3 · Typographie. Bricolage condensé seulement à partir de 40 px ; en dessous, Geist 600 (−.01em).
   Titres en deux tons (encre + encre claire .52) ; l'accent clé reçoit un trait spectre de 2 px qui se trace.
   Les mots des titres montent en sortant du flou (14 px → 0, .9 s, 70 ms d'écart) ; les chapeaux sortent du flou.
   ============================================================================================================ */
.h1, .h2, .display, .stepper__v, .stepper__n, .statement, .cta__t, .manif__t, .foot__sig, .calc__n, .ticker__row span, .chapter__line, .beat__t, .reason .h3 {
  font-family: var(--display); font-weight: 400; font-stretch: normal; font-variation-settings: normal; font-style: normal; font-synthesis: none; }
.h1 { font-size: var(--fs-h1); line-height: .94; letter-spacing: -.02em; }
.h1--hero { font-size: var(--fs-hero); }
.h2 { font-size: var(--fs-h2); line-height: .95; letter-spacing: -.018em; text-wrap: balance; }
.h3 { font: 600 var(--fs-h3)/1.22 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.h1 .l, .h2 .l, .cta__t .l { display: block; }
:is(.h1, .h2, .h3, .cta__t, .manif__t, .chapter__line, .statement) em { font-style: normal; color: var(--ink-h); }
.u { background: var(--spectrum) no-repeat 0 calc(100% - .07em) / 0% 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.3s var(--ease-out) var(--ud, 1.05s); }
.is-in .u, .u.is-in, html:not(.js) .u { background-size: 100% 2px; }
.u--p, .is-in .u--p { transition: none; background-size: calc(var(--uon, 1) * 100%) 2px; }
/* headline words: rise out of a blur (no mask: the blur must not be cut) */
html.js [data-split]:not(.lightup) .sw { overflow: visible; }
html.js [data-split]:not(.lightup) .sw > span { transform: translate3d(0, .3em, 0); filter: blur(14px); opacity: 0;
  transition: transform .9s var(--ease-out), filter .9s var(--ease-out), opacity .75s var(--ease-out); transition-delay: calc(var(--w, 0) * 70ms + var(--delay, 0ms)); }
html.js [data-split].is-in:not(.lightup) .sw > span { transform: none; filter: none; opacity: 1; }
html.js [data-reveal="blur"] { transform: translate3d(0, 10px, 0); filter: blur(12px); transition-duration: .9s, 1s, 1.1s, 1s; }
.kicker { display: inline-flex; align-items: center; gap: 11px; font: 600 15px/1.25 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.kicker::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink);
  background: radial-gradient(circle, var(--ink) 0 1.4px, transparent 1.9px); }   /* a tiny target: visez juste */
.fig { font: 500 11.5px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sh .fig { font: 500 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }   /* a label that says something: business size, ink */
.mono { font-family: var(--mono); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 33em; }
.lead .key { font-weight: 500; color: var(--ink); }
.note { font: 400 12.5px/1.55 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
/* placeholders: visible but discreet (mono, tertiary ink, a dashed hairline under) — the list is in the report */
.ph { font-family: var(--mono); font-size: .84em; letter-spacing: .02em; color: var(--ink-3); border-bottom: 1px dashed var(--line-2); padding-bottom: 1px; }
.sh { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 18px; }
.sh::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); transform-origin: 0 50%; }
html.js .sh::before { transform: scaleX(0); transition: transform 1.6s var(--ease-out) .1s; }
html.js .sh.is-in::before { transform: none; }
.sh + * { margin-top: clamp(26px, 3.2vw, 46px); }

/* ============================================================================================================
   4 · Boutons, liens, puces — et la grammaire du survol :
   rangées et cartes : le filet du bas devient une ligne spectre d'1 px qui se trace depuis la gauche (350 ms) ;
   la pastille d'icône se remplit d'encre et pivote de −6° ; la flèche glisse de 4 px ; les cartes montent de 2 px.
   ============================================================================================================ */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 24px 0 26px;
  border: 0; border-radius: 99px; background: var(--ink); color: var(--paper); font: 500 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: translate .5s var(--ease-out), background-color .3s, color .3s, box-shadow .4s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ba), #4ADAAD, #32B5EC, #B471EF, #F046A4, #F87A01, #4ADAAD);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .9; transition: opacity .6s var(--ease-out); pointer-events: none; }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .17) 50%, transparent 66%) no-repeat;
  background-size: 250% 100%; background-position: 140% 0; transition: background-position 1.1s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; animation: ring 3.6s linear infinite; }
.btn:hover::after { background-position: -40% 0; }
.btn:hover { box-shadow: 0 14px 30px -18px rgba(21, 23, 21, .45); }
.btn:active { background: #000; }
@keyframes ring { to { --ba: 360deg; } }
.btn .arr { display: inline-block; transition: transform .35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn--ghost { background: rgba(251, 250, 244, .55); color: var(--ink); }
.btn--ghost::after { display: none; }
.btn--ghost:hover { background: rgba(251, 250, 244, .9); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 11.5px; }
.link { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font: 500 15.5px/1.2 var(--sans); color: var(--ink); text-decoration: none;
  background: linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat, var(--spectrum) 0 100% / 0% 1px no-repeat; transition: background-size .35s var(--ease-out); }
.link:hover { background-size: 100% 1px, 100% 1px; }
.link .arr { transition: transform .35s var(--ease-out); }
.link:hover .arr { transform: translateX(4px); }
/* the leak chip: ink, mono, a tiny 12 × 2 px segment of the leak's light */
.tag, .chips a { display: inline-flex; align-items: center; gap: 9px; height: 27px; padding: 0 11px 0 10px; border-radius: 99px; background: var(--ink); color: var(--paper);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none; }
.tag::before, .chips a::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 2px; background: var(--seg, var(--spectrum)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { height: 34px; padding: 0 14px 0 12px; font-size: 11px; transition: transform .35s var(--ease-out), box-shadow .35s; }
.chips a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(21, 23, 21, .6); }
/* rows */
.hrow { position: relative; }
.hrow::after, .guar__it::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--spectrum); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease-out); pointer-events: none; }
.chipico { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgba(251, 250, 244, .85); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .35s var(--ease-out), box-shadow .35s, transform .45s var(--ease-out); }
.chipico svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
@media (hover: hover) {
  .hrow:hover::after, .guar__it:hover::after { transform: none; }
  :is(.hrow, .guar__it):hover .chipico { background: var(--ink); box-shadow: none; transform: rotate(-6deg); }
  :is(.hrow, .guar__it):hover .chipico svg { stroke: var(--paper); }
}

/* ============================================================================================================
   5 · Navigation : une pilule de papier flottante (verre dépoli, filet), avec un fil spectre d'1 px = la progression
   ============================================================================================================ */
.nav { position: fixed; z-index: 60; top: 12px; left: 0; right: 0; pointer-events: none; }
.nav__bar { position: relative; display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 8px 0 22px; border-radius: 999px; pointer-events: auto;
  background: rgba(251, 250, 244, .82); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(21, 23, 21, .1), 0 14px 34px -26px rgba(21, 23, 21, .4); transition: background-color .4s; }
.nav.is-scrolled .nav__bar { background: rgba(251, 250, 244, .95); }   /* stays paper over the dark and coloured chapters */
html .nav[data-nav].is-hidden { transform: none; }   /* never hides: the call to action stays in reach */
.nav__progress { position: absolute; left: 28px; right: 28px; bottom: 0; height: 1px; background: var(--spectrum); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.nav__logo { display: block; flex: none; padding: 8px 0; color: var(--ink); }
.nav__logo svg { width: 98px; height: auto; fill: currentColor; }
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a { position: relative; padding: 10px 14px; font: 500 14.5px/1 var(--sans); color: var(--ink-2); text-decoration: none; transition: color .25s; }
.nav__links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: none; }
.nav__end { display: flex; align-items: center; gap: 8px; }
.menu { display: none; position: static; }
.menu__btn { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn i { position: relative; display: block; width: 16px; height: 8px; }
.menu__btn i::before, .menu__btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.25px; background: var(--ink); transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.menu__btn i::before { top: 0; } .menu__btn i::after { top: 6.75px; }
.menu[open] .menu__btn i::before { top: 3.4px; transform: rotate(45deg); }
.menu[open] .menu__btn i::after { top: 3.4px; transform: rotate(-45deg); }
.menu:not([open]) .menu__panel { display: none; }
.menu__panel { position: fixed; left: var(--gutter); right: var(--gutter); top: 76px; display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-lg);
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(21, 23, 21, .3); }
.menu__panel a { padding: 15px 14px; border-radius: 10px; font: 600 21px/1.1 var(--sans); letter-spacing: -.01em; text-decoration: none; }
.menu__panel a + a { box-shadow: inset 0 1px 0 var(--line); }
.menu__panel a[aria-current="page"] { color: var(--ink-h); }
.menu__panel a:last-child { margin-top: 8px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 500 15.5px/1 var(--sans); text-align: center; padding: 17px; box-shadow: none; }

/* ============================================================================================================
   6 · Étiquettes des scènes (placées par scene.js) : encre seulement. Un numéro mono + une puce papier à filet ;
   une fuite porte son petit segment de lumière (12 × 2 px) ; active = puce d'encre.
   ============================================================================================================ */
.scene .scene__in { gap: 8px; padding: 4px; margin: -4px; }
.scene .scene__in b { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--ink-m); font-style: normal; transition: color .3s; }
.scene .scene__in i { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; border-radius: 99px; background: rgba(251, 250, 244, .92);
  box-shadow: inset 0 0 0 1px var(--line-2); font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  text-shadow: none; transition: background-color .35s, color .35s, box-shadow .35s; }
.scene .scene__label[data-leak] .scene__in i::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 2px; background: var(--seg); }
.scene .scene__label.is-active i { background: var(--ink); color: var(--paper); box-shadow: none; }
.scene .scene__label.is-active b { color: var(--ink); }
.scene .scene__in > .lab-logo { display: block; width: 84px; height: auto; fill: var(--ink); }
@media (max-width: 600px) { .scene .scene__in i { height: 22px; padding: 0 8px; font-size: 9.5px; letter-spacing: .1em; gap: 6px; } .scene .scene__in { gap: 6px; } }

/* ============================================================================================================
   7 · Figures. Les Dessins (moteur dessin.js) : un cadre papier relevé à filet, la légende mono ; tant que le moteur
   n'est pas là, ce cadre calme + la légende (jamais d'image cassée). :where() = dessin.css garde la main.
   Les mini-schémas au trait (build.py) : encre, une erreur orange, une ligne de lecture qui les parcourt.
   ============================================================================================================ */
:where(.dessin) { position: relative; margin: 0; aspect-ratio: var(--ar, 4 / 3); border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
:where(.dessin) > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
:where(.dessin__still) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
html:not(.js) :where(.dessin__still) { display: block; }
:where(.dessin__state) { position: absolute; top: 14px; right: 16px; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
:where(.dessin__cap) { position: absolute; left: 16px; bottom: 13px; right: 16px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .44); }
.dessin.dessin--bare { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.dessin.dessin--bare .dessin__cap { left: 0; right: 0; bottom: 0; }
.dessin.dessin--bare .dessin__state { right: 0; top: 0; }
.halo { position: relative; isolation: isolate; --h1: 50, 181, 236; --h2: 180, 113, 239; }
/* the light under a big drawing: a broad plateau of the first hue (α .18 → .15), the second hue at the rim (.11 → 0).
   On this warm paper, green, pink and orange read as colour from α ≈ .10; blue and violet only tint the paper cooler. */
.halo::before { content: ""; position: absolute; z-index: -1; left: -7%; right: -7%; bottom: -10%; height: 64%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--h1), .18), rgba(var(--h1), .16) 42%, rgba(var(--h2), .12) 70%, rgba(var(--h2), 0)); }
@media (max-width: 900px) { .halo::before { left: 0; right: 0; } }   /* never wider than the screen */
.halo:has(> .dessin:not(.dessin--bare))::before { display: none; }   /* a drawing still to come keeps its calm paper frame, no glow */
.halo[data-halo="zone-a"], .halo[data-halo="tresorerie"] { --h1: 74, 218, 173; --h2: 50, 181, 236; }
.halo[data-halo="zone-b"], .halo[data-halo="commandes"] { --h1: 50, 181, 236; --h2: 180, 113, 239; }
.halo[data-halo="zone-c"], .halo[data-halo="clients"] { --h1: 240, 70, 164; --h2: 180, 113, 239; }
.halo[data-halo="paie"] { --h1: 240, 70, 164; --h2: 180, 113, 239; }
.halo[data-halo="facturation"] { --h1: 248, 122, 1; --h2: 240, 70, 164; }
.plate { position: relative; padding: 18px 20px 22px; border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.plate > .fig { margin-bottom: 14px; }
.plate::before { content: ""; position: absolute; top: 0; left: 24px; width: 120px; height: 1px; background: var(--seg, var(--spectrum)); opacity: .9; }
.viz { width: 100%; height: auto; overflow: visible; }
.viz * { vector-effect: non-scaling-stroke; }
.viz .g { fill: none; stroke: rgba(21, 23, 21, .1); stroke-width: 1; }
.viz .t { fill: none; stroke: rgba(21, 23, 21, .32); stroke-width: 1; stroke-linecap: round; }
.viz .s { fill: none; stroke: rgba(21, 23, 21, .74); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.viz .m { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.viz .pf { fill: var(--raised); }
.viz .d { stroke-dasharray: 3 3.5; }
.viz .e { fill: none; stroke: var(--orange); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.viz .e.faint { stroke-width: 1; opacity: .45; }
.viz .ef { fill: var(--orange); stroke: none; }
.viz text { font-family: var(--mono); font-size: 7.5px; font-weight: 500; letter-spacing: .14em; fill: rgba(21, 23, 21, .6); }
.viz .xe { fill: var(--orange); }
.viz .halo { transform-box: fill-box; transform-origin: center; animation: ringPulse 2.8s var(--ease-in-out) infinite; }
.viz .blink { animation: blink 3.6s var(--ease-in-out) infinite; animation-delay: calc(var(--k, 0) * .16s); }
@keyframes ringPulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .25; transform: scale(1.18); } }
@keyframes blink { 0%, 100% { opacity: 1; } 40% { opacity: .3; } }
.vizbox { position: relative; overflow: hidden; }
html.js .vizbox .viz { clip-path: inset(-8% 100% -8% 0); transition: clip-path 1.7s cubic-bezier(.65, 0, .35, 1) .15s; }
html.js .vizbox .viz :is(.e, .ef, .xe) { opacity: 0; transition: opacity .6s var(--ease-out) 1.45s; }
html.js .vizbox.is-in .viz { clip-path: inset(-8% -8% -8% 0); }
html.js .vizbox.is-in .viz :is(.e, .ef, .xe) { opacity: 1; }
html.js .vizbox.is-in .viz .e.faint { opacity: .45; }
html.js .vizbox::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none; opacity: 0;
  background: var(--spectrum-v) 100% 0 / 1px 100% no-repeat, linear-gradient(90deg, rgba(180, 113, 239, 0) 70%, rgba(180, 113, 239, .08));
  transform: translate3d(-100%, 0, 0); }
html.js .vizbox.is-in::after { animation: read 1.7s cubic-bezier(.65, 0, .35, 1) .15s both; }
@keyframes read { 0% { opacity: 1; transform: translate3d(-100%, 0, 0); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 0, 0); } }
/* technical corner marks (registration ticks) */
.ticks4::after, .tell__panel::after { content: ""; position: absolute; inset: 12px; z-index: 3; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 10px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 10px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 10px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 10px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 10px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 100% / 1px 10px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 10px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px 10px no-repeat; }

/* ============================================================================================================
   8 · Accueil — le héros « La quille » : scène pleine largeur derrière, texte à gauche, bande de chiffres en filets.
   Épinglé 130vh : la quille avance (scène) pendant que le texte reste lisible.
   ============================================================================================================ */
.hseq__stick { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--paper); }
.hseq__in { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: center;
  padding: calc(var(--nav-h) + 30px) 0 36px; pointer-events: none; }
.hseq__copy { grid-column: 1 / span 6; max-width: 620px; pointer-events: auto; }
.hseq__copy .h1 { margin-top: 26px; }
.hseq__copy .lead { margin-top: 30px; max-width: 30em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hseq__fig { position: absolute; top: calc(var(--nav-h) + 26px); right: 0; text-align: right; }
.hseq .scene { z-index: 0; }
.hseq__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 245, 232, .94) 0%, rgba(247, 245, 232, .8) 30%, rgba(247, 245, 232, .3) 46%, rgba(247, 245, 232, 0) 58%); }
.hseq__foot { position: relative; z-index: 2; background: linear-gradient(rgba(247, 245, 232, 0), rgba(247, 245, 232, .88) 36%); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
html.js .stats { animation: statsIn 1.2s var(--ease-out) 1.15s both; }
@keyframes statsIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
html.intro .stats { animation-play-state: paused; }   /* the opening film first (intro.js removes html.intro at its end) */
.stats li { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 18px 20px; border-left: 1px solid var(--line); font: 500 14.5px/1.3 var(--sans); color: var(--ink); }
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats .ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.stats .stats__cue { justify-content: flex-end; gap: 14px; padding-right: 0; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.stats__cue i, .hseq__cue i { width: 1px; height: 30px; background: linear-gradient(var(--ink-m), transparent); transform-origin: 50% 0; animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hseq__cue { position: absolute; z-index: 2; left: 50%; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateX(-50%);
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 901px) {
  .hseq .scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; }
  html.js .hseq { height: 160vh; }
  html.js .hseq__stick { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  html.js .hseq__copy { transform: translate3d(0, calc(var(--pe, 0) * -5vh), 0); }
  html.js .hseq__foot { opacity: clamp(0, calc(1 - var(--p, 0) * 2.2), 1); transform: translate3d(0, calc(var(--p, 0) * 36px), 0); }
  html.js .hseq__cue { opacity: clamp(0, calc(1 - var(--p, 0) * 4), 1); }
}
@media (max-width: 900px) {
  .hseq__stick { display: block; min-height: 0; }
  .hseq__in { display: block; padding: calc(var(--nav-h) + 26px) 0 0; }
  .hseq__copy { max-width: 640px; }
  .hseq__fig, .hseq__scrim, .hseq__cue { display: none; }
  .hseq .scene { width: min(100% - 2 * var(--gutter), 600px); max-width: none; margin: 18px auto 0; aspect-ratio: 1 / 1.04; }
  .hseq__foot { background: none; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats .stats__cue { display: none; }
  .stats li { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 16px 12px 22px; font-size: 13.5px; }
}
@media (max-width: 600px) { .hseq .scene { width: 100%; margin-inline: 0; } }   /* edge to edge (a child of the full-width stick) */

/* ============================================================================================================
   9 · Accueil — le mécanisme (le calcul se fabrique, épinglé 220vh)
   ============================================================================================================ */
.seq { position: relative; z-index: 2; background: var(--paper); }
/* the section rises over the hero's last screen: no edge, no shadow — its paper fades in over its first ~100 px, so the
   pin's rain passes straight on into the mechanism (scene-calcul draws the drops on from there) */
@media (min-width: 901px) { html.js .seq { margin-top: -40vh; background: linear-gradient(rgba(247, 245, 232, 0), var(--paper) calc(var(--nav-h, 68px) + 4vh)); } }
.seq__stick { position: relative; padding: clamp(96px, 12vw, 150px) 0; overflow-x: clip; }
.seq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.seq__copy { grid-column: 1 / span 5; position: relative; z-index: 1; }
.seq__copy::before { content: ""; position: absolute; inset: -48px -72px -48px -96px; z-index: -1; pointer-events: none;   /* in front of the canvas: the documents never cross the text */
  background: radial-gradient(closest-side, rgba(247, 245, 232, .94), rgba(247, 245, 232, .82) 62%, rgba(247, 245, 232, 0)); }
.seq__fig { grid-column: 6 / -1; position: relative; }
.seq__copy .h2 { font-size: clamp(36px, min(4.4vw, 7.2vh), 72px); max-width: 11.5ch; }
.seq .scene { max-width: none; aspect-ratio: 1 / .86; }
.calc { margin-top: 32px; border-top: 1px solid var(--line-2); }
.calc__row { --on: clamp(0, calc((var(--p, 1) - var(--a, 0)) * 14), 1); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: end;
  padding: 14px 0 12px; border-bottom: 1px solid var(--line); opacity: calc(.18 + var(--on) * .82); transform: translate3d(0, calc((1 - var(--on)) * 12px), 0); }
.calc__row--total { border-bottom: 0; border-top: 1px solid var(--ink); margin-top: -1px; }
.calc__n { font-size: clamp(40px, min(4.9vw, 8.4vh), 80px); line-height: .9; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc__n .op { color: var(--ink-3); }
.calc__n .err { position: relative; }
.calc__n .err::after { content: ""; position: absolute; right: -.17em; top: .04em; width: .1em; height: .1em; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 .07em rgba(248, 122, 1, .16); opacity: var(--on); transform: scale(calc(.4 + var(--on) * .6)); }   /* the found error */
.calc__row--total .u { --uon: var(--on); }
.calc__row > p:last-child { padding-bottom: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.calc__note { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.seq__cta { margin-top: clamp(14px, 2.4vh, 24px); }
/* your turnover: a stepped slider (10 M€ → 1 Md€); the figures roll to the new value (scene-calcul) */
.calc__ca { padding-bottom: 4px; min-width: 0; }
.calc__ca > p:first-child { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.calc__ca > p:first-child b { font-weight: 500; color: var(--ink); }
.ca { display: block; margin-top: 8px; }
.ca input { --f: calc(var(--v, 2) / 7 * 100%); -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.ca input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #4ADAAD, #32B5EC, #B471EF, #F046A4, #F87A01) 0 0 / var(--f) 100% no-repeat, rgba(21, 23, 21, .16); }
.ca input::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(21, 23, 21, .16); }
.ca input::-moz-range-progress { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #4ADAAD, #32B5EC, #B471EF, #F046A4, #F87A01); }
.ca input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(21, 23, 21, .18); transition: transform .25s var(--ease-out); }
.ca input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(21, 23, 21, .18); }
.ca input:hover::-webkit-slider-thumb, .ca input:active::-webkit-slider-thumb { transform: scale(1.15); }
.ca input:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 4px; }
.ca__ends { display: flex; justify-content: space-between; margin-top: 3px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
html:not(.js) .ca, html:not(.js) .ca__ends, html:not(.js) .calc__ca b { display: none; }
.seq .note { margin-top: 16px; }
@media (min-width: 901px) {
  html.js .seq { height: 170vh; }
  html.js .seq__stick { position: sticky; top: 0; height: 100vh; height: 100svh; padding: calc(var(--nav-h) + 4vh) 0 24px; display: grid; align-items: start; overflow: hidden; }
  html.js .seq .scene { aspect-ratio: auto; height: min(74vh, 740px); }
}
@media (max-width: 900px) {
  .seq__copy, .seq__fig { grid-column: 1 / -1; }
  .seq__fig { order: -1; }
  .seq .scene { aspect-ratio: 1 / .9; }
  /* phones and tablets: a full-screen passage, like « Une erreur sur cent » — the calculation fills the screen and is read
     one figure at a time as you scroll (the title, 1 %, × your turnover, = what is at stake); the scene above the words */
  html.js .seq { height: 400vh; }
  html.js .seq__stick { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; display: block; overflow: hidden; }
  html.js .seq__grid { position: absolute; inset: 0; display: block; }
  html.js .seq__fig { position: absolute; inset: 0; z-index: 0; }
  html.js .seq .scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; }
  html.js .seq__copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(26px, 5svh); z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
  html.js .seq__copy::before { inset: -26svh calc(-1 * var(--gutter)) -8svh; background: linear-gradient(rgba(247, 245, 232, 0), rgba(247, 245, 232, .9) 34%, var(--paper) 60%); }
  html.js .seq__copy > *, html.js .seq .calc > * { grid-area: 1 / 1; }
  html.js .seq .calc { display: contents; }
  html.js .seq__copy .sh { display: none; }
  html.js .seq__copy .h2 { align-self: end; max-width: 11.5ch; font-size: clamp(46px, 12.8vw, 68px); --out: clamp(0, calc((var(--p, 1) - .1) * 14), 1);
    opacity: calc(1 - var(--out)); transform: translate3d(0, calc(var(--out) * -26px), 0); }
  html.js .seq .calc__row { align-self: end; display: block; padding: 0; border: 0; margin: 0;
    --in: clamp(0, calc((var(--p, 1) - var(--ma)) * 14), 1); --out: clamp(0, calc((var(--p, 1) - var(--mb)) * 14), 1);
    opacity: calc(var(--in) - var(--out)); transform: translate3d(0, calc((1 - var(--in)) * 30px - var(--out) * 30px), 0); pointer-events: none; }
  html.js .seq .calc__row:nth-child(1) { --ma: .12; --mb: .32; }
  html.js .seq .calc__row:nth-child(2) { --ma: .32; --mb: .6; }
  html.js .seq .calc__row:nth-child(3) { --ma: .6; --mb: 9; }
  html.js .seq[data-beat="2"] .calc__row--ca { pointer-events: auto; }
  html.js .seq .calc__n { font-size: clamp(84px, 27vw, 132px); line-height: .84; }
  html.js .seq .calc__row > p:last-child, html.js .seq .calc__ca > p:first-child { max-width: 24em; margin-top: 12px; padding: 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
  html.js .seq .calc__ca { padding: 0; }
  html.js .seq .ca { margin-top: 14px; }
  html.js .seq .calc__note { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
  html.js .seq__cta { grid-area: 2 / 1; margin-top: 20px; opacity: clamp(0, calc((var(--p, 1) - .64) * 12), 1); }
}
@media (max-width: 620px) { .calc__row { grid-template-columns: 1fr; gap: 6px; } }
@media (min-width: 901px) and (max-height: 820px) {   /* short laptop screens: the whole calculation and its button fit the pinned screen */
  html.js .seq__stick { padding-top: calc(var(--nav-h) + 1.5vh); }
  .seq__copy .h2 { font-size: clamp(34px, min(4.4vw, 6.4vh), 72px); }
  .calc { margin-top: 18px; }
  .calc__row { padding: 9px 0 8px; }
  .calc__n { font-size: clamp(38px, min(4.9vw, 7.2vh), 80px); }
  .calc__row > p:last-child, .calc__ca > p:first-child { font-size: 13.5px; }
  .calc__note { margin-top: 4px; font-size: 13.5px; }
}

/* ============================================================================================================
   10 · Accueil — manifeste : les mots s'allument à gauche ; à droite, le Dessin « la quille vacille »
   ============================================================================================================ */
.manif { overflow-x: clip; padding-block: clamp(44px, 4.6vw, 68px); }
.slot-schema { position: relative; overflow-x: clip; }   /* the schema section (schema.css) never widens the page */
.manif__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: center; }
.manif__copy { grid-column: 1 / span 7; }
.manif__t { margin-top: clamp(28px, 3vw, 44px); font-size: clamp(40px, 4.6vw, 76px); line-height: .98; letter-spacing: -.032em; }
.manif__t .u { --uon: clamp(0, calc((var(--p, 1) - .5) * 4), 1); }
.manif__t em { color: var(--ink); }
.manif__fig { grid-column: 8 / -1; }
.manif__fig .dessin { width: min(100%, calc(80vh * .8)); margin-inline: auto; }

/* ============================================================================================================
   11 · Accueil — les 5 fuites : une piste horizontale de cartes à filet (une arête de lumière = la fuite)
   ============================================================================================================ */
.leaks .hscroll__stick { flex-direction: column; justify-content: center; align-items: stretch; gap: clamp(22px, 3.4vh, 42px); }
html.js .leaks[data-hscroll] .hscroll__stick { padding-top: calc(var(--nav-h) - 6px); }
.leaks__title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; margin-top: clamp(18px, 3vh, 34px); }
.leaks__title .h2 { max-width: 20ch; font-size: clamp(40px, 4.6vw, 76px); }
.leaks .hscroll__track { gap: clamp(14px, 1.5vw, 22px); padding-block: 6px; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.leak { position: relative; flex: none; display: flex; flex-direction: column; width: min(80vw, 336px); height: min(54vh, 490px); min-height: 400px; padding: 18px 20px 20px;
  border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none;
  transition: box-shadow .45s, transform .35s var(--ease-out); }
.leak::before { content: ""; position: absolute; top: 0; left: 22px; width: 104px; height: 1px; background: var(--seg, var(--spectrum)); }
.leak:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -44px rgba(21, 23, 21, .45); }
.leak__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leak__n { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--ink-m); }
.leak .vizbox { margin: auto -4px; padding: 20px 4px; }
.leak__body p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.leak__go { display: flex; justify-content: flex-end; margin-top: 14px; }
.leak__go span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px;
  transition: background-color .35s, color .35s, transform .45s var(--ease-out), box-shadow .35s; }
.leak:hover .leak__go span { background: var(--ink); color: var(--paper); box-shadow: none; transform: rotate(-6deg); }
html.js .leaks[data-hscroll] .leak { opacity: calc(1 - min(.5, var(--ad, 0) * .38)); translate: 0 calc(var(--ad, 0) * 12px); }
.leaks__rail { position: relative; display: flex; justify-content: space-between; padding-top: 12px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--ink-2); }
.leaks__rail::before, .leaks__rail i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.leaks__rail i { background: var(--spectrum); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
html:not(.js) .leaks__rail { display: none; }

/* ============================================================================================================
   12 · Accueil — chapitre « L'IA, elle, voit tout. » : un cadre papier plein écran qui porte le terrain de points,
   épinglé 80vh sur grand écran (section 180vh) ; un voile de papier en bas à gauche pour la phrase.
   ============================================================================================================ */
.chapter--field { background: var(--paper); }
html.js .chapter.chapter--field { height: auto; }
.chapter__light { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(90deg, rgb(50, 181, 236), rgb(74, 218, 173) 68%); opacity: calc(.17 - .11 * clamp(0, 1 - (1 - var(--p, 0)) * 4, 1));   /* dims as the stepper's pink light arrives */
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .45) 45%, transparent); mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .45) 45%, transparent); }
.chapter--field .chapter__stick, html.js .chapter--field .chapter__stick { position: relative; height: min(114vh, 1040px); min-height: 600px; overflow: hidden; }
@media (min-width: 901px) {   /* after the rule above: the frame is pinned for 80vh while the terrain plays */
  html.js .chapter.chapter--field { height: 180vh; }
  html.js .chapter--field .chapter__stick { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
}
.chapter--field .chapter__frame, html.js .chapter--field .chapter__frame { position: absolute; inset: 0; clip-path: none; background: var(--paper); }
.chapter--field .chapter__frame::after { display: none; }
.chapter--field .scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; }
html.js .chapter--field .chapter__img { transform: none; }
.chapter__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(64% 56% at 0% 100%, rgba(247, 245, 232, .97), rgba(247, 245, 232, .8) 38%, rgba(247, 245, 232, 0) 74%); }
.chapter--field .chapter__text, html.js .chapter--field .chapter__text { z-index: 2; left: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: clamp(56px, 10vh, 120px);
  color: var(--ink); opacity: 1; transform: none; }
.chapter--field .chapter__kicker { display: inline-flex; align-items: center; gap: 12px; font: 600 15px/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); opacity: 1; }
.chapter--field .chapter__kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); background: radial-gradient(circle, var(--ink) 0 1.4px, transparent 1.9px); }
.chapter--field .chapter__line { max-width: none; margin-top: 18px; font-size: clamp(52px, 7.8vw, 132px); line-height: .9; letter-spacing: -.04em; }
.chapter__line .u { --uon: clamp(0, calc((var(--p, 1) - .3) * 3.2), 1); }

/* ============================================================================================================
   13 · Accueil — la méthode : UN écran épinglé (≈ 160vh de défilement). Quatre étapes cliquables à gauche (numéros en
   contour, l'étape active en encre et ouverte), à droite un panneau qui porte les quatre Dessins empilés : seul l'actif
   est visible et tourne (site.js pose .is-active / data-active et prévient le moteur).
   ============================================================================================================ */
.stepper { background: var(--paper); }
.stepper__stick { position: relative; padding-block: clamp(96px, 11vw, 150px); }
.stepper__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: center; }
.stepper__copy { grid-column: 1 / span 5; }
.stepper__t { font-size: clamp(40px, 4.2vw, 66px); max-width: 13ch; }
.stepper__list { margin-top: clamp(22px, 3vh, 34px); border-top: 1px solid var(--line-2); }
.stepper__step { position: relative; border-bottom: 1px solid var(--line); }
.stepper__step::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--spectrum); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.stepper__step.is-active::after { transform: none; }
.stepper__btn { display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto; align-items: end; column-gap: 8px; width: 100%; padding: 12px 0 10px;
  border: 0; background: none; text-align: left; cursor: pointer; }
.stepper__n { grid-row: 1 / 3; align-self: center; font-size: 44px; line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--ink);
  transition: color .45s var(--ease-out); }
.stepper__k { font: 600 clamp(18px, 1.35vw, 20px)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.stepper__v { font-size: 40px; line-height: .92; letter-spacing: -.034em; color: var(--ink); }
.stepper__step.is-active .stepper__n, html:not(.js) .stepper__n { color: var(--ink); }
.stepper__btn:hover .stepper__n { color: rgba(21, 23, 21, .22); }
.stepper__step.is-active .stepper__btn:hover .stepper__n { color: var(--ink); }
.stepper__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.stepper__body > p { overflow: hidden; min-height: 0; padding-left: 70px; font-size: 15.5px; line-height: 1.5; color: var(--ink); opacity: 0; transition: opacity .4s var(--ease-out), padding .55s var(--ease-out); }
.stepper__step.is-active .stepper__body, html:not(.js) .stepper__body { grid-template-rows: 1fr; }
.stepper__step.is-active .stepper__body > p, html:not(.js) .stepper__body > p { opacity: 1; padding-bottom: 14px; }
.stepper__more { margin-top: 22px; }
.stepper__panel { grid-column: 6 / -1; position: relative; padding: 0 0 18px; }
.stepper__panel::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(180, 113, 239, 0), #B471EF 30%, #F046A4 70%, rgba(240, 70, 164, 0)); }
.stepper__bar { display: flex; align-items: center; gap: 16px; padding: 4px 6px 14px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(21, 23, 21, .48); }
.stepper__now b { font-weight: 500; color: rgba(21, 23, 21, .78); }   /* a status, not a title: it stays under the steps' names */
.stepper__rail { position: relative; flex: 1; height: 1px; background: var(--line); }
.stepper__rail i { position: absolute; inset: 0; background: var(--spectrum); transform-origin: 0 50%; transform: scaleX(calc((var(--step, 0) + 1) / 4)); transition: transform .6s var(--ease-out); }
.stepper__figs { display: grid; }
.stepper__figs > .dessin { grid-area: 1 / 1; transition: opacity .5s var(--ease-in-out), visibility 0s .5s; }
html.js .stepper__figs > .dessin:not(.is-active) { opacity: 0; visibility: hidden; }
html.js .stepper__figs > .dessin.is-active { transition: opacity .7s var(--ease-in-out) .08s, visibility 0s; }
html:not(.js) .stepper__figs > .dessin:not([data-step="0"]) { display: none; }
@media (min-width: 901px) {
  html.js .stepper { height: 225vh; }
  html.js .stepper__stick { position: sticky; top: 0; height: 100vh; height: 100svh; padding: calc(var(--nav-h) + 4px) 0 20px; display: grid; align-items: center; }
}
@media (min-width: 901px) and (max-height: 820px) { .stepper__v { font-size: 40px; } .stepper__t { font-size: 40px; } .stepper__btn { padding: 9px 0 7px; } }
@media (min-width: 901px) and (max-height: 760px) {
  .stepper__copy > .sh, .stepper__more { display: none; }
  .stepper__t { margin-top: 0; }
  .stepper__list { margin-top: 16px; }
  .stepper__body > p { font-size: 14.5px; }
  .hseq__in { padding: calc(var(--nav-h) + 10px) 0 14px; }
  .hseq__copy .h1 { margin-top: 16px; }
  .hseq__copy .lead { margin-top: 18px; font-size: 16.5px; }
  .hero__ctas { margin-top: 22px; }
  .stats li { min-height: 58px; padding-block: 11px; }
}
@media (max-width: 900px) {
  .stepper__copy { display: contents; }
  .stepper__copy > .sh { grid-column: 1 / -1; order: 0; }
  .stepper__t { grid-column: 1 / -1; order: 1; margin-top: 0 !important; }
  .stepper__panel { grid-column: 1 / -1; order: 2; }
  .stepper__list { grid-column: 1 / -1; order: 3; margin-top: 0; }
  .stepper__more { grid-column: 1 / -1; order: 4; justify-self: start; margin-top: 0; }
}

/* ============================================================================================================
   14 · Bandeau « Ce que l'IA relit » : deux rangées qui glissent avec le défilement (encre et encre claire)
   ============================================================================================================ */
.ticker { padding-block: clamp(56px, 6vw, 88px); overflow: hidden; }
.ticker__rows { margin-top: clamp(24px, 3vw, 44px); }
.ticker__row { display: flex; width: max-content; will-change: transform; }
.ticker__row .tk { display: flex; }
.ticker__row span { display: inline-flex; align-items: center; gap: clamp(20px, 2.2vw, 34px); padding-right: clamp(20px, 2.2vw, 34px); font-size: clamp(52px, 7vw, 116px);
  line-height: 1.02; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
.ticker__row--b span { color: var(--ink-3); }
.ticker__row span::after { content: ""; flex: none; width: .13em; height: .13em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .55; }
.ticker__row--a { transform: translate3d(calc(-6% - var(--p, .5) * 24%), 0, 0); }
.ticker__row--b { transform: translate3d(calc(-34% + var(--p, .5) * 24%), 0, 0); }

/* ============================================================================================================
   15 · Accueil — pour qui, garanties, le modèle
   ============================================================================================================ */
.who-for { padding-block: clamp(44px, 4.4vw, 64px) clamp(20px, 2.2vw, 30px); }
.who-for__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.who-for__grid > .h2 { grid-column: 1 / span 5; }
.who-for__body { grid-column: 7 / -1; }
.crit { border-top: 1px solid var(--line-2); }
.crit li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.4; }
.crit__n { font: 500 11.5px/2.1 var(--mono); letter-spacing: .1em; color: var(--ink-m); }
.crit b { font-weight: 600; }
.nope { margin-top: 28px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.nope__t { font: 600 15px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.nope ul { margin-top: 4px; }
.nope li { display: flex; align-items: center; gap: 14px; padding-top: 14px; font: 600 clamp(17px, 1.4vw, 20px)/1.25 var(--sans); letter-spacing: -.01em; }
.nope svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.trust { padding-block: clamp(24px, 3vw, 40px) clamp(28px, 3vw, 44px); }
.guar__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); counter-reset: guar; }
.guar__it { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 132px; padding: 20px 20px 20px; border-left: 1px solid var(--line);
  font: 600 clamp(18px, 1.5vw, 21px)/1.28 var(--sans); letter-spacing: -.012em; counter-increment: guar; }
.guar__it::before { content: counter(guar, decimal-leading-zero); position: absolute; top: 24px; right: 20px; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--ink-2); }
.guar__it:first-child { border-left: 0; padding-left: 0; }
.guar__it .chipico { width: 46px; height: 46px; border-radius: 13px; }
.guar__it .chipico svg { width: 21px; height: 21px; }
.guar__t { max-width: 14em; }
.vos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: stretch; margin-top: clamp(36px, 4vw, 56px); }
.vos__facts { grid-column: 1 / span 7; }
.vos__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line-2); margin-top: 0 !important; }
.vos__facts .sh + .vos__list { margin-top: 22px !important; }
.vos__it { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font: 600 clamp(16px, 1.25vw, 18px)/1.3 var(--sans); letter-spacing: -.01em; }
.vos__story { grid-column: 9 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; margin: 0; padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.vos__story blockquote { margin: 0; font: 500 clamp(18px, 1.45vw, 21px)/1.45 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.vos__story blockquote::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 18px; background: linear-gradient(90deg, #4ADAAD, #32B5EC); }
.ctarow { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-block: 8px clamp(40px, 4vw, 60px);
  padding-top: 16px; border-top: 1px solid var(--line-2); }
.ctarow__note { font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.model__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; }
.model__t { grid-column: 1 / span 7; }
.model__txt { grid-column: 9 / -1; }
.model__txt .link { margin-top: 26px; }
.model { padding-block: clamp(44px, 4.4vw, 64px) clamp(56px, 6vw, 84px); }

/* ============================================================================================================
   16 · L'appel final : le seul pic de couleur du site — un champ de lumière sur papier (lumières douces, grain)
   ============================================================================================================ */
.cta { margin: 0 clamp(8px, 1vw, 16px); border-radius: 26px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .1  0 0 0 0 .1  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cta__light { position: absolute; inset: 0; z-index: -2; pointer-events: none; --on: clamp(0, calc(var(--p, 1) * 2.4 - .25), 1); }
.cta__horizon { position: absolute; left: 0; right: 0; bottom: 24%; height: 1px; background: var(--spectrum); opacity: calc(.35 + var(--on) * .65); }
.cta__fall { position: absolute; left: 0; right: 0; bottom: 24%; height: 30vh; background: linear-gradient(90deg, #B471EF, #F046A4); opacity: calc(var(--on) * .26);
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .4) 38%, transparent); mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .4) 38%, transparent); }
.cta__fall::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34%; background: inherit; opacity: .45;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.cta__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; padding-block: clamp(60px, 6.5vw, 96px) clamp(52px, 5.5vw, 80px); }
.cta__fig { grid-column: 1 / -1; }
.cta__t { grid-column: 1 / span 8; font-size: clamp(52px, 7.2vw, 120px); line-height: .88; letter-spacing: -.04em; }
.cta__side { grid-column: 9 / -1; }
.cta__side p { max-width: 26em; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); }
.cta__side .btn { margin-top: 26px; }

/* ============================================================================================================
   17 · Pied de page clair : la signature, les liens, le logo géant qui monte au défilement
   ============================================================================================================ */

.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; align-items: start; }


.foot__col:nth-of-type(1) { grid-column: 8 / span 2; }
.foot__col:nth-of-type(2) { grid-column: 10 / -1; }

.foot__who { margin-top: 18px; font-size: 15px; }

.foot__col nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--spectrum); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }

.foot__col nav a:hover::after { transform: none; }
.foot__c { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15.5px; }


.foot__logo svg { width: 100%; height: auto; fill: currentColor; transform: translate3d(0, calc((1 - clamp(0, calc(var(--p, 1) * 2.4 - .3), 1)) * 64%), 0); }
.foot__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* ============================================================================================================
   18 · Méthode : récit au défilement — le texte à gauche, la boucle épinglée à droite dans un panneau papier plein.
   ============================================================================================================ */
.tell { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.tell__body { grid-column: 1 / span 6; grid-row: 1; min-width: 0; }
.tell__stage { grid-column: 7 / -1; grid-row: 1; position: relative; }
.tell__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: calc(var(--nav-h) + 14px) 0 28px; display: grid; align-items: center; }
.tell__stagebox { position: relative; height: 100%; max-height: 800px; display: grid; align-items: end; }   /* the figure sits low, the HUD rides above it */
.tell__figs { display: grid; align-items: center; }
.tell__figs > .dessin { grid-area: 1 / 1; width: min(100%, calc((100vh - var(--nav-h) - 48px - var(--hud)) * 4 / 3)); margin-left: auto; transition: opacity .28s var(--ease-in-out), visibility 0s .28s; }
html.js .tell__figs > .dessin:not(.is-active) { opacity: 0; visibility: hidden; }
html.js .tell__figs > .dessin.is-active { transition: opacity .28s var(--ease-in-out), visibility 0s; }
html:not(.js) .tell__figs > .dessin:not([data-beats="0 1"]) { display: none; }
.tell { --hud: 300px; }   /* the boucle HUD: 300 or 250 px (its labels are laid out for those two sizes) */
@media (max-width: 1199px), (max-height: 820px) { .tell { --hud: 250px; } }
.tell__hud { position: absolute; z-index: 2; top: 0; right: 0; width: var(--hud); }
.tell__panel { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(21, 23, 21, .35); overflow: hidden; }
.tell__panel .scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; }
.tell__body > .beat { min-height: 76vh; padding: calc(var(--nav-h) + 28px) 0 56px; display: flex; flex-direction: column; justify-content: center; }
.tell__body > .beat > * + * { margin-top: 26px; }
.beat--hero .h1 { margin-top: 26px; }
.beat__n { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; color: rgba(21, 23, 21, .5); }
.beat__n b { display: inline-grid; place-items: center; min-width: 32px; height: 20px; padding: 0 8px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(21, 23, 21, .45); color: rgba(21, 23, 21, .8); font-weight: 500; }
.beat__t { font-size: clamp(72px, 9vw, 150px); line-height: .84; letter-spacing: -.046em; }
.beat__sub { font: 600 clamp(19px, 1.5vw, 22px)/1.25 var(--sans); letter-spacing: -.012em; color: var(--ink); }   /* the business word outranks the bowling word's subtitle size */
.beat .say { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.45; letter-spacing: -.01em; max-width: 28em; }
.fiche { border-top: 1px solid var(--line-2); }
.fiche > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 8px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.fiche dt { display: flex; gap: 10px; font: 600 15px/1.45 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.fiche dt::after { content: "→"; content: "→" / ""; color: var(--ink-3); transition: transform .35s var(--ease-out), color .35s; }
.fiche > div:hover dt::after { transform: translateX(4px); color: var(--ink); }
.fiche dd { margin: 0; font-size: clamp(16.5px, 1.22vw, 18px); line-height: 1.55; }
.tl { padding-top: 6px; }
.tl__line { position: relative; height: 1px; background: var(--line-2); }
.tl__line i { position: absolute; inset: 0; background: var(--spectrum); transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--pe, 0) * 1.6), 1)); }
html:not(.js) .tl { --pe: 1; }
.tl__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -5px; }
.tl__steps li { --on: clamp(0, calc((var(--pe, 0) * 1.6 - var(--k) / 4) * 14), 1); position: relative; padding: 26px 12px 0 0; }
.tl__steps li::before, .tl__steps li::after { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; }
.tl__steps li::before { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-3); }
.tl__steps li::after { background: var(--ink); opacity: var(--on); transform: scale(calc(.3 + var(--on) * .7)); }
.tl__steps b { display: block; font: 600 15px/1.25 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.tl__steps span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.35; }
.ctrls__t { font: 600 15px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.ctrls { margin-top: 14px; display: grid; gap: 8px; }
.ctrls li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 17px 20px; border-radius: var(--r); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 16.5px; line-height: 1.45; }
.ctrls li.hrow::after { left: 14px; right: 14px; bottom: 0; }
.ctrls li > span:first-child { font: 600 14px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.toggle { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--line-2); transition: background-color .5s var(--ease-out) .5s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(21, 23, 21, .2);
  transition: transform .6s var(--ease-out) .5s; }
.is-in .toggle, html:not(.js) .toggle { background: var(--ink); }
.is-in .toggle::after, html:not(.js) .toggle::after { transform: translateX(16px); }
.statement { font-size: clamp(40px, 3.3vw, 54px); line-height: 1; letter-spacing: -.026em; text-wrap: balance; }
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.months button { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2);
  font: 500 11.5px/1 var(--mono); color: var(--ink-2); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s, transform .35s var(--ease-out); }
.months button:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); transform: translateY(-2px); }
.months button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.faq__grid > .h2 { grid-column: 1 / span 5; }
.faq { grid-column: 7 / -1; border-top: 1px solid var(--line-2); }
.faq details { position: relative; border-bottom: 1px solid var(--line); }
.faq details::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--spectrum); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer;
  font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--sans); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .35s, box-shadow .35s, transform .45s var(--ease-out); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.25px; margin: -.6px 0 0 -5.5px; background: var(--ink); transition: transform .45s var(--ease-out), background-color .35s; }
.faq summary i::after { transform: rotate(90deg); }
@media (hover: hover) {
  .faq details:hover::after { transform: none; }
  .faq summary:hover i { background: var(--ink); box-shadow: none; transform: rotate(-6deg); }
  .faq summary:hover i::before, .faq summary:hover i::after { background: var(--paper); }
}
.faq details[open] summary i { background: var(--ink); box-shadow: none; }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: var(--paper); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details p { padding: 0 56px 24px 0; max-width: 38em; font-size: 17px; color: var(--ink-2); }
.beat__fig { width: 100%; }

/* ============================================================================================================
   19 · Les 5 fuites (page) : le radar en héros à droite, puis une rangée pleine largeur par fuite, la figure
   alternant à droite et à gauche, chacune la sienne (schémas sur papier relevé, Dessin « trésorerie »).
   ============================================================================================================ */
.xhero { padding: calc(var(--nav-h) + clamp(20px, 3vw, 44px)) 0 clamp(40px, 5vw, 72px); background: var(--paper); overflow-x: clip; }
.xhero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: center; min-height: calc(100vh - var(--nav-h) - 60px); }
.xhero__copy { grid-column: 1 / span 5; position: relative; z-index: 1; }
.xhero__copy .h1 { margin-top: 26px; }
.xhero__copy .lead { margin-top: 28px; }
.xhero__copy .chips { margin-top: 32px; }
.xhero__fig { grid-column: 6 / -1; position: relative; }
.xhero__fig .scene { max-width: 760px; aspect-ratio: 1 / .9; margin-inline: auto; }
.leakrow { padding-block: clamp(64px, 7.5vw, 112px); }
.leakrow + .leakrow { border-top: 1px solid var(--line); }
.leakrow__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: center; }
.leakrow__fig .dessin { width: min(100%, calc(76vh * 1.25)); margin-inline: auto; }
.leakrow__copy { grid-column: 1 / span 5; }
.leakrow__fig { grid-column: 7 / -1; }
.leakrow--flip .leakrow__copy { grid-column: 8 / -1; grid-row: 1; }
.leakrow--flip .leakrow__fig { grid-column: 1 / span 6; grid-row: 1; }
.leakrow__name { display: flex; align-items: center; gap: 10px; font: 600 clamp(17px, 1.35vw, 20px)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.leakrow__name::before { content: ""; flex: none; width: 14px; height: 2px; border-radius: 2px; background: var(--seg, var(--spectrum)); }
.leakrow__n { font: 500 .9em/1 var(--mono); letter-spacing: .04em; color: var(--ink); }
.leakrow .h2 { margin-top: 18px; font-size: clamp(40px, 4.2vw, 68px); }
.leakrow__mini { margin-top: 26px; max-width: 460px; padding: 12px 14px 14px; }
.leakrow__mini .vizbox { padding: 0; }
.leakrow .fiche { margin-top: 30px; }
.leakrow__fig .vizbox { padding: 6px 0 2px; }

/* ============================================================================================================
   20 · Filiale
   ============================================================================================================ */
.fhero { background: var(--paper); }
.fhero__stick { position: relative; padding: calc(var(--nav-h) + 24px) 0 40px; }
.fhero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: center; }
.fhero__copy { grid-column: 1 / span 6; position: relative; z-index: 1; }
.fhero__copy .h1 { margin-top: 26px; }
.fhero__copy .lead { margin-top: 30px; max-width: 30em; }
.fhero__fig { grid-column: 7 / -1; }
.fhero__fig .dessin { width: min(100%, calc(80vh * .8)); margin-inline: auto; }
.story span { transition: color .5s var(--ease-out); }
.story__a, .story__b { display: block; }
.story__a { color: var(--ink); }
.story__key { color: var(--ink) !important; background: var(--spectrum) no-repeat 0 100% / calc(var(--sk, 1) * 100%) 2px; }   /* the key sentence reads at once */
@media (min-width: 901px) {
  html.js .fhero { height: 160vh; }
  html.js .fhero__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + 8px) 24px; }
  html.js .fhero .story__a { color: color-mix(in srgb, var(--ink) calc(100% - clamp(0, (var(--p, 0) - .42) * 6, 1) * 38%), var(--paper)); }
  html.js .fhero .story__b { color: color-mix(in srgb, var(--ink) calc(62% + clamp(0, (var(--p, 0) - .42) * 6, 1) * 38%), var(--paper)); }
  html.js .fhero .story__key { --sk: clamp(0, calc((var(--p, 0) - .45) * 4), 1); }
}
.why__t { max-width: 17ch; }
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 4.4vw, 60px); }
.reason { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 18px; align-content: start; padding: 22px 24px 26px;
  border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease-out), box-shadow .45s; }
.reason:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 26px 50px -40px rgba(21, 23, 21, .45); }
.reason .mono { grid-column: 1 / -1; font: 600 14px/1.2 var(--sans); color: var(--ink); }
.reason__ico { grid-row: 2 / 4; width: 44px; height: 44px; margin-top: 26px; fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transition: transform .45s var(--ease-out); }
.reason:hover .reason__ico { transform: rotate(-6deg); }
.reason .h3 { margin-top: 22px; font-size: clamp(40px, 3.3vw, 52px); line-height: .92; letter-spacing: -.03em; }
.reason p:last-child { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.reason--us { box-shadow: none; }
.reason--us::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3), var(--g4), var(--g5)); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .7; }
.reason--us .mono { color: var(--ink); }
[data-spotlight]::before { background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgba(21, 23, 21, .035), transparent 62%); }
.cmp__wrap { margin-top: clamp(36px, 4.4vw, 56px); }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 20px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { padding-top: 20px; padding-bottom: 16px; font: 600 14px/1.2 var(--sans); color: var(--ink); border-bottom-color: var(--line-2); }
.cmp tbody th { width: 22%; padding-left: 0; font: 600 15px/1.45 var(--sans); color: var(--ink); }
.cmp td { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.45; color: var(--ink-2); }
.cmp .us { position: relative; background: var(--raised); box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line); }
.cmp thead th.us { color: var(--ink); border-radius: 14px 14px 0 0; box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 var(--line); }
.cmp thead th.us::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: var(--spectrum); }
.cmp td.us { color: var(--ink); font-weight: 500; }
.cmp tbody tr:last-child .us { border-radius: 0 0 14px 14px; }
.cmp td.us::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 12px; vertical-align: .12em; border-radius: 50%; background: var(--ink); }
.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: center; }
.duo > :first-child { grid-column: 1 / span 5; }
.duo > .duo__fig { grid-column: 8 / -1; }
.ticks { margin-top: 36px; border-top: 1px solid var(--line-2); }
.ticks li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.45; }
.ticks li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: .5em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); background: radial-gradient(circle, var(--ink) 0 1.4px, transparent 1.9px); }
.who { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; align-items: start; }
.who > .h2 { grid-column: 1 / span 5; }
.who__card { grid-column: 7 / -1; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.who__name { font: 600 clamp(20px, 1.7vw, 24px)/1.25 var(--sans); letter-spacing: -.01em; }
.who__card > p + p { margin-top: 14px; color: var(--ink-2); }
.who__story { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.5; color: var(--ink) !important; }

/* ============================================================================================================
   21 · Contact, mentions
   ============================================================================================================ */
.hero { position: relative; padding: calc(var(--nav-h) + clamp(52px, 7.5vw, 112px)) 0 clamp(64px, 7vw, 104px); isolation: isolate; }
.hero__light { display: none; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.contact__copy { grid-column: 1 / span 5; }
.contact__grid .h1 { margin-top: 26px; }
.contact__grid .lead { margin-top: 28px; }
.contact__aside { margin-top: 48px; }
.contact__aside .fiche { margin-top: 16px; }
.fiche--steps > div { grid-template-columns: 44px minmax(0, 1fr); }
.fiche--steps dt::after { content: none; }
.contact__direct { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 17px; }
.contact__who { margin-top: 22px; }
.form { grid-column: 7 / -1; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -64px rgba(21, 23, 21, .4); }
.form__t { grid-column: 1 / -1; font: 600 clamp(22px, 1.9vw, 27px)/1.15 var(--sans); letter-spacing: -.015em; }
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font: 600 14px/1.2 var(--sans); color: var(--ink); }
.field label small { font-size: 11px; letter-spacing: .06em; text-transform: none; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; height: 50px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 16px;
  transition: border-color .25s, box-shadow .35s; }
.field textarea { height: auto; min-height: 124px; padding: 13px 15px; line-height: 1.5; resize: vertical; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23151715' stroke-width='1.25'/></svg>") no-repeat right 18px center; }
.field :is(input, select, textarea):hover { border-color: rgba(21, 23, 21, .34); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(21, 23, 21, .06); }
.field [aria-invalid="true"] { border-color: var(--orange); }
.field .err { font: 500 11.5px/1.3 var(--mono); color: var(--ink); }
.field .err::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--orange); vertical-align: .08em; }
.field .err:empty { display: none; }
.form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.form__note { grid-column: 1 / -1; font: 500 12.5px/1.55 var(--mono); color: var(--ink-2); }
.form__note:empty { display: none; }
.form__note.is-demo { padding: 14px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--paper); color: var(--ink); }
.hero--calm .legal { max-width: 760px; }
.legal .h1 { margin-top: 26px; }
.legal h2 { margin-top: 52px; font: 600 clamp(21px, 1.8vw, 26px)/1.2 var(--sans); letter-spacing: -.01em; }
.legal p { margin-top: 14px; color: var(--ink-2); }

/* ============================================================================================================
   22 · Passage de page à page : un rideau de papier qui monte, une fine ligne spectre sur son arête (≤ 700 ms)
   ============================================================================================================ */
.vt-line { position: fixed; left: 0; top: 0; width: 100%; height: 2px; pointer-events: none; view-transition-name: vt-line; }
::view-transition-group(root) { animation-duration: .56s; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vtUnder .56s cubic-bezier(.5, .15, .1, 1) both; }
::view-transition-new(root) { animation: vtCurtain .56s cubic-bezier(.5, .15, .1, 1) both; }
::view-transition-group(vt-line) { animation: vtLine .56s cubic-bezier(.5, .15, .1, 1) both; background: var(--spectrum); box-shadow: 0 0 18px 2px rgba(180, 113, 239, .22); }
::view-transition-old(vt-line), ::view-transition-new(vt-line) { animation: none; opacity: 0; }
@keyframes vtUnder { to { transform: translate3d(0, -5vh, 0) scale(.985); opacity: .6; } }
@keyframes vtCurtain { from { clip-path: inset(100% 0 0 0); transform: translate3d(0, 6vh, 0); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes vtLine { 0% { translate: 0 106vh; opacity: 1; } 80% { opacity: 1; } 100% { translate: 0 0; opacity: 0; } }

/* ============================================================================================================
   23 · Grilles : grands écrans moyens, tablettes, téléphones
   ============================================================================================================ */
@media (min-width: 901px) and (max-width: 1100px) {
  .hseq__copy { grid-column: 1 / span 6; }
  .hseq__copy .lead { max-width: 27em; }
  .seq__copy { grid-column: 1 / span 6; } .seq__fig { grid-column: 7 / -1; }
  .model__t { grid-column: 1 / span 8; } .model__txt { grid-column: 1 / span 8; }
  .cta__t { grid-column: 1 / -1; } .cta__side { grid-column: 1 / span 8; }
  .stepper__copy { grid-column: 1 / span 5; } .stepper__panel { grid-column: 6 / -1; }
  .vos__facts { grid-column: 1 / -1; } .vos__story { grid-column: 1 / span 8; }
  .manif__copy { grid-column: 1 / span 7; } .manif__fig { grid-column: 8 / -1; }
}
@media (max-width: 900px) {
  :root { --nav-h: 72px; }
  .nav { top: 10px; }
  .nav__bar { height: 52px; width: calc(100% - 20px); padding: 0 6px 0 18px; }
  .nav__progress { left: 22px; right: 22px; }
  .menu__panel { top: 70px; left: 10px; right: 10px; }
  .nav__links { display: none; }
  .menu { display: block; }
  .nav__end { margin-left: auto; }
  .aura__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aura__grid i:nth-child(n + 5) { display: none; }
  .aura__grid i:nth-child(4) { border-right: 1px solid var(--guide); }
  .seq__copy, .seq__fig, .model__t, .model__txt, .cta__t, .cta__side, .stepper__panel,
  .who-for__grid > .h2, .who-for__body, .faq__grid > .h2, .faq, .duo > :first-child, .duo > .duo__fig, .who > .h2, .who__card,
  .contact__copy, .form, .foot__sig, .manif__copy, .manif__fig, .xhero__copy, .xhero__fig, .leakrow__copy, .leakrow__fig,
  .leakrow--flip .leakrow__copy, .leakrow--flip .leakrow__fig { grid-column: 1 / -1; }
  .leakrow--flip .leakrow__copy, .leakrow--flip .leakrow__fig { grid-row: auto; }
  .manif__fig { max-width: 440px; }
  .duo__fig { max-width: 460px; }
  .xhero__grid { min-height: 0; }
  .xhero__fig .scene { max-width: 560px; }
  .foot__col:nth-of-type(1) { grid-column: 1 / span 6; } .foot__col:nth-of-type(2) { grid-column: 7 / -1; }
  .reasons { grid-template-columns: 1fr; }
  .tell { display: flex; flex-direction: column; }
  .tell__body { display: contents; }
  .tell .beat--hero { order: 0; min-height: 0; padding: calc(var(--nav-h) + 30px) 0 28px; }
  .tell__stage { order: 1; }
  .tell__body > .beat:not(.beat--hero) { order: 2; }
  .tell__pin { position: relative; height: auto; padding: 0; }
  .tell__panel { height: auto; aspect-ratio: 1 / .96; }
  .tell__body > .beat:not(.beat--hero) { min-height: 0; padding: 64px 0; }
  .stepper__grid { row-gap: 22px; }
  .vos__facts, .vos__story, .fhero__copy, .fhero__fig { grid-column: 1 / -1; }
  .fhero__fig { max-width: 520px; width: 100%; justify-self: center; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .tell__stage { position: sticky; top: calc(var(--nav-h) - 6px); z-index: 3; background: var(--paper); padding-bottom: 6px; box-shadow: 0 1px 0 var(--line); }
  .tell__stagebox { height: auto; max-height: none; }
  .tell__figs > .dessin { width: min(100%, calc(min(34vh, 300px) * 4 / 3)); margin-inline: auto; }
  .tell__hud { display: none; }
}
@media (max-width: 700px) {
  .fiche > div { grid-template-columns: 1fr; gap: 6px; }
  .fiche--steps > div { grid-template-columns: 40px minmax(0, 1fr); }
  .tl__line { display: none; }
  .tl__steps { grid-template-columns: 1fr; gap: 20px; margin: 0 0 0 4px; padding-left: 24px; border-left: 1px solid var(--line-2); }
  .tl__steps li { padding: 0; }
  .tl__steps li::before, .tl__steps li::after { left: -29px; top: 1px; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cmp th, .cmp td { padding: 6px 0; border: 0; }
  .cmp td::before { display: block; margin-bottom: 4px; content: attr(data-label); font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  .cmp .us, .cmp tbody tr:last-child .us { padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
  .cmp td.us::before { width: auto; height: auto; margin: 0 0 4px; background: none; border-radius: 0; color: var(--ink); }
  .form { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
  .ctrls li { grid-template-columns: minmax(0, 1fr) auto; }
  .ctrls li > span:first-child { grid-column: 1 / -1; }
  .stats li { padding-inline: 10px; }
  .stats li:first-child { padding-left: 0; }
  .guar__it { min-height: 0; gap: 16px; font-size: 15px; }
  .stepper__v { font-size: 40px; }
  .stepper__body > p { padding-left: 0; }
  .guar__list { grid-template-columns: 1fr; }
  .guar__it { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 0; padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .guar__it:first-child { border-top: 0; }
  .guar__it::before { top: 50%; transform: translateY(-50%); right: 0; }
  .vos__list { grid-template-columns: 1fr; }
  .contact__grid > .form { order: -1; }
  /* the five leak cards stack (no pinned sideways track on a phone) */
  html.js .leaks[data-hscroll] { height: auto !important; }
  html.js .leaks[data-hscroll] .hscroll__stick { position: relative; height: auto; overflow: visible; display: block; padding: 64px 0 24px; }
  html.js .leaks[data-hscroll] .hscroll__track, .leaks .hscroll__track { transform: none !important; width: auto; flex-direction: column; padding-inline: var(--gutter); margin-top: 28px; }
  html.js .leaks[data-hscroll] .leak { opacity: 1; translate: none; }
  .leak { width: 100%; height: auto; min-height: 0; }
  .leaks__rail { display: none; }
}
@media (max-width: 600px) { .months { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .months button { font-size: 13px; } }
@media (max-width: 420px) {
  .hero__ctas .btn { padding-inline: 20px; }
  .nav__end .btn--sm { padding: 0 14px; font-size: 13.5px; }
  .nav__logo svg { width: 86px; }
  .stats li { font-size: 12.5px; padding-inline: 8px; }
}

/* ============================================================================================================
   24 · Calme : mouvement réduit (états finaux, rien ne bouge), impression
   ============================================================================================================ */
@media (prefers-reduced-motion: reduce) {
  .viz .halo, .viz .blink, .stats__cue i, .hseq__cue i, .cta__l, .btn:hover::before { animation: none; }
  html.js .stats { animation: none; }
  .wash__z { transform: none; }
  html.js .sh::before { transform: none; transition: none; }
  .u { transition: none; background-size: 100% 2px; }
  .tl { --pe: 1; }
  html.js [data-reveal="blur"] { filter: none; }
  html.js .vizbox .viz { clip-path: none; transition: none; }
  html.js .vizbox .viz :is(.e, .ef, .xe) { opacity: 1; transition: none; }
  html.js .vizbox::after { display: none; }
  html.js .hseq, html.js .seq, html.js .stepper, html.js .fhero, html.js .chapter.chapter--field { height: auto; }
  html.js .seq { margin-top: 0; }
  html.js .fhero__stick, html.js .chapter--field .chapter__stick { position: relative; }
  .tell__figs > .dessin, .stepper__figs > .dessin { transition: none; }
  html.js .hseq__stick, html.js .seq__stick, html.js .stepper__stick { position: relative; height: auto; min-height: 0; }
  html.js .hseq__stick { min-height: 100vh; }
  html.js .seq .scene { height: min(70vh, 620px); }
  html.js .hseq__copy, html.js .hseq__scrim, html.js .hseq__foot, html.js .hseq__fig, .calc__row { opacity: 1; transform: none; }
  html.js .leaks[data-hscroll] .leak { opacity: 1; translate: none; }
  .ticker__row--a, .ticker__row--b { transform: none; flex-wrap: wrap; width: auto; }
  .ticker__row .tk + .tk { display: none; }
  .foot__logo svg, .foot__rule { transform: none; }
  .toggle, .toggle::after, .stepper__body, .stepper__body > p, .stepper__figs > .dessin, .stepper__rail i { transition: none; }
  .leak, .reason, .chips a, .months button { transition: none; }
}
@media print {
  .aura, .wash, .vt-line, .nav, .cta__light { display: none; }
  html.js .hseq, html.js .seq, html.js .chapter, html.js .hseq--story, html.js .stepper { height: auto; }
  html.js .hseq__stick, html.js .seq__stick, html.js .chapter__stick, html.js .stepper__stick, .tell__pin { position: relative; height: auto; }
}

/* client answers (12/10): security facts card in the trust block; scene stills keep their proportions */
.vos__sec .kicker { margin-bottom: 4px; }
.vos__seclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vos__seclist li { display: flex; align-items: baseline; gap: 12px; font: 500 clamp(16.5px, 1.25vw, 18px)/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.vos__seclist li::before { content: ""; flex: none; width: 14px; height: 2px; transform: translateY(-.32em); border-radius: 2px; background: linear-gradient(90deg, #4ADAAD, #32B5EC); }
.scene__still { object-fit: cover; }

/* ============================================================================================================
   25 · Lecture plein écran (section.read, [data-read]) : une phrase en très grand, en deux tons, qui se lit mot à mot
   au défilement — chaque mot passe de l'encre pâle (.1) à l'encre pleine (site.js) ; le mot clé reçoit le trait
   spectral quand on l'atteint ; un filet compte la lecture. La course (--course) commence 35vh avant l'épinglage :
   hauteur = course + 65vh. Sans JS ou en mouvement réduit : la phrase entière, en encre, sans épinglage.
   ============================================================================================================ */
.read { position: relative; --course: 100vh; --k: 1; background: var(--paper); }
.read__stick { position: relative; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 2vh) 0 10vh; }
.read__in { position: relative; z-index: 2; }
.read__t { max-width: min(100%, 84vw); font-family: var(--display); font-weight: 400; font-stretch: normal; font-variation-settings: normal; font-synthesis: none;
  font-size: clamp(48px, 6.9vw, 136px); line-height: .95; letter-spacing: -.022em; color: var(--ink); text-wrap: pretty; }
.read__t em { font-style: normal; color: var(--ink-h); }
.read__t .rk { background-position: 0 calc(100% - .06em); }
html.js .read .rw { opacity: calc(.1 + .9 * var(--w, 0)); }
.read__meter { position: absolute; z-index: 2; left: 0; right: 0; bottom: 5vh; height: 1px; margin-inline: auto; background: var(--line); }
.read__meter i { display: block; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); }
html:not(.js) .read__meter { display: none; }
html.js .read { height: calc(var(--course) * var(--k) + 65vh); }
html.js .read__stick { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }

/* le manifeste : la phrase à gauche, la quille à droite ; elle monte doucement pendant la lecture (site.js) et tombe
   quand « tomber » s'allume (son propre calcul : centre de la figure à 37,6 % de l'écran) */
.read__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.read--fig .read__t { grid-column: 1 / span 6; max-width: none; font-size: clamp(44px, 5.6vw, 108px); }
.read__fig { grid-column: 7 / -1; position: relative; }
.read__fig .dessin { width: min(100%, calc(76vh * .8)); margin-inline: auto; }

/* le chapitre lu : la phrase sur le terrain voilé ; le voile se lève à la fin (--vl) : « L'IA, elle, voit tout. » */
html.js .chapter.chapter--read { height: calc(var(--course) * var(--k) + 65vh); }
html.js .chapter--read .chapter__stick { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 0; }
.chapter--read .chapter__stick { min-height: 100vh; }
.chapter--read .chapter__frame { display: grid; align-content: end; padding: calc(var(--nav-h) + 2vh) 0 12vh; }   /* the sentence low, the landscape above it */
.chapter__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 30% 78%, rgba(247, 245, 232, .95), rgba(247, 245, 232, .86) 46%, rgba(247, 245, 232, .7));
  opacity: calc(1 - .72 * var(--vl, 1)); }
.chapter--read .read__t { max-width: min(100%, 86vw); }

/* l'appel final de l'accueil, lu de la même façon ; la lumière monte avec la lecture */
.cta--read { overflow: clip; }
.cta--read .read__stick { padding-block: calc(var(--nav-h) + 2vh) 12vh; }
.cta--read .cta__in { padding-block: 0; row-gap: 40px; }
.cta--read .read__t { grid-column: 1 / -1; max-width: none; }
.cta--read .cta__side { grid-column: 1 / span 6; }
.cta--read .cta__light { --on: clamp(0, calc(var(--rp, 1) * 1.5 - .15), 1); }
.cta--read .read__meter { bottom: 6vh; }

/* pour qui · vos données · sécurité : un titre, une ligne, trois colonnes courtes */
.fit { padding-block: clamp(48px, 5vw, 72px) clamp(32px, 3.2vw, 46px); }
.fit__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 18px; align-items: end; margin-top: 26px; }
.fit__head .h2 { grid-column: 1 / span 7; }
.fit__head .lead { grid-column: 9 / -1; max-width: 22em; }
.fit__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line-2); }
.fit__col { padding-top: 22px; }
.fit__h { display: flex; align-items: center; gap: 10px; font: 600 15px/1.25 var(--sans); color: var(--ink); }
.fit__h::before { content: ""; flex: none; width: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #4ADAAD, #32B5EC); }
.fit__col ul { list-style: none; margin: 12px 0 0; padding: 0; }
.fit__col li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.fit__col li b { font-weight: 600; color: var(--ink); }
.fit__model { margin: clamp(30px, 3.2vw, 44px) 0 0; }
.fit__model .ctarow__note em { font-style: normal; color: var(--ink-h); }

/* hiérarchie : titre (Bricolage) · une accroche (Geist 19–22 px, encre) · détails (Geist 16 px, encre 2) */
:root { --fs-lead: clamp(18.5px, 1.45vw, 21.5px); }
.lead { color: var(--ink); }
.hseq__copy .lead--one { max-width: none; }
@media (min-width: 1100px) { .hseq__copy .lead--one { width: max-content; white-space: nowrap; } }
.cta__side p { font-size: var(--fs-lead); color: var(--ink); }
.leak__body p, .fiche dd, .ticks li, .fit__col li, .reason p:last-child { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.calc__row > p:last-child { font-size: 15px; }

@media (max-width: 900px) {
  .read { --k: 1.15; }
  .read--fig .read__t, .read__fig { grid-column: 1 / -1; }
  .read__grid { row-gap: 3vh; }
  .read__fig .dessin { width: min(100%, calc(30vh * .8)); }
  .cta--read .read__t, .cta--read .cta__side { grid-column: 1 / -1; }
  .fit__head .h2, .fit__head .lead { grid-column: 1 / -1; }
  .fit__cols { grid-template-columns: 1fr; border-top: 0; margin-top: 24px; }
  .fit__col { padding-top: 18px; }
}
@media (max-width: 700px) {
  .read__t { font-size: clamp(38px, 11.4vw, 56px); line-height: .95; max-width: 100%; }
  .read--fig .read__t { font-size: clamp(32px, 9.2vw, 46px); }
  .read__stick, .chapter--read .chapter__frame { padding: calc(var(--nav-h) + 1vh) 0 9vh; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .read, html.js .chapter.chapter--read { height: auto; }
  html.js .read__stick, html.js .chapter--read .chapter__stick { position: relative; height: auto; min-height: 100vh; }
  html.js .read .rw { opacity: 1; }
  .read__meter { display: none; }
  .chapter__veil { opacity: .4; }
}
@media print {
  html.js .read, html.js .chapter.chapter--read { height: auto; }
  html.js .read__stick, html.js .chapter--read .chapter__stick { position: relative; height: auto; }
  html.js .read .rw { opacity: 1; }
}

/* la méthode : la phrase passe par-dessus la scène épinglée (pleine largeur du récit, papier plein) */
.tell__body > .read--tell { position: relative; z-index: 4; width: calc(200% + var(--gap)); }
.read--tell .read__meter { left: 0; right: 0; }
@media (max-width: 900px) {
  .tell__body > .read--tell { order: 0; width: 100%; }
}
.why { padding-top: clamp(40px, 4vw, 60px); }
.why .reasons { margin-top: 28px; }
/* diet: the controls are one line each (no "Contrôle 0x" label); the rows go straight from title to fiche */
.ctrls li { grid-template-columns: minmax(0, 1fr) auto; }
.ctrls li > span:first-child { font: 500 16px/1.4 var(--sans); white-space: normal; color: var(--ink); }
@media (max-width: 700px) { .ctrls li { grid-template-columns: minmax(0, 1fr) auto; } .ctrls li > span:first-child { grid-column: auto; } }
.leakrow__copy .fiche { margin-top: clamp(26px, 2.6vw, 36px); }
.leak { height: min(48vh, 430px); min-height: 360px; }
.ctarow--bare { justify-content: flex-end; }
/* the reasons, without their small labels: the icon beside the word and its line */
.reason { grid-template-rows: auto auto; align-items: start; }
.reason__ico { grid-row: 1 / 3; grid-column: 1; margin-top: 2px; }
.reason .h3, .reason p:last-child { grid-column: 2; }
.reason .h3 { margin-top: 0; }
@media (min-width: 901px) { .tell .beat--hero { min-height: 100vh; min-height: 100svh; } }   /* the reading sheet starts below the first screen */
@media (max-width: 700px) { .foot__col:nth-of-type(1), .foot__col:nth-of-type(2) { grid-column: 1 / -1; } }   /* the real address is long: contact under the pages */
/* a short sentence takes the whole screen: the largest size (150 px on a laptop) */
.read--xl .read__t { font-size: clamp(56px, 10.4vw, 150px); max-width: 100%; }
@media (max-width: 700px) { .read--xl .read__t { font-size: clamp(42px, 12.6vw, 60px); } }
/* the light under the pinned stages stays within 2–5 % of the screen */
.tell__stagebox.halo::before { opacity: .78; }
.stepper__panel.halo::before { opacity: .85; }

/* ============================================================================================================
   30 · Visuels immersifs (images du client) — le tableau de bord dans le paysage, le ciel de l'appel final.
   Chaque scène est un cadre au format de l'image (2752 × 1536) qui couvre l'écran, ancré en bas ; tout ce qui est
   posé dedans est placé en % de ce cadre (et dimensionné en cqw : 1 cqw = 1 % de sa largeur), donc reste calé sur
   l'image à toutes les tailles. Le défilement (--p, --pe : motion.js) pilote tout ; rien ne bouge sans JavaScript.
   ============================================================================================================ */
.land, .sky { position: relative; isolation: isolate; }
.land { background: linear-gradient(#86D9C6, #B790EE 58%, #E9906A); }
.sky { background: linear-gradient(#8AE6C9, #C28AF6 55%, #F8A04A); }
.land__stick, .sky__stick { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
/* soft way in and out: the paper melts into the picture as it arrives and comes back as it leaves (never a hard band) */
.land::before, .land::after, .sky::before { content: ""; position: absolute; left: 0; right: 0; z-index: 5; height: 24vh; pointer-events: none; }
.sky::before { z-index: 1; }   /* under the frame: only the sky melts into the paper */
.land::before, .sky::before { top: 0; background: linear-gradient(var(--paper), rgba(247, 245, 232, .6) 38%, rgba(247, 245, 232, 0)); }
.land::after { bottom: 0; background: linear-gradient(rgba(247, 245, 232, 0), rgba(247, 245, 232, .6) 62%, var(--paper)); }
html.js .land { height: 240vh; }
html.js .sky { height: 175vh; }
html.js .land__stick, html.js .sky__stick { position: sticky; top: 0; }
.land__frame, .sky__frame { position: absolute; left: 50%; bottom: 0; width: max(100%, 179.17vh); width: max(100%, 179.17svh); aspect-ratio: 2752 / 1536;
  transform: translate3d(-50%, 0, 0); container-type: inline-size; }
.land__bg, .land__fg, .sky__bg, .sky__fg { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.land__bg, .sky__bg { inset: 0; width: 100%; height: 100%; }

/* --- the landscape: the client's painting, our app slid into it, the trees and hills in front (three layers) --- */
.land { --t: clamp(0, calc((var(--p, 1) - .05) * 5), 1); --z: clamp(0, calc((var(--p, 1) - .62) * 2.6), 1); }
html.js .land__frame { transform: translate3d(-50%, 0, 0) scale(calc(1 + var(--z) * .045)); transform-origin: 55% 12%; }
.land__fg { left: 17.369%; top: 35.677%; width: 65.262%; height: 64.323%; z-index: 3; }
.app { position: absolute; z-index: 2; left: 17.478%; top: 6.771%; width: 65.007%; bottom: -1%; display: grid; grid-template-columns: 15.93% minmax(0, 1fr);
  font: 400 .72cqw/1.4 var(--sans); color: var(--ink); text-align: left; }
.app p, .app ul { margin: 0; }
.app__side { position: relative; padding: 2.2cqw 1.3cqw; background: #151715; color: #F7F5E8; }
.app__logo { display: block; width: 6.6cqw; height: auto; fill: currentColor; }
.app__nav { list-style: none; display: grid; gap: .25cqw; margin-top: 2.6cqw !important; padding: 0; }
.app__nav li { display: flex; align-items: center; gap: .55cqw; padding: .5cqw .55cqw; border-radius: .45cqw; font-size: .64cqw; white-space: nowrap; color: rgba(247, 245, 232, .58); }
.app__nav li.is-on { background: rgba(247, 245, 232, .09); color: #F7F5E8; }
.app__nav i { flex: none; width: .55cqw; height: .55cqw; border: 1px solid currentColor; border-radius: 50%; opacity: .75; }
.app__ro { position: absolute; left: 1.3cqw; top: 23cqw; display: flex; align-items: center; gap: .5cqw; font: 500 .56cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 245, 232, .62); }
.app__ro span { width: .45cqw; height: .45cqw; border-radius: 50%; background: #4ADAAD; box-shadow: 0 0 0 .22cqw rgba(74, 218, 173, .18); }
.app__main { position: relative; display: flex; flex-direction: column; background: #FBFAF4; }
.app__bar { display: flex; align-items: center; gap: 1cqw; flex: none; height: 3.3cqw; padding: 0 1.9cqw; border-bottom: 1px solid rgba(21, 23, 21, .08); }
.app__crumb { font: 500 .6cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .55); }
.app__tag { margin-left: auto; padding: .38cqw .7cqw; border: 1px dashed rgba(21, 23, 21, .28); border-radius: 99px; font: 500 .54cqw/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(21, 23, 21, .6); }
.app__x { padding: .55cqw 1cqw; border-radius: 99px; background: var(--ink); color: var(--paper); font: 500 .56cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.app__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 2.6cqw; row-gap: 1.5cqw; align-content: start; padding: 1.9cqw 1.9cqw 0; }
.app__title { grid-column: 1 / -1; font: 400 2.1cqw/1 var(--display); letter-spacing: -.015em; }
.app__k { font: 500 .56cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .55); }
.app__n { margin-top: .7cqw !important; font: 400 4.9cqw/.86 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app__s { margin-top: .8cqw !important; font-size: .66cqw; color: rgba(21, 23, 21, .6); }
.app__kpi { padding-right: 1cqw; border-right: 1px solid rgba(21, 23, 21, .08); }
.app__bars { list-style: none; display: grid; gap: .62cqw; align-content: center; padding: 0; }
.app__bars li { display: grid; grid-template-columns: 5.6cqw minmax(0, 1fr) 4.6cqw; align-items: center; gap: .8cqw; }
.app__bars b { font-weight: 600; font-size: .7cqw; letter-spacing: -.005em; }
.app__bars i { position: relative; height: .16cqw; min-height: 2px; border-radius: 2px; background: rgba(21, 23, 21, .1); overflow: hidden; }
.app__bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2));
  transform-origin: 0 50%; transform: scaleX(var(--fill, 1)); }
.app__bars span { font: 500 .6cqw/1 var(--mono); letter-spacing: .02em; text-align: right; color: rgba(21, 23, 21, .78); white-space: nowrap; }
.app__table { grid-column: 1 / -1; border-top: 1px solid rgba(21, 23, 21, .1); }
.app__th, .app__tr { display: grid; grid-template-columns: minmax(0, 1fr) 6cqw 5cqw; align-items: center; column-gap: 1cqw; }
.app__th { height: 2.1cqw; font: 500 .54cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .5); }
.app__tr { height: 2.3cqw; border-top: 1px solid rgba(21, 23, 21, .07); font-size: .72cqw; }
.app__tr em { display: inline-block; width: 4.4cqw; font: 500 .56cqw/1 var(--mono); font-style: normal; letter-spacing: .06em; color: rgba(21, 23, 21, .5); }
.app__tr > span:nth-child(2), .app__th > span:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.app__err { display: inline-flex; align-items: center; justify-content: flex-end; gap: .45cqw; font: 500 .54cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #C85F00; }
.app__err::before { content: ""; width: .48cqw; height: .48cqw; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .22cqw rgba(248, 122, 1, .15); }
.app__th > span:last-child { text-align: right; }
/* the headline, over the blank window, becomes the report: it shrinks away as the app fills in */
.land__t { position: absolute; z-index: 2; left: 27.834%; width: 54.651%; top: 15.5%; margin: 0; text-align: center; font: 400 6.4cqw/.9 var(--display); letter-spacing: -.025em; color: var(--ink); }
.land__t .l { display: block; }
html.js .land__t { opacity: calc(1 - var(--t)); transform: translate3d(0, calc(var(--t) * -3cqw), 0) scale(calc(1 - var(--t) * .3)); transform-origin: 50% 0; }
html.js .app__title { opacity: clamp(0, calc((var(--p, 1) - .2) * 7), 1); }
html.js .app__kpi, html.js .app__bars { --on: clamp(0, calc((var(--p, 1) - var(--a)) * 6), 1); opacity: var(--on); transform: translate3d(0, calc((1 - var(--on)) * 1.2cqw), 0); }
html.js .app__bars li { --fill: clamp(0, calc((var(--p, 1) - var(--a) - .04) * 4), 1); }
html.js .app__table { opacity: clamp(0, calc((var(--p, 1) - .4) * 8), 1); }
html.js .app__tr { --on: clamp(0, calc((var(--p, 1) - var(--a)) * 9), 1); opacity: var(--on); }
html.js .app__tr > span:first-child { transform: translate3d(calc((1 - var(--on)) * -1cqw), 0, 0); }
html.js .app__err { opacity: clamp(0, calc((var(--p, 1) - var(--a) - .04) * 9), 1); }
html:not(.js) .land__t { display: none; }
@media (max-width: 760px) {   /* phones: only the middle of the frame shows (37 % → 63 %): the app becomes one centred column */
  .land__t { left: 37.2%; width: 25.6%; top: 14%; font-size: 3.15cqw; }
  .app__bar { justify-content: center; }
  .app__crumb { display: none; }
  .app__tag { margin-left: 0; font-size: .62cqw; }
  .app__x { font-size: .62cqw; }
  .app__body { grid-template-columns: minmax(0, 1fr); width: 24cqw; margin-left: 10.17cqw; padding: 1.5cqw 0 0; row-gap: 1.3cqw; }
  .app__title { font-size: 1.9cqw; }
  .app__kpi { padding-right: 0; border-right: 0; }
  .app__k { font-size: .66cqw; }
  .app__n { font-size: 3.7cqw; }
  .app__s { font-size: .74cqw; }
  .app__bars { gap: .5cqw; }
  .app__bars li { grid-template-columns: 6.4cqw minmax(0, 1fr) 5.4cqw; gap: .6cqw; }
  .app__bars b { font-size: .8cqw; }
  .app__bars span { font-size: .7cqw; }
  .app__th, .app__tr { grid-template-columns: minmax(0, 1fr) 5.2cqw 4.2cqw; column-gap: .6cqw; }
  .app__th { font-size: .62cqw; }
  .app__tr { height: 2.6cqw; font-size: .8cqw; }
  .app__tr em { display: none; }
  .app__err { font-size: .6cqw; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .land, html.js .sky { height: auto; }
  html.js .land__stick, html.js .sky__stick { position: relative; }
  .land { --p: 1; --t: 1; --z: 0; } .sky { --pe: 1; }
  .sky__ball img, .gutter__ball { animation: none; }
}

/* --- méthode: the MacBook (the client's photo), our controls screen inside it; the laptop comes up as the headline goes --- */
.mac { position: relative; isolation: isolate; background: #040405; color: #F7F5E8; --m: clamp(0, calc((var(--pe, 1) - .04) / .46), 1); }
.mac__stick { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
html.js .mac { height: 230vh; }
html.js .mac__stick { position: sticky; top: 0; }
.mac__head { position: relative; z-index: 3; padding-top: calc(var(--nav-h) + 6vh); }
html.js .mac__head { opacity: calc(1 - clamp(0, calc((var(--pe, 1) - .16) / .22), 1)); transform: translate3d(0, calc(var(--m) * -5vh), 0); }
.mac__head .kicker { color: #F7F5E8; }
.mac__head .kicker::before { box-shadow: inset 0 0 0 1px #F7F5E8; }
.mac__t { margin: clamp(14px, 2vh, 22px) 0 0; font: 400 clamp(48px, min(7vw, 11.5vh), 124px)/.9 var(--display); letter-spacing: -.025em; color: #F7F5E8; }
.mac__t .l { display: block; }
.mac__t em { font-style: normal; color: rgba(247, 245, 232, .5); }
.mac__p { max-width: 30em; margin-top: clamp(14px, 2.4vh, 24px); font: 500 clamp(15.5px, 1.2vw, 18px)/1.5 var(--sans); color: rgba(247, 245, 232, .78); }
.mac__frame { position: absolute; left: 50%; bottom: 0; z-index: 1; width: max(100%, 179.17vh); width: max(100%, 179.17svh); aspect-ratio: 2752 / 1536; container-type: inline-size;
  transform: translate3d(-50%, 0, 0); transform-origin: 50% 100%; }
html.js .mac__frame { transform: translate3d(-50%, calc((1 - var(--m)) * 16%), 0) scale(calc(.82 + var(--m) * .18)); }
.mac__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; pointer-events: none; }
.mac__screen { position: absolute; left: 24.128%; top: 20.768%; width: 51.308%; height: 51.823%; }
.mac__notch { position: absolute; z-index: 2; left: 50.29%; top: -1px; width: 10.76%; height: calc(3.6% + 1px); transform: translateX(-50%); background: #050505; border-radius: 0 0 .45cqw .45cqw; }
.scr { position: absolute; inset: -1px; display: flex; flex-direction: column; overflow: hidden; border-radius: .45cqw .45cqw 0 0; background: #FBFAF4; color: var(--ink);
  font: 400 .62cqw/1.4 var(--sans); text-align: left; }
.scr p { margin: 0; }
.scr__bar { display: flex; align-items: center; gap: .9cqw; flex: none; height: 2.7cqw; padding: 0 1.4cqw; border-bottom: 1px solid rgba(21, 23, 21, .08); }
.scr__logo { width: 4.2cqw; height: auto; fill: var(--ink); }
.scr__name { font-weight: 600; font-size: .64cqw; letter-spacing: -.005em; }
.scr__tag { margin-left: auto; padding: .3cqw .6cqw; border: 1px dashed rgba(21, 23, 21, .28); border-radius: 99px; font: 500 .46cqw/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(21, 23, 21, .6); }
.scr__live { display: inline-flex; align-items: center; gap: .4cqw; font: 500 .48cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .7); }
.scr__live i { width: .42cqw; height: .42cqw; border-radius: 50%; background: #2FB98C; box-shadow: 0 0 0 .2cqw rgba(74, 218, 173, .22); animation: live 1.6s var(--ease-in-out) infinite alternate; }
@keyframes live { from { opacity: .45; } to { opacity: 1; } }
.scr__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: none; padding: 1.3cqw 1.4cqw 1.2cqw; gap: 1cqw; border-bottom: 1px solid rgba(21, 23, 21, .08); }
.scr__kpis p { font: 500 .46cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .55); }
.scr__kpis b { display: block; margin-top: .55cqw; font: 400 2.4cqw/.9 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scr__kpis .is-x b { color: #D06400; }
.scr__feed { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 78%, transparent); }
.scr__track { animation: feed 18s linear infinite; }
@keyframes feed { to { transform: translate3d(0, -50%, 0); } }
.scr__row { display: grid; grid-template-columns: minmax(0, 1fr) 5cqw 5.4cqw; align-items: center; column-gap: .8cqw; height: 1.95cqw; padding: 0 1.4cqw; border-top: 1px solid rgba(21, 23, 21, .07); font-size: .6cqw; }
.scr__row > span:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.scr__row em { display: inline-block; width: 3.6cqw; font: 500 .48cqw/1 var(--mono); font-style: normal; letter-spacing: .06em; color: rgba(21, 23, 21, .5); }
.scr__row.is-x { background: linear-gradient(90deg, rgba(248, 122, 1, .09), rgba(248, 122, 1, .02)); }
.scr__st { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4cqw; font: 500 .46cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .55); }
.scr__st::before { content: ""; width: .5cqw; height: .28cqw; margin-top: -.12cqw; border: solid currentColor; border-width: 0 0 1px 1px; transform: rotate(-45deg); }
.scr__st--x { color: #D06400; }
.scr__st--x::before { width: .44cqw; height: .44cqw; margin: 0; border: 0; border-radius: 50%; background: var(--orange); transform: none; box-shadow: 0 0 0 .2cqw rgba(248, 122, 1, .16); }
@media (max-width: 760px) {
  .mac__frame { width: 205vw; }
  html.js .mac__frame { transform: translate3d(-50%, calc((1 - var(--m)) * 6%), 0) scale(calc(.94 + var(--m) * .06)); }
  html.js .mac__head { opacity: 1; transform: none; }
  .mac__head { padding-top: calc(var(--nav-h) + 3vh); }
  .mac__t { font-size: clamp(40px, 11.6vw, 60px); }
  .scr { font-size: 1.2cqw; }
  .scr__bar { height: 4.6cqw; padding: 0 3.2cqw; gap: 1.6cqw; }
  .scr__logo { width: 7.4cqw; }
  .scr__name { font-size: 1.15cqw; }
  .scr__tag { display: none; }
  .scr__live { margin-left: auto; font-size: .95cqw; gap: .8cqw; }
  .scr__live i { width: .8cqw; height: .8cqw; }
  .scr__kpis { padding: 2.2cqw 3.2cqw; gap: 1.6cqw; }
  .scr__kpis p { font-size: .9cqw; }
  .scr__kpis b { font-size: 4cqw; margin-top: .9cqw; }
  .scr__row { grid-template-columns: minmax(0, 1fr) 8.4cqw 9cqw; height: 3.6cqw; padding: 0 3.2cqw; font-size: 1.15cqw; column-gap: 1.2cqw; }
  .scr__row em { display: none; }
  .scr__st { font-size: .9cqw; gap: .7cqw; }
  .scr__st::before { width: .9cqw; height: .5cqw; }
  .scr__st--x::before { width: .8cqw; height: .8cqw; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .mac { height: auto; } html.js .mac__stick { position: relative; }
  .mac { --m: 1; } html.js .mac__head { opacity: 1; transform: none; }
  html.js .mac__frame { transform: translate3d(-50%, 0, 0); }
  .scr__track, .scr__live i { animation: none; }
}

/* --- filiale: the STRIKE keypad (client's video), floating on the paper (multiply: its white is the paper), the words over it --- */
.pave { position: relative; padding: clamp(36px, 7vh, 90px) 0 clamp(56px, 9vh, 110px); overflow: clip; background: var(--paper); }
.pave__stage { position: relative; display: grid; place-items: center; min-height: min(80vh, 60vw); }
.pave__v { width: min(1120px, 96vw); aspect-ratio: 16 / 9; mix-blend-mode: multiply; transform: scale(calc(.9 + var(--p, .5) * .16));
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.pave__v video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pave__t { position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none; font: 400 clamp(60px, 11.2vw, 196px)/.86 var(--display); letter-spacing: -.035em; color: var(--ink); }
.pave__a, .pave__b { position: absolute; white-space: nowrap; }
.pave__a { left: var(--gutter); top: 3%; transform: translate3d(calc((.5 - var(--p, .5)) * 14vw), 0, 0); }
.pave__b { right: var(--gutter); bottom: 1%; transform: translate3d(calc((var(--p, .5) - .5) * 14vw), 0, 0); }
.pave__b em { font-style: normal; color: var(--ink-h); }
.pave__p { margin-top: clamp(8px, 2vh, 18px); text-align: center; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--sans); color: var(--ink-2); }
@media (max-width: 760px) { .pave__stage { min-height: 74vw; } .pave__v { width: 132vw; } .pave__t { font-size: 15.5vw; } }

/* --- filiale: the drone chapter (client's video): a card that opens to the whole screen, the words over the sky --- */
.drone { position: relative; isolation: isolate; background: var(--paper); --o: calc(1 - clamp(0, calc(var(--p, 1) * 2.4), 1)); }
.drone__stick { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
html.js .drone { height: 200vh; }
html.js .drone__stick { position: sticky; top: 0; }
.drone__frame { position: absolute; inset: 0; overflow: hidden; background: #3E8FE6; }
html.js .drone__frame { clip-path: inset(calc(var(--o) * 12%) calc(var(--o) * 8%) round calc(var(--o) * 28px)); }
.drone__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(calc(1 + var(--o) * .08)); }
.drone__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(16, 26, 84, .38), rgba(16, 26, 84, 0) 52%); }
.drone__in { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--gap);
  padding-top: calc(var(--nav-h) + 6vh); padding-bottom: 7vh; }
html.js .drone__in { opacity: clamp(0, calc((var(--p, 1) - .22) * 5), 1); }
.drone__copy { grid-column: 1 / span 6; grid-row: 1; }
.drone__copy .kicker { color: #FBF8EE; }
.drone__copy .kicker::before { box-shadow: inset 0 0 0 1px #FBF8EE; }
.drone__t { margin: clamp(12px, 2vh, 20px) 0 0; font: 400 clamp(50px, min(7.2vw, 11.5vh), 124px)/.9 var(--display); letter-spacing: -.025em; color: #FBF8EE; }
.drone__t .l { display: block; }
.drone__t em { font-style: normal; color: rgba(251, 248, 238, .66); }
.drone__ticks { grid-column: 8 / -1; grid-row: 2; align-self: end; margin: 0; padding: clamp(10px, 1.4vw, 18px) clamp(18px, 2vw, 26px); list-style: none; border-radius: 18px;
  background: rgba(247, 245, 232, .84); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 24px 60px -36px rgba(10, 20, 70, .6); }
.drone__ticks li { position: relative; padding: 13px 0 13px 28px; border-top: 1px solid rgba(21, 23, 21, .1); font: 500 clamp(15px, 1.15vw, 17px)/1.4 var(--sans); color: var(--ink); }
.drone__ticks li:first-child { border-top: 0; }
.drone__ticks li::before { content: ""; position: absolute; left: 3px; top: calc(13px + .45em); width: 10px; height: 5px; border: solid var(--ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
@media (max-width: 900px) { .drone__copy, .drone__ticks { grid-column: 1 / -1; } .drone__v { object-position: 52% 40%; } }

/* --- expertises: the pink clouds (client's painting) behind « Toujours les mêmes » --- */
.read--sky { background: #E58FB4; }
.read__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.read__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transform: scale(calc(1.08 - var(--rp, 0) * .08)); }
.read__bg::before, .read__bg::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 16vh; }
.read__bg::before { top: 0; background: linear-gradient(var(--paper), rgba(247, 245, 232, 0)); }
.read__bg::after { bottom: 0; background: linear-gradient(rgba(247, 245, 232, 0), var(--paper)); }
.read--sky .read__t em { color: rgba(21, 23, 21, .62); }
.read--sky .read__meter { background: rgba(21, 23, 21, .18); }

/* --- contact: the poster (client's visual) behind the form — the form is a sheet of frosted paper over it --- */
.contact__pane { grid-column: 7 / -1; position: relative; isolation: isolate; padding: 53% clamp(14px, 2.6vw, 40px) clamp(24px, 4vw, 48px); border-radius: 26px; overflow: hidden; background: #17161B; }
.contact__poster { position: absolute; left: 0; right: 0; top: 0; z-index: -1; }
.contact__poster img { display: block; width: 100%; height: auto; }   /* the whole poster, its three words above the form */
.form[hidden], .merci[hidden] { display: none !important; }
.contact__pane .form { grid-column: auto; background: rgba(250, 248, 240, .8); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 30px 70px -40px rgba(10, 8, 20, .7), inset 0 0 0 1px rgba(255, 255, 255, .5); }
@media (max-width: 900px) { .contact__pane { grid-column: 1 / -1; order: -1; } }

/* the scroll-driven layers of the immersive chapters get their own compositor layer (smooth on scroll) */
html.js .land__frame, html.js .mac__frame, .sky__ball, .read__bg img, .drone__v, .pave__v { will-change: transform; }

/* --- the small pause / play button of the videos (they never stop being videos; this only pauses them) --- */
.vctl { position: absolute; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(21, 23, 21, .8); color: #F7F5E8; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s, transform .3s var(--ease-out); }
.vctl:hover { transform: scale(1.06); background: var(--ink); }
.vctl:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.vctl i { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.vctl.is-paused i { width: 0; height: 0; margin-left: 3px; border: 0; border-left: 10px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.vctl--light { background: rgba(247, 245, 232, .86); color: var(--ink); }
.vctl--light:hover { background: #F7F5E8; }
.pave__stage .vctl { right: var(--gutter); bottom: 6%; }
.drone .vctl { right: var(--gutter); top: calc(var(--nav-h) + 6vh); }
html.js .drone .vctl { opacity: clamp(0, calc((var(--p, 1) - .22) * 5), 1); }
html:not(.js) .vctl { display: none; }

/* --- made for one company, never a subscription software: its name in the app, a « sur mesure » chip, three notes --- */
.app__for { margin-top: .75cqw !important; font: 500 .6cqw/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(247, 245, 232, .72); }
.app__for span { color: #F7F5E8; }
.app__sur, .scr__sur { position: relative; isolation: isolate; margin-left: auto; padding: .38cqw .75cqw; border-radius: 99px; font: 500 .54cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.app__sur::before, .scr__sur::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: var(--spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.app__sur + .app__tag { margin-left: 0; }
.scr__sur { padding: .3cqw .6cqw; font-size: .46cqw; }
.scr__sur + .scr__tag { margin-left: 0; }
.land__s { position: absolute; z-index: 2; left: 27.834%; width: 54.651%; top: 38.5%; margin: 0; text-align: center; font: 500 1.02cqw/1.45 var(--sans); color: rgba(21, 23, 21, .72); }
.land__s b { font-weight: 600; color: var(--ink); }
html.js .land__s { opacity: calc(1 - var(--t)); transform: translate3d(0, calc(var(--t) * -2cqw), 0); }
.land__notes { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.land__note { position: absolute; left: var(--x); top: var(--y); }
.land__note span { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5cqw; padding: .5cqw .85cqw .5cqw .7cqw; border-radius: 99px; background: var(--spectrum); color: var(--ink);
  font: 500 .58cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 .6cqw 1.6cqw -.8cqw rgba(21, 23, 21, .55); }
.land__note span::before { content: ""; width: .45cqw; height: .45cqw; border-radius: 50%; background: var(--ink); }
html.js .land__note { --on: clamp(0, calc((var(--p, 1) - var(--a)) * 10), 1); opacity: var(--on); transform: translate3d(0, calc((1 - var(--on)) * .8cqw), 0) scale(calc(.92 + var(--on) * .08)); transform-origin: 0 50%; }
@media (max-width: 760px) {
  .land__s { left: 37.6%; width: 24.8%; top: 26%; font-size: 1.06cqw; }
  .land__note span { font-size: .78cqw; padding: .6cqw 1cqw .6cqw .85cqw; }
  .land__note:nth-child(1) { --x: 38.6% !important; --y: 77% !important; }   /* phones: three captions over the hills, never over the figures */
  .land__note:nth-child(2) { --x: 38.6% !important; --y: 81.6% !important; }
  .land__note:nth-child(3) { --x: 38.6% !important; --y: 86.2% !important; }
}

/* ============================================================================================================
   31 · Le cadre « Thank you » (visuel du client, refait en code) : un panneau graphite ; un trait crème aux coins
   arrondis dont le bord haut plonge autour d'un onglet ; deux cibles ◎ sur les côtés. site.js trace le trait (SVG)
   à la taille exacte du panneau. Servi par l'appel final (sur le ciel peint), le « Merci. » du contact, la page 404.
   ============================================================================================================ */
.ty { --ty-in: 14px; --ty-r: 14px; --ty-ink: #F7F5E8; position: relative; border-radius: 22px; background: #151715; color: var(--ty-ink); }
.ty__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ty__line path { fill: none; stroke: var(--ty-ink); stroke-width: 1.6; }
.ty__tab { position: absolute; z-index: 1; top: var(--ty-in); left: 50%; transform: translateX(-50%); margin: 0; padding: 12px 24px 11px; border: 1.6px solid var(--ty-ink); border-radius: 12px;
  font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ty-ink); }
.ty__mk { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--ty-ink); border-radius: 50%; }
.ty__mk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border: 1.5px solid var(--ty-ink); border-radius: 50%; }
.ty__mk--l { left: calc(var(--ty-in) + 28px); }
.ty__mk--r { right: calc(var(--ty-in) + 28px); }
html:not(.js) .ty__line { display: none; }
html:not(.js) .ty { box-shadow: inset 0 0 0 14px #151715, inset 0 0 0 15.6px #F7F5E8; }
.btn--light { background: #F7F5E8; color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--light:active { background: #EDEADB; }
@keyframes bob { from { transform: translate3d(0, -1.4%, 0) rotate(-1.5deg); } to { transform: translate3d(0, 1.4%, 0) rotate(1.5deg); } }

/* --- the closing call, on every page: the painted sky, the frame floating in it, the ball rising in front of it --- */
.sky__fg { left: 0; top: 79.43%; width: 100%; height: 20.57%; z-index: 1; }
.sky__panel { position: absolute; z-index: 2; left: 50%; top: calc(var(--nav-h) + 3vh); bottom: 9vh; width: min(1240px, calc(100% - 2 * var(--gutter))); transform: translateX(-50%);
  box-shadow: 0 50px 100px -60px rgba(30, 10, 60, .75); }
.sky__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: clamp(92px, 14vh, 150px) 64px 0; text-align: center; }
.sky__t { margin: 0; font: 400 clamp(54px, min(8.2vw, 13.2vh), 148px)/.88 var(--display); letter-spacing: -.025em; color: #F7F5E8; }
.sky__t .l { display: block; }
.sky__t em { font-style: normal; color: rgba(247, 245, 232, .5); }
.sky__p { max-width: 30em; margin: clamp(18px, 3vh, 28px) 0 0; font: 500 clamp(15.5px, 1.2vw, 18px)/1.5 var(--sans); color: rgba(247, 245, 232, .78); }
.sky__ctas { margin-top: clamp(18px, 3vh, 26px); }
.sky__ball { --bw: min(24vw, 31vh, 340px); position: absolute; z-index: 3; left: 50%; bottom: calc(9vh - var(--bw) * .5); width: var(--bw); aspect-ratio: 1; pointer-events: none;
  --rise: clamp(0, calc((var(--pe, 1) - .02) / .6), 1); transform: translate3d(-50%, calc((1 - var(--rise)) * (var(--bw) + 9vh + 30px)), 0) rotate(calc((1 - var(--rise)) * -28deg)); will-change: transform; }
.sky__ball img { display: block; width: 100%; height: 100%; animation: bob 7s var(--ease-in-out) infinite alternate; }
@media (max-width: 760px) {
  .sky__panel { top: calc(var(--nav-h) + 1.5vh); bottom: 7vh; width: calc(100% - 24px); border-radius: 18px; --ty-in: 10px; --ty-r: 12px; }
  .ty__tab { padding: 9px 14px 8px; font-size: 10px; letter-spacing: .06em; }
  .ty__mk { width: 14px; height: 14px; margin-top: -7px; } .ty__mk::after { width: 4px; height: 4px; }
  .ty__mk--l { left: calc(var(--ty-in) + 12px); } .ty__mk--r { right: calc(var(--ty-in) + 12px); }
  .sky__in { padding: 84px 26px 0; }
  .sky__t { font-size: clamp(44px, 12.6vw, 64px); }
  .sky__ball { --bw: 56vw; bottom: calc(7vh - var(--bw) * .5); }
}

/* --- contact: « Merci. » after the form, in the frame; the ball rolls up in front --- */
.merci { min-height: 540px; outline: none; }
.merci__in { display: flex; flex-direction: column; align-items: center; padding: 104px 34px 230px; text-align: center; }
.merci__t { margin: 0; font: 400 clamp(88px, 9.6vw, 168px)/.85 var(--display); letter-spacing: -.03em; color: #F7F5E8; }
.merci__p { max-width: 26em; margin: 18px auto 0; font: 500 15px/1.55 var(--sans); color: rgba(247, 245, 232, .78); }
.merci__p span { color: #F7F5E8; white-space: nowrap; }
.merci__back { margin-top: 22px; }
.merci__ball { position: absolute; z-index: 2; left: 50%; bottom: -34px; width: min(50%, 290px); height: auto; pointer-events: none; opacity: 0;
  transform: translate3d(-50%, 30%, 0) rotate(-16deg); transition: transform 1.3s var(--ease-out) .15s, opacity .5s ease .15s; }
.merci.is-in .merci__ball { opacity: 1; transform: translate3d(-50%, 0, 0) rotate(0); }
.merci > .ty__line, .merci > .ty__tab, .merci > .ty__mk, .merci__in { opacity: 0; transition: opacity .7s var(--ease-out); }
.merci.is-in > .ty__line, .merci.is-in > .ty__tab, .merci.is-in > .ty__mk, .merci.is-in .merci__in { opacity: 1; }

/* --- 404: a gutter ball (the frame on the painted sky, the ball rolls in) --- */
.gutter { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 4vh) var(--gutter) 10vh;
  background: url(img/visuels/ciel-2400.webp) 50% 100% / cover no-repeat, linear-gradient(#8AE6C9, #C28AF6 55%, #F8A04A); }
.gutter__panel { width: min(1100px, 100%); min-height: min(66vh, 620px); }
.gutter__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 90px 30px 150px; text-align: center; }
.gutter__t { margin: 0; font: 400 clamp(72px, 12vw, 200px)/.85 var(--display); letter-spacing: -.03em; color: #F7F5E8; }
.gutter__p { max-width: 28em; margin: 20px 0 26px; font: 500 16px/1.5 var(--sans); color: rgba(247, 245, 232, .78); }
.gutter__ball { position: absolute; z-index: 3; left: 50%; bottom: calc(10vh - min(13vw, 120px)); width: min(26vw, 240px); height: auto; pointer-events: none;
  animation: roll-in 1.8s var(--ease-out) .3s both; }
@keyframes roll-in { from { transform: translate3d(-260%, 0, 0) rotate(-300deg); } to { transform: translate3d(-50%, 0, 0) rotate(0); } }

/* ============================================================================================================
   32 · Le pied de page : le visuel « STRIKE » du client, en code — le spectre de haut en bas (orange → rose → violet
   → nuit), le grain de l'affiche, le logo géant en blanc
   ============================================================================================================ */
.foot { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 7vw, 104px) 0 24px; color: #FFF8EC;
  background: linear-gradient(180deg, #F87A01 0%, #F45F63 24%, #DD56B4 44%, #A062E6 64%, #51318C 84%, #1B1530 100%); }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.foot__sig { grid-column: 1 / span 6; margin: 0; font: 400 clamp(56px, 6.6vw, 112px)/.88 var(--display); letter-spacing: -.03em; color: #FFF8EC; }
.foot__h { margin-bottom: 12px; font: 600 14px/1.2 var(--sans); color: #FFF8EC; }
.foot__col nav a { position: relative; display: block; width: fit-content; padding: 5px 0; font-size: 15.5px; color: rgba(255, 248, 236, .84); text-decoration: none; transition: color .25s; }
.foot__col nav a::after { background: #FFF8EC; }
.foot__col nav a:hover { color: #fff; }
.foot__c { color: rgba(255, 248, 236, .92); }
.foot__logo { position: relative; display: block; margin-top: clamp(52px, 6.5vw, 104px); color: #FFFDF8; overflow: hidden; }
.foot__bot { border-top-color: rgba(255, 248, 236, .22) !important; color: rgba(255, 248, 236, .72); }

/* ============================================================================================================
   33 · Plus de couleur : le téléphone orange (accueil), le pendentif sur le jean (filiale), les cinq fuites en lumière
   ============================================================================================================ */
.phone { position: relative; isolation: isolate; background: var(--paper); --o: calc(1 - clamp(0, calc(var(--p, 1) * 2.4), 1)); }
.phone__stick { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
html.js .phone { height: 190vh; }
html.js .phone__stick { position: sticky; top: 0; }
.phone__frame { position: absolute; inset: 0; overflow: hidden; background: #E8701E; }
html.js .phone__frame { clip-path: inset(calc(var(--o) * 12%) calc(var(--o) * 8%) round calc(var(--o) * 28px)); }
.phone__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 50%; will-change: transform;
  transform: scale(calc(1.02 + var(--o) * .1 + (1 - var(--p, 1)) * .04)); }
.phone__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(20deg, rgba(248, 140, 40, .55), rgba(248, 140, 40, 0) 42%); }
.phone__in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8vh; }   /* on the orange table, in ink */
html.js .phone__in { opacity: clamp(0, calc((var(--p, 1) - .22) * 5), 1); }
.phone__t { margin: 0; max-width: 13ch; font: 400 clamp(48px, min(6.4vw, 11vh), 112px)/.9 var(--display); letter-spacing: -.025em; color: var(--ink); }
.phone__t em { font-style: normal; color: rgba(21, 23, 21, .62); }
.phone__t .l { display: block; }
.phone__p { max-width: 24em; margin-top: clamp(12px, 2vh, 20px); font: 500 clamp(15.5px, 1.2vw, 18px)/1.5 var(--sans); color: var(--ink); }
@media (max-width: 760px) { .phone__img { object-position: 64% 50%; } .phone__t { font-size: clamp(40px, 11.4vw, 58px); } .phone__in { padding-bottom: 6vh; } }

.read--denim { background: #2B4A78; }
.read--denim .read__bg img { position: absolute; left: 0; top: 0; width: 128%; max-width: none; height: 100%; object-position: 50% 42%; filter: brightness(.86); }
.read--denim .read__t { color: #FFF8EC; }
.read--denim .read__stick::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 22, 48, .74), rgba(12, 22, 48, .42) 46%, rgba(12, 22, 48, 0) 72%); }
@media (min-width: 901px) { .read--denim .read__t { max-width: 62vw; font-size: clamp(52px, 7.2vw, 112px); } }
.read--denim .read__t em { color: rgba(255, 248, 236, .66); }
.read--denim .read__meter { background: rgba(255, 248, 236, .26); }
.read--denim .read__meter i { background: #FFF8EC; }
@media (max-width: 900px) { .read--denim .read__bg img { width: 100%; object-position: 50% 18%; filter: brightness(.8); } .read--denim .read__stick::before { background: linear-gradient(rgba(12, 22, 48, .5), rgba(12, 22, 48, .5)); } }

/* the five leaks: each card catches its own light (the spectrum, one hue per leak), the words stay ink */
[data-leak="facturation"] { --w1: #F87A01; --w2: #F46053; }
[data-leak="paie"] { --w1: #F046A4; --w2: #D25CCA; }
[data-leak="tresorerie"] { --w1: #4ADAAD; --w2: #3EC8CD; }
[data-leak="commandes"] { --w1: #32B5EC; --w2: #7393EE; }
[data-leak="clients"] { --w1: #B471EF; --w2: #D25CCA; }
.leak { background: radial-gradient(130% 62% at 85% 0%, color-mix(in srgb, var(--w1, #B471EF) 46%, transparent), transparent 70%),
  linear-gradient(175deg, color-mix(in srgb, var(--w2, #B471EF) 26%, #FBFAF4), #FBFAF4 72%); box-shadow: inset 0 0 0 1px rgba(21, 23, 21, .07); }
.leak::before { height: 2px; width: 120px; }
.leak:hover { box-shadow: inset 0 0 0 1px rgba(21, 23, 21, .12), 0 30px 60px -40px color-mix(in srgb, var(--w1, #B471EF) 70%, transparent); }

@media (max-width: 560px) { .ty__mk { display: none; } }   /* narrow frames: the side targets would touch the words */   /* narrow frames: the side targets would touch the words */

/* the hero catches the brand's light too: a soft dawn of the spectrum rises behind the pin's deck (under the drawing) */
.hseq__stick::before { content: ""; position: absolute; z-index: -1; right: -8vw; bottom: -18vh; width: 74vw; height: 92vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(180, 113, 239, .34), rgba(180, 113, 239, 0)) 58% 62% / 66% 64% no-repeat,
              radial-gradient(closest-side, rgba(74, 218, 173, .32), rgba(74, 218, 173, 0)) 18% 78% / 58% 56% no-repeat,
              radial-gradient(closest-side, rgba(50, 181, 236, .26), rgba(50, 181, 236, 0)) 40% 92% / 60% 50% no-repeat,
              radial-gradient(closest-side, rgba(240, 70, 164, .24), rgba(240, 70, 164, 0)) 88% 84% / 52% 52% no-repeat,
              radial-gradient(closest-side, rgba(248, 122, 1, .2), rgba(248, 122, 1, 0)) 98% 100% / 46% 44% no-repeat; }
html.js .hseq__stick::before { opacity: calc(1 - var(--p, 0) * .7); }
@media (max-width: 900px) { .hseq__stick::before { right: -30vw; bottom: auto; top: 46vh; width: 150vw; height: 70vh; } }

/* ---- round 11: the frame fits its words (no empty black), the ball rises to its bottom edge, the sky melts into the footer ---- */
.sky__panel { --bw: min(23vw, 30vh, 330px); top: calc(var(--nav-h) + 4vh); bottom: auto; }
.sky__in { position: relative; inset: auto; padding: clamp(96px, 13vh, 140px) 64px calc(var(--bw) * .5 + 58px); }
.sky__ball { left: 50%; top: 100%; bottom: auto; z-index: 3;
  transform: translate3d(-50%, calc(-50% + (1 - var(--rise)) * 62vh), 0) rotate(calc((1 - var(--rise)) * -28deg)); }
.sky__glow { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 22vh; pointer-events: none;
  background: linear-gradient(rgba(248, 122, 1, 0), rgba(248, 122, 1, .55) 55%, #F87A01); }   /* the footer's first colour: no seam */
@media (max-width: 760px) {
  .sky__panel { --bw: 54vw; top: calc(var(--nav-h) + 2vh); }
  .sky__in { padding: 84px 24px calc(var(--bw) * .5 + 44px); }
  .sky__glow { height: 18vh; }
}

/* ---- round 11: the method list, lighter — the verb leads, the label whispers, the number is a small mono index ---- */
.stepper__btn { grid-template-columns: 46px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 14px 0 12px; }
.stepper__n { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: 7px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; color: rgba(21, 23, 21, .4); -webkit-text-stroke: 0; }
.stepper__v { grid-column: 2; grid-row: 1; font-size: 34px; line-height: .95; letter-spacing: -.02em; color: rgba(21, 23, 21, .46); transition: color .35s var(--ease-out); }
.stepper__k { grid-column: 2; grid-row: 2; margin-top: 7px; font: 500 13.5px/1.3 var(--sans); letter-spacing: 0; color: rgba(21, 23, 21, .55); }
.stepper__step.is-active .stepper__v, .stepper__btn:hover .stepper__v, html:not(.js) .stepper__v { color: var(--ink); }
.stepper__step.is-active .stepper__n, html:not(.js) .stepper__n { color: var(--ink); }
.stepper__btn:hover .stepper__n { color: rgba(21, 23, 21, .7); }
.stepper__step.is-active .stepper__btn:hover .stepper__n { color: var(--ink); }
.stepper__body > p { padding-left: 56px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .stepper__v { font-size: 32px; } .stepper__body > p { padding-left: 56px; } }

/* the paper melts into the sky on the way in — under the frame (never over its words), gone once the call is pinned */
.sky::before { display: none; }
.sky__stick::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 24vh; pointer-events: none;
  background: linear-gradient(var(--paper), rgba(247, 245, 232, .6) 38%, rgba(247, 245, 232, 0)); opacity: calc(1 - var(--p, 0) * 5); }


/* ============================================================================================================
   34 · Round 12 — one ink for every title. The second clause no longer turns grey (it read as « not yet read »):
   the grey is kept for one meaning only — the words of a reading passage that the scroll has not reached yet.
   ============================================================================================================ */
:is(.h1, .h2, .h3, .cta__t, .manif__t, .chapter__line, .statement, .read__t, .pave__t, .phone__t, .seq__copy .h2) em { color: inherit; }
.fit__model .ctarow__note em, .mac__t em, .drone__t em, .sky__t em, .read--sky .read__t em, .read--denim .read__t em, .phone__t em, .pave__b em { color: inherit; }

/* the painted frames are never cut where it matters: on a wide, low screen the picture is taller than the screen —
   it keeps its bottom anchored, unless that would hide the app (land) or the laptop's screen (mac) under the nav; then it
   moves down just enough (its top melts into the section's own colour, the painting's sky) */
.land__stick, .mac__stick { container-type: size; }
.land__frame { --H: max(55.814cqw, 100cqh); bottom: auto; width: max(100cqw, 179.17cqh); top: max(calc(100cqh - var(--H)), calc(var(--nav-h) + 12px - .06771 * var(--H))); }
.land { background: linear-gradient(#83CBBD, #83CBBD 30%, #B790EE 70%, #E9906A); }
.land__bg { -webkit-mask-image: linear-gradient(transparent, #000 9%); mask-image: linear-gradient(transparent, #000 9%); }
.mac__frame { --H: max(55.814cqw, 100cqh); bottom: auto; width: max(100cqw, 179.17cqh); top: max(calc(100cqh - var(--H)), calc(var(--nav-h) + 12px - .20768 * var(--H))); }
@media (max-width: 760px) { .mac__frame { --H: 114.4cqw; width: 205cqw; } }

/* « Pour qui », allégé : un titre, trois repères (une icône, trois mots, une ligne), le lien vers la filiale */
.fit__head { align-items: end; }
.fit__go { grid-column: 9 / -1; justify-self: end; margin-bottom: 8px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin: clamp(34px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.fact { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-top: 22px; border-top: 1px solid var(--line-2); }
.fact__ico { grid-row: 1 / 3; width: 52px; height: 52px; padding: 12px; border-radius: 50%; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .35s var(--ease-out), stroke .35s, transform .45s var(--ease-out); }
.fact b { align-self: end; font: 600 clamp(17px, 1.35vw, 20px)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.fact span { margin-top: 5px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.fact:hover .fact__ico { background: var(--ink); stroke: var(--paper); transform: rotate(-6deg); }
@media (max-width: 900px) { .fit__go { grid-column: 1 / -1; justify-self: start; } .facts { grid-template-columns: 1fr; row-gap: 18px; } }

/* ---- round 12: the method screen, in proportion — a two-line title, one line per step (number · verb · what it is),
   the drawing as large as the screen allows, centred on the list; no progress bar (the list shows the step) ---- */
.stepper__t { max-width: none; font-size: clamp(34px, 3.4vw, 58px); }
.stepper__t .l { display: block; }
.stepper__bar { display: none; }
.stepper__list { margin-top: clamp(18px, 3vh, 30px); }
.stepper__btn { grid-template-columns: 40px auto minmax(0, 1fr); grid-template-rows: auto; align-items: baseline; column-gap: 14px; padding: clamp(10px, 1.6vh, 15px) 0; }
.stepper__n { grid-column: 1; grid-row: 1; align-self: baseline; margin-top: 0; }
.stepper__v { grid-column: 2; grid-row: 1; font-size: clamp(26px, 2.3vw, 34px); }
.stepper__k { grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; text-align: right; font-size: 13px; }
.stepper__body > p { padding-left: 54px; }
.stepper__step.is-active .stepper__body > p { padding-bottom: clamp(10px, 1.6vh, 14px); }
.stepper__panel { padding-bottom: 0; }
.stepper__panel::after { display: none; }
@media (min-width: 901px) {
  .stepper__figs > .dessin { width: min(100%, calc((100svh - var(--nav-h) - 72px) * 1.25)); margin-inline: auto; }
}
@media (min-width: 901px) and (max-height: 820px) { .stepper__v { font-size: 26px; } .stepper__t { font-size: clamp(32px, 3vw, 44px); } .stepper__btn { padding: 8px 0; } }
@media (max-width: 900px) { .stepper__body > p { padding-left: 54px; } }


/* ============================================================================================================
   35 · Short, wide screens (a laptop browser with its bars: ≈ 1000 × 500) — every pinned screen fits, nothing is cut
   ============================================================================================================ */
@media (min-width: 901px) and (max-height: 640px) {
  html.js .hseq__foot { display: none; }                                   /* the hero: the stats strip would be cut */
  .hseq__copy .h1 { font-size: clamp(44px, 11.5vh, 84px); }
  /* the calculation: two-line title, compact rows, the note on one line, a small button */
  .seq__copy .sh { display: none; }
  html.js .seq__stick { padding-top: calc(var(--nav-h) + 10px); }
  .seq__copy .h2 { max-width: 15ch; font-size: clamp(28px, 6.4vh, 38px); }
  .calc { margin-top: 10px; }
  .calc__row { padding: 6px 0 5px; gap: 14px; }
  .calc__n { font-size: clamp(30px, 7vh, 44px); }
  .calc__row > p:last-child, .calc__ca > p:first-child { font-size: 12.5px; line-height: 1.38; }
  .calc__note { margin-top: 3px; font-size: 12px; }
  .ca { margin-top: 2px; } .ca input { height: 20px; } .ca__ends { margin-top: 0; }
  .seq__cta { margin-top: 10px; }
  .seq__cta .btn { height: 40px; padding: 0 18px; font-size: 11.5px; }
  /* the five leaks: one-line title, cards as tall as the screen allows */
  .leaks__head .sh { display: none; }
  .leaks__title { margin-top: 0; }
  .leaks__title .h2 { max-width: none; font-size: clamp(30px, 6.8vh, 42px); }
  .leaks__title .h2 .l { display: inline; }
  .leaks .hscroll__stick { gap: 14px; }
  .leak { height: calc(100svh - var(--nav-h) - 118px); min-height: 0; padding: 14px 16px 14px; }
  .leak .vizbox { padding: 8px 4px; }
  .leak .vizbox .viz { max-height: calc(100svh - var(--nav-h) - 270px); }
  .leak__go { margin-top: 8px; }
  .leaks__rail { display: none; }
  /* the method screen */
  .stepper__more { display: none; }
}
/* the dashboard's notes come while it is still pinned (not on the way out) */
.land__note:nth-child(1) { --a: .52 !important; } .land__note:nth-child(2) { --a: .58 !important; } .land__note:nth-child(3) { --a: .64 !important; }
/* phones: the line on the orange table always reads (a warm veil rises behind it) */
@media (max-width: 760px) { .phone__frame::after { background: linear-gradient(0deg, rgba(238, 122, 40, .92) 0, rgba(238, 122, 40, .7) 26%, rgba(238, 122, 40, 0) 50%); } }
/* the closing call: the ball is always there — a sunrise, it rises from half-set to its place on the frame's edge */
.sky__ball { transform: translate3d(-50%, calc(-50% + (1 - var(--rise)) * 56%), 0) rotate(calc((1 - var(--rise)) * -20deg)); }

/* Dickens Condensed has a very narrow space (.09 em): every title gets a little word space back, so words never run
   together (the split-text masks no longer eat the gap either) */
:is(.h1, .h2, .h3, .display, .stepper__v, .statement, .cta__t, .manif__t, .foot__sig, .calc__n, .ticker__row span, .chapter__line, .beat__t, .reason .h3,
  .read__t, .land__t, .app__title, .app__n, .mac__t, .drone__t, .sky__t, .phone__t, .pave__t, .merci__t, .gutter__t, .scr__kpis b, .fit__head .h2, .seq__copy .h2) { word-spacing: .12em; }
.sw { padding-inline: .02em; margin-inline: -.02em; }
.is-split { word-spacing: .16em; }

/* ============================================================================================================
   36 · Méthode — one idea per screen: the hero (the loop, big), then four cards that stack as you scroll, each in
   its own light of the spectrum (Viser mint · Lancer night · Strike violet · Rejouer pink). site.js writes --cov
   (0 → 1, how much the next card covers this one): the covered card steps back (scale, shade) and its drawing pauses.
   ============================================================================================================ */
.mhero { position: relative; overflow-x: clip; padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) 0 clamp(36px, 6vh, 64px); }
.mcard--rejouer .dessin__cap { display: none; }   /* the twelve months say it */
.mhero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.mhero__copy { grid-column: 1 / span 6; }
.mhero__t { margin-top: 22px; font-size: clamp(54px, min(7.4vw, 12.5vh), 140px); line-height: .88; }
.mhero__copy .lead { margin-top: clamp(18px, 3vh, 30px); max-width: 27em; }
.mhero__fig { grid-column: 7 / -1; position: relative; }
.mhero__fig .scene { width: 100%; max-width: none; aspect-ratio: 1 / .82; max-height: 72vh; margin-inline: auto; }
.mindex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(28px, 5vh, 56px); padding: 0; list-style: none; }
.mindex a { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 4px; padding: 16px 0 6px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line-2); }
.mindex a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--h1), var(--h2)); transform: scaleX(.14); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.mindex a:hover::before, .mindex a:focus-visible::before { transform: none; }
.mindex b { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; color: rgba(21, 23, 21, .55); }
.mindex span { font: 400 clamp(26px, 2.3vw, 34px)/1 var(--display); letter-spacing: -.02em; word-spacing: .12em; }
.mindex i { grid-column: 2; font-style: normal; font-size: 13.5px; color: var(--ink-2); }

.mstack { position: relative; padding: clamp(8px, 2vh, 20px) 0 12vh; }
.mcard { --top: calc(var(--nav-h) + 14px + var(--i, 0) * 12px); position: sticky; top: var(--top); z-index: 1; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; column-gap: clamp(24px, 4vw, 72px);
  height: calc(100svh - var(--nav-h) - 64px); margin: 0 clamp(10px, 1.6vw, 24px) 12vh; padding: clamp(22px, 5vh, 56px) clamp(24px, 4.4vw, 72px);
  border-radius: 30px; color: var(--ink); transform: scale(calc(1 - var(--cov, 0) * .05)); transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 -24px 70px -46px rgba(21, 23, 21, .4), inset 0 0 0 1px rgba(255, 255, 255, .45); }
.mcard:last-child { margin-bottom: 0; }
.mcard::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: #151715; opacity: calc(var(--cov, 0) * .22); }
.mcard--viser { --h1: #4ADAAD; --h2: #32B5EC; background: radial-gradient(80% 90% at 90% 8%, rgba(74, 218, 173, .45), rgba(74, 218, 173, 0) 70%), radial-gradient(60% 70% at 0% 100%, rgba(50, 181, 236, .2), rgba(50, 181, 236, 0) 70%), #F3F3E6; }
.mcard--lancer { --h1: #32B5EC; --h2: #B471EF; color: #F7F5E8; background: radial-gradient(50% 60% at 10% 12%, rgba(50, 181, 236, .2), rgba(50, 181, 236, 0) 70%), radial-gradient(55% 65% at 100% 100%, rgba(180, 113, 239, .24), rgba(180, 113, 239, 0) 70%), #050506; box-shadow: 0 -24px 70px -46px rgba(21, 23, 21, .55); }
.mcard--strike { --h1: #B471EF; --h2: #F046A4; background: radial-gradient(80% 90% at 90% 8%, rgba(180, 113, 239, .42), rgba(180, 113, 239, 0) 70%), radial-gradient(60% 70% at 0% 100%, rgba(240, 70, 164, .16), rgba(240, 70, 164, 0) 70%), #F4F1EA; }
.mcard--rejouer { --h1: #F046A4; --h2: #F87A01; background: radial-gradient(80% 90% at 90% 8%, rgba(240, 70, 164, .36), rgba(240, 70, 164, 0) 70%), radial-gradient(60% 70% at 0% 100%, rgba(248, 122, 1, .18), rgba(248, 122, 1, 0) 70%), #F6F1E8; }
.mcard__copy { position: relative; z-index: 2; min-width: 0; }
.mcard__n { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .58); }
.mcard__n b { font-weight: 500; color: currentColor; color: var(--ink); }
.mcard__n span { margin: 0 .4em; }
.mcard__v { margin: clamp(10px, 2.2vh, 22px) 0 0; font: 400 clamp(64px, min(11vw, 18vh), 210px)/.84 var(--display); letter-spacing: -.03em; color: inherit; }
.mcard__say { max-width: 25em; margin: clamp(12px, 2.6vh, 26px) 0 0; font: 500 clamp(16px, 1.35vw, 20px)/1.45 var(--sans); letter-spacing: -.005em; }
.mcard__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; margin: clamp(18px, 4.4vh, 44px) 0 0; padding: 0; list-style: none; }
.mcard__facts li { padding-top: 12px; border-top: 1px solid rgba(21, 23, 21, .14); }
.mcard__facts li::before { content: ""; display: block; width: 26px; height: 2px; margin: -13px 0 11px; border-radius: 2px; background: linear-gradient(90deg, var(--h1), var(--h2)); }
.mcard__facts b { display: block; font: 600 clamp(15px, 1.2vw, 18px)/1.2 var(--sans); letter-spacing: -.01em; }
.mcard__facts span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: rgba(21, 23, 21, .64); }
.mcard--lancer .mcard__n { color: rgba(247, 245, 232, .6); } .mcard--lancer .mcard__n b { color: #F7F5E8; }
.mcard--lancer .mcard__facts li { border-top-color: rgba(247, 245, 232, .18); } .mcard--lancer .mcard__facts span { color: rgba(247, 245, 232, .7); }
.mcard__fig { position: relative; z-index: 1; align-self: stretch; display: grid; place-items: center; min-width: 0; min-height: 0; }
.mcard__fig .dessin { width: min(100%, calc((100svh - var(--nav-h) - 190px) * 4 / 3)); }
.mcard__fig--mac { place-items: center; }
.mcard__mac { position: relative; width: 122%; margin-right: -16%; aspect-ratio: 2752 / 1536; container-type: inline-size;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 24%, #000 80%, transparent 97%), linear-gradient(180deg, transparent 2%, #000 14%, #000 66%, transparent 90%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 4%, #000 24%, #000 80%, transparent 97%), linear-gradient(180deg, transparent 2%, #000 14%, #000 66%, transparent 90%); mask-composite: intersect; }
@media (min-width: 901px) { .mcard__mac { max-height: calc(100svh - var(--nav-h) - 110px); width: min(122%, calc((100svh - var(--nav-h) - 110px) * 1.7917)); } }
.mcard__hud { position: absolute; z-index: 3; left: 2%; top: 4%; display: grid; gap: 6px; margin: 0; padding: 14px 18px 13px; border-radius: 16px;
  background: rgba(251, 250, 244, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -26px rgba(60, 20, 90, .5), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.mcard__hud > span { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .6); }
.mcard__hud b { font: 400 clamp(34px, 3.4vw, 54px)/.9 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mcard__hud i { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: rgba(21, 23, 21, .45); }
.mcard__months { position: absolute; z-index: 3; left: 50%; bottom: 1%; width: min(100%, 520px); transform: translateX(-50%); }
.mcard__months button { background: rgba(251, 250, 244, .6); }
@media (min-width: 901px) and (max-height: 640px) {
  .mcard { padding-block: 18px; }
  .mcard__facts span { font-size: 12.5px; }
  .mcard__say { font-size: 15px; }
  .mcard__fig .dessin { width: min(100%, calc((100svh - var(--nav-h) - 150px) * 4 / 3)); }
  .mcard__months { bottom: -2%; }
  .mhero__fig .scene { max-height: 62vh; }
}
@media (max-width: 900px) {
  .mhero__copy, .mhero__fig { grid-column: 1 / -1; }
  .mhero__fig { margin-top: 18px; }
  .mindex { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
  .mstack { padding-bottom: 6vh; }
  .mcard { position: relative; top: auto; height: auto; grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin: 0 10px 12px; padding: 24px 20px 26px; border-radius: 24px; transform: none; }
  .mcard::after { display: none; }
  .mcard__fig { order: -1; }
  .mcard__v { font-size: clamp(66px, 21vw, 104px); }
  .mcard__facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .mcard__facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; }
  .mcard__facts li::before { display: none; }
  .mcard__facts span { margin: 0; text-align: right; }
  .mcard__fig--mac { position: relative; height: 64vw; margin: -24px -20px 0; overflow: hidden; border-radius: 24px 24px 0 0; }
  .mcard__mac { position: absolute; left: 50%; top: 50%; width: 205%; margin: 0; transform: translate(-50%, -46.7%); -webkit-mask-image: none; mask-image: none; }
  .mcard__fig .dessin { width: 100%; }
  .mcard__months { position: relative; left: auto; bottom: auto; transform: none; margin-top: 10px; }
  .mcard__hud { left: 0; top: 0; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .mcard { transform: none; } .mcard::after { display: none; } }

/* ============================================================================================================
   37 · Mentions légales — a document worth reading: the title and an « En bref » card in the Thank-you frame,
   then a sticky table of contents (the section being read is lit) beside numbered sections
   ============================================================================================================ */
.lhero { padding: calc(var(--nav-h) + clamp(36px, 8vh, 96px)) 0 clamp(36px, 6vh, 72px); }
.lhero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; align-items: end; }
.lhero__copy { grid-column: 1 / span 7; }
.lhero__t { margin-top: 22px; font-size: clamp(56px, min(8vw, 14vh), 150px); line-height: .88; }
.lhero__copy .lead { margin-top: clamp(16px, 3vh, 28px); max-width: 26em; }
.lsum { grid-column: 9 / -1; --ty-in: 12px; --ty-r: 12px; padding: 66px 30px 26px; border-radius: 20px; }
.lsum__in { margin: 0; }
.lsum__in > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(247, 245, 232, .14); }
.lsum__in > div:first-child { border-top: 0; }
.lsum__in dt { font: 500 10.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 245, 232, .6); }
.lsum__in dd { margin: 0; font: 500 14.5px/1.4 var(--sans); text-align: right; color: #F7F5E8; overflow-wrap: anywhere; }
.lsum__date { margin: 14px 0 0; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 245, 232, .5); }
.lsum .ty__tab { padding: 10px 18px 9px; font-size: 11px; }
.ldoc { padding: clamp(24px, 4vh, 48px) 0 clamp(80px, 12vh, 140px); border-top: 1px solid var(--line-2); }
.ldoc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.ltoc { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 28px); padding-top: 26px; }
.ltoc__h { margin: 0 0 12px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ltoc ol { margin: 0; padding: 0; list-style: none; }
.ltoc a { position: relative; display: flex; gap: 12px; align-items: baseline; padding: 8px 0 8px 14px; font: 500 14.5px/1.3 var(--sans); color: var(--ink-2); text-decoration: none; transition: color .25s; }
.ltoc a b { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: rgba(21, 23, 21, .45); }
.ltoc a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--spectrum); transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--ease-out); }
.ltoc a:hover, .ltoc a.is-on { color: var(--ink); }
.ltoc a.is-on::before { transform: none; }
.ldoc__body { grid-column: 5 / -1; }
.lsec { padding: 34px 0 38px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.lsec:first-child { border-top: 0; }
.lsec__t { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; font: 400 clamp(32px, 3vw, 46px)/1 var(--display); letter-spacing: -.02em; word-spacing: .12em; }
.lsec__t b { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: rgba(21, 23, 21, .45); }
.lsec p { max-width: 40em; margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.lid { margin: 4px 0 0; }
.lid > div { display: grid; grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.lid dt { font: 500 11px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lid dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.todo { display: inline-block; margin-left: 4px; padding: 3px 9px; border: 1px dashed rgba(21, 23, 21, .35); border-radius: 99px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(21, 23, 21, .58); }
.lid dd .todo:first-child { margin-left: 0; }
.lchk { margin: 0; padding: 0; list-style: none; }
.lchk li { position: relative; padding: 13px 0 13px 34px; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; }
.lchk li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 12px; height: 6px; border: solid var(--ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.lchk li::after { content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, rgba(74, 218, 173, .35), rgba(50, 181, 236, .25)); z-index: -1; }
@media (max-width: 900px) {
  .lhero__copy, .lsum { grid-column: 1 / -1; }
  .ltoc { display: none; }
  .ldoc__body { grid-column: 1 / -1; }
  .lid > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (min-width: 901px) and (max-width: 1240px) { .lhero__copy { grid-column: 1 / span 7; } .lsum { grid-column: 8 / -1; } }

/* the phone on the orange table: the photo sits on a plate with its own proportions (cover, anchored at --fx), so the
   screen (screen-phone.js: a canvas mapped onto the photographed screen by a matrix3d) stays glued to it at every size */
.phone__frame { container-type: size; }
.phone__plate { --fx: .58; --pw: max(100cqw, 177.778cqh); --ph: max(56.25cqw, 100cqh); position: absolute; width: var(--pw); height: var(--ph);
  left: calc((100cqw - var(--pw)) * var(--fx)); top: calc((100cqh - var(--ph)) * .5);
  transform-origin: calc(50cqw - (100cqw - var(--pw)) * var(--fx)) calc(50cqh - (100cqh - var(--ph)) * .5);
  transform: scale(calc(1.02 + var(--o) * .1 + (1 - var(--p, 1)) * .04)); will-change: transform; }
.phone__plate .phone__img { inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: 50% 50%; transform: none; will-change: auto; }
.phone__screen { position: absolute; left: 0; top: 0; width: 390px; height: 845px; transform-origin: 0 0; border-radius: 37px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out); }
.phone__screen.is-live { opacity: 1; }
.phone__screen canvas { display: block; width: 100%; height: 100%; }
html:not(.js) .phone__screen { display: none; }
@media (max-width: 760px) { .phone__plate { --fx: .64; } }

/* ============================================================================================================
   38 · The Thank-you frame draws itself: first a drawing in ink on the sky — the tab traces its outline, the line
   leaves it and runs round both sides at once (they meet at the bottom) — then the panel inks in behind and the lines
   turn to light; the two targets pop; the words rise last.
   ============================================================================================================ */
.ty { isolation: isolate; }
html.js .ty { background: transparent; }
html.js .ty::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #151715; pointer-events: none;
  opacity: 0; transform: scale(.985); transition: opacity .85s var(--ease-out) 1.25s, transform 1.3s var(--ease-out) 1.25s; }
html.js .ty.is-drawn::before { opacity: 1; transform: none; }
html.js .ty__line path { stroke: #151715; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.js .ty.is-drawn .ty__line path { stroke: var(--ty-ink); stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.65, 0, .35, 1) .2s, stroke .7s var(--ease-out) 1.3s; }
html.js .ty.is-drawn .ty__line path.ty__tp { transition: stroke-dashoffset .8s cubic-bezier(.65, 0, .35, 1) 0s, stroke .7s var(--ease-out) 1.3s; }
html.js .ty__tab { border-color: transparent; color: transparent; }
html.js .ty.is-drawn .ty__tab { animation: ty-tab 2s var(--ease-out) .25s both; }
@keyframes ty-tab { 0% { color: rgba(21, 23, 21, 0); } 25% { color: #151715; } 55% { color: #151715; } 100% { color: #F7F5E8; } }
html.js .ty__mk { opacity: 0; transform: scale(.3); transition: opacity .5s var(--ease-out), transform .8s var(--ease-back); }
html.js .ty.is-drawn .ty__mk { opacity: 1; transform: none; transition-delay: 1.55s; }
html.js .ty:not(.is-drawn) [data-split] .sw > span { transform: translate3d(0, 135%, 0) rotate(4deg) !important; }
html.js .ty:not(.is-drawn) [data-reveal] { opacity: 0 !important; transform: translate3d(0, 28px, 0) !important; }
html.js .sky__panel { box-shadow: none; }
html.js .sky__panel::before { box-shadow: 0 50px 100px -60px rgba(30, 10, 60, .75); }
html.js .lsum__in, html.js .lsum__date { opacity: 0; transition: opacity .8s var(--ease-out) 1.5s; }
html.js .ty.is-drawn .lsum__in, html.js .ty.is-drawn .lsum__date { opacity: 1; }
.merci .merci__in { transition-delay: 1.45s; }
.merci__ball { transition-delay: 1.7s; }
.gutter__ball { animation-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) {
  html.js .ty::before, html.js .ty__mk, html.js .lsum__in, html.js .lsum__date { transition: none; opacity: 1; transform: none; }
  html.js .ty__line path { stroke: var(--ty-ink); stroke-dashoffset: 0; transition: none; }
  html.js .ty__tab, html.js .ty.is-drawn .ty__tab { animation: none; color: var(--ty-ink); }
}

/* ============================================================================================================
   39 · Balayage, tour 2 : le pendentif à droite, le bouton pause hors du titre, le drone sans carte sur le colis,
   le pied de page arrondi après une page « papier », la 404 qui respire, la boule dans la gouttière
   ============================================================================================================ */
/* filiale · the pendant: on the right, faded into the denim on its left — the words stand on plain denim */
@media (min-width: 901px) {
  .read--denim .read__bg img { left: auto; right: 0; width: 60%; height: 100%; object-fit: cover; object-position: 50% 46%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36%); mask-image: linear-gradient(90deg, transparent, #000 36%); }
  .read--denim .read__stick::before { background: linear-gradient(90deg, rgba(12, 22, 48, .5), rgba(12, 22, 48, .18) 44%, rgba(12, 22, 48, 0) 64%); }
  .read--denim .read__t { max-width: min(46vw, 760px); font-size: clamp(44px, min(5.4vw, 10vh), 96px); }
}
/* phones: the ball hangs low, under the words */
@media (max-width: 900px) { .read--denim .read__bg img { top: 0; height: 128%; object-position: 50% 0%; } .read--denim .read__stick { align-content: start; padding-top: calc(var(--nav-h) + 5vh); } }

/* filiale · the pause button of the calculator film: top right, never on « mesure. » */
.pave__stage .vctl { top: clamp(12px, 4%, 36px); bottom: auto; }

/* filiale · the drone: the three needs under the title, as words on the sky (no card over the parcel) */
.drone__ticks { grid-column: 1 / span 4; grid-row: 2; align-self: start; margin-top: clamp(16px, 3.4vh, 36px); padding: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.drone__ticks li { padding: 11px 0 11px 28px; border-top-color: rgba(251, 248, 238, .26); color: #FBF8EE; text-shadow: 0 1px 14px rgba(10, 20, 70, .35); }
.drone__ticks li:first-child { border-top: 1px solid rgba(251, 248, 238, .26); }
.drone__ticks li::before { border-color: #FBF8EE; }
.drone__frame::after { background: linear-gradient(100deg, rgba(16, 26, 84, .5), rgba(16, 26, 84, .14) 40%, rgba(16, 26, 84, 0) 58%); }
@media (max-width: 1100px) and (min-width: 901px) { .drone__ticks { grid-column: 1 / span 5; } }
@media (max-width: 900px) {
  .drone__ticks { grid-column: 1 / -1; align-self: end; margin-top: 0; }
  .drone__ticks li { padding: 9px 0 9px 26px; font-size: 15px; }
  .drone__frame::after { background: linear-gradient(180deg, rgba(16, 26, 84, .42), rgba(16, 26, 84, 0) 34%, rgba(16, 26, 84, 0) 58%, rgba(16, 26, 84, .62)); }
}

/* the footer: after a page that ends on paper (contact, legal), it rises with round shoulders instead of a hard edge */
main:not(:has(> .sky:last-child)):not(:has(> .gutter:last-child)) + .foot { margin-top: clamp(40px, 6vw, 80px); border-radius: clamp(26px, 3.2vw, 44px) clamp(26px, 3.2vw, 44px) 0 0; }
/* 404: the painted sky glows into the footer's orange */
.gutter { isolation: isolate; }
.gutter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 22vh; pointer-events: none; background: linear-gradient(rgba(248, 122, 1, 0), #F87A01); }
.gutter > * { z-index: 1; }
.gutter > .gutter__ball { z-index: 3; }
/* 404: the ball rolls along the bottom of the frame and stops in its corner — never on the button */
.gutter__ball { left: auto; right: calc(max(var(--gutter), (100% - 1100px) / 2) + 3%); bottom: calc(10vh - min(7vw, 64px)); width: min(19vw, 172px);
  animation-name: roll-in-r; }
@keyframes roll-in-r { from { transform: translate3d(-100vw, 0, 0) rotate(-560deg); } to { transform: none; } }
@media (max-width: 760px) { .gutter__ball { width: 30vw; right: calc(var(--gutter) + 2%); bottom: calc(10vh - 13vw); } }
/* 404 on short screens: a smaller title, more air under the tab */
@media (max-height: 640px) {
  .gutter__panel { min-height: 74vh; }
  .gutter__in { padding: 70px 30px 70px; }
  .gutter__t { font-size: clamp(56px, 15vh, 120px); }
  .gutter__p { margin: 14px 0 18px; }
}
/* the two film chapters (phone, drone) also close at the end of their pin: the window shrinks back to a rounded card
   and the words leave first — no hard edge into the paper that follows */
.phone, .drone { --c: clamp(0, calc((var(--p, 0) - .86) * 7.2), 1); --k: max(var(--o), var(--c)); }
html.js .phone__frame, html.js .drone__frame { clip-path: inset(calc(var(--k) * 12%) calc(var(--k) * 8%) round calc(var(--k) * 28px)); }
html.js .phone__in, html.js .drone__in, html.js .drone .vctl { opacity: clamp(0, min(calc((var(--p, 1) - .22) * 5), calc((.92 - var(--p, 0)) * 9)), 1); }

/* ============================================================================================================
   40 · Les suites en cartes empilées (retour client 12/10, « comme la méthode ») : les 5 fuites de l'accueil, les 5
   fuites de leur page, les 3 raisons de « Pourquoi STRIKE ». Chaque carte colle sous le menu, la suivante monte
   par-dessus ; la carte recouverte recule un peu et s'assombrit (--cov, site.js [data-stack]). Une carte trop haute
   pour l'écran (petits téléphones) ne colle pas : elle défile (.is-tall).
   ============================================================================================================ */
.cstack { position: relative; padding: clamp(10px, 2.4vh, 26px) 0 8vh; }
.ccard { --top: calc(var(--nav-h) + 14px + var(--i, 0) * 12px); --w1: #B471EF; --w2: #32B5EC; position: sticky; top: var(--top); z-index: 1; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; column-gap: clamp(24px, 4vw, 76px);
  height: calc(100svh - var(--nav-h) - 64px); max-height: 880px; margin: 0 clamp(10px, 1.6vw, 24px) 10vh; padding: clamp(22px, 5vh, 56px) clamp(24px, 4.4vw, 72px);
  border-radius: 30px; color: var(--ink); text-decoration: none; transform: scale(calc(1 - var(--cov, 0) * .05)); transform-origin: 50% 0; will-change: transform;
  background: radial-gradient(80% 90% at 94% 4%, color-mix(in srgb, var(--w1) 42%, transparent), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--w2) 20%, transparent), transparent 70%), #F4F2E8;
  box-shadow: 0 -24px 70px -46px rgba(21, 23, 21, .4), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.ccard:last-child { margin-bottom: 0; }
.ccard::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: #151715; opacity: calc(var(--cov, 0) * .22); }
.ccard[data-leak="facturation"] { --w1: #F87A01; --w2: #F46053; }
.ccard[data-leak="paie"] { --w1: #F046A4; --w2: #D25CCA; }
.ccard[data-leak="tresorerie"] { --w1: #4ADAAD; --w2: #3EC8CD; }
.ccard[data-leak="commandes"] { --w1: #32B5EC; --w2: #7393EE; }
.ccard[data-leak="clients"] { --w1: #B471EF; --w2: #D25CCA; }
.ccard__copy { position: relative; z-index: 2; min-width: 0; }
.ccard__n { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .6); }
.ccard__n::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--w1), var(--w2)); }
.ccard__n b { font-weight: 500; color: var(--ink); }
.ccard__t { margin: clamp(14px, 2.6vh, 26px) 0 0; font: 400 clamp(46px, min(6vw, 10.5vh), 112px)/.9 var(--display); letter-spacing: -.03em; word-spacing: .12em; color: inherit; text-wrap: balance; }
.ccard__t em { font-style: normal; color: inherit; }
.ccard__t .l { display: block; }
.ccard__p { max-width: 26em; margin: clamp(14px, 2.8vh, 28px) 0 0; font: 500 clamp(16px, 1.3vw, 20px)/1.45 var(--sans); letter-spacing: -.005em; color: rgba(21, 23, 21, .78); }
.ccard__go { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(18px, 3.6vh, 36px); padding: 13px 20px 12px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: transform .3s var(--ease-out); }
a.ccard:hover .ccard__go { transform: translateX(4px); }
.ccard__fig { position: relative; z-index: 1; align-self: stretch; display: grid; place-items: center; min-width: 0; min-height: 0; }
.ccard__fig .vizbox { width: 100%; padding: clamp(18px, 3vw, 40px); border-radius: 22px; background: rgba(251, 250, 244, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 70px -50px rgba(21, 23, 21, .35); }
.ccard__fig .viz text { font-size: 6.6px; }
.ccard__fig .dessin { width: min(100%, calc((100svh - var(--nav-h) - 170px) * 5 / 4)); }
/* the expertises card: the three lines (problem, control, gain) */
.ccard__fiche { margin: clamp(16px, 3.4vh, 34px) 0 0; border-top: 1px solid rgba(21, 23, 21, .14); }
.ccard__fiche > div { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.6fr); gap: 4px 22px; padding: clamp(10px, 1.8vh, 16px) 0; border-bottom: 1px solid rgba(21, 23, 21, .1); }
.ccard__fiche dt { font: 500 11.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .58); }
.ccard__fiche dd { margin: 0; font: 500 clamp(15px, 1.15vw, 17px)/1.45 var(--sans); color: var(--ink); }
.ccard__fiche > div:last-child dd { font-weight: 600; }
/* the reasons (Pourquoi STRIKE): shorter cards, a big word and its line; the third is STRIKE's answer, in the dark */
.cstack--why .ccard { height: min(64svh, 560px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ccard--r1 { --w1: #4ADAAD; --w2: #32B5EC; }
.ccard--r2 { --w1: #32B5EC; --w2: #B471EF; }
.ccard--r3 { --w1: #B471EF; --w2: #F046A4; color: #F7F5E8; background: radial-gradient(55% 65% at 92% 6%, rgba(180, 113, 239, .3), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(240, 70, 164, .2), transparent 70%), #08080A; }
.ccard--r3 .ccard__n { color: rgba(247, 245, 232, .62); } .ccard--r3 .ccard__n b { color: #F7F5E8; }
.ccard--r3 .ccard__p { color: rgba(247, 245, 232, .82); }
.ccard__ico { width: min(68%, 300px); height: auto; justify-self: center; fill: none; stroke: currentColor; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; opacity: .9; }
.ccard__ico .o { stroke: #F87A01; }
.cstack--why .ccard__t { font-size: clamp(64px, min(9vw, 15vh), 168px); }

@media (max-width: 900px) {
  .cstack { padding-bottom: 4vh; }
  .ccard { --top: calc(var(--nav-h) + 10px + var(--i, 0) * 8px); grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 16px; height: auto; max-height: none;
    margin: 0 10px 16px; padding: 20px 20px 24px; border-radius: 24px; }
  .ccard__fig { order: -1; }
  .ccard__fig .vizbox { padding: 14px; border-radius: 16px; }
  .ccard__fig .viz text { font-size: 7.5px; }
  .ccard__fig .dessin { width: 100%; }
  .ccard__t { font-size: clamp(36px, 10.4vw, 52px); }
  .ccard__fiche > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; }
  .ccard__fiche dd { font-size: 15px; }
  .ccard__go { margin-top: 16px; }
  .cstack--why .ccard { height: auto; grid-template-columns: minmax(0, 1fr); }
  .cstack--why .ccard__t { font-size: clamp(54px, 16vw, 84px); }
  .ccard__ico { width: 110px; justify-self: start; }
  .cstack--why .ccard__fig { order: 0; justify-items: start; }
}
.ccard.is-tall { position: relative; top: auto; }
@media (prefers-reduced-motion: reduce) { .ccard { transform: none; } .ccard::after { display: none; } }
html:not(.js) .ccard { position: relative; top: auto; }
/* the sections that hold a stack: their head, then the cards */
.leaks--stack { padding-top: clamp(64px, 9vw, 130px); }
.leaks--stack .leaks__head { margin-bottom: clamp(26px, 4.4vh, 48px); }
.why--stack { padding-top: clamp(64px, 9vw, 130px); }
.why--stack .why__head { margin-bottom: clamp(26px, 4.4vh, 48px); }
.why--stack .h2 { max-width: 18ch; }
.cstack--x { padding-top: clamp(24px, 5vh, 56px); }
.ccard__n { display: block; }
.ccard__n::before { display: inline-block; vertical-align: middle; margin: -3px 10px 0 0; }

/* ============================================================================================================
   41 · La boule en vraie 3D (ball3d.js, WebGL) : la toile se pose sur l'image (gardée sans WebGL). Sa boîte ne fait
   que bouger ; c'est la boule qui tourne (jamais une rotation 2D, qui ferait tourner la lumière avec elle).
   ============================================================================================================ */
.ball3d { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; max-width: none; max-height: none; display: block; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out); }
.is-3d > .ball3d { opacity: 1; }
.is-3d > img { opacity: 0 !important; animation: none !important; transition: opacity .4s; }
/* the closing sky: a smaller ball, always whole on screen; it rises without the 2D turn, and floats */
.sky__panel, .sky__ball { --bw: min(20vw, 24vh, 300px); }
.sky__ball.is-3d { transform: translate3d(-50%, calc(-50% + (1 - var(--rise)) * 56%), 0); }
.sky__ball.is-3d > .ball3d { animation: bob3 7s var(--ease-in-out) infinite alternate; }
@keyframes bob3 { from { transform: translate3d(0, -1.6%, 0); } to { transform: translate3d(0, 1.6%, 0); } }
@media (max-width: 760px) { .sky__panel, .sky__ball { --bw: min(46vw, 30vh); } }
/* 404: the box slides in, the shader rolls the ball by the distance travelled (the image, without WebGL, spins) */
.gutter__ball { aspect-ratio: 1; }
.gutter__ball > img { display: block; width: 100%; height: 100%; animation: roll-spin 1.8s var(--ease-out) 1.9s both; }
@keyframes roll-spin { from { transform: rotate(-560deg); } to { transform: none; } }
@keyframes roll-in-r { from { transform: translate3d(-100vw, 0, 0); } to { transform: none; } }
.gutter__ball .ball3d { height: 146%; }
/* the thank-you card */
.merci__ball { aspect-ratio: 1; }
.merci__ball > img { display: block; width: 100%; height: 100%; }
.merci__ball.is-3d { transform: translate3d(-50%, 30%, 0); }
.merci.is-in .merci__ball.is-3d { transform: translate3d(-50%, 0, 0); }
@media (prefers-reduced-motion: reduce) { .sky__ball.is-3d > .ball3d { animation: none; } }
/* the ball always whole on screen: if the frame runs long (short windows), the ball rises onto it */
.sky__ball { top: min(100%, calc(100svh - var(--bw) * .5 - 3vh - var(--nav-h) - 4vh)); }
@media (max-width: 760px) { .sky__ball { top: min(100%, calc(100svh - var(--bw) * .5 - 3vh - var(--nav-h) - 2vh)); } }
/* short windows: the frame fills the height; the ball moves to the frame's right corner, never over the button */
@media (max-height: 700px) {
  .sky__panel, .sky__ball { --bw: min(18vw, 24vh, 220px); }
  .sky__ball { left: 84%; }
}
@media (max-height: 700px) and (max-width: 760px) { .sky__ball { left: 78%; } }

/* ============================================================================================================
   42 · Accueil : le tableau de bord se referme en carte avant le manifeste (plus de fondu qui coupe la barre
   latérale), le manifeste arrive plus tôt sous lui
   ============================================================================================================ */
.land { background: var(--paper); --c: clamp(0, calc((var(--p, 0) - .86) * 7.2), 1); }
.land__stick { background: linear-gradient(#83CBBD, #83CBBD 30%, #B790EE 70%, #E9906A); }
html.js .land__stick { clip-path: inset(calc(var(--c) * 9%) calc(var(--c) * 6%) round calc(var(--c) * 30px)); }
.land::after { display: none; }
#manifeste .read__stick { align-content: start; padding-top: calc(var(--nav-h) + 10vh); }
@media (max-width: 900px) { #manifeste .read__stick { padding-top: calc(var(--nav-h) + 6vh); } }

/* ============================================================================================================
   43 · « Comment ça marche » : le sur-mesure en quatre étapes, en schéma (accueil, juste après « Sauf STRIKE. »).
   Quatre cases reliées par des flèches de lumière qui se tracent au défilement (--p de la section, --i de l'étape).
   Les cas d'usage : des exemples, pas une liste fermée — la dernière carte, « Votre cas », sur fond nuit.
   ============================================================================================================ */
.how { position: relative; padding: clamp(84px, 11vw, 168px) 0 clamp(72px, 9vw, 136px); background: var(--paper); }
.how__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.how__head .sh { grid-column: 1 / -1; }
.how__head .h2 { grid-column: 1 / span 8; margin: 22px 0 0; font-size: clamp(42px, 5.2vw, 88px); }
.how__head .h2 .l { display: block; }
.how__lead { grid-column: 9 / -1; margin: 0; padding-bottom: .5em; font: 500 clamp(16px, 1.25vw, 19px)/1.5 var(--sans); color: var(--ink-2); }
.how__flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin: clamp(52px, 6.4vw, 96px) 0 0; padding: 0; list-style: none; }
.how__step { --k: clamp(0, calc((var(--p, 1) - .16 - var(--i, 0) * .06) * 6), 1); position: relative; }
.how__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; background: #FBFAF4;
  box-shadow: 0 22px 44px -30px rgba(21, 23, 21, .5); }
.how__ico::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--h1), var(--h2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.how__ico svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.how__ico .f { stroke: rgba(21, 23, 21, .38); }
.how__ico .o { stroke: #F87A01; }
.how__ico .of { fill: #F87A01; stroke: none; }
.how__step:not(:last-child)::after { content: ""; position: absolute; top: 33px; left: 86px; width: calc(100% + var(--gap) - 108px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--h1), var(--h2)); transform: scaleX(var(--k)); transform-origin: 0 50%; }
.how__step:not(:last-child)::before { content: ""; position: absolute; top: 28.5px; left: calc(100% + var(--gap) - 33px); width: 9px; height: 9px;
  border-top: 2px solid var(--h2); border-right: 2px solid var(--h2); border-radius: 0 2px 0 0; transform: rotate(45deg); opacity: clamp(0, calc((var(--k) - .9) * 10), 1); }
.how__n { margin: 24px 0 0; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .5); }
.how__n b { margin-right: 10px; font-weight: 500; color: var(--ink); }
.how__t { margin: 12px 0 0; font: 400 clamp(32px, 2.8vw, 48px)/.95 var(--display); letter-spacing: -.02em; word-spacing: .12em; color: var(--ink); }
.how__p { max-width: 21em; margin: 12px 0 0; font: 500 clamp(15px, 1.1vw, 16.5px)/1.5 var(--sans); color: var(--ink-2); }
.how__chip { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 8px 13px 7px; border-radius: 99px; background: rgba(251, 250, 244, .8);
  box-shadow: inset 0 0 0 1px rgba(21, 23, 21, .14); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.how__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--h1), var(--h2)); }
.how__more { margin-top: clamp(40px, 4.6vw, 64px); }
@media (max-width: 1100px) and (min-width: 901px) { .how__t { font-size: 32px; } .how__p { font-size: 14.5px; } }
@media (max-width: 900px) {
  .how__head .h2, .how__lead { grid-column: 1 / -1; }
  .how__head .h2 { font-size: clamp(38px, 10.4vw, 56px); }
  .how__lead { margin-top: 18px; padding: 0; }
  .how__flow { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 40px; }
  .how__step { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .how__ico { grid-row: 1 / span 4; width: 60px; height: 60px; border-radius: 19px; }
  .how__ico svg { width: 32px; height: 32px; }
  .how__n, .how__t, .how__p, .how__chip { grid-column: 2; }
  .how__n { margin-top: 4px; }
  .how__t { font-size: 34px; }
  .how__chip { justify-self: start; }
  .how__step:not(:last-child)::after { top: 72px; left: 29px; width: 2px; height: calc(100% - 72px + 40px - 16px); transform: scaleY(var(--k)); transform-origin: 50% 0;
    background: linear-gradient(180deg, var(--h1), var(--h2)); }
  .how__step:not(:last-child)::before { top: calc(100% + 40px - 19px); left: 25.5px; transform: rotate(135deg); }
}

/* the use cases: « Votre cas », the last card, on night */
.ccard--you { --w1: #F046A4; --w2: #32B5EC; color: #F7F5E8;
  background: radial-gradient(60% 70% at 92% 6%, rgba(240, 70, 164, .3), transparent 70%), radial-gradient(55% 65% at 0% 100%, rgba(50, 181, 236, .22), transparent 70%),
    radial-gradient(50% 60% at 70% 92%, rgba(74, 218, 173, .14), transparent 70%), #08080A; }
.ccard--you .ccard__n { color: rgba(247, 245, 232, .62); }
.ccard--you .ccard__n b { color: #F7F5E8; }
.ccard--you .ccard__p { color: rgba(247, 245, 232, .8); }
.ccard--you .ccard__go { background: #F7F5E8; color: var(--ink); text-decoration: none; }
.ccard--you .ccard__go:hover { transform: translateX(4px); }
.ccard--you .ccard__fiche { border-top-color: rgba(247, 245, 232, .16); }
.ccard--you .ccard__fiche > div { border-bottom-color: rgba(247, 245, 232, .1); }
.ccard--you .ccard__fiche dt { color: rgba(247, 245, 232, .6); }
.ccard--you .ccard__fiche dd { color: #F7F5E8; }
.ccard__cloud { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 0; list-style: none; }
.ccard__cloud li { padding: 11px 18px 10px; border-radius: 99px; font: 500 clamp(11.5px, .95vw, 13.5px)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(247, 245, 232, .82); box-shadow: inset 0 0 0 1px rgba(247, 245, 232, .22); background: rgba(247, 245, 232, .04); }
.ccard__cloud li:nth-child(odd) { transform: translateY(-6px); }
.ccard__cloud li:nth-child(3n) { transform: translateY(5px); }
.ccard__cloud li.is-you { position: relative; color: #151715; background: #F7F5E8; box-shadow: none; }
.ccard__cloud li.is-you::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(90deg, #4ADAAD, #32B5EC, #B471EF, #F046A4, #F87A01);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: youPulse 2.8s var(--ease-in-out) infinite; }
@keyframes youPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .ccard__cloud li.is-you::before { animation: none; } }
@media (max-width: 900px) {
  .ccard--you .ccard__fig { order: 0; }
  .ccard__cloud { justify-content: flex-start; gap: 8px; margin: 0; }
  .ccard__cloud li { padding: 9px 13px 8px; font-size: 11px; }
  .ccard__cloud li:nth-child(odd), .ccard__cloud li:nth-child(3n) { transform: none; }
}
/* the five markers of the hero and of the cases page are examples: no numbers */
.hseq .scene__in b, .xhero .scene__in b { display: none; }

/* ============================================================================================================
   44 · Le parcours. Le site se lit en cinq chapitres (Accueil → Méthode → Cas d'usage → Pourquoi STRIKE → Lancer
   l'audit). Chaque page finit sur le suivant : la carte des cinq (le chapitre en cours, ceux déjà lus cochés), le vrai
   titre de la page suivante en très grand, un aperçu qui suit le pointeur ; un clic, ou continuer à faire défiler une
   fois en bas (la barre se remplit, la page suivante monte : site.js). Le menu mobile devient la table des chapitres.
   ============================================================================================================ */
.foot__sig { display: none; }
.foot__next { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding-bottom: clamp(44px, 6vw, 88px); margin-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid rgba(255, 248, 236, .26); --np: 0; }
.foot__map { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 clamp(44px, 6.4vw, 96px); padding: 0; list-style: none; }
.foot__map li { position: relative; }
.foot__map li:not(:last-child)::after { content: ""; position: absolute; top: 6.5px; left: 22px; right: 10px; height: 1px; background: rgba(255, 248, 236, .3);
  transform-origin: 0 50%; }
.foot__map li.is-seen:not(:last-child)::after, .foot__map li.is-cur:not(:last-child)::after { background: linear-gradient(90deg, #FFF8EC, rgba(255, 248, 236, .3)); }
.foot__map a { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0; row-gap: 12px; width: fit-content; color: rgba(255, 248, 236, .72);
  text-decoration: none; transition: color .3s; }
.foot__map a::before { content: ""; grid-column: 1 / -1; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(255, 248, 236, .7);
  transition: transform .4s var(--ease-back), background .3s; }
.foot__map b { margin-right: 8px; font: 500 11px/1 var(--mono); letter-spacing: .1em; }
.foot__map span { font: 500 13.5px/1.2 var(--sans); letter-spacing: -.005em; }
.foot__map a:hover { color: #FFF8EC; }
.foot__map a:hover::before { transform: scale(1.25); }
.foot__map .is-seen a::before { background: rgba(255, 248, 236, .55); border-color: transparent; }
.foot__map .is-cur a { color: #FFF8EC; }
.foot__map .is-cur a::before { background: #FFF8EC; border-color: #FFF8EC; box-shadow: 0 0 0 5px rgba(255, 248, 236, .18); }
.foot__map .is-next a::before { animation: mapPing 2.2s var(--ease-out) infinite; }
@keyframes mapPing { 0% { box-shadow: 0 0 0 0 rgba(255, 248, 236, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255, 248, 236, 0); } }
.foot__k { grid-column: 1 / -1; margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 248, 236, .78); }
.foot__k b { margin-left: 10px; font-weight: 500; color: #FFF8EC; }
.foot__go { grid-column: 1 / -1; position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(14px, 2vw, 24px);
  color: #FFF8EC; text-decoration: none; }
.foot__t { max-width: 14ch; font: 400 clamp(54px, 8.6vw, 156px)/.86 var(--display); letter-spacing: -.03em; word-spacing: .12em; text-wrap: balance;
  transition: transform .7s var(--ease-out); transform: translate3d(calc(var(--np) * 2vw), 0, 0); }
.foot__arr { flex: none; display: grid; place-items: center; width: clamp(64px, 7vw, 112px); aspect-ratio: 1; margin-bottom: .6vw; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 248, 236, .8); transition: background .35s, transform .6s var(--ease-out); }
.foot__arr svg { width: 38%; height: auto; fill: none; stroke: #FFF8EC; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out), stroke .3s; }
.foot__go:hover .foot__t { transform: translate3d(14px, 0, 0); }
.foot__go:hover .foot__arr { background: #FFF8EC; transform: rotate(-8deg) scale(1.04); }
.foot__go:hover .foot__arr svg { stroke: #151715; transform: translateX(10%); }
.foot__s { grid-column: 1 / span 7; margin: clamp(16px, 2vw, 24px) 0 0; font: 500 clamp(16px, 1.3vw, 20px)/1.45 var(--sans); color: rgba(255, 248, 236, .86); }
.foot__pull { grid-column: 8 / -1; justify-self: end; display: flex; align-items: center; gap: 14px; margin-top: 18px; opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.foot__next.is-end .foot__pull { opacity: 1; transform: none; }
.foot__bar { position: relative; width: clamp(120px, 14vw, 220px); height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 248, 236, .3); }
.foot__bar i { position: absolute; inset: 0; background: #FFF8EC; transform: scaleX(var(--np)); transform-origin: 0 50%; }
.foot__hint { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 248, 236, .8); }
.foot__next.is-go .foot__t { transform: translate3d(0, -14px, 0); opacity: .0; transition: transform .45s var(--ease-in-out), opacity .4s; }
/* the preview of the next page: a paper card that follows the pointer over the title */
.foot__peek { position: absolute; z-index: 3; left: 0; top: 0; width: clamp(220px, 20vw, 320px); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; pointer-events: none;
  background: #F7F5E8; box-shadow: 0 40px 80px -40px rgba(30, 10, 40, .65), inset 0 0 0 1px rgba(255, 255, 255, .5); opacity: 0;
  transform: translate3d(var(--mx, 60vw), var(--my, 0px), 0) rotate(var(--mr, -4deg)) scale(.86); transition: opacity .35s var(--ease-out), transform .55s var(--ease-out); }
.foot__peek img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.foot__next.is-peek .foot__peek { opacity: 1; transform: translate3d(var(--mx, 60vw), var(--my, 0px), 0) rotate(var(--mr, -4deg)) scale(1); }
@media (hover: none), (max-width: 900px) { .foot__peek { display: none; } }
@media (max-width: 900px) {
  .foot__map { margin-bottom: 44px; }
  .foot__map span { display: none; }
  .foot__map .is-cur span, .foot__map .is-next span { display: inline; font-size: 12px; }
  .foot__map li:not(:last-child)::after { left: 20px; right: 6px; }
  .foot__t { font-size: clamp(46px, 13vw, 76px); }
  .foot__arr { width: 58px; }
  .foot__s, .foot__pull { grid-column: 1 / -1; }
  .foot__pull { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .foot__map .is-next a::before { animation: none; } .foot__t, .foot__peek { transition: none; } }

/* the mobile menu: the table of chapters */
.menu__panel a:not(:last-child) { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; align-items: baseline; padding: 14px 14px 13px; }
.menu__panel a:not(:last-child) b { grid-row: 1 / span 2; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--ink-m); }
.menu__panel a:not(:last-child) span { font: 400 30px/1 var(--display); letter-spacing: -.02em; word-spacing: .12em; }
.menu__panel a:not(:last-child) i { grid-column: 2; margin-top: 5px; font: 500 13px/1.35 var(--sans); font-style: normal; color: var(--ink-2); }
.menu__panel a[aria-current="page"] span { background: var(--spectrum) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.menu__panel a.is-seen:not(:last-child) b::after { content: " ✓"; color: var(--ink); }
.form__from { display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 7px 14px 6px 10px; border-radius: 99px; background: rgba(21, 23, 21, .05);
  font: 500 12.5px/1.2 var(--sans); color: var(--ink-2); }
.form__from::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spectrum); }
.form__from b { font-weight: 600; color: var(--ink); }

/* ---- the threads between pages: small links that carry the story on ---- */
.how__a { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 22px; outline-offset: 8px; }
.how__a > span { display: block; }
.how__a .how__ico { display: grid; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.how__a .how__chip { display: inline-flex; }
.how__go { display: inline-block !important; margin-left: .3em; font-family: var(--sans); font-size: .5em; vertical-align: .35em; opacity: 0; transform: translate3d(-8px, 0, 0);
  transition: opacity .3s, transform .45s var(--ease-out); }
.how__a:hover .how__ico, .how__a:focus-visible .how__ico { transform: translate3d(0, -5px, 0); box-shadow: 0 30px 50px -28px rgba(21, 23, 21, .55); }
.how__a:hover .how__go, .how__a:focus-visible .how__go { opacity: 1; transform: none; }
.how__ico g { transform-box: fill-box; transform-origin: center; }
.how__a:hover .lens { animation: lensScan 1.8s var(--ease-in-out) infinite; }
@keyframes lensScan { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-4px, -3px); } 65% { transform: translate(2px, -5px); } }
.how__a:hover .rows { animation: rowsSlide 1.4s var(--ease-in-out) infinite alternate; }
@keyframes rowsSlide { to { transform: translateX(2px); opacity: .5; } }
.how__a:hover .ruler { animation: rulerTick 1.4s var(--ease-in-out) infinite alternate; }
@keyframes rulerTick { to { transform: translateX(-2px); } }
.how__a:hover .stop { animation: stopPop 1.2s var(--ease-back) infinite; }
@keyframes stopPop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
.how__a:hover .spin { animation: spin360 1.6s var(--ease-in-out) infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }
/* the light running along the arrows, one step after the other: the process flows */
.how__step:not(:last-child)::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) -60% 0 / 34% 100% no-repeat, linear-gradient(90deg, var(--h1), var(--h2));
  height: 2.5px; animation: howFlow 4s var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * 1s + 1.2s); }
@keyframes howFlow { 0% { background-position: -60% 0, 0 0; } 45%, 100% { background-position: 160% 0, 0 0; } }
@media (max-width: 900px) {
  .how__step { display: block; }
  .how__a { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .how__step:not(:last-child)::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) 0 -60% / 100% 34% no-repeat, linear-gradient(180deg, var(--h1), var(--h2));
    width: 2.5px; height: calc(100% - 72px + 40px - 16px); animation-name: howFlowV; }
  @keyframes howFlowV { 0% { background-position: 0 -60%, 0 0; } 45%, 100% { background-position: 0 160%, 0 0; } }
}
@media (prefers-reduced-motion: reduce) { .how__step::after, .how__a .lens, .how__a .rows, .how__a .ruler, .how__a .stop, .how__a .spin { animation: none !important; } }
.how__chip { white-space: nowrap; }
/* method cards, cases, why STRIKE: a quiet arrow link at the end of the copy */
.mcard__go, .ccard__links a, .cmp__next a, .phone__go, .land__go { position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font: 600 14.5px/1.2 var(--sans); letter-spacing: -.005em; color: inherit; text-decoration: none; }
.mcard__go::after, .ccard__links a::after, .cmp__next a::after, .phone__go::after, .land__go::after { content: ""; position: absolute; left: 0; right: 1.4em; bottom: -4px; height: 1.5px;
  background: var(--spectrum); transform: scaleX(.18); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.mcard__go:hover::after, .ccard__links a:hover::after, .cmp__next a:hover::after, .phone__go:hover::after, .land__go:hover::after { transform: none; }
.mcard__go .arr, .ccard__links .arr, .cmp__next .arr, .phone__go .arr, .land__go .arr { transition: transform .4s var(--ease-out); }
.mcard__go:hover .arr, .ccard__links a:hover .arr, .cmp__next a:hover .arr, .phone__go:hover .arr, .land__go:hover .arr { transform: translateX(4px); }
.mcard__go { margin-top: clamp(18px, 3vh, 30px); }
.ccard__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: clamp(16px, 2.6vh, 26px) 0 0; }
.cmp__next { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 30px 0 0; }
.phone__go { margin-top: 18px; color: var(--ink); }
.land__go { display: flex; margin: 1.1cqw auto 0; font-size: 1.05cqw; color: var(--ink); }
@media (max-width: 900px) { .land__go { font-size: 1.5cqw; } }
.ccard--r3 .ccard__go { background: #F7F5E8; color: var(--ink); text-decoration: none; }
@media (min-width: 901px) {
  .foot__col:nth-of-type(1) { grid-column: 1 / span 3; }
  .foot__col:nth-of-type(2) { grid-column: 4 / span 4; }
}
.foot__up { grid-column: 10 / -1; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 11px; border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 236, .5); color: #FFF8EC; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: background .3s, color .3s; }
.foot__up:hover { background: #FFF8EC; color: #151715; }
.foot__up span { transition: transform .4s var(--ease-out); }
.foot__up:hover span { transform: translateY(-3px); }
@media (max-width: 900px) {
  .foot__up { grid-column: 1 / -1; justify-self: start; }
  .foot__map span, .foot__map .is-cur span, .foot__map .is-next span { display: none; }
  .foot__map a { row-gap: 9px; }
}
.menu__panel a[aria-current="page"] { color: var(--ink); }
/* the stacked cards grow with their content (a short window): such a card then scrolls whole (.is-tall, site.js) */
.ccard { height: auto; min-height: calc(100svh - var(--nav-h) - 64px); }
@media (min-width: 901px) and (max-height: 760px) {
  .ccard { padding-block: 22px; }
  .ccard__t { font-size: clamp(40px, min(5vw, 9.5vh), 80px); }
  .ccard__fiche { margin-top: 12px; }
  .ccard__fiche > div { padding: 7px 0; }
  .ccard__fiche dd { font-size: 14.5px; }
  .ccard__links { margin-top: 12px; }
  .ccard__p { margin-top: 10px; font-size: 15.5px; }
  .ccard__go { margin-top: 14px; }
  .ccard__fig .dessin { width: min(100%, calc((100svh - var(--nav-h) - 120px) * 5 / 4)); }
}
.foot__k { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.foot__k b { margin-left: 0; }

/* ---- the hero states the value at once: « L'IA sur mesure qui arrête les erreurs coûteuses. » (a longer title: a
   slightly smaller size, a wider column, the sub-line wraps) — « L'erreur est humaine. Pas la perte. » signs the footer ---- */
.h1--hero.h1--long { font-size: clamp(46px, min(6.1vw, 11.4vh), 104px); }
@media (min-width: 901px) { .hseq__copy { max-width: 720px; grid-column: 1 / span 7; } }
.hseq__copy .lead--one { width: auto !important; max-width: 31em; white-space: normal !important; }
@media (max-height: 640px) and (min-width: 901px) { .hseq__copy .h1--long { font-size: clamp(40px, 10vh, 72px); } }
@media (max-width: 600px) { .h1--hero.h1--long { font-size: clamp(40px, 11.6vw, 54px); } }
@media (min-width: 901px) and (max-width: 1199px) { .hseq__copy { grid-column: 1 / span 6; } .hseq__copy .lead--one { max-width: 24.5em; } }

/* ---- the nav's call: a compact pill (it was as big as a hero button on tablets and phones) ---- */
.nav__end .btn--sm { height: 36px; padding: 0 16px; font-size: 10.5px; letter-spacing: .12em; gap: 8px; }
@media (max-width: 900px) { .nav__end .btn--sm { height: 32px; padding: 0 13px; font-size: 10px; letter-spacing: .1em; } .menu__btn { width: 36px; height: 36px; } }
@media (max-width: 420px) { .nav__end .btn--sm { padding: 0 11px; font-size: 9.5px; letter-spacing: .08em; } }

/* ============================================================================================================
   45 · Le ton d'une vitrine (retour client 12/10) : pas d'appel pressant. Dans le menu, un simple « Contact » ;
   en bas des sections, des liens fléchés ; dans le cadre final, un bouton clair et petit.
   ============================================================================================================ */
.nav__end .nav__contact { background: transparent; }
.nav__end .nav__contact:hover { background: var(--ink); color: var(--paper); }
.seq__link { position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content; font: 600 14.5px/1.2 var(--sans); letter-spacing: -.005em;
  color: var(--ink); text-decoration: none; }
.seq__link::after { content: ""; position: absolute; left: 0; right: 1.4em; bottom: -4px; height: 1.5px; background: var(--spectrum); transform: scaleX(.18);
  transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.seq__link:hover::after { transform: none; }
.seq__link .arr { transition: transform .4s var(--ease-out); }
.seq__link:hover .arr { transform: translateX(4px); }
.sky__ctas .btn--sm { height: 42px; padding: 0 20px; font-size: 11px; }