/* ============================================================
   LOTFAY — FEUILLE DE STYLE
   ------------------------------------------------------------
   POUR CHANGER LES COULEURS : tout se règle dans :root ci-dessous.
   ============================================================ */

/* ---------- 1. PALETTE & VARIABLES -------------------------- */
:root{
  /* Fonds */
  --bg:            #04060d;
  --bg-2:          #070a15;
  --surface:       rgba(255,255,255,.035);
  --surface-2:     rgba(255,255,255,.06);
  --stroke:        rgba(255,255,255,.10);
  --stroke-strong: rgba(255,255,255,.20);

  /* Texte */
  --txt:      #e9edfb;
  --txt-soft: #a8b0c9;
  --txt-dim:  #6f7794;

  /* Accents — LES 3 COULEURS DE LA MARQUE */
  --c1: #00e5ff;   /* cyan    */
  --c2: #7b5cff;   /* violet  */
  --c3: #ff2e88;   /* magenta */

  --grad:      linear-gradient(115deg, var(--c1), var(--c2) 55%, var(--c3));
  --grad-soft: linear-gradient(115deg, rgba(0,229,255,.16), rgba(123,92,255,.16));

  /* États */
  --ok:   #24e08a;
  --warn: #ffb020;
  --err:  #ff5470;

  /* Formes */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Ombres */
  --shadow:     0 24px 60px rgba(0,0,0,.55);
  --shadow-sm:  0 8px 24px rgba(0,0,0,.4);
  --glow:       0 0 40px rgba(0,229,255,.25);

  /* Typo */
  --font:     'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-alt: 'Chakra Petch', 'Space Grotesk', system-ui, sans-serif;

  /* Layout */
  --wrap: 1240px;
  --pad:  clamp(20px, 5vw, 64px);
  --head-h: 72px;
}

/* ---------- 2. RESET ---------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 24px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
svg{ width:100%; height:100%; display:block; }
h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--c2); color:#fff; }

/* hidden doit toujours l'emporter sur les display: flex/grid des blocs */
[hidden]{ display:none !important; }

:focus-visible{ outline:2px solid var(--c1); outline-offset:3px; border-radius:4px; }

/* Barre de défilement */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:20px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.26); }

/* ---------- 3. FOND ANIMÉ ----------------------------------- */
.bg-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#bgCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.bg-glow{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.34; }
.bg-glow--1{ width:60vw; height:60vw; top:-22vw; left:-14vw; background:radial-gradient(circle,var(--c1),transparent 65%); animation:float1 22s ease-in-out infinite; }
.bg-glow--2{ width:52vw; height:52vw; top:38vh; right:-18vw; background:radial-gradient(circle,var(--c2),transparent 65%); animation:float2 27s ease-in-out infinite; }
.bg-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 78%);
}
.bg-noise{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes float1{ 50%{ transform:translate(9vw,7vh) scale(1.12);} }
@keyframes float2{ 50%{ transform:translate(-8vw,-6vh) scale(1.1);} }

/* ---------- 4. TYPO / UTILITAIRES --------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-soft); margin-bottom:18px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--c1);
  box-shadow:0 0 0 4px rgba(0,229,255,.16); animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 9px rgba(0,229,255,0); } }
.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lead{ color:var(--txt-soft); font-size:clamp(15px,1.6vw,18px); max-width:56ch; }

/* ---------- 5. BOUTONS -------------------------------------- */
.btn{
  --h:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h); padding:0 26px; border-radius:100px;
  font-weight:600; font-size:15px; letter-spacing:.01em;
  cursor:pointer; position:relative; overflow:hidden; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s, border-color .25s, opacity .2s;
}
.btn svg{ width:18px; height:18px; flex:none; transition:transform .3s; }
.btn--primary{ background:var(--grad); color:#05070f; box-shadow:0 10px 30px rgba(0,229,255,.22); }
.btn--primary::after{
  content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-120%); transition:transform .7s;
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,229,255,.34); }
.btn--primary:hover::after{ transform:translateX(120%); }
.btn--primary:hover svg{ transform:translateX(4px); }
.btn--ghost{ background:var(--surface); border:1px solid var(--stroke); color:var(--txt); backdrop-filter:blur(10px); }
.btn--ghost:hover{ background:var(--surface-2); border-color:var(--stroke-strong); transform:translateY(-2px); }
.btn--block{ width:100%; }
/* WhatsApp — couleur officielle, pour être reconnu au premier coup d'œil */
.btn--wa{ background:#25D366; color:#06231a; margin-top:10px; box-shadow:0 10px 26px rgba(37,211,102,.20); }
.btn--wa svg{ width:20px; height:20px; }
.btn--wa:hover{ background:#1fbe5b; transform:translateY(-2px); box-shadow:0 16px 34px rgba(37,211,102,.30); }
.choice.is-on[data-pay="whatsapp"]{ border-color:#25D366; background:rgba(37,211,102,.10); box-shadow:0 0 0 1px rgba(37,211,102,.30) inset; }
.choice.is-on[data-pay="whatsapp"] .choice__radio{ border-color:#25D366; }
.choice.is-on[data-pay="whatsapp"] .choice__radio::after{ background:#25D366; }
.btn--sm{ --h:40px; padding:0 18px; font-size:14px; }
.btn:disabled{ opacity:.5; pointer-events:none; }
.btn.is-loading{ color:transparent; pointer-events:none; }
.btn.is-loading::before{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(5,7,15,.35); border-top-color:#05070f; animation:spin .7s linear infinite;
}
.btn--ghost.is-loading::before{ border-color:rgba(255,255,255,.25); border-top-color:#fff; }
@keyframes spin{ to{ transform:rotate(360deg);} }

.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--stroke); background:var(--surface); color:var(--txt-soft);
  transition:.25s;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ color:var(--txt); border-color:var(--stroke-strong); background:var(--surface-2); }

/* ---------- 6. BANDEAU DÉFILANT ----------------------------- */
.topbar{
  position:relative; z-index:60; overflow:hidden;
  background:linear-gradient(90deg,rgba(0,229,255,.10),rgba(123,92,255,.10));
  border-bottom:1px solid var(--stroke);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-soft);
}
.topbar__track{ display:flex; align-items:center; gap:26px; padding:9px 0; white-space:nowrap; width:max-content; animation:marquee 34s linear infinite; }
.topbar__track b{ color:var(--txt); }
.topbar__track i{ width:4px; height:4px; border-radius:50%; background:var(--c1); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 7. EN-TÊTE -------------------------------------- */
.header{
  position:sticky; top:0; z-index:70;
  height:var(--head-h); padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(4,6,13,.62); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.header.is-stuck{ border-bottom-color:var(--stroke); background:rgba(4,6,13,.86); }

.logo{ display:inline-flex; align-items:center; gap:11px; flex:none; }
.logo__mark{ width:30px; height:30px; color:var(--c1); filter:drop-shadow(0 0 10px rgba(0,229,255,.5)); }
.logo__text{ font-family:var(--font-alt); font-weight:700; font-size:21px; letter-spacing:.22em; }
.logo--sm .logo__mark{ width:24px; height:24px; }
.logo--sm .logo__text{ font-size:17px; }

.nav{ display:flex; gap:34px; font-size:15px; color:var(--txt-soft); }
.nav a{ position:relative; padding:6px 0; transition:color .25s; }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--grad); transition:right .3s cubic-bezier(.2,.8,.3,1);
}
.nav a:hover{ color:var(--txt); }
.nav a:hover::after{ right:0; }

.header__actions{ display:flex; align-items:center; gap:10px; }
.cart-btn{
  position:relative; width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--stroke); background:var(--surface);
  transition:.25s;
}
.cart-btn svg{ width:21px; height:21px; }
.cart-btn:hover{ border-color:var(--c1); box-shadow:var(--glow); }
.cart-btn.is-bump{ animation:bump .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump{ 40%{ transform:scale(1.16);} }
.cart-btn__count{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:20px;
  background:var(--grad); color:#05070f; font-size:11px; font-weight:700;
  border:2px solid var(--bg); transition:transform .25s;
}
.cart-btn__count[data-empty="1"]{ transform:scale(0); }

.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--stroke); background:var(--surface); flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger i{ width:18px; height:1.8px; background:var(--txt); border-radius:2px; transition:.3s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

/* ---------- 8. MISE EN PAGE GÉNÉRALE ------------------------ */
main{ position:relative; z-index:10; }
.section{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(72px,10vw,132px) var(--pad);
}
.section__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap;
  margin-bottom:48px;
}
.section__title{ font-size:clamp(30px,4.6vw,54px); }
.section__tools{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- 9. HÉRO ----------------------------------------- */
.hero{
  position:relative; max-width:var(--wrap); margin:0 auto;
  padding:clamp(56px,9vw,110px) var(--pad) clamp(72px,10vw,130px);
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:48px;
  min-height:calc(100vh - var(--head-h) - 38px);
}
.hero__title{ font-size:clamp(42px,7.6vw,92px); letter-spacing:-.045em; margin-bottom:26px; }
.hero__title .line{ display:block; }
.hero__sub{ color:var(--txt-soft); font-size:clamp(16px,1.7vw,19px); max-width:52ch; margin-bottom:38px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.hero__stats{ display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap; }
.hero__stats li{ display:flex; flex-direction:column; gap:2px; }
.hero__stats b{ font-family:var(--font-alt); font-size:clamp(24px,3vw,34px); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__stats span{ font-size:12.5px; color:var(--txt-dim); letter-spacing:.06em; text-transform:uppercase; }

.hero__visual{ display:grid; place-items:center; }
.orb{ position:relative; width:min(400px,80%); aspect-ratio:1; display:grid; place-items:center; }
.orb__ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--stroke); }
.orb__ring--1{ animation:spin 26s linear infinite; border-top-color:var(--c1); border-right-color:rgba(0,229,255,.35); }
.orb__ring--2{ inset:13%; animation:spin 19s linear infinite reverse; border-bottom-color:var(--c2); border-left-color:rgba(123,92,255,.4); }
.orb__ring--3{ inset:26%; animation:spin 32s linear infinite; border-top-color:var(--c3); }
.orb__core{
  width:44%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1));
  filter:blur(2px); opacity:.9;
  box-shadow:0 0 90px rgba(123,92,255,.55), inset 0 0 50px rgba(0,0,0,.55);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{ 50%{ transform:scale(1.08); opacity:1; } }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-dim);
}
.scroll-hint i{ width:1px; height:38px; background:linear-gradient(var(--c1),transparent); animation:drop 2s ease-in-out infinite; }
@keyframes drop{ 50%{ transform:scaleY(.4); transform-origin:top; } }

/* ---------- 10. RECHERCHE & TRI ----------------------------- */
.search{ position:relative; display:flex; align-items:center; }
.search svg{ position:absolute; left:14px; width:17px; height:17px; color:var(--txt-dim); pointer-events:none; }
.search input{
  height:46px; padding:0 16px 0 42px; width:230px;
  border-radius:100px; border:1px solid var(--stroke); background:var(--surface); color:var(--txt);
  transition:.25s;
}
.search input::placeholder{ color:var(--txt-dim); }
.search input:focus{ outline:none; border-color:var(--c1); background:var(--surface-2); width:265px; }
.sort select{
  height:46px; padding:0 40px 0 18px; border-radius:100px;
  border:1px solid var(--stroke); background:var(--surface); color:var(--txt-soft); cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c9' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.sort select:focus{ outline:none; border-color:var(--c1); }
.sort select option{ background:var(--bg-2); }

/* ---------- 11. GRILLE PRODUITS ----------------------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; }
/* Un ou deux articles : on centre au lieu de laisser une carte seule à gauche. */
.grid[data-count="1"]{ grid-template-columns:minmax(0,460px); justify-content:center; }
.grid[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,400px)); justify-content:center; }
.grid__empty{ text-align:center; color:var(--txt-dim); padding:60px 0; }

.card{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--stroke); background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(12px);
  display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), border-color .4s, box-shadow .4s;
  opacity:0; transform:translateY(26px);
}
.card.is-in{ opacity:1; transform:none; }
.card:hover{ transform:translateY(-8px); border-color:var(--stroke-strong); box-shadow:var(--shadow); }
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad); opacity:0; transition:opacity .4s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.card:hover::before{ opacity:.65; }

.card__media{ position:relative; aspect-ratio:4/3.2; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%,rgba(123,92,255,.16),transparent 70%); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.3,1); }
.card:hover .card__media img{ transform:scale(1.07); }
.card__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:6px 12px; border-radius:100px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:rgba(4,6,13,.7); border:1px solid var(--stroke-strong); backdrop-filter:blur(8px);
}
.card__badge[data-kind="promo"]{ background:var(--grad); color:#05070f; border-color:transparent; }
.card__badge[data-kind="low"]{ color:var(--warn); border-color:rgba(255,176,32,.45); }
.card__quick{
  position:absolute; inset:auto 14px 14px; z-index:2;
  height:44px; border-radius:100px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(4,6,13,.72); border:1px solid var(--stroke-strong); backdrop-filter:blur(10px);
  font-size:14px; font-weight:600;
  opacity:0; transform:translateY(10px); transition:.35s;
}
.card:hover .card__quick{ opacity:1; transform:none; }
.card__quick:hover{ background:var(--grad); color:#05070f; border-color:transparent; }

.card__body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card__name{ font-size:19px; }
.card__tagline{ font-size:13.5px; color:var(--txt-dim); }
.card__meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt-soft); }
.stars{ display:inline-flex; gap:2px; color:var(--c1); }
.stars svg{ width:13px; height:13px; }
.card__foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price{ display:flex; align-items:baseline; gap:9px; }
.price b{ font-family:var(--font-alt); font-size:23px; letter-spacing:-.01em; }
.price s{ color:var(--txt-dim); font-size:14px; }
.card__add{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none;
  background:var(--surface-2); border:1px solid var(--stroke); transition:.28s;
}
.card__add svg{ width:20px; height:20px; }
.card__add:hover{ background:var(--grad); color:#05070f; border-color:transparent; transform:rotate(90deg); }

/* ---------- 12. MANIFESTE ----------------------------------- */
.section--split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,84px); align-items:center; }
.feature-list{ margin-top:36px; display:grid; gap:22px; }
.feature-list li{ display:flex; gap:18px; }
.feature-list__ico{
  flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  font-family:var(--font-alt); font-size:14px;
  background:var(--grad-soft); border:1px solid var(--stroke); color:var(--c1);
}
.feature-list b{ display:block; margin-bottom:3px; font-size:16px; }
.feature-list p{ color:var(--txt-dim); font-size:14.5px; }

.panel-card{
  position:relative; border-radius:var(--r-xl); padding:30px;
  border:1px solid var(--stroke); background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(14px); box-shadow:var(--shadow); overflow:hidden;
}
.panel-card__glow{ position:absolute; top:-40%; right:-30%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(0,229,255,.28),transparent 68%); filter:blur(40px); }
.panel-card__rows{ position:relative; display:grid; gap:2px; }
.prow{ display:flex; justify-content:space-between; align-items:center; padding:14px 2px; border-bottom:1px dashed var(--stroke); font-size:14.5px; }
.prow:last-child{ border-bottom:0; }
.prow span{ color:var(--txt-dim); }
.prow b{ font-weight:600; }
.prow b.ok{ color:var(--ok); }
.panel-card__bar{ margin:20px 0 12px; height:5px; border-radius:100px; background:rgba(255,255,255,.08); overflow:hidden; }
.panel-card__bar i{ display:block; height:100%; width:78%; border-radius:inherit; background:var(--grad); animation:fill 2.6s cubic-bezier(.2,.8,.3,1) infinite alternate; }
@keyframes fill{ from{ width:26%; } to{ width:92%; } }
.panel-card__note{ font-size:13px; color:var(--txt-dim); }

/* ---------- 13. FAQ ----------------------------------------- */
.faq{ display:grid; gap:12px; max-width:900px; }
.faq__item{
  border:1px solid var(--stroke); border-radius:var(--r); background:var(--surface);
  backdrop-filter:blur(10px); overflow:hidden; transition:border-color .3s, background .3s;
}
.faq__item[open]{ border-color:var(--stroke-strong); background:var(--surface-2); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:20px 56px 20px 22px; position:relative;
  font-weight:600; font-size:16.5px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--c1); border-bottom:2px solid var(--c1);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s;
}
.faq__item[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__item p{ padding:0 22px 22px; color:var(--txt-soft); font-size:15px; max-width:76ch; }
.faq__item a{ color:var(--c1); }

/* ---------- 14. NEWSLETTER ---------------------------------- */
.cta-band__inner{
  position:relative; text-align:center; padding:clamp(40px,6vw,72px) clamp(24px,5vw,60px);
  border-radius:var(--r-xl); border:1px solid var(--stroke); overflow:hidden;
  background:linear-gradient(150deg,rgba(0,229,255,.09),rgba(123,92,255,.09),rgba(255,46,136,.06));
  backdrop-filter:blur(14px);
}
.cta-band__inner h2{ font-size:clamp(26px,3.6vw,42px); margin-bottom:14px; }
.cta-band__inner > p{ color:var(--txt-soft); max-width:56ch; margin:0 auto 30px; }
.newsletter{ display:flex; gap:10px; max-width:480px; margin:0 auto; }
.newsletter input{
  flex:1; height:52px; padding:0 20px; border-radius:100px;
  border:1px solid var(--stroke); background:rgba(4,6,13,.5); color:var(--txt);
}
.newsletter input:focus{ outline:none; border-color:var(--c1); }
.newsletter input::placeholder{ color:var(--txt-dim); }
.newsletter__note{ display:block; margin-top:14px; color:var(--txt-dim); font-size:12.5px; }

/* ---------- 15. PIED DE PAGE -------------------------------- */
.footer{ position:relative; z-index:10; border-top:1px solid var(--stroke); background:rgba(4,6,13,.6); backdrop-filter:blur(14px); }
.footer__grid{
  max-width:var(--wrap); margin:0 auto; padding:clamp(46px,6vw,72px) var(--pad) 40px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px;
}
.footer__brand p{ margin:16px 0 20px; color:var(--txt-dim); font-size:14.5px; max-width:34ch; }
.socials{ display:flex; gap:10px; }
.socials a{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--stroke); background:var(--surface); color:var(--txt-soft); transition:.25s; }
.socials a svg{ width:18px; height:18px; }
.socials a:hover{ color:var(--c1); border-color:var(--c1); transform:translateY(-2px); }
.footer__col{ display:flex; flex-direction:column; gap:11px; }
.footer__col h4{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt); margin-bottom:5px; }
.footer__col a{ color:var(--txt-dim); font-size:14.5px; transition:color .2s; width:fit-content; }
.footer__col a:hover{ color:var(--c1); }
.footer__mini{ color:var(--txt-dim); font-size:12.5px; opacity:.7; }
.footer__bottom{
  max-width:var(--wrap); margin:0 auto; padding:20px var(--pad) 28px;
  border-top:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  color:var(--txt-dim); font-size:13px;
}
.paylogos{ display:flex; gap:8px; flex-wrap:wrap; }
.paylogos span{ padding:5px 10px; border-radius:7px; border:1px solid var(--stroke); font-size:10.5px; letter-spacing:.09em; }

/* ---------- 16. MODALE PRODUIT ------------------------------ */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(2,3,8,.78); backdrop-filter:blur(8px); animation:fade .3s ease; }
.modal__panel{
  position:relative; width:min(1020px,100%); max-height:90vh; overflow:auto;
  border-radius:var(--r-xl); border:1px solid var(--stroke);
  background:linear-gradient(160deg,#0a0e1c,#070a15);
  box-shadow:var(--shadow); animation:pop .38s cubic-bezier(.2,.9,.3,1);
}
.modal__panel--narrow{ width:min(720px,100%); }
@keyframes fade{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; transform:translateY(22px) scale(.97); } }
.modal__close{
  position:absolute; top:16px; right:16px; z-index:5; width:40px; height:40px;
  display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--stroke); background:rgba(4,6,13,.7); color:var(--txt-soft); transition:.25s;
}
.modal__close svg{ width:18px; height:18px; }
.modal__close:hover{ color:var(--txt); border-color:var(--stroke-strong); transform:rotate(90deg); }

.pm{ display:grid; grid-template-columns:.95fr 1.05fr; }
.pm__media{ position:relative; padding:26px; background:radial-gradient(110% 80% at 30% 10%,rgba(123,92,255,.2),transparent 70%); }
.pm__imgwrap{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--stroke); aspect-ratio:1; }
.pm__imgwrap img{ width:100%; height:100%; object-fit:cover; }
.pm__thumbs{ display:flex; gap:10px; margin-top:14px; }
.pm__thumbs[hidden]{ display:none !important; }
.thumb{
  flex:1; max-width:96px; aspect-ratio:1; padding:0; overflow:hidden;
  border-radius:12px; border:1px solid var(--stroke); background:var(--surface);
  cursor:pointer; transition:.22s; opacity:.6;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb:hover{ opacity:.9; border-color:var(--stroke-strong); }
.thumb.is-on{ opacity:1; border-color:var(--c1); box-shadow:0 0 0 1px var(--c1) inset; }

.pm__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pm__tags span{ padding:6px 12px; border-radius:100px; font-size:11.5px; border:1px solid var(--stroke); color:var(--txt-soft); background:var(--surface); }

.pm__info{ padding:34px 32px 32px; display:flex; flex-direction:column; gap:14px; }
.pm__tagline{ color:var(--c1); font-size:13px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; }
.pm__info h3{ font-size:clamp(26px,3.4vw,36px); }
.pm__rating{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--txt-soft); }
.pm__price{ display:flex; align-items:baseline; gap:11px; font-family:var(--font-alt); }
.pm__price b{ font-size:32px; }
.pm__price s{ font-family:var(--font); font-size:16px; color:var(--txt-dim); }
.pm__price em{ font-style:normal; font-size:12px; padding:4px 9px; border-radius:100px; background:var(--grad); color:#05070f; font-weight:700; }
.pm__desc{ color:var(--txt-soft); font-size:15px; }

.pm__options{ display:grid; gap:9px; }
.pm__options h5{ margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); font-weight:600; }
.opts{ display:flex; gap:9px; flex-wrap:wrap; }
.opt{
  padding:10px 16px; border-radius:100px; font-size:14px;
  border:1px solid var(--stroke); background:var(--surface); color:var(--txt-soft); transition:.22s;
}
.opt:hover{ border-color:var(--stroke-strong); color:var(--txt); }
.opt.is-on{ border-color:var(--c1); color:var(--txt); background:rgba(0,229,255,.12); box-shadow:0 0 0 1px rgba(0,229,255,.35) inset; }
.opt small{ opacity:.65; margin-left:5px; }

.pm__buy{ display:flex; gap:12px; align-items:center; margin-top:4px; }
.qty{ display:flex; align-items:center; height:52px; border-radius:100px; border:1px solid var(--stroke); background:var(--surface); flex:none; }
.qty button{ width:44px; height:100%; font-size:19px; color:var(--txt-soft); transition:color .2s; }
.qty button:hover{ color:var(--c1); }
.qty input{ width:38px; text-align:center; background:none; border:0; font-weight:600; }
.qty input:focus{ outline:none; }

.pm__stock{ font-size:13px; color:var(--txt-dim); display:flex; align-items:center; gap:8px; }
.pm__stock::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.pm__stock[data-low="1"]{ color:var(--warn); }
.pm__stock[data-low="1"]::before{ background:var(--warn); box-shadow:0 0 8px var(--warn); }

.pm__specs{ margin-top:6px; padding-top:18px; border-top:1px solid var(--stroke); }
.pm__specs h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:12px; }
.pm__specs dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:14px; }
.pm__specs dt{ color:var(--txt-dim); }
.pm__specs dd{ margin:0; text-align:right; }
.pm__trust{ display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--txt-dim); }
.pm__trust li{ display:flex; align-items:center; gap:6px; }
.pm__trust li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--c1); }

/* ---------- 17. TIROIR PANIER ------------------------------- */
.drawer{ position:fixed; inset:0; z-index:130; }
.drawer[hidden]{ display:none; }
.drawer__backdrop{ position:absolute; inset:0; background:rgba(2,3,8,.72); backdrop-filter:blur(6px); animation:fade .3s; }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(440px,100%);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0a0e1c,#06090f); border-left:1px solid var(--stroke);
  box-shadow:-30px 0 70px rgba(0,0,0,.6); animation:slide .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes slide{ from{ transform:translateX(100%); } }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 22px 16px; border-bottom:1px solid var(--stroke); }
.drawer__head h3{ font-size:19px; }
.drawer__head span{ color:var(--txt-dim); font-weight:400; }
.drawer__head .modal__close{ position:static; }

.drawer__ship{ padding:16px 22px; border-bottom:1px solid var(--stroke); }
.drawer__ship p{ font-size:13px; color:var(--txt-soft); margin-bottom:9px; }
.drawer__ship b{ color:var(--c1); }
.drawer__ship .bar{ height:5px; border-radius:100px; background:rgba(255,255,255,.08); overflow:hidden; }
.drawer__ship .bar i{ display:block; height:100%; width:0; border-radius:inherit; background:var(--grad); transition:width .5s cubic-bezier(.2,.8,.3,1); }

.drawer__body{ flex:1; overflow-y:auto; padding:16px 22px; display:flex; flex-direction:column; gap:12px; }
.ci{ display:flex; gap:13px; padding:13px; border-radius:var(--r); border:1px solid var(--stroke); background:var(--surface); animation:pop .3s ease; }
.ci__img{ width:70px; height:70px; border-radius:11px; overflow:hidden; flex:none; border:1px solid var(--stroke); }
.ci__img img{ width:100%; height:100%; object-fit:cover; }
.ci__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ci__name{ font-weight:600; font-size:15px; }
.ci__opt{ font-size:12.5px; color:var(--txt-dim); }
.ci__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.ci__qty{ display:flex; align-items:center; height:32px; border-radius:100px; border:1px solid var(--stroke); }
.ci__qty button{ width:28px; height:100%; color:var(--txt-soft); font-size:15px; }
.ci__qty button:hover{ color:var(--c1); }
.ci__qty span{ min-width:22px; text-align:center; font-size:13.5px; font-weight:600; }
.ci__price{ font-family:var(--font-alt); font-size:16px; }
.ci__del{ align-self:flex-start; color:var(--txt-dim); font-size:12px; transition:color .2s; }
.ci__del:hover{ color:var(--err); }

.drawer__empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:40px; text-align:center; color:var(--txt-dim); }
.drawer__empty-ico{ width:56px; height:56px; opacity:.35; }

.drawer__foot{ padding:18px 22px 22px; border-top:1px solid var(--stroke); background:rgba(4,6,13,.5); }
.promo{ display:flex; gap:8px; margin-bottom:8px; }
.promo input{ flex:1; height:42px; padding:0 16px; border-radius:100px; border:1px solid var(--stroke); background:var(--surface); }
.promo input:focus{ outline:none; border-color:var(--c1); }
.promo input::placeholder{ color:var(--txt-dim); }
.promo button{ height:42px; padding:0 18px; border-radius:100px; border:1px solid var(--stroke); background:var(--surface-2); font-size:14px; font-weight:600; transition:.25s; }
.promo button:hover{ border-color:var(--c1); color:var(--c1); }
.promo__msg{ font-size:12.5px; min-height:18px; margin-bottom:6px; }
.promo__msg.ok{ color:var(--ok); }
.promo__msg.err{ color:var(--err); }

.totals{ display:grid; gap:9px; margin:8px 0 16px; }
.totals__row{ display:flex; justify-content:space-between; align-items:center; font-size:14.5px; color:var(--txt-soft); }
.totals__row b{ color:var(--txt); font-weight:600; }
.totals__row em{ font-style:normal; font-size:11.5px; color:var(--c1); }
.totals__row--big{ padding-top:11px; border-top:1px solid var(--stroke); font-size:16px; color:var(--txt); }
.totals__row--big b{ font-family:var(--font-alt); font-size:24px; }
.drawer__note{ margin-top:12px; text-align:center; font-size:12px; color:var(--txt-dim); }
.drawer__note b{ color:var(--txt-soft); }

/* ---------- 18. TUNNEL DE COMMANDE -------------------------- */
.checkout{ position:fixed; inset:0; z-index:140; background:var(--bg); overflow-y:auto; animation:fade .3s; }
.checkout[hidden]{ display:none; }
.checkout__bar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px var(--pad); border-bottom:1px solid var(--stroke);
  background:rgba(4,6,13,.88); backdrop-filter:blur(16px);
}
.checkout__bar .modal__close{ position:static; }
.steps{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--txt-dim); }
.steps li{ display:flex; align-items:center; gap:8px; }
.steps li + li::before{ content:""; width:26px; height:1px; background:var(--stroke-strong); margin-right:2px; }
.steps i{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:12px; font-weight:700;
  border:1px solid var(--stroke-strong); transition:.3s;
}
.steps li.is-active{ color:var(--txt); }
.steps li.is-active i{ background:var(--grad); color:#05070f; border-color:transparent; box-shadow:0 0 18px rgba(0,229,255,.4); }
.steps li.is-done i{ background:rgba(36,224,138,.16); border-color:var(--ok); color:var(--ok); }

.checkout__body{
  max-width:1120px; margin:0 auto; padding:clamp(26px,4vw,50px) var(--pad) 80px;
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(24px,4vw,52px); align-items:start;
}
.checkout__form{ min-width:0; }
.step{ display:none; animation:pop .35s ease; }
.step.is-active{ display:block; }
.step h3{ font-size:clamp(22px,2.8vw,30px); margin-bottom:24px; }
.step h4.sub{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); margin:28px 0 12px; }

.fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1/-1; }
.field > span{ font-size:12.5px; color:var(--txt-dim); letter-spacing:.04em; }
.field input,.field select,.field textarea{
  height:50px; padding:0 16px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--surface); color:var(--txt);
  transition:.22s; width:100%;
}
.field textarea{ height:auto; padding:13px 16px; resize:vertical; font-family:inherit; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c9' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.field select option{ background:var(--bg-2); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--c1); background:var(--surface-2); box-shadow:0 0 0 3px rgba(0,229,255,.12); }
.field.is-err input,.field.is-err select{ border-color:var(--err); box-shadow:0 0 0 3px rgba(255,84,112,.12); }
.field .err-msg{ font-size:12px; color:var(--err); }

.check{ display:flex; gap:11px; align-items:flex-start; margin-top:18px; font-size:14px; color:var(--txt-soft); cursor:pointer; }
.check input{ width:19px; height:19px; margin-top:2px; accent-color:var(--c1); flex:none; cursor:pointer; }
.check a{ color:var(--c1); }
.check.is-err span{ color:var(--err); }

.choices{ display:grid; gap:11px; }
.choice{
  display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer;
  border-radius:var(--r); border:1px solid var(--stroke); background:var(--surface); transition:.24s;
}
.choice:hover{ border-color:var(--stroke-strong); background:var(--surface-2); }
.choice.is-on{ border-color:var(--c1); background:rgba(0,229,255,.08); box-shadow:0 0 0 1px rgba(0,229,255,.28) inset; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice__radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--stroke-strong); flex:none; display:grid; place-items:center; transition:.24s; }
.choice.is-on .choice__radio{ border-color:var(--c1); }
.choice.is-on .choice__radio::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--grad); }
.choice__main{ flex:1; min-width:0; }
.choice__main b{ display:block; font-size:15.5px; }
.choice__main small{ color:var(--txt-dim); font-size:13px; }
.choice__price{ font-family:var(--font-alt); font-size:16px; flex:none; }
.choice__price.free{ color:var(--ok); }

.pay-note{ margin-top:14px; padding:15px 18px; border-radius:var(--r); border:1px dashed var(--stroke-strong); background:var(--surface); font-size:13.5px; color:var(--txt-soft); }
.pay-note[hidden]{ display:none; }
.pay-note b{ color:var(--txt); }

.step__nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:32px; }
.secure-line{ display:flex; align-items:center; gap:9px; margin-top:20px; font-size:12.5px; color:var(--txt-dim); }
.secure-line svg{ width:16px; height:16px; flex:none; color:var(--ok); }

.done{ text-align:center; padding:26px 0 10px; max-width:520px; }
.done__ico{ width:74px; height:74px; margin:0 auto 22px; color:var(--ok); filter:drop-shadow(0 0 22px rgba(36,224,138,.45)); animation:pop .5s cubic-bezier(.2,1.5,.4,1); }
.done h3{ margin-bottom:12px; }
.done__ref{ font-size:15px; color:var(--txt-soft); margin-bottom:12px; }
.done__ref b{ font-family:var(--font-alt); font-size:19px; letter-spacing:.06em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.done p{ color:var(--txt-soft); font-size:15px; }
.done__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

.checkout__summary{
  position:sticky; top:96px;
  border-radius:var(--r-lg); border:1px solid var(--stroke); padding:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); backdrop-filter:blur(12px);
}
.checkout__summary h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:18px; }
.co-items{ display:grid; gap:13px; margin-bottom:18px; max-height:320px; overflow-y:auto; }
.co-item{ display:flex; gap:12px; align-items:center; }
.co-item__img{ position:relative; width:54px; height:54px; border-radius:11px; overflow:hidden; border:1px solid var(--stroke); flex:none; }
.co-item__img img{ width:100%; height:100%; object-fit:cover; }
.co-item__qty{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:20px; background:var(--grad); color:#05070f;
  font-size:11px; font-weight:700; border:2px solid #0a0e1c;
}
.co-item__main{ flex:1; min-width:0; }
.co-item__main b{ display:block; font-size:14px; font-weight:600; }
.co-item__main small{ color:var(--txt-dim); font-size:12px; }
.co-item__price{ font-size:14px; font-weight:600; flex:none; }
.co-trust{ display:grid; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--stroke); font-size:12.5px; color:var(--txt-dim); }
.co-trust li{ display:flex; align-items:center; gap:8px; }
.co-trust li::before{ content:"✓"; color:var(--ok); font-size:12px; }

/* ---------- 19. TEXTES LÉGAUX ------------------------------- */
.legal{ padding:44px 40px 40px; max-height:82vh; overflow-y:auto; }
.legal h3{ font-size:26px; margin-bottom:18px; }
.legal h4{ font-size:15px; margin:22px 0 8px; color:var(--c1); }
.legal p{ color:var(--txt-soft); font-size:14.5px; margin-bottom:10px; }
.legal ul{ list-style:disc; padding-left:20px; color:var(--txt-soft); font-size:14.5px; margin-bottom:10px; }
.legal li{ margin-bottom:6px; }
.legal .legal__todo{ margin-top:22px; padding:14px 16px; border-radius:12px; border:1px dashed var(--warn); color:var(--warn); font-size:13px; }

/* ---------- 20. NOTIFICATIONS ------------------------------- */
.toasts{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:11px; padding:13px 20px; border-radius:100px;
  border:1px solid var(--stroke-strong); background:rgba(10,14,28,.94); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm); font-size:14px; max-width:90vw;
  animation:toastIn .35s cubic-bezier(.2,1.3,.4,1);
}
.toast.out{ animation:toastOut .3s forwards; }
.toast::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c1); flex:none; box-shadow:0 0 10px var(--c1); }
.toast[data-type="ok"]::before{ background:var(--ok); box-shadow:0 0 10px var(--ok); }
.toast[data-type="err"]::before{ background:var(--err); box-shadow:0 0 10px var(--err); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(18px) scale(.95); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(12px) scale(.96); } }

/* ---------- 21. COOKIES ------------------------------------- */
.cookie{
  position:fixed; left:20px; bottom:20px; z-index:190; width:min(400px,calc(100vw - 40px));
  padding:20px; border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:rgba(10,14,28,.95); backdrop-filter:blur(16px); box-shadow:var(--shadow);
  animation:pop .45s cubic-bezier(.2,.9,.3,1);
}
.cookie[hidden]{ display:none; }
.cookie p{ font-size:13.5px; color:var(--txt-soft); margin-bottom:16px; }
.cookie__btns{ display:flex; gap:10px; }

/* ---------- 21 bis. MODE LANCEMENT (ÉVÉNEMENT) -------------- */
.coming{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(28px,4vw,56px);
  border-radius:var(--r-xl); border:1px solid var(--stroke); overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(14px); box-shadow:var(--shadow);
}
.coming[hidden]{ display:none; }
.coming__media{ position:relative; align-self:stretch; min-height:100%; }
.coming__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.coming__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(7,10,21,.55));
  pointer-events:none;
}
.coming__body{ padding:clamp(28px,4vw,48px) clamp(28px,4vw,48px) clamp(28px,4vw,48px) 0; }
.coming__badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  padding:8px 16px 8px 12px; border-radius:100px;
  border:1px solid rgba(36,224,138,.4); background:rgba(36,224,138,.10);
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9df3c8;
}
.coming__badge i{
  width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 0 rgba(36,224,138,.55); animation:live 2s ease-out infinite;
}
@keyframes live{ 70%{ box-shadow:0 0 0 10px rgba(36,224,138,0); } 100%{ box-shadow:0 0 0 0 rgba(36,224,138,0); } }
.coming__body h3{ font-size:clamp(26px,3.6vw,40px); margin-bottom:16px; }
.coming__body > p{ color:var(--txt-soft); font-size:clamp(15px,1.6vw,17px); max-width:48ch; }
.coming__note{
  margin:22px 0 26px !important; padding:14px 18px;
  border-radius:var(--r); border:1px dashed var(--stroke-strong);
  background:var(--surface); font-size:13.5px; color:var(--txt-dim) !important;
}

/* ---------- 21 ter. CONTACT -------------------------------- */
.contact{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,3.5vw,44px); align-items:start; }
.contact__form{
  padding:clamp(24px,3vw,34px); border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014)); backdrop-filter:blur(12px);
}
.contact__actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; }
.contact__hint{ font-size:13.5px; min-height:20px; }
.contact__hint.ok{ color:var(--ok); }
.contact__hint.err{ color:var(--err); }

.contact__side{ display:grid; gap:16px; }
.contact__card{
  padding:24px; border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:var(--surface); backdrop-filter:blur(12px);
}
.contact__card h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:16px; }
.contact__card > p{ color:var(--txt-soft); font-size:14px; margin-bottom:16px; }
.contact__card .newsletter{ flex-direction:column; gap:9px; }
.contact__card .newsletter input{ height:48px; }
.contact__list{ display:grid; gap:12px; }
.contact__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:12px; border-bottom:1px dashed var(--stroke); font-size:14px;
}
.contact__list li:last-child{ border-bottom:0; padding-bottom:0; }
.contact__list li[hidden]{ display:none; }
.contact__list span{ color:var(--txt-dim); }
.contact__list b{ font-weight:600; }
.contact__list a{ color:var(--c1); }

/* ---------- 22. APPARITION AU DÉFILEMENT -------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.07s; }
.reveal:nth-child(3){ transition-delay:.14s; }
.reveal:nth-child(4){ transition-delay:.21s; }
.reveal:nth-child(5){ transition-delay:.28s; }

/* ---------- 23. RESPONSIVE ---------------------------------- */
@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; text-align:left; min-height:auto; }
  .hero__visual{ order:-1; }
  .orb{ width:min(280px,60%); }
  .section--split{ grid-template-columns:1fr; }
  .checkout__body{ grid-template-columns:1fr; }
  .checkout__summary{ position:static; order:-1; }
  .co-items{ max-height:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .coming{ grid-template-columns:1fr; }
  .coming__media{ aspect-ratio:16/9; min-height:0; }
  .coming__media::after{ background:linear-gradient(180deg,transparent 55%,rgba(7,10,21,.75)); }
  .coming__body{ padding:0 clamp(24px,4vw,40px) clamp(28px,4vw,40px); }
  .contact{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .pm{ grid-template-columns:1fr; }
  .pm__media{ padding:20px 20px 0; }
  .pm__imgwrap{ aspect-ratio:16/11; }
  .pm__info{ padding:24px 22px 28px; }
  .steps span{ display:none; }
  .steps li + li::before{ width:16px; }
}

@media (max-width:760px){
  :root{ --head-h:64px; }
  .nav{
    position:fixed; inset:calc(var(--head-h) + 38px) 0 auto; z-index:65;
    flex-direction:column; gap:0; padding:10px var(--pad) 22px;
    background:rgba(6,9,18,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--stroke);
    transform:translateY(-115%); opacity:0; pointer-events:none;
    transition:transform .38s cubic-bezier(.2,.9,.3,1), opacity .3s;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--stroke); font-size:17px; }
  .burger{ display:flex; }
  .section__head{ flex-direction:column; align-items:stretch; }
  .search input,.search input:focus{ width:100%; }
  .section__tools{ flex-direction:column; }
  .sort select{ width:100%; }
  .grid{ grid-template-columns:1fr; }
  .card__quick{ opacity:1; transform:none; }
  .fields{ grid-template-columns:1fr; }
  .drawer__panel{ width:100%; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .step__nav{ flex-direction:column-reverse; }
  .step__nav .btn{ width:100%; }
  .done__actions .btn{ width:100%; }
  .legal{ padding:44px 22px 30px; }
  .cookie{ left:12px; right:12px; bottom:12px; width:auto; }
  .toasts{ bottom:16px; }
}

@media (max-width:420px){
  .hero__stats{ gap:20px; }
  .pm__buy{ flex-wrap:wrap; }
  .qty{ width:100%; justify-content:space-between; }
}

/* ---------- 24. IMPRESSION & ACCESSIBILITÉ ------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal,.card{ opacity:1 !important; transform:none !important; }
}

@media print{
  .bg-layer,.header,.topbar,.footer,.drawer,.modal,.cookie,.toasts,.scroll-hint{ display:none !important; }
  body{ background:#fff; color:#000; }
}