/* ============================================================
   RIP & REVEAL — Design System
   Charte : Night Navy + dégradé iridescent (teal → sky → lilac)
   Construit pour un rendu cinématographique, accessible et rapide.
   ============================================================ */

:root{
  /* Fonds nuit */
  --navy:#0B1026;
  --navy-1:#0E1430;
  --navy-2:#161C3C;
  --navy-3:#1E2750;
  /* Clair / papier */
  --paper:#FAFAF7;
  --ink:#211F2B;
  /* Texte */
  --text:#E9ECF6;
  --muted:#9AA3C4;
  /* Était #6E76A0 : 4,27 sur le fond de page et 3,76 sur une carte, donc sous
     le seuil AA de 4,5 pour du texte normal. Cette valeur mesure 6,20 et 5,47 —
     lisible partout, sans changer la tonalité. */
  --muted-2:#8A92BC;
  /* Signature iridescente */
  --teal:#5BC4B0;
  --sky:#7FA8E8;
  --lilac:#A99CF0;
  --red:#E24B4A;
  --iri:linear-gradient(90deg,#5BC4B0 0%,#7FA8E8 52%,#A99CF0 100%);
  --iri-soft:linear-gradient(120deg,rgba(91,196,176,.18),rgba(127,168,232,.18),rgba(169,156,240,.18));
  /* Rayons & ombres */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-pill:40px;
  --shadow-card:0 18px 50px -18px rgba(7,10,26,.7);
  --shadow-glow:0 0 40px rgba(127,168,232,.35);
  /* Layout */
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Poppins',system-ui,-apple-system,Arial,sans-serif;
  --display:'Space Grotesk','Poppins',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section,#top{scroll-margin-top:84px}
body.lenis{height:auto}
body{
  font-family:var(--font);
  background:var(--navy);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:rgba(127,168,232,.35);color:#fff}

/* ---------- Fond canvas spirographes + halo ---------- */
#spiro-bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  /* léger voile pour la profondeur */
}
.bg-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -8%,rgba(127,168,232,.12),transparent 60%),
    radial-gradient(900px 600px at 85% 110%,rgba(169,156,240,.10),transparent 60%);
}
.page{position:relative;z-index:2}

/* Curseur holographique (desktop) */
#cursor-halo{
  position:fixed;top:0;left:0;width:300px;height:300px;
  margin:-150px 0 0 -150px;border-radius:50%;
  pointer-events:none;z-index:60;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,rgba(127,168,232,.20),rgba(169,156,240,.08) 40%,transparent 65%);
  transition:opacity .4s var(--ease);will-change:transform;
}
#cursor-dot{
  position:fixed;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:var(--iri);pointer-events:none;z-index:61;
  opacity:0;transition:opacity .3s,width .2s,height .2s;will-change:transform;
}
#cursor-dot.grow{width:42px;height:42px;margin:-21px 0 0 -21px;mix-blend-mode:screen;opacity:.5!important}

/* ---------- Utilitaires ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.iri-text{
  background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  color:var(--teal);font-weight:600;letter-spacing:3px;font-size:12.5px;
  text-transform:uppercase;
}
.tear{
  height:10px;width:220px;background:var(--iri);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='10'%3E%3Cpolygon points='0,0 220,0 220,5 210,9 198,3 186,9 174,3 162,9 150,3 138,9 126,3 114,9 102,3 90,9 78,3 66,9 54,3 42,9 30,3 18,9 8,4 0,5' fill='black'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='10'%3E%3Cpolygon points='0,0 220,0 220,5 210,9 198,3 186,9 174,3 162,9 150,3 138,9 126,3 114,9 102,3 90,9 78,3 66,9 54,3 42,9 30,3 18,9 8,4 0,5' fill='black'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:var(--r-pill);cursor:pointer;border:none;
  position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .25s;
}
.btn-iri{background:var(--iri);color:#0B1026}
.btn-iri::after{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn-iri:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(127,168,232,.45)}
.btn-iri:hover::after{transform:translateX(120%)}
.btn-ghost{background:rgba(255,255,255,.04);border:1.5px solid rgba(168,180,225,.4);color:var(--text)}
.btn-ghost:hover{border-color:var(--lilac);transform:translateY(-3px);background:rgba(168,180,225,.08)}
.btn:active{transform:translateY(-1px) scale(.98)}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,rgba(11,16,38,.94),rgba(11,16,38,.80));
  border-bottom:1px solid rgba(168,180,225,.10);transition:background .3s,transform .4s var(--ease);
}
header.hidden{transform:translateY(-100%)}
nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;font-weight:700;font-size:19px;letter-spacing:1.5px}
.brand-logo{height:36px;width:auto;display:block}
footer .brand-logo{height:42px}
.brand .brand-tear{
  height:5px;width:100%;background:var(--iri);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpolygon points='0,0 120,0 120,3 112,6 104,2 96,6 88,2 80,6 72,2 64,6 56,2 48,6 40,2 32,6 24,2 16,6 8,3 0,4' fill='black'/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpolygon points='0,0 120,0 120,3 112,6 104,2 96,6 88,2 80,6 72,2 64,6 56,2 48,6 40,2 32,6 24,2 16,6 8,3 0,4' fill='black'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.navlinks{display:flex;gap:30px;align-items:center}
.nav-actions{display:flex;align-items:center;gap:14px}
.account-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(168,180,225,.4);color:var(--text);background:rgba(255,255,255,.02);transition:border-color .2s,transform .2s,background .2s;flex-shrink:0;order:2}
.account-btn:hover{border-color:var(--lilac);color:#fff;background:rgba(168,180,225,.08);transform:translateY(-1px)}
.account-btn svg{display:block}
.navlinks a{font-size:14.5px;color:var(--muted);font-weight:500;transition:color .2s;position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--iri);transition:width .25s var(--ease)}
.navlinks a:hover{color:#fff}.navlinks a:hover::after{width:100%}
.cart-btn{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--text);
  border:1.5px solid rgba(168,180,225,.4);padding:9px 17px;border-radius:var(--r-pill);
  cursor:pointer;background:rgba(255,255,255,.02);transition:border-color .2s,transform .2s
}
.cart-btn:hover{border-color:var(--lilac);transform:translateY(-1px)}
.cart-btn .cn{
  min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--iri);color:#0B1026;border-radius:50%;font-size:12px;font-weight:700;
  transition:transform .25s var(--ease)
}
.cart-btn.bump .cn{transform:scale(1.4)}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:100px 0 74px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%}
.hero-copy{max-width:560px;display:flex;flex-direction:column;align-items:center;text-align:center}
/* groupe de marque : wordmark + déchirure + slogan centrés ensemble */
.hero-brand{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero-brand .hero-logo{margin-left:auto;margin-right:auto}
.live-pill{
  display:inline-flex;align-items:center;gap:9px;background:rgba(226,75,74,.13);
  border:1px solid rgba(226,75,74,.4);color:#FF8E83;font-weight:600;font-size:12.5px;
  letter-spacing:1.2px;padding:8px 16px;border-radius:var(--r-pill);margin-bottom:24px
}
.live-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,75,74,.55)}70%{box-shadow:0 0 0 13px rgba(226,75,74,0)}100%{box-shadow:0 0 0 0 rgba(226,75,74,0)}}
.hero h1{font-family:var(--display);font-size:clamp(46px,7.5vw,92px);font-weight:700;letter-spacing:1px;line-height:.98}
.hero h1 .amp{font-style:italic}
.hero-logo-wrap{margin:10px 0 0}
.hero-logo{width:min(430px,90%);height:auto;display:block;filter:drop-shadow(0 4px 26px rgba(127,168,232,.25))}
.hero-tear{width:min(300px,72%);height:11px;margin:22px 0 18px}
.hero .tear{margin:20px 0 16px}
.slogan{
  font-weight:600;letter-spacing:4px;font-size:clamp(12px,1.7vw,15px);margin-bottom:22px;
  background:linear-gradient(90deg,#5BC4B0,#7FA8E8,#A99CF0,#fff,#7FA8E8,#5BC4B0);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6s linear infinite;filter:drop-shadow(0 0 14px rgba(127,168,232,.3))
}
@keyframes shine{to{background-position:220% center}}
.hero-lead{color:#AEB7D6;font-size:clamp(15.5px,1.7vw,18.5px);max-width:486px;margin-bottom:34px;line-height:1.72}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:500}
.hero-trust b{color:var(--teal);font-size:11px}
/* halo d'ambiance derrière le booster */
.hero-spot{position:absolute;top:50%;right:-4%;transform:translateY(-50%);width:680px;height:680px;max-width:84vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(127,168,232,.16),rgba(169,156,240,.06) 45%,transparent 66%)}
/* indicateur de défilement */
.hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--muted-2);font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;z-index:3;transition:color .25s}
.hero-scroll:hover{color:var(--text)}
.hero-scroll .mouse{width:24px;height:38px;border:2px solid rgba(168,180,225,.35);border-radius:14px;position:relative}
.hero-scroll .mouse::after{content:"";position:absolute;top:7px;left:50%;width:4px;height:7px;border-radius:3px;background:var(--iri);transform:translateX(-50%);animation:scrollDot 1.9s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}75%{opacity:0;transform:translate(-50%,12px)}100%{opacity:0}}

/* Booster 3D (CSS preserve-3d) */
.booster-stage{
  perspective:1400px;display:flex;align-items:center;justify-content:center;
  min-height:430px;position:relative;margin-bottom:4px
}
.booster-aura{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(127,168,232,.30),transparent 62%);
  animation:auraPulse 5s ease-in-out infinite
}
@keyframes auraPulse{0%,100%{opacity:.55}50%{opacity:.95}}
.booster-ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:340px;height:340px;border-radius:50%;border:1px solid rgba(168,180,225,.16)
}
.booster-ring::before{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px dashed rgba(127,168,232,.14)}
.booster-floor{
  position:absolute;left:50%;bottom:54px;transform:translateX(-50%);
  width:230px;height:32px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(127,168,232,.30),transparent 72%)
}
.booster{
  position:relative;width:230px;height:380px;transform-style:preserve-3d;
  cursor:pointer;transition:transform .2s var(--ease);will-change:transform;
  animation:floatY 6s ease-in-out infinite
}
@keyframes floatY{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-22px)}}
.booster .face{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.1)
}
.booster .front{
  background:
    linear-gradient(160deg,#1b2350,#0d1330),
    var(--iri);
  background-blend-mode:overlay;
  transform:translateZ(26px)
}
.booster .back{background:linear-gradient(160deg,#141a3c,#0a0f28);transform:translateZ(-26px) rotateY(180deg)}
.booster .side{width:52px;background:linear-gradient(#222a55,#10152f)}
.booster .left{left:-26px;transform:rotateY(-90deg);transform-origin:right}
.booster .right{right:-26px;transform:rotateY(90deg);transform-origin:left}
.booster .top{height:52px;left:0;right:0;top:-26px;background:linear-gradient(90deg,#2a3366,#171d40);transform:rotateX(90deg);transform-origin:bottom}
.booster .bottom{height:52px;left:0;right:0;bottom:-26px;background:linear-gradient(90deg,#171d40,#0c1130);transform:rotateX(-90deg);transform-origin:top}
/* ============================================================
   REFLET HOLOGRAPHIQUE — booster et carte révélée
   ------------------------------------------------------------
   Trois défauts corrigés, dont deux étaient de ma conception.

   1. L'effet animait « background-position » : le navigateur redessinait
      toute la surface à chaque image. On déplace maintenant un calque par
      « transform », géré par la carte graphique, sans redessin.

   2. Ma bande de lumière traversait la surface en une fraction du cycle,
      puis plus rien pendant des secondes : on voyait UNE LIGNE PASSER au
      lieu d'un miroitement. Le dégradé est désormais RÉPÉTITIF et le
      déplacement vaut exactement une période — le motif défile en continu
      et la boucle est invisible, sans le saut qu'on apercevait.

   3. « mix-blend-mode » recalcule un mélange de couleurs à chaque image et
      annule les optimisations de composition. Retiré : un blanc très peu
      opaque sur un fond sombre donne le même rendu, sans le coût.

   La rotation est portée par la transformation elle-même, identique dans les
   deux étapes de l'animation : seule la translation varie, ce qui préserve
   la continuité parfaite du motif.
   ============================================================ */
.booster-foil{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  pointer-events:none;opacity:.9
}
.booster-foil::before{
  content:"";position:absolute;inset:-200%;   /* voir la note sur la boucle */
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0)    0px,
    rgba(255,255,255,.05)  70px,
    rgba(255,255,255,.16) 130px,
    rgba(255,255,255,.24) 150px,
    rgba(255,255,255,.16) 170px,
    rgba(255,255,255,.05) 230px,
    rgba(255,255,255,0)   300px);
  animation:foilSweep 7s linear infinite;
  will-change:transform;backface-visibility:hidden
}
/* 300px = exactement une période du motif : le retour est imperceptible. */
@keyframes foilSweep{
  from{transform:rotate(-24deg) translate3d(0,0,0)}
  to{transform:rotate(-24deg) translate3d(300px,0,0)}
}
.booster-art{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;gap:10px}
.booster-emblem{width:80%;height:auto;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.booster-art .rr{font-family:var(--display);font-size:46px;font-weight:700;color:#fff;text-shadow:0 2px 18px rgba(127,168,232,.6);letter-spacing:1px}
.booster-art .rr .amp{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.booster-art .sub{font-size:10px;letter-spacing:3px;color:rgba(233,236,246,.85);text-transform:uppercase}
.booster-art .zig{width:90px;height:8px;background:var(--iri);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='8'%3E%3Cpolygon points='0,0 90,0 90,4 82,7 72,2 62,7 52,2 42,7 32,2 22,7 12,2 4,5 0,4' fill='black'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='8'%3E%3Cpolygon points='0,0 90,0 90,4 82,7 72,2 62,7 52,2 42,7 32,2 22,7 12,2 4,5 0,4' fill='black'/%3E%3C/svg%3E") no-repeat center/contain}
.booster-hint{position:absolute;bottom:-46px;left:0;right:0;text-align:center;color:var(--muted);font-size:13px;letter-spacing:1px;animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* carte révélée + particules */
.reveal-card{
  position:absolute;width:180px;height:250px;border-radius:14px;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.4) rotateY(0);opacity:0;pointer-events:none;
  background:linear-gradient(140deg,#26305f,#10162f);
  box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.18);
  z-index:5;overflow:hidden
}
/* Une fois révélée, la carte redevient cliquable : c'est ce qui permet de
   la refermer sans attendre. Hors révélation elle reste transparente aux
   clics, sinon elle intercepterait ceux destinés au booster. */
.reveal-card.show{animation:cardPop 1.1s var(--ease) forwards;pointer-events:auto;cursor:pointer}
/* La carte est posée en top:50% / left:50% : il faut donc translate(-50%,-50%)
   pour qu'elle soit VRAIMENT centrée sur le booster. L'animation se terminait
   à -22 %, soit 28 % de sa hauteur — 70 px — sous le centre : d'où l'impression
   qu'elle arrivait en bas. Le léger dépassement à -54 % donne le rebond, puis
   elle se pose exactement au centre. */
@keyframes cardPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotateY(180deg)}
  60%{opacity:1;transform:translate(-50%,-54%) scale(1.06) rotateY(0)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotateY(0)}
}
.reveal-card .rc-art{position:absolute;inset:0;width:100%;height:100%;border-radius:14px}
/* Photo de carte déposée par tes soins. Même cadrage que l'illustration
   qu'elle remplace, et placée SOUS le reflet holo : la brillance passe donc
   par-dessus la photo, comme sur une vraie carte inclinée à la lumière. */
.reveal-card .rc-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:14px;display:block;z-index:1}
/* Une photo a bien été chargée : l'illustration dessinée s'efface pour de bon.
   Piloté par une classe et non par un style en ligne — c'est ce qui empêche
   l'ancienne carte de revenir aux ouvertures suivantes. */
.reveal-card.has-photo .rc-art{display:none}
.reveal-card.has-photo .star{display:none}
.reveal-card .holo,.reveal-card .star{z-index:2}
/* Reflet de la carte révélée. Même principe que le booster : le voile
   iridescent reste FIXE — le faire tourner coûtait cher et bandait —, seule
   la bande de lumière se déplace, par transform.
   Le dégradé conique passe de 4 à 7 étapes : plus il y a de repères de
   couleur, moins l'écran a besoin d'inventer des paliers visibles. */
.reveal-card .holo{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  pointer-events:none;
  /* Plus de voile de fond : il grisait la carte. Tout l'effet est porté par
     les bandes colorées au-dessus, en mode « screen ». */
  background:none
}
/* Même motif répétitif que le booster, mais franchement plus lumineux : c'est
   une carte holographique, c'est son moment. Elle peut se permettre un mode
   de fusion « screen » — moins coûteux qu'« overlay », et surtout limité aux
   sept secondes de la révélation, pendant lesquelles le fond animé est en
   pause. La durée diffère de celle du booster pour que les deux reflets ne
   battent pas à l'unisson. */
/* Reflet de la carte.
   ------------------------------------------------------------
   Deux corrections après essais ratés.

   · L'arc-en-ciel : six teintes saturées qui se suivent, ça ne ressemble pas
     à une holo mais à un spectre. Une vraie carte renvoie surtout un éclat
     BLANC, avec de fines franges colorées sur ses bords. On garde donc un
     seul éclat par période, bordé d'un soupçon de cyan et de violet.

   · La boucle visible : le calque faisait 240 % du parent et se déplaçait de
     210 px. Son bord gauche finissait DANS le champ, et on voyait la couture.
     À 500 %, il couvre le parent pendant toute la translation. C'était une
     erreur de géométrie, pas de couleur. */
.reveal-card .holo::before{
  content:"";position:absolute;inset:-200%;
  mix-blend-mode:screen;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,0)           0px,
    rgba(120,240,235,.07)  34px,
    rgba(255,255,255,.26)  58px,
    rgba(255,255,255,.40)  74px,
    rgba(255,255,255,.26)  90px,
    rgba(205,165,255,.07) 114px,
    rgba(0,0,0,0)         210px);
  animation:foilSweepCarte 2.4s linear infinite;
  will-change:transform;backface-visibility:hidden
}
/* 210px = exactement une période : la boucle reste invisible. */
@keyframes foilSweepCarte{
  from{transform:rotate(-24deg) translate3d(0,0,0)}
  to{transform:rotate(-24deg) translate3d(210px,0,0)}
}
.reveal-card .star{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:64px;color:#fff;filter:drop-shadow(0 0 18px rgba(127,168,232,.9))}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:4;opacity:0}

/* ---------- Sections génériques ---------- */
section.block{padding:100px 0;position:relative}
.section-head{text-align:center;max-width:640px;margin:0 auto 54px}
.section-head .eyebrow{display:inline-block;margin-bottom:12px}
.section-head h2{font-family:var(--display);font-size:clamp(28px,4.2vw,44px);font-weight:700;line-height:1.1;letter-spacing:.3px}
.section-head p{color:var(--muted);margin-top:14px;font-size:17px}

/* Bandeau live + countdown */
.livebar{
  background:linear-gradient(120deg,rgba(22,28,60,.85),rgba(30,39,80,.85));
  border:1px solid rgba(168,180,225,.18);border-radius:var(--r-lg);
  padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  box-shadow:var(--shadow-card)
}
.livebar .lab{color:var(--muted);font-size:12.5px;letter-spacing:2px;font-weight:500;text-transform:uppercase}
.livebar h3{font-size:22px;font-weight:700;margin-top:6px}
.livebar .badge-live{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:#FF8E83;font-size:13px;font-weight:600}
.livebar .badge-live .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.8s infinite}
.count{display:flex;gap:12px}
.count .u{background:rgba(11,16,38,.7);border:1px solid rgba(168,180,225,.18);border-radius:14px;min-width:74px;padding:12px 8px;text-align:center}
.count .n{font-family:var(--display);font-size:30px;font-weight:700;line-height:1}
.count .t{font-size:10.5px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:6px}

/* Étapes */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  background:rgba(22,28,60,.55);border:1px solid rgba(168,180,225,.14);border-radius:var(--r-md);
  padding:34px 28px;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s
}
.step:hover{transform:translateY(-6px);border-color:rgba(127,168,232,.5);box-shadow:var(--shadow-card)}
.step .num{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:22px;background:var(--iri);color:#0B1026;margin-bottom:20px}
.step h4{font-size:20px;font-weight:600;margin-bottom:10px}
.step p{color:var(--muted);font-size:15px}

/* ---------- Boutique (cartes holographiques) ---------- */
.shop-note{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.shop-note span{font-size:13px;color:var(--muted);font-weight:500}
/* Grille centrée.
   Les colonnes sont bornées entre 230 et 270 px au lieu de « 1fr » : sans
   borne haute, elles s'étirent pour remplir la largeur et une ligne
   incomplète devient impossible à centrer. Avec une largeur maximale,
   justify-content:center peut faire son travail — une dernière ligne de deux
   produits se place alors au milieu, et non collée à gauche. */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,270px));
  justify-content:center;gap:20px
}
.card{
  position:relative;border-radius:var(--r-md);overflow:hidden;cursor:pointer;
  background:linear-gradient(160deg,rgba(28,35,72,.9),rgba(15,21,45,.95));
  border:1px solid rgba(168,180,225,.14);
  transform-style:preserve-3d;transition:transform .15s var(--ease),box-shadow .25s,border-color .25s;
  will-change:transform
}
.card:hover{border-color:rgba(127,168,232,.45);box-shadow:var(--shadow-card)}
.card .thumb{position:relative;height:200px;overflow:hidden}
.card .thumb svg{width:100%;height:100%;display:block}
/* conteneur média : photo réelle par-dessus le visuel SVG (repli) */
.media{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 35%,#1b2350,#0d1330)}
.media svg{width:100%;height:100%;display:block}
/* Photo détourée (PNG transparent) posée sur le fond sombre de la boutique.
   La marge est passée de 10 à 26 px : le produit occupe moins la vignette, on
   le voit en entier avec de l'air autour au lieu d'un cadrage serré. C'est
   aussi ce qui uniformise la grille quand les photos n'ont pas toutes le même
   cadrage d'origine. */
.media .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;display:block}
/* reflet holo qui suit le curseur */
.card .foil{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 35%),
    conic-gradient(from 0deg at var(--mx,50%) var(--my,50%),rgba(91,196,176,.6),rgba(127,168,232,.6),rgba(169,156,240,.6),rgba(255,255,255,.5),rgba(91,196,176,.6));
  background-blend-mode:overlay
}
/* Holo réservé aux raretés : c'est ce qui lui rend sa valeur de signal.
   Les cartes ordinaires n'ont ni foil ni glare dans le DOM (voir app.js). */
.card.rare:hover .foil{opacity:.55}
.card .glare{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 40%)
}
.card.rare:hover .glare{opacity:1}
/* Liseré discret sur les raretés : la carte se signale même sans survol. */
.card.rare{border-color:rgba(169,156,240,.42)}
.card.rare:hover{border-color:rgba(169,156,240,.75)}
.card .badge{
  position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.4px;
  padding:5px 11px;border-radius:var(--r-pill);z-index:3
}
.badge.stock{background:rgba(91,196,176,.18);color:#7fe0cd;border:1px solid rgba(91,196,176,.4)}
.badge.lim{background:rgba(169,156,240,.18);color:#cabfff;border:1px solid rgba(169,156,240,.45)}
.badge.jp{background:rgba(226,75,74,.2);color:#ff9d93;border:1px solid rgba(226,75,74,.45)}
/* Derniers exemplaires : ambre, entre le vert « en stock » et le gris « épuisé ».
   Déclenché sous 3 unités, à partir du stock RÉEL — jamais une urgence inventée. */
.badge.low{background:rgba(240,205,134,.18);color:#f0cd86;border:1px solid rgba(240,205,134,.45)}
.card .body{padding:14px 15px 16px;position:relative;z-index:2;text-align:center}
/* L'étiquette a disparu des cartes (elle affichait « Scellé FR » partout, donc
   n'informait de rien) mais la fiche produit s'en sert encore : le sélecteur
   couvre les deux, sinon la modale perdait sa mise en forme au passage. */
.card .tag,.pm .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--lilac);background:rgba(169,156,240,.12);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:10px}
.card h4{font-size:14.5px;font-weight:600;line-height:1.32;min-height:38px}
/* Sous-titre : remplace l'étiquette « Scellé FR », qui était identique presque
   partout et n'apprenait donc rien. Le contenu réel du produit informe mieux. */
.card .sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35;min-height:32px}
/* Le prix au booster passe SOUS le prix : sur une carte de 230 px, les deux
   côte à côte se chevauchaient dès qu'un montant atteignait trois chiffres. */
.card .row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:8px;margin-top:10px}
/* Prix : l'information qu'on cherche en premier, elle doit dominer.
   tabular-nums aligne les chiffres d'une carte à l'autre, sinon les prix
   dansent d'une colonne à la suivante. */
.card .price{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.card .unitp{flex-basis:100%;font-size:11.5px;color:var(--muted);margin-top:3px;
  font-variant-numeric:tabular-nums}
.card .add{
  margin-top:14px;width:100%;border:none;cursor:pointer;font-weight:600;font-size:14px;
  padding:12px;border-radius:var(--r-sm);background:rgba(168,180,225,.1);color:#fff;
  border:1px solid rgba(168,180,225,.2);transition:background .2s,transform .12s
}
.card .add:hover{background:var(--iri);color:#0B1026}
.card .add:active{transform:scale(.97)}
.card .add:disabled{background:rgba(110,118,160,.2);color:var(--muted);border-color:rgba(168,180,225,.2);cursor:not-allowed}
.card .add:disabled:hover{background:rgba(110,118,160,.2);color:var(--muted)}
/* favori (cœur) */
.card .fav{position:absolute;top:12px;right:12px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid rgba(168,180,225,.3);background:rgba(11,16,38,.55);color:#9aa3c4;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,color .2s,border-color .2s}
.card .fav:hover{color:#ff8e83;border-color:#ff8e83;transform:scale(1.12)}
.card .fav.active{color:#E24B4A;border-color:#E24B4A;background:rgba(226,75,74,.12)}
/* épuisé */
.badge.sold{background:rgba(110,118,160,.28);color:#cdd6ef;border:1px solid rgba(168,180,225,.4)}
/* Épuisé : une pastille grise se remarque à peine. Désaturer et éteindre la
   photo dit la même chose sans un mot, et se lit au premier coup d'œil. */
.card.soldout .media{filter:grayscale(.95) brightness(.5);opacity:.75}
.card.soldout h4,.card.soldout .price{color:var(--muted)}
.card.soldout:hover{transform:none;border-color:rgba(168,180,225,.16);box-shadow:none}

/* ---------- Fiche produit : stock et prix au booster ---------- */
.pmstock{font-size:13px;font-weight:600;margin:10px 0 2px;display:flex;align-items:center;gap:7px}
.pmstock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pmstock.ok{color:#7fe0cd}
.pmstock.low{color:#f0cd86}
.pmstock.out{color:var(--muted)}
.pmunit{display:block;font-family:var(--font);font-size:13px;font-weight:400;color:var(--muted);margin-top:4px}

/* ---------- Intertitres de famille dans la grille ---------- */
/* grid-column:1/-1 : le titre occupe toute la largeur et ne compte pas comme
   une colonne, sinon il décalerait toute la grille d'un cran. */
.grid-head{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:14px 0 2px;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.3px;color:#dfe4f5
}
/* Un trait de chaque côté : le titre se retrouve au centre, comme le reste
   de la page. Un seul trait à droite le poussait à gauche. */
.grid-head::before,.grid-head::after{content:"";flex:1;height:1px;background:rgba(168,180,225,.16)}
.grid-head span{
  /* plus de order:-1 : le compteur suit le libellé, entre les deux traits */
  font-family:var(--font);font-size:11.5px;font-weight:600;color:var(--muted);
  background:rgba(168,180,225,.1);border-radius:var(--r-pill);padding:2px 9px
}
.grid-head:first-child{margin-top:0}

/* ---------- Squelettes de chargement ---------- */
/* Mêmes dimensions que les vraies cartes : c'est tout l'intérêt, la grille ne
   bouge pas quand les produits arrivent. */
.sk-card{background:var(--navy-2);border:1px solid rgba(168,180,225,.16);border-radius:var(--r-lg);overflow:hidden}
.sk-thumb{height:200px;background:rgba(168,180,225,.07)}
.sk-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:9px}
.sk-l{display:block;height:11px;border-radius:5px;background:rgba(168,180,225,.1)}
.sk-l.tall{height:20px}
.sk-l.btn{height:38px;border-radius:var(--r-sm);margin-top:4px}
.w100{width:100%}.w80{width:80%}.w55{width:55%}.w40{width:40%}
.sk-thumb,.sk-l{
  background-image:linear-gradient(90deg,transparent,rgba(168,180,225,.14),transparent);
  background-size:200% 100%;background-repeat:no-repeat;animation:skshine 1.3s linear infinite
}
@keyframes skshine{from{background-position:-120% 0}to{background-position:220% 0}}

/* ---------- Signature « rip » : bord déchiré ---------- */
/* Le nom de la marque parle de déchirure, autant que le site en porte la trace.
   Tracé en clip-path plutôt qu'en image : net à toutes les tailles, aucun
   fichier à charger, et la hauteur reste maîtrisée. */
.rip-sep{
  /* Même dégradé iridescent que la déchirure du héros (.tear) : les deux
     signatures de la marque doivent parler la même langue. */
  height:26px;margin:6px 0;background:var(--iri);
  /* Bord SUPÉRIEUR droit, dents vers le BAS — comme la déchirure du héros.
     Le tracé précédent était l'inverse : dents vers le haut, ce qui donnait
     l'impression d'un papier arraché à l'envers. */
  clip-path:polygon(0 0,100% 0,
    100% 74%,96% 30%,91% 84%,85% 36%,79% 76%,73% 26%,67% 86%,61% 32%,55% 80%,
    49% 28%,43% 90%,37% 34%,31% 82%,25% 22%,19% 78%,14% 30%,9% 88%,4% 38%,0 74%);
}
.rip-sep.up{transform:scaleY(-1)}

/* ---------- Histoire ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story h2{font-family:var(--display);font-size:clamp(26px,4vw,40px);font-weight:700;margin-bottom:18px;line-height:1.15}
.story p{color:var(--muted);font-size:16px;margin-bottom:16px}
.assure{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.chip{display:flex;align-items:center;gap:8px;background:rgba(22,28,60,.6);border:1px solid rgba(168,180,225,.16);border-radius:var(--r-pill);padding:10px 16px;font-size:14px;font-weight:500;color:#D7DCEC}
.chip b{color:var(--teal)}
.emblem{display:flex;justify-content:center}
.emblem svg,.emblem img{filter:drop-shadow(0 0 30px rgba(127,168,232,.25));animation:floatY 7s ease-in-out infinite;border-radius:24px}
.story-sign{margin-top:22px;font-family:var(--display);font-size:17px;color:var(--lilac);font-weight:600;font-style:italic}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:rgba(22,28,60,.55);border:1px solid rgba(168,180,225,.14);border-radius:var(--r-md);overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:rgba(127,168,232,.4)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--teal);transition:transform .25s var(--ease);line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq details p{padding:0 22px 20px;color:var(--muted);font-size:15px;margin:0}
.faq details a{color:var(--sky)}

/* ---------- Newsletter / pré-ouverture ---------- */
.news{max-width:620px;margin:0 auto;text-align:center;background:linear-gradient(120deg,rgba(22,28,60,.9),rgba(30,39,80,.9));border:1px solid rgba(168,180,225,.18);border-radius:var(--r-lg);padding:48px 30px;box-shadow:var(--shadow-card)}
.news .eyebrow{display:inline-block;margin-bottom:12px}
.news h2{font-family:var(--display);font-size:clamp(24px,3.6vw,34px);font-weight:700;margin-bottom:10px}
.news>p{color:var(--muted);font-size:16px;max-width:440px;margin:0 auto 24px}
.news-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap}
.news-form input{flex:1;min-width:200px;background:rgba(11,16,38,.7);border:1.5px solid rgba(168,180,225,.3);border-radius:var(--r-pill);padding:13px 20px;color:#fff;font-family:inherit;font-size:15px}
.news-form input:focus{outline:none;border-color:var(--sky)}
.news-form .btn{flex-shrink:0}
.news-msg{min-height:22px;margin-top:14px;font-size:14px;font-weight:500}
.news-msg.ok{color:var(--teal)}
.news-msg.err{color:#ff9d93}
.news small{display:block;margin-top:14px;color:var(--muted-2);font-size:12.5px}

/* ---------- CTA final ---------- */
.final{
  text-align:center;background:linear-gradient(120deg,rgba(22,28,60,.9),rgba(30,39,80,.9));
  border:1px solid rgba(168,180,225,.18);border-radius:var(--r-lg);padding:64px 30px;
  box-shadow:var(--shadow-card);position:relative;overflow:hidden
}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0,rgba(127,168,232,.18),transparent 70%);pointer-events:none}
.final h2{font-family:var(--display);font-size:clamp(26px,4.5vw,42px);font-weight:700;margin-bottom:14px;position:relative}
.final p{color:var(--muted);margin-bottom:30px;font-size:17px;position:relative}
.socials{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- Footer ---------- */
footer{padding:54px 0 34px;border-top:1px solid rgba(168,180,225,.12);margin-top:40px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:14px}.foot-links a:hover{color:#fff}
.copy{color:var(--muted-2);font-size:13px;margin-top:24px;text-align:center}
.to-top{display:flex;width:fit-content;margin:28px auto 0;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);border:1.5px solid rgba(168,180,225,.35);border-radius:var(--r-pill);padding:9px 18px;transition:border-color .2s,transform .2s,background .2s}
.to-top:hover{border-color:var(--lilac);background:rgba(168,180,225,.08);transform:translateY(-2px)}

/* ---------- Drawer panier ---------- */
#backdrop{position:fixed;inset:0;background:rgba(7,10,26,.72);opacity:0;visibility:hidden;transition:.3s;z-index:80}
#backdrop.show{opacity:1;visibility:visible}
#drawer{
  position:fixed;top:0;right:0;height:100%;width:410px;max-width:92vw;
  background:linear-gradient(180deg,#0F1535,#0a0f28);border-left:1px solid rgba(168,180,225,.16);
  transform:translateX(100%);transition:transform .35s var(--ease);z-index:90;display:flex;flex-direction:column
}
#drawer.show{transform:translateX(0)}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(168,180,225,.14)}
.dhead h3{font-size:19px;font-weight:600}
.x{background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer;line-height:1;transition:color .2s}
.x:hover{color:#fff}
#ditems{flex:1;overflow-y:auto;padding:8px 24px}
.li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(168,180,225,.1)}
.li .lim{width:60px;height:60px;border-radius:10px;overflow:hidden;flex-shrink:0}
.li .lim svg{width:100%;height:100%;display:block}
.li .info{flex:1;min-width:0}
.li .nm{font-size:14px;font-weight:600;line-height:1.3}
.li .pr{font-size:13px;color:var(--muted);margin-top:3px}
.qty{display:inline-flex;align-items:center;margin-top:8px;border:1px solid rgba(168,180,225,.25);border-radius:8px;overflow:hidden}
.qty button{width:28px;height:28px;background:none;border:none;color:#fff;cursor:pointer;font-size:16px;transition:background .2s}
.qty button:hover{background:rgba(168,180,225,.15)}
.qty span{width:32px;text-align:center;font-size:13px;font-weight:600}
.rm{background:none;border:none;color:var(--muted-2);font-size:12px;cursor:pointer;margin-top:6px;display:block}
.rm:hover{color:#FF8E83}
.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:15px}
.dfoot{padding:20px 24px;border-top:1px solid rgba(168,180,225,.14)}
.dfoot .sumline{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:7px;color:var(--muted)}
.dfoot .ship-bar{height:6px;border-radius:6px;background:rgba(168,180,225,.15);overflow:hidden;margin:4px 0 12px}
.dfoot .ship-bar i{display:block;height:100%;background:var(--iri);width:0;transition:width .4s var(--ease)}
.dfoot .ship-hint{font-size:12px;color:var(--teal);margin-bottom:12px}
.dfoot .total{display:flex;justify-content:space-between;font-family:var(--display);font-size:21px;font-weight:700;color:#fff;margin:8px 0 18px}
.dfoot .btn-iri{width:100%;justify-content:center}
.dfoot small{display:block;text-align:center;color:var(--muted-2);font-size:12px;margin-top:12px}
.pay-error{background:rgba(226,75,74,.14);border:1px solid rgba(226,75,74,.4);color:#ff9d93;font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:12px;display:none}
.sales-closed{background:rgba(127,168,232,.12);border:1px solid rgba(127,168,232,.32);color:#B5C5EE;font-size:13.5px;line-height:1.55;text-align:center;padding:14px;border-radius:12px}
.sales-closed b{color:var(--teal)}
.shop-banner{display:flex;align-items:center;justify-content:center;gap:10px;max-width:760px;margin:0 auto 30px;
  background:rgba(127,168,232,.10);border:1px solid rgba(127,168,232,.3);border-radius:var(--r-pill);
  padding:12px 22px;color:#C2CEEC;font-size:14px;font-weight:500;text-align:center}
.shop-banner b{color:var(--teal)}
/* display:flex ci-dessus l'emporte sur le [hidden] du navigateur : on le neutralise pour que
   le bandeau piloté par SALES_OPEN disparaisse vraiment (sinon pastille vide à l'écran) */
.shop-banner[hidden]{display:none}

/* ---------- Modale produit ---------- */
.modal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mcard{
  background:linear-gradient(180deg,#0F1535,#0a0f28);border:1px solid rgba(168,180,225,.18);
  border-radius:var(--r-lg);max-width:900px;width:100%;max-height:92vh;overflow-y:auto;position:relative;
  box-shadow:var(--shadow-card)
}
.mclose{position:absolute;top:16px;right:18px;z-index:3}
.pm{display:grid;grid-template-columns:1fr 1fr}
.pm .visual{min-height:360px;position:relative;perspective:1000px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#1b2350,#0d1330)}
.pm .visual .tilt-3d{width:100%;height:100%;transform-style:preserve-3d;transition:transform .1s var(--ease)}
.pm .visual svg{width:100%;height:100%;display:block}
.pm .visual .hint3d{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--muted);font-size:12px;letter-spacing:1px}
.pm .det{padding:36px 36px 32px}
.pm .det .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--lilac);background:rgba(169,156,240,.12);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:14px}
.pm .det h2{font-family:var(--display);font-size:25px;font-weight:700;line-height:1.2;margin-bottom:6px}
.pm .det .set{color:var(--muted);font-size:14px;margin-bottom:18px}
.pm .det .desc{color:#C7CDE4;font-size:15px;margin-bottom:20px}
.pm .det .pbig{font-family:var(--display);font-size:32px;font-weight:700;margin-bottom:20px}
.pm .reassure{display:flex;flex-direction:column;gap:9px;margin:20px 0 24px}
.pm .reassure div{font-size:13px;color:var(--muted)}
.pm .reassure b{color:var(--teal)}
.pmqty{display:flex;align-items:center;gap:14px;margin-bottom:18px}

/* confirmation retour Stripe */
.confirm{text-align:center;padding:54px 34px}
.confirm .ok{width:78px;height:78px;border-radius:50%;background:var(--iri);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:40px;color:#0B1026;font-weight:700}
.confirm .ko{background:linear-gradient(135deg,#E24B4A,#b03a39)}
.confirm h2{font-family:var(--display);font-size:26px;font-weight:700;margin-bottom:10px}
.confirm p{color:var(--muted);margin-bottom:24px}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(40px);background:linear-gradient(120deg,#1b2350,#10162f);border:1px solid rgba(127,168,232,.4);color:#fff;padding:13px 22px;border-radius:var(--r-pill);font-size:14px;font-weight:500;z-index:99;opacity:0;transition:.35s var(--ease);pointer-events:none;box-shadow:var(--shadow-card)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Reveal au scroll (GSAP fallback friendly) ---------- */
.reveal{opacity:0;transform:translateY(30px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;justify-items:center}
  .hero-copy{align-items:center;text-align:center;margin:0 auto}
  .hero-cta{justify-content:center}
  .booster-stage{min-height:380px}
  .story{grid-template-columns:1fr;gap:36px}
  /* La grille s'adapte seule via auto-fill : plus de nombre de colonnes forcé,
     qui entrait en conflit avec minmax et produisait des cartes étirées. */
  .card .thumb{height:180px}
}
@media(max-width:820px){
  .navlinks{
    position:fixed;top:70px;right:0;width:280px;max-width:86vw;height:calc(100vh - 70px);
    flex-direction:column;align-items:flex-start;gap:6px;padding:24px;
    background:linear-gradient(180deg,#0F1535,#0a0f28);border-left:1px solid rgba(168,180,225,.16);
    transform:translateX(100%);transition:transform .35s var(--ease);z-index:55
  }
  .navlinks.open{transform:translateX(0)}
  .navlinks a{font-size:17px;padding:8px 0}
  .burger{display:flex}
  .steps{grid-template-columns:1fr}
  .pm{grid-template-columns:1fr}.pm .visual{min-height:260px}
  .count .u{min-width:62px}
}
@media(max-width:560px){
  /* Sur mobile, deux colonnes serrées valent mieux qu'une seule très haute :
     on voit quatre produits d'un coup au lieu de deux. */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .card .thumb{height:150px}
  .media .pimg{padding:16px}
  .card .body{padding:12px}
  .card h4{font-size:13px;min-height:34px}
  .card .sub{display:none}
  .card .price{font-size:19px}
  .livebar{flex-direction:column;align-items:flex-start}
  section.block{padding:72px 0}
  #cursor-halo,#cursor-dot{display:none}
  .hero-scroll{display:none}
}

/* ============================================================
   APPAREILS TACTILES
   ------------------------------------------------------------
   Le site reposait beaucoup sur le survol : inclinaison des cartes, reflet
   holo, halo de curseur, apparition d'informations. Au doigt, rien de tout
   cela n'existe — c'est pourtant là que se trouve l'essentiel des visiteurs.
   Ce bloc remplace les effets inatteignables par des repères concrets.

   On cible (hover:none), c'est-à-dire l'absence de survol, plutôt qu'une
   largeur d'écran : une petite fenêtre sur ordinateur garde sa souris, une
   grande tablette n'en a pas.
   ============================================================ */
@media (hover:none){
  /* Indices qui ne mènent à rien sans souris */
  .hint3d,.booster-hint{display:none}
  #cursor-halo,#cursor-dot{display:none!important}

  /* Zones tactiles : 44 px est le minimum confortable au doigt */
  .card .fav{width:42px;height:42px;font-size:18px}
  .card .add{padding:14px}
  .qty button{min-width:42px;min-height:42px}
  .navlinks a{padding:12px 0}

  /* Le bouton d'achat reste atteignable : collé en bas de la fiche produit,
     quel que soit le défilement. C'est le remplaçant tactile du survol. */
  .pm .pmbuy{
    position:sticky;bottom:0;z-index:4;margin:14px -18px -18px;padding:12px 18px;
    background:linear-gradient(180deg,rgba(15,21,53,0),#0d1330 22%);
  }
  .pm .pmbuy .btn{padding:15px}

  /* La fiche s'ouvre en pleine hauteur : plus de place pour décider */
  .modal{padding:0;align-items:flex-end}
  .mcard{max-height:94vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .mclose{top:10px;right:12px;width:44px;height:44px;display:flex;
    align-items:center;justify-content:center;background:rgba(11,16,38,.6);border-radius:50%}
}

/* ---------- Préférence mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .booster{animation:none}.emblem svg{animation:none}.slogan{animation:none}
  .reveal{opacity:1;transform:none}
}