/* ───────────────────────────── TOKENS ───────────────────────────── */
:root{
  --paper:#FBFAF8;
  --paper-2:#F3F1EC;
  --ink:#0C1424;
  --blue:#2B7FFF;
  --yellow:#FEBD2F;
  --rule:#DFDCD4;
  --muted:#6B6A66;
  --green:#12874A;      /* l'argent qui rentre */
  --green-soft:#E4F2E8;
  --blue-soft:#E6EFFF;
  --yellow-soft:#FFF2CF;
  --red:#C8452F;        /* l'argent qui sort */

  --display:"Space Grotesk","Plus Jakarta Sans",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.9,.24,1);
  --gutter:clamp(1.25rem,5vw,4rem);
  --section:clamp(4.5rem,10vw,8rem);
  --maxw:78rem;
}

/* ───────────────────────────── BASE ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);font-size:1.0625rem;line-height:1.72;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  position:relative;
}

/* ── L'AMBIANCE DU FOND ──
   Le papier blanc seul sonnait vide. On ne met ni dégradé bleu ni
   blob flouté (ça ferait template) : on imite une vraie feuille.
   Trois couches, toutes derrière le contenu et toutes très basses en
   intensité — si on les remarque, c'est qu'elles sont trop fortes.

   1. la trame typographique : deux filets verticaux qui rappellent
      la colonne de texte, plus une lueur chaude en haut de page ;
   2. le grain de papier : un bruit SVG en data-URI, pas d'image à
      charger, 3 % d'opacité, fixe pour qu'il ne « glisse » pas ;
   3. les sections claires gardent leur fond, l'encre reste opaque.  */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}

/* la respiration verticale : le papier n'est pas d'un blanc uniforme,
   il se creuse légèrement au milieu de la page.                      */
body{background-image:linear-gradient(180deg,
  var(--paper) 0%, #F6F3ED 42%, #F6F3ED 62%, var(--paper) 100%);
  background-attachment:fixed}

body::before{
  background:
    /* la lueur chaude en haut : c'est elle qui donne le grain de jour */
    radial-gradient(115% 55% at 50% -8%, rgba(254,189,47,.20), transparent 64%),
    /* une seconde, froide, en bas à gauche, pour que ce ne soit pas plat */
    radial-gradient(85% 55% at 6% 106%, rgba(43,127,255,.13), transparent 62%),
    /* les deux filets de colonne, alignés sur la largeur de lecture */
    linear-gradient(90deg, transparent calc(50% - 39rem), var(--rule) calc(50% - 39rem),
      var(--rule) calc(50% - 39rem + 1px), transparent calc(50% - 39rem + 1px),
      transparent calc(50% + 39rem), var(--rule) calc(50% + 39rem),
      var(--rule) calc(50% + 39rem + 1px), transparent calc(50% + 39rem + 1px));
}

body::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.055;mix-blend-mode:multiply;
}

/* le contenu passe devant les trois couches */
body > *{position:relative;z-index:1}

/* Écrans étroits : les filets de colonne tomberaient hors cadre.     */
@media(max-width:900px){
  body::before{background:
    radial-gradient(135% 42% at 50% -6%, rgba(254,189,47,.19), transparent 62%),
    radial-gradient(95% 40% at 0% 104%, rgba(43,127,255,.12), transparent 62%)}
  body::after{opacity:.045}
}
@media (prefers-reduced-motion:reduce){body::after{opacity:.03}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.h-xl{font-family:var(--display);font-weight:600;
  font-size:clamp(2.5rem,7.2vw,5.4rem);line-height:1.0;letter-spacing:-.042em}
.h-l{font-family:var(--display);font-weight:600;
  font-size:clamp(1.85rem,3.8vw,2.9rem);line-height:1.06;letter-spacing:-.035em}
.h-m{font-family:var(--display);font-weight:600;font-size:1.32rem;line-height:1.18;letter-spacing:-.028em}
em.it{font-family:var(--display);font-style:normal;font-weight:400;color:var(--blue);letter-spacing:-.042em}
.lead{font-size:1.16rem;line-height:1.68;color:#3A3A38}
.muted{color:var(--muted)}
.small{font-size:.9rem;line-height:1.6}
.tnum{font-variant-numeric:tabular-nums lining-nums}

.kicker{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.rule{height:1px;background:var(--rule);border:0}

.u-link{text-decoration:none;background-image:linear-gradient(var(--blue),var(--blue));
  background-size:100% 1px;background-repeat:no-repeat;background-position:left 100%;
  padding-bottom:1px;transition:background-size .4s var(--ease);color:var(--blue);font-weight:600}
.u-link:hover{background-size:0% 1px}

.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--sans);
  font-size:.9rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;padding:1rem 1.7rem;border:1px solid var(--ink);background:transparent;
  color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--blue);border-color:var(--blue)}
.btn--light{border-color:rgba(255,255,255,.4);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--full{width:100%;justify-content:center}

.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ── LES TITRES SE LÈVENT DERRIÈRE UNE FENÊTRE ──
   Le <span> est enveloppé en JS ; le titre devient une fente et la ligne
   remonte depuis le dessous. C'est le mouvement le plus lisible de la page. */
.masked{overflow:hidden;padding-bottom:.08em}
.masked > .rl{display:block;transform:translateY(115%);
  transition:transform 1s cubic-bezier(.16,.84,.28,1) .05s}
.rv.in .masked > .rl{transform:none}

/* ── CASCADE ──
   Les enfants d'une liste, d'un menu ou d'une grille arrivent un par un.
   L'index --i est posé en JS sur chaque enfant.                          */
@keyframes riseIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.rv.in .st > *{animation:riseIn .75s var(--ease) both;
  animation-delay:calc(var(--i,0) * 80ms + .12s)}

/* l'équation s'écrit terme par terme */
.rv.in .eq > *{animation:riseIn .6s var(--ease) both;
  animation-delay:calc(var(--i,0) * 130ms + .15s)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .masked > .rl{transform:none;transition:none}
  .rv.in .st > *,.rv.in .eq > *{animation:none}
}
.no-js .rv{opacity:1;transform:none}
.no-js .masked > .rl{transform:none}

/* ───────────────────────────── NAV ───────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.wordmark{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;
  text-decoration:none;line-height:1;white-space:nowrap}
.wordmark .av{color:var(--blue)}
.wordmark .i{position:relative}
.wordmark .i .st{position:absolute;top:-.32em;left:50%;transform:translateX(-50%);font-size:.42em;color:var(--yellow)}
/* « Revendeurs » n'est pas un lien de menu : c'est l'étiquette de cette
   déclinaison du site. Avec un simple filet et la même couleur que les
   liens, on le lisait comme une sixième rubrique. On en fait une
   pastille pleine, collée au logo — impossible de la confondre.      */
.nav__tag{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border-radius:3px;
  padding:.28rem .5rem .24rem;margin-left:.55rem;white-space:nowrap;
  align-self:center;line-height:1}
.nav__links{display:none;gap:1.7rem;font-size:.9rem;font-weight:500}
.nav__links a{text-decoration:none;color:var(--muted);transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__links .sep{color:var(--rule)}
@media(min-width:1020px){.nav__links{display:flex}}
/* les libellés de nav sont contextuels (« commander mes plaques »,
   « les offres ») donc plus longs que l'ancien « commencer » : le
   bouton se resserre bien avant que les liens n'apparaissent, sinon
   il déborde de l'en-tête entre 560 et 1020 px.                     */
@media(max-width:820px){
  .nav__tag{display:none}
  .nav .btn{padding:.72rem 1.05rem;font-size:.74rem;letter-spacing:.06em}
  .wordmark{font-size:1.18rem}
}
@media(max-width:420px){
  .nav .btn{padding:.66rem .8rem;font-size:.68rem;letter-spacing:.04em}
}

/* ───────────────────────────── OUVERTURE ───────────────────────────── */
.open{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.open__meta{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  border-bottom:1px solid var(--ink);padding-bottom:.85rem;margin-bottom:clamp(2rem,5vw,3.4rem)}
.open__meta .r{text-align:right}
@media(max-width:640px){.open__meta .r{display:none}}
.open h1{max-width:none}
/* Soulignage « cinq euros » — deux traits tracés à la main, en SVG.
   Le trait déborde du mot, part en biais et repasse une seconde fois :
   c'est une annotation au marqueur, pas une barre de surlignage.
   vector-effect garde l'épaisseur constante malgré l'étirement du viewBox,
   et stroke-width est en em → le trait grossit avec le titre.        */
.open h1 .under{position:relative;white-space:nowrap;display:inline-block}
.scribble{position:absolute;left:-.07em;bottom:-.19em;width:calc(100% + .16em);height:.30em;
  overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--yellow);stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.05s var(--ease) .5s}
.scribble path:nth-child(1){stroke-width:.075em}
.scribble path:nth-child(2){stroke-width:.042em;opacity:.5;transition-duration:.75s;transition-delay:1.05s}
.open.in .scribble path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.scribble path{stroke-dashoffset:0;transition:none}}
.no-js .scribble path{stroke-dashoffset:0}
.open__foot{display:grid;gap:1.8rem;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
@media(min-width:900px){
  .open__foot{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(2rem,5vw,4rem)}
  .open__intro{justify-self:end;max-width:38ch}
}
.open__intro{border-top:1px solid var(--rule);padding-top:1rem;font-size:1.04rem;color:#3A3A38}

.facts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink);margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding:1.4rem 1.2rem 1.4rem 0;border-bottom:1px solid var(--rule)}
@media(min-width:760px){.fact{border-bottom:0;border-right:1px solid var(--rule);padding-left:1.2rem}
  .fact:first-child{padding-left:0}.fact:last-child{border-right:0}}
.fact b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.4vw,2.7rem);
  line-height:1;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums}
.fact span{display:block;font-size:.84rem;color:var(--muted);margin-top:.5rem;line-height:1.45}

/* ── LE CALCUL, TOUT DE SUITE ──
   Trois cases colorées sous le titre : c'est la première chose que voit
   quelqu'un qui arrive de TikTok, avant même de scroller.              */
.hook{display:flex;border:1px solid var(--ink);margin-top:clamp(1.5rem,3vw,2.1rem);
  max-width:40rem;overflow:hidden}
.hook > div{flex:1;padding:.85rem .7rem;text-align:center;position:relative}
.hook .k{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;opacity:.65;line-height:1.3}
.hook .v{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,3.6vw,1.85rem);letter-spacing:-.045em;margin-top:.3rem;line-height:1;
  font-variant-numeric:lining-nums tabular-nums}
.hook .c2{background:var(--blue-soft);color:#0A3D91;border-inline:1px solid var(--ink)}
.hook .c3{background:var(--green);color:#fff}
.hook .c3 .k{opacity:.85}

/* ── QUI PARLE ── */
.proof{background:var(--ink);color:var(--paper)}
.proof .in-w{display:grid;gap:clamp(1.5rem,3vw,3rem);padding-block:clamp(3rem,6vw,4.5rem)}
@media(min-width:880px){.proof .in-w{grid-template-columns:.85fr 1.15fr;align-items:start}}
.proof h2{color:var(--paper)}
.proof p{color:#B8BCC6;font-size:1.02rem}
.proof .facts-min{display:grid;gap:.9rem;margin-top:1.4rem}
.proof .facts-min li{display:flex;gap:.8rem;font-size:.97rem;color:#D5D9E0;align-items:flex-start}
.proof .facts-min li::before{content:"";flex:0 0 auto;width:.5rem;height:.5rem;margin-top:.55rem;
  background:var(--yellow)}
.proof .warn{margin-top:1.6rem;border-left:2px solid var(--yellow);padding-left:1rem;
  font-size:.95rem;color:#D5D9E0}

/* ── L'OFFRE 19 € EN BLEU PLEIN ── */
.offer{background:var(--blue);color:#fff;padding:clamp(1.8rem,4vw,2.8rem);
  margin-top:clamp(2.5rem,5vw,3.5rem)}
.offer .o-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:1rem;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1.1rem}
.offer .o-name{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,1.9rem);
  letter-spacing:-.035em}
.offer .o-price{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,4rem);
  letter-spacing:-.06em;line-height:.9}
.offer .o-price small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-top:.5rem}
.offer ul{display:grid;gap:.7rem;margin:1.3rem 0 1.6rem}
@media(min-width:760px){.offer ul{grid-template-columns:1fr 1fr;column-gap:2rem}}
.offer li{font-size:.99rem;padding-left:1.5rem;position:relative}
.offer li::before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:700}
.offer .btn{border-color:#fff;background:#fff;color:var(--blue);font-size:1rem;padding:1.1rem 2rem}
.offer .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.offer .o-note{font-size:.85rem;opacity:.9;margin-top:1rem}
.offer .o-note b{color:var(--yellow)}

/* ── LE TOURNIQUET D'OFFRES ──
   Quatre cartes qu'on fait défiler au doigt (scroll-snap natif), avec
   flèches et pastilles. Chaque carte a sa couleur pour qu'on sente
   qu'on change d'offre en swipant.                                     */
/* les cartes de côté sortent du cadre en 3D : on coupe à l'horizontale
   sans créer de barre de défilement (clip, pas hidden), avec une marge
   pour ne pas rogner l'ombre de la carte active.                       */
.carou-wrap{margin-top:clamp(2rem,4vw,3rem);position:relative;
  overflow-x:clip;overflow-clip-margin:28px}
.carou{display:flex;gap:clamp(.8rem,2vw,1.2rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carou::-webkit-scrollbar{display:none}
.card-o{flex:0 0 min(84%,21rem);scroll-snap-align:start;display:flex;flex-direction:column;
  border:1px solid var(--ink);padding:1.5rem 1.4rem 1.6rem;background:var(--paper);position:relative}
@media(min-width:760px){.card-o{flex-basis:min(46%,20rem)}}
@media(min-width:1100px){.card-o{flex-basis:calc(25% - .9rem)}}
.card-o .o-flag{position:absolute;top:-1px;right:-1px;background:var(--ink);color:var(--yellow);
  font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .6rem}
/* le flyer occupe le haut de la carte, à fond perdu */
.card-o .o-img{display:block;width:calc(100% + 2.8rem);margin:-1.5rem -1.4rem 1.2rem;
  aspect-ratio:5/4;object-fit:cover;background:var(--paper);
  border-bottom:1px solid rgba(12,20,36,.14)}
.card-o .o-n{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.03em}
.card-o .o-sub{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:.35rem}
.card-o .o-p{font-family:var(--display);font-weight:700;font-size:2.9rem;letter-spacing:-.06em;
  line-height:1;margin:1.1rem 0 .2rem;font-variant-numeric:lining-nums tabular-nums}
.card-o .o-back{display:inline-block;font-size:.76rem;font-weight:700;background:var(--green-soft);
  color:#0B5C33;padding:.35rem .6rem;margin-bottom:1.1rem}
.card-o ul{display:grid;gap:.55rem;margin-bottom:1.4rem;flex:1}
.card-o li{font-size:.9rem;line-height:1.5;padding-left:1.15rem;position:relative;color:#3A3A38}
.card-o li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700;font-size:.85rem}
.card-o .btn{width:100%;justify-content:center;font-size:.8rem;padding:.95rem 1rem}
/* variantes colorées */
.card-o--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.card-o--blue .o-sub{color:rgba(255,255,255,.8)}
.card-o--blue li{color:rgba(255,255,255,.94)}
.card-o--blue li::before{color:var(--yellow)}
.card-o--blue .o-back{background:rgba(255,255,255,.16);color:#fff}
.card-o--blue .btn{background:#fff;border-color:#fff;color:var(--blue)}
.card-o--blue .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.card-o--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.card-o--ink .o-sub{color:#8A90A0}
.card-o--ink li{color:#D5D9E0}
.card-o--ink li::before{color:var(--yellow)}
.card-o--ink .o-p{color:var(--yellow)}
.card-o--ink .btn{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.card-o--ink .btn:hover{background:#fff;border-color:#fff}
.card-o--sand{background:var(--yellow-soft);border-color:var(--ink)}
/* ── MODE 3D (activé par le JS) ──
   Les cartes ne défilent plus à plat : elles tournent en perspective.
   Celle du milieu est de face, les voisines partent en biais et
   s'estompent. On tourne au doigt, aux flèches, ou en cliquant une
   carte de côté. Sans JS, on garde le défilement à plat au-dessus.    */
.carou--3d{display:block;position:relative;overflow:visible;padding-bottom:0;
  perspective:1500px;height:var(--carou-h,42rem);scroll-snap-type:none;
  touch-action:pan-y;cursor:grab}
.carou--3d:active{cursor:grabbing}
.carou--3d .card-o{position:absolute;top:0;left:50%;width:min(86%,21rem);
  margin-left:calc(min(86%,21rem) / -2);flex:none;
  transition:transform .6s var(--ease),opacity .6s var(--ease),box-shadow .35s var(--ease);
  will-change:transform,opacity;backface-visibility:hidden}
.carou--3d .card-o.is-side{cursor:pointer}
.carou--3d .card-o.is-active{box-shadow:0 18px 50px rgba(12,20,36,.18)}
@media (prefers-reduced-motion:reduce){.carou--3d .card-o{transition:none}}

/* commandes */
.carou-ui{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem}
.dots{display:flex;gap:.45rem}
.dots button{width:.55rem;height:.55rem;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--rule);transition:background .25s,transform .25s}
.dots button[aria-current="true"]{background:var(--ink);transform:scale(1.25)}
.arrows{display:flex;gap:.5rem}
.arrows button{width:2.4rem;height:2.4rem;border:1px solid var(--ink);background:transparent;
  cursor:pointer;font-size:1rem;line-height:1;color:var(--ink);transition:background .25s,color .25s}
.arrows button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.arrows button:disabled{opacity:.28;cursor:default}
.swipe-hint{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
/* en 3D une seule carte est lisible : les flèches restent visibles
   à toutes les tailles. Elles ne disparaissent que sans JS, quand le
   tourniquet redevient un simple défilement horizontal.               */
.no-js .arrows,.no-js .dots{display:none}

/* ── BARRE D'ACHAT COLLANTE (mobile) ── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:.8rem;padding:.65rem .9rem;
  box-shadow:0 -8px 30px rgba(12,20,36,.22);transform:translateY(115%);
  transition:transform .38s var(--ease)}
.bar.on{transform:none}
.bar .t{flex:1;font-size:.72rem;line-height:1.25;color:#AEB5C2}
.bar .t b{display:block;font-family:var(--display);font-size:1rem;letter-spacing:-.03em;color:#fff}
.bar a{flex:0 0 auto;background:var(--yellow);color:var(--ink);text-decoration:none;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.85rem 1.1rem;white-space:nowrap}
@media(min-width:900px){.bar{display:none}}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* ── les deux portes (sommaire) ── */
/* sur l'accueil, les portes sont l'action principale : elles montent
   juste sous le titre et gagnent un filet plus marqué.                */
.doors{border-top:2px solid var(--ink);margin-top:clamp(2rem,4vw,2.8rem);display:grid}
@media(min-width:880px){.doors{grid-template-columns:1fr 1fr}}
.door{display:block;text-decoration:none;padding:1.9rem 0 2.1rem;border-bottom:1px solid var(--rule);
  transition:padding-left .35s var(--ease)}
@media(min-width:880px){
  .door{padding:2.1rem 2.6rem 2.4rem 0;border-bottom:0}
  .door+.door{border-left:1px solid var(--rule);padding-left:2.6rem;padding-right:0}
  .door:hover{padding-left:.6rem}
  .door+.door:hover{padding-left:3.2rem}
}
.door .l{display:block;font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:.9;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #B9B6AE;margin-bottom:.9rem}
.door:hover .l{-webkit-text-stroke-color:var(--blue)}
.door h3{margin-bottom:.35rem}
.door .said{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink);margin-bottom:.6rem}
.door p{font-size:.96rem;color:var(--muted)}
.door .go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:.78rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.door .go::after{content:"→";transition:transform .3s var(--ease)}
.door:hover .go::after{transform:translateX(5px)}

/* ───────────────────────────── LA PHOTO ─────────────────────────────
   Photo verticale (3:4) : elle occupe une colonne étroite comme une
   planche de magazine, la légende s'installe à côté, centrée sur elle.
   C'est la seule couleur vive de la page — elle reste donc contenue.    */
.shot{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:clamp(1.3rem,3vw,2rem)}
@media(min-width:820px){
  .shot{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
    align-items:center;gap:clamp(2rem,5vw,4.5rem)}
}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-size:1rem;color:var(--muted);line-height:1.68;max-width:38ch}
.shot figcaption .k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.6rem}
.shot figcaption .big{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.03em;line-height:1.15;
  color:var(--ink);margin-bottom:.8rem}
.shot figcaption b{color:var(--ink);font-weight:600}
@media(min-width:820px){
  .shot figcaption{border-top:1px solid var(--ink);padding-top:1.2rem}
}

/* ───────────────────────────── BANDEAU DÉFILANT ───────────────────────────── */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding-block:1.05rem;
  margin-block:clamp(3.5rem,7vw,5.5rem)}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker span{font-family:var(--serif);font-style:italic;font-weight:420;
  font-size:clamp(1.15rem,2.1vw,1.6rem);padding-inline:1.6rem;white-space:nowrap;opacity:.92}
.ticker span::after{content:"—";margin-left:1.6rem;color:var(--yellow);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ───────────────────────────── SECTIONS ───────────────────────────── */
section{padding-block:var(--section)}
.sec-head{display:flex;align-items:baseline;gap:1.4rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-n{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.2rem,5vw,3.8rem);
  line-height:.8;color:var(--rule);flex:0 0 auto;letter-spacing:-.03em;white-space:nowrap}
.sec-head h2{max-width:19ch}

.cols{display:grid;gap:clamp(1.6rem,3vw,3rem)}
@media(min-width:820px){.cols{grid-template-columns:1fr 1fr}}
.cols.side{grid-template-columns:1fr}
@media(min-width:960px){.cols.side{grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem)}}
@media(min-width:960px){
  .cols.flip{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem)}
  .cols.flip .aside{position:sticky;top:6.5rem;align-self:start}
}
.aside{border-top:1px solid var(--ink);padding-top:1.1rem}

.rules{border-top:1px solid var(--ink)}
.rules li{border-bottom:1px solid var(--rule);padding-block:1.15rem;display:grid;gap:.35rem}
.rules b{font-family:var(--display);font-weight:600;font-size:1.04rem;letter-spacing:-.02em}
.rules p{font-size:.97rem;color:var(--muted);line-height:1.6}
.rules .n{font-family:var(--serif);font-style:italic;color:var(--blue);font-size:.95rem;margin-right:.45rem}
.rules.two{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
@media(min-width:820px){.rules.two{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem)}}

.quotes{border-top:1px solid var(--ink);margin-top:1rem;display:grid}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr);column-gap:clamp(2rem,4vw,3.5rem)}}
.quotes p{font-family:var(--serif);font-style:italic;font-size:1.04rem;line-height:1.5;
  padding-block:1.3rem;border-bottom:1px solid var(--rule)}

.ink-block{background:var(--ink);color:var(--paper)}
.ink-block h2,.ink-block .h-l{color:var(--paper)}
.ink-block p{color:#B8BCC6}

/* ── l'équation ── */
.eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(.8rem,2.4vw,2rem);
  font-family:var(--display);font-weight:600;line-height:1;
  font-size:clamp(2.5rem,8.2vw,5.8rem);letter-spacing:-.055em;font-variant-numeric:lining-nums tabular-nums}
.eq .op{font-family:var(--serif);font-style:italic;font-weight:300;color:#5C6478;font-size:.58em;letter-spacing:-.01em}
.eq .res{color:var(--yellow)}
.eq-legend{display:flex;flex-wrap:wrap;gap:clamp(.8rem,2.4vw,2rem);margin-top:1rem}
.eq-legend span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#8A90A0;font-weight:600}

/* ───────────── SÉPARATEUR DE PARTIE ───────────── */
.part{border-top:2px solid var(--ink);padding-top:1.3rem;display:flex;align-items:baseline;
  gap:clamp(1rem,3vw,2.2rem);flex-wrap:wrap}
.part .l{font-family:var(--display);font-weight:700;font-size:clamp(3rem,9vw,6.5rem);line-height:.82;
  letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px var(--ink)}
.part .t{flex:1;min-width:14rem}
.part .t .k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.45rem}
.part .t p{font-size:1.02rem;color:var(--muted);margin-top:.5rem;max-width:46ch}
.part-b{background:var(--paper-2)}
.part-wrap{padding-top:clamp(3.5rem,7vw,5.5rem)}

/* ── offres : carte de restaurant ── */
.menu{border-top:1px solid var(--ink)}
.lot{display:grid;gap:.5rem;padding-block:1.9rem;border-bottom:1px solid var(--rule)}
@media(min-width:760px){.lot{grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem}}
.lot__name{font-family:var(--display);font-weight:600;font-size:1.42rem;letter-spacing:-.032em}
.lot__name .q{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:.3rem}
.flag{font-family:var(--sans);font-style:normal;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--paper);background:var(--ink);
  padding:.3rem .6rem;margin-left:.7rem;vertical-align:.32em;white-space:nowrap}
.flag--blue{background:var(--blue)}
.lot__dots{display:none;border-bottom:1px dotted #BDB9B0;transform:translateY(-.35em)}
@media(min-width:760px){.lot__dots{display:block}}
.lot__price{text-align:left}
@media(min-width:760px){.lot__price{text-align:right}}
.lot__price b{font-family:var(--display);font-weight:600;font-size:1.85rem;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums}
.lot__price span{display:block;font-size:.82rem;color:var(--muted);margin-top:.15rem}
.lot__more{grid-column:1/-1;display:grid;gap:.45rem;margin-top:.6rem}
.lot__more li{font-size:.94rem;color:#3A3A38;padding-left:1.1rem;position:relative}
.lot__more li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:1px;background:#B9B6AE}
.lot__margin{grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--blue);margin-top:.7rem}
.lot__cta{grid-column:1/-1;margin-top:1.1rem}

/* ── comparatif fournisseurs ── */
.table-wrap{overflow-x:auto;margin-top:clamp(1.6rem,3vw,2.4rem);-webkit-overflow-scrolling:touch}
.compare{width:100%;min-width:38rem;border-collapse:collapse;font-size:.95rem}
.compare th,.compare td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
.compare thead th{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--ink);white-space:nowrap}
.compare tbody th{font-weight:500;color:var(--muted);font-size:.88rem;width:14rem}
.compare .us{background:rgba(254,189,47,.14)}
.compare thead .us{color:var(--ink);font-weight:700}
.compare td b{font-weight:600}
/* la précision sous un chiffre : deux fourchettes identiques ne veulent
   pas dire la même chose, la nuance se lit sous le prix.              */
.compare td .d{display:block;font-size:.76rem;color:var(--muted);margin-top:.25rem;line-height:1.4}

/* La quantité libre n'est pas un lot : c'est le hors-menu. On la
   détache par un filet plus marqué au-dessus, sans la mettre en avant
   — elle ne doit pas voler la vedette aux trois lots.                */
.lot--libre{border-top:2px solid var(--ink);margin-top:.4rem}
.lot--libre .lot__price b{font-size:1.9rem}

/* ── LE PARCOURS : la courbe de ce qu'il y a dans ta poche ──
   Plus de numéros ni de lettres : le repère de chaque étape, c'est le
   SOLDE. Il descend, reste bas, puis explose à la dernière étape.
   Une ligne traverse les quatre arrêts et se trace au scroll.          */
.track{margin-top:clamp(2.5rem,5vw,3.5rem);position:relative}
@media(min-width:900px){.track{display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:clamp(1.2rem,2.5vw,2.2rem)}}

/* la ligne + les pastilles */
.stop{position:relative;padding:0 0 2rem 2.2rem}
@media(min-width:900px){.stop{padding:0 0 0 0}}
.stop::before{content:"";position:absolute;left:.42rem;top:1.5rem;bottom:-.5rem;width:2px;
  background:var(--rule);transform:scaleY(0);transform-origin:top;
  transition:transform .6s var(--ease)}
.stop:last-child::before{display:none}
.rv.in .stop::before{transform:scaleY(1)}
.rv.in .stop:nth-child(1)::before{transition-delay:.3s}
.rv.in .stop:nth-child(2)::before{transition-delay:.75s}
.rv.in .stop:nth-child(3)::before{transition-delay:1.2s}
@media(min-width:900px){
  .stop::before{left:1.1rem;top:.72rem;bottom:auto;right:-2.2rem;width:auto;height:2px;
    transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
  .rv.in .stop::before{transform:scaleX(1)}
}
.stop .dot{position:absolute;left:0;top:1.1rem;width:.9rem;height:.9rem;border-radius:50%;
  background:var(--paper);border:2px solid var(--rule);z-index:1;
  transform:scale(0);transition:transform .5s var(--ease)}
@media(min-width:900px){.stop .dot{top:.3rem;left:.65rem}}
.rv.in .stop .dot{transform:scale(1)}
.rv.in .stop:nth-child(1) .dot{transition-delay:.15s}
.rv.in .stop:nth-child(2) .dot{transition-delay:.6s}
.rv.in .stop:nth-child(3) .dot{transition-delay:1.05s}
.rv.in .stop:nth-child(4) .dot{transition-delay:1.5s}
.stop--win .dot{border-color:var(--green);background:var(--green)}

/* le solde, en gros */
.stop .money{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.05em;line-height:1;
  color:var(--red);font-variant-numeric:lining-nums tabular-nums;margin:1.5rem 0 .3rem}
@media(min-width:900px){.stop .money{margin-top:2.1rem}}
.stop--flat .money{color:#A9A69E}
.stop--win .money{color:var(--green);font-size:clamp(2.4rem,4.6vw,3.4rem)}
.stop .label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.stop .when{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-soft);
  padding:.3rem .6rem;border-radius:2px}
.stop--win .when{color:#0B5C33;background:var(--green-soft)}
.stop h3{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.028em;
  margin:.9rem 0 .35rem}
.stop p{font-size:.93rem;line-height:1.6;color:var(--muted)}
.stop p b{color:var(--ink);font-weight:600;box-shadow:inset 0 -.45em 0 var(--yellow)}
.stop{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in .stop{opacity:1;transform:none}
.rv.in .stop:nth-child(1){transition-delay:.05s}
.rv.in .stop:nth-child(2){transition-delay:.5s}
.rv.in .stop:nth-child(3){transition-delay:.95s}
.rv.in .stop:nth-child(4){transition-delay:1.4s}
.track-note{margin-top:clamp(1.6rem,3vw,2.4rem);font-size:.86rem;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:1rem;max-width:60ch}
@media (prefers-reduced-motion:reduce){
  .stop{opacity:1;transform:none;transition:none}
  .stop::before{transform:none !important}.stop .dot{transform:scale(1)}
}
.no-js .stop{opacity:1;transform:none}
.no-js .stop .dot{transform:scale(1)}

/* ── deux façons de travailler ── */
.duo{display:grid;gap:0;border-top:1px solid var(--ink)}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.duo__c{padding:2rem 0;border-bottom:1px solid var(--rule)}
@media(min-width:880px){.duo__c{padding:2.2rem 2.6rem 2.4rem 0;border-bottom:0}
  .duo__c+.duo__c{border-left:1px solid var(--rule);padding-left:2.6rem;padding-right:0}}
.duo__c h3{margin-bottom:.4rem}
.duo__c .tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--blue);display:block;margin-bottom:.9rem}
.duo__c .tag.alt{color:var(--muted)}
.duo__c ul{margin-top:1.2rem;display:grid;gap:.7rem}
.duo__c li{font-size:.97rem;color:#3A3A38;padding-left:1.1rem;position:relative}
.duo__c li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:1px;background:var(--ink)}

/* ── simulateur : phrase à trous ── */
.sim{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,3.5vw,2.4rem);
  line-height:1.45;letter-spacing:-.035em;max-width:26ch}
.sim .fld{display:inline-block;position:relative}
.sim input,.sim select{font-family:var(--display);font-weight:600;font-size:1em;color:var(--yellow);
  background:transparent;border:0;border-bottom:2px solid rgba(254,189,47,.45);
  padding:0 .12em .06em;text-align:center;-moz-appearance:textfield;
  font-variant-numeric:lining-nums;cursor:text}
.sim input::-webkit-outer-spin-button,.sim input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sim input{width:2.6em}
.sim select{cursor:pointer;-webkit-appearance:none;appearance:none;text-align:left;padding-right:.9em}
.sim select option{color:var(--ink);background:var(--paper)}
.sim .fld--sel::after{content:"";position:absolute;right:.18em;top:.52em;border:.22em solid transparent;
  border-top-color:rgba(254,189,47,.7);pointer-events:none}
.sim input:focus,.sim select:focus{outline:0;border-bottom-color:var(--yellow)}
.sim-out{margin-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid #232C42;padding-top:clamp(1.6rem,3vw,2.2rem)}
.sim-big{font-family:var(--display);font-weight:700;font-size:clamp(3rem,10vw,7rem);line-height:.92;
  letter-spacing:-.06em;color:var(--yellow);font-variant-numeric:lining-nums tabular-nums}
.sim-sub{margin-top:.8rem;font-size:1.02rem;color:#B8BCC6}
.sim-sub b{color:var(--paper);font-weight:600}
.sim-detail{display:flex;flex-wrap:wrap;gap:2rem;margin-top:1.6rem}
.sim-detail div{font-size:.86rem;color:#8A90A0}
.sim-detail b{display:block;font-family:var(--display);font-size:1.32rem;color:var(--paper);font-weight:600;
  margin-top:.2rem;letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums}
.sim-note{font-size:.8rem;color:#6E7488;margin-top:1.8rem;max-width:52ch;line-height:1.6}

/* ── questions ── */
.qa{border-top:1px solid var(--ink)}
.qa__item{border-bottom:1px solid var(--rule);padding-block:1.5rem;display:grid;gap:.55rem}
@media(min-width:880px){.qa__item{grid-template-columns:.85fr 1.15fr;gap:2.5rem;align-items:start}}
.qa__q{font-family:var(--display);font-weight:600;font-size:1.06rem;line-height:1.3;letter-spacing:-.025em}
.qa__a{font-size:.99rem;color:var(--muted);line-height:1.68}

/* ── formulaire ── */
.form{display:grid;gap:1.5rem}
@media(min-width:760px){.form{grid-template-columns:1fr 1fr}}
.f{display:grid;gap:.4rem}
.f--wide{grid-column:1/-1}
.f label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.f input,.f select,.f textarea{font-family:var(--sans);font-size:1.02rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:.6rem 0;transition:border-color .25s}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--ink)}
.f textarea{resize:vertical;min-height:3.4rem;line-height:1.6}
.f select{-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 11px) 1.15rem,calc(100% - 6px) 1.15rem;background-size:5px 5px;background-repeat:no-repeat}
.form-note{font-size:.82rem;color:var(--muted);margin-top:.9rem}

/* ── « me joindre » vs « le formulaire » ──
   Les deux colonnes se lisaient comme un seul bloc : on ne savait plus
   si l'Instagram faisait partie du formulaire. On les sépare
   franchement — une colonne encadrée, l'autre avec son propre titre. */
.joindre{border:1px solid var(--rule);background:var(--paper-2);
  padding:clamp(1.2rem,3vw,1.7rem);align-self:start}
.joindre .kicker{margin-bottom:.9rem}
.joindre .lead{font-size:1rem}
@media(min-width:960px){.joindre{position:sticky;top:6.5rem}}

.form__head{grid-column:1/-1;border-bottom:1px solid var(--ink);padding-bottom:1.1rem}
.form__head .kicker{margin-bottom:.7rem}
.form__head p{font-size:.92rem;color:var(--muted);line-height:1.65;max-width:56ch}
.form__head p b{color:var(--ink)}

.contacts{border-top:1px solid var(--rule)}
.contacts a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-block:.95rem;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding-left .3s var(--ease)}
.contacts a:hover{padding-left:.5rem}
.contacts .k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.contacts .v{font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.025em}

/* ── l'avertissement de confidentialité ──
   Sur fond encre : c'est la seule chose de la page qui n'est pas une
   proposition commerciale mais une condition. Il faut que ça se voie. */
.confid{background:var(--ink);color:#C8CCD6;padding:clamp(1.4rem,3.5vw,2rem);
  margin-top:clamp(2rem,4vw,3rem);border-left:3px solid var(--yellow)}
.confid .k{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:.9rem}
.confid p+p{margin-top:.9rem}
.confid p{font-size:.95rem;line-height:1.7;max-width:74ch}
.confid b{color:#fff}

/* ── page back-office : les emplacements de captures ──
   Tant qu'une vraie capture n'est pas fournie, on affiche un cadre vide
   qui annonce ce qu'on verra. Jamais une image fabriquée.             */
.bo-shots{display:grid;gap:clamp(1.8rem,4vw,2.8rem);margin-top:clamp(1.5rem,3vw,2rem)}
@media(min-width:880px){.bo-shots{grid-template-columns:1fr 1fr}}
.bo-shot{border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column}
/* Les captures viennent d'un iPhone : très hautes (1206 × 2622). Les
   étirer sur la largeur de la carte donnerait un bloc de 2 m de haut.
   On les pose donc dans un cadre à hauteur fixe, centrées, sur le fond
   crème — ça se lit comme un écran de téléphone posé sur la page.    */
.bo-frame{background:var(--paper-2);border-bottom:1px solid var(--ink);
  padding:clamp(1.2rem,3vw,2rem);display:grid;place-items:center}
/* On plafonne la LARGEUR, pas la hauteur : une capture d'interface
   rognée en hauteur devient illisible, et c'est le texte de l'écran
   qui fait la preuve. La carte est haute, c'est assumé.              */
.bo-frame img{display:block;width:100%;max-width:20rem;height:auto;
  border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 10px 34px rgba(12,20,36,.14)}
.bo-hole{aspect-ratio:10/7;display:grid;place-items:center;border-bottom:1px solid var(--ink);
  background:repeating-linear-gradient(45deg,var(--paper-2) 0 10px,transparent 10px 20px)}
.bo-hole span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--muted);background:var(--paper);padding:.5rem .8rem;border:1px solid var(--rule)}
.bo-shot figcaption{padding:1.2rem 1.3rem 1.4rem;font-size:.94rem;color:var(--muted);line-height:1.65}
.bo-shot figcaption .k{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--blue);margin-bottom:.6rem}
.bo-shot figcaption b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:600;
  letter-spacing:-.025em;color:var(--ink);margin-bottom:.45rem}
/* un bloc sans capture (rien à montrer, tout à dire) : on le pose sur
   le fond crème pour qu'il ne ressemble pas à une image manquante.   */
.bo-shot--txt{background:var(--paper-2);justify-content:center}
.bo-shot--txt figcaption{padding:clamp(1.4rem,3vw,2rem) 1.3rem}

.close-band{padding-block:clamp(4rem,9vw,7rem)}
.close-band .h-l{max-width:17ch}

footer{background:var(--ink);color:#8E93A0;padding-block:clamp(3rem,6vw,4.5rem);font-size:.88rem}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;
  padding-bottom:1.8rem;border-bottom:1px solid #1E2740}
footer .wordmark{color:var(--paper)}
footer .wordmark .av{color:var(--yellow)}
.foot__links{display:flex;flex-wrap:wrap;gap:1.6rem}
.foot__links a{text-decoration:none;transition:color .25s}
.foot__links a:hover{color:var(--paper)}
.foot__legal{padding-top:1.6rem;font-size:.76rem;line-height:1.75;color:#5F6577;max-width:80ch}

/* ───────────────── AJOUTS CONVERSION ─────────────────
   Tout ce qui suit sert un seul but : que le visiteur puisse payer
   sans changer d'application, et qu'il sache ce qu'il achète.        */

/* ── mention sous un bouton qui mène à un vrai paiement ──
   Elle est posée par le JS, uniquement si le lien Stripe existe :
   on ne promet jamais un paiement sécurisé qui n'est pas branché.   */
.pay-note{font-size:.76rem;line-height:1.5;color:var(--muted);margin-top:.55rem}
.card-o .pay-note{text-align:center}
.card-o--blue .pay-note,.card-o--ink .pay-note{color:rgba(255,255,255,.72)}

/* ── la réponse au « programmées sur quoi ? » ── */
.note-proc{margin-top:clamp(1.8rem,3.5vw,2.6rem);border-left:2px solid var(--blue);
  padding:.2rem 0 .2rem 1.2rem;max-width:62ch}
.note-proc .k{font-family:var(--serif);font-style:italic;font-size:1.06rem;
  color:var(--ink);margin-bottom:.5rem}
.note-proc p{font-size:.97rem;color:#3A3A38}

/* ── la relance sous le simulateur ──
   C'est le pic d'envie de la page : on ne le laisse pas retomber.   */
.sim-cta{margin-top:clamp(2rem,4vw,2.8rem);border-top:1px solid #232C42;padding-top:1.6rem}
.sim-cta > p{font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em;color:var(--paper)}
.sim-cta__b{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.sim-cta__b .btn{font-size:.78rem;max-width:100%}
/* les boutons du site sont en nowrap : sur un écran étroit celui-ci
   doit pouvoir passer à la ligne plutôt que sortir de l'écran.      */
@media(max-width:480px){
  .sim-cta__b{display:grid}
  .sim-cta__b .btn{white-space:normal;text-align:center;justify-content:center}
}

/* ── LE PLAN DE L'ESPACE PRIVÉ ──
   Volontairement dessiné à la typo du site, sans imiter l'interface
   d'un logiciel : c'est un sommaire, pas une capture déguisée.      */
.plan{margin-top:clamp(2.5rem,5vw,3.5rem);border:1px solid var(--ink);background:var(--paper)}
.plan__head{padding:1.2rem 1.3rem;border-bottom:1px solid var(--ink);background:var(--paper-2)}
.plan__note{font-size:.86rem;color:var(--muted);margin-top:.5rem;max-width:60ch}
.plan__list{counter-reset:plan}
.plan__list li{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;
  padding:.95rem 1.3rem;border-bottom:1px solid var(--rule)}
.plan__list li:last-child{border-bottom:0}
@media(min-width:720px){.plan__list li{grid-template-columns:auto minmax(13rem,auto) 1fr;
  align-items:baseline;column-gap:.9rem}}
.plan__list .c{font-family:var(--display);font-weight:700;color:var(--blue);line-height:1.4}
.plan__list b{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:1.02rem;line-height:1.4}
.plan__list .d{grid-column:2/-1;font-size:.92rem;color:var(--muted);line-height:1.55}
@media(min-width:720px){.plan__list .d{grid-column:auto}}

/* ── les vraies captures, quand elles arrivent ── */
.preuves-shots{display:grid;gap:1.2rem;margin-top:clamp(1.6rem,3vw,2.2rem)}
@media(min-width:820px){.preuves-shots{grid-template-columns:repeat(3,1fr)}}
.preuves-shots img{border:1px solid var(--ink);width:100%}
.preuves-shots figcaption{font-size:.84rem;color:var(--muted);margin-top:.6rem;line-height:1.5}

/* ── formulaire : le champ qui bloque l'envoi se signale ── */
.f--manque input{border-color:var(--red)}
.f--manque label{color:var(--red)}
.form-secours{margin-top:.8rem;font-size:.88rem;line-height:1.6;
  border-left:2px solid var(--red);padding-left:.9rem}

/* ── page de confirmation après paiement ── */
.suite{margin-top:clamp(2.5rem,5vw,3.5rem);max-width:52rem}
.suite__l{display:grid;gap:0;border-top:1px solid var(--ink);counter-reset:suite}
.suite__l li{counter-increment:suite;padding:1.3rem 0 1.3rem 2.8rem;position:relative;
  border-bottom:1px solid var(--rule)}
.suite__l li::before{content:counter(suite);position:absolute;left:0;top:1.3rem;
  font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--blue);
  font-variant-numeric:lining-nums tabular-nums}
.suite__l b{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;
  letter-spacing:-.025em;margin-bottom:.3rem}
.suite__l span{font-size:.97rem;color:var(--muted);line-height:1.6}
.suite__go{margin-top:1.4rem;font-size:.97rem;color:var(--muted)}

/* ── GRILLE DÉGRESSIVE ──
   Le prix unitaire barré dans chaque lot, le palier suivant annoncé,
   et le tableau récapitulatif : trois façons de dire la même chose,
   parce que c'est l'argument qui fait monter le panier.              */
.lot__price s{color:var(--muted);text-decoration-thickness:1px;margin-right:.35rem}
.lot__next{grid-column:1/-1;margin-top:.45rem;font-size:.84rem;color:var(--muted)}
.lot__next::before{content:"↓";margin-right:.4rem;color:var(--blue);font-weight:700}

.grille{margin-top:clamp(2rem,4vw,2.8rem);border:1px solid var(--ink);padding:1.3rem}
.grille table{width:100%;border-collapse:collapse;margin-top:1rem}
.grille th,.grille td{text-align:left;padding:.6rem 0;border-bottom:1px solid var(--rule);
  font-size:.95rem;vertical-align:baseline}
.grille tr:last-child th,.grille tr:last-child td{border-bottom:0}
.grille th{font-weight:500;color:var(--muted);width:11rem}
.grille td.tnum{font-family:var(--display);font-weight:600;font-size:1.15rem;
  letter-spacing:-.03em;width:6rem}
.grille td.d{color:var(--blue);font-size:.86rem;font-weight:600}
.grille tr:first-child td.d{color:var(--muted);font-weight:400}
.grille__note{margin-top:1rem;font-size:.88rem;color:var(--muted);line-height:1.6;max-width:58ch}
/* sur un écran étroit, les largeurs fixes écrasent la colonne de droite
   jusqu'à la rendre illisible : on laisse le tableau se répartir seul. */
@media(max-width:560px){
  .grille{padding:1rem}
  .grille th,.grille td.tnum{width:auto}
  .grille th{font-size:.88rem}
  .grille td.tnum{font-size:1.05rem;text-align:right}
  .grille td.d{text-align:right;white-space:nowrap}
}

/* le palier atteint, sous le simulateur */
.sim-palier{margin-top:1rem;font-size:.94rem;color:var(--yellow);font-weight:600}