/* ============================================================
   WBA — SYSTÈME DE DESIGN
   Palette dérivée du logo : or poli, argent brossé, noir laqué.
   ============================================================ */
:root{
  --noir:#070707;
  --carbone:#0D0D0E;
  --surface:#141416;
  --surface-haut:#1B1B1E;
  --or:#D4A73C;
  --or-clair:#F4DFA0;
  --or-sombre:#8C6D1F;
  --argent:#C3C8CE;
  --argent-sombre:#7C8288;
  --texte:#EAE7E1;
  --texte-doux:#918D86;
  --trait:rgba(212,167,60,.18);
  --trait-froid:rgba(195,200,206,.12);
  --display:"Bodoni Moda",serif;
  --corps:"Jost",sans-serif;
  --max:1240px;
  --sheen:linear-gradient(100deg,transparent 20%,rgba(244,223,160,.14) 45%,rgba(255,255,255,.22) 50%,rgba(244,223,160,.14) 55%,transparent 80%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--noir);color:var(--texte);
  font-family:var(--corps);font-weight:300;font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:2px}

.enveloppe{width:100%;max-width:var(--max);margin:0 auto;padding:0 26px}

/* — texte utilitaire — */
.surtitre{
  font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--or);font-weight:500;
}
.surtitre--argent{color:var(--argent-sombre)}
.titre{
  font-family:var(--display);font-weight:400;line-height:1.08;
  letter-spacing:-.015em;
}
.metal{
  background:linear-gradient(96deg,#8C6D1F 0%,#D4A73C 22%,#F4DFA0 42%,#D4A73C 58%,#9C7A25 78%,#E8CE81 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.metal-argent{
  background:linear-gradient(96deg,#6E747B 0%,#C3C8CE 30%,#FFFFFF 48%,#C3C8CE 64%,#7C8288 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Chiffres de prix : dégradé métallique conservé, mais sur une police à
   traits uniformes (Jost) plutôt que le Bodoni Moda — ses empattements très
   fins faisaient disparaître certaines parties des chiffres dans le dégradé. */
.prix-or{
  font-family:var(--corps) !important;font-weight:600 !important;letter-spacing:-.01em;
  background:linear-gradient(96deg,#8C6D1F 0%,#D4A73C 22%,#F4DFA0 42%,#D4A73C 58%,#9C7A25 78%,#E8CE81 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.prix-argent{
  font-family:var(--corps) !important;font-weight:600 !important;letter-spacing:-.01em;
  background:linear-gradient(96deg,#6E747B 0%,#C3C8CE 30%,#FFFFFF 48%,#C3C8CE 64%,#7C8288 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.doux{color:var(--texte-doux)}

/* — arc signature (repris de la courbe du logo) — */
.arc{display:block;width:100%;height:34px;opacity:.55}
.arc path{stroke:url(#degradeOr);stroke-width:1;fill:none}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.nav.fige{
  background:rgba(7,7,7,.82);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--trait);
}
.nav__int{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.nav__logo img{height:30px;width:auto}
.nav__liens{display:flex;gap:34px;align-items:center}
.nav__lien{
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texte-doux);position:relative;padding:6px 0;transition:color .3s;
}
.nav__lien:hover{color:var(--texte)}
.nav__lien::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--or),transparent);transition:right .45s cubic-bezier(.2,.8,.2,1);
}
.nav__lien:hover::after{right:0}
.nav__burger{display:none;width:26px;height:16px;position:relative}
.nav__burger span{position:absolute;left:0;width:100%;height:1px;background:var(--texte);transition:.35s}
.nav__burger span:nth-child(1){top:0}
.nav__burger span:nth-child(2){top:50%}
.nav__burger span:nth-child(3){bottom:0}
.nav.ouvert .nav__burger span:nth-child(1){top:50%;transform:rotate(45deg)}
.nav.ouvert .nav__burger span:nth-child(2){opacity:0}
.nav.ouvert .nav__burger span:nth-child(3){bottom:auto;top:50%;transform:rotate(-45deg)}

/* — bouton — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  font-weight:500;position:relative;overflow:hidden;transition:.35s ease;
  border:1px solid var(--or-sombre);color:var(--or-clair);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--sheen);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{border-color:var(--or);color:#fff}
.btn--plein{
  background:linear-gradient(100deg,#8C6D1F,#D4A73C 40%,#F4DFA0 55%,#C9A034);
  color:#0A0A0A;border-color:transparent;font-weight:600;
}
.btn--plein:hover{color:#000;box-shadow:0 10px 40px -14px rgba(212,167,60,.7)}
.btn--fantome{border-color:var(--trait-froid);color:var(--argent)}
.btn--fantome:hover{border-color:var(--argent);color:#fff}
.btn--fantome-hero{border:1px solid rgba(212,167,60,.55);background:rgba(7,7,7,.45);color:var(--or-clair)}
.btn--fantome-hero:hover{border-color:rgba(212,167,60,.9);background:rgba(7,7,7,.7)}
.btn--large{width:100%}
.btn--petit{padding:12px 22px;font-size:10.5px}
.mention-paiement{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);text-align:center}

/* ============================================================
   HÉRO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:130px 0 70px;overflow:hidden;
}
.hero__grille{
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--trait-froid) 1px,transparent 1px),linear-gradient(90deg,var(--trait-froid) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 15%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 30%,#000 15%,transparent 72%);
}
.hero__int{position:relative;z-index:3;text-align:left;display:flex;flex-direction:column;align-items:flex-start;max-width:none;margin-right:0}
.hero__logo{width:min(360px,70vw);height:auto;margin-bottom:30px;background:none;border:none;box-shadow:none;filter:drop-shadow(0 18px 46px rgba(0,0,0,.55))}
.hero__accent{font-weight:500;color:var(--or-clair);font-style:normal}
.hero h1{
  font-family:var(--display);font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:400;
  line-height:1.05;letter-spacing:-.02em;max-width:16ch;margin-bottom:24px;
}
.hero h1 em{font-style:italic;font-weight:400}
.hero__sous{
  font-size:clamp(1rem,1.5vw,1.16rem);color:var(--texte-doux);max-width:60ch;
  line-height:1.75;margin-bottom:38px;
}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:52px}
.hero__preuves{
  display:flex;gap:0;flex-wrap:wrap;justify-content:center;
  border-top:1px solid var(--trait);padding-top:26px;width:100%;max-width:820px;
  align-items:stretch;
}
.preuve{flex:1 1 200px;padding:6px 20px;position:relative;display:flex;flex-direction:column;justify-content:flex-start}
.preuve+.preuve::before{content:"";position:absolute;left:0;top:10%;height:80%;width:1px;background:var(--trait-froid)}
.preuve b{
  display:block;font-family:var(--display);font-weight:500;margin-bottom:3px;
  font-size:clamp(1rem,1.6vw,1.45rem);
  line-height:1.15;
  text-wrap:balance;
}
.preuve span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-doux)}

.hero__fond{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__fond img{width:100%;height:100%;object-fit:cover;object-position:22% center;display:block}
.hero__voile{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--noir) 0%,var(--noir) 30%,rgba(7,7,7,.92) 48%,rgba(7,7,7,.35) 72%,transparent 100%),
             linear-gradient(180deg,rgba(7,7,7,.9) 0%,rgba(7,7,7,.4) 22%,transparent 55%,var(--noir) 100%)}
.hero__grille{z-index:2}
.hero h1{max-width:14ch}
.hero__actions{justify-content:flex-start}
.hero__preuves{justify-content:flex-start;max-width:640px}
.hero__logo{width:min(520px,80vw);align-self:center;margin-bottom:44px}
.hero h1{max-width:20ch}
.hero__sous{max-width:52ch}

@media(min-width:1024px){
  .hero__preuves{max-width:820px}
}

@media (max-width:768px){
  .hero__fond img{object-position:center 60%}
  .hero__voile{background:linear-gradient(180deg,rgba(7,7,7,.78) 0%,rgba(7,7,7,.86) 35%,rgba(7,7,7,.92) 60%,var(--noir) 100%)}
  .hero__int{text-align:center;align-items:center;max-width:none;margin-right:0}
  .hero__logo{width:min(300px,72vw)}
  .hero__logo{align-self:center}
  .hero h1{max-width:none}
  .hero__actions,.hero__preuves{justify-content:center}
  .hero__sous{color:#c9c5bd}
}

/* ============================================================
   BANDEAU DÉFILANT
   ============================================================ */
.bandeau{
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding:17px 0;overflow:hidden;background:var(--carbone);
}
.bandeau__piste{display:flex;gap:56px;width:max-content;animation:defile 42s linear infinite}
.bandeau__piste span{
  font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--argent-sombre);
  display:flex;align-items:center;gap:56px;white-space:nowrap;
}
.bandeau__piste span::after{content:"◆";color:var(--or);font-size:7px;opacity:.7}
@keyframes defile{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:110px 0;position:relative}
.section--carbone{background:var(--carbone)}
.section__tete{max-width:640px;margin-bottom:56px}
.section__tete--centre{margin-left:auto;margin-right:auto;text-align:center}
.section__tete .surtitre{display:block;margin-bottom:16px}
.section__tete h2{font-family:var(--display);font-size:clamp(1.9rem,3.9vw,3rem);font-weight:400;line-height:1.12;margin-bottom:16px}
.section__tete p{color:var(--texte-doux);font-size:1.03rem;line-height:1.75}

/* ============================================================
   SECTION POURQUOI — COMPARATIF SANS / AVEC
   ============================================================ */
.compar-table{
  max-width:900px;margin:0 auto;border:1px solid var(--trait-froid);border-radius:20px;
  overflow:hidden;background:linear-gradient(165deg,#17161190,var(--surface) 40%);
}
.compar-table__entete{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;
  padding:18px 28px;background:rgba(212,167,60,.05);border-bottom:1px solid var(--trait-froid);
}
.compar-table__col-titre{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.compar-table__col-titre--sans{color:var(--argent-sombre)}
.compar-table__col-titre--avec{color:var(--or)}
.compar-table__ligne{
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:16px;
  padding:22px 28px;border-bottom:1px solid var(--trait-froid);
}
.compar-table__ligne:last-child{border-bottom:none}
.compar-table__label{font-weight:500;color:var(--texte)}
.compar-table__sans,.compar-table__avec{display:flex;align-items:center;gap:10px;font-size:.92rem}
.compar-table__sans{color:var(--texte-doux)}
.compar-table__avec{color:#fff}
.compar-table__icone{flex-shrink:0;line-height:1}
.compar-table__icone--croix{color:var(--argent-sombre)}
.compar-table__icone--coche{color:var(--or)}
.compar-table__mobile-label{display:none}
.compar-table__compteur-ligne{display:none}
.compar-table__progress{display:none}
.compar-table__fondu{display:none}
@media(max-width:767px){
  .compar-table{border:none;background:none;border-radius:0;overflow:visible}
  .compar-table__entete{display:none}
  .compar-table__compteur-ligne{display:flex;justify-content:flex-end;margin-bottom:14px}
  .compar-table__compteur{font-family:var(--corps);font-size:.85rem;letter-spacing:.04em}
  .compar-table__compteur-actuel{color:var(--or);font-weight:500}
  .compar-table__compteur-total{color:var(--texte-doux)}
  .compar-table__viewport{position:relative}
  .compar-table__rail{
    display:flex;gap:20px;align-items:stretch;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -ms-overflow-style:none;scrollbar-width:none;cursor:grab;
    padding-left:20px;padding-right:10%;scroll-padding-left:20px;
  }
  .compar-table__rail::-webkit-scrollbar{display:none}
  .compar-table__rail--arrache{cursor:grabbing;scroll-snap-type:none}
  .compar-table__fondu{
    display:block;position:absolute;top:0;bottom:0;width:20px;pointer-events:none;z-index:2;
  }
  .compar-table__fondu--droite{right:0;width:32px;background:linear-gradient(to right,transparent,#0a0a0a)}
  .compar-table__fondu--gauche{left:0;background:linear-gradient(to left,transparent,#0a0a0a);opacity:0;transition:opacity .3s}
  .compar-table__fondu--gauche.visible{opacity:1}
  .compar-table__progress{display:block;height:2px;background:var(--trait-froid);margin-top:24px;position:relative}
  .compar-table__progress-fill{height:100%;background:var(--or);width:20%;transition:width .35s cubic-bezier(.2,.8,.2,1)}
  .compar-table__ligne{
    grid-template-columns:1fr;gap:10px;padding:20px 22px;border-bottom:none;
    flex:0 0 90%;min-width:0;scroll-snap-align:start;
    border:1px solid rgba(212,175,55,.25);border-radius:20px;
    background:radial-gradient(ellipse at 0% 0%,#14100a,#0a0a0a 70%);
    opacity:.6;transform:scale(.96);
    transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s cubic-bezier(.22,1,.36,1),border-color .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);
  }
  .compar-table__ligne.actif{
    opacity:1;transform:scale(1);border-color:rgba(212,175,55,.7);
    box-shadow:0 0 40px -12px rgba(212,175,55,.35);
  }
  .compar-table__label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair)}
  .compar-table__mobile-label{
    display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  }
  .compar-table__mobile-label--sans{color:var(--argent-sombre)}
  .compar-table__mobile-label--avec{color:var(--or);margin-top:4px}
  .compar-table__sans{opacity:.55}
  .compar-table__avec{opacity:1;color:#fff}
}

/* ============================================================
   OFFRE UNIQUE
   ============================================================ */
.offre-carte{
  position:relative;border:1px solid var(--or-sombre);overflow:hidden;
  background:radial-gradient(ellipse at 10% 0%,rgba(212,167,60,.13),transparent 58%),linear-gradient(160deg,#151209,#0C0C0D 55%);
  padding:clamp(30px,4.4vw,58px);padding-top:clamp(52px,7vw,58px);
}
.offre-carte__ruban{
  position:absolute;top:0;right:0;background:linear-gradient(100deg,#8C6D1F,#D4A73C 45%,#F4DFA0);
  color:#0A0A0A;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:8px 18px;max-width:100%;text-align:center;
}
.offre-carte__grille{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr);gap:clamp(32px,5vw,60px);align-items:start}
.offre-carte__badge{
  display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);
  border:1px solid var(--or-sombre);padding:6px 14px;margin-bottom:18px;background:rgba(212,167,60,.06);
}
.offre-carte__titre{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:400;margin-bottom:12px;text-wrap:balance}
.offre-carte__pitch{color:var(--texte-doux);font-size:1.02rem;line-height:1.7;margin-bottom:32px;max-width:60ch}

/* ============================================================
   CARROUSEL — CONTENU DE L'ACCÈS WBA
   ============================================================ */
.carousel__tete{display:flex;justify-content:flex-end;margin-bottom:14px}
.carousel__compteur{font-family:var(--corps);font-size:.85rem;letter-spacing:.04em}
.carousel__compteur-actuel{color:var(--or);font-weight:500}
.carousel__compteur-total{color:var(--texte-doux)}

.carousel__viewport{position:relative}

.carousel__rail{
  display:flex;gap:20px;align-items:stretch;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;cursor:grab;
}
.carousel__rail::-webkit-scrollbar{display:none}
.carousel__rail--arrache{cursor:grabbing;scroll-snap-type:none}

.carousel__carte{
  flex:0 0 84%;display:flex;flex-direction:column;scroll-snap-align:center;
  min-width:0;
  background:radial-gradient(ellipse at 0% 0%,#14100a,#0a0a0a 70%);
  border:1px solid rgba(212,175,55,.25);border-radius:20px;padding:32px 28px;
  opacity:.45;transform:scale(.96);filter:saturate(.7);
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s cubic-bezier(.22,1,.36,1),border-color .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.carousel__carte.actif{
  opacity:1;transform:scale(1);border-color:rgba(212,175,55,.7);
  box-shadow:0 0 40px -12px rgba(212,175,55,.35);
}
.carousel__suptitre{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.carousel__titre{font-family:var(--display);font-size:24px;font-weight:400;color:#fff;line-height:1.25;margin-bottom:18px}
.carousel__carte ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.carousel__carte li{font-size:15px;line-height:1.65;color:rgba(255,255,255,.72);position:relative;padding-left:18px}
.carousel__carte li::before{content:"–";position:absolute;left:0;top:0;color:var(--or)}

.carousel__fondu{position:absolute;top:0;bottom:0;width:56px;pointer-events:none;z-index:2}
.carousel__fondu--droite{right:0;background:linear-gradient(to right,transparent,#0a0a0a)}
.carousel__fondu--gauche{left:0;background:linear-gradient(to left,transparent,#0a0a0a);opacity:0;transition:opacity .3s}
.carousel__fondu--gauche.visible{opacity:1}

.carousel__nav{
  display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--or-sombre);background:transparent;
  color:var(--or-clair);align-items:center;justify-content:center;transition:opacity .3s,border-color .3s;
}
.carousel__nav svg{width:18px;height:18px}
.carousel__nav--prev{left:8px}
.carousel__nav--next{right:8px}
.carousel__nav:hover{border-color:var(--or)}
.carousel__nav:disabled{opacity:.3;cursor:default}

.carousel__progress{height:2px;background:var(--trait-froid);margin-top:24px;position:relative}
.carousel__progress-fill{height:100%;background:var(--or);width:20%;transition:width .35s cubic-bezier(.2,.8,.2,1)}

.carousel__rail::before,.carousel__rail::after{content:"";flex:0 0 8%}
@media(min-width:768px){
  /* Sort le compteur du flux pour que .carousel (donc .offre-carte__gauche)
     démarre visuellement au niveau du viewport — nécessaire pour que
     .offre-carte__droite s'aligne sur la première carte, pas sur le
     compteur au-dessus. */
  .carousel{position:relative;display:flex;flex-direction:column;flex:1}
  .carousel__tete{position:absolute;bottom:100%;right:0;margin-bottom:14px}
  .carousel__pied{position:absolute;top:100%;left:0;right:0}
  .carousel__viewport{flex:1;display:flex}
  .carousel__rail{flex:1}
  /* Le bloc prix a plus de contenu que la carte n'est haute par défaut :
     on étire la colonne carrousel (donc la carte active, déjà uniformisée
     par align-items:stretch sur le rail) pour que le haut ET le bas
     correspondent exactement à .offre-carte__droite. À partir de 1024px,
     les cartes passent au format carré (voir plus bas) : ce raisonnement
     ne s'applique plus, .offre-carte__gauche repasse à align-self:start
     et les deux colonnes ne sont plus alignées que par le haut. */
  .offre-carte__gauche{display:flex;flex-direction:column;align-self:stretch}
}
@media(min-width:1024px){
  .carousel__carte{
    flex:0 0 78%;max-width:520px;min-height:0;aspect-ratio:1/1;
    padding:28px 32px;
  }
  .carousel__carte li{font-size:14px;line-height:1.5}
  .carousel__titre{font-size:26px;text-wrap:balance;max-width:none}
  .carousel__rail::before,.carousel__rail::after{flex-basis:11%}
  .carousel__nav{display:flex}
  .carousel__rail{align-items:flex-start}
  .carousel__tete{position:static}
  .carousel__pied{position:static}
  .offre-carte__gauche{align-self:start}
}
@media(min-width:1440px){
  .carousel__carte{flex:0 0 68%;max-width:560px}
  .carousel__rail::before,.carousel__rail::after{flex-basis:16%}
  .carousel__carte li{font-size:15px;line-height:1.6}
}

/* Mobile et tablette (<1024px) : rendre le scroll plus évident (carte
   suivante davantage visible, fondu plus discret, indice de glissement)
   et rapprocher les cartes d'un format carré. */
.carousel__glisse-indice{
  display:none;text-align:center;font-size:12px;color:var(--texte-doux);
  margin-top:14px;transition:opacity .3s;
}
.carousel__glisse-indice.masque{opacity:0}
@media(max-width:1023px){
  .carousel__carte{
    flex:0 0 86%;opacity:.6;scroll-snap-align:start;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:24px 22px;
  }
  .carousel__rail{padding-left:20px;padding-right:20%;scroll-padding-left:20px}
  .carousel__rail::before,.carousel__rail::after{content:none}
  .carousel__fondu--droite{width:32px}
  .carousel__fondu--gauche{width:20px}
  .carousel__glisse-indice{display:block}
  .carousel__titre{font-size:19px;line-height:1.2;text-wrap:balance;max-width:none}
  .carousel__carte ul{gap:10px}
  .carousel__carte li{font-size:14px;line-height:1.5}
}
/* Mobile uniquement (<768px) : carte un peu plus large, peek réduit en
   conséquence — la tablette (768-1023px) garde 86% / 20%. */
@media(max-width:767px){
  .carousel__carte{flex:0 0 90%}
  .carousel__rail{padding-right:14%}
  .offre-carte__titre{font-size:1.2rem}
}

.offre-carte__droite{
  display:flex;flex-direction:column;align-items:center;align-self:stretch;
  background:rgba(8,8,8,.62);border:1px solid var(--trait);padding:36px 30px;text-align:center;
  backdrop-filter:blur(6px);position:sticky;top:100px;
}

.offre-carte__barre{display:block;font-size:.92rem;color:var(--texte-doux);text-decoration:line-through;text-decoration-color:var(--or-sombre);margin-bottom:8px}
.offre-carte__prix{font-family:var(--display);font-size:clamp(2.8rem,6vw,3.8rem);font-weight:500;line-height:1}
.offre-carte__sous{display:block;font-size:.85rem;color:var(--texte-doux);margin:8px 0 26px}
.offre-carte__note{font-size:.82rem;color:var(--texte-doux);line-height:1.55;margin-top:18px}
.offre-carte__reassure{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--trait-froid);
  display:flex;flex-direction:column;gap:8px;font-size:.82rem;color:var(--argent-sombre);
}
@media(max-width:767px){
  .offre-carte__grille{grid-template-columns:minmax(0,1fr)}
  .offre-carte__droite{
    position:static;align-self:auto;
    background:none;border:none;border-radius:0;backdrop-filter:none;padding:0;
    margin-top:32px;padding-top:24px;border-top:1px solid rgba(212,175,55,.15);
  }
  .offre-carte__reassure{
    flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  }
}
@media(max-width:520px){
  .offre-carte{padding-top:64px}
  .offre-carte__ruban{font-size:9px;padding:7px 14px}
}
@media(min-width:1024px){
  .offre-carte__droite{align-self:start}
}
/* ============================================================
   UPSELLS — BOUTIQUE / SOCIÉTÉ / PACK COMPLET
   Carrousel en dessous de 768px, grille 3 colonnes au-dessus.
   ============================================================ */
.upsells__compteur-ligne{display:flex;justify-content:flex-end;margin-bottom:14px}
.upsells__compteur{font-family:var(--corps);font-size:.85rem;letter-spacing:.04em}
.upsells__compteur-actuel{color:var(--or);font-weight:500}
.upsells__compteur-total{color:var(--texte-doux)}

.upsells__viewport{position:relative}

.upsells__grille{
  display:flex;gap:20px;align-items:stretch;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;cursor:grab;
  padding-left:20px;padding-right:14%;scroll-padding-left:20px;
}
.upsells__grille::-webkit-scrollbar{display:none}
.upsells__grille--arrache{cursor:grabbing;scroll-snap-type:none}

.upsells__fondu{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;z-index:2}
.upsells__fondu--droite{right:0;background:linear-gradient(to right,transparent,#0a0a0a)}
.upsells__fondu--gauche{left:0;width:20px;background:linear-gradient(to left,transparent,#0a0a0a);opacity:0;transition:opacity .3s}
.upsells__fondu--gauche.visible{opacity:1}

.upsells__progress{height:2px;background:var(--trait-froid);margin-top:24px;position:relative}
.upsells__progress-fill{height:100%;background:var(--or);width:20%;transition:width .35s cubic-bezier(.2,.8,.2,1)}

.upsell-carte{
  position:relative;display:flex;flex-direction:column;flex:0 0 90%;min-width:0;
  border:1px solid rgba(212,175,55,.25);border-radius:20px;
  background:radial-gradient(ellipse at 0% 0%,#14100a,#0a0a0a 70%);
  padding:36px 30px;scroll-snap-align:start;
  opacity:.45;transform:scale(.96);
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s cubic-bezier(.22,1,.36,1),border-color .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.upsell-carte.actif{opacity:1;transform:scale(1)}
.upsell-carte--phare{border-color:rgba(212,167,60,.7);box-shadow:0 0 40px -12px rgba(212,167,60,.35)}
.upsell-carte__badge{
  position:absolute;top:0;left:30px;transform:translateY(-50%);
  background:linear-gradient(100deg,#8C6D1F,#D4A73C 45%,#F4DFA0);color:#0A0A0A;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:6px 14px;border-radius:20px;
}
.upsell-carte__nom{font-family:var(--display);font-size:1.35rem;font-weight:400;color:#fff;margin-bottom:14px;margin-top:6px}
.upsell-carte--phare .upsell-carte__nom{margin-top:16px}
.upsell-carte__pitch{color:var(--texte-doux);font-size:.92rem;line-height:1.65;margin-bottom:24px}
.upsell-carte__achat{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-top:auto;padding-top:24px;border-top:1px solid rgba(212,175,55,.15);
}
.upsell-carte__membre-lien{display:block;text-align:center;font-size:.82rem;color:var(--texte-doux);transition:color .3s}
.upsell-carte__membre-lien:hover{color:var(--texte)}
.upsell-carte__membre-lien .prix-or{font-size:.95rem}
.upsell-carte ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.upsell-carte li{font-size:.88rem;line-height:1.55;color:#C8C4BD;position:relative;padding-left:18px}
.upsell-carte li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--or)}
.upsell-carte__mention{font-size:.8rem;color:var(--texte-doux);line-height:1.5;margin-top:18px}
.upsells__note{text-align:center;color:var(--or-clair);font-size:.92rem;margin-top:32px}
.upsells__cta{text-align:center;margin-top:28px}

@media(max-width:767px){
  .upsell-carte__achat .btn{
    font-size:14px;letter-spacing:.06em;padding:16px 12px;white-space:nowrap;
  }
  /* Le badge "Le Plus Complet" déborde au-dessus de la carte (comme en
     desktop) ; le rail (overflow-x:auto) rognerait ce débordement
     vertical, donc on lui donne un padding-top pour que le badge ait de
     la place à l'intérieur de sa boîte, puis on remonte le conteneur du
     même montant pour ne pas agrandir l'espacement de la section. */
  .upsells__grille{padding-top:40px}
  .upsells__viewport{margin-top:-40px}
  .upsells__compteur-ligne{margin-bottom:24px}
}

@media(min-width:768px){
  .upsells__compteur-ligne,.upsells__progress,.upsells__fondu{display:none}
  .upsells__grille{
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
    overflow:visible;cursor:auto;padding:0;scroll-padding-left:0;
  }
  .upsell-carte{
    flex:none;opacity:1;transform:none;transition:none;scroll-snap-align:none;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--trait-froid)}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;text-align:left;font-size:1.03rem;font-weight:400;transition:color .3s;
}
.faq__q:hover{color:var(--or-clair)}
.faq__icone{position:relative;width:13px;height:13px;flex-shrink:0}
.faq__icone::before,.faq__icone::after{
  content:"";position:absolute;background:var(--or);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.faq__icone::before{top:6px;left:0;width:13px;height:1px}
.faq__icone::after{left:6px;top:0;width:1px;height:13px}
.faq__item.ouvert .faq__icone::after{transform:rotate(90deg)}
.faq__r{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
.faq__r p{padding-bottom:24px;color:var(--texte-doux);line-height:1.78;font-size:.97rem;max-width:70ch}

/* ============================================================
   CTA FINAL + PIED
   ============================================================ */
.final{text-align:center;padding:120px 0}
.final h2{font-family:var(--display);font-size:clamp(2rem,4.6vw,3.4rem);font-weight:400;line-height:1.1;margin:18px auto 20px;max-width:19ch}
.final p{color:var(--texte-doux);max-width:56ch;margin:0 auto 36px;line-height:1.75}
.final__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final__actions .btn--plein{order:1}
.final__actions .mention-paiement{order:2;flex:0 0 100%;max-width:none;margin-top:0}
.final__actions .btn--fantome{order:3}
@media(min-width:1024px){
  .final__actions .btn--fantome{order:2}
  .final__actions .mention-paiement{order:3;margin-top:20px}
}

.pied{border-top:1px solid var(--trait-froid);padding:56px 0 34px;background:var(--carbone)}
.pied__haut{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-bottom:44px}
.pied__logo{height:34px;width:auto;margin-bottom:18px}
.pied__desc{font-size:.9rem;color:var(--texte-doux);line-height:1.7;max-width:38ch}
.pied h4{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--or);margin-bottom:18px;font-weight:500}
.pied ul{list-style:none;display:grid;gap:10px}
.pied a{font-size:.9rem;color:var(--texte-doux);transition:color .3s}
.pied a:hover{color:var(--texte)}
.pied__bas{
  border-top:1px solid var(--trait-froid);padding-top:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.78rem;color:#5F5C58;line-height:1.7;
}
.pied__mentions{max-width:70ch}

/* ============================================================
   RÉVÉLATION AU DÉFILEMENT
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.vu{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .pack__grille,.discord{grid-template-columns:1fr}
  .discord__prix{border-left:none;border-top:1px solid var(--trait-froid);padding-left:0;padding-top:32px}
  .etapes{grid-template-columns:1fr}
  .pied__haut{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:720px){
  .nav__liens{
    position:fixed;inset:76px 0 auto;background:rgba(7,7,7,.97);backdrop-filter:blur(20px);
    flex-direction:column;gap:0;padding:14px 26px 30px;border-bottom:1px solid var(--trait);
    transform:translateY(-120%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .nav.ouvert .nav__liens{transform:none}
  .nav__liens .nav__lien{width:100%;padding:15px 0;border-bottom:1px solid var(--trait-froid);font-size:12.5px}
  .nav__liens .btn{width:100%;margin-top:16px}
  .nav__burger{display:block}
  .nav{background:rgba(7,7,7,.82);backdrop-filter:blur(18px);border-bottom-color:var(--trait)}
  .section{padding:78px 0}
  .final{padding:88px 0}
  .preuve+.preuve::before{display:none}
  .preuve{flex:1 1 130px;padding:12px 8px}
  .discord__pts{grid-template-columns:1fr}
  .pied__haut{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   PAGE DE CONTENU — mentions légales, CGV, contact
   ============================================================ */
.page-contenu{padding:160px 0 120px}
.page-contenu__int{width:100%;max-width:720px;margin:0 auto;padding:0 26px}
.page-contenu h1{
  font-family:var(--display);font-weight:400;font-size:clamp(2rem,5vw,3rem);
  line-height:1.15;letter-spacing:-.015em;margin-bottom:48px;
}
.page-contenu h2{
  font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,3vw,1.6rem);
  line-height:1.25;margin:52px 0 18px;
}
.page-contenu p{color:var(--texte-doux);line-height:1.8;margin-bottom:18px}
.page-contenu a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.page-contenu a:hover{color:var(--or)}
@media(max-width:767px){
  .page-contenu{padding:120px 0 80px}
}