/* hookd editing : page de vente (hookd 2.0). Projet neuf, sans les codes du site hookd.
   Typo (14/10) : Satoshi pour tout le site (Regular, Medium, Bold, Black ; licence Fontshare, usage commercial permis),
   Black pour « hookd editing » et les liens du hero ; Geist Mono (SIL OFL) pour les étiquettes et timecodes.
   Formes (14/10) : boutons et étiquettes à angles nets (6px, étiquettes en Geist Mono avec filet), barre de navigation
   à 12px, cartes à 18px. Les liens du hero sont du texte nu, soulignés d'une barre au survol.
   Couleurs : toutes en variables OKLCH ci-dessous, jamais en dur dans les règles. Un seul accent : le rose (palette hookd). */

/* Satoshi : quatre graisses. Les graisses intermédiaires du CSS tombent sur la plus proche (600 -> Bold, 800 -> Black). */
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Regular.woff2") format("woff2");font-weight:100 400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Bold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Black.woff2") format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/fonts/GeistMono.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* Palette hookd (13/10 au soir), avec la mascotte rose. Les cinq couleurs de base, puis les teintes de l'accent.
     Sombre #2B121E · Foncé #77224A · Accent #C11565 · Clair #FAEBF2 · Blanc #FFFFFF
     Accent 80 % #CD4484 · 60 % #DA73A3 · 40 % #E6A1C1 · 20 % #F3D0E0 */
  --sombre:oklch(22.4% 0.045 351.2);
  --fonce:oklch(39.8% 0.124 355.4);
  --accent:oklch(53.1% 0.205 1);
  --accent-80:oklch(59.7% 0.182 355.3);
  --accent-60:oklch(68.6% 0.139 352.1);
  --accent-40:oklch(78.5% 0.091 350);
  --accent-20:oklch(89.2% 0.044 348.7);
  --clair:oklch(95.4% 0.019 347.4);
  --blanc:oklch(100% 0 0);

  /* Rôles. Fond Clair, cartes Blanc, texte Sombre. Texte blanc sur l'accent : 5,9:1 ; accent sur Clair : 5,1:1. */
  --bg:var(--clair);
  --surface:var(--blanc);
  --grey-soft:oklch(92.6% 0.026 348);
  --ink:var(--sombre);
  --ink-2:oklch(34% 0.06 352);
  --muted:oklch(45.5% 0.05 352);
  --on-accent:var(--blanc);   /* texte sur l'accent */
  --on-ink:var(--blanc);      /* texte sur un fond couleur d'encre (bouton sombre) */
  --line:oklch(90.6% 0.03 348);
  --line-2:oklch(84.6% 0.05 349);
  --accent-hover:oklch(46.5% 0.18 358);
  --accent-deep:var(--fonce);
  --accent-soft:var(--accent-20);
  --accent-wash:var(--clair);
  --accent-line:var(--accent-40);
  --mascot:oklch(58.1% 0.217 0.9);   /* le rose de la mascotte, mesuré sur ses images (#D72273) */
  --marker:oklch(58.1% 0.217 0.9 / .75);   /* surligneur sous « Automatise » */
  --accent-text:var(--accent);   /* texte couleur d'accent (liens, prix, étiquettes) */
  --spot:var(--surface);         /* halo derrière la mascotte */
  --mascot-shadow:oklch(22.4% 0.045 351.2 / .3);   /* ombre au sol : les poses sont détourées sans ombre */
  --aurora-o:1;   /* intensité de l'aurore (canvas .aurora), la même dans les deux thèmes : main.js la dessine en néon */
  /* Faces du bloc « Ton ordinateur suffit ? » : le dessus est le Foncé éclairci (plus clair au fond), le côté l'assombrit. */
  --lid-back:oklch(52% 0.13 356);
  --lid-front:oklch(46% 0.13 356);
  --lid-shadow:oklch(18% 0.06 352 / .55);
  --side-top:oklch(31% 0.1 356);   /* côté gauche du bloc : le Foncé assombri */
  --side-bottom:oklch(27% 0.09 356);
  /* Fond des sections sur fond de carte (« Comment ça marche », « À lire avant d'acheter ») : fondu vers le fond de page
     sur leurs bords, pour qu'il n'y ait pas de frontière nette entre sections. */
  --fade-surface:linear-gradient(to bottom,var(--bg),var(--surface) 160px,var(--surface) calc(100% - 160px),var(--bg));
  /* États (orangés, pour ne pas se confondre avec l'accent) */
  --ok:oklch(51% 0.115 157);
  --no:oklch(53% 0.16 42);
  --no-soft:oklch(94.5% 0.025 50);
  --no-hatch:oklch(53% 0.16 42 / .12);
  /* Verdicts du vérificateur, lisibles sur l'accent */
  --verdict-ok:oklch(87% 0.15 155);
  --verdict-mid:oklch(89% 0.14 95);
  --verdict-no:oklch(84% 0.11 60);
  /* Transparences */
  --on-accent-muted:oklch(100% 0 0 / .8);
  --on-accent-line:oklch(100% 0 0 / .25);
  --glass:oklch(100% 0 0 / .8);
  --nav-glass:oklch(95.4% 0.019 347.4 / .72);   /* le fond de page (Clair), translucide : en-tête après défilement */
  --shade:oklch(22.4% 0.045 351.2 / .45);
  /* Ombres, teintées de Sombre */
  --shadow-sm:0 1px 2px oklch(22.4% 0.045 351.2 / .06),0 8px 24px -12px oklch(22.4% 0.045 351.2 / .18);
  --shadow:0 1px 2px oklch(22.4% 0.045 351.2 / .06),0 12px 40px -12px oklch(22.4% 0.045 351.2 / .2);
  --shadow-accent:0 6px 18px -6px oklch(53.1% 0.205 1 / .45),inset 0 1px 0 oklch(100% 0 0 / .16);
  --shadow-reel:0 40px 80px -30px oklch(39.8% 0.124 355.4 / .45);
  --ring-accent:oklch(53.1% 0.205 1 / .14);
  /* Formes, mesures, mouvement */
  --radius:18px;
  --frame:1240px;                       /* largeur max du contenu (les fonds, eux, vont d'un bord à l'autre) */
  --gutter:clamp(16px,4vw,48px);        /* marge latérale minimale */
  --pad:max(var(--gutter),calc((100vw - var(--frame)) / 2 + var(--gutter)));
  --nav-h:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.22s;
  --font:"Satoshi",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;
  font-family:var(--font);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.mono{font-family:var(--font-mono);font-size:.78em;letter-spacing:0}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:6px;text-decoration:none}
.skip:focus{top:12px}

/* Couches : nav 50, skip 100. */

/* ---------- Cadre : deux filets verticaux qui tiennent la page ---------- */
/* 14/10 : plus de colonne encadrée de deux filets (elle laissait deux bandes vides sur les grands écrans). */
.frame{position:relative;background:var(--bg)}
/* Aurore (14/10, choisie par Milo) : un ruban de lumière aux couleurs des « bandes roses » qui serpente sur toute la page.
   main.js le dessine une fois pour toute la page, puis chaque section a un canvas .aurora, sous son contenu (jamais sur la
   mascotte ni sur le texte), qui recopie le morceau du ruban tombant chez elle, en coordonnées de page : le ruban reste
   continu, et un dépliant qui s'ouvre fait glisser le contenu sur le ruban sans l'étirer (20/10). Tous les
   canvas glissent ensemble de gauche à droite. La section crée son propre contexte d'empilement (isolation) : le canvas, en
   z-index -1, se peint au-dessus du fond de la section mais sous son contenu ; overflow:clip le coupe (et laisse marcher
   position:sticky). Plus de filet entre sections : il coupait le ruban. */
main>section{position:relative;isolation:isolate;overflow:clip}
.aurora{position:absolute;left:-15%;top:-200px;width:130%;max-width:none;height:calc(100% + 400px);   /* 200px : MARGIN de main.js */
  z-index:-1;pointer-events:none;opacity:var(--aurora-o);animation:aurora 36s ease-in-out infinite alternate}
@keyframes aurora{
  0%{transform:translate3d(-7%,0,0)}
  50%{transform:translate3d(3%,0,0)}
  100%{transform:translate3d(8%,0,0)}
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;white-space:nowrap;
  height:50px;padding:0 24px;border-radius:6px;border:1px solid transparent;
  font:600 16px/1 var(--font);text-decoration:none;cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-dark{background:var(--ink);color:var(--on-ink)}
.btn-dark:hover{background:var(--ink-2)}
.btn-light{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-light:hover{border-color:var(--ink)}
.btn-sm{height:40px;padding:0 18px;font-size:14.5px}
.btn-lg{height:58px;padding:0 32px;font-size:18px}
.btn-block{width:100%}

/* ---------- En-tête : bandeau pleine largeur, fixé ----------
   Même couleur que le fond de page (14/10, avant : bordeaux, puis noir), séparé de la page par un filet.
   Dès qu'on défile, main.js pose .is-scrolled : le même fond devient translucide, flouté, sans changer de teinte. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--nav-h) + 16px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);
  background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease);
}
.nav.is-scrolled{
  background:var(--nav-glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.nav .brand{color:inherit}
.nav-end{display:flex;align-items:center;gap:10px}
/* Menu à ancres (20/10) : trois entrées au milieu, « Tarifs » en bouton à droite. */
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-left:auto;margin-right:clamp(8px,1.6vw,20px)}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color var(--dur) var(--ease)}
.nav-links a:hover{color:var(--ink)}
/* Bouton « Menu » : téléphone seulement (voir Responsive). */
.nav-toggle{display:none;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:6px;
  background:transparent;color:inherit;font:600 14.5px/1 var(--font);cursor:pointer}
.nav-toggle-bars{position:relative;width:14px;height:10px;border-block:1.8px solid currentColor;transition:border-color var(--dur) var(--ease)}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.8px;margin-top:-.9px;background:currentColor;transition:transform .3s var(--ease)}
.nav.is-open .nav-toggle-bars{border-color:transparent}
.nav.is-open .nav-toggle-bars::before{transform:rotate(45deg)}
.nav.is-open .nav-toggle-bars::after{transform:rotate(-45deg)}
.brand{font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none;display:inline-flex;gap:.28em;align-items:baseline}
/* L'emblème hookd (trois modules en escalier) : un masque, il prend la couleur du texte (blanc sur sombre, encre sur clair). */
.brand-mark{
  flex:none;align-self:center;width:1.15em;height:1.15em;margin-right:.3em;background:currentColor;
  -webkit-mask:url("assets/logo-hookd.png") center/contain no-repeat;mask:url("assets/logo-hookd.png") center/contain no-repeat;
}
.brand span{color:var(--accent-text);font-weight:500}

/* ---------- Titres ---------- */
.eyebrow{display:inline-block;margin-bottom:18px;padding:5px 9px;border:1px solid var(--line-2);border-radius:6px;color:var(--accent-text);font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-.035em;font-weight:600;max-width:24ch;text-wrap:balance}

/* ---------- 1. Hero : la mascotte entre deux liens ----------
   La mascotte au centre ; « Notre outil » à gauche, « Tarifs » à droite. Elle pointe vers la bulle survolée.
   Les poses sont détourées par BiRefNet (fond transparent, sans ombre) : elles vont sur n'importe quel fond. */
.hero{
  position:relative;overflow:hidden;min-height:max(640px,min(100dvh,980px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.6vh,16px);
  padding:calc(var(--nav-h) + clamp(40px,7vh,72px)) var(--pad) clamp(56px,12vh,128px);text-align:center;
  background:radial-gradient(34% 42% at 50% 60%,var(--spot) 0%,transparent 78%),var(--bg);
}
.hero-title{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.12;letter-spacing:-.045em;font-weight:600;max-width:23ch;text-wrap:balance;margin-bottom:clamp(20px,5vh,56px)}
.hero-title .w{display:inline-block;white-space:pre}
.hero-title .accent{color:var(--mascot)}
/* Titre (14/10) : « Automatise » seul en haut, grand, Black, couleur du texte, avec un coup de surligneur rose mascotte
   derrière le bas du mot (version 4 du comparateur) ; puis « tes montages avec hookd editing. » à taille normale,
   le lien en Medium, « hookd editing » en Black.
   Les traits d'expression autour de « hookd editing » ont été retirés le 14/10 (trop de rose avec la mascotte). */
.hero-title .w:has(.mot){display:block;margin-bottom:.12em}
.hero-title .mot{
  font-size:1.4em;font-weight:900;color:var(--ink);padding:0 .08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 62%,var(--marker) 62%,var(--marker) 90%,transparent 90%);
}
.hero-title .lien{font-weight:500;letter-spacing:-.03em;color:var(--ink-2)}
/* « hookd editing » : un seul mot pour la découpe (espace insécable). */
.hero-title .hl{display:inline-block;font-weight:900;letter-spacing:-.035em;color:var(--ink)}

.hero-stage{
  --m:clamp(260px,min(40vw,50dvh),500px);
  width:100%;max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr) var(--m) minmax(0,1fr);
}
/* La mascotte ignore la souris : quand elle pointe à gauche et se penche, son carré transparent recouvrait la fin de
   « Notre outil » (survol perdu, mascotte qui saccade). Les liens passent aussi au-dessus d'elle. */
.mascot{position:relative;width:var(--m);aspect-ratio:1;pointer-events:none}
.mascot-rig,.mascot-body,.pose{position:absolute;inset:0}
.pose{visibility:hidden}
.pose-idle{visibility:visible}
.pose>*{position:absolute;display:block;user-select:none;pointer-events:none}
/* Ombre au sol dessinée par la page (les images n'en ont pas) : plus marquée sur le thème sombre. */
.mascot-shadow{position:absolute;left:25%;width:50%;top:76.5%;height:8.5%;border-radius:50%;background:radial-gradient(closest-side,var(--mascot-shadow),transparent)}
.pose .full{inset:0;width:100%;height:100%}

/* Les deux liens, à hauteur du bras qui pointe (inspiration Nike). Au survol, un contour rose fait le tour de la tuile
   en partant du coin côté mascotte, et la mascotte pointe vers le lien. */
.hero-link-wrap{position:relative;z-index:1;display:flex;align-items:flex-start;padding-top:calc(var(--m) * .3)}
.hero-link-wrap-l{justify-content:flex-end;margin-right:calc(var(--m) * -.04)}
.hero-link-wrap-r{justify-content:flex-start;margin-left:calc(var(--m) * -.04)}
/* 14/10 (version 4 du comparateur, choisie par Milo) : chaque lien est une tuile sombre à angles nets, le libellé en Black
   centré (sans flèche, retirée le 14/10) ; au survol, la tuile monte un peu et son contour s'éclaire. */
/* La tuile épouse son libellé (14/10 : avant, largeur fixe, trop de vide sur les côtés). */
.hero-link{
  position:relative;display:block;padding:16px 26px 18px;text-align:center;white-space:nowrap;
  color:var(--ink);text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  font-weight:900;letter-spacing:-.02em;line-height:1.1;font-size:clamp(22px,2.2vw,32px);   /* Satoshi Black, comme « hookd editing » */
  transition:transform .25s var(--ease);
}
.hero-link:hover,.hero-link:focus-visible{transform:translateY(-2px)}
.hero-link:focus-visible{outline-offset:6px}
/* Contour rose (14/10, choix de Milo, remplace la barre sous la tuile) : deux tracés SVG posés sur la bordure partent du
   milieu du bas, l'un par la gauche, l'autre par la droite, et se rejoignent au milieu du haut (tracés calculés par main.js
   selon la taille de la tuile ; pathLength 1 : chaque moitié vaut 1, le décalage passe de 1 à 0). Ils se défont dans
   l'autre sens quand la souris part. */
.hero-link-trace{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;overflow:visible;pointer-events:none}
.hero-link-trace path{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .6s var(--ease);
}
.hero-link:hover .hero-link-trace path,.hero-link:focus-visible .hero-link-trace path{stroke-dashoffset:0}
/* Sans survol (écran tactile) : le contour est là dès le départ, plus discret, pour signaler le lien. */
@media (hover:none){.hero-link-trace path{stroke-dashoffset:0;opacity:.55}}

/* ---------- 2. Comment ça marche : six étapes ----------
   20/10 : grille de 3 x 2, tout le texte visible (avant : sept étapes à déplier). */
.how{padding:clamp(72px,11vh,120px) var(--pad);background:var(--fade-surface)}
.how-steps{margin-top:clamp(32px,5vh,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,5vh,52px) clamp(20px,3vw,44px)}
/* Chaque étape : un trait, le numéro, le titre et l'explication. Le trait s'allume en rose au survol. */
.how-steps li{padding-top:18px;border-top:2px solid var(--line);transition:border-color .3s var(--ease)}
.how-steps li:hover{border-top-color:var(--accent)}
.how-n{display:block;color:var(--accent-text);font-weight:600;font-size:12.5px}
.how-steps h3{margin-top:10px;font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.015em}
.how-steps p{padding-top:8px;font-size:15.5px;color:var(--muted);max-width:36ch}

/* ---------- 3. Pourquoi (20/10) ----------
   Le titre et une phrase, puis la comparaison « À la main » / « Avec hookd editing » (la carte du kit cerclée de rose),
   puis trois raisons. Le chiffre à mesurer est marqué .is-todo (cadre en pointillés) tant qu'il n'est pas rempli. */
.why{padding:clamp(80px,12vh,136px) var(--pad)}
.why-lead{margin-top:20px;font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:60ch}
.why-compare{margin-top:clamp(36px,6vh,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.why-col{padding:clamp(24px,3vw,36px);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.why-col-kit{border:2px solid var(--fonce);box-shadow:var(--shadow-reel)}
.why-col-title{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.why-col-kit .why-col-title{color:var(--accent-text)}
.why-time{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.why-figure{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.why-figure.is-todo{align-self:flex-start;padding:4px 12px;border:1.5px dashed var(--line-2);border-radius:10px;color:var(--muted);font-size:clamp(1.6rem,2.6vw,2.2rem)}
.why-unit{font-size:15px;color:var(--muted)}
.why-list{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;counter-reset:why;font-size:15.5px;color:var(--ink-2)}
.why-list li{position:relative;padding-left:32px;counter-increment:why}
.why-list li::before{content:counter(why,decimal-leading-zero);position:absolute;left:0;top:.2em;font:600 12px/1.6 var(--font-mono);color:var(--muted)}
.why-col-kit .why-list li::before{color:var(--accent-text)}
.why-points{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.why-points li{padding-top:18px;border-top:2px solid var(--accent)}
.why-points h3{font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.015em}
.why-points p{margin-top:8px;font-size:15.5px;color:var(--muted);max-width:38ch}

/* ---------- 3. Exemples (brouillon) ---------- */
.examples{padding:clamp(64px,9vh,104px) var(--pad)}
/* Les vidéos des cinq testeurs (30/10 : la comparaison des deux kits est retirée). */
.ex-row{margin-top:36px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ex-slot{aspect-ratio:9/16;border-radius:14px;border:1.5px dashed var(--line-2);display:grid;place-items:center;color:var(--muted);background:var(--surface)}

/* ---------- 4. À lire avant d'acheter ---------- */
.avant{padding:clamp(88px,13vh,144px) var(--pad);background:var(--fade-surface)}
.avant-lead{margin-top:18px;font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:56ch}

.check{
  --sit:clamp(118px,11vw,150px);   /* taille de la mascotte assise dessus */
  /* Le bloc est une boîte vue de face, point de fuite en haut à gauche : on voit son dessus et son côté gauche, aux angles
     et arêtes arrondis. --lid : épaisseur visible du dessus (vers le haut) ; --side : du côté (vers la gauche). */
  --lid:clamp(10px,1.1vw,14px);
  --side:clamp(10px,1.2vw,16px);
  /* 20/10 : pleine largeur, en premier dans la section (avant : colonne collante à gauche des dépliants).
     Deux colonnes : la question et le bouton à gauche, le résultat à droite, sa place réservée dès le départ. */
  position:relative;margin-top:calc(clamp(36px,6vh,56px) + var(--sit) * .72);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:start;
  --r:14px;   /* arrondi des angles (face avant, et donc de toute la boîte) */
  padding:clamp(22px,2.6vw,30px);border-radius:var(--r);
  background:var(--fonce);color:var(--on-accent);
  /* Arêtes avant adoucies : un liseré clair en haut et à gauche, comme un léger biseau. */
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .16),inset 1px 0 0 oklch(100% 0 0 / .08),var(--shadow-reel);
}
/* Le dessus et le côté (14/10) : le bloc arrondi est « extrudé » vers le haut et la gauche par 16 fines copies décalées
   (ombres portées sans flou), ce qui garde les angles et les arêtes arrondis. Deux calques : ::before, le côté (sombre),
   sur toute l'épaisseur ; ::after, le dessus (clair), par-dessus, avec un masque en dégradé le long de la diagonale du
   coin haut gauche : la lumière passe à l'ombre en fondu, sans arête nette. Le masque est un grand carré centré sur le
   coin (mask-clip:no-clip, sinon il couperait tout ce qui dépasse de la boîte). Fond transparent : une ombre portée ne se
   dessine qu'à l'extérieur de la boîte, donc jamais sur la face avant. */
.check::before,.check::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
}
.check::before{
  box-shadow:
    calc(var(--side) * -0.0625) calc(var(--lid) * -0.0625) 0 color-mix(in oklch,var(--side-top) 6%,var(--side-bottom)),
    calc(var(--side) * -0.1250) calc(var(--lid) * -0.1250) 0 color-mix(in oklch,var(--side-top) 12%,var(--side-bottom)),
    calc(var(--side) * -0.1875) calc(var(--lid) * -0.1875) 0 color-mix(in oklch,var(--side-top) 19%,var(--side-bottom)),
    calc(var(--side) * -0.2500) calc(var(--lid) * -0.2500) 0 color-mix(in oklch,var(--side-top) 25%,var(--side-bottom)),
    calc(var(--side) * -0.3125) calc(var(--lid) * -0.3125) 0 color-mix(in oklch,var(--side-top) 31%,var(--side-bottom)),
    calc(var(--side) * -0.3750) calc(var(--lid) * -0.3750) 0 color-mix(in oklch,var(--side-top) 38%,var(--side-bottom)),
    calc(var(--side) * -0.4375) calc(var(--lid) * -0.4375) 0 color-mix(in oklch,var(--side-top) 44%,var(--side-bottom)),
    calc(var(--side) * -0.5000) calc(var(--lid) * -0.5000) 0 color-mix(in oklch,var(--side-top) 50%,var(--side-bottom)),
    calc(var(--side) * -0.5625) calc(var(--lid) * -0.5625) 0 color-mix(in oklch,var(--side-top) 56%,var(--side-bottom)),
    calc(var(--side) * -0.6250) calc(var(--lid) * -0.6250) 0 color-mix(in oklch,var(--side-top) 62%,var(--side-bottom)),
    calc(var(--side) * -0.6875) calc(var(--lid) * -0.6875) 0 color-mix(in oklch,var(--side-top) 69%,var(--side-bottom)),
    calc(var(--side) * -0.7500) calc(var(--lid) * -0.7500) 0 color-mix(in oklch,var(--side-top) 75%,var(--side-bottom)),
    calc(var(--side) * -0.8125) calc(var(--lid) * -0.8125) 0 color-mix(in oklch,var(--side-top) 81%,var(--side-bottom)),
    calc(var(--side) * -0.8750) calc(var(--lid) * -0.8750) 0 color-mix(in oklch,var(--side-top) 88%,var(--side-bottom)),
    calc(var(--side) * -0.9375) calc(var(--lid) * -0.9375) 0 color-mix(in oklch,var(--side-top) 94%,var(--side-bottom)),
    calc(var(--side) * -1.0000) calc(var(--lid) * -1.0000) 0 color-mix(in oklch,var(--side-top) 100%,var(--side-bottom));
}
.check::after{
  -webkit-mask:linear-gradient(45deg,transparent calc(50% - var(--r) * 1.4),#000 calc(50% + var(--r) * 1.4)) calc(var(--r) * .3 - 1500px) calc(var(--r) * .3 - 1500px)/3000px 3000px no-repeat;
  mask:linear-gradient(45deg,transparent calc(50% - var(--r) * 1.4),#000 calc(50% + var(--r) * 1.4)) calc(var(--r) * .3 - 1500px) calc(var(--r) * .3 - 1500px)/3000px 3000px no-repeat;
  -webkit-mask-clip:no-clip;mask-clip:no-clip;
  box-shadow:
    calc(var(--side) * -0.0625) calc(var(--lid) * -0.0625) 0 color-mix(in oklch,var(--lid-back) 6%,var(--lid-front)),
    calc(var(--side) * -0.1250) calc(var(--lid) * -0.1250) 0 color-mix(in oklch,var(--lid-back) 12%,var(--lid-front)),
    calc(var(--side) * -0.1875) calc(var(--lid) * -0.1875) 0 color-mix(in oklch,var(--lid-back) 19%,var(--lid-front)),
    calc(var(--side) * -0.2500) calc(var(--lid) * -0.2500) 0 color-mix(in oklch,var(--lid-back) 25%,var(--lid-front)),
    calc(var(--side) * -0.3125) calc(var(--lid) * -0.3125) 0 color-mix(in oklch,var(--lid-back) 31%,var(--lid-front)),
    calc(var(--side) * -0.3750) calc(var(--lid) * -0.3750) 0 color-mix(in oklch,var(--lid-back) 38%,var(--lid-front)),
    calc(var(--side) * -0.4375) calc(var(--lid) * -0.4375) 0 color-mix(in oklch,var(--lid-back) 44%,var(--lid-front)),
    calc(var(--side) * -0.5000) calc(var(--lid) * -0.5000) 0 color-mix(in oklch,var(--lid-back) 50%,var(--lid-front)),
    calc(var(--side) * -0.5625) calc(var(--lid) * -0.5625) 0 color-mix(in oklch,var(--lid-back) 56%,var(--lid-front)),
    calc(var(--side) * -0.6250) calc(var(--lid) * -0.6250) 0 color-mix(in oklch,var(--lid-back) 62%,var(--lid-front)),
    calc(var(--side) * -0.6875) calc(var(--lid) * -0.6875) 0 color-mix(in oklch,var(--lid-back) 69%,var(--lid-front)),
    calc(var(--side) * -0.7500) calc(var(--lid) * -0.7500) 0 color-mix(in oklch,var(--lid-back) 75%,var(--lid-front)),
    calc(var(--side) * -0.8125) calc(var(--lid) * -0.8125) 0 color-mix(in oklch,var(--lid-back) 81%,var(--lid-front)),
    calc(var(--side) * -0.8750) calc(var(--lid) * -0.8750) 0 color-mix(in oklch,var(--lid-back) 88%,var(--lid-front)),
    calc(var(--side) * -0.9375) calc(var(--lid) * -0.9375) 0 color-mix(in oklch,var(--lid-back) 94%,var(--lid-front)),
    calc(var(--side) * -1.0000) calc(var(--lid) * -1.0000) 0 color-mix(in oklch,var(--lid-back) 100%,var(--lid-front));
}
/* Safari (iPhone, Mac) ne connaît pas mask-clip:no-clip : le masque y couperait tout le dessus, qui disparaissait
   (14/10, boîte toute sombre sur iPhone). Là, le dessus est découpé à la diagonale du coin, sans fondu. */
@supports not (mask-clip:no-clip){
  .check::after{
    -webkit-mask:none;mask:none;
    clip-path:polygon(calc(var(--r) * .3) calc(var(--r) * .3),calc(var(--side) * -3) calc(var(--lid) * -3),calc(100% + 40px) calc(var(--lid) * -3),calc(100% + 40px) calc(var(--r) * .3));
  }
}
/* La mascotte assise sur la face du dessus, sur son ordinateur. Pose « travail » de 1024 px de côté : le bas du corps est
   vers 76 % de la hauteur de l'image, les pieds à 79 %. Les pieds sont calés sur l'arête avant du dessus (2 px dessus) :
   le corps repose alors sur le dessus, derrière eux. (Calée plus haut, une bande du dessus restait visible devant les
   pieds et elle semblait flotter.) Une ombre de contact aplatie, entre les deux pieds, l'ancre sur la surface. Le bras est un calque à
   part (data-box 313 529 155 148), qui tape au clavier (main.js). */
.check-mascot{position:absolute;right:calc(12% + var(--side) * .45);bottom:100%;width:var(--sit);aspect-ratio:1;
  margin-bottom:calc(var(--sit) * -.211 - 2px);pointer-events:none}
.check-mascot img{position:absolute;display:block;max-width:none;user-select:none}
.check-mascot .full{inset:0;width:100%;height:100%}
.check-mascot-arm{left:30.57%;top:51.66%;width:15.14%;height:14.45%}
.check-mascot-shadow{position:absolute;left:30%;top:74.5%;width:54%;height:6%;border-radius:50%;
  background:radial-gradient(closest-side,var(--lid-shadow),var(--lid-shadow) 35%,transparent)}
.check-title{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.05;letter-spacing:-.035em;font-weight:600}
.check-intro{margin:12px 0 24px;color:var(--on-accent-muted);font-size:16px;max-width:42ch}
.check .btn{background:var(--surface);color:var(--accent-deep);box-shadow:none}
.check .btn:hover{background:var(--accent-soft)}
.check .btn[aria-busy="true"]{opacity:.7;cursor:progress}
.check-out{align-self:stretch;padding-left:clamp(24px,4vw,64px);border-left:1px solid var(--on-accent-line)}
.check-wait{color:var(--on-accent-muted);font-size:15.5px;max-width:44ch}
.verdict{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;line-height:1.25}
.verdict i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--verdict-mid)}
.verdict.is-ok i{background:var(--verdict-ok)}
.verdict.is-no i{background:var(--verdict-no)}
.verdict-text{margin-top:8px;font-size:15.5px;color:var(--on-accent)}
.check-facts{margin:16px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:14.5px}
.check-facts dt{color:var(--on-accent-muted)}
.check-facts dd{margin:0;overflow-wrap:anywhere}
.check-note{margin-top:14px;font-size:13.5px;color:var(--on-accent-muted)}

/* Pour quelles vidéos (30/10) : visible d'office, entre le vérificateur et les points à lire. Mêmes cartes que la comparaison
   de « Pourquoi » ; « Pas fait pour » se distingue par son libellé et sa croix, pas seulement par la couleur. */
.scope{margin-top:clamp(40px,6vh,64px)}
.scope-title{font-size:clamp(22px,2vw,26px);font-weight:600;letter-spacing:-.015em}
.scope-cols{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.scope-col{padding:clamp(22px,2.6vw,32px);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.scope-yes{border:2px solid var(--fonce)}
.scope-label{font:600 12px/1.6 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.scope-yes .scope-label{color:var(--accent-text)}
.scope-col ul{margin-top:14px;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.scope-col li{position:relative;padding-left:22px;color:var(--ink-2)}
.scope-yes li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:2px;border-radius:2px;background:var(--accent)}
.scope-no li::before{content:"×";position:absolute;left:1px;top:-.08em;font-weight:600;color:var(--muted)}
.scope-note{margin-top:16px;font-size:15.5px;color:var(--muted);max-width:72ch}
.scope-note a{color:var(--accent-text)}

/* Les points à lire, sous le vérificateur, en deux colonnes indépendantes (un dépliant ouvert n'écarte que la sienne). */
.terms{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);align-items:start}
.terms-col{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.term{border-top:1px solid var(--line)}
.term summary{padding:clamp(18px,2.6vh,24px) 0}
.term h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:clamp(19px,1.7vw,22px);font-weight:600;letter-spacing:-.015em}
.term-body{padding-bottom:clamp(20px,3vh,28px)}
.term-price{font-size:13px;font-weight:600;color:var(--accent-text);padding:3px 8px;border-radius:4px;background:var(--accent-soft);white-space:nowrap}
.term ul{display:flex;flex-direction:column;gap:10px}
.term li{position:relative;padding-left:22px;color:var(--ink-2);max-width:64ch}
.term li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:2px;border-radius:2px;background:var(--accent)}
.term strong{color:var(--ink);font-weight:600}

/* ---------- 5. Offres ---------- */
.offers{padding:clamp(72px,11vh,120px) var(--pad)}
.offer-grid{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:start}
.offer{position:relative;border-radius:var(--radius);padding:clamp(24px,3vw,36px);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:20px}
.offer-feat{border:2px solid var(--fonce);box-shadow:var(--shadow-reel)}
.offer-name{font-size:22px;font-weight:600;letter-spacing:-.02em}
.offer-for{margin-top:6px;color:var(--muted);font-size:15.5px;max-width:42ch}
.offer-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.amount{font-size:clamp(3.2rem,5.4vw,4.4rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.then{color:var(--muted);font-size:15px}
/* Offre d'ouverture : bandeau en haut de la carte, 600 € en grand, prix suivant à côté (sans barre). */
.offer-band{margin:calc(clamp(24px,3vw,36px) * -1) calc(clamp(24px,3vw,36px) * -1) 0;padding:12px clamp(24px,3vw,36px);border-radius:15px 15px 0 0;background:var(--fonce);color:var(--on-accent);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:700;font-size:15px;letter-spacing:.01em}
.offer-band span:last-child{font-weight:500;opacity:.9}
/* Liste d'attente de l'offre 2 (30/10) : remplace l'achat quand l'offre est complète (main.js, complet()). */
.waitlist{display:flex;flex-direction:column;gap:12px}
.waitlist[hidden]{display:none}
.waitlist-title{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.03em}
.waitlist-intro{font-size:15.5px;color:var(--muted);max-width:46ch}
.waitlist-label{margin-top:4px;font-size:14.5px;font-weight:600}
.waitlist-input{height:52px;padding:0 16px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.waitlist-input:focus-visible{border-color:var(--accent);outline-offset:1px}
.waitlist-input:disabled{opacity:.6}
.waitlist-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.waitlist-consent{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.waitlist-consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
.waitlist-consent a{color:var(--accent-text)}
.waitlist-msg{min-height:1.5em;font-size:14.5px;font-weight:600;color:var(--accent-text)}
.waitlist-msg.is-error{color:var(--verdict-no)}
.launch-price{display:flex;flex-direction:column;gap:8px}
.lp-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.lp-next{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:-.03em;color:var(--ink-2)}
.lp-why{font-size:14.5px;font-weight:600;color:var(--accent-text)}
.offer-list{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line);font-size:15.5px}
.offer-list li{position:relative;padding-left:28px}
.offer-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--accent-soft)}
/* La coche (ou le tiret) est un masque : elle prend la couleur de l'accent. */
.offer-list li::after{content:"";position:absolute;left:4px;top:6px;width:10px;height:10px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.5L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.5L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.offer-list li.no::before{background:var(--grey-soft)}
.offer-list li.no::after{left:5px;top:10px;width:8px;height:2px;border-radius:2px;background:var(--muted);-webkit-mask:none;mask:none}
.seats{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-2)}
.offer-feat .seats{padding:12px 14px;border-radius:12px;background:var(--accent-soft);color:var(--accent-deep);font-size:15.5px}
.offer-feat .seats strong{color:var(--accent-text)}
.seats-bar{display:flex;gap:4px}
.seats-bar i{width:18px;height:8px;border-radius:2px;background:var(--accent)}
.seats-bar i.is-taken{background:var(--line-2)}
.offer-note{font-size:14px;color:var(--muted)}
.offers-foot{margin-top:24px;font-size:15px;color:var(--muted);max-width:70ch}
.offers-foot a{color:var(--accent-text);font-weight:600;text-underline-offset:3px}

/* ---------- Qui sommes-nous (20/10) : le texte à gauche, la mascotte debout à droite. ---------- */
.about{padding:clamp(72px,11vh,120px) var(--pad);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(24px,5vw,72px);align-items:center}
.about-lead{margin-top:18px;font-size:clamp(17px,1.5vw,19px);color:var(--ink-2);max-width:58ch}
.about-lead+.about-lead{margin-top:12px;color:var(--muted)}
.about-mascot{width:100%;height:auto;max-width:280px;justify-self:center}

/* ---------- 6. FAQ ---------- */
.faq{padding:clamp(64px,10vh,112px) var(--pad);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
/* Dépliants (FAQ, « À lire avant d'acheter ») : le titre, un « + » qui tourne en « × » ; main.js anime l'ouverture. */
.faq summary,.term summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq summary{padding:22px 0;font-weight:600;font-size:18px}
.faq summary::-webkit-details-marker,.term summary::-webkit-details-marker{display:none}
.faq summary::after,.term summary::after{
  content:"";flex:none;width:28px;height:28px;border-radius:6px;
  background:linear-gradient(var(--accent),var(--accent)) center/12px 1.8px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1.8px 12px no-repeat,var(--accent-soft);
  transition:transform .4s var(--ease);
}
/* is-closing : posé par main.js dès le clic de fermeture, pour que l'icône tourne pendant le repli et non après. */
.faq details[open]:not(.is-closing) summary::after,.term[open]:not(.is-closing) summary::after{transform:rotate(45deg)}
.faq summary:hover::after,.term summary:hover::after{background-color:var(--accent-20)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:62ch}
.faq details a{color:var(--accent-text);font-weight:600;text-underline-offset:3px}

/* ---------- Footer ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:26px var(--pad);font-size:14px;color:var(--muted)}
.foot .brand{font-size:17px;color:var(--ink)}
.foot-links{display:flex;gap:22px}
.foot-links a{text-decoration:none;white-space:nowrap}
.foot-links a:hover{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-points{grid-template-columns:minmax(0,1fr)}
  .faq{grid-template-columns:1fr}
  .about{grid-template-columns:minmax(0,1fr)}
  .about-mascot{max-width:180px;justify-self:start;order:-1}
  .terms{grid-template-columns:minmax(0,1fr)}
  .scope-cols{grid-template-columns:minmax(0,1fr)}
  .terms-col+.terms-col{border-bottom:1px solid var(--line)}
  .terms-col:first-child{border-bottom:0}
  .check{grid-template-columns:minmax(0,1fr)}
  .check-out{padding:22px 0 0;border-left:0;border-top:1px solid var(--on-accent-line)}
}
/* Menu sur tablette et téléphone : les entrées passent dans un panneau sous le bandeau. */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;margin:0;padding:8px var(--pad) 20px;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
  .nav-links a{padding:14px 0;font-size:18px;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
  .nav.is-open .nav-links{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .nav.is-open{background:var(--bg)}
}
@media (max-width:767px){
  body{font-size:16px}
  /* Sur téléphone : la mascotte, puis les deux liens côte à côte. */
  .hero{min-height:0;padding-top:calc(var(--nav-h) + 64px)}
  .hero-stage{--m:min(68vw,300px);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"m m" "l r";justify-items:center;row-gap:4px}
  .mascot{grid-area:m}
  .hero-link-wrap{padding-top:0;margin:0!important;justify-self:stretch;align-items:stretch}   /* deux tuiles de même hauteur */
  .hero-link-wrap-l{grid-area:l;margin-right:5px!important}
  .hero-link-wrap-r{grid-area:r;margin-left:5px!important}
  .hero-link{width:100%;padding:14px 12px 16px;font-size:20px}
  .how-steps{grid-template-columns:minmax(0,1fr)}
  .why-compare{grid-template-columns:minmax(0,1fr)}
  .ex-row{grid-template-columns:repeat(5,64%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .ex-slot{scroll-snap-align:start}
  .offer-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .check .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .aurora{animation:none!important}   /* aurore immobile (sinon la boucle infinie clignoterait) */
}


/* ---------- Thème sombre : le seul thème du site (20/10, décision de Milo) ----------
   Les valeurs de :root plus haut sont la palette hookd (fond Clair, cartes Blanc) ; ce bloc les remplace pour le sombre :
   le blanc devient noir (cartes), le fond clair devient gris foncé. Mêmes rôles, valeurs inversées.
   Le texte rose passe à la teinte 60 % de l'accent pour rester lisible sur le noir.
   Avant le 20/10, un bouton soleil / lune permettait de passer au clair : retiré avec le thème clair. */
:root{
  --bg:oklch(19.5% 0.008 350);
  --surface:oklch(12.5% 0.006 350);
  --grey-soft:oklch(25% 0.012 350);
  --ink:var(--clair);
  --ink-2:oklch(86% 0.02 348);
  --muted:oklch(71% 0.025 348);
  --on-ink:var(--sombre);
  --line:oklch(28% 0.012 350);
  --line-2:oklch(36% 0.016 350);
  --accent-deep:var(--accent-40);
  --accent-soft:oklch(29% 0.07 355);
  --accent-wash:oklch(22% 0.03 355);
  --accent-line:oklch(42% 0.1 355);
  --accent-text:var(--accent-60);
  --spot:oklch(26% 0.02 350);
  --mascot-shadow:oklch(0% 0 0 / .65);
  --no-soft:oklch(28% 0.05 45);
  --glass:oklch(12.5% 0.006 350 / .8);
  --nav-glass:oklch(19.5% 0.008 350 / .72);
  --shade:oklch(0% 0 0 / .5);
  --shadow-sm:0 1px 2px oklch(0% 0 0 / .3),0 8px 24px -12px oklch(0% 0 0 / .5);
  --shadow:0 1px 2px oklch(0% 0 0 / .3),0 12px 40px -12px oklch(0% 0 0 / .55);
  --shadow-reel:0 40px 80px -30px oklch(0% 0 0 / .6);
  color-scheme:dark;
}

/* ---------- Pages légales (mentions, CGV, confidentialité, licence) ---------- */
.legal-nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--pad);background:var(--glass);border-bottom:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.legal-nav a.back{font-size:14.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.legal-nav a.back:hover{color:var(--ink)}
.legal{max-width:760px;margin:0 auto;padding:clamp(48px,8vh,88px) var(--gutter) clamp(64px,10vh,112px)}
.legal h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.04;letter-spacing:-.035em;font-weight:600}
.legal .updated{margin-top:12px;color:var(--muted);font-size:15px}
.legal .draft{margin-top:24px;padding:16px 18px;border-radius:12px;background:var(--no-soft);color:var(--ink-2);font-size:15px}
.legal .draft strong{color:var(--no)}
.legal .summary{margin-top:28px;padding:20px 22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.legal .summary h2{margin:0 0 8px;font-size:17px}
.legal h2{margin:48px 0 12px;font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em;font-weight:600}
.legal h3{margin:24px 0 8px;font-size:17px;font-weight:600}
.legal p,.legal li{color:var(--ink-2);max-width:68ch}
.legal p+p{margin-top:12px}
.legal ul,.legal ol{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal a{color:var(--accent-text);text-underline-offset:3px}
.legal dl{margin:12px 0 0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 20px}
.legal dt{color:var(--muted)}
.legal dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.legal .form-model{margin-top:12px;padding:18px 20px;border-radius:12px;border:1px dashed var(--line-2);background:var(--surface)}
mark.todo{background:var(--verdict-mid);color:var(--sombre);padding:0 .25em;border-radius:4px;font-weight:500}
@media (max-width:767px){.legal dl{grid-template-columns:minmax(0,1fr)}.legal dt{margin-top:8px}}