/* ═══════════════════════════════════════════════════════════════
   CaseAvis Revendeurs — feuille de style
   Monde : un comptoir de commerce au soleil de fin d'après-midi.
   Le héros est un film chaud assombri localement ; la page qui
   suit est claire et rapide. Le bleu de la plaque est l'accent,
   et il ne sert qu'à l'appel à l'action et au focus clavier.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* la palette, prélevée sur le plan */
  --canvas:#F4EDE3;
  --canvas-deep:#EBE1D3;
  --panel:#FCF8F2;
  --ink:#1A1512;
  --ink-soft:#3D342C;
  --text-secondary:#6B6055;
  --line:#DED2C0;
  --accent:#1D4DFF;
  --accent-ink:#1540D9;
  --accent-hover:#1743E6;
  --accent-muted:rgba(29,77,255,.11);
  --gold:#FFC62B;
  --hero-text:#F7F2EA;
  --logo-ink:#0A0A0A;
  --logo-blue:#1D4DFF;
  --logo-blue-clair:#6E90FF;

  /* Les courbes. Jamais ease-in sur de l'interface : ça démarre lent,
     pile au moment où l'œil regarde, et tout paraît mou. */
  --ease-out:cubic-bezier(.23,1,.32,1);      /* ce qui entre ou sort */
  --ease-move:cubic-bezier(.77,0,.175,1);    /* ce qui se déplace sur place */
  --ease:ease;                               /* survols et couleurs */

  /* Les durées. Au dessus de 300ms, une interface traîne. */
  --t-press:140ms;
  --t-hover:200ms;
  --t-enter:380ms;

  /* l'ombre de texte du héros, trois couches */
  --tshadow:0 1px 2px rgba(24,14,6,.95),0 3px 12px rgba(24,14,6,.72),0 10px 44px rgba(24,14,6,.78);

  --wrap:1220px;
  --gut:clamp(1.1rem,4vw,2.6rem);

  --f-display:"Rubik","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Nunito Sans",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .22vw,1.115rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  animation:pagein .7s var(--ease-out) .05s forwards;
}
@keyframes pagein{to{opacity:1}}

/* ── le fond d'environnement : un seul lieu, pas des sections empilées ── */
.env{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 44rem at 12% 18%,rgba(255,214,150,.20),transparent 62%),
    radial-gradient(52rem 40rem at 88% 78%,rgba(46,111,209,.07),transparent 64%);
  animation:envdrift 96s ease-in-out -22s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(-1.6%,-1%,0) scale(1.03)}
  to{transform:translate3d(1.8%,1.4%,0) scale(1.07)}
}
.env::after{ /* le grain, très bas niveau */
  content:"";position:absolute;inset:0;opacity:.32;
  background-image:radial-gradient(circle at 50% 50%,rgba(120,96,64,.5) .5px,transparent .6px);
  background-size:3px 3px;
}
/* Le fond vit en z-index:-1, donc le contenu passe devant sans qu'on
   ait besoin de repositionner quoi que ce soit. Une règle générale
   comme body>*{position:relative} écraserait le position:fixed de la
   barre de navigation, de la pastille et de la barre d'achat. */

/* ── typographie ── */
h1,h2,h3{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
.h-xl{font-size:clamp(2.6rem,1.5rem + 5.2vw,5.5rem)}
.h-l{font-size:clamp(2rem,1.3rem + 3.1vw,3.5rem)}
.h-m{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.8rem);font-weight:700;line-height:1.12}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.kicker{
  font-family:var(--f-mono);
  font-size:.66rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--text-secondary);
  margin:0 0 .9rem;
}
.lead{font-size:clamp(1.09rem,1rem + .45vw,1.32rem);line-height:1.55;color:var(--ink-soft)}
.small{font-size:.87rem;line-height:1.5}
.muted{color:var(--text-secondary)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* le trait griffonné, hérité de la marque */
.under{position:relative;white-space:nowrap}
.under .scribble{
  position:absolute;left:-.06em;right:-.06em;bottom:-.30em;width:calc(100% + .12em);height:.34em;
  overflow:visible;pointer-events:none;
}
.under .scribble path{
  fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:var(--sl,340);stroke-dashoffset:var(--sl,340);
  transition:stroke-dashoffset 1.15s var(--ease-out);
}
.in .under .scribble path{stroke-dashoffset:0}
.in .under .scribble path:nth-child(2){transition-delay:.16s}

/* ═══════════════ NAVIGATION ═══════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:.85rem 0;
  transition:background var(--t-hover) var(--ease),backdrop-filter var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),padding var(--t-hover) var(--ease);
  border-bottom:1px solid transparent;
}
.nav__in{display:flex;align-items:center;gap:1.2rem;justify-content:space-between}
.nav a{text-decoration:none}
.nav--solid{
  background:rgba(244,237,227,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line);
  padding:.6rem 0;
}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.wordmark{
  font-family:var(--f-display);font-weight:800;font-size:1.32rem;letter-spacing:-.03em;
  color:var(--hero-text);text-shadow:var(--tshadow);
  transition:color var(--t-hover) var(--ease),text-shadow var(--t-hover) var(--ease);
  white-space:nowrap;
}
.wordmark .st{color:var(--gold)}
.nav--solid .wordmark{color:var(--ink);text-shadow:none}
.nav__tag{
  font-family:var(--f-mono);font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hero-text);opacity:.82;padding:.28rem .5rem;border:1px solid currentColor;border-radius:5px;
  text-shadow:none;transition:color var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease);
}
.nav--solid .nav__tag{color:var(--text-secondary);opacity:1}
.nav__links{display:flex;gap:1.5rem;align-items:center}
.nav__links a{
  font-size:.92rem;font-weight:500;color:var(--hero-text);text-shadow:var(--tshadow);
  position:relative;padding:.2rem 0;transition:color var(--t-hover) var(--ease),text-shadow var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease);
}
.nav--solid .nav__links a{color:var(--ink-soft);text-shadow:none}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1.6px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-hover) var(--ease-out);
}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
@media (max-width:1000px){.nav__links{display:none}}
/* Sous 760px la barre d'achat du bas porte déjà l'appel à l'action.
   Le garder aussi en haut le fait déborder par dessus l'étiquette. */
@media (max-width:760px){
  .nav .btn{display:none}
  .nav__in{justify-content:flex-start}
}

/* ── boutons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-body);font-size:.95rem;font-weight:600;line-height:1;
  padding:.86rem 1.32rem;border-radius:9px;border:1.5px solid var(--accent);
  color:#fff;background:var(--accent);text-decoration:none;cursor:pointer;
  transition:background var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),
             transform var(--t-press) var(--ease-out),box-shadow var(--t-hover) var(--ease);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  text-shadow:none;
}
/* La pression : le geste le plus répété du site. Sans retour, l'interface
   a l'air de ne pas avoir entendu. */
.btn:active{transform:scale(.97)}
.btn--ghost{background:transparent;color:var(--accent-ink);border-color:var(--line)}
.btn--onfilm{background:rgba(247,242,234,.96);color:#17110A;border-color:transparent;backdrop-filter:blur(6px)}
.btn--film-ghost{background:rgba(20,14,8,.34);color:var(--hero-text);border-color:rgba(247,242,234,.5);backdrop-filter:blur(8px)}
.btn--full{width:100%}

/* Les survols vivent derrière ce garde : sur un écran tactile, un simple
   appui déclenche :hover et la carte reste soulevée après le doigt. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 22px rgba(46,111,209,.24)}
  .btn:active:hover{transform:scale(.97)}
  .btn--ghost:hover{background:var(--accent-muted);border-color:var(--accent);color:var(--accent-ink);box-shadow:none;transform:translateY(-2px)}
  .btn--onfilm:hover{background:#fff;box-shadow:0 10px 30px rgba(20,12,4,.4)}
  .btn--film-ghost:hover{background:rgba(20,14,8,.5);border-color:var(--hero-text);box-shadow:none}
}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

a{color:var(--accent-ink)}
.u-link{color:var(--accent-ink);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1.5px;text-decoration-color:var(--accent-muted);transition:text-decoration-color .3s var(--ease)}
.u-link:hover{text-decoration-color:var(--accent)}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--panel);color:var(--ink);padding:.8rem 1.1rem;border-radius:0 0 8px 0;font-weight:600;
}
.skip:focus{left:0}

/* ═══════════════════════════════════════════════════════════════
   LE HÉROS AU DÉFILEMENT
   300vh de course — trois défilements et le film est vu. Le public
   vient de TikTok : il ne scrolle pas six écrans pour un argument.
   ═══════════════════════════════════════════════════════════════ */
.hero{position:relative;height:300vh;background:#14100C}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#14100C;
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .8s var(--ease);
}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}

/* 1. le voile de base : aucune image n'est jamais brute derrière la page */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 118% 92% at 62% 48%,rgba(18,11,4,0) 32%,rgba(18,11,4,.60) 100%),
    linear-gradient(180deg,rgba(18,11,4,.42) 0%,rgba(18,11,4,0) 22%);
}

/* l'anneau de chargement, honnête */
.ring{
  position:absolute;left:50%;bottom:2.6rem;transform:translateX(-50%) rotate(-90deg);
  width:44px;height:44px;color:rgba(247,242,234,.8);pointer-events:none;
  transition:opacity .5s var(--ease);
}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}
.cue{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  color:rgba(247,242,234,.85);font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;text-shadow:var(--tshadow);
}
.cue span{display:block;width:1px;height:26px;background:linear-gradient(180deg,rgba(247,242,234,.9),transparent);animation:cuedrop 2.6s var(--ease) -0.4s infinite}
@keyframes cuedrop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── les bandes de texte ── */
.bands{position:absolute;inset:0}
.band{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;align-items:center;
  padding:0 var(--gut);
  color:var(--hero-text);
  text-shadow:var(--tshadow);
}
.band .btn{text-shadow:none}
/* Les bandes sont en pointer-events:none pour ne pas gêner le défilement,
   et les boutons en héritaient : ils étaient donc impossibles à cliquer.
   On les réactive, mais uniquement sur la bande réellement visible, sinon
   les boutons d'une bande invisible captent les clics par dessus le reste. */
.band--on .btn{pointer-events:auto}
.band__in{max-width:min(46vw,640px);margin-left:clamp(0px,4vw,90px)}
@media (max-width:1100px){.band__in{max-width:min(60vw,560px)}}

/* 2. le voile par bande : il ne s'assombrit que pendant que sa bande est là */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 66% 76% at 27% 50%,rgba(14,8,3,.70) 0%,rgba(14,8,3,.48) 44%,rgba(14,8,3,0) 76%);
}
.band--settle::before{
  background:radial-gradient(ellipse 74% 64% at 42% 42%,rgba(14,8,3,.72) 0%,rgba(14,8,3,.50) 46%,rgba(14,8,3,0) 78%);
}
.band--settle{align-items:flex-start;padding-top:min(22vh,190px)}
.band--settle .band__in{max-width:min(54vw,720px)}

.band h2,.band .h-hero{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.1rem,1.2rem + 4vw,4.4rem);
  line-height:1.03;letter-spacing:-.025em;margin:0;
}
.band .sub{
  font-size:clamp(1.05rem,.98rem + .5vw,1.42rem);
  line-height:1.42;margin:.95rem 0 0;max-width:34ch;
  color:rgba(247,242,234,.94);
}
.band .row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}

/* le découpage en mots et lettres */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) éparpillement */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (b) alignement en grille, dans l'ordre de lecture */
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}
/* (f) chute douce : les mots descendent pendant que la plaque descend */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
/* (d) frappe de mot avec dépassement : calée sur l'impact */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) montée mot à mot, puis la sous-ligne, puis les boutons */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px));
}
.band--settle .sub{opacity:var(--ks-sub,0);transform:translateY(calc((1 - var(--ks-sub,0))*18px))}
.band--settle .row{opacity:var(--kb-row,0);transform:translateY(calc((1 - var(--kb-row,0))*18px))}

.band .sub s{opacity:.62;text-decoration-thickness:1px}

/* la pastille pour les petites lignes posées sur le film */
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(12,8,4,.55);border:1px solid rgba(247,242,234,.22);border-radius:10px;
  padding:.4rem .7rem;backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(14,8,3,.85);color:var(--hero-text);
}

/* ── le héros fixe : une mise en page dessinée, pas une excuse ── */
/* padding:0 explicite : le héros fixe est un <section> et hériterait
   sinon du rembourrage générique des sections, qui le décale vers le bas
   et pousse son bouton sous la barre d'achat. */
.static-hero{display:none;position:relative;min-height:100svh;overflow:hidden;background:#14100C;padding:0}
/* En portrait étroit, une image 16:9 ne peut pas se recadrer sans couper
   la plaque en deux, et le texte posé dessus tombe sur le texte imprimé
   du produit. Alors on ne recadre pas : l'image occupe le haut dans un
   format qui la respecte, et les mots vivent en dessous, au calme. */
.static-hero{--heroimg:min(38svh,300px)}
.static-hero__img{
  position:absolute;left:0;right:0;top:0;height:var(--heroimg);
  background-size:cover;background-position:62% 50%;
}
.static-hero__scrim{
  position:absolute;left:0;right:0;top:0;height:var(--heroimg);
  background:linear-gradient(180deg,rgba(16,10,4,.62) 0%,rgba(16,10,4,.12) 30%,rgba(16,10,4,.30) 68%,#14100C 100%);
}
.static-hero__in{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;color:var(--hero-text);
  max-width:var(--wrap);margin-inline:auto;width:100%;
  /* la barre d'achat fixe mange le bas de l'écran : on lui laisse la place */
  padding:calc(var(--heroimg) + 1.5rem) var(--gut) calc(2rem + 4.4rem);
}
.static-hero h1{font-size:clamp(1.95rem,1.3rem + 4.2vw,3.4rem);line-height:1.06;margin:0 0 1rem}
.static-hero .sub{font-size:1.02rem;line-height:1.5;max-width:34ch;margin:0 0 1.6rem;color:rgba(247,242,234,.9)}
.static-hero .row{display:flex;flex-direction:column;gap:.7rem}
.static-hero .row .btn{width:100%}
.static-hero .kicker{color:rgba(247,242,234,.62)}

/* Sur les écrans larges qui reçoivent aussi le héros fixe (tablette en
   portrait, bureau en mouvement réduit), le plan tient en plein cadre. */
@media (min-width:761px){
  .static-hero__img{inset:0;height:auto;background-position:58% 46%}
  .static-hero__scrim{
    inset:0;height:auto;
    background:linear-gradient(178deg,rgba(16,10,4,.78) 0%,rgba(16,10,4,.44) 40%,rgba(16,10,4,.88) 100%);
  }
  .static-hero__in{padding:9rem var(--gut) 3.5rem;text-shadow:var(--tshadow)}
  .static-hero .row{flex-direction:row}
  .static-hero .row .btn{width:auto}
}
.static-hero .btn{text-shadow:none}

/* ═══════════════ LES SECTIONS ═══════════════ */
section{padding:clamp(4rem,9vw,8rem) 0}
.sec-head{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.sec-n{
  font-family:var(--f-mono);font-size:.7rem;font-weight:600;color:var(--accent-ink);
  letter-spacing:.1em;padding-top:.5em;flex:none;
}

/* le séparateur pointillé, prélevé sur la face imprimée de la plaque */
.divider{display:flex;justify-content:center;padding:clamp(1.6rem,4vw,3rem) 0}
.divider svg{width:26px;height:96px;overflow:visible}
.divider .dash{
  stroke:var(--line);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 9;
  stroke-dashoffset:var(--dl,110);transition:stroke-dashoffset 1.5s var(--ease-out);
}
.divider.in .dash{stroke-dashoffset:0}
.divider .ou{fill:none;stroke:var(--line);stroke-width:1.4}
.divider text{
  font-family:var(--f-mono);font-size:6.5px;font-weight:600;fill:var(--text-secondary);
  letter-spacing:.06em;
}

/* ── les entrées au défilement ── */
.rv{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out);
}
.rv.in{opacity:1;transform:none}

/* La cascade. Les voisins d'une grille arrivent l'un après l'autre plutôt
   qu'en bloc. Décalages courts : au delà, l'interface paraît lente. */
.doors>*,.offers>*,.assur>*,.facts>*,.track>*,.qa>*,.quotes>*{
  opacity:0;transform:translateY(9px);
  transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out);
}
.doors.in>*,.offers.in>*,.assur.in>*,.facts.in>*,.track.in>*,.qa.in>*,.quotes.in>*{
  opacity:1;transform:none;
}
.doors.in>*:nth-child(2),.offers.in>*:nth-child(2),.assur.in>*:nth-child(2),
.facts.in>*:nth-child(2),.track.in>*:nth-child(2),.qa.in>*:nth-child(2),.quotes.in>*:nth-child(2){transition-delay:55ms}
.doors.in>*:nth-child(3),.offers.in>*:nth-child(3),.assur.in>*:nth-child(3),
.facts.in>*:nth-child(3),.track.in>*:nth-child(3),.qa.in>*:nth-child(3),.quotes.in>*:nth-child(3){transition-delay:110ms}
.doors.in>*:nth-child(4),.offers.in>*:nth-child(4),.assur.in>*:nth-child(4),
.facts.in>*:nth-child(4),.track.in>*:nth-child(4),.qa.in>*:nth-child(4),.quotes.in>*:nth-child(4){transition-delay:165ms}
.qa.in>*:nth-child(5),.track.in>*:nth-child(5){transition-delay:200ms}
.qa.in>*:nth-child(6){transition-delay:230ms}

/* Le retrait des délais, une fois l'entrée terminée. Sans lui, chaque
   survol des cartes suivantes traîne son délai de cascade, à vie.
   Le sélecteur répète le nth-child pour l'emporter sur celui du dessus. */
.doors.done>*:nth-child(n),.offers.done>*:nth-child(n),.assur.done>*:nth-child(n),
.facts.done>*:nth-child(n),.track.done>*:nth-child(n),.qa.done>*:nth-child(n),
.quotes.done>*:nth-child(n){transition-delay:0s}

/* ── les deux portes ── */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.7rem);margin-top:clamp(1.6rem,4vw,2.4rem)}
@media (max-width:840px){.doors{grid-template-columns:1fr}}
.door{
  position:relative;display:flex;flex-direction:column;gap:.8rem;
  background:var(--panel);border:1px solid var(--line);border-radius:15px;
  padding:clamp(1.5rem,3vw,2.2rem);text-decoration:none;color:inherit;overflow:hidden;
  transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.door::after{ /* la lueur au survol, sur un pseudo, opacité seulement */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(30rem 20rem at 20% 0%,var(--accent-muted),transparent 70%);
  transition:opacity .5s var(--ease);
}


.door .l{
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;color:var(--accent-ink);
  border:1px solid var(--accent-muted);background:var(--accent-muted);border-radius:6px;
  width:1.9rem;height:1.9rem;display:grid;place-items:center;
}
.door .said{
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.35;
  color:var(--ink-soft);font-style:italic;margin:0;
}
.door p{margin:0;color:var(--text-secondary);font-size:.97rem;line-height:1.55}
.door .go{
  margin-top:auto;padding-top:.7rem;font-weight:600;color:var(--accent-ink);font-size:.95rem;
  display:inline-flex;align-items:center;gap:.45rem;
}
.door .go::after{content:"→";transition:transform .34s var(--ease-out);display:inline-block}
.door:hover .go::after{transform:translateX(5px)}

/* ── le crochet chiffré ── */
.hook{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(1.8rem,4vw,2.6rem);
}
.hook>div{background:var(--panel);padding:clamp(1.1rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.35rem}
.hook .k{font-family:var(--f-mono);font-size:.61rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.hook .v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.7rem,1.1rem + 2.2vw,2.7rem);line-height:1;letter-spacing:-.03em}
.hook .c3{background:#17110B}
.hook .c3 .k{color:rgba(247,242,234,.72)}
.hook .c3 .v{color:var(--gold)}
@media (max-width:640px){.hook{grid-template-columns:1fr}}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.4rem);margin-top:clamp(1.4rem,3vw,2rem)}
@media (max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{display:flex;flex-direction:column;gap:.2rem;padding-top:.85rem;border-top:2px solid var(--ink)}
.fact b{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.fact span{font-size:.85rem;color:var(--text-secondary);line-height:1.4}

/* ── qui parle ── */
.proof{background:var(--canvas-deep);border-block:1px solid var(--line)}
.in-w{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media (max-width:900px){.in-w{grid-template-columns:1fr}}
.facts-min{list-style:none;margin:1.4rem 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.facts-min li{position:relative;padding-left:1.5rem;font-size:.97rem;color:var(--ink-soft);line-height:1.55}
.facts-min li::before{
  content:"";position:absolute;left:0;top:.62em;width:.6rem;height:2px;background:var(--accent);
}
.warn{
  border-left:3px solid var(--gold);padding:.2rem 0 .2rem 1.1rem;margin-top:1.4rem;
  font-size:.99rem;color:var(--ink-soft);
}
.stars{display:inline-flex;gap:.28rem;vertical-align:middle}
.stars svg{width:1.05rem;height:1.05rem;fill:var(--gold);opacity:0;transform:scale(.5) rotate(-22deg);transition:opacity .5s var(--ease-out),transform .55s var(--ease-out)}
.in .stars svg{opacity:1;transform:none}
.in .stars svg:nth-child(1){transition-delay:.05s}
.in .stars svg:nth-child(2){transition-delay:.14s}
.in .stars svg:nth-child(3){transition-delay:.23s}
.in .stars svg:nth-child(4){transition-delay:.32s}
.in .stars svg:nth-child(5){transition-delay:.41s}

/* ── règles numérotées ── */
.cols{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.cols.flip{grid-template-columns:.75fr 1.25fr}
@media (max-width:900px){.cols,.cols.flip{grid-template-columns:1fr}}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1.4rem,3vw,2.1rem)}
.rules.two{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
@media (max-width:760px){.rules.two{grid-template-columns:1fr}}
.rules b{display:flex;gap:.6rem;align-items:baseline;font-family:var(--f-display);font-weight:700;font-size:1.13rem;margin-bottom:.45rem}
.rules .n{font-family:var(--f-mono);font-size:.72rem;font-weight:600;color:var(--accent-ink);flex:none}
.rules p{margin:0;color:var(--text-secondary);font-size:.97rem;line-height:1.6}
.aside{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:clamp(1.4rem,3vw,2rem)}

/* ── le moment interactif : posez-la ── */
.pose{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  background:#17110B;border-radius:18px;padding:clamp(1.6rem,4vw,3rem);color:var(--hero-text);
  overflow:hidden;
}
@media (max-width:860px){.pose{grid-template-columns:1fr}}
.pose h3{color:var(--hero-text);margin-bottom:.7rem}
.pose p{color:rgba(247,242,234,.78);font-size:.99rem}
.pose .kicker{color:rgba(247,242,234,.6)}
.pose__stage{
  position:relative;aspect-ratio:16/11;border-radius:12px;overflow:hidden;
  background:linear-gradient(178deg,#2A1D10,#3E2C19);
}
.pose__wood{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,#8A5F32,#5E3F20)}
.pose__wood::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(92deg,rgba(0,0,0,.16) 0 2px,transparent 2px 9px)}
.pose__card{
  position:absolute;left:50%;width:34%;aspect-ratio:1;border-radius:9px;
  background:linear-gradient(178deg,var(--accent) 0 56%,#F3F1EC 56% 100%);
  box-shadow:0 18px 34px rgba(0,0,0,.42);
  top:calc(6% + var(--hp,0)*46%);
  transform:translateX(-50%) rotate(calc(-9deg + var(--hp,0)*9deg));
  transition:none;
}
.pose__card::after{
  content:"";position:absolute;left:50%;top:16%;width:26%;aspect-ratio:1;border-radius:50%;
  background:#F3F1EC;transform:translateX(-50%);
}
.pose__shadow{
  position:absolute;left:50%;bottom:12%;width:calc(20% + var(--hp,0)*16%);height:7px;border-radius:50%;
  background:rgba(0,0,0,.5);filter:blur(5px);transform:translateX(-50%);
  opacity:calc(.18 + var(--hp,0)*.5);
}
.pose__price{
  position:absolute;top:.8rem;right:.9rem;
  font-family:var(--f-mono);font-weight:600;font-size:1.4rem;color:var(--gold);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.pose__btn{
  margin-top:1.3rem;position:relative;overflow:hidden;
  background:transparent;border:1.5px solid rgba(247,242,234,.42);color:var(--hero-text);
  border-radius:9px;padding:.9rem 1.4rem;font-family:var(--f-body);font-weight:600;font-size:.95rem;
  cursor:pointer;touch-action:none;user-select:none;
  transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease),transform var(--t-press) var(--ease-out);
}
.pose__btn:active{transform:scale(.97)}
.pose__btn:hover{border-color:var(--hero-text)}
.pose__btn .fill{
  position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);
  transform:scaleX(var(--hp,0));transform-origin:left;z-index:0;opacity:.9;
}
.pose__btn .lbl{position:relative;z-index:1}
.pose__done{
  margin-top:1.1rem;display:flex;flex-direction:column;gap:.55rem;list-style:none;padding:0;
}
.pose__done li{
  opacity:0;transform:translateX(-10px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  font-size:.95rem;color:rgba(247,242,234,.86);display:flex;gap:.6rem;align-items:baseline;
}
.pose__done li span{color:var(--gold);font-family:var(--f-mono);font-size:.74rem}
.pose.done .pose__done li{opacity:1;transform:none}
.pose.done .pose__done li:nth-child(1){transition-delay:.05s}
.pose.done .pose__done li:nth-child(2){transition-delay:.22s}
.pose.done .pose__done li:nth-child(3){transition-delay:.39s}

/* ── l'équation ── */
.ink-block{background:#17110B;color:var(--hero-text)}
.ink-block .kicker{color:rgba(247,242,234,.6)}
/* Chaque libellé vit sous son propre nombre : une légende alignée à part
   se décale dès que les chiffres changent de largeur. */
.eq{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(.7rem,2vw,1.6rem)}
.eq__c{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.eq__c b{
  font-family:var(--f-display);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-size:clamp(2.2rem,1.2rem + 4.6vw,4.6rem);font-variant-numeric:tabular-nums;
}
.eq__c i{
  font-family:var(--f-mono);font-style:normal;font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(247,242,234,.55);line-height:1.4;max-width:22ch;
}
.eq .op{
  font-family:var(--f-body);font-weight:500;font-size:clamp(.9rem,.8rem + .5vw,1.15rem);
  color:rgba(247,242,234,.6);letter-spacing:0;
  padding-top:clamp(1.1rem,.6rem + 2.2vw,2.4rem);
}
.eq .res{color:var(--gold)}

/* ── le parcours ── */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:900px){.track{grid-template-columns:1fr}}
.stop{background:var(--panel);padding:clamp(1.2rem,2.6vw,1.8rem);display:flex;flex-direction:column;gap:.4rem;position:relative}
.stop .dot{width:9px;height:9px;border-radius:50%;background:var(--line);margin-bottom:.5rem}
.stop--win{background:#17110B;color:var(--hero-text)}
.stop--win .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(227,162,28,.22)}
.stop .when{font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}
.stop--win .when{color:rgba(247,242,234,.66)}
.stop .money{font-family:var(--f-display);font-weight:800;font-size:1.75rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stop--win .money{color:var(--gold)}
.stop .label{font-size:.78rem;color:var(--text-secondary)}
.stop--win .label{color:rgba(247,242,234,.66)}
.stop h3{font-size:1.06rem;font-weight:700;margin-top:.5rem}
.stop p{font-size:.92rem;color:var(--text-secondary);line-height:1.55;margin:.35rem 0 0}
.stop--win p{color:rgba(247,242,234,.8)}
.track-note{margin-top:1.1rem;font-size:.88rem;color:var(--text-secondary);max-width:70ch}

/* ── les offres ── */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.3rem)}
@media (max-width:1080px){.offers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.offers{grid-template-columns:1fr}}
.card-o{
  position:relative;display:flex;flex-direction:column;gap:.5rem;
  background:var(--panel);border:1px solid var(--line);border-radius:15px;
  padding:clamp(1.3rem,2.6vw,1.7rem);
  transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}

.card-o--flag{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.o-flag{
  position:absolute;top:-.7rem;left:clamp(1.3rem,2.6vw,1.7rem);
  background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;border-radius:5px;
}
.o-n{font-family:var(--f-display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.o-sub{font-size:.86rem;color:var(--text-secondary)}
.o-p{font-family:var(--f-display);font-weight:800;font-size:2.3rem;letter-spacing:-.03em;line-height:1;margin-top:.4rem}
.o-back{font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.card-o ul{list-style:none;margin:.9rem 0 1.3rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.card-o li{position:relative;padding-left:1.15rem;font-size:.91rem;line-height:1.45;color:var(--ink-soft)}
.card-o li::before{content:"";position:absolute;left:0;top:.58em;width:.55rem;height:1.6px;background:var(--accent)}
.card-o .btn{margin-top:auto}
.o-note{font-size:.74rem;color:var(--text-secondary);margin-top:.6rem;line-height:1.4}

.lots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.3rem);margin-top:clamp(1.4rem,3vw,2rem)}
@media (max-width:1080px){.lots{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.lots{grid-template-columns:1fr}}
.lot{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:1.2rem;
  display:flex;flex-direction:column;gap:.3rem;
  transition:transform var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease)
}

.lot .q{font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}
.lot .n{font-family:var(--f-display);font-weight:800;font-size:1.1rem}
.lot .p{font-family:var(--f-display);font-weight:800;font-size:1.75rem;letter-spacing:-.02em;line-height:1.1}
.lot .d{font-size:.82rem;color:var(--text-secondary);line-height:1.45;margin-bottom:.7rem}
.lot .btn{margin-top:auto;font-size:.88rem;padding:.7rem 1rem}

/* ── questions ── */
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
@media (max-width:840px){.qa{grid-template-columns:1fr}}
.qa__item{border-top:1px solid var(--line);padding-top:1.1rem}
.qa__q{font-family:var(--f-display);font-weight:700;font-size:1.06rem;line-height:1.3;margin:0 0 .5rem}
.qa__a{font-size:.95rem;color:var(--text-secondary);line-height:1.6;margin:0}

/* ── se lancer ── */
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.2rem}
@media (max-width:520px){.contacts{grid-template-columns:1fr}}
.contacts a{
  display:flex;flex-direction:column;gap:.15rem;padding:.85rem 1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;text-decoration:none;
  transition:border-color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease-out)
}

.contacts .k{font-family:var(--f-mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.contacts .v{font-weight:600;color:var(--ink);font-size:.95rem}

.form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(1.4rem,3vw,2.1rem);display:grid;grid-template-columns:1fr 1fr;gap:.9rem;position:relative}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.form__head{grid-column:1/-1;margin-bottom:.3rem}
.form__head p{font-size:.9rem;color:var(--text-secondary);margin:0}
.f{display:flex;flex-direction:column;gap:.35rem}
.f--wide{grid-column:1/-1}
.f label{font-family:var(--f-mono);font-size:.6rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}
.f input,.f select,.f textarea{
  font-family:var(--f-body);font-size:.97rem;color:var(--ink);
  background:var(--canvas);border:1.5px solid var(--line);border-radius:9px;padding:.72rem .85rem;
  transition:border-color .28s var(--ease),background .28s var(--ease);width:100%;
}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);background:var(--panel);outline:none}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.form-note{font-size:.79rem;color:var(--text-secondary);margin:.6rem 0 0;text-align:center}
.form-ok{
  grid-column:1/-1;background:var(--accent-muted);border:1px solid var(--accent);border-radius:10px;
  padding:.9rem 1.1rem;font-size:.93rem;color:var(--accent-ink);display:none;
}
.form-ok.on{display:block}
.hp{position:absolute;left:-9999px}

/* ── la signature : dans votre poche ── */
.poche{
  position:fixed;left:clamp(.7rem,2vw,1.5rem);bottom:clamp(.7rem,2vw,1.5rem);z-index:50;
  background:rgba(23,17,11,.92);color:var(--hero-text);border:1px solid rgba(247,242,234,.16);
  border-radius:11px;padding:.6rem .85rem;backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:.16rem;pointer-events:none;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease-out);
  box-shadow:0 12px 34px rgba(20,12,4,.3);
}
.poche.on{opacity:1;transform:none}
.poche .k{font-family:var(--f-mono);font-size:.53rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(247,242,234,.6)}
.poche .v{font-family:var(--f-mono);font-weight:600;font-size:1.1rem;font-variant-numeric:tabular-nums;line-height:1.1}
.poche .v.neg{color:#E9A5A5}
.poche .v.pos{color:var(--gold)}
.poche .n{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.08em;color:rgba(247,242,234,.42);text-transform:uppercase}
@media (max-width:760px),(max-height:620px){.poche{display:none}}

/* la barre d'achat mobile */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  align-items:center;justify-content:space-between;gap:.8rem;
  background:rgba(23,17,11,.96);backdrop-filter:blur(12px);padding:.7rem clamp(.8rem,3vw,1.2rem);
  border-top:1px solid rgba(247,242,234,.14);
}
.bar .t{display:flex;flex-direction:column;color:var(--hero-text);font-size:.75rem;line-height:1.3}
.bar .t b{font-size:.9rem;font-weight:700}
.bar a{flex:none}
@media (max-width:760px){.bar{display:flex}body{padding-bottom:4.4rem}}

/* ── pied de page ── */
footer{background:#17110B;color:rgba(247,242,234,.72);padding:clamp(2.6rem,6vw,4rem) 0 clamp(1.6rem,4vw,2.4rem);margin-top:clamp(3rem,7vw,6rem)}
.foot__top{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center;padding-bottom:1.6rem;border-bottom:1px solid rgba(247,242,234,.13)}
footer .wordmark{color:var(--hero-text);text-shadow:none}
.foot__links{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}
.foot__links a{color:rgba(247,242,234,.72);text-decoration:none;font-size:.9rem;transition:color .28s var(--ease)}
.foot__links a:hover{color:var(--hero-text)}
.foot__legal{font-size:.76rem;line-height:1.65;color:rgba(247,242,234,.5);margin-top:1.5rem;max-width:100ch}

/* ═══════════════════════════════════════════════════════════════
   LE BLOC DE COMMANDE DES PLAQUES
   Des cartes pour comparer des produits différents, un sélecteur
   pour doser le même produit. Ici c'est la même plaque, donc on
   choisit une quantité et le récapitulatif suit tout seul.
   ═══════════════════════════════════════════════════════════════ */
.order{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1rem,2.4vw,1.8rem);
  align-items:start;margin-top:clamp(1.6rem,4vw,2.4rem);
}
@media (max-width:900px){.order{grid-template-columns:1fr}}

.tiers{display:flex;flex-direction:column;gap:.7rem}
.tier{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;
  background:var(--panel);border:1.5px solid var(--line);border-radius:13px;
  padding:clamp(.95rem,2vw,1.25rem);cursor:pointer;text-align:left;width:100%;
  font-family:var(--f-body);color:inherit;
  transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease),transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease);
}

.tier[aria-checked="true"]{
  border-color:var(--accent);background:var(--panel);
  box-shadow:0 0 0 1.5px var(--accent),0 14px 30px rgba(46,111,209,.14);
}
.tier__mark{
  width:1.15rem;height:1.15rem;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;transition:border-color .3s var(--ease);
}
.tier[aria-checked="true"] .tier__mark{border-color:var(--accent)}
.tier__mark::after{
  content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .3s var(--ease-out);
}
.tier[aria-checked="true"] .tier__mark::after{transform:scale(1)}
.tier__q{font-family:var(--f-display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;line-height:1.2}
.tier__d{font-size:.88rem;color:var(--text-secondary);line-height:1.45;grid-column:2;margin-top:.15rem}
.tier__p{font-family:var(--f-mono);font-weight:600;font-size:.95rem;white-space:nowrap;text-align:right}
.tier__p small{display:block;font-size:.62rem;font-weight:400;color:var(--text-secondary);letter-spacing:.06em;margin-top:.2rem}
.tier__flag{
  position:absolute;top:-.62rem;right:1rem;
  background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:.55rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:.26rem .55rem;border-radius:5px;
}
.tier--devis .tier__p{font-size:.82rem;color:var(--text-secondary)}

/* le récapitulatif, qui suit le palier choisi */
.recap{
  position:sticky;top:5.5rem;
  background:#17110B;color:var(--hero-text);border-radius:15px;
  padding:clamp(1.2rem,2.6vw,1.7rem);
}
@media (max-width:900px){.recap{position:static}}
.recap .kicker{color:rgba(247,242,234,.55)}
.recap__q{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:1rem}
.recap__l{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;font-size:.92rem}
.recap__l+.recap__l{border-top:1px solid rgba(247,242,234,.11)}
.recap__l span:first-child{color:rgba(247,242,234,.7)}
.recap__l span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.recap__l--total{padding-top:.8rem;margin-top:.3rem;border-top:1.5px solid rgba(247,242,234,.22)}
.recap__l--total span:first-child{color:var(--hero-text);font-weight:600}
.recap__l--total span:last-child{font-family:var(--f-display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em}
.recap__gain{
  margin-top:.9rem;padding:.85rem 1rem;border-radius:10px;
  background:rgba(227,162,28,.11);border:1px solid rgba(227,162,28,.3);
}
.recap__gain .k{font-family:var(--f-mono);font-size:.57rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,234,.62)}
.recap__gain .v{font-family:var(--f-display);font-weight:800;font-size:1.75rem;color:var(--gold);letter-spacing:-.02em;line-height:1.15;display:block;margin-top:.2rem;font-variant-numeric:tabular-nums}
.recap .btn{margin-top:1.1rem}
.recap__note{font-size:.72rem;color:rgba(247,242,234,.5);line-height:1.45;margin-top:.7rem}

/* les trois arguments, juste sous le bouton, là où naît le doute */
.assur{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.2rem);margin-top:clamp(1.6rem,4vw,2.4rem)}
@media (max-width:760px){.assur{grid-template-columns:1fr}}
.assur div{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem;
  display:flex;flex-direction:column;gap:.35rem;
}
.assur svg{width:1.3rem;height:1.3rem;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.2rem}
.assur b{font-family:var(--f-display);font-weight:700;font-size:1rem}
.assur p{margin:0;font-size:.87rem;color:var(--text-secondary);line-height:1.5}

/* ═══════════════ LES PAGES ANNEXES ═══════════════ */
.page-head{padding:clamp(7.5rem,13vw,10.5rem) 0 clamp(1.6rem,4vw,2.6rem)}
.page-head .h-xl{font-size:clamp(2.2rem,1.4rem + 3.6vw,4.2rem)}
.page-head .lead{margin-top:1.2rem;max-width:56ch}

.part{display:flex;gap:clamp(1rem,2.4vw,1.8rem);align-items:flex-start;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.part .l{
  font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:#fff;background:var(--accent);
  width:2.6rem;height:2.6rem;border-radius:9px;display:grid;place-items:center;flex:none;
}
.confid{
  background:var(--panel);border:1px solid var(--gold);border-left-width:4px;border-radius:12px;
  padding:clamp(1.2rem,2.6vw,1.8rem);margin-top:clamp(1.6rem,4vw,2.4rem);
}
.confid .k{
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.7rem;
}
.confid p{font-size:.94rem;color:var(--ink-soft);line-height:1.6}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.3rem);margin-top:1rem}
@media (max-width:840px){.quotes{grid-template-columns:1fr}}
.quotes p{
  margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1.2rem;font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.38;
  position:relative;
}
.quotes p::before{
  content:"";position:absolute;left:0;top:1.2rem;bottom:1.2rem;width:3px;background:var(--gold);border-radius:0 3px 3px 0;
}

.plan{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:clamp(1.3rem,3vw,2rem);margin-top:clamp(1.8rem,4vw,2.6rem)}
.plan__note{font-size:.85rem;color:var(--text-secondary);margin:0 0 1.2rem}
.plan__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;counter-reset:p}
.plan__list li{display:grid;grid-template-columns:auto auto 1fr;gap:.6rem;align-items:baseline;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.plan__list li:last-child{border-bottom:0;padding-bottom:0}
.plan__list .c{font-family:var(--f-mono);color:var(--accent-ink);font-size:.85rem}
.plan__list b{font-family:var(--f-mono);font-size:.9rem;font-weight:600}
.plan__list .d{font-size:.88rem;color:var(--text-secondary);line-height:1.5}
@media (max-width:640px){.plan__list li{grid-template-columns:auto 1fr}.plan__list .d{grid-column:1/-1}}

.note-proc{background:var(--canvas-deep);border:1px solid var(--line);border-radius:13px;padding:clamp(1.2rem,2.6vw,1.7rem);margin-top:clamp(1.4rem,3vw,2rem)}
.note-proc .k{font-family:var(--f-display);font-weight:700;font-size:1.04rem;margin-bottom:.5rem}
.note-proc p{font-size:.93rem;color:var(--ink-soft);line-height:1.6;margin:0}

.tab-wrap{overflow-x:auto;margin-top:clamp(1.4rem,3vw,2rem);border:1px solid var(--line);border-radius:13px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
th{font-family:var(--f-mono);font-size:.61rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}


/* Tous les survols qui déplacent quelque chose vivent ici : sur écran
   tactile un appui déclenche :hover et l'élément reste soulevé. */
@media (hover:hover) and (pointer:fine){
  .door:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,40,20,.13);border-color:var(--accent)}
  .door:hover::after{opacity:1}
  .card-o:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(60,40,20,.13)}
  .lot:hover{transform:translateY(-3px);border-color:var(--accent)}
  .contacts a:hover{border-color:var(--accent);transform:translateY(-2px)}
  .tier:hover{border-color:var(--accent);transform:translateY(-2px)}
  .tier:active{transform:scale(.99)}
}

/* ═══════════════════════════════════════════════════════════════
   LE HÉROS AU DÉFILEMENT, VERSION TÉLÉPHONE
   Le trafic vient de TikTok, donc du téléphone. Priver ces
   visiteurs du film revenait à construire la pièce maîtresse
   pour ceux qui viennent le moins.
   Une image 16:9 recadrée plein écran en portrait coupe la plaque
   en deux. Donc on ne recadre pas : la vidéo tient le haut dans
   son format, le texte vit en dessous sur le fond sombre, et le
   défilement pilote les deux.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .hero{height:260vh}
  .stage{background:#14100C}
  .stage video{height:50svh;object-fit:cover;object-position:62% 50%}
  .poster{height:50svh;background-position:62% 50%}
  .scrim{
    height:50svh;
    background:linear-gradient(180deg,rgba(18,11,4,.52) 0%,rgba(18,11,4,0) 26%,rgba(18,11,4,.22) 66%,#14100C 100%);
  }
  /* Le texte est sur un fond plein : plus besoin de voile par bande.
     Centré dans la place qui reste, sinon les bandes courtes laissent
     un trou noir entre la vidéo et les mots. */
  .band{top:50svh;left:0;right:0;bottom:0;align-items:center;padding:.8rem var(--gut) calc(1rem + 4.4rem)}
  .band::before{display:none}
  .band__in{max-width:none;margin-left:0}
  .band .h-hero{font-size:clamp(1.85rem,1.1rem + 4.6vw,2.7rem)}
  .band .sub{font-size:1rem;max-width:none;margin-top:.7rem}
  .band--settle{align-items:center;padding-top:.8rem}
  .band--settle .band__in{max-width:none}
  .band .row{flex-direction:column;gap:.6rem;margin-top:1.2rem}
  .band .row .btn{width:100%}
  .ring{bottom:auto;top:calc(50svh - 3.4rem)}
  .cue{display:none}
}

/* ═══════════════ LES PORTES DU HÉROS FIXE ═══════════════
   Il ne reste que deux cas où le film n'a pas sa place : un
   téléphone tenu couché, qui n'a aucune hauteur, et le mouvement
   réduit. Ces requêtes sont identiques au caractère près dans
   app.js, sinon un côté charge ce que l'autre cache.          */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:block}
}

/* écrans bas mais capables : on garde le défilement, on cache les surcouches */
@media (max-height:560px){.cue,.ring{display:none}}

/* ═══════════════ MOUVEMENT RÉDUIT ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;scroll-behavior:auto !important;
  }
  body{opacity:1;animation:none}
  .rv{opacity:1;transform:none}
  .under .scribble path{stroke-dashoffset:0}
  .divider .dash{stroke-dashoffset:0}
  .stars svg{opacity:1;transform:none}
  .pose__done li{opacity:1;transform:none}
  .env{animation:none}
  /* les transformations de position restent, par point de rupture */
  .poche{opacity:1;transform:none}
  .band--settle .sub,.band--settle .row{opacity:1;transform:none}
}

/* la pause globale : animation-play-state ne s'hérite pas,
   donc on frappe chaque élément et chaque pseudo directement */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ═══════════════════════════════════════════════════════════════
   V3 — LA BOUTIQUE
   Le film se termine, on tombe ici. Cette section doit se lire
   sans effort : une quantité, un prix, un bouton.
   ═══════════════════════════════════════════════════════════════ */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── le récapitulatif (hérite du .recap sombre existant) ─────── */
.recap__t{font-family:var(--f-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;margin:0 0 1rem}
.recap__line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.52rem 0;font-size:.93rem}
.recap__line+.recap__line{border-top:1px solid rgba(247,242,234,.11)}
.recap__line span{color:rgba(247,242,234,.72)}
.recap__line strong{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.recap__line--soft strong{color:rgba(247,242,234,.8);font-weight:400}
.recap__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-top:.85rem;margin-top:.35rem;border-top:1.5px solid rgba(247,242,234,.22);
}
.recap__total span{font-weight:600}
.recap__total strong{
  font-family:var(--f-display);font-weight:800;font-size:1.75rem;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.recap__gainT{font-family:var(--f-mono);font-size:.57rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,234,.62);margin:0}
.recap__gainV{font-family:var(--f-display);font-weight:800;font-size:1.75rem;color:var(--gold);letter-spacing:-.02em;line-height:1.15;margin:.2rem 0 0;font-variant-numeric:tabular-nums}
.recap__line--free strong{color:var(--gold);font-weight:600}
.recap__line--free s{margin-right:.45rem;font-weight:400;color:rgba(247,242,234,.45);text-decoration-thickness:1px}
.recap__fine{font-size:.72rem;color:rgba(247,242,234,.5);line-height:1.5;margin:.75rem 0 0}
.recap__err{
  margin:.7rem 0 0;padding:.6rem .8rem;border-radius:9px;font-size:.85rem;line-height:1.45;
  background:rgba(214,69,69,.16);border:1px solid rgba(214,69,69,.5);color:#FFD9D9;
}
.btn--big{width:100%;margin-top:1.1rem;padding:1.05rem 1.3rem;font-size:1.02rem}
.btn--sm{padding:.6rem 1rem;font-size:.87rem}

/* ═══════════════════════════════════════════════════════════════
   V3 — LA CONFIRMATION
   ═══════════════════════════════════════════════════════════════ */
.page-merci{background:var(--canvas)}
.merci{padding:clamp(5.5rem,12vw,8rem) 0 clamp(3rem,7vw,5rem)}
.merci__in{max-width:640px}
.merci__tick{color:var(--accent);width:3.6rem;height:3.6rem;margin-bottom:1.2rem}
.merci__tick svg{width:100%;height:100%;stroke-dasharray:180;animation:tick 900ms var(--ease-out) both}
@keyframes tick{from{stroke-dashoffset:180;opacity:0}to{stroke-dashoffset:0;opacity:1}}
.merci__t{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(2.2rem,6.5vw,3.6rem);margin:.4rem 0 .7rem}
.merci__lede{font-size:1.05rem;color:var(--text-secondary);line-height:1.6;margin:0 0 clamp(1.6rem,4vw,2.2rem)}
.merci__card{background:#17110B;color:var(--hero-text);border-radius:15px;padding:clamp(1.1rem,2.6vw,1.5rem);margin-bottom:clamp(1.6rem,4vw,2.2rem)}
.merci__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;font-size:.93rem}
.merci__row+.merci__row{border-top:1px solid rgba(247,242,234,.11)}
.merci__row span{color:rgba(247,242,234,.72)}
.merci__row strong{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;word-break:break-word}
.merci__row--soft strong{font-weight:400;color:rgba(247,242,234,.8)}
.merci__row--tot{padding-top:.8rem;margin-top:.3rem;border-top:1.5px solid rgba(247,242,234,.22)}
.merci__row--tot span{font-weight:600;color:var(--hero-text)}
.merci__row--tot strong{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.merci__next{list-style:none;counter-reset:n;padding:0;margin:0 0 clamp(1.8rem,4vw,2.4rem);display:grid;gap:.7rem}
.merci__next li{counter-increment:n;position:relative;padding:.95rem 1.1rem .95rem 3.1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  font-size:.88rem;color:var(--text-secondary);line-height:1.55}
.merci__next li::before{content:counter(n);position:absolute;left:1.05rem;top:.95rem;
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.merci__next li strong{display:block;font-family:var(--f-display);font-weight:700;font-size:.98rem;color:var(--ink);margin-bottom:.2rem}
.row--center{display:flex;flex-wrap:wrap;gap:.7rem}


/* ═══════════════════════════════════════════════════════════════
   LE LOGO CASEAVIS
   Reconstruit en texte plutot qu en image : il reste net a toutes
   les tailles, se recolore selon le fond, et ne coute aucun octet.
   Le point du i est remplace par l etoile de la marque, d ou le i
   sans point (U+0131) dans le HTML.
   ═══════════════════════════════════════════════════════════════ */
.logo{
  --etoile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 90'%3E%3Cpolygon points='48,0 60,34 96,34 67,56 78,90 48,70 18,90 29,56 0,34 36,34'/%3E%3C/svg%3E");
  display:inline-flex;align-items:baseline;text-decoration:none;
  font-family:var(--f-display);font-weight:700;font-size:1.42rem;
  letter-spacing:-.022em;line-height:1;white-space:nowrap;
}
.logo__case,.logo__avis{transition:color var(--t-hover) var(--ease),text-shadow var(--t-hover) var(--ease)}
.logo__case{color:var(--logo-ink)}
.logo__avis{color:var(--logo-blue)}
.logo__i{position:relative}
.logo__i::after{
  content:"";position:absolute;left:50%;bottom:.94em;
  width:.44em;height:.42em;transform:translateX(-50%);
  background:var(--gold);
  -webkit-mask:var(--etoile) center/contain no-repeat;
          mask:var(--etoile) center/contain no-repeat;
}
/* sur le film : le noir devient creme, le bleu s eclaircit pour rester lisible */
.nav .logo__case{color:var(--hero-text);text-shadow:var(--tshadow)}
.nav .logo__avis{color:var(--logo-blue-clair);text-shadow:var(--tshadow)}
.nav--solid .logo__case{color:var(--logo-ink);text-shadow:none}
.nav--solid .logo__avis{color:var(--logo-blue);text-shadow:none}
footer .logo{font-size:1.55rem}
footer .logo__case{color:var(--hero-text)}
footer .logo__avis{color:var(--logo-blue-clair)}

/* ═══════════════════════════════════════════════════════════════
   V3 — LA PAGE DE PAIEMENT
   Le formulaire de carte est fourni par Stripe, mais il est monte
   dans cette page : meme entete, meme charte, meme domaine. Le
   visiteur ne quitte jamais le site.
   ═══════════════════════════════════════════════════════════════ */

.page-pay{background:var(--canvas)}
.pay{padding:clamp(5.5rem,11vw,7.5rem) 0 clamp(3rem,7vw,5rem)}
.pay__back{
  font-size:.88rem;font-weight:600;color:var(--text-secondary);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.pay__back:hover{color:var(--accent-ink);border-color:var(--accent)}
.pay__head{margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.pay__t{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(1.9rem,5vw,2.9rem);margin:.45rem 0 0;
}

.pay__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);gap:clamp(1.4rem,3.5vw,2.6rem);align-items:start}
@media (max-width:900px){.pay__grid{grid-template-columns:minmax(0,1fr)}}
/* ⚠ display:grid l’emporte sur l’attribut hidden : sans cette ligne, le
   formulaire restait affiché (tirets, champs vides) pendant le chargement
   ET sous le message d’erreur quand la caisse ne peut pas s’ouvrir. */
.pay__grid[hidden]{display:none}
.pay__main{min-width:0;display:grid;gap:clamp(1rem,2.5vw,1.5rem)}

.pay__block{
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:clamp(1.1rem,2.6vw,1.5rem);margin:0;min-width:0;
}
.pay__lg{
  font-family:var(--f-display);font-weight:700;font-size:1.08rem;
  color:var(--ink);padding:0;margin-bottom:.9rem;
}
.pay__lab{display:block;font-size:.9rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.pay__inp{
  width:100%;font-family:var(--f-body);font-size:15px;color:var(--ink);
  background:var(--panel);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;outline:none;
  transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease);
}
.pay__inp:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.pay__inp:invalid:not(:placeholder-shown){border-color:#C2412D}
.pay__hint{font-size:.78rem;color:var(--text-secondary);margin:.4rem 0 1.1rem;line-height:1.5}

.pay__err{
  margin:0;padding:.8rem 1rem;border-radius:12px;font-size:.9rem;line-height:1.5;
  background:rgba(194,65,45,.1);border:1px solid rgba(194,65,45,.42);color:#8C2A1B;
}

.pay__fatal{
  border:1px solid rgba(194,65,45,.42);background:rgba(194,65,45,.08);
  border-radius:14px;padding:clamp(1.2rem,3vw,1.8rem);max-width:56ch;
}
.pay__fatal p{margin:0 0 1rem;font-size:1rem;line-height:1.6;color:var(--ink-soft)}

/* le squelette pendant que Stripe se charge : la page ne saute pas */
.pay__skel{display:grid;gap:.9rem;max-width:640px}
.pay__skel[hidden]{display:none}
.pay__skelBar{height:1.1rem;border-radius:9px;background:var(--canvas-deep);animation:skel 1.4s var(--ease) infinite}
@keyframes skel{0%,100%{opacity:.55}50%{opacity:1}}

.pay__side .recap{position:sticky;top:5.5rem}
@media (max-width:900px){.pay__side .recap{position:static}}
.page-pay .recap__t{font-size:1.2rem}

/* Stripe monte ses champs ici : on leur donne la meme respiration
   que le reste du formulaire. */
#adresse,#carte{min-width:0}
#adresse{margin-top:.2rem}

/* ═══ Le choix de la livraison ═══════════════════════════════════
   Deux cartes cliquables plutôt que deux boutons radio nus : sur un
   téléphone, la cible fait toute la largeur, et le prix de chaque
   option se lit sans avoir à comparer deux lignes de texte. */
.livr{display:grid;gap:.7rem;margin-bottom:.2rem}
@media (min-width:560px){.livr{grid-template-columns:1fr 1fr}}

.livr__opt{display:block;cursor:pointer;min-width:0}
.livr__opt input{position:absolute;opacity:0;width:0;height:0}

.livr__box{
  display:grid;gap:.22rem;height:100%;
  border:1.5px solid var(--line);border-radius:12px;
  padding:.85rem .95rem;background:var(--canvas);
  transition:border-color var(--t-hover) var(--ease),
             background-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.livr__opt:hover .livr__box{border-color:var(--accent-muted);background:var(--panel)}
.livr__opt input:checked + .livr__box{
  border-color:var(--accent);background:var(--accent-muted);
  box-shadow:0 0 0 3px rgba(29,77,255,.09);
}
/* Le focus clavier doit rester visible : le radio est masqué, c'est
   donc la carte qui porte l'anneau. */
.livr__opt input:focus-visible + .livr__box{
  outline:2px solid var(--accent);outline-offset:2px;
}

.livr__nom{font-family:var(--f-display);font-weight:700;font-size:.98rem;color:var(--ink)}
.livr__desc{font-size:.79rem;line-height:1.45;color:var(--text-secondary)}
.livr__prix{font-weight:700;font-size:.92rem;color:var(--accent-ink);margin-top:.15rem}

.livr__apres{margin-top:1.05rem}
.livr__apres .pay__hint{margin-bottom:0}
.livr__apres .pay__hint a{color:var(--accent-ink);font-weight:600}

/* Le widget Mondial Relay apporte son propre balisage : on lui donne
   une hauteur de travail et le même cadre que le reste du formulaire. */
#mrWidget{min-height:360px;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
#mrWidget .leaflet-container{border-radius:0}
/* Vide = carte Sendcloud (elle s'ouvre par-dessus la page) : pas de cadre. */
#mrWidget:empty{display:none}
#spBtn+.pay__hint{margin-top:.6rem}

/* ═══ La formation sur la page de confirmation ═══════════════════
   Le bloc le plus fort de la page : c est le produit qu on vient
   d acheter, et il est livre tout de suite. Le code est en mono,
   en gros, detachable du regard. */
.merci__forma{
  border:1.5px solid var(--accent);background:var(--accent-muted);
  border-radius:15px;padding:clamp(1.1rem,2.8vw,1.5rem);
  margin-bottom:clamp(1rem,2.4vw,1.3rem);
}
.merci__formaT{
  font-family:var(--f-display);font-weight:800;font-size:1.12rem;
  color:var(--ink);margin:0 0 .4rem;
}
.merci__formaP{
  font-size:.9rem;line-height:1.6;color:var(--ink-soft);
  margin:0 0 .9rem;max-width:52ch;
}
.merci__code{
  font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:clamp(1.15rem,4.6vw,1.5rem);letter-spacing:.11em;
  color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:.75rem .6rem;text-align:center;
  margin:0 0 1rem;word-break:break-all;
}
.merci__formaN{
  font-size:.79rem;color:var(--ink-soft);opacity:.85;margin:.85rem 0 0;
}

/* ═══════════════ LA PAGE CONDITIONS DE VENTE ═══════════════
   Sobre : une colonne de lecture, des sections séparées par des
   filets fins, titres en petites majuscules grises (pas de cartes). */
.page-cgv{background:var(--canvas)}
.cgv{padding:clamp(5.5rem,11vw,7.5rem) 0 clamp(2rem,5vw,3rem)}
.cgv__in{max-width:760px}
.cgv__t{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(1.9rem,5vw,2.9rem);margin:.45rem 0 .5rem;
}
.cgv__maj{font-size:.85rem;color:var(--text-secondary);margin:0}
.cgv__som{
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;
  margin:clamp(1.4rem,3.5vw,2rem) 0 0;padding:1rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cgv__som a{font-size:.85rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.cgv__som a:hover{color:var(--accent-ink);border-color:var(--accent)}
.cgv__s{padding:clamp(1.3rem,3vw,1.8rem) 0;border-bottom:1px solid var(--line);scroll-margin-top:5rem}
.cgv__h{
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
  margin:0 0 .9rem;
}
.cgv__s p,.cgv__s li{font-size:.95rem;line-height:1.65;color:var(--ink-soft)}
.cgv__s ul{margin:0 0 1.05em;padding-left:1.15rem}
.cgv__s li+li{margin-top:.4rem}
.cgv__s strong{color:var(--ink);font-weight:700}
.cgv__s a{color:var(--accent-ink)}
/* min-width:0 : la règle globale table{min-width:520px} débordait à 375 px. */
.cgv__tab{width:100%;min-width:0;border-collapse:collapse;margin:0 0 1.05em;font-size:.9rem}
.cgv__tab th{
  text-align:left;font-weight:600;color:var(--text-secondary);font-size:.8rem;
  padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--line);
}
.cgv__tab td{padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cgv__tab td+td,.cgv__tab th+th{text-align:right}

/* Le lien vers les conditions, juste avant le bouton de paiement. */
.recap__cgv{font-size:.8rem;line-height:1.5;color:var(--text-secondary);margin:.9rem 0 0}
.recap__cgv + .btn--big{margin-top:.8rem}
.recap__cgv a{color:var(--ink-soft)}

.recap__line s{
  margin-right:.3rem;font-weight:400;color:rgba(247,242,234,.45);
  text-decoration-thickness:1px;
}