/* =========================================================
   BRUME · thème blanc « liquid glass »
   Chargé en dernier sur toutes les pages boutique : il remplace les couleurs sombres
   par un blanc pur, un verre translucide clair et une typographie graphite.
   La scène vidéo d'accueil (.stage) reste sombre : c'est la « salle de projection ».
   ========================================================= */
:root{
  --canvas:#FFFFFF; --bg:#FFFFFF; --panel:#FFFFFF; --panel-2:#F5F6F4; --border:rgba(12,18,14,.09);
  --text-primary:#0C110E; --text:#0C110E; --text-secondary:#5D6661; --muted:#5D6661; --line:rgba(12,18,14,.12);
  --accent:#B8F23C; --accent-hover:#C9FA5C; --accent-ink:#3E6A00;
  --gold:#8E6E2E; --accent-2:#8E6E2E;
  --ink:#0C110E;
  /* verre */
  --g-fill:linear-gradient(150deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.52) 55%,rgba(255,255,255,.70) 100%);
  --g-fill-dense:linear-gradient(150deg,rgba(255,255,255,.94),rgba(250,251,249,.88));
  --g-line:rgba(255,255,255,.9);
  --g-line-hi:rgba(12,18,14,.16);
  --g-hair:0 0 0 1px rgba(12,18,14,.06);
  --g-hi:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(12,18,14,.04),inset 0 0 0 1px rgba(255,255,255,.35);
  --g-drop:0 1px 2px rgba(12,18,14,.04),0 10px 24px -12px rgba(12,18,14,.10),0 34px 70px -34px rgba(12,18,14,.22);
  --g-blur:blur(26px) saturate(190%);
  --tshadow:0 1px 2px rgba(5,8,10,.95),0 3px 12px rgba(5,8,10,.78),0 10px 44px rgba(5,8,10,.8);
}
html,body{background:#FFFFFF!important;color:var(--text-primary)}
::selection{background:rgba(184,242,60,.45);color:var(--ink)}

/* fenêtre ouverte (panier, fiche) : la page derrière ne bouge plus */
html.lock,html.lock body{overflow:hidden!important;overscroll-behavior:none}
.drawer-body,.modal,.overlay,.drawer-wrap{overscroll-behavior:contain}
.drawer{height:100%;height:100dvh!important}
@media (min-width:500px){.drawer{height:calc(100dvh - 24px)!important}}

/* ---------- lumière d'ambiance derrière le verre ---------- */
.env{background:#FFFFFF!important}
.env i{filter:blur(100px)!important;opacity:1!important}
.env i:nth-child(1){background:radial-gradient(circle,rgba(184,242,60,.20),transparent 62%)!important}
.env i:nth-child(2){background:radial-gradient(circle,rgba(120,170,220,.18),transparent 62%)!important}
.env i:nth-child(3){background:radial-gradient(circle,rgba(212,190,134,.16),transparent 62%)!important}
.prod-tint{opacity:.35}

/* ---------- matière verre (claire) ---------- */
.lg,.card,.step,.stats-panel,.pay,.gate-card,.modal,.info,.frame,.sel-slide,.glass,.thumbs button,.sel-th{
  background:var(--g-fill)!important;
  -webkit-backdrop-filter:var(--g-blur)!important;backdrop-filter:var(--g-blur)!important;
  border:1px solid var(--g-line)!important;
  box-shadow:var(--g-hi),var(--g-hair),var(--g-drop)!important;
}
.card:hover{border-color:#fff!important;box-shadow:var(--g-hi),0 0 0 1px rgba(12,18,14,.08),0 24px 60px -24px rgba(12,18,14,.28)!important}
.card::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.9),transparent 45%)!important}

/* ---------- en-tête : capsule de verre flottante ---------- */
header{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58))!important;
  -webkit-backdrop-filter:blur(30px) saturate(200%)!important;backdrop-filter:blur(30px) saturate(200%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(12,18,14,.06),0 18px 44px -22px rgba(12,18,14,.30)!important;
}
.brand,.brand .bt b{color:var(--ink)!important}
.brand .bt small{color:var(--gold)!important}
.brand svg path,.brand svg{stroke:var(--ink)}
nav a,.mobile-nav a{
  color:var(--ink)!important;border:1px solid rgba(12,18,14,.08)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6))!important;
  box-shadow:inset 0 1px 0 #fff,0 4px 14px -8px rgba(12,18,14,.25)!important;
}
nav a:hover,.mobile-nav a:hover{border-color:rgba(12,18,14,.18)!important}
nav a.on,.mobile-nav a.on{background:linear-gradient(180deg,#2a302c,#0C110E)!important;color:#fff!important;border-color:transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -10px rgba(12,18,14,.6)!important}
nav a.on i,.mobile-nav a.on i{background:var(--accent)!important;opacity:1!important}
.mobile-nav{border-top-color:rgba(12,18,14,.06)!important}

/* ---------- boutons ---------- */
.btn-primary,.cbtn.primary{
  background:linear-gradient(180deg,#2c332e 0%,#0C110E 60%,#050806 100%)!important;color:#fff!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 6px rgba(0,0,0,.4),0 14px 30px -14px rgba(12,18,14,.65)!important;
}
.btn-primary:hover,.cbtn.primary:hover{filter:none!important;background:linear-gradient(180deg,#3a423c,#141a16 60%,#070a08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 38px -14px rgba(12,18,14,.7)!important}
.btn-secondary,.cbtn.ghost,.icon-btn,.chip,.music-btn,.back,.qty,.sel-arrow,.toast{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.62))!important;
  -webkit-backdrop-filter:var(--g-blur)!important;backdrop-filter:var(--g-blur)!important;
  border:1px solid rgba(255,255,255,.95)!important;color:var(--ink)!important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(12,18,14,.07),0 8px 22px -14px rgba(12,18,14,.35)!important;
}
.btn-secondary:hover,.cbtn.ghost:hover,.icon-btn:hover,.back:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(12,18,14,.16),0 12px 26px -14px rgba(12,18,14,.4)!important}
.icon-btn svg,.back svg{stroke:var(--ink)}
.icon-btn .badge{background:var(--accent)!important;color:#0a1204!important;box-shadow:0 0 0 2px #fff!important}
.chip{color:var(--ink)!important}
.btn-wa{background:linear-gradient(180deg,#34e07a,#1fbd5b)!important;color:#03230f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 26px -12px rgba(31,189,91,.6)!important}
.music-btn i{background:#9aa39e!important}
.music-btn.on i{background:var(--ink)!important}
.qty button{color:var(--ink)!important}
.toast{color:var(--ink)!important}

/* ---------- typographie et accents ---------- */
.kicker,.step .n,.hold-out li span,.card-more{color:var(--accent-ink)!important}
h2.title em,.sel-head h2 em,.sel-info h3 em,.info h1 em,.more h2 em,.band h1 em,.band h2 em{color:var(--gold)}
.lede,.products-head p,.card p,.card-meta,.sel-info p,.desc,.note,.crumbs,.price small,.sel-price small,.sel-count{color:var(--text-secondary)!important}
.card-price,.sel-price b,.price b{color:var(--ink)!important}
.card-foot{border-top-color:rgba(12,18,14,.07)!important}
.card .tag{background:rgba(255,255,255,.78)!important;color:var(--ink)!important;border:1px solid #fff!important;box-shadow:0 0 0 1px rgba(12,18,14,.06),0 6px 16px -8px rgba(12,18,14,.3)}
.products-head .rule{background:linear-gradient(90deg,var(--ink),transparent)!important}

/* ---------- sections ---------- */
.products::after{background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.95) 40%,#fff 100%)!important}
.card-media,.sel-photo,.sel-th img,.pd-main,.thumbs button,.thumbs img,.line img{background:#F4F5F3!important}
.frame .shot{background:#F4F5F3!important}
.frame .shot::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(12,18,14,.05)!important;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 30%)!important}
.nav-arrow,.counter{background:rgba(255,255,255,.8)!important;color:var(--ink)!important;border:1px solid #fff!important;box-shadow:0 0 0 1px rgba(12,18,14,.07),0 8px 20px -10px rgba(12,18,14,.35)}
.specs li{background:rgba(255,255,255,.65)!important;border:1px solid rgba(12,18,14,.07)!important}
.specs li:hover{background:#fff!important}
.lifestyle-card .caption{background:linear-gradient(150deg,rgba(255,255,255,.86),rgba(255,255,255,.64))!important;border:1px solid #fff!important;color:var(--ink)}
.lifestyle-card .caption p{color:var(--text-secondary)!important}
.anno{border:1px solid #fff!important;box-shadow:0 0 0 1px rgba(12,18,14,.06),0 40px 90px -40px rgba(12,18,14,.4)!important}
.brush path{stroke:var(--gold)!important}
.sel-dots i{background:rgba(12,18,14,.15)!important}
.sel-dots i.on{background:var(--ink)!important}
.sel-th.on{border:2px solid var(--ink)!important}
.sel-slide::before{opacity:.35!important}

/* moment « maintenir » : verre clair, chiffres graphite */
.glass .digits,.digits{color:var(--ink)!important;text-shadow:0 0 calc(var(--p,0)*24px) rgba(184,242,60,.65)!important}
.glass .meter{background:rgba(12,18,14,.08)!important}
.glass .meter b{background:var(--ink)!important}
.glass .hint{color:var(--text-secondary)!important}
.hold-out.go li{color:var(--ink)!important}

/* ---------- fenêtres : fiche produit, panier, porte d'âge ---------- */
.overlay,.drawer-wrap{background:rgba(236,239,236,.55)!important;-webkit-backdrop-filter:blur(14px) saturate(140%)!important;backdrop-filter:blur(14px) saturate(140%)!important}
.drawer{background:var(--g-fill-dense)!important;border:1px solid #fff!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(12,18,14,.06),-30px 0 80px -30px rgba(12,18,14,.35)!important;color:var(--ink)}
.drawer-head,.drawer-foot{border-color:rgba(12,18,14,.07)!important}
.line{border-bottom-color:rgba(12,18,14,.07)!important}
.line small{color:var(--text-secondary)!important}
.rm{color:var(--text-secondary)!important}
label,.check{color:var(--text-secondary)!important}
input[type=text],input[type=tel],input[type=number],input[type=password],input[type=search],textarea,select{
  background:rgba(255,255,255,.85)!important;color:var(--ink)!important;border:1px solid rgba(12,18,14,.10)!important;
  box-shadow:inset 0 1px 2px rgba(12,18,14,.05)!important;
}
input:focus,textarea:focus,select:focus{border-color:var(--ink)!important;box-shadow:0 0 0 4px rgba(184,242,60,.35)!important}
select option{background:#fff!important;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#9aa39e}
.pay{background:linear-gradient(150deg,rgba(247,250,240,.95),rgba(255,255,255,.75))!important}
.pay p,.pay b{color:var(--text-secondary)!important}.pay h4{color:var(--ink)}
.trow{color:var(--text-secondary)!important}.trow.total{color:var(--ink)!important;border-top-color:rgba(12,18,14,.1)!important}
.err{color:#C0392B!important}
.empty{color:var(--text-secondary)!important}
.pd-info p,.done p{color:var(--text-secondary)!important}
.thumbs button.on{border-color:var(--ink)!important}
.gate{background:radial-gradient(60vmax 60vmax at 15% 5%,rgba(184,242,60,.18),transparent 60%),radial-gradient(50vmax 50vmax at 95% 95%,rgba(120,170,220,.16),transparent 60%),#FFFFFF!important}
.gate-card p{color:var(--text-secondary)!important}

/* ---------- pied de page ---------- */
footer{border-top:1px solid rgba(12,18,14,.07)!important;background:linear-gradient(180deg,transparent,rgba(244,246,243,.9))}
footer .legal,footer p,.copyright{color:var(--text-secondary)!important}
footer .footer-links a,footer a{color:var(--ink)!important}

/* ---------- la scène vidéo d'accueil reste sombre ---------- */
.stage,.hero-static,.cue{
  --text-primary:#EEF1E8; --text:#EEF1E8; --text-secondary:#A9B4B0; --gold:#D4BE86; --accent-ink:#B8F23C; --ink:#EEF1E8;
  color:#EEF1E8;
}
.stage{background:#05080A!important}
.stage .kicker,.hero-static .kicker{color:var(--accent)!important}
.stage .cbtn.primary,.hero-static .cbtn.primary{background:linear-gradient(180deg,#dcff86 0%,#b8f23c 52%,#9cd626 100%)!important;color:#0a1204!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 32px -10px rgba(184,242,60,.6)!important}
.stage .cbtn.ghost,.hero-static .cbtn.ghost{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important}
/* fondu de la scène sombre vers la page blanche */
.cx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg,.card,.step,.stats-panel,.pay,.gate-card,header,.drawer,.info,.frame,.modal{background:rgba(255,255,255,.96)!important}
}

/* panier : bouton musique masqué pendant la commande, pied plus compact sur téléphone */
html.lock #musicBtn{opacity:0!important;pointer-events:none!important}
@media (max-width:520px){
  .drawer-head{padding:14px 18px!important}.drawer-body{padding:14px 18px!important}
  .drawer-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px))!important}
  .totals{gap:3px!important;margin-bottom:10px!important}.trow{font-size:.84rem!important}
}

/* =========================================================
   Bandes noires (« lanières ») : quelques sections en noir profond pour le contraste
   ========================================================= */
.noir{
  --text-primary:#F1F3EE; --text:#F1F3EE; --text-secondary:#9DA7A2; --muted:#9DA7A2; --ink:#F1F3EE;
  --gold:#D4BE86; --accent-ink:#B8F23C; --line:rgba(255,255,255,.12);
  position:relative;color:#F1F3EE!important;isolation:isolate;
  background:radial-gradient(80% 60% at 15% 0%,rgba(184,242,60,.10),transparent 60%),radial-gradient(70% 60% at 100% 100%,rgba(120,170,220,.10),transparent 60%),#07090A!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.06);
}
.noir::before{background:none!important}
.products.noir::after{background:none!important}
.products.noir::before{opacity:.18}
.noir h2,.noir h3,.noir .products-head h2,.noir h2.title{color:#F1F3EE!important}
.noir .lede,.noir .products-head p,.noir .card p,.noir .card-meta,.noir .hold-out li,.noir .legal,.noir p{color:#9DA7A2!important}
.noir .products-head .rule{background:linear-gradient(90deg,var(--accent),transparent)!important}
/* verre sombre */
.noir .card,.noir .glass,.noir .step,.noir .chip,.noir .btn-secondary,.noir .icon-btn{
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 55%,rgba(255,255,255,.07))!important;
  border:1px solid rgba(255,255,255,.12)!important;color:#F1F3EE!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -30px rgba(0,0,0,.8)!important;
}
.noir .card:hover{border-color:rgba(255,255,255,.28)!important}
.noir .card::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.12),transparent 45%)!important}
.noir .card-foot{border-top-color:rgba(255,255,255,.08)!important}
.noir .card-price{color:#F1F3EE!important}
.noir .card-more{color:var(--gold)!important}
.noir .btn-primary,.noir .cbtn.primary{background:linear-gradient(180deg,#dcff86 0%,#b8f23c 52%,#9cd626 100%)!important;color:#0a1204!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 30px -12px rgba(184,242,60,.55)!important}
.noir .card .tag{background:rgba(10,14,16,.6)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important}
/* « maintenez le verre » en noir : chiffres lumineux */
.noir .glass .digits,.noir .digits{color:#F4F6F0!important;text-shadow:0 0 calc(var(--p,0)*28px) rgba(244,246,240,.55)!important}
.noir .glass .meter{background:rgba(255,255,255,.1)!important}
.noir .glass .meter b{background:var(--accent)!important}
.noir .hold-out.go li{color:#F1F3EE!important}
/* pied de page noir */
footer.noir{border-top:0!important}
footer.noir .footer-links a,footer.noir a{color:#F1F3EE!important}
footer.noir .brand,footer.noir .brand .bt b{color:#F1F3EE!important}
footer.noir .copyright{color:#6f7a75!important}

/* ruban noir défilant entre deux sections */
.ribbon{position:relative;overflow:hidden;background:#07090A;color:#F1F3EE;padding:16px 0;border-block:1px solid rgba(255,255,255,.08);transform:rotate(-1.2deg) scale(1.03);margin:10px 0;z-index:2;box-shadow:0 20px 40px -24px rgba(12,18,14,.5)}
.ribbon-track{display:flex;width:max-content;animation:ribbon 38s linear infinite}
.ribbon span{font:500 13px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;padding:0 26px}
.ribbon i{flex:none;align-self:center;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes ribbon{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ribbon-track{animation:none}}
@media (max-width:600px){.ribbon span{font-size:11px;padding:0 18px}.ribbon{padding:13px 0}}

/* ---------- fiche détaillée (pages produit) : bande noire pleine largeur ---------- */
.fiche{margin:clamp(60px,8vw,100px) calc(50% - 50vw) 0;padding:clamp(56px,8vw,96px) clamp(16px,5vw,48px)}
.fiche-wrap{max-width:1180px;margin:0 auto}
.fiche-title{font:400 clamp(40px,5.4vw,72px)/1 var(--display);letter-spacing:-.02em;max-width:18ch;margin:6px 0 18px}
.fiche-story{font-size:clamp(16px,1.3vw,19px);line-height:1.7;max-width:62ch;color:#C9D0CC!important}
.fiche-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,48px)}
.fiche-card{border-radius:26px;padding:clamp(20px,2.4vw,30px);background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 55%,rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -30px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.fiche-card h3,.faq h3{font:400 28px/1.05 var(--display)!important;margin:0 0 16px;color:#F1F3EE}
.fiche-card p{line-height:1.65}
.notes{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.notes li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.notes span,.sens-row span,.tech dt{font:500 11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9DA7A2}
.notes b{font-weight:600;text-align:right;color:#F1F3EE}
.sens{display:grid;gap:12px}
.sens-row{display:grid;grid-template-columns:96px 1fr 34px;gap:12px;align-items:center}
.sens-row i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.sens-row i::after{content:"";position:absolute;inset:0;width:calc(var(--v)*20%);border-radius:inherit;background:linear-gradient(90deg,var(--accent),#e5ffa8)}
.sens-row em{font:500 12px/1 var(--mono);font-style:normal;color:#C9D0CC;text-align:right}
.tech{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;margin:0}
.tech dd{margin:0;color:#F1F3EE;font-weight:500}
.tips{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.tips li{position:relative;padding-left:22px;line-height:1.6;color:#C9D0CC}
.tips li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.faq{margin-top:clamp(32px,4vw,48px)}
.faq details{border-top:1px solid rgba(255,255,255,.1);padding:18px 0}
.faq details:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:1.05rem;color:#F1F3EE}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--body);color:var(--accent);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;max-width:70ch;line-height:1.65}
.fiche-warn{margin-top:32px;font:400 12px/1.6 var(--mono);letter-spacing:.04em;color:#7f8a85!important}
@media (max-width:820px){.fiche-grid{grid-template-columns:1fr}.sens-row{grid-template-columns:84px 1fr 30px}}
.more{position:relative}

.noir .kicker,.noir p.kicker{color:var(--accent)!important}

/* =========================================================
   Finitions « premium »
   ========================================================= */
/* reflet de bord du verre : un liseré lumineux qui suit l'arrondi (effet liquid glass) */
header,.info,.frame,.sel-slide,.fiche-card,.drawer,.modal,.gate-card{position:relative}
header::after,.info::after,.sel-slide::after,.fiche-card::after,.gate-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,.15) 38%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.fiche-card::after{background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.22))}
/* fond Puff 800 : plus pur (la fumée reste à peine perceptible) */
.products:not(.noir)::before{opacity:.35;filter:grayscale(1) contrast(.9)}
.products:not(.noir)::after{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.93) 45%,#fff 100%)!important}
/* titres plus nets */
.products-head h2,.how h2,h2.title,.sel-head h2,.more h2,.fiche-title{letter-spacing:-.03em!important;text-wrap:balance}
.lede,.products-head p,.fiche-story{text-wrap:pretty}
/* cartes : élévation douce et photo qui « respire » */
.card{transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .3s!important}
.card:hover{transform:translateY(-8px)!important}
.card-media{box-shadow:inset 0 0 0 1px rgba(12,18,14,.04)}
.card h3{letter-spacing:-.02em}
/* boutons : retour tactile */
.btn,.cbtn,.icon-btn,.chip,nav a{transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s,filter .3s!important}
.btn:active,.cbtn:active,.icon-btn:active,nav a:active{transform:scale(.97)!important}
/* étapes « Comment commander » : numéro en pastille */
.step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff!important;letter-spacing:.04em!important}
.noir .step .n{background:var(--accent);color:#0a1204!important}
/* bouton musique plus discret */
.music-btn{width:42px!important;height:42px!important}
/* barre de défilement fine et claire */
html{scrollbar-color:rgba(12,18,14,.25) transparent;scrollbar-width:thin}
/* liens et focus propres */
:focus-visible{outline:2px solid var(--ink)!important;outline-offset:3px}
.noir :focus-visible,.stage :focus-visible{outline-color:var(--accent)!important}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none!important}}