/* =========================================================
   BRUME · Liquid Glass layer
   Polices : Instrument Serif (titres) · Geist (texte) · Geist Mono (détails)
   ========================================================= */
:root{
  --canvas:#070B0E; --bg:#070B0E;
  --accent:#B8F23C; --accent-hover:#D2FF6B; --gold:#D4BE86; --accent-2:#D4BE86;
  --text-primary:#EEF1E8; --text:#EEF1E8; --text-secondary:#A9B4B0; --muted:#A9B4B0;
  --ease:cubic-bezier(.22,.8,.24,1);
  --display:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --g-fill:linear-gradient(145deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,.08) 100%);
  --g-fill-dense:linear-gradient(145deg,rgba(22,30,34,.78),rgba(12,18,21,.70));
  --g-line:rgba(255,255,255,.14);
  --g-line-hi:rgba(255,255,255,.30);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.03),inset 0 -14px 28px -20px rgba(255,255,255,.22);
  --g-drop:0 30px 70px -28px rgba(0,0,0,.75);
  --g-blur:blur(24px) saturate(180%);
  --r-lg:28px; --r-md:20px;
}

/* ---------- typographie ---------- */
html,body,button,input,select,textarea{font-family:var(--body)}
body{font-size:16px;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:var(--display);font-weight:400}
.brand .bt b{font:400 1.55rem/1 var(--display);letter-spacing:.06em}
.brand .bt small{font:500 .58rem/1 var(--mono);letter-spacing:.28em}
.kicker{font-family:var(--mono)!important;letter-spacing:.22em!important}
.band h1,.band h2,h2.title,.hero-static h1{font-family:var(--display)!important;font-weight:400!important;letter-spacing:-.015em}
.band h1 em,.band h2 em,h2.title em,.hero-static h1 em{font-style:italic}

/* ---------- environnement : couleurs qui passent à travers le verre ---------- */
.env{position:fixed;inset:0;z-index:-1;background:var(--canvas);overflow:hidden;pointer-events:none}
.env i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.env i:nth-child(1){width:70vmax;height:70vmax;left:-20vmax;top:-10vmax;opacity:.8;background:radial-gradient(circle,rgba(46,111,163,.40),transparent 65%);animation:drift1 70s ease-in-out infinite alternate}
.env i:nth-child(2){width:70vmax;height:70vmax;right:-25vmax;bottom:-20vmax;opacity:.8;background:radial-gradient(circle,rgba(184,242,60,.16),transparent 65%);animation:drift2 90s ease-in-out infinite alternate}
.env i:nth-child(3){width:48vmax;height:48vmax;left:35vw;top:35vh;opacity:.7;background:radial-gradient(circle,rgba(212,190,134,.16),transparent 65%);animation:drift1 80s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(18vmax,12vmax,0)}}
@keyframes drift2{to{transform:translate3d(-16vmax,-10vmax,0)}}

/* ---------- matière verre ---------- */
.lg,.card,.step,.stats-panel,.pay,.gate-card,.modal{
  background:var(--g-fill);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line);
  box-shadow:var(--g-hi),var(--g-drop);
}

/* en-tête flottant */
header{
  top:12px!important;left:12px!important;right:12px!important;margin-inline:auto;max-width:1180px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(18,24,28,.55),rgba(10,14,16,.38))!important;
  -webkit-backdrop-filter:blur(28px) saturate(190%)!important;backdrop-filter:blur(28px) saturate(190%)!important;
  border:1px solid var(--g-line)!important;
  box-shadow:var(--g-hi),0 18px 50px -20px rgba(0,0,0,.7);
}
.header-inner{padding:12px 14px 12px 22px!important}
nav a{font:500 .74rem/1 var(--mono)!important;letter-spacing:.14em!important;color:var(--text-secondary)!important;padding:10px 14px;border-radius:999px;transition:background .3s,color .3s}
nav a:hover{color:var(--text-primary)!important;background:rgba(255,255,255,.07)}
nav{gap:4px!important}
.mobile-nav{border-top:1px solid var(--g-line)!important}
.mobile-nav a{font:500 .8rem/1 var(--mono)!important;border-bottom-color:rgba(255,255,255,.06)!important}

/* boutons */
.btn,.cbtn{font-family:var(--body);font-weight:600;letter-spacing:.02em;border-radius:999px}
.btn-primary,.cbtn.primary{
  background:linear-gradient(180deg,#dcff86 0%,#b8f23c 52%,#9cd626 100%)!important;color:#0a1204!important;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 8px rgba(50,80,0,.35),0 12px 32px -10px rgba(184,242,60,.6);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .3s;
}
.btn-primary:hover,.cbtn.primary:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 8px rgba(50,80,0,.35),0 18px 40px -10px rgba(184,242,60,.7)}
.btn-secondary,.cbtn.ghost,.icon-btn,.chip,.music-btn{
  background:var(--g-fill)!important;
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line)!important;box-shadow:var(--g-hi);color:var(--text-primary)!important;
}
.btn-secondary:hover,.cbtn.ghost:hover,.icon-btn:hover{border-color:var(--g-line-hi)!important}
.icon-btn .badge{background:var(--accent)!important;color:#0a1204!important;font:700 .62rem/1 var(--body)!important;box-shadow:0 0 0 2px rgba(7,11,14,.8)}
.chip{font:500 .72rem/1 var(--mono)!important;letter-spacing:.06em!important;padding:10px 14px!important}

/* ---------- sections boutique ---------- */
.products{padding:clamp(90px,11vw,150px) clamp(20px,5vw,32px)!important}
.products-head h2,.how h2{font:400 clamp(48px,7vw,96px)/.95 var(--display)!important;letter-spacing:-.02em}
.products-head .rule{width:72px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.products-head p{font-size:1rem;color:var(--text-secondary)}
.grid{gap:20px!important}

/* ---------- carte produit (photo dans un cadre de verre) ---------- */
.card{position:relative;border-radius:var(--r-lg)!important;padding:10px!important;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;transition:transform .55s var(--ease),border-color .3s!important}
.card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.14),transparent 45%);opacity:0;transition:opacity .4s}
.card:hover{transform:translateY(-6px)!important;border-color:var(--g-line-hi)!important}
.card:hover::before{opacity:1}
.card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.card-media{position:relative;aspect-ratio:1/1;border-radius:20px!important;overflow:hidden;background:#f2f3f1!important}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease),transform .9s var(--ease)!important}
.card-media img.alt{opacity:0}
.card:hover .card-media img{transform:scale(1.05)}
.card:hover .card-media img.alt{opacity:1}
.card-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(0,0,0,.06);background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 35%)}
.card .tag{position:absolute!important;top:12px;left:12px;z-index:2;background:rgba(10,14,16,.55)!important;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.22);color:#fff!important;font:500 10.5px/1 var(--mono)!important;letter-spacing:.1em!important;padding:7px 10px!important;border-radius:999px;text-transform:uppercase}
.card-body{padding:16px 12px 8px!important;display:flex;flex-direction:column;gap:8px;flex:1}
.card-meta{font:400 10.5px/1.3 var(--mono)!important;letter-spacing:.12em!important;color:var(--text-secondary)!important;text-transform:uppercase}
.card h3{font:400 clamp(26px,2.4vw,32px)/1.04 var(--display)!important;letter-spacing:-.01em;margin:0}
.card p{color:var(--text-secondary);font-size:14.5px;line-height:1.55;margin:0;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.card-price{font:600 17px/1 var(--body)!important;color:var(--text-primary)!important;letter-spacing:-.01em}
.card-more{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.card-foot .btn{position:relative;z-index:4}

/* ---------- animation principale sur téléphone ---------- */
@media (max-width:720px){
  .band,.band.settle{left:20px!important;right:20px!important;width:auto!important;top:auto!important;bottom:13vh;transform:none!important;text-align:left!important}
  .band.right p.sub{margin-left:0}
  .band h1,.band h2{font-size:clamp(34px,10vw,48px)!important}
  .ring{bottom:auto;top:96px}
}

/* ---------- comment commander ---------- */
.step{border-radius:var(--r-md)!important}
.step .n{font:400 12px/1 var(--mono)!important;letter-spacing:.18em;color:var(--accent)!important}
.step h3{font:400 26px/1.1 var(--display)!important;margin:14px 0 8px!important}

/* ---------- ambiance ---------- */
.lifestyle-card{border-radius:var(--r-lg)!important}
.lifestyle-card .caption{left:14px!important;right:14px!important;bottom:14px!important;border-radius:20px;padding:18px 20px!important;background:var(--g-fill)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-line);box-shadow:var(--g-hi)}
.lifestyle-card .caption h3{font:400 28px/1.05 var(--display)!important}
.anno{border-radius:var(--r-lg)!important;border:1px solid var(--g-line)}
.glass{background:var(--g-fill)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-line)!important;box-shadow:var(--g-hi),var(--g-drop)}
.digits{font-family:var(--mono)!important}

/* ---------- panier ---------- */
.drawer-wrap{background:rgba(4,6,8,.45)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.drawer{background:var(--g-fill-dense)!important;-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border-left:1px solid var(--g-line)!important;box-shadow:inset 1px 0 0 rgba(255,255,255,.12),-30px 0 80px rgba(0,0,0,.5)}
@media (min-width:500px){.drawer{margin:12px;height:calc(100% - 24px)!important;border-radius:26px;border:1px solid var(--g-line)!important;overflow:hidden}}
.drawer-head h2{font:400 30px/1 var(--display)!important}
.line{border-bottom-color:rgba(255,255,255,.07)!important}
.line img{border-radius:12px!important}
input[type=text],input[type=tel],textarea,select{background:rgba(255,255,255,.05)!important;border:1px solid var(--g-line)!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
input:focus,textarea:focus,select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(184,242,60,.14)}
select option{background:#0f171b}
.pay{border-radius:18px!important}
.drawer-foot{border-top-color:rgba(255,255,255,.08)!important}

/* ---------- porte d'âge ---------- */
.gate{background:radial-gradient(60vmax 60vmax at 20% 10%,rgba(46,111,163,.35),transparent 60%),radial-gradient(50vmax 50vmax at 90% 90%,rgba(184,242,60,.12),transparent 60%),var(--canvas)!important}
.gate-card{padding:40px 32px;border-radius:var(--r-lg)}
.gate-card h2{font:400 38px/1.05 var(--display)!important}

/* ---------- pied de page ---------- */
footer{border-top:1px solid rgba(255,255,255,.07)!important}
footer .footer-links a{font:500 .8rem/1 var(--mono);letter-spacing:.06em;color:var(--text-secondary)}
.copyright{font-family:var(--mono)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg,.card,.step,.stats-panel,.pay,.gate-card,header,.drawer{background:rgba(18,26,30,.92)!important}
}


/* ---------- navigation : vrais boutons encadrés ---------- */
nav a,.mobile-nav a{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px!important;
  border:1px solid var(--g-line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px -10px rgba(0,0,0,.7);
  color:var(--text-primary)!important;
  transition:background .3s,border-color .3s,transform .3s var(--ease),color .3s!important;
}
nav a:hover,.mobile-nav a:hover{border-color:var(--g-line-hi)!important;transform:translateY(-1px)}
nav a.on,.mobile-nav a.on{background:linear-gradient(180deg,#dcff86,#b8f23c 55%,#9cd626)!important;color:#0a1204!important;border-color:transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px -8px rgba(184,242,60,.55)}
nav{gap:8px!important}
nav a{padding:11px 16px!important}
nav a i,.mobile-nav a i{display:block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
@media (max-width:900px){
  .burger{display:none!important}
  .mobile-nav{display:flex!important;flex-direction:row!important;gap:8px;overflow-x:auto;padding:2px 12px 12px!important;border-top:0!important;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .mobile-nav::-webkit-scrollbar{display:none}
  .mobile-nav a{flex:1 0 auto;justify-content:center;padding:11px 11px!important;font:500 .66rem/1 var(--mono)!important;letter-spacing:.06em!important;border-bottom:1px solid var(--g-line)!important}
  .mobile-nav{-webkit-mask-image:none!important;mask-image:none!important;gap:6px!important}
  html{scroll-padding-top:130px!important}
}

/* ---------- carrousel « La sélection » ---------- */
.sel{padding:clamp(90px,10vw,140px) clamp(20px,5vw,32px) 40px;--c:#B8F23C}
.sel-wrap{max-width:1200px;margin:0 auto}
.sel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px}
.sel-head h2{font:400 clamp(52px,7vw,96px)/.95 var(--display);letter-spacing:-.02em}
.sel-head h2 em{font-style:italic;color:var(--gold)}
.sel-nav{display:flex;align-items:center;gap:10px}
.sel-count{font:400 13px/1 var(--mono);letter-spacing:.14em;color:var(--text-secondary);margin-right:6px}
.sel-arrow{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
.sel-slide{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:14px;border-radius:36px;overflow:hidden}
.sel-slide::before{content:"";position:absolute;width:60%;aspect-ratio:1;left:-10%;top:-20%;z-index:-1;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 65%);opacity:.22;filter:blur(40px);transition:background .8s}
.sel-photo{position:relative;aspect-ratio:1/1;border-radius:26px;overflow:hidden;background:#f2f3f1}
.sel-photo img{width:100%;height:100%;object-fit:cover}
.sel-photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);background:linear-gradient(160deg,rgba(255,255,255,.2),transparent 35%)}
.sel-info{padding:20px clamp(10px,3vw,40px) 20px 0;display:flex;flex-direction:column;gap:18px}
.sel-info .chips{display:flex;flex-wrap:wrap;gap:8px}
.sel-info h3{font:400 clamp(40px,4.6vw,64px)/.98 var(--display);letter-spacing:-.02em}
.sel-info h3 em{font-style:italic;color:var(--gold)}
.sel-info p{color:var(--text-secondary);font-size:1rem;line-height:1.65;max-width:46ch}
.sel-price{display:flex;align-items:baseline;gap:12px}
.sel-price b{font:600 32px/1 var(--body);letter-spacing:-.02em}
.sel-price small{color:var(--text-secondary);font-size:.85rem}
.sel-cta{display:flex;gap:12px;flex-wrap:wrap}
.sel-cta .btn{height:52px;padding:0 26px;font-size:.88rem;display:inline-flex;align-items:center;text-decoration:none}
/* transition des slides */
.sel-slide .sel-photo img,.sel-slide .sel-info>*{transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.sel-slide:not(.in) .sel-photo img{opacity:0;transform:scale(1.08);filter:blur(8px)}
.sel-slide.from-right:not(.in) .sel-info>*{opacity:0;transform:translateX(40px)}
.sel-slide.from-left:not(.in) .sel-info>*{opacity:0;transform:translateX(-40px)}
.sel-slide.in .sel-info>*:nth-child(2){transition-delay:.06s}.sel-slide.in .sel-info>*:nth-child(3){transition-delay:.12s}
.sel-slide.in .sel-info>*:nth-child(4){transition-delay:.18s}.sel-slide.in .sel-info>*:nth-child(5){transition-delay:.24s}
.sel-thumbs{display:flex;gap:12px;margin-top:22px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.sel-thumbs::-webkit-scrollbar{display:none}
.sel-th{flex:none;width:104px;height:104px;padding:5px;border-radius:18px;cursor:pointer;border:1px solid var(--g-line);background:var(--g-fill);box-shadow:var(--g-hi);opacity:.6;transition:opacity .3s,transform .3s var(--ease),border-color .3s}
.sel-th img{width:100%;height:100%;object-fit:cover;border-radius:13px;background:#f2f3f1}
.sel-th:hover{opacity:.9}
.sel-th.on{opacity:1;border:2px solid var(--accent);transform:translateY(-3px)}
.sel-dots{display:flex;gap:6px;margin-top:14px}
.sel-dots i{width:8px;height:8px;border-radius:8px;background:rgba(255,255,255,.25);cursor:pointer;transition:width .4s var(--ease),background .3s}
.sel-dots i.on{width:36px;background:var(--accent)}
@media (max-width:820px){
  .sel-slide{grid-template-columns:1fr;padding:10px;border-radius:28px}
  .sel-info{padding:6px 10px 14px}
  .sel-head{flex-direction:column;align-items:flex-start}
  .sel-th{width:76px;height:76px}
}
@media (prefers-reduced-motion:reduce){.sel-slide *{transition:none!important}}