:root{
  color-scheme: light;
  --c-highlighter:#e4f222; --c-highlighter-light:#f5ff78;
  --c-ink:#0c0a08; --c-obsidian:#1a1919; --c-cream:#f4f2f0; --c-paper:#ffffff; --c-ash:#6d6c6b;
  --c-tint:#f4f5d6; /* jaune clair à faible dose : #f5ff78 à 22 % sur crème */
  --bg:var(--c-cream); --surface:var(--c-paper); --surface-2:#ebe8e3;
  --text:var(--c-ink); --text-2:#5c5b59; --text-3:var(--c-ash);
  --rule:rgba(12,10,8,.12); --rule-strong:rgba(12,10,8,.30);
  --accent:var(--c-highlighter); --accent-hover:var(--c-highlighter-light);
  /* projecteur : cœur presque blanc, anneau citron, chute douce */
  --glow-core:rgba(255,255,255,.92); --glow:rgba(245,255,120,.66); --glow-mid:rgba(228,242,34,.24);

  --f-text:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-display:clamp(2.625rem, 1rem + 6.667vw, 7rem);
  --t-h1:clamp(2.5rem, 1.5rem + 4.1vw, 4.75rem);
  --t-h2:clamp(1.875rem, 1.271rem + 2.476vw, 3.5rem);
  --t-h3:clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);
  --t-lede:clamp(1.125rem, 1.055rem + 0.286vw, 1.3125rem);
  --t-body:clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);
  --t-small:clamp(0.875rem, 0.852rem + 0.095vw, 0.9375rem);
  --t-caption:clamp(0.75rem, 0.727rem + 0.095vw, 0.8125rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:40px; --s-8:48px; --s-9:64px; --s-10:96px; --s-11:128px; --s-12:176px;
  --section-y:clamp(5rem, 2.771rem + 9.143vw, 11rem);
  --page-x:clamp(1.25rem, 0.786rem + 1.905vw, 2.5rem);
  --container:1200px;

  --radius:6px;
  --edge:0 0 0 1px var(--rule);
  --edge-hi:inset 0 1px 0 rgba(255,255,255,.8);
  --shadow-card:0 1px 2px rgba(12,10,8,.05), 0 26px 50px -30px rgba(12,10,8,.30);
  --shadow-screen:0 0 0 1px rgba(12,10,8,.10), 0 34px 64px -34px rgba(12,10,8,.38);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --ease-film:cubic-bezier(.45,0,.55,1);
  --header-h:64px;
  --lit-pad:.08em;
}
@media (min-width:1024px){ :root{ --header-h:72px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:calc(var(--header-h) + 24px); scroll-padding-bottom:140px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Défilement doux natif : seulement quand GSAP ne tourne pas (sans JS, ou bibliothèques absentes). Quand ScrollTrigger est actif, un défilement doux CSS
   fausse ses recalculs (ScrollTrigger.refresh() remet la page en haut le temps de mesurer) : les ancres sont alors animées en JS (voir « Ancres »). */
html.no-js, html.no-gsap{ scroll-behavior:smooth; }
html.js:not(.no-gsap){ scroll-behavior:auto; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-text); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
/* le fond des sections (crème, papier, touche de jaune) est porté par <main> : il doit être opaque pour faire office de rideau sur le pied de page */
main{ position:relative; z-index:1; background:var(--bg); }
body.menu-open{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
p,li{ text-wrap:pretty; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--c-ink); outline-offset:3px; }
::selection{ background:var(--accent); color:var(--c-ink); }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:absolute; left:16px; top:-120px; z-index:100; padding:12px 18px; border-radius:var(--radius);
  background:var(--accent); color:var(--c-ink); font-weight:500; text-decoration:none; box-shadow:0 0 0 2px var(--c-ink);
}
.skip:focus{ top:12px; }
.i{ width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.wrap{ width:min(var(--container), 100% - 2 * var(--page-x)); margin-inline:auto; }

/* Masques des titres découpés en lignes (SplitText) : marge de sécurité pour accents et jambages */
.sl-mask{ padding-block:.14em .2em; margin-block:-.14em -.2em; }
/* ---------- Ajouts de la maquette ④ : règles communes ---------- */
[hidden]{ display:none !important; }
html:not(.js) .js-only{ display:none !important; }
.js .nojs-only{ display:none !important; }
.nw{ white-space:nowrap; }
/* ---------- Typographie ---------- */
.kicker{
  font-family:var(--f-mono); font-weight:500; font-size:var(--t-caption); line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
}
.h-display{ font-size:var(--t-display); line-height:.95; letter-spacing:-.045em; font-weight:500; text-wrap:balance; }
.h-h2{ font-size:var(--t-h2); line-height:1.06; letter-spacing:-.03em; font-weight:500; text-wrap:balance; }
.h-h3{ font-size:var(--t-h3); line-height:1.25; letter-spacing:-.015em; font-weight:500; }
.lede{ font-size:var(--t-lede); line-height:1.5; letter-spacing:-.005em; color:var(--text-2); text-wrap:pretty; }
.small{ font-size:var(--t-small); line-height:1.5; color:var(--text-2); }
.mono-note{ font-family:var(--f-mono); font-size:12px; line-height:1.6; color:var(--text-2); }
.tnum{ font-variant-numeric:tabular-nums; }

/* Rythme : un seul espace de section entre deux sections */
.sec{ padding-top:var(--section-y); scroll-margin-top:calc(16px - var(--section-y)); }
.sec:last-of-type{ padding-bottom:var(--section-y); }
#offre{ padding-bottom:var(--section-y); }
/* la FAQ garde de l'air avant l'aplat jaune : son dernier filet ne touche jamais le bord de l'appel final */
#faq{ padding-bottom:calc(var(--section-y) * .6); }
.sec-head .kicker{ margin-bottom:16px; }
.sec-head .h-h2{ max-width:16em; }
.sec-head .lede{ margin-top:24px; max-width:48ch; }
.sec-body{ margin-top:32px; }
@media (min-width:1024px){ .sec-body{ margin-top:56px; } }

/* ---------- Boutons (balayage au survol : le fond change de couleur en passant) ---------- */
.btn{
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; border-radius:var(--radius); font-family:var(--f-text); font-weight:500; white-space:nowrap;
  text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform 80ms var(--ease-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform 520ms var(--ease-out);
}
.btn:focus-visible::before{ transform:scaleX(1); transform-origin:0 50%; }
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{ transform:scaleX(1); transform-origin:0 50%; }
}
.btn .i{ width:18px; height:18px; }
.btn-l{ height:56px; padding:0 28px; font-size:17px; }
.btn-m{ height:48px; padding:0 22px; font-size:16px; }
.btn-s{ height:44px; padding:0 16px; font-size:15px; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--c-ink); }
/* Le libellé ne change pas de couleur d'un coup : une copie inversée se découvre avec le remplissage.
   Sinon le texte devient jaune sur jaune (ou encre sur encre) tant que le balayage n'est pas arrivé. */
.btn-primary::before{
  background:var(--c-ink); transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 520ms var(--ease-out);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit; pointer-events:none;
  box-shadow:0 12px 34px rgba(190,205,10,.55); opacity:0; transition:opacity 200ms var(--ease-out);
}
.btn-primary .i{ transition:transform 260ms var(--ease-out); }
.btn-primary:focus-visible{ color:var(--c-ink); }
.btn-primary:focus-visible::before{ transform:none; clip-path:inset(0 0 0 0); }
.btn-primary:focus-visible .btn-label--on{ clip-path:inset(0 0 0 0); }
.btn-label{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:inherit; }
.btn-label--on{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:inherit;
  padding:inherit; color:var(--accent); pointer-events:none; user-select:none;
  clip-path:inset(0 100% 0 0); transition:clip-path 520ms var(--ease-out);
}
.btn-secondary{ background:var(--c-paper); color:var(--text); box-shadow:inset 0 0 0 1px var(--rule-strong); }
.btn-secondary::before{ background:var(--accent); }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ color:var(--c-ink); }
  .btn-primary:hover::before{ transform:none; clip-path:inset(0 0 0 0); }
  .btn-primary:hover::after{ opacity:1; }
  .btn-primary:hover .i{ transform:translateX(4px); }
  .btn-primary:hover .btn-label--on{ clip-path:inset(0 0 0 0); }
  .btn-secondary:hover{ box-shadow:inset 0 0 0 1px var(--c-ink); }
}
.btn-block{ width:100%; }
@media (min-width:768px){ .btn-block{ width:auto; } }

/* Liens : soulignés qui se redessinent, balayage jaune (surligneur) */
.link{ position:relative; text-decoration:none; }
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:-.12em; height:1px; background:currentColor; opacity:.55;
}
.link:hover::after{ animation:ul-redraw 640ms var(--ease-out); opacity:1; }
@keyframes ul-redraw{
  0%{ transform:scaleX(1); transform-origin:100% 50%; }
  45%{ transform:scaleX(0); transform-origin:100% 50%; }
  55%{ transform:scaleX(0); transform-origin:0 50%; }
  100%{ transform:scaleX(1); transform-origin:0 50%; }
}
.link:focus-visible{ outline-offset:2px; }
.hl{ position:relative; isolation:isolate; }
.hl::before{
  content:""; position:absolute; z-index:-1; left:-.3em; right:-.3em; top:12%; bottom:6%; background:var(--accent); border-radius:3px;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform 480ms var(--ease-out);
}
.hl:hover::before, .hl:focus-visible::before{ transform:scaleX(1); transform-origin:0 50%; }
/* lien texte (action secondaire) */
.tlink{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:500; text-decoration:none; }
.tlink .i{ width:16px; height:16px; transition:transform 220ms var(--ease-out); }
.tlink:hover .i{ transform:translateX(4px); }
.tlink .i-down{ }
.tlink:hover .i-down{ transform:translateY(3px); }

.actions{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:768px){ .actions{ flex-direction:row; flex-wrap:wrap; gap:16px; } }
/* ---------- Badges ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:8px; }
.badge{
  display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:var(--radius);
  font-family:var(--f-mono); font-weight:500; font-size:12px; line-height:1.3; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2); box-shadow:inset 0 0 0 1px rgba(12,10,8,.22);
}
.badge-client{ background:var(--c-ink); color:var(--c-cream); box-shadow:none; }
.badge-accent{ background:var(--accent); color:var(--c-ink); box-shadow:none; }

/* ---------- Barre de lecture ---------- */
.progress{ position:fixed; z-index:60; top:0; left:0; right:0; height:2px; pointer-events:none; }
.progress i{ display:block; height:100%; background:var(--accent); box-shadow:0 0 0 0 var(--c-ink); transform:scaleX(0); transform-origin:0 50%; transition:box-shadow 300ms linear; }
body.on-yellow .progress i{ box-shadow:0 1px 0 var(--c-ink); }
/* ---------- En-tête : transparent sur le hero, fond + filet au défilement, se cache en descendant ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h); background:transparent; transition:transform 700ms var(--ease-out), background-color 320ms linear; }
.site-header.is-scrolled,
html:not(.js) .site-header,
body.menu-open .site-header{ background:#f4f2f0; }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rule); opacity:0; transition:opacity 320ms linear; }
.site-header.is-scrolled::after,
html:not(.js) .site-header::after,
body.menu-open .site-header::after{ opacity:1; }
.site-header.is-hidden{ transform:translateY(-101%); }
.site-header:has(:focus-visible), body.menu-open .site-header{ transform:none; }
.site-header .bar{ display:flex; align-items:center; height:100%; gap:12px; }
.brand{ display:flex; align-items:center; margin-right:auto; min-height:44px; }
.brand img{ width:117px; height:24px; }
.nav{ display:none; }
.langs{ display:none; }
.head-cta{ margin-left:auto; }
.brand + .head-cta{ margin-left:0; }
.nav{ position:relative; }
.nav-link{ position:relative; z-index:1; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; font-size:15px; color:var(--text-2); text-decoration:none; transition:color 240ms var(--ease-out); }
.nav-link:hover, .nav-link[aria-current]{ color:var(--text); }
/* section courante : le mot passe à l'encre. Pas de trait sous le lien. */
.nav-ind{ display:none; }
@media (min-width:1024px) and (max-width:1199px){ .nav-link{ padding:0 10px; } }
.lang{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; font-family:var(--f-mono); font-weight:500; font-size:12px; letter-spacing:.04em; color:var(--text-2); text-decoration:none; }
.lang:hover{ color:var(--text); }
.lang[aria-current="page"]{ color:var(--text); }
.lang[aria-current="page"] span{ text-decoration:underline; text-underline-offset:.35em; text-decoration-thickness:1px; }
@media (min-width:1024px){
  .brand{ margin-right:0; }
  .nav{ display:flex; align-items:center; margin-inline:auto; }
  .langs{ display:flex; align-items:center; }
  .head-cta{ margin-left:8px; }
  .menu{ display:none; }
}

/* Menu mobile */
.menu > summary{
  list-style:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer;
  border-radius:var(--radius); box-shadow:inset 0 0 0 1px var(--rule-strong); -webkit-tap-highlight-color:transparent; background:var(--c-paper);
}
.menu > summary::-webkit-details-marker{ display:none; }
.menu > summary .i{ width:20px; height:20px; }
.menu > summary .i-x, .menu > summary .lbl-close{ display:none; }
.menu[open]:not(.is-closing) > summary .i-menu, .menu[open]:not(.is-closing) > summary .lbl-open{ display:none; }
.menu[open]:not(.is-closing) > summary .i-x{ display:block; }
.menu[open]:not(.is-closing) > summary .lbl-close{ display:block; }
.menu-panel{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:49; background:var(--bg); overflow-y:auto; overscroll-behavior:contain;
  padding:8px var(--page-x) calc(24px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column;
}
.menu-links a{
  display:flex; align-items:center; min-height:56px; font-size:28px; font-weight:500; letter-spacing:-.02em; text-decoration:none;
  border-bottom:1px solid var(--rule); overflow:hidden;
}
.menu-links a > span{ display:block; padding-block:.08em; }
.menu-langs{ display:flex; gap:4px; margin:16px 0 24px -12px; }
.menu-panel .btn{ margin-top:auto; }

/* ---------- Bande allumée : texte écrit une seule fois, copie surlignée dessinée en ::after, révélée par un balayage ---------- */
.lit{ position:relative; display:inline-block; white-space:nowrap; padding-left:var(--lit-pad); --p:1; }
.lit::after{
  content:attr(data-lit); content:attr(data-lit) / "";
  position:absolute; top:0; bottom:-.15em; left:0; right:calc(var(--lit-pad) * -1); padding-left:var(--lit-pad);
  color:var(--c-ink); pointer-events:none; user-select:none; -webkit-user-select:none;
  /* la bande épouse l'encre (Geist : capitale .72 em, jambage du j .2 em sous la ligne de base) */
  background:linear-gradient(var(--accent), var(--accent)) 0 .09em / 100% 1em no-repeat;
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);
}

/* ---------- Halo : le projecteur (3 au maximum : hero, duo de l'offre, écran du pied de page) ---------- */
.glow{
  position:absolute; pointer-events:none;
  background:radial-gradient(closest-side, var(--glow-core) 0%, var(--glow) 30%, var(--glow-mid) 60%, rgba(228,242,34,0) 100%);
}
/* ---------- Hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; padding-top:var(--header-h); }
.hero-inner{ order:1; padding-top:24px; }
.hero-copy{ position:relative; z-index:1; }
.hero h1{ margin-top:16px; font-size:min(var(--t-h1), calc((100vw - 2 * var(--page-x)) / 8.4)); line-height:1; letter-spacing:-.04em; font-weight:500; }
/* lignes pré-découpées dans le HTML : masque + montée, sans JavaScript (marge de sécurité pour accents et jambages) */
.hero h1 .ln{ display:block; overflow:hidden; padding-block:.14em .2em; margin-block:-.14em -.2em; text-wrap:balance; }
.hero h1 .ln > span{ display:block; }
.hero .lede{ margin-top:20px; max-width:30em; }
.hero .actions{ margin-top:28px; }
.hero-foot{ order:3; position:relative; z-index:1; padding-top:32px; padding-bottom:8px; }
.hero-facts{ padding-top:16px; border-top:1px solid var(--rule-strong); max-width:44em; font-family:var(--f-mono); font-size:12px; line-height:1.5; color:var(--text-2); }
.facts{ display:grid; gap:6px 32px; }
.fine{ margin-top:8px; }
@media (min-width:600px){ .facts{ grid-template-columns:repeat(2, max-content); } }
.hero-glow{ z-index:-3; width:520px; height:520px; left:50%; top:50%; transform:translate(-50%,-50%); }

/* Mur (mobile et tablette : bande dans le flux, sous les boutons) */
.wall-stage{ order:2; position:relative; height:360px; margin-top:24px; }
.wall-cam{ position:absolute; inset:0; transform-origin:0 0; }
.wall-zone{ position:absolute; inset:0; z-index:0; overflow:hidden; perspective:900px; perspective-origin:50% 30%; }
.wall-zone::before, .wall-zone::after{ content:""; position:absolute; left:0; right:0; z-index:2; pointer-events:none; }
.wall-zone::before{ top:0; height:22%; background:linear-gradient(var(--c-cream) 4%, rgba(244,242,240,0)); }
.wall-zone::after{ bottom:0; height:32%; background:linear-gradient(rgba(244,242,240,0), var(--c-cream) 92%); }
.wall{ position:absolute; inset:0; pointer-events:none; }
.wall-plane{
  position:absolute; left:50%; top:-40%; width:664px; height:190%;
  display:grid; grid-template-columns:repeat(3, 200px); grid-template-rows:minmax(0,1fr); gap:20px;
  transform:translateX(-50%) rotateX(40deg) rotateZ(-16deg); transform-origin:50% 40%;
}
.wall-col{ position:relative; min-height:0; height:100%; }
.wall-col:nth-child(4){ display:none; }
.wall-track{ display:flex; flex-direction:column; will-change:transform; }
.wall-card{ padding-bottom:20px; }
.wc{ position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); box-shadow:0 0 0 1px rgba(12,10,8,.10), 0 20px 36px -18px rgba(12,10,8,.36); }
.wc img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.js .wall-col:nth-child(odd) .wall-track{ animation:drift-up 120s linear infinite; }
.js .wall-col:nth-child(even) .wall-track{ animation:drift-down 150s linear infinite; }
@keyframes drift-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes drift-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.is-paused .wall-track, .is-offscreen .wall-track, .tab-hidden .wall-track, .is-frozen .wall-track{ animation-play-state:paused !important; }

.wall-pause, .mq-pause{
  position:absolute; z-index:3; right:20px; bottom:16px; width:44px; height:44px; display:none; align-items:center; justify-content:center;
  border:0; border-radius:var(--radius); background:var(--c-paper); box-shadow:inset 0 0 0 1px var(--rule-strong), 0 6px 16px -8px rgba(12,10,8,.3); cursor:pointer;
}
.js .wall-pause{ display:flex; }
.wall-pause .i, .mq-pause .i{ width:18px; height:18px; }
.wall-pause .i-play, .mq-pause .i-play{ display:none; }
.wall-pause[aria-pressed="true"] .i-pause, .mq-pause[aria-pressed="true"] .i-pause{ display:none; }
.wall-pause[aria-pressed="true"] .i-play, .mq-pause[aria-pressed="true"] .i-play{ display:block; }
.hero-veil{ display:none; }
@media (min-width:768px) and (max-width:1023px){
  .wall-stage{ height:440px; }
  .wall-plane{ width:880px; grid-template-columns:repeat(4, 200px); }
  .wall-col:nth-child(4){ display:block; }
}
@media (min-width:1024px){
  .hero{ min-height:100svh; justify-content:center; }
  .hero-inner{ order:0; padding-top:32px; }
  .hero-foot{ order:0; padding-top:0; padding-bottom:56px; }
  .hero-copy, .hero-facts{ max-width:min(41rem, calc(52vw - var(--page-x))); }
  /* la plus longue ligne du titre (« votre nom, en ligne », 8,1 em) tient toujours dans la colonne de texte */
  .hero h1{ font-size:min(var(--t-h1), calc(min(41rem, 52vw - var(--page-x)) / 8.4)); }
  .hero-facts{ margin-top:28px; }
  .hero-glow{ width:840px; height:980px; left:60%; top:50%; bottom:auto; transform:translate(-50%,-50%); }
  .wall-stage{ display:contents; }
  .wall-cam{ z-index:-2; }
  .wall-zone{
    top:0; bottom:0; right:0; left:calc(49% + 48px); width:auto; height:auto; z-index:0;
    perspective:1100px; perspective-origin:0% 50%; overflow:visible; pointer-events:none;
  }
  .wall-zone::before, .wall-zone::after{ display:none; }
  .wall-plane{
    top:-12%; bottom:-12%; left:0; right:-40%; width:auto; height:auto;
    grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; transform:rotateY(36deg) rotateX(8deg); transform-origin:0% 50%;
  }
  .wall-col:nth-child(4){ display:block; }
  .hero-veil{
    display:block; position:absolute; inset:0; z-index:-1; pointer-events:none;
    /* haut : le mur s'estompe sous l'en-tête transparent (langues, Commander), aucun texte ne se pose sur une capture ;
       côté texte : le crème plein s'arrête 48 px plus loin, comme la zone du mur */
    background:
      linear-gradient(180deg, var(--c-cream) 0, rgba(244,242,240,.92) calc(var(--header-h) + 8px), rgba(244,242,240,0) calc(var(--header-h) + 104px), rgba(244,242,240,0) 88%, var(--c-cream) 100%),
      linear-gradient(90deg, var(--c-cream) 0%, var(--c-cream) calc(50% + 48px), rgba(244,242,240,.72) calc(58% + 48px), rgba(244,242,240,.26) calc(68% + 48px), rgba(244,242,240,0) calc(80% + 48px));
  }
  .wall-pause{ right:24px; bottom:24px; }
}
/* portables de 720 à 800 px de haut : espacement resserré, la ligne de faits se termine au-dessus de la pastille du badge (72 px sous elle) */
@media (min-width:1024px) and (max-height:800px){
  .hero-inner{ padding-top:16px; }
  .hero h1{ margin-top:12px; }
  .hero .lede{ margin-top:14px; }
  .hero .actions{ margin-top:20px; }
  .hero-facts{ margin-top:20px; padding-top:12px; }
  .facts{ row-gap:2px; }
  .fine{ margin-top:6px; }
  .hero-foot{ padding-bottom:72px; }
}
/* petits écrans en hauteur (iPhone SE) : on serre pour garder un bout de mur au premier écran */
@media (max-width:767px) and (max-height:720px){
  .hero-inner{ padding-top:16px; }
  .hero h1{ margin-top:12px; }
  .hero .lede{ margin-top:14px; font-size:1rem; line-height:1.45; }
  .hero .actions{ margin-top:18px; gap:10px; }
  .hero .btn-l{ height:48px; font-size:16px; }
  .wall-stage{ margin-top:8px; }
  .wall-zone::before{ height:14%; }
}
/* Bandeau « aperçu reçu » */
.patron{ border-block:1px solid var(--rule); }
.patron .wrap{ display:flex; flex-direction:column; gap:16px; padding-block:28px; }
.patron p{ font-size:var(--t-body); line-height:1.5; }
.patron .kicker{ margin-bottom:6px; font-size:var(--t-caption); }
@media (min-width:768px){
  .patron .wrap{ flex-direction:row; align-items:center; justify-content:space-between; gap:32px; }
}

/* ---------- Écran (cadre de capture) ---------- */
.screen{ position:relative; isolation:isolate; margin:0; overflow:hidden; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-screen); }
.screen .bar{
  position:relative; display:flex; align-items:center; justify-content:center; height:28px; padding:0 12px;
  background:var(--c-paper); box-shadow:inset 0 -1px 0 var(--rule);
}
.addr{ font-family:var(--f-mono); font-weight:400; font-size:12px; line-height:1; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.view{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--surface-2); }
.view > img, .view > picture > img{ width:100%; height:auto; }
.view > picture{ display:block; }
.view.wide{ aspect-ratio:21/9; }
.view.wide > img{ position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; }
@media (min-width:1024px){ .screen.lg .bar{ height:32px; } }
/* ---------- Vitrine : grille posée sur ordinateur et tablette, carrousel au doigt sur mobile. Aucun mouvement lié au défilement ---------- */
.counter{ display:none; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--text-2); text-align:right; margin:0 var(--page-x) 12px; }
.js .counter{ display:none; } /* compteur 01/10 retiré : retour de Kosta sur la vitrine */
.showcase-scroll{
  overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:var(--page-x);
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.showcase-scroll::-webkit-scrollbar{ display:none; }
.showcase-scroll:focus-visible{ outline-offset:-2px; }
.showcase-list{ display:flex; gap:16px; width:max-content; min-width:100%; padding:0 var(--page-x) 24px; }
.card{ position:relative; display:flex; flex-direction:column; flex:0 0 86vw; scroll-snap-align:start; min-width:0; container-type:inline-size; }
.cap{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; justify-items:start; margin-top:16px; }
.cap > *{ grid-column:1 / -1; }
.cap-name{ font-size:16px; line-height:1.3; font-weight:500; letter-spacing:-.005em; color:var(--text); }
.cap-meta{ margin-top:2px; font-size:var(--t-small); color:var(--text-2); }
.cap-status{ margin-top:8px; font-family:var(--f-mono); font-size:12px; line-height:1.4; color:var(--text-2); }
.cap .badges{ margin-top:8px; }
.cap-link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:4px; font-size:14px; font-weight:500; text-decoration:none; color:var(--text); }
.cap-link::after{ content:""; position:absolute; inset:0; }
.cap-link .i{ width:16px; height:16px; transition:transform 220ms var(--ease-out); }
.card:hover .cap-link .i{ transform:translate(2px,-2px); }
.card:hover .screen{ box-shadow:0 0 0 1px var(--c-ink), 0 40px 70px -34px rgba(12,10,8,.45); }
.card:has(.cap-link:focus-visible) .screen{ outline:2px solid var(--c-ink); outline-offset:3px; }
.card:hover .cap-link{ text-decoration:underline; text-underline-offset:.25em; text-decoration-color:rgba(12,10,8,.5); }
.showcase-foot{ margin-top:40px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-top:32px; border-top:1px solid var(--rule-strong); }
.showcase-foot .mono-note{ max-width:44ch; }
@media (min-width:768px){
  .counter{ display:none !important; }
  .showcase-scroll{ overflow:visible; scroll-snap-type:none; }
  .showcase-list{ display:grid; width:auto; min-width:0; grid-template-columns:repeat(8, minmax(0,1fr)); gap:48px 24px; padding:0; }
  .card{ grid-column:span 4; }
  .cap{ grid-template-rows:auto auto auto auto 1fr; }
  .cap-link{ grid-row:5; align-self:end; }
  .showcase-foot{ flex-direction:row; align-items:center; justify-content:space-between; }
}
@media (min-width:1024px){
  .showcase-list{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .card.md{ grid-column:span 3; }
  .card.lg{ grid-column:span 6; }
  .card.lg .cap-name{ font-size:17px; }
  .showcase-foot{ margin-top:40px; }
}
/* grandes cartes : nom à gauche, statut à droite, sur la même ligne */
@container (min-width:30rem){
  .cap-name{ grid-column:1; grid-row:1; }
  .cap-status{ grid-column:2; grid-row:1; margin-top:0; align-self:baseline; justify-self:end; }
  .cap-meta{ grid-row:2; }
  .cap .badges{ grid-row:3; }
  .cap-link{ grid-row:5; }
}
/* survol discret : le cadre se lève à peine, la capture grossit très légèrement */
@media (hover:hover) and (pointer:fine){
  .card .screen{ transition:transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
  .card .view img{ transition:transform 700ms var(--ease-out); }
  .card:hover .screen, .card:has(.cap-link:focus-visible) .screen{ transform:translateY(-4px); }
  .card:hover .view img, .card:has(.cap-link:focus-visible) .view img{ transform:scale(1.03); }
}
.wrap-bleed{ width:100%; }
@media (min-width:768px){ .wrap-bleed{ width:min(var(--container), 100% - 2 * var(--page-x)); margin-inline:auto; } }

/* ---------- Démo métier : ordinateur + téléphone (composant de ③, dessiné avec les jetons de ②) ---------- */
.demo{ display:grid; gap:20px; }
.chips-wrap{ position:relative; min-width:0; }
.chips{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:var(--page-x); scrollbar-width:none;
  margin-inline:calc(var(--page-x) * -1); padding:2px var(--page-x);
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  position:relative; flex:none; display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0 16px; border:0; border-radius:var(--radius);
  background:var(--c-paper); color:var(--text); box-shadow:inset 0 0 0 1px var(--rule-strong);
  font-size:15px; font-weight:500; cursor:pointer; scroll-snap-align:start; -webkit-tap-highlight-color:transparent;
  transition:background-color 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.chip .idx{ display:none; font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; color:var(--text-3); }
.chip:hover{ box-shadow:inset 0 0 0 1px var(--c-ink); }
.chip[aria-selected="true"]{ background:var(--c-ink); color:var(--c-cream); box-shadow:none; }
.chip:active{ transform:translateY(1px); }
.chips-wrap::after{
  content:""; position:absolute; top:0; bottom:0; right:calc(var(--page-x) * -1); width:32px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--c-paper)); transition:opacity 160ms linear;
}
.chips-wrap.is-end::after{ opacity:0; }
html:not(.js) .chips-wrap{ display:none; }
html:not(.js) .stage{ grid-column:1 / -1; }
.stage{ min-width:0; }
.panel:focus-visible{ outline-offset:6px; }
.duo{ position:relative; width:100%; max-width:840px; margin-bottom:56px; }
.duo .phone{
  position:absolute; z-index:2; right:8px; bottom:-40px; width:min(34%, 170px);
  border:3px solid var(--c-ink); border-radius:var(--radius); overflow:hidden; aspect-ratio:390/844; background:var(--surface-2);
  box-shadow:0 30px 50px -24px rgba(12,10,8,.45);
}
.phone img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.legend{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px 24px; align-items:baseline; }
.legend-name{ font-size:17px; line-height:1.3; font-weight:500; letter-spacing:-.005em; }
.legend-meta{ font-size:var(--t-small); line-height:1.5; color:var(--text-2); }
.legend-tags{ display:grid; justify-items:start; gap:2px; margin-top:6px; font-family:var(--f-mono); font-size:12px; line-height:1.5; color:var(--text-2); }
.legend .tlink{ margin-top:4px; }
.scene-more{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:0 32px; margin-top:16px; }
.ambient{
  display:none; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font-weight:500; font-size:15px; -webkit-tap-highlight-color:transparent;
}
.js .demo.has-tall .ambient{ display:inline-flex; }
.ambient .i{ width:16px; height:16px; }
.ambient .i-play, .ambient[aria-pressed="true"] .i-pause{ display:none; }
.ambient[aria-pressed="true"] .i-play{ display:block; }
/* défilement lent de la page entière (transform seul, sur le compositeur) : la course est posée par le script en pourcentage de l'image */
.tall{
  position:absolute; left:0; top:0; width:100%; height:auto; opacity:0; pointer-events:none; will-change:transform;
  transition:opacity 600ms var(--ease-out);
  animation:tall-y var(--dur, 40s) ease-in-out infinite alternate;
}
.tall.on{ opacity:1; }
.demo.is-paused .tall, .demo.is-offscreen .tall{ animation-play-state:paused; }
@keyframes tall-y{
  0%, 6%{ transform:translate3d(0,0,0); }
  94%, 100%{ transform:translate3d(0, calc(var(--k, 0) * -100%), 0); }
}
@media (min-width:768px){
  .legend{ grid-template-columns:minmax(0,1fr) auto; }
  .legend-tags{ grid-column:2; grid-row:1; justify-self:end; justify-items:end; margin-top:0; text-align:right; }
  .legend .tlink{ grid-column:2; grid-row:2; justify-self:end; margin-top:0; }
  .scene-more{ justify-content:flex-end; }
  .duo{ margin-bottom:64px; }
  .duo .phone{ right:-12px; bottom:-48px; width:min(26%, 190px); }
}
@media (min-width:1024px){
  .demo{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:start; }
  .chips-wrap{ grid-column:1 / span 3; }
  .chips-wrap::after{ display:none; }
  .chips{ flex-direction:column; gap:0; overflow:visible; margin:0; padding:0; border-bottom:1px solid var(--rule-strong); }
  .chip{
    min-height:64px; padding:0 8px 0 24px; border-radius:0; background:transparent; box-shadow:none; border-top:1px solid var(--rule-strong);
    font-size:var(--t-lede); letter-spacing:-.005em; color:var(--text-2); justify-content:flex-start;
  }
  .chip .idx{ display:inline; }
  .chip:hover{ box-shadow:none; color:var(--text); }
  .chip[aria-selected="true"]{ background:transparent; color:var(--text); }
  .chip::before{
    content:""; position:absolute; left:0; top:16px; bottom:16px; width:4px; background:var(--accent); box-shadow:0 0 0 1px var(--c-ink);
    transform:scaleY(0); transform-origin:50% 100%; transition:transform 320ms var(--ease-out);
  }
  .chip[aria-selected="true"]::before{ transform:scaleY(1); }
  .stage{ grid-column:4 / -1; }
}

/* ---------- Bandeau défilant : CSS pur (le bouton pause pose seulement une classe) ---------- */
.marquee{ position:relative; padding:clamp(32px, 4.4vw, 64px) 0; overflow:hidden; }
.mq-rows{ display:grid; gap:clamp(12px, 1.6vw, 24px); }
.mq-row{ display:flex; width:max-content; padding-inline:var(--page-x); }
.mq-group{ display:flex; flex:none; align-items:center; }
.mq-item{ display:flex; align-items:center; white-space:nowrap; font-size:clamp(2.25rem, 1rem + 5.4vw, 5.75rem); line-height:1.1; letter-spacing:-.04em; font-weight:500; }
.mq-item::after{ content:""; flex:none; width:.2em; height:.2em; margin-inline:.42em; background:var(--accent); box-shadow:0 0 0 max(1.5px, .025em) var(--c-ink); }
.mq-sm .mq-item{ font-family:var(--f-mono); font-weight:500; font-size:clamp(.875rem, .6rem + 1.1vw, 1.5rem); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); }
.mq-sm .mq-item::after{ width:.36em; height:.36em; margin-inline:1.1em; }
/* sans mouvement (ou sans script) : une seule ligne par rangée, qui s'estompe à droite */
.mq-group + .mq-group{ display:none; }
.mq-row{ width:auto; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, #000 86%, transparent); mask-image:linear-gradient(90deg, #000 86%, transparent); }
.mq-row:not(.mq-sm) .mq-item{ font-size:clamp(1.5rem, 1rem + 2.2vw, 3rem); }
@media (prefers-reduced-motion:no-preference){
  .js .mq-rows{
    -webkit-mask-image:linear-gradient(270deg, transparent calc(var(--page-x) + 56px), #000 calc(var(--page-x) + 128px));
    mask-image:linear-gradient(270deg, transparent calc(var(--page-x) + 56px), #000 calc(var(--page-x) + 128px));
  }
  .js .mq-group + .mq-group{ display:flex; }
  .js .mq-row{ width:max-content; padding-inline:0; overflow:visible; -webkit-mask-image:none; mask-image:none; will-change:transform; animation:mq-l 90s linear infinite; }
  .js .mq-row:not(.mq-sm) .mq-item{ font-size:clamp(2.25rem, 1rem + 5.4vw, 5.75rem); }
  .js .mq-row.mq-sm{ animation-name:mq-r; animation-duration:110s; }
  .js .mq-pause{ display:flex; right:var(--page-x); bottom:auto; top:calc(50% - 22px); }
  .marquee.is-paused .mq-row, .marquee.is-offscreen .mq-row{ animation-play-state:paused; }
}
@keyframes mq-l{ to{ transform:translate3d(-50%,0,0); } }
@keyframes mq-r{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

/* ---------- Le constat (court) ---------- */
.problem .kicker{ margin-bottom:16px; }
.problem .h-h2{ max-width:18em; }
.facts-3{ margin-top:32px; }
.fact3{ display:grid; grid-template-columns:24px 1fr; gap:16px; padding:20px 0; border-top:1px solid var(--rule-strong); align-items:start; }
.fact3:last-child{ border-bottom:1px solid var(--rule-strong); }
.fact3 .i{ width:24px; height:24px; margin-top:2px; }
.fact3 p{ font-size:var(--t-body); }
@media (min-width:1024px){
  .facts-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:48px; }
  .fact3{ display:flex; flex-direction:column; gap:16px; padding:28px 32px 28px 0; border-bottom:1px solid var(--rule-strong); }
  .fact3 + .fact3{ padding-left:32px; border-left:1px solid var(--rule-strong); }
}
/* ---------- Résultats : preuves chiffrées (NOUVEAU). Aucune valeur n'existe encore : chaque case est un emplacement « à fournir », jamais un nombre inventé ---------- */
.res-grid{ display:grid; gap:24px; }
.res-card{
  position:relative; isolation:isolate; display:flex; flex-direction:column; padding:16px; border-radius:var(--radius);
  background:var(--c-cream); box-shadow:var(--edge); transition:box-shadow 400ms var(--ease-out), translate 500ms var(--ease-out);
}
.res-card .view{ aspect-ratio:16/10; }
.res-card .view > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 0%); }
.res-head{ margin-top:20px; display:grid; justify-items:start; gap:2px; }
.res-head .badges{ margin-top:10px; }
.res-name{ font-size:clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height:1.15; letter-spacing:-.025em; font-weight:500; }
.res-meta{ margin-top:2px; font-size:var(--t-small); line-height:1.5; color:var(--text-2); }
.res-metrics{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:20px 0 0; }
.m{
  display:flex; flex-direction:column; gap:6px; min-height:108px; min-width:0; margin:0; padding:14px 10px 12px; border-radius:var(--radius);
  border:1px dashed rgba(12,10,8,.42);
  background:repeating-linear-gradient(135deg, rgba(12,10,8,.05) 0 1px, transparent 1px 9px);
  container-type:inline-size;
}
.m--lead{ min-height:132px; }
.m--lead .m-v{ font-size:clamp(2rem, 18cqi, 2.75rem); }
.m-l{ margin:0; font-family:var(--f-mono); font-weight:500; font-size:11px; line-height:1.35; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); }
.m-d{ display:flex; flex-direction:column; justify-content:flex-end; gap:8px; flex:1; margin:0; }
/* le tiret est dessiné (jamais un caractère) : une case vide, pas une valeur */
.m-v{ display:flex; align-items:center; gap:.22em; flex:0 0 auto; margin-top:auto; min-width:0; font-size:clamp(1.65rem, 16cqi, 2.35rem); line-height:1; letter-spacing:-.03em; white-space:nowrap; }
.m-v .i{ width:.7em; height:.7em; padding:.1em; flex:none; align-self:center; box-sizing:border-box; background:var(--c-highlighter); border-radius:5px; stroke-width:2.25; }
.m-v::before{ content:""; display:block; width:.55em; height:max(3px, .075em); background:var(--text-3); border-radius:1px; }
.m-v:not(:empty)::before{ display:none; }
.m--set{ border-style:solid; border-color:var(--rule-strong); background:none; }
.m-n{ display:flex; align-items:flex-start; gap:6px; font-family:var(--f-mono); font-size:11px; line-height:1.35; letter-spacing:.01em; color:var(--text-2); }
.m--src{ border-style:solid; border-color:var(--rule-strong); background:none; }
.m-t{ flex:1; display:flex; align-items:center; font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height:1.15; letter-spacing:-.02em; font-weight:500; color:var(--text); }
.res-link{ margin-top:8px; }
.res-link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.res-card:has(.res-link:focus-visible){ outline:2px solid var(--c-ink); outline-offset:3px; }
.res-link:focus-visible{ outline:none; }
@media (hover:hover) and (pointer:fine){
  .res-card:hover{ box-shadow:0 0 0 1px var(--c-ink), 0 40px 70px -40px rgba(12,10,8,.4); translate:0 -4px; }
  .res-card .view > img{ transition:scale 900ms var(--ease-out); }
  .res-card:hover .view > img{ scale:1.045; }
}
.res-agency{ display:grid; gap:20px; margin-top:56px; padding-top:32px; border-top:1px solid var(--rule-strong); }
.res-agency{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  margin-top:56px; padding-top:28px; border-top:1px solid var(--rule-strong);
}
.res-agency .kicker{ white-space:nowrap; }
.res-pledge{
  display:grid; gap:4px; min-width:0; width:100%;
  container-type:inline-size;
}
.res-pledge-l{
  margin:0; font-family:var(--f-mono); font-weight:500; font-size:11px; line-height:1.35;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
}
.res-pledge-t{
  margin:0; font-size:clamp(2.15rem, 1.2rem + 2.4vw, 3.25rem); line-height:.95;
  letter-spacing:-.04em; font-weight:500; white-space:nowrap;
}
.res-pledge-n{ margin:0; color:var(--text-2); line-height:1.35; }
.res-pledge-n .nw{ white-space:nowrap; font-size:clamp(.75rem, 3.5cqi, 1.0625rem); }
.res-agency .btn{ flex:none; }
.res-foot{ margin-top:18px; max-width:none; }
.kicker-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.badge-todo{ box-shadow:none; border:1px dashed rgba(12,10,8,.5); background:transparent; color:var(--text); }
@media (min-width:600px) and (max-width:1023px){
  .res-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; padding:20px; align-items:start; }
  .res-shot{ grid-column:1; grid-row:1; }
  .res-head{ grid-column:1; grid-row:2; }
  .res-metrics{ grid-column:2; grid-row:1 / span 2; grid-template-rows:minmax(0,1.3fr) minmax(0,1fr); margin-top:0; height:100%; }
  .res-link{ grid-column:1 / -1; grid-row:3; justify-self:start; }
}
@media (min-width:1024px){
  .res-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; }
}
@media (min-width:1100px){
  .res-agency{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr) auto;
    column-gap:clamp(24px, 3vw, 48px);
    align-items:center;
  }
  .res-pledge{
    width:auto;
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-areas:"lab title" "lab note";
    column-gap:28px;
    row-gap:2px;
    align-items:center;
  }
  .res-pledge-l{ grid-area:lab; }
  .res-pledge-t{ grid-area:title; }
  .res-pledge-n{ grid-area:note; }
  .res-pledge-n .nw{ font-size:var(--t-body); }
}

/* ---------- Ce que vous recevez : grille bento (composant de ③, dessiné avec les jetons de ②) ---------- */
.bento{ display:grid; gap:16px; }
.tile{
  position:relative; display:flex; flex-direction:column; min-width:0; padding:24px; border-radius:var(--radius); overflow:hidden;
  background:var(--surface); box-shadow:var(--edge-hi), var(--shadow-card), var(--edge);
}
.tile .h-h3{ margin-bottom:8px; }
.tile p{ color:var(--text-2); max-width:44ch; }
.tile--accent{ background:var(--accent); box-shadow:0 0 0 1px var(--c-ink), var(--shadow-card); }
.tile--accent .kicker, .tile--accent p{ color:var(--c-ink); }
.big-days{ margin:auto 0 16px; font-size:clamp(3rem, 1.4rem + 5.6vw, 5.25rem); line-height:.95; letter-spacing:-.045em; font-weight:500; }
.big-days span{ display:block; }
.t5{ container-type:inline-size; }
.t5 .kicker{ margin-bottom:12px; }
.t5 .big-days{ font-size:min(5.25rem, 21cqw); }
.t1-visual{ margin:24px -24px -24px 0; }
.t1-cap{ margin-bottom:8px; font-family:var(--f-mono); font-size:12px; line-height:1.4; color:var(--text-2); }
.t1-crop{ position:relative; aspect-ratio:700/460; overflow:hidden; border-top-left-radius:var(--radius); background:var(--c-paper); box-shadow:0 0 0 1px var(--rule); }
.t1-crop img{ position:absolute; width:205.7%; max-width:none; left:-17.1%; top:-95.7%; height:auto; }
.t2-phone{ margin-top:auto; padding-top:24px; }
.t2 .phone{ width:232px; max-width:100%; margin:auto auto -48px; border:3px solid var(--c-ink); border-radius:var(--radius); overflow:hidden; aspect-ratio:390/844; background:var(--surface-2); box-shadow:0 30px 50px -24px rgba(12,10,8,.45); }
.t3-visual{ margin-top:auto; padding-top:24px; }
.addr-big{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:0 20px; border-radius:var(--radius); background:var(--c-cream);
  box-shadow:inset 0 0 0 1px var(--rule-strong); font-family:var(--f-mono); font-weight:500; font-size:clamp(1rem, .9rem + .5vw, 1.25rem);
  pointer-events:none; user-select:none;
}
.addr-big .i{ width:20px; height:20px; }
.t4-visual{ margin-top:auto; padding-top:24px; }
.t4{ container-type:inline-size; }
.tile .langs-big{
  display:flex; gap:.35em; overflow:clip; padding-block:.06em .12em; margin:0 0 12px; font-size:min(3.75rem, 17cqw); line-height:1; letter-spacing:-.045em; font-weight:500; color:var(--text);
}
.tile .t4-link{ display:flex; align-items:center; min-height:44px; margin:0; color:var(--text); font-size:var(--t-small); font-weight:500; }
.ulink{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; text-decoration-color:rgba(12,10,8,.55); }
.ulink:hover{ text-decoration-thickness:2px; text-decoration-color:var(--c-ink); }
.bento-extra{
  display:grid; gap:16px; align-items:center; margin-top:16px; padding:24px; border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--edge-hi), var(--edge);
}
.bento-extra p{ color:var(--text-2); }
.bento-extra .h-h3{ margin-bottom:4px; }
@media (max-width:767px){ .bento-extra .btn{ width:100%; } }
@media (min-width:768px){
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
  .t1, .t4{ grid-column:1 / -1; }
  .t2{ grid-row:span 2; }
  .t1-visual{ width:62%; margin-left:auto; }
  .bento-extra{ grid-template-columns:1fr auto; gap:32px; margin-top:24px; padding:24px 28px; }
}
@media (min-width:768px) and (max-width:1023px){
  .t1-visual{ width:50%; }
}
@media (min-width:1024px){
  .bento{ grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:minmax(300px,auto) minmax(300px,auto); }
  .t1{ grid-column:1 / 6; grid-row:1; }
  .t5{ grid-column:6 / 9; grid-row:1; }
  .t2{ grid-column:9 / 13; grid-row:1 / 3; }
  .t3{ grid-column:1 / 6; grid-row:2; }
  .t4{ grid-column:6 / 9; grid-row:2; }
  .tile{ padding:28px; }
  .t1{ justify-content:space-between; }
  .t1-visual{ width:64%; margin-right:-28px; margin-bottom:-28px; }
}

/* ---------- Méthode : trois étapes simples, sans épinglage ---------- */
.steps{ display:grid; gap:40px; }
.step{ position:relative; display:flex; flex-direction:column; padding-top:24px; border-top:1px solid var(--rule-strong); }
.step::before{ content:""; position:absolute; left:0; top:-2px; width:48px; height:3px; background:var(--accent); box-shadow:0 0 0 1px var(--c-ink); }
.step-n{ display:block; font-size:clamp(2.5rem, 2rem + 2vw, 4rem); line-height:1; font-weight:500; letter-spacing:-.04em; }
.step .h-h3{ margin-top:16px; font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
.step > p{ margin-top:12px; margin-bottom:24px; color:var(--text-2); max-width:44ch; }
.mini{ margin-top:auto; padding:16px 18px 14px; border-radius:var(--radius); background:var(--c-cream); box-shadow:inset 0 0 0 1px var(--rule); }
.mini .kicker{ margin-bottom:10px; font-size:11px; letter-spacing:.1em; }
.mini-row{ display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-family:var(--f-mono); font-size:12px; line-height:1.4; color:var(--text); }
.mini-row span:last-child{ color:var(--text-2); white-space:nowrap; text-align:right; }
.mini-row .i{ width:14px; height:14px; }
.mini-row .mini-lbl{ display:inline-flex; align-items:center; gap:8px; color:var(--text); white-space:normal; text-align:left; }
.mini-rule{ margin:12px 0 0; border:0; border-top:1px dashed var(--rule-strong); }
.mini-pay{ display:flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--f-mono); font-size:12px; line-height:1.4; color:var(--text); }
.mini-pay .i{ width:14px; height:14px; }
.mini-pay i{ width:8px; height:8px; background:var(--accent); box-shadow:0 0 0 1px var(--c-ink); display:block; }
.mini-addr{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:var(--radius); background:var(--c-paper); box-shadow:inset 0 0 0 1px var(--rule-strong); font-family:var(--f-mono); font-size:14px; font-weight:500; }
.mini-addr .i{ width:14px; height:14px; }
.mini--addr{ padding-block:14px; }
.method-foot, .price-foot{ margin-top:48px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.method-foot p, .price-foot p{ color:var(--text-2); font-size:var(--t-small); }
@media (min-width:768px){
  .steps{ grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:32px; row-gap:0; }
  .method-foot, .price-foot{ flex-direction:row; align-items:center; gap:24px; }
}
@supports (grid-template-rows:subgrid){
  @media (min-width:768px){
    .steps{ grid-template-rows:auto auto auto 1fr; }
    .step{ display:grid; grid-template-rows:subgrid; grid-row:span 4; }
    .step .mini{ margin-top:0; align-self:start; }
  }
}
/* ---------- Tarifs : un résumé court (le détail des formules et le calcul du total sont sur la page de commande) ---------- */
.price-was{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:24px; }
.price-was s{
  font-size:var(--t-lede); line-height:1.4; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap;
  text-decoration-line:line-through; text-decoration-thickness:1.5px; text-decoration-color:var(--c-ink);
}
.pline{ display:grid; gap:10px; padding:24px 0; border-top:1px solid var(--rule-strong); }
.pline:last-child{ border-bottom:1px solid var(--rule-strong); }
.pline dd{ margin:0; min-width:0; }
.pl-main{ font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height:1.15; letter-spacing:-.03em; font-weight:500; font-variant-numeric:tabular-nums; text-wrap:balance; }
.pl-note{ margin-top:8px; max-width:62ch; font-size:var(--t-small); line-height:1.55; color:var(--text-2); }
@media (min-width:1024px){
  .pline{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:baseline; padding:32px 0; }
  .pline dt{ grid-column:1 / span 4; }
  .pline dd{ grid-column:5 / -1; }
}
/* ---------- Pour qui : une seule liste à filets ---------- */
.who{ display:grid; gap:56px; }
.who-col > .h-h3{ margin-bottom:16px; }
.who-list li:last-child{ border-bottom:1px solid var(--rule-strong); }
.who-list li{ display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:24px; align-items:center; min-height:64px; padding:16px 0; border-top:1px solid var(--rule-strong); }
.who-list .i{ width:24px; height:24px; justify-self:end; }
.who-list .no{ color:var(--text-2); }
.who-list p{ font-size:var(--t-lede); line-height:1.4; letter-spacing:-.005em; }
.who-list.is-no p{ color:var(--text-2); }
@supports (grid-template-rows:subgrid){
  @media (min-width:1024px){
    /* les trois filets de chaque colonne tombent aux mêmes hauteurs : titre + 3 lignes partagés entre les deux colonnes */
    .who{ grid-template-rows:auto repeat(3, auto); row-gap:0; }
    .who-col{ display:grid; grid-template-rows:subgrid; grid-row:span 4; }
    .who-col > .who-list{ display:grid; grid-template-rows:subgrid; grid-row:2 / span 3; }
  }
}
.keep{ margin-top:64px; padding-top:32px; border-top:1px solid var(--rule-strong); display:flex; flex-direction:column; gap:16px; }
.keep-t{ font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.625rem); line-height:1.12; letter-spacing:-.03em; font-weight:500; text-wrap:balance; }
@media (min-width:1024px){
  .who-list li{ min-height:72px; padding:20px 0; }
  .keep{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:start; padding-top:40px; }
  .keep .kicker{ grid-column:1 / span 4; padding-top:.9em; }
  .keep-t{ grid-column:5 / -1; }
}
/* ---------- FAQ ---------- */
.faq-grid{ display:block; }
.faq-side .kicker{ margin-bottom:16px; }
.faq-side .lede{ margin-top:20px; }
.faq-list{ margin-top:32px; }
.qa{ border-top:1px solid var(--rule-strong); }
.qa:last-child{ border-bottom:1px solid var(--rule-strong); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:64px; padding:20px 0; cursor:pointer; list-style:none;
  font-size:clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); line-height:1.35; font-weight:500; letter-spacing:-.01em; color:var(--text); -webkit-tap-highlight-color:transparent;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:focus-visible{ outline-offset:4px; }
.qa summary .i{ width:20px; height:20px; color:var(--text-2); transition:transform 320ms var(--ease-out), color 200ms linear; }
.qa summary:hover .i{ color:var(--text); }
.qa[open]:not(.is-closing) summary .i{ transform:rotate(45deg); }
.qa .ans{ overflow:hidden; max-width:62ch; }
.qa .ans p{ color:var(--text-2); }
.qa .ans p + p{ margin-top:12px; }
.qa .ans p:last-child{ padding-bottom:24px; }
@media (min-width:1024px){
  .faq-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:start; }
  .faq-side{ grid-column:1 / span 4; position:sticky; top:calc(var(--header-h) + 32px); }
  .faq-list{ grid-column:5 / -1; margin-top:0; }
}
/* ---------- Appel final : aplat jaune révélé par un cercle qui s'ouvre ---------- */
.final{ position:relative; isolation:isolate; overflow:hidden; color:var(--c-ink); }
.final-bg{ position:absolute; inset:0; z-index:-1; background:var(--accent); pointer-events:none; }
.final .kicker{ margin-bottom:24px; color:rgba(12,10,8,.74); }
.final .h-display{ font-size:clamp(2.625rem, 1rem + 5.4vw, 5rem); line-height:1; text-align:left; text-wrap:auto; }
.final .ln{ display:block; text-wrap:balance; }
/* sur le jaune, la bande devient encre (texte jaune sur encre : 16:1) */
.final .lit::after{ background:linear-gradient(var(--c-ink), var(--c-ink)) 0 .09em / 100% 1em no-repeat; color:var(--accent); }
.final-side{ margin-top:32px; }
.final-price{ display:flex; align-items:baseline; gap:12px; margin:0; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.045em; line-height:.95; }
.final-price .amount{ font-size:clamp(3.5rem, 1rem + 6.667vw, 7rem); }
.final-price .mask, .price-big .mask{ display:inline-block; overflow:clip; padding-block:.08em; margin-block:-.08em; }
.final-price .mask > span, .price-big .mask > span{ display:block; }
.final-price .ht{ font-size:var(--t-h3); font-weight:500; letter-spacing:-.015em; color:rgba(12,10,8,.74); }
.final-side .lede{ margin-top:16px; max-width:26em; color:rgba(12,10,8,.8); }
.final-bar{
  width:100%; height:72px; margin-top:40px; padding:0 20px; justify-content:space-between; gap:24px;
  font-size:clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing:-.02em;
  background:var(--c-ink); color:var(--c-cream);
}
.final-bar .btn-label{ width:100%; justify-content:space-between; }
.final-bar .i{ width:28px; height:28px; color:var(--accent); }
.final-bar::before{ background:var(--c-cream); transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 520ms var(--ease-out); }
.final-bar:hover, .final-bar:focus-visible{ color:var(--c-cream); }
.final-bar:hover::before, .final-bar:focus-visible::before{ transform:none; clip-path:inset(0 0 0 0); }
.final-bar .btn-label--on{ justify-content:space-between; color:var(--c-ink); }
.final-bar .btn-label--on .i{ color:var(--c-ink); }
.final-bar:hover .i, .final-bar:focus-visible .i{ transform:translateX(10px); }
.final-bar::after{ box-shadow:0 18px 40px -12px rgba(12,10,8,.5); }
.final-bar:focus-visible{ outline-color:var(--c-ink); outline-offset:4px; }
.final-after{ margin-top:24px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.final .mono-note{ color:rgba(12,10,8,.78); }
.final .hl::before{ background:var(--c-cream); }
@media (min-width:1024px){
  .final-inner{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; }
  .final .kicker{ grid-column:1 / -1; }
  .final .h-display{ grid-column:1 / span 8; font-size:min(5rem, 6.2vw); }
  .final-side{ grid-column:9 / -1; align-self:end; margin-top:0; }
  .final-bar{ grid-column:1 / -1; height:88px; margin-top:64px; padding:0 40px; }
  .final-after{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:8px 40px; }
}
/* ---------- Pied de page : rideau. La « feuille » (colonnes, mentions) remonte et découvre l'écran du mot-symbole, collé au bas de la vue ---------- */
.site-footer{ position:relative; z-index:0; background:var(--c-cream); }
.foot-sheet{ position:relative; z-index:1; background:var(--c-cream); padding-bottom:clamp(40px, 5vw, 72px); }
.foot-stage{ position:relative; z-index:0; overflow:clip; background:var(--c-cream); padding-top:clamp(32px, 5vw, 72px); padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
.foot-stage-in{ will-change:auto; }
.foot-top{ display:flex; justify-content:flex-start; }
.foot-screen{ position:relative; margin:0; border-radius:var(--radius); overflow:hidden; background:#e2dfd9; box-shadow:var(--shadow-screen); container-type:inline-size; }
.fs-bar{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; height:36px; padding:0 14px; background:rgba(255,255,255,.7); box-shadow:inset 0 -1px 0 var(--rule); }
.fs-bar .addr{ color:var(--text-2); }
.fs-status{ position:absolute; right:14px; top:0; bottom:0; display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; color:var(--text); }
.fs-status i{ width:8px; height:8px; background:var(--accent); box-shadow:0 0 0 1px var(--c-ink); display:block; }
/* hauteur posée directement (aspect-ratio + min-height élargissait la vue au-delà du cadre sur mobile) */
.fs-view{ position:relative; display:grid; place-items:center; width:100%; height:max(150px, 38.1cqw); overflow:hidden; }
.fs-on{ position:absolute; inset:0; z-index:0; background:var(--c-paper); }
.fs-glow{ position:absolute; z-index:1; left:-10%; top:-13%; width:120%; height:130%; background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(245,255,120,.55) 38%, rgba(228,242,34,.16) 66%, rgba(228,242,34,0) 100%); pointer-events:none; }
.fs-edge{ position:absolute; z-index:2; left:0; right:0; top:0; height:3px; background:var(--accent); box-shadow:0 0 0 1px var(--c-ink); opacity:0; pointer-events:none; }
/* taille calée sur la largeur du cadre : 24 px de marge de chaque côté au minimum (mot-symbole = 6,46 em de large) */
.wordmark{ position:relative; z-index:2; margin:0; font-size:min(13cqw, calc((100cqw - 48px) / 6.5)); line-height:1; letter-spacing:-.055em; font-weight:500; white-space:nowrap; }
.wm{ display:inline-flex; align-items:center; }
.wm-w{ position:relative; display:inline-flex; overflow:clip; padding:.06em .04em .12em; margin:-.06em -.04em -.12em; }
.wm-w i{ display:inline-block; font-style:normal; }
.wm-space{ display:inline-block; width:.26em; }
.wm-bar{ position:absolute; z-index:-1; left:-.02em; right:-.02em; top:.13em; bottom:.13em; background:var(--accent); transform-origin:0 50%; }
.wm-website{ isolation:isolate; padding-inline:.09em; margin-inline:-.05em; }
.foot-band{ border-block:1px solid var(--rule-strong); }
.foot-grid{ display:grid; }
.foot-cell{ position:relative; padding:32px 0 24px; }
.foot-cell + .foot-cell{ border-top:1px solid var(--rule-strong); }
.foot-cell h2{ font-family:var(--f-mono); font-weight:500; font-size:12px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); margin-bottom:12px; }
.foot-cell a{ display:flex; width:fit-content; align-items:center; min-height:44px; font-size:15px; text-decoration:none; }
.foot-cell::before, .foot-cell::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  background:
    linear-gradient(var(--rule-strong), var(--rule-strong)) center / 9px 1px no-repeat,
    linear-gradient(var(--rule-strong), var(--rule-strong)) center / 1px 9px no-repeat;
}
.foot-cell::before{ top:-5px; left:-5px; }
.foot-cell::after{ display:none; }
.foot-legal{ padding-top:32px; display:grid; gap:24px; }
.foot-brand{ display:grid; gap:12px; justify-items:start; }
.foot-brand a{ display:inline-flex; align-items:center; min-height:44px; }
.foot-brand img{ width:136px; height:28px; }
.foot-brand p{ max-width:34ch; color:var(--text-2); font-size:var(--t-small); }
.legal{ display:flex; flex-wrap:wrap; gap:0 24px; }
.legal a{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--text-2); text-decoration:none; transition:color 200ms linear; }
.legal a:hover{ color:var(--text); }
.foot-id{ display:grid; gap:4px; font-size:var(--t-small); color:var(--text-2); }
.foot-id a{ text-decoration:none; }
.foot-fine{ display:grid; gap:8px; font-size:var(--t-small); color:var(--text-2); }
.foot-rows{ display:grid; gap:24px; padding-top:24px; border-top:1px solid var(--rule-strong); }
.totop{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:0; border-radius:var(--radius); cursor:pointer;
  background:var(--c-paper); color:var(--text); font-size:15px; font-weight:500; box-shadow:inset 0 0 0 1px var(--rule-strong);
  position:relative; isolation:isolate; overflow:hidden; -webkit-tap-highlight-color:transparent; transition:color 240ms var(--ease-out);
}
.totop::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--accent); transform:scaleY(0); transform-origin:50% 100%; transition:transform 480ms var(--ease-out); }
.totop:hover::before, .totop:focus-visible::before{ transform:scaleY(1); }
.totop .i{ width:18px; height:18px; transition:transform 300ms var(--ease-out); }
.totop:hover .i{ transform:translateY(-3px); }
@media (min-width:768px){
  .foot-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .foot-cell{ padding:40px 32px 32px; }
  .foot-cell:first-child{ padding-left:0; }
  .foot-cell + .foot-cell{ border-top:0; border-left:1px solid var(--rule-strong); }
  .foot-cell:first-child::before{ display:none; }
  .foot-cell + .foot-cell::after{ display:block; bottom:-5px; left:-5px; }
}
@media (min-width:1024px){
  .foot-legal{ grid-template-columns:1fr auto; align-items:center; padding-top:40px; }
  .foot-brand{ grid-auto-flow:column; align-items:center; justify-items:start; gap:24px; }
  .foot-rows{ grid-column:1 / -1; grid-template-columns:1fr 1fr; align-items:start; }
  .foot-top{ grid-column:1 / -1; justify-content:flex-end; }
  .foot-fine{ justify-self:end; max-width:60ch; }
}

/* téléphone : la scène du pied de page prend 62 % de la hauteur de l'écran ; l'écran qui s'allume la remplit et le mot-symbole passe sur deux lignes (« Direct » / « Website » surligné), grand et centré */
@media (max-width:767px){
  .foot-stage-in{ display:flex; flex-direction:column; min-height:62svh; }
  .foot-stage-in > .wrap{ flex:1; display:flex; flex-direction:column; }
  .foot-screen{ flex:1; display:flex; flex-direction:column; }
  .fs-view{ flex:1; height:auto; min-height:220px; }
  .wordmark{ font-size:clamp(3.5rem, 19vw, 5.5rem); line-height:.95; }
  .wm{ flex-direction:column; align-items:center; }
  .wm-space{ display:none; }
}

@media (prefers-reduced-motion:no-preference){
  .js:not(.no-gsap) .foot-stage{ position:sticky; bottom:0; }
  .js:not(.no-gsap) .foot-sheet{ box-shadow:0 50px 80px -40px rgba(12,10,8,.22); }
}
/* ---------- Badge de comparaison (maquette) ---------- */
.cmp{
  position:fixed; z-index:70; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:16px; min-height:44px; padding:0 14px; border-radius:var(--radius);
  background:var(--c-ink); color:var(--c-cream); font-size:13px; font-weight:500; line-height:1.3; white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(12,10,8,.5); transition:opacity 250ms linear;
}
.cmp.is-away{ opacity:0; pointer-events:none; }
.cmp a{ color:var(--c-cream); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; display:inline-flex; align-items:center; min-height:44px; }
.cmp a:focus-visible{ outline-color:var(--accent); }
/* pastille compacte (« ② Scène · comparer », 44 px de haut) sur mobile et sur les écrans de peu de hauteur : elle ne cache plus la ligne de faits du hero */
@media (max-width:599px), (max-height:800px){
  .cmp{ gap:10px; padding:0 12px; font-size:12px; max-width:calc(100vw - 32px); }
  .cmp-l, .cmp-more{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
/* menu ouvert : le badge ne recouvre pas « Commander mon site » */
body.menu-open .cmp, body:has(.menu[open]) .cmp{ display:none; }
/* ---------- Mouvement : états de départ (avec JS, GSAP chargé, mouvement autorisé uniquement) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Arrivée du hero : CSS pur, indépendante de GSAP et des bibliothèques (le H1 est visible dès le premier affichage) */
  .js .site-header{ animation:hdr-in 900ms var(--ease-out) 100ms backwards; }
  .js .hero .kicker{ animation:fade-up 800ms var(--ease-out) 50ms backwards; }
  .js .hero h1 .ln > span{ animation:ln-up 900ms var(--ease-out) calc(50ms + var(--i, 0) * 90ms) backwards; }
  .js .hero .lede{ animation:fade-up 900ms var(--ease-out) 300ms backwards; }
  .js .hero .actions{ animation:fade-up 900ms var(--ease-out) 550ms backwards; }
  .js .hero-facts{ animation:fade-up 900ms var(--ease-out) 650ms backwards; }
  /* apparitions simples, jouées une seule fois : le titre final est le seul texte découpé en lignes */
  .js:not(.no-gsap) [data-a="lines"]{ visibility:hidden; }
  .js:not(.no-gsap) [data-a="up"]{ opacity:0; transform:translateY(28px); }
  .js:not(.no-gsap) [data-a="stagger"] > *{ opacity:0; transform:translateY(44px); }
  /* vitrine : fondu et petite montée, une seule fois */
  .js:not(.no-gsap) .showcase-list > *{ opacity:0; transform:translateY(24px); }
  .js:not(.no-gsap) .wall-card{ opacity:0; }
  .js:not(.no-gsap) .hero-glow{ opacity:0; }
  .js:not(.no-gsap) .wall-pause{ opacity:0; }
  .js:not(.no-gsap) .lit{ --p:0; }
  /* bande du titre final : --p est portée par le titre (SplitText remplace le span .lit à chaque découpage), la bande en hérite */
  .js:not(.no-gsap) #titre-final{ --p:0; }
  .js:not(.no-gsap) .final .lit{ --p:inherit; }
  .js:not(.no-gsap) .final-bg{ clip-path:circle(0% at 50% 18%); }
  /* RÈGLE PRIX : aucun état de départ caché ou faux pour les montants. 690 € HT et 1 380 € HT barré sont l'état par défaut ; l'animation (voir « Prix ») ne part qu'au moment où le prix est à l'écran */
  .js:not(.no-gsap) .wm-w i{ transform:translateY(112%); }
  .js:not(.no-gsap) .wm-bar{ transform:scaleX(0); }
  .js:not(.no-gsap) .fs-on{ clip-path:inset(0 0 100% 0); }
  .js:not(.no-gsap) .fs-glow{ opacity:0; }
  .js:not(.no-gsap) .fs-status{ opacity:0; }
}

@keyframes ln-up{ from{ transform:translateY(110%); } }
@keyframes fade-up{ from{ opacity:0; transform:translateY(20px); } }
@keyframes hdr-in{ from{ transform:translateY(-101%); } }

/* ---------- Mouvement réduit : tout est posé, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  html, html.no-js, html.no-gsap{ scroll-behavior:auto; }
  .wall-track, .tall, .mq-row{ animation:none !important; }
  .wall-pause, .mq-pause, .ambient{ display:none !important; }
  .card .view img, .res-card .view > img{ transition:none !important; transform:none !important; scale:none !important; }
  .card .screen{ transition:none !important; transform:none !important; }
  .res-card{ transition:none !important; translate:none !important; }
  .step::before, .chip::before, .qa summary .i, .btn, .btn::before, .btn::after, .btn .i, .btn-label--on, .tlink .i, .hl::before, .totop, .totop::before, .site-header, .site-header::before, .site-header::after{ transition-duration:0s !important; transition-delay:0s !important; }
  .link:hover::after{ animation:none; }
  .progress{ display:none; }
}

#methode{--header-h:72px;--section-y:4rem;}
#methode .container{ width:min(var(--container), 100% - 2 * var(--page-x)); margin-inline:auto; }
#methode .lede{ font-size:var(--t-lede); line-height:1.5; max-width:64ch; }
#methode .amount{ font-variant-numeric:tabular-nums; }
#methode .skip{ position:fixed; left:16px; top:-120px; z-index:100; background:var(--accent); color:var(--c-ink); font-weight:700; padding:12px 16px; border-radius:var(--radius); text-decoration:none; }
#methode .skip:focus{ top:12px; }
#methode .kicker{ display:flex; align-items:center; gap:10px; font-size:var(--t-caption); line-height:1.4; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
#methode .kicker::before{ content:""; width:8px; height:8px; background:currentColor; flex:none; }
#methode .btn--primary{ background:var(--accent); color:var(--c-ink); }
#methode .nw{ white-space:nowrap; }
#methode .browser{ position:relative; background:var(--c-paper); border:1px solid var(--filet); border-radius:var(--radius); overflow:hidden; }
#methode .browser__bar{ height:32px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; border-bottom:1px solid var(--filet); background:var(--c-paper); color:var(--text-2); font-size:12px; line-height:1; font-weight:500; white-space:nowrap; overflow:hidden; }
#methode .browser__bar span{ overflow:hidden; text-overflow:ellipsis; }
#methode .browser__view{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--c-cream); }
#methode .browser__view img{ position:absolute; left:0; top:0; width:100%; height:auto; }
#methode .ref .browser__view img{ height:100%; object-fit:cover; }
#methode .phone{ background:var(--c-ink); border-radius:var(--radius); padding:6px; }
#methode .phone__screen{ position:relative; border-radius:calc(var(--radius) - 6px); overflow:hidden; aspect-ratio:390/844; background:var(--c-cream); }
#methode .phone__screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
#methode .section--alt{ background:var(--bg-alt); }
#methode .section-head{ margin-bottom:24px; max-width:900px; }
#methode .section-head h2{ margin-top:12px; }
#methode .section-head .lede{ margin-top:16px; color:var(--text-2); }
@media (min-width:1024px){#methode .section-head{ margin-bottom:40px; }}
#methode .section-head--tight .lede{ max-width:56ch; }
#methode .hero__text .kicker{ margin-bottom:16px; }
#methode .hero .lede{ margin-bottom:28px; color:var(--c-ink); }
#methode html:not(.motion) .panel .phone{ transition:transform 320ms var(--ease-soft); }
#methode .panel.is-in .phone{ transform:translateY(12px); }
#methode .duo .phone{ position:absolute; right:-24px; bottom:-40px; width:30%; min-width:120px; box-shadow:var(--shadow-float); }
@media (max-width:767px){#methode .hero__text .kicker{ order:1; }
#methode .hero .lede{ order:3; margin-bottom:20px; line-height:1.45; }
#methode .duo .browser{ position:absolute; left:0; top:0; width:100%; }
#methode .duo .phone{ right:0; bottom:0; width:46%; }}
#methode .card .browser__bar{ height:24px; }
#methode .card .phone{ position:absolute; right:12px; bottom:-16px; width:22%; }
#methode .card--wide .phone{ width:18%; }
#methode .bento .tile--accent p, #methode .bento .tile--accent .kicker{ color:var(--c-ink); }
#methode .t5 .kicker{ margin-bottom:12px; }
#methode .t5 p:not(.kicker){ margin-top:auto; }
#methode .t5 p:not(.kicker){ font-size:var(--t-body); font-weight:500; }
#methode .t2 .phone{ width:232px; max-width:100%; margin:auto auto -48px; }
#methode .steps{ --gap:24px; display:grid; gap:40px var(--gap); }
#methode .step{ position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:20px; }
#methode .step__num{ grid-row:1 / span 3; width:48px; height:48px; display:grid; place-items:center; background:var(--c-ink); color:var(--c-cream); border-radius:var(--radius); font:700 20px/1 var(--f-display); position:relative; z-index:1; }
#methode .step__body{ grid-column:2; }
#methode .step h3{ margin-bottom:8px; padding-top:10px; }
#methode .step p{ color:var(--c-ink); }
#methode .mini{ grid-column:2; margin-top:24px; background:var(--c-paper); border:1px solid var(--filet); border-radius:var(--radius); padding:16px; font-size:14px; line-height:1.4; font-weight:500; }
#methode .mini__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 12px; padding:9px 0; border-top:1px solid var(--filet); }
#methode .mini__row:first-child{ border-top:0; padding-top:0; }
#methode .mini__row:last-child{ padding-bottom:0; }
#methode .mini__row--l{ flex-wrap:nowrap; justify-content:flex-start; }
#methode .mini__row .i{ width:16px; height:16px; }
#methode .mini__row .amount{ font-weight:700; white-space:nowrap; }
#methode .mini__row--addr{ gap:10px; justify-content:flex-start; }
#methode .mini__row--addr strong{ font-weight:600; }
#methode .mini__sq{ width:8px; height:8px; background:var(--accent); flex:none; }
#methode .step:not(:last-child)::before{ content:""; position:absolute; left:23.5px; top:24px; width:1px; height:calc(100% + 40px); background:var(--c-ink); }
#methode .steps-foot{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin-top:40px; }
#methode .steps-foot p{ font-size:var(--t-small); font-weight:500; color:var(--text-2); }
@media (max-width:767px){#methode .steps-foot .btn{ width:100%; }}
@media (min-width:768px){#methode .steps{ grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto auto 1fr; gap:0 var(--gap); }
#methode .step{ grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 3; }
#methode .step__num{ grid-row:auto; margin-bottom:24px; }
#methode .step__body{ grid-column:1; }
#methode .step h3{ padding-top:0; }
#methode .mini{ grid-column:1; align-self:start; margin-top:24px; }
#methode .step:not(:last-child)::before{ left:24px; top:23.5px; width:calc(100% + var(--gap)); height:1px; }
#methode .steps-foot{ flex-direction:row; align-items:center; gap:24px; margin-top:56px; }}
#methode .pricing__intro .lede{ margin-top:16px; color:var(--text-2); }
#methode .pricing__intro .lede + .lede{ margin-top:8px; color:var(--c-ink); font-weight:600; }
#methode .step-no{ display:inline-block; margin-right:12px; font:700 var(--t-caption)/1 var(--f-text); letter-spacing:.06em; color:var(--text-2); vertical-align:.16em; font-variant-numeric:tabular-nums; }
#methode .ref .browser__bar{ height:28px; }
#methode .ref .browser__view{ aspect-ratio:16/10; container-type:normal; }
@media (min-width:1024px){#methode .keep .kicker{ grid-column:1 / 5; }}
#methode .faq__head .kicker{ margin-bottom:12px; }
#methode .faq__head .lede{ margin-top:16px; color:var(--text-2); }
#methode .kicker::before{ transform:scale(var(--ks,1)); }
#methode html.motion.pre .hero .kicker{ --ks:0; }
#methode html.motion.pre .hero .kicker, #methode html.motion.pre .hero .lede, #methode html.motion.pre .hero .cta-row .btn, #methode html.motion.pre .hero .facts li, #methode html.motion.pre .hero .micro, #methode html.motion.pre .hero .scene__label, #methode html.motion.pre .hero .chip, #methode html.motion.pre .hero .scene-more, #methode html.motion.pre .hero .preview-note{ opacity:0; }
#methode .facts .i, #methode .mini__row .i{ stroke-dasharray:24; stroke-dashoffset:var(--dr,0); }
@media (hover:hover) and (pointer:fine){#methode html.motion .hero .duo .browser{ translate:calc(var(--mx) * 14px) calc(var(--my) * 10px); }
#methode html.motion .hero .duo .phone{ translate:calc(var(--mx) * 28px) calc(var(--my) * 18px); }}
#methode .browser__view img.tall, #methode .phone__screen img.tall{ position:absolute; left:0; top:0; width:100%; height:auto; opacity:0; will-change:transform; }
#methode html.motion .section--alt{ background:transparent; }
#methode html.motion [data-c] .browser__view{ clip-path:inset(0 0 100% 0); }
#methode html.motion [data-c] .browser__view img{ transform:scale(1.12); }
#methode html.motion .split{ opacity:0; }
#methode .split-mask, #methode .split .ln-mask{ padding-block:.06em .14em; margin-block:-.06em -.14em; }
#methode .card .browser__view img, #methode .ref .browser__view img{ transition:scale 1100ms var(--ease-expo); }
#methode .card:hover .browser__view img, #methode .ref:hover .browser__view img{ scale:1.045; }
@media (max-width:767px){#methode .card .phone{ width:24%; }}
@media (min-width:1024px) and (min-height:600px){#methode html.motion .vitrine__head .kicker{ grid-column:1 / -1; }
#methode html.motion .vitrine__head .lede{ grid-column:2; margin-top:0; }}
#methode .step:not(:last-child)::before{ transform:scaleY(var(--ln,1)); transform-origin:50% 0; }
@media (min-width:768px){#methode .step:not(:last-child)::before{ transform:scaleX(var(--ln,1)); transform-origin:0 50%; }}
#methode .step__num{ transition:background-color 300ms var(--ease-soft), color 300ms var(--ease-soft); }
#methode .step.is-active .step__num{ background:var(--accent); color:var(--c-ink); }
#methode .stage{ display:none; }
@media (min-width:1024px) and (min-height:700px){#methode html.motion .methode{ padding-top:0; padding-bottom:calc(var(--section-y) * .4); }
#methode html.motion .methode__pin{ display:flex; flex-direction:column; justify-content:flex-start; padding-block:calc(var(--header-h) + clamp(8px, 4vh, 54px)) 40px; }
#methode html.motion .methode .steps-foot{ margin-top:40px; }
#methode html.motion .methode .section-head{ margin-bottom:clamp(12px, 2.6vh, 24px); }
#methode html.motion .methode .steps{ gap:clamp(20px, 3.5vh, 32px) 0; }
#methode html.motion .methode__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; }
#methode html.motion .steps{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; gap:32px 0; }
#methode html.motion .step{ grid-template-columns:48px minmax(0,1fr); grid-template-rows:none; grid-row:auto; }
#methode html.motion .step h3, #methode html.motion .step p{ transition:color 300ms var(--ease-soft); }
#methode html.motion .step:not(.is-active) h3, #methode html.motion .step:not(.is-active) p{ color:var(--text-2); }
#methode html.motion .step:not(.is-active) .step__num{ background:var(--c-ash); }
#methode html.motion .step__num{ transition:color 300ms var(--ease-soft), background-color 0ms; }
#methode html.motion .step__num{ grid-row:1 / span 3; margin-bottom:0; }
#methode html.motion .step__body{ grid-column:2; }
#methode html.motion .step h3{ padding-top:10px; }
#methode html.motion .step .mini{ display:none; }
#methode html.motion .step:not(:last-child)::before{ left:23.5px; top:24px; width:1px; height:calc(100% + 32px); transform:scaleY(var(--ln,1)); transform-origin:50% 0; }
#methode html.motion .stage{ display:block; position:relative; padding:0 26px 40px 0; }}
#methode .stage__browser{ position:relative; }
#methode .stage .browser__bar{ position:relative; }
#methode .stage__url{ display:grid; justify-items:center; overflow:hidden; }
#methode .stage__url > span{ grid-area:1 / 1; }
#methode .stage__live{ position:absolute; right:12px; top:50%; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--c-ink); translate:0 -50%; }
#methode .stage__live::before{ content:""; width:8px; height:8px; background:var(--accent); }
#methode .stage__view{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#f3eee5; }
#methode .stage__view .sk{ position:absolute; background:rgba(12,10,8,.09); border-radius:6px; }
#methode .stage__view .pc{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
#methode .pc--head{ clip-path:inset(0 0 90.1% 0); }
#methode .pc--rail{ clip-path:inset(16.5% 85.4% 0 11.4%); }
#methode .pc--title{ clip-path:inset(16% 41.5% 45.5% 15.5%); }
#methode .pc--text{ clip-path:inset(55% 44.5% 17% 15.5%); }
#methode .pc--photo{ clip-path:inset(16.5% 0 4.8% 60.7%); }
#methode .sk--head{ left:0; top:0; width:100%; height:9.9%; border-radius:0; }
#methode .sk--logo{ left:10.7%; top:3.4%; width:12%; height:3.2%; background:rgba(12,10,8,.15) !important; }
#methode .sk--t1{ left:16%; top:21%; width:38%; height:6.4%; }
#methode .sk--t2{ left:16%; top:30%; width:42%; height:6.4%; }
#methode .sk--t3{ left:16%; top:39%; width:30%; height:6.4%; }
#methode .sk--p1{ left:16%; top:56.5%; width:36%; height:2.6%; }
#methode .sk--p2{ left:16%; top:61.5%; width:32%; height:2.6%; }
#methode .sk--btn{ left:16%; top:69%; width:20%; height:5.6%; }
#methode .sk--photo{ left:60.8%; top:17%; width:39.2%; height:75%; border-radius:0; }
#methode .stage__order{ position:absolute; z-index:3; left:50%; top:52%; width:min(62%, 340px); translate:-50% -50%; box-shadow:var(--shadow-float); }
#methode .stage__checks{ position:absolute; z-index:3; left:-14px; bottom:0; width:min(74%, 390px); display:grid; grid-auto-flow:column; grid-template-rows:repeat(3, auto); grid-template-columns:1fr 1fr; gap:0 20px; box-shadow:var(--shadow-float); }
#methode .stage__checks .mini__row{ border-top:0; padding:5px 0; }
#methode .stage__checks .mini__row:first-child{ padding-top:0; }
#methode .stage__checks .mini__row:last-child{ padding-bottom:0; }
#methode .stage__phone{ position:absolute; z-index:3; right:0; bottom:0; width:24%; box-shadow:var(--shadow-float); }
#methode .t4 .link .nw{ padding-bottom:.12em; background:linear-gradient(var(--ul-hover),var(--ul-hover)) 0 calc(100% - .04em)/0 2px no-repeat, linear-gradient(var(--ul),var(--ul)) 0 calc(100% - .04em)/100% 1px no-repeat; transition:background-size 520ms var(--ease-expo); }
#methode .t4 .link:hover .nw{ background-size:100% 2px, 100% 1px; }
#methode .final-wrap > .container{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){#methode .btn::before, #methode .link, #methode .t4 .link .nw, #methode .go__label, #methode .ambient__label, #methode .nav a::after, #methode .card .browser__view img, #methode .ref .browser__view img, #methode .choice, #methode .choice input[type="radio"], #methode .choice input[type="radio"]::after, #methode .site-footer li a::before, #methode .site-footer__legal a::before, #methode .totop::before{ transition:none; }
#methode .card:hover .browser__view img, #methode .ref:hover .browser__view img{ scale:1; }}
@media (prefers-reduced-motion:reduce){#methode .panel .phone, #methode .panel.is-in .phone{ transition:none; transform:none; }}
#methode .step{padding-top:0;border-top:0}#methode .step::before{box-shadow:none}#methode .step:last-child::before{content:none;width:0;height:0;background:none}#methode .step>p{margin-bottom:0}#methode .steps-foot .btn{min-height:56px;padding:0 22px;font-weight:500}

#contact.ask{scroll-margin-top:calc(var(--header-h) + 8px);position:relative;background:var(--c-cream);color:var(--c-ink)}
#contact .ask-form{display:grid;gap:18px;max-width:44rem;margin-top:32px}
#contact .ask-form label{display:grid;gap:8px;font-size:var(--t-small);color:var(--text-2)}
#contact .ask-form input,#contact .ask-form textarea{width:100%;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--c-paper);color:var(--c-ink);font:inherit;font-size:22px;line-height:1.35;padding:18px 20px}
#contact .ask-form textarea{min-height:220px;resize:vertical}
#contact .ask-form input:focus-visible,#contact .ask-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#contact .ask-form .btn{justify-self:start;margin-top:4px}
#contact .ask-form .btn:disabled{opacity:.6}
#contact .ask-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#contact .ask-form[hidden],#contact .ask-wait[hidden],#contact .ask-done[hidden]{display:none !important}
#contact .ask-stage{min-height:18rem}
#contact .form-status{margin:0;font-size:var(--t-lede);color:var(--c-ink)}
#contact .form-status:empty{display:none}
#contact .send-bar{height:4px;width:100%;max-width:44rem;margin-top:16px;background:var(--rule);border-radius:6px;overflow:hidden}
#contact .send-bar span{display:block;height:100%;width:0;background:var(--accent)}
#contact .ask-wait.is-on .send-bar span{width:100%;transition:width 1.1s var(--ease-out)}
#contact .ask-done-title{position:relative;display:inline-block;margin:0 0 12px;font-size:clamp(2.5rem,8vw,64px);line-height:1.05;letter-spacing:-.03em;color:var(--c-ink)}
#contact .mark-bar{position:absolute;left:-.06em;right:-.06em;bottom:.08em;height:.34em;background:var(--accent);z-index:-1;transform-origin:left center}
#contact .ask-done:not([hidden]) .mark-bar{animation:ask-draw .7s var(--ease-out) both}
@keyframes ask-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#contact .ask-done-sub{margin:0;font-size:var(--t-lede);color:var(--text-2)}
#contact .ask-mail{display:inline-block;margin-top:28px;font-size:clamp(1.65rem,5vw,40px);line-height:1.05;color:var(--c-ink);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px}
@media (hover:hover) and (pointer:fine){#contact .ask-mail:hover{text-decoration-color:var(--accent)}}
@media (prefers-reduced-motion:reduce){
  #contact .ask-wait.is-on .send-bar span{transition:none;width:100%}
  #contact .ask-done:not([hidden]) .mark-bar{animation:none;transform:none}
}