:root{
  --night:#07040F; --night2:#120A24; --panel:rgba(255,255,255,0.045);
  --line:rgba(255,255,255,0.12); --ink:#F6F1FF; --dim:#A99CC8; --faint:#6B6090;
  --cyan:#3DE3FF; --mag:#FF3D9A; --amber:#FFC247; --lime:#9CFF57; --purp:#B36BFF; --sos:#FF4242;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --disp:'Syne',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --nav-h:62px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis-active{scroll-behavior:auto}
body{font-family:var(--sans);color:var(--ink);overflow-x:hidden;
  background-color:var(--night);position:relative}
/* Fond fixe via pseudo-élément : même rendu, scroll fluide iOS (sans background-attachment:fixed) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(46vw 40vw at 88% 10%, rgba(255,61,154,.13), transparent 60%),
    radial-gradient(44vw 38vw at 6% 36%, rgba(179,107,255,.12), transparent 62%),
    radial-gradient(48vw 42vw at 94% 64%, rgba(61,227,255,.095), transparent 62%),
    radial-gradient(42vw 36vw at 12% 90%, rgba(255,194,71,.076), transparent 62%);
  background-repeat:no-repeat}
/* Grain pellicule — texture légère, zéro image externe */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

@keyframes ring{0%{transform:scale(.5);opacity:.85}100%{transform:scale(2.6);opacity:0}}
@keyframes beat{0%,100%{transform:scale(1)}40%{transform:scale(1.12)}}
@keyframes beamspin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes gradmove{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* scroll progress */
#prog{position:fixed;top:var(--safe-top);left:0;height:3px;width:0;z-index:70;
  background:linear-gradient(90deg,var(--mag),var(--cyan),var(--amber));box-shadow:0 0 12px var(--mag)}
/* card cursor spotlight */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 60%)}
.card:hover::before{opacity:1}
/* confetti */
#confetti{position:fixed;inset:0;z-index:80;pointer-events:none}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;backdrop-filter:blur(16px);
  background:rgba(7,4,15,.6);border-bottom:1px solid var(--line);
  padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right)}
nav .wrap{display:flex;align-items:center;min-height:var(--nav-h);gap:28px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;letter-spacing:2px;font-size:18px}
.logo .dot{width:12px;height:12px;border-radius:6px;background:var(--mag);box-shadow:0 0 16px var(--mag);animation:beat 1.4s infinite}
nav .links{margin-left:auto;display:flex;gap:26px;font-size:14px;color:var(--dim)}
nav .links a:hover{color:var(--ink)}
.nav-toggle{display:none;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;margin-left:auto;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.04);cursor:pointer;padding:0}
.nav-toggle-bar{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .25s ease,opacity .25s ease}
.nav-toggle-bars{display:flex;flex-direction:column;gap:5px}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0;transform:scaleX(0)}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-panel{position:fixed;inset:0;z-index:55;padding-top:calc(var(--safe-top) + var(--nav-h));
  padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right);
  background:rgba(7,4,15,.97);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;overflow-y:auto}
body.nav-open .nav-panel{opacity:1;visibility:visible;pointer-events:auto}
body.nav-open{overflow:hidden}
/* .nav-panel-inner est une balise <nav> : on neutralise la règle globale
   nav{position:fixed;backdrop-filter;background;border-bottom} qui la collait en haut. */
.nav-panel-inner{position:static;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;
  max-width:1120px;margin:0 auto;padding:20px 24px 32px;display:flex;flex-direction:column;gap:6px}
.nav-panel-inner a{display:block;padding:16px 18px;font-family:var(--disp);font-size:18px;font-weight:600;
  color:var(--dim);border-radius:14px;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.nav-panel-inner a:hover,.nav-panel-inner a:focus-visible{color:var(--ink);background:rgba(255,255,255,.04);border-color:var(--line);outline:none}
.btn{font-family:var(--sans);font-weight:600;border:none;border-radius:14px;cursor:pointer;
  padding:13px 24px;font-size:15px;transition:transform .15s,box-shadow .15s}
.btn-primary{background:linear-gradient(100deg,var(--mag),var(--purp));color:#fff;box-shadow:0 8px 30px rgba(255,61,154,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,61,154,.5)}
nav .btn{padding:9px 18px;font-size:14px}

/* -- HERO -- */
header{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  padding:calc(90px + var(--safe-top)) 0 0;overflow:hidden}
#fx{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.beams{position:absolute;left:50%;top:-30%;width:160vw;height:160vh;transform:translateX(-50%);z-index:0;
  pointer-events:none;mix-blend-mode:screen;opacity:.55;animation:beamspin 60s linear infinite}
.beam{position:absolute;left:50%;top:0;width:14vw;height:130vh;transform-origin:top center;
  background:linear-gradient(to bottom,rgba(255,255,255,.16),transparent 70%);border-radius:50%}
.vign{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 30%,var(--night) 92%)}
.crowd{position:absolute;left:0;right:0;bottom:-2px;z-index:1;height:24vh;min-height:150px;pointer-events:none}
.crowd.back{opacity:.45;height:28vh;filter:blur(1px)}
header .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--cyan);border:1px solid var(--line);border-radius:30px;padding:7px 14px;margin-bottom:22px;
  background:rgba(61,227,255,.06)}
.eyebrow .live{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:beat 1.4s infinite}
h1{font-family:var(--disp);font-size:clamp(42px,6vw,76px);line-height:.98;font-weight:800;letter-spacing:-0.02em}
h1 .grad{background:linear-gradient(100deg,var(--mag),var(--cyan));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradmove 5s linear infinite}
header p.lead{color:var(--dim);font-size:18.5px;line-height:1.6;margin:24px 0 32px;max-width:480px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.field{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px;align-items:center}
.field input{background:transparent;border:none;outline:none;color:var(--ink);font-size:15px;padding:11px 12px;width:200px;font-family:var(--sans)}
.field input::placeholder{color:var(--faint)}
.note{color:var(--dim);font-size:13px;margin-top:16px;display:flex;gap:14px;flex-wrap:wrap}

/* phone */
.phonewrap{justify-self:center;perspective:1100px;animation:float 6s ease-in-out infinite}
.phone{width:288px;height:586px;border-radius:44px;padding:11px;
  background:linear-gradient(160deg,#2c1f4d,#0d0820);position:relative;transition:transform .12s ease-out;will-change:transform;
  box-shadow:0 50px 110px rgba(0,0,0,.7),0 0 80px rgba(255,61,154,.25),inset 0 0 0 1px rgba(255,255,255,.07)}
.screen{width:100%;height:100%;border-radius:34px;overflow:hidden;position:relative;
  background:radial-gradient(120% 80% at 50% -10%,var(--night2),var(--night) 60%);display:flex;flex-direction:column;align-items:center}
.sbar{width:100%;display:flex;justify-content:space-between;padding:15px 20px 0;font-family:var(--mono);font-size:11px;color:var(--dim)}
.sname{margin-top:20px;font-family:var(--disp);font-weight:700;font-size:23px}
.sfresh{font-family:var(--mono);font-size:11px;color:var(--lime);margin-top:2px}
.radar{margin-top:6px}
.radar svg{width:190px;height:186px;display:block}
.sweep{transform-origin:175px 175px;animation:beamspin 6s linear infinite}
.pglow{animation:glowpulse 3s ease-in-out infinite}
@keyframes glowpulse{0%,100%{opacity:.04}50%{opacity:.13}}
.sdist{font-family:var(--mono);font-weight:800;font-size:46px;margin-top:2px;letter-spacing:-1.5px}
.sdist span{font-size:18px;color:var(--dim);font-weight:600}
.scue{color:var(--amber);font-weight:600;font-size:13.5px;margin-top:4px}
.switch{display:flex;gap:6px;padding:12px 13px 0;width:100%}
.chip{flex:1;border-radius:13px;padding:7px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid var(--line);background:var(--panel)}
.chip.on{border-color:var(--mag);background:rgba(255,61,154,.12)}
.chip .cd{width:8px;height:8px;border-radius:50%}
.chip .cn{font-size:11px;font-weight:600;color:var(--ink)}
.chip .cm{font-size:9.5px;font-family:var(--mono);color:var(--dim)}
.stabs{margin-top:auto;width:100%;display:flex;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
.stabs div{flex:1;text-align:center;padding:12px 0 18px;font-size:12px;color:var(--faint)}
.stabs div.on{color:var(--ink);font-weight:700}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;
  background:rgba(255,255,255,.02);position:relative;z-index:2}
.marquee .track{display:flex;width:max-content;animation:marq 28s linear infinite;font-family:var(--disp);font-weight:700;
  font-size:22px;color:transparent;-webkit-text-stroke:1px var(--faint);white-space:nowrap;
  animation-play-state:running}
.marquee.is-paused .track{animation-play-state:paused}
.marquee .track span{padding:0 26px}
.marquee .track b{color:var(--mag);-webkit-text-stroke:0}

/* sections */
section{padding:90px 0;position:relative}
/* Perf : le navigateur ne calcule pas le rendu des sections hors écran tant
   qu'on n'y arrive pas (zéro changement visuel). Réduit le travail thread
   principal et le lag au scroll. contain-intrinsic-size auto = pas de saut. */
#apercu,#instagram,#guides,#vibe,#telechargement{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
h2{font-family:var(--disp);font-size:clamp(30px,4vw,46px);line-height:1.06;font-weight:700;letter-spacing:-.5px;max-width:680px}
.sub{color:var(--dim);font-size:17px;line-height:1.6;margin-top:18px;max-width:580px}
.grid{display:grid;gap:18px;margin-top:46px}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.card:hover{border-color:rgba(255,255,255,.25);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.card:not(.tilt-active):hover{transform:translateY(-4px)}
.card .ic{font-size:24px;margin-bottom:16px;display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;
  border-radius:15px;background:rgba(255,255,255,.05)}
.card h3{font-family:var(--disp);font-size:20px;font-weight:700;margin-bottom:8px}
.card p{color:var(--dim);font-size:14.5px;line-height:1.55}

/* -- how-it-works animated visuals --
   div.mesh (pas .mesh) : le body de nosfonctionnalites porte class="max mesh"
   et héritait de height:210px + overflow:hidden → scroll tactile bloqué. */
div.mesh{width:100%;height:210px;margin-top:34px;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:radial-gradient(80% 120% at 50% 0%,rgba(61,227,255,.07),transparent 60%)}
div.mesh svg{width:100%;height:100%;display:block}
.viz{height:138px;margin:0 0 18px;border-radius:16px;background:rgba(0,0,0,.18);
  border:1px solid var(--line);overflow:hidden}
.viz svg{width:100%;height:100%;display:block}
.flow{animation:dashflow 1.1s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-22}}

.fviz{height:104px;margin:0 0 16px;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.18);border:1px solid var(--line)}
.fviz svg{width:100%;height:100%;display:block}

/* app screenshots */
.shots{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:48px 0 36px}
.shotwrap{position:relative;animation:float 7s ease-in-out infinite}
.shotwrap:nth-child(2){animation-delay:-2.3s}.shotwrap:nth-child(3){animation-delay:-4.6s}
.shot{width:198px;height:404px;border-radius:34px;padding:9px;position:relative;cursor:pointer;
  background:linear-gradient(160deg,#2c1f4d,#0d0820);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 50px rgba(255,61,154,.18),inset 0 0 0 1px rgba(255,255,255,.07)}
.shotwrap:hover{z-index:3}
.shotwrap:hover .shot{transform:scale(1.08);
  box-shadow:0 45px 100px rgba(0,0,0,.7),0 0 80px rgba(255,61,154,.4),inset 0 0 0 1px rgba(255,255,255,.12)}
.shot .ph{width:100%;height:100%;border-radius:26px;overflow:hidden;position:relative;
  background:radial-gradient(120% 80% at 50% -10%,var(--night2),var(--night) 60%);display:flex;align-items:center;justify-content:center}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .holder{color:var(--faint);font-family:var(--mono);font-size:12px;text-align:center;padding:0 16px;line-height:1.6}
.shot .cap{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ---------------------------------------------- */
/* -- Probleme (refonte visuelle -- version v24) -- */
/* ---------------------------------------------- */
.problem{text-align:center;position:relative;overflow:hidden;padding-bottom:60px}
.problem h2{margin:24px auto 0;max-width:720px}
.problem h2 .grad-red{
  background:linear-gradient(100deg,var(--sos),var(--mag),var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* scanline qui balaye la section comme un vieux moniteur */
.problem .scanline{
  position:absolute;
  left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,66,66,.5),transparent);
  pointer-events:none;
  animation:scan 5s linear infinite;
  opacity:.5;
  z-index:1;
}
@keyframes scan{
  0%{top:-5%}
  100%{top:105%}
}

/* -- compte a rebours 5 -> 0 -- */
.stat-wrap{
  position:relative;
  display:inline-block;
  margin-top:8px;
}
.stat{
  position:relative;
  font-family:var(--disp);
  font-size:clamp(90px,16vw,200px);
  font-weight:700;
  line-height:.85;
  width:1em;
  height:1em;
  margin:0 auto;
}
.stat-d{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,var(--sos),var(--mag),var(--amber));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,66,66,.4));
  opacity:0;
  animation:countdown 6s infinite ease-in-out;
}
/* chaque chiffre tient ~1s, puis le suivant prend le relais */
.stat-d.s5{animation-delay:0s}
.stat-d.s4{animation-delay:1s}
.stat-d.s3{animation-delay:2s}
.stat-d.s2{animation-delay:3s}
.stat-d.s1{animation-delay:4s}
.stat-d.s0{animation-delay:5s}
@keyframes countdown{
  0%,2%{opacity:0;transform:scale(.85)}
  6%,14%{opacity:1;transform:scale(1)}
  17%{opacity:0;transform:scale(1.15)}
  100%{opacity:0;transform:scale(1.15)}
}
.stat-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--faint);
  margin-top:10px;
}

.pain-lead{
  font-family:var(--disp);
  font-size:clamp(20px,3vw,26px);
  font-weight:700;
  color:var(--ink);
  margin:32px auto 36px;
  max-width:520px;
  line-height:1.35;
}

.pain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:0 auto 28px;
  max-width:900px;
  text-align:left;
}

/* -- carte douleur (base, sans couleur) -- */
.pain-card{
  --neon: var(--mag);
  --neon-rgb: 255,61,154;
  position:relative;
  background:linear-gradient(160deg,rgba(var(--neon-rgb),.08),rgba(255,255,255,.025));
  border:1px solid rgba(var(--neon-rgb),.28);
  border-radius:20px;
  padding:22px 20px 18px;
  overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.pain-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--neon),rgba(var(--neon-rgb),.4));
  opacity:.9;
  box-shadow:0 0 10px var(--neon);
}
.pain-card::after{
  content:"";
  position:absolute;
  right:-40px;top:-40px;
  width:140px;height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--neon-rgb),.22),transparent 70%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.pain-card:hover{
  border-color:rgba(var(--neon-rgb),.6);
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(var(--neon-rgb),.20);
}
.pain-card:hover::after{opacity:1}

/* -- 3 variantes neon -- */
.pain-card.pc-mag{
  --neon:#FF3D9A;
  --neon-rgb:255,61,154;
}
.pain-card.pc-cyan{
  --neon:#3DE3FF;
  --neon-rgb:61,227,255;
}
.pain-card.pc-amber{
  --neon:#FFC247;
  --neon-rgb:255,194,71;
}

/* icones SVG line-art */
.pain-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  margin-bottom:14px;
  color:var(--neon);
  background:rgba(var(--neon-rgb),.08);
  border:1px solid rgba(var(--neon-rgb),.3);
  box-shadow:0 0 18px rgba(var(--neon-rgb),.18), inset 0 0 12px rgba(var(--neon-rgb),.08);
  filter:drop-shadow(0 0 6px rgba(var(--neon-rgb),.4));
  animation:icon-pulse 2.6s ease-in-out infinite;
}
.pain-icon svg{width:24px;height:24px;display:block}
/* la croix rouge qui clignote sur le bulle WhatsApp */
.pain-x{
  stroke:var(--sos);
  filter:drop-shadow(0 0 4px var(--sos));
  animation:x-blink 1.6s ease-in-out infinite;
}
@keyframes icon-pulse{
  0%,100%{box-shadow:0 0 18px rgba(var(--neon-rgb),.18), inset 0 0 12px rgba(var(--neon-rgb),.08)}
  50%{box-shadow:0 0 30px rgba(var(--neon-rgb),.45), inset 0 0 16px rgba(var(--neon-rgb),.14)}
}
@keyframes x-blink{
  0%,100%{opacity:1}
  45%,55%{opacity:.3}
}
/* decalage de pulse entre cartes pour ne pas synchroniser */
.pain-card.pc-cyan .pain-icon{animation-delay:.6s}
.pain-card.pc-amber .pain-icon{animation-delay:1.2s}

.pain-card p{
  font-size:15.5px;
  line-height:1.45;
  color:var(--dim);
  margin:0 0 14px;
}
.pain-card strong{color:var(--ink)}

/* barre de reseau cassee -- prend la couleur neon de la carte */
.pain-bar{
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  overflow:hidden;
  margin-bottom:14px;
}
.pain-bar-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--neon),rgba(var(--neon-rgb),.4));
  border-radius:2px;
  box-shadow:0 0 8px var(--neon);
}
.pain-card[data-delay="0"] .pain-bar-fill{animation:bar-glitch 4s infinite}
.pain-card[data-delay="1"] .pain-bar-fill{animation:bar-glitch 4s infinite .4s}
.pain-card[data-delay="2"] .pain-bar-fill{animation:bar-glitch 4s infinite .8s}
@keyframes bar-glitch{
  0%{width:0}
  25%{width:80%}
  30%{width:78%}
  35%{width:22%}
  40%{width:24%}
  60%{width:14%}
  70%{width:60%}
  75%{width:8%}
  100%{width:8%}
}

.pain-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--neon);
  border:1px solid rgba(var(--neon-rgb),.45);
  border-radius:20px;
  padding:5px 12px;
  background:rgba(var(--neon-rgb),.08);
}
.pain-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 8px var(--neon);
  animation:blink 1.4s infinite;
}
.pain-card[data-delay="1"] .pain-dot{animation-delay:.35s}
.pain-card[data-delay="2"] .pain-dot{animation-delay:.7s}
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:.2}
}

/* la "punch line" */
.pain-punch{margin:8px auto 16px}
.pain-punch span{
  display:inline-block;
  font-family:var(--disp);
  font-size:clamp(18px,2.5vw,22px);
  font-weight:700;
  padding:14px 30px;
  border-radius:40px;
  border:1px solid rgba(255,61,154,.3);
  background:linear-gradient(135deg,rgba(255,61,154,.12),rgba(255,194,71,.08));
  box-shadow:0 0 40px rgba(255,61,154,.15);
  animation:punchpulse 3.2s ease-in-out infinite;
}
@keyframes punchpulse{
  0%,100%{box-shadow:0 0 40px rgba(255,61,154,.15);transform:scale(1)}
  50%{box-shadow:0 0 60px rgba(255,61,154,.35);transform:scale(1.025)}
}

.pain-cta{margin-top:4px;margin-bottom:0}
.pain-cta a{
  font-family:var(--mono);
  font-size:13px;
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s;
}
.pain-cta a:hover{color:var(--ink)}

@media(max-width:820px){
  .pain-grid{grid-template-columns:1fr;max-width:400px}
  .pain-punch span{display:block;padding:12px 20px}
}
@media (prefers-reduced-motion:reduce){
  .stat-d,.pain-bar-fill,.pain-dot,.pain-icon,.pain-x,
  .pain-punch span,.scanline{animation:none!important}
  .stat-d.s0{opacity:1}
  .pain-bar-fill{width:24%}
}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px;margin-top:46px}
.tile{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease, border-color .35s ease;
}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tile:hover{
  transform:scale(1.05);
  box-shadow:0 0 35px rgba(255,61,154,.35);
  filter:brightness(1.12);
  border-color:rgba(255,255,255,.28);
  z-index:3;
}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile .scene{position:absolute;inset:0}
.tile .label{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-family:var(--mono);font-size:11px;
  color:rgba(255,255,255,.7);background:linear-gradient(transparent,rgba(0,0,0,.55))}
.tile .crowd{position:absolute;left:0;right:0;bottom:0;height:55%}

/* steps with connecting glow */
.steps{counter-reset:s}
.step .n{font-family:var(--mono);font-size:13px;color:var(--faint)}

/* final */
.final{position:relative;border:1px solid var(--line);border-radius:30px;padding:64px 32px;text-align:center;overflow:hidden;
  background:radial-gradient(90% 130% at 50% 0%,rgba(255,61,154,.14),rgba(179,107,255,.05) 50%,transparent 70%)}
.beacon{position:relative;width:78px;height:78px;margin:0 auto 24px}
.beacon .r{position:absolute;inset:0;border:1.5px solid var(--mag);border-radius:50%}
.beacon .r:nth-child(1){animation:ring 2.4s 0s infinite ease-out}
.beacon .r:nth-child(2){animation:ring 2.4s .8s infinite ease-out}
.beacon .r:nth-child(3){animation:ring 2.4s 1.6s infinite ease-out}
.beacon .core{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:var(--mag);
  transform:translate(-50%,-50%);box-shadow:0 0 26px var(--mag);animation:beat 1.4s infinite}
.final .field{display:inline-flex;margin-top:28px}
#ok{color:var(--lime);font-weight:600;margin-top:18px;height:20px}

footer{border-top:1px solid var(--line);padding:32px 0;color:var(--dim);font-size:13px;position:relative;z-index:2}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:1024px){
  nav .links{display:none}
  .nav-toggle{display:inline-flex;margin-right:4px}
  nav .wrap{gap:16px}
  header .wrap{gap:28px}
  h1{font-size:clamp(36px,5.5vw,58px)}
}

@media(max-width:820px){
  header{min-height:auto;padding:calc(120px + var(--safe-top)) 0 0}
  header .wrap{grid-template-columns:1fr;gap:48px}
  .phone{order:-1}
  .g3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .tile.big{grid-column:span 2;grid-row:span 1}
  .field{flex:1;min-width:0;max-width:100%;box-sizing:border-box}
  .field input{width:auto;flex:1;min-width:0;min-height:44px;max-width:100%}
  .phone .chip{min-height:44px;padding:10px 4px}
  .cta-row .field{width:100%}
  /* Hero copy column — évite le débordement horizontal mobile */
  header .wrap > .reveal,
  header.hero-v3 .wrap > div:first-child{
    width:100%;max-width:100%;min-width:0;box-sizing:border-box
  }
  header .signup,
  header form.signup{
    width:100%;max-width:100%;align-items:stretch;box-sizing:border-box
  }
  header .su-consent{
    max-width:100%;width:100%;box-sizing:border-box
  }
  header p.lead{max-width:100%}
  header .note{max-width:100%}
  header .eyebrow{max-width:100%;flex-wrap:wrap}
}
@media(max-width:480px){
  .wrap{padding-left:16px;padding-right:16px}
  header .field{
    flex-direction:column;align-items:stretch;gap:8px;padding:8px
  }
  header .field input{width:100%;flex:none}
  header .field .btn-primary{width:100%;text-align:center;padding:12px 16px}
}

/* -- logo (image) dans nav + footer -- */
.logomark{display:block;border-radius:7px;flex:none}
.logo{transition:opacity .15s}
.logo:hover{opacity:.85}

/* -- formulaire d'inscription (RGPD) -- */
.signup{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
#waitlist .signup{align-items:center}
.su-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.su-consent{display:flex;gap:9px;align-items:flex-start;max-width:420px;font-size:13px;color:var(--dim);line-height:1.45;cursor:pointer}
#waitlist .su-consent{text-align:left}
.su-consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--mag);cursor:pointer}
.su-consent a{color:var(--cyan);text-decoration:underline}
.su-consent a:hover{color:var(--ink)}
.su-msg{font-size:13.5px;color:var(--lime);min-height:18px;font-weight:600}
.su-msg.err{color:var(--sos)}

/* -- liens legaux footer -- */
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.foot-links a{color:var(--dim)}
.foot-links a:hover{color:var(--ink)}

/* -- FAQ (accordeon) -- */
#faq{padding:40px 0}
.faq{max-width:720px;margin:38px auto 0;display:flex;flex-direction:column;gap:14px;counter-reset:faq}
.fitem{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  transition:border-color .25s,box-shadow .25s,background .25s}
.fitem::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--mag),var(--purp));opacity:0;transition:opacity .25s}
.fitem:hover{border-color:rgba(255,255,255,.22)}
.fitem[open]{border-color:rgba(255,61,154,.55);background:linear-gradient(180deg,rgba(255,61,154,.10),rgba(179,107,255,.04));
  box-shadow:0 10px 40px rgba(255,61,154,.14)}
.fitem[open]::before{opacity:1}

.fitem summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;gap:16px}
.fitem summary::-webkit-details-marker{display:none}
.fitem summary::before{counter-increment:faq;content:counter(faq,decimal-leading-zero);
  font-family:var(--mono);font-weight:700;font-size:13px;flex:none;
  background:linear-gradient(120deg,var(--amber),var(--mag),var(--purp));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fq-q{flex:1;font-family:var(--disp);font-weight:500;font-size:17.5px;color:var(--ink);
  line-height:1.35;transition:color .2s}
.fitem summary:hover .fq-q{color:var(--mag)}
.fitem[open] .fq-q{color:#fff}

.fchev{position:relative;width:26px;height:26px;border-radius:50%;flex:none;
  border:1px solid var(--line);transition:transform .3s,border-color .25s,background .25s}
.fchev::before,.fchev::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;border-radius:2px;
  background:var(--dim);transform:translate(-50%,-50%);transition:background .25s}
.fchev::after{transform:translate(-50%,-50%) rotate(90deg)}
.fitem summary:hover .fchev{border-color:var(--mag)}
.fitem[open] .fchev{transform:rotate(135deg);border-color:var(--mag);background:rgba(255,61,154,.12)}
.fitem[open] .fchev::before,.fitem[open] .fchev::after{background:var(--mag)}

.fans{padding:0 22px 22px 60px;color:var(--dim);font-size:15.5px;line-height:1.7;animation:faqIn .28s ease both}
.fans a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.fans a:hover{color:var(--ink)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:560px){.fans{padding-left:22px}}

/* -- icone Instagram dans la nav -- */
.iglink{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;border:1px solid var(--line);margin-right:10px;flex:none;
  transition:transform .15s,border-color .2s,background .2s}
.iglink:hover{transform:translateY(-1px);border-color:rgba(255,61,154,.55);background:rgba(255,61,154,.08)}
.iglink svg{display:block}
@media (max-width:560px){.iglink{width:38px;height:38px;margin-right:8px}}

/* -- lightbox galerie -- */
.image-lightbox{
  position:fixed!important;
  top:0!important;
  left:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  background:rgba(7,4,15,.96);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999999!important;
  padding:calc(30px + var(--safe-top)) calc(30px + var(--safe-right)) calc(30px + var(--safe-bottom)) calc(30px + var(--safe-left));
  backdrop-filter:blur(12px);
}
.image-lightbox.active{display:flex!important}
.image-lightbox img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:94vw!important;
  max-height:90vh!important;
  max-height:90dvh!important;
  object-fit:contain!important;
  border-radius:22px;
  box-shadow:0 0 60px rgba(255,61,154,.45);
  animation:lightboxZoom .25s ease;
}
.close-lightbox{
  position:fixed;
  top:calc(24px + var(--safe-top));
  right:calc(32px + var(--safe-right));
  font-size:46px;
  color:#fff;
  cursor:pointer;
  line-height:1;
  font-weight:300;
  z-index:1000000;
}
@keyframes lightboxZoom{
  from{opacity:0;transform:scale(.90)}
  to{opacity:1;transform:scale(1)}
}

/* -- Section Instagram -- */
#instagram{padding:90px 0}

#instagram .ig-panel{
  margin-top:46px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
#instagram .ig-panel:hover{
  border-color:rgba(255,61,154,.4);
  box-shadow:0 24px 50px rgba(0,0,0,.4);
}
#instagram .ig-panel:not(.tilt-active):hover{
  transform:none;
}

#instagram .ig-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);
}
#instagram .ig-profile{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
#instagram .ig-profile:hover .ig-user{color:var(--mag)}
#instagram .ig-avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  padding:2px;
  flex:none;
  background:linear-gradient(135deg,#FFC247,#FF3D9A 50%,#B36BFF);
}
#instagram .ig-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  border:2px solid var(--night);
  object-fit:cover;
  display:block;
}
#instagram .ig-user{
  font-family:var(--disp);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  display:block;
  transition:color .2s;
}
#instagram .ig-meta{
  font-family:var(--mono);
  font-size:11px;
  color:var(--faint);
  display:block;
  margin-top:3px;
}
#instagram .ig-follow{
  padding:10px 20px;
  font-size:13px;
  flex:none;
  white-space:nowrap;
}

#instagram .ig-grid-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--dim);
  background:rgba(0,0,0,.15);
}
#instagram .ig-grid-label svg{color:var(--faint)}

#instagram .instagram-feed{
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:var(--night2);
  box-shadow:none;
  overflow:hidden;
  min-height:520px;
  height:auto;
}
#instagram .instagram-feed iframe{
  width:100%!important;
  height:520px!important;
  margin-bottom:0;
  border:0!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:var(--night2);
}
#instagram .ig-skeleton{
  width:100%;height:580px;
  background:var(--night2);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 100%);
  background-size:200% 100%;
  animation:ig-shimmer 1.4s ease-in-out infinite;
}
@keyframes ig-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(max-width:820px){
  #instagram .ig-header{
    flex-direction:column;
    align-items:stretch;
  }
  #instagram .ig-follow{
    width:100%;
    text-align:center;
  }
  #instagram .instagram-feed{
    min-height:420px;
  }
  #instagram .instagram-feed iframe,
  #instagram .ig-skeleton{
    height:420px!important;
  }
}

/* -- Guides sur l'accueil -- */
.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:46px;
  align-items:stretch;
}
.guide-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  height:100%;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.guide-card:hover{
  border-color:rgba(255,61,154,.45);
  box-shadow:0 24px 50px rgba(0,0,0,.4);
}
.guide-card:not(.tilt-active):hover{
  transform:translateY(-4px);
}
.guide-top{padding:22px 22px 16px;flex:1}
.guide-k{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--cyan);
  letter-spacing:1.5px;
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
}
.guide-card h3{
  font-family:var(--disp);
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.3;
}
.guide-card p{
  color:var(--dim);
  font-size:13.5px;
  line-height:1.55;
  margin:0;
}
.guide-img{
  width:100%;
  height:170px;
  flex:none;
  overflow:hidden;
  border-top:1px solid var(--line);
}
.guide-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.guide-go{
  display:block;
  padding:14px 22px 18px;
  color:var(--mag);
  font-weight:600;
  font-size:13.5px;
  flex:none;
  border-top:1px solid var(--line);
}
.guides-more{text-align:center;margin-top:32px}
.guides-more a{
  font-family:var(--mono);
  font-size:13px;
  color:var(--dim);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:30px;
  padding:10px 22px;
  display:inline-block;
  transition:border-color .2s,color .2s;
}
.guides-more a:hover{border-color:var(--mag);color:var(--ink)}

@media(max-width:820px){
  .guide-grid{grid-template-columns:1fr}
  .guide-img{height:200px}
}

/* -- 3D tilt -- */
.card,.guide-card,#instagram .ig-panel,.phonewrap{
  transform-style:preserve-3d;
  will-change:transform;
}
.card,.guide-card,#instagram .ig-panel{
  transition:transform .15s ease-out,box-shadow .25s,border-color .25s;
}
.card.tilt-active,.guide-card.tilt-active,#instagram .ig-panel.tilt-active{
  box-shadow:0 28px 60px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce){
  .card,.guide-card,#instagram .ig-panel,.phonewrap{will-change:auto}
}

/* -- telephone interactif du hero : la fleche pivote vers le membre choisi -- */
/* IMPORTANT : transform-origin obligatoire, sinon la fleche tourne autour du coin (0,0) du SVG */
.phone .chip{cursor:pointer;transition:border-color .25s,background .25s}
#fl-needle{transform-origin:175px 175px;transition:transform .55s cubic-bezier(.2,.85,.25,1)}
#fl-needle-line{transition:stroke .35s ease}
#fl-needle-head{transition:fill .35s ease}
@media (prefers-reduced-motion:reduce){
  #fl-needle{transition:none}
}

/* Nav responsive : petit écran */
@media(max-width:600px){
  nav .wrap{gap:10px;padding:0 14px}
  nav .btn{padding:8px 13px;font-size:13px}
  .iglink{width:38px;height:38px;margin-right:0}
  #fl-lang .fl-btn{padding:7px 9px}
}
/* ≤480px : la barre débordait (logo+burger+IG+langue+Rejoindre = ~430px pour 375).
   On masque l'icône Instagram (déjà dans le footer + section dédiée) et on compacte. */
@media(max-width:480px){
  nav .iglink{display:none}
  nav .logo span{font-size:16px;letter-spacing:1.5px}
  nav .btn{padding:8px 12px;font-size:13px}
  nav .wrap{gap:8px}
}
@media(max-width:360px){
  nav .logo span{font-size:15px;letter-spacing:1px}
  nav .btn{padding:8px 10px;font-size:12px}
  .logomark{width:26px!important;height:26px!important}
}

/* — Boutons stores (page Téléchargement) — */
.dl-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.dl-btn{display:inline-flex;align-items:center;gap:13px;background:linear-gradient(160deg,#1a1030,#0d0820);
  border:1px solid var(--line);border-radius:16px;padding:13px 24px;transition:transform .15s,border-color .2s,box-shadow .2s}
.dl-btn:hover{transform:translateY(-3px);border-color:rgba(255,61,154,.5);box-shadow:0 16px 38px rgba(0,0,0,.45)}
.dl-btn svg{width:28px;height:28px;flex:none}
.dl-btn span{display:flex;flex-direction:column;line-height:1.15;font-family:var(--disp);font-weight:700;font-size:18px;color:var(--ink)}
.dl-btn small{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.3px;color:var(--dim)}
.dl-btn.dl-soon{opacity:.95}
.dl-btn.dl-soon small{color:var(--cyan)}


/* — Section "Tout inclus" (tuiles) — */
.inc-sec{margin:46px 0}
.inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.inc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.inc-grid{grid-template-columns:1fr}}
.inc-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 18px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.inc-card:hover{transform:translateY(-4px);border-color:rgba(156,255,87,.4);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.inc-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid;margin-bottom:14px}
.inc-ic svg{width:23px;height:23px}
.inc-card h3{font-family:var(--disp);font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 4px}
.inc-card p{font-size:12.5px;color:var(--dim);line-height:1.45;margin:0}
.inc-check{position:absolute;top:13px;right:13px;width:20px;height:20px;border-radius:50%;
  background:rgba(156,255,87,.14);border:1px solid rgba(156,255,87,.4);display:flex;align-items:center;justify-content:center}
.inc-check svg{width:11px;height:11px;fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ic-cyan{color:#3DE3FF;background:rgba(61,227,255,.10);border-color:rgba(61,227,255,.28)}
.ic-mag{color:#FF3D9A;background:rgba(255,61,154,.10);border-color:rgba(255,61,154,.28)}
.ic-lime{color:#9CFF57;background:rgba(156,255,87,.10);border-color:rgba(156,255,87,.28)}
.ic-amber{color:#FFC247;background:rgba(255,194,71,.10);border-color:rgba(255,194,71,.28)}
.ic-purp{color:#B36BFF;background:rgba(179,107,255,.10);border-color:rgba(179,107,255,.28)}
.inc-note{display:flex;align-items:center;gap:13px;margin-top:20px;background:rgba(255,194,71,.06);
  border:1px solid rgba(255,194,71,.22);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--dim);line-height:1.5}
.inc-note b{color:var(--ink)}
.inc-note .nic{flex:none;color:var(--amber)}
.inc-note .nic svg{width:22px;height:22px}

/* Passes — cartes prix premium + toggle durée */
.dur-seg{display:inline-flex;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;margin:20px 0 4px;flex-wrap:wrap}
.dur-seg button{border:1px solid transparent;background:transparent;color:var(--dim);border-radius:10px;padding:10px 18px;font-family:var(--sans);font-weight:600;font-size:13.5px;cursor:pointer;transition:.2s}
.dur-seg button.on{border-color:var(--mag);background:rgba(255,61,154,.12);color:var(--ink)}
.passes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 8px}
@media(max-width:900px){.passes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.passes{grid-template-columns:1fr}}
.pass{--ac:#3DE3FF;--ac-rgb:61,227,255;position:relative;overflow:hidden;text-align:left;
  background:linear-gradient(165deg,rgba(var(--ac-rgb),.08),rgba(255,255,255,.02));
  border:1px solid rgba(var(--ac-rgb),.30);border-radius:22px;padding:22px 20px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.pass::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ac-rgb),.22),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.pass:hover{transform:translateY(-5px);border-color:rgba(var(--ac-rgb),.62);box-shadow:0 22px 50px rgba(var(--ac-rgb),.16)}
.pass:hover::after{opacity:1}
.pass.pc-cyan{--ac:#3DE3FF;--ac-rgb:61,227,255}
.pass.pc-mag{--ac:#FF3D9A;--ac-rgb:255,61,154}
.pass.pc-purp{--ac:#B36BFF;--ac-rgb:179,107,255}
.pass.pc-amber{--ac:#FFC247;--ac-rgb:255,194,71}
.pass .ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:var(--ac);background:rgba(var(--ac-rgb),.10);border:1px solid rgba(var(--ac-rgb),.32)}
.pass .ic svg{width:22px;height:22px}
.pass .nm{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);margin-top:13px}
.pass .cap{color:var(--faint);font-size:12px;margin:2px 0 0}
.pass .mid{margin:15px 0 13px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pass .pay-lbl{font-size:12px;color:var(--dim)}
.pass .pay-lbl .mut{color:var(--faint);font-family:var(--mono);font-size:11px}
.pass .pay{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--ac);margin-top:3px;line-height:1}
.pass .buy{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--dim);margin-top:11px}
.pass .buy b{font-family:var(--mono);color:var(--amber);font-weight:700;white-space:nowrap}
.pass .ml{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.pass .mv{font-family:var(--disp);font-weight:700;font-size:32px;line-height:1.05;margin-top:3px;
  background:linear-gradient(100deg,var(--lime),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Bracelets — cartes sélectionnables */
.brc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
@media(max-width:520px){.brc-grid{grid-template-columns:1fr}}
.brc-opt{position:relative;display:block;cursor:pointer;border:1px solid var(--line);border-radius:16px;padding:16px 14px;background:var(--panel);
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s}
.brc-opt:hover{transform:translateY(-2px);border-color:rgba(255,61,154,.45)}
.brc-opt input{position:absolute;opacity:0;width:0;height:0}
.brc-opt .bic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:11px;border:1px solid}
.brc-opt .bic svg{width:21px;height:21px}
.brc-opt .bic.cy{color:var(--cyan);background:rgba(61,227,255,.10);border-color:rgba(61,227,255,.3)}
.brc-opt .bic.am{color:var(--amber);background:rgba(255,194,71,.10);border-color:rgba(255,194,71,.3)}
.brc-opt h4{font-family:var(--disp);font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 3px}
.brc-opt p{font-size:12px;color:var(--dim);line-height:1.45;margin:0 0 10px;min-height:34px}
.brc-opt .price{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--lime)}
.brc-opt .price.devis{color:var(--amber)}
.brc-opt .tick{position:absolute;top:13px;right:13px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:.2s}
.brc-opt .tick svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:.2s}
.brc-opt:has(input:checked){border-color:var(--mag);background:rgba(255,61,154,.10);box-shadow:0 0 0 1px var(--mag),0 12px 30px rgba(255,61,154,.16)}
.brc-opt:has(input:checked) .tick{background:var(--mag);border-color:var(--mag)}
.brc-opt:has(input:checked) .tick svg{opacity:1}