/* Base : couleurs, typographie, en-tête, accueil, panier */

:root{
  --bg:#FBF7F4; --bg2:#F4ECE6; --surface:#FFFFFF; --ink:#2B2230; --muted:#6E6470;
  --rose:#D0607C; --rose-ink:#A93F5B; --line:rgba(43,34,48,.1);
  --rosesoft:#F8DDE3; --lav:#E8E2F5; --sage:#DDEAE1; --sand:#F4E7DA; --sky:#DEEBF5; --terra:#F6DCD0;
  --shadow:0 24px 50px -28px rgba(60,30,50,.45);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.3,1.5,.5,1);
  box-sizing:border-box; color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1B1720; --bg2:#241F2A; --surface:#2A2431; --ink:#F5EEF3; --muted:#B8ACB9;
  --rose:#EE8AA3; --rose-ink:#F5A3B8; --line:rgba(255,255,255,.1);
  --rosesoft:#46303A; --lav:#352F48; --sage:#28372E; --sand:#3A3028; --sky:#25323F; --terra:#45302A;
  --shadow:0 24px 50px -28px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1B1720; --bg2:#241F2A; --surface:#2A2431; --ink:#F5EEF3; --muted:#B8ACB9;
  --rose:#EE8AA3; --rose-ink:#F5A3B8; --line:rgba(255,255,255,.1);
  --rosesoft:#46303A; --lav:#352F48; --sage:#28372E; --sand:#3A3028; --sky:#25323F; --terra:#45302A;
  --shadow:0 24px 50px -28px rgba(0,0,0,.8); color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 100px)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--rose); outline-offset:3px; border-radius:8px}
.wrap{width:min(1240px,100% - 40px); margin-inline:auto}
h1,h2,h3{margin:0; font-family:var(--serif); font-variation-settings:"SOFT" 100; font-weight:500; line-height:1.08; letter-spacing:-.015em}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:14px 26px; font-weight:700; font-size:15.5px; text-decoration:none; transition:transform .25s var(--spring), background .25s, color .25s, box-shadow .25s; white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn-dark{background:var(--ink); color:var(--bg)}
.btn-dark:hover{background:var(--rose); color:#fff; transform:translateY(-2px)}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--bg)}
.btn-rose{background:var(--rose); color:#fff}
.btn-rose:hover{transform:translateY(-2px); box-shadow:0 14px 28px -12px var(--rose)}

/* Annonce */
.announce{background:var(--ink); color:var(--bg); height:38px; overflow:hidden; font-size:13.5px; font-weight:600; text-align:center}
.announce ul{list-style:none; margin:0; padding:0; transition:transform .6s var(--ease)}
.announce li{height:38px; display:grid; place-items:center; padding:0 16px}

/* En-tête */
header.top{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:border-color .3s}
header.top.scrolled{border-color:var(--line)}
.bar{display:flex; align-items:center; gap:18px; height:72px; transition:height .3s}
header.top.scrolled .bar{height:62px}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--serif); font-variation-settings:"SOFT" 100; font-weight:600; font-size:25px; letter-spacing:-.02em; flex-shrink:0}
.logo svg{width:32px; height:32px; transition:transform .6s var(--spring)}
.logo:hover svg{transform:rotate(-12deg) scale(1.1)}
.logo-sym{height:40px; width:auto; transition:transform .6s var(--spring)}
.logo:hover .logo-sym{transform:rotate(-8deg) scale(1.06)}
.logo-txt{height:24px; width:auto}
.logo-txt.dk{display:none}
.logo-custom{height:44px; width:auto; max-width:220px; display:block; object-fit:contain}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-txt.lt{display:none} :root:not([data-theme="light"]) .logo-txt.dk{display:inline-block}}
:root[data-theme="dark"] .logo-txt.lt{display:none}
:root[data-theme="dark"] .logo-txt.dk{display:inline-block}
nav.main{display:flex; gap:2px; margin-left:18px; height:100%}
.nav-item{display:flex; align-items:center; height:100%}
.nav-link{display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; transition:background .2s}
.nav-link:hover,.nav-item.open .nav-link{background:var(--bg2)}
.nav-link svg{width:12px; height:12px; transition:transform .3s}
.nav-item.open .nav-link svg{transform:rotate(180deg)}
.mega{position:absolute; left:0; right:0; top:100%; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(43,34,48,.35); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s, transform .35s var(--ease), visibility 0s .3s}
.nav-item.open .mega{opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .35s var(--ease)}
.mega-in{display:grid; grid-template-columns:repeat(4,1fr) 1.3fr; gap:28px; padding:34px 0 38px}
.mega h4{margin:0 0 12px; font-size:14px; color:var(--muted); font-weight:700}
.mega ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.mega li button{text-align:left; font-weight:600; padding:5px 0; transition:color .2s, transform .25s var(--ease)}
.mega li button:hover{color:var(--rose-ink); transform:translateX(4px)}
.mega .all{margin-top:10px; font-size:14px; text-decoration:underline; text-underline-offset:3px; color:var(--muted)}
.mega-feat{align-self:start; border-radius:24px; background:var(--rosesoft); padding:22px; display:grid; grid-template-columns:1fr 120px; gap:10px; align-items:center; text-align:left; transition:transform .3s var(--ease)}
.mega-feat:hover{transform:translateY(-3px)}
.mega-feat svg{width:120px; height:120px; transition:transform .5s var(--spring)}
.mega-feat:hover svg{transform:rotate(-8deg) scale(1.08)}
.mega-feat b{font-family:var(--serif); font-weight:500; font-size:22px; display:block; line-height:1.15; margin:4px 0 8px}
.mega-feat span{font-size:14px; color:var(--muted)}
.search{flex:1; max-width:320px; margin-left:auto; position:relative}
.search input{width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:10px 16px 10px 40px; outline:none; font-size:15px; transition:border-color .2s, box-shadow .2s}
.search input:focus{border-color:var(--rose); box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 18%,transparent)}
.search > svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted)}
.results{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface); border-radius:20px; box-shadow:var(--shadow); padding:8px; display:none; max-height:360px; overflow:auto}
.results.on{display:block}
.results button{display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; width:100%; text-align:left; padding:6px; border-radius:14px}
.results button:hover,.results button:focus-visible{background:var(--bg2)}
.results .th{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--tint)}
.results .th svg{width:80%; height:80%}
.results small{color:var(--muted); display:block}
.results p{margin:10px; color:var(--muted); font-size:14px}
.icons{display:flex; gap:2px}
.ib{position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; transition:background .2s}
.ib:hover{background:var(--bg2)}
.ib svg{width:22px; height:22px}
.badge{position:absolute; top:2px; right:0; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--rose); color:#fff; font-size:11.5px; font-weight:800; display:grid; place-items:center; transform:scale(0); transition:transform .35s var(--spring)}
.badge.on{transform:scale(1)}
.bump{animation:bump .55s var(--spring)}
@keyframes bump{35%{transform:scale(1.3) rotate(-10deg)}}
.burger{display:none}

/* Héros */
.hero{background:var(--hbg,var(--rosesoft)); transition:background-color .9s var(--ease); position:relative; overflow:hidden; touch-action:pan-y}
.slides{display:grid}
.slide{grid-area:1/1; display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:30px; min-height:min(620px,80vh); padding:40px 0 90px; opacity:0; visibility:hidden; transition:opacity .6s, visibility 0s .6s}
.slide.on{opacity:1; visibility:visible; transition:opacity .6s}
.s-copy > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .8s var(--ease)}
.slide.on .s-copy > *{opacity:1; transform:none}
.slide.on .s-copy > *:nth-child(2){transition-delay:.1s}
.slide.on .s-copy > *:nth-child(3){transition-delay:.2s}
.slide.on .s-copy > *:nth-child(4){transition-delay:.3s}
.slide.on .s-copy > *:nth-child(5){transition-delay:.4s}
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border-radius:999px; padding:6px 14px 6px 8px; font-size:14px; font-weight:700; margin-bottom:20px}
.pill i{width:22px; height:22px; border-radius:50%; background:var(--rose); display:grid; place-items:center; color:#fff; font-style:normal; font-size:12px}
.slide h1,.slide h2{font-size:clamp(42px,6vw,80px); max-width:11ch}
.slide p{font-size:clamp(17px,1.5vw,19px); color:var(--muted); max-width:38ch; margin:20px 0 16px}
.s-price{font-weight:700; font-size:18px; margin-bottom:26px}
.s-price s{color:var(--muted); font-weight:500; margin-left:8px; font-size:15px}
.s-btns{display:flex; gap:10px; flex-wrap:wrap}
.s-art{position:relative; height:min(520px,62vh); display:grid; place-items:center}
.par{position:absolute; transform:translate3d(calc(var(--mx,0) * var(--d) * 1px), calc(var(--my,0) * var(--d) * 1px), 0); transition:transform .5s var(--ease)}
.blob{width:82%; aspect-ratio:1; border-radius:46% 54% 48% 52% / 52% 44% 56% 48%; background:var(--surface); opacity:.7; animation:morph 14s ease-in-out infinite}
@keyframes morph{50%{border-radius:56% 44% 58% 42% / 42% 58% 42% 58%}}
.ring{width:96%; aspect-ratio:1; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--ink) 18%,transparent); animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prod{width:72%; height:auto; aspect-ratio:1}
.prod-in{display:block; width:100%; height:100%; transform:translateX(70px) rotate(10deg) scale(.85); opacity:0; transition:transform 1.1s var(--spring), opacity .7s}
.slide.on .prod-in{transform:none; opacity:1}
.prod-in svg{width:100%; height:100%; animation:hover 6s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-14px) rotate(-2deg)}}
.fchip{background:var(--surface); border-radius:18px; padding:10px 14px; box-shadow:var(--shadow); font-size:14px; font-weight:700; display:flex; align-items:center; gap:10px; white-space:nowrap; opacity:0; transform:scale(.6); transition:opacity .5s, transform .7s var(--spring)}
.fchip small{display:block; font-weight:500; color:var(--muted); font-size:12.5px}
.fchip i{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:var(--hbg); font-style:normal; font-size:17px}
.slide.on .fchip{opacity:1; transform:none; transition-delay:.55s}
.slide.on .fchip.b{transition-delay:.75s}
.h-ctrl{position:absolute; left:0; right:0; bottom:26px; z-index:3}
.h-ctrl .wrap{display:flex; align-items:center; gap:14px}
.tabs-h{display:flex; gap:22px; flex:1}
.tabs-h button{flex:0 1 150px; text-align:left; font-size:14px; font-weight:700; color:var(--muted); transition:color .3s}
.tabs-h button[aria-selected="true"]{color:var(--ink)}
.tabs-h .trk{display:block; height:3px; border-radius:3px; background:color-mix(in srgb,var(--ink) 14%,transparent); margin-bottom:8px; overflow:hidden}
.tabs-h .trk b{display:block; height:100%; width:0; background:var(--ink); border-radius:3px}
.arrows{display:flex; gap:8px}
.arr{width:46px; height:46px; border-radius:50%; background:var(--surface); display:grid; place-items:center; transition:transform .25s var(--spring), background .2s, color .2s}
.arr:hover{background:var(--ink); color:var(--bg); transform:scale(1.06)}
.arr svg{width:18px; height:18px}
.arr:disabled{opacity:.35; pointer-events:none}

/* Bandeau défilant */
.marquee{background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0}
.mq{display:flex; width:max-content; animation:mq 38s linear infinite}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq span{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; padding:0 30px; white-space:nowrap}
.mq svg{width:22px; height:22px; color:var(--rose)}

/* Sections */
section.sec{padding:96px 0}
.shead{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap}
.shead h2{font-size:clamp(34px,4.2vw,54px)}
.shead p{margin:10px 0 0; color:var(--muted); max-width:52ch}

/* Catégories */
.cats{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.cat{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.cat .disc{position:relative; width:100%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; overflow:hidden}
.cat .disc::before{content:""; position:absolute; inset:0; background:var(--tint); border-radius:50%; transition:transform .6s var(--spring)}
.cat:hover .disc::before{transform:scale(.92)}
.cat .disc svg{position:relative; width:68%; height:68%; transition:transform .6s var(--spring)}
.cat:hover .disc svg{transform:translateY(-8px) scale(1.1) rotate(-5deg)}
.cat b{font-size:16.5px}
.cat small{display:block; color:var(--muted); font-weight:500; font-size:14px}

/* Étapes */
.stages{background:var(--surface); border-radius:40px; padding:54px; margin-inline:20px}
.timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); margin:10px 0 40px}
.timeline::before{content:""; position:absolute; left:12.5%; right:12.5%; top:23px; height:2px; background:var(--line)}
.timeline .fill{position:absolute; left:12.5%; top:23px; height:2px; background:var(--rose); width:0; transition:width .7s var(--ease)}
.st{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:700; color:var(--muted); transition:color .3s}
.st .n{width:48px; height:48px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 2px var(--line); display:grid; place-items:center; font-size:15px; transition:background .4s, box-shadow .4s, color .4s, transform .5s var(--spring)}
.st[aria-selected="true"]{color:var(--ink)}
.st[aria-selected="true"] .n{background:var(--rose); color:#fff; box-shadow:none; transform:scale(1.12)}
.st.past .n{box-shadow:inset 0 0 0 2px var(--rose); color:var(--rose-ink)}
.st small{font-weight:500; font-size:13px}
.st-body{display:grid; grid-template-columns:.9fr 2fr; gap:36px; align-items:start}
.st-tip{background:var(--tint,var(--rosesoft)); border-radius:28px; padding:32px; transition:background .5s}
.st-tip h3{font-size:30px; margin-bottom:12px}
.st-tip p{margin:0 0 20px; color:var(--muted)}
.st-tip ul{margin:0 0 24px; padding-left:20px; display:grid; gap:6px}
.st-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}

/* Cartes produit */
.card{position:relative; display:flex; flex-direction:column; min-width:0}
.card[hidden]{display:none}
.pic{position:relative; aspect-ratio:1/1.08; border-radius:26px; background:var(--tint); overflow:hidden}
.pic .open{position:absolute; inset:0; display:grid; place-items:center; width:100%}
.pic .open svg{width:74%; height:74%; transition:transform .7s var(--spring)}
.card:hover .pic .open svg{transform:scale(1.1) rotate(-6deg) translateY(-10px)}
.feat{position:absolute; left:14px; bottom:66px; right:14px; font-size:13.5px; font-weight:600; background:color-mix(in srgb,var(--surface) 85%,transparent); backdrop-filter:blur(8px); border-radius:12px; padding:7px 11px; opacity:0; transform:translateY(8px); transition:.4s var(--ease); pointer-events:none}
.card:hover .feat{opacity:1; transform:none}
.qadd{position:absolute; left:12px; right:12px; bottom:12px; background:var(--ink); color:var(--bg); border-radius:999px; padding:12px; font-weight:700; font-size:14.5px; transform:translateY(calc(100% + 16px)); transition:transform .45s var(--ease), background .2s}
.card:hover .qadd,.qadd:focus-visible{transform:none}
.qadd:hover{background:var(--rose); color:#fff}
.qadd.done{background:#3E9B72; color:#fff}
.tag{position:absolute; top:14px; left:14px; z-index:2; background:var(--surface); font-size:12.5px; font-weight:800; padding:4px 11px; border-radius:999px; pointer-events:none}
.tag.sale{background:var(--rose); color:#fff}
.heart{position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border-radius:50%; background:var(--surface); display:grid; place-items:center; transition:transform .25s var(--spring)}
.heart:hover{transform:scale(1.12)}
.heart svg{width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:2}
.heart[aria-pressed="true"] svg{fill:var(--rose); stroke:var(--rose); animation:pop .5s var(--spring)}
@keyframes pop{from{transform:scale(.3)}}
.meta{padding:14px 4px 0}
.rate{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); font-weight:600}
.stars{--p:100%; position:relative; display:inline-block; font-size:14px; letter-spacing:1.5px; color:color-mix(in srgb,var(--ink) 18%,transparent)}
.stars::before{content:"★★★★★"; position:absolute; left:0; top:0; width:var(--p); overflow:hidden; color:#E8A33D}
.nm{display:block; text-align:left; font-weight:700; font-size:16px; line-height:1.3; margin:5px 0 6px}
.nm:hover{color:var(--rose-ink)}
.price{font-weight:800; font-size:16px}
.price s{color:var(--muted); font-weight:500; font-size:14px; margin-left:6px}
.dots{display:flex; gap:7px; margin-top:10px}
.dot{width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); outline:1.5px solid transparent; outline-offset:2px; transition:outline-color .2s, transform .2s}
.dot[aria-pressed="true"]{outline-color:var(--ink)}
.dot:hover{transform:scale(1.15)}

/* Rail */
.tabs{position:relative; display:flex; gap:6px; background:var(--bg2); border-radius:999px; padding:5px}
.tabs button{position:relative; z-index:1; padding:9px 18px; border-radius:999px; font-weight:700; font-size:14.5px; color:var(--muted); transition:color .3s}
.tabs button[aria-selected="true"]{color:var(--bg)}
.tabs .ind{position:absolute; top:5px; bottom:5px; left:0; border-radius:999px; background:var(--ink); transition:transform .45s var(--spring), width .45s var(--spring)}
.rail-wrap{position:relative}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 66px) / 4); gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail-wrap .arr{position:absolute; top:36%; z-index:4; box-shadow:var(--shadow)}
.rail-wrap .prev{left:-18px}
.rail-wrap .next{right:-18px}
.rail-prog{height:3px; background:var(--line); border-radius:3px; margin-top:26px; overflow:hidden}
.rail-prog b{display:block; height:100%; background:var(--ink); border-radius:3px; width:25%; transition:transform .2s}

/* Focus produit */
.spot{display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center}
.spot-art{position:relative; aspect-ratio:1; border-radius:40px; background:var(--rosesoft); display:grid; place-items:center}
.spot-art > svg{width:70%; height:70%}
.hs{position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:var(--surface); display:grid; place-items:center; box-shadow:0 6px 18px -6px rgba(0,0,0,.35); transition:transform .3s var(--spring), background .3s}
.hs::before{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--surface); animation:ping 2.2s var(--ease) infinite}
@keyframes ping{from{transform:scale(.7); opacity:1}to{transform:scale(1.5); opacity:0}}
.hs i{width:12px; height:12px; border-radius:50%; background:var(--rose); transition:background .3s}
.hs[aria-pressed="true"]{background:var(--rose); transform:scale(1.2)}
.hs[aria-pressed="true"] i{background:#fff}
.spot h2{font-size:clamp(34px,4.2vw,52px)}
.feats{list-style:none; margin:26px 0 30px; padding:0; display:grid; gap:8px}
.feats button{width:100%; text-align:left; display:grid; grid-template-columns:40px 1fr; gap:14px; padding:14px 16px; border-radius:20px; transition:background .3s}
.feats button:hover{background:var(--bg2)}
.feats button[aria-pressed="true"]{background:var(--surface); box-shadow:var(--shadow)}
.feats .ic{width:40px; height:40px; border-radius:12px; background:var(--rosesoft); display:grid; place-items:center; font-size:18px}
.feats b{display:block; font-size:16px}
.feats div span{color:var(--muted); font-size:14.5px; display:block; max-height:0; overflow:hidden; opacity:0; transition:max-height .45s var(--ease), opacity .35s, margin .35s}
.feats button[aria-pressed="true"] div span{max-height:80px; opacity:1; margin-top:4px}

/* Boutique */
.filters{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0; border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 17px; font-weight:700; font-size:14.5px; transition:background .25s, color .25s, border-color .25s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.sort{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; color:var(--muted)}
.sort select{border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 14px; font-weight:700; color:var(--ink)}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px 22px}
.empty{text-align:center; padding:50px 20px; color:var(--muted)}
.empty strong{display:block; font-family:var(--serif); font-weight:500; font-size:28px; color:var(--ink); margin-bottom:8px}

/* Avis */
.rv{display:grid; grid-template-columns:320px 1fr; gap:46px; align-items:start}
.score{background:var(--surface); border-radius:32px; padding:32px}
.score .big{font-family:var(--serif); font-size:72px; line-height:1}
.score .stars{font-size:22px}
.score p{color:var(--muted); margin:6px 0 20px; font-size:14.5px}
.bars{display:grid; gap:8px}
.bars div{display:grid; grid-template-columns:28px 1fr 40px; gap:10px; align-items:center; font-size:14px; font-weight:600}
.bars i{height:8px; border-radius:8px; background:var(--bg2); overflow:hidden}
.bars i b{display:block; height:100%; width:0; background:#E8A33D; border-radius:8px; transition:width 1.2s var(--ease)}
.bars span{color:var(--muted); text-align:right}
.rcards{grid-auto-columns:calc((100% - 22px) / 2)}
.rcard{background:var(--surface); border-radius:28px; padding:28px; display:flex; flex-direction:column; gap:12px}
.rcard h3{font-family:var(--sans); font-weight:800; font-size:17px; letter-spacing:0}
.rcard p{margin:0; color:var(--muted); flex:1}
.rcard footer{display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); font-size:14px}
.av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#2B2230}
.rcard footer small{display:block; color:var(--muted)}
.verif{margin-left:auto; font-size:12.5px; font-weight:700; color:#3E9B72; white-space:nowrap}

/* Club */
.club{background:var(--rosesoft); border-radius:40px; padding:60px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; margin-inline:20px; position:relative; overflow:hidden}
.club h2{font-size:clamp(34px,4.2vw,52px)}
.club p{color:var(--muted); margin:12px 0 0; max-width:44ch}
.perks{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.perks span{background:var(--surface); border-radius:999px; padding:7px 14px; font-size:14px; font-weight:600}
.club form{display:flex; gap:10px; flex-wrap:wrap}
.club input{flex:1; min-width:200px; border:1.5px solid transparent; background:var(--surface); border-radius:999px; padding:15px 20px; outline:none}
.club input:focus{border-color:var(--rose)}
.club small{display:block; color:var(--muted); margin-top:12px; font-size:13px}

footer.site{padding:80px 0 40px; font-size:15px}
.cols{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:30px; margin-bottom:50px}
.cols h4{margin:0 0 14px; font-size:15px}
.cols ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; color:var(--muted)}
.cols a,.cols button{text-decoration:none; text-align:left; transition:color .2s}
.cols a:hover,.cols button:hover{color:var(--rose-ink)}
.cols p{color:var(--muted); max-width:34ch}
.legal{border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.legal{padding-right:76px; padding-bottom:24px}
.pays{display:flex; gap:8px}
.pays span{border:1px solid var(--line); border-radius:8px; padding:3px 10px; font-weight:700; font-size:12.5px; color:var(--ink)}
.pays{flex-wrap:wrap; align-items:center}
.pays .pi{width:80px; height:28px; box-sizing:border-box; background:#fff; padding:4px 8px; display:inline-grid; place-items:center}
.pays .pi img{width:100%; height:18px; object-fit:contain; display:block}

/* Tiroirs et modales */
.scrim{position:fixed; inset:0; background:rgba(27,20,30,.42); z-index:90; opacity:0; pointer-events:none; transition:opacity .35s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; bottom:0; right:0; width:min(450px,100%); background:var(--bg); z-index:100; transform:translateX(105%); transition:transform .55s cubic-bezier(.2,.9,.2,1); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.left{right:auto; left:0; transform:translateX(-105%)}
.drawer.on{transform:none}
.d-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px}
.d-head h2{font-size:28px}
.x{width:42px; height:42px; border-radius:50%; background:var(--bg2); display:grid; place-items:center; flex-shrink:0}
.x svg{width:17px; height:17px}
.ship{margin:0 24px; padding:14px 16px; background:var(--surface); border-radius:18px; font-size:14px; font-weight:600}
.meter{height:8px; background:var(--bg2); border-radius:9px; margin-top:10px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:linear-gradient(90deg,#F2B6C3,var(--rose)); border-radius:9px; transition:width .7s var(--ease)}
.lines{flex:1; overflow-y:auto; padding:6px 24px}
.line{display:grid; grid-template-columns:76px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); animation:slin .45s var(--ease)}
@keyframes slin{from{opacity:0; transform:translateX(30px)}}
.thumb{width:76px; height:76px; border-radius:18px; background:var(--tint); display:grid; place-items:center}
.thumb svg{width:78%; height:78%}
.line h3{font-family:var(--sans); font-size:14.5px; font-weight:700; letter-spacing:0; line-height:1.3}
.line small{color:var(--muted); display:flex; align-items:center; gap:6px; font-size:13px}
.cdot{width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; margin-top:8px; background:var(--surface)}
.qty button{width:32px; height:32px; border-radius:50%; font-weight:800; font-size:17px}
.qty button:hover{background:var(--bg2)}
.qty span{min-width:24px; text-align:center; font-weight:800; font-size:14.5px}
.rgt{text-align:right; font-weight:800; font-size:15px; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.rm{color:var(--muted); font-size:13px; text-decoration:underline; font-weight:500}
.upsell{padding:16px 24px 4px}
.upsell h4{margin:0 0 10px; font-size:14.5px}
.ups{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.up{display:grid; grid-template-columns:48px minmax(0,1fr) 32px; gap:10px; align-items:center; background:var(--surface); border-radius:16px; padding:8px; font-size:13px; font-weight:600; line-height:1.25}
.up .thumb{width:48px; height:48px; border-radius:12px}
.upn{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:2px}
.up .plus{width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:800; transition:transform .3s var(--spring)}
.up .plus:hover{transform:rotate(90deg); background:var(--rose); color:#fff}
.d-foot{padding:18px 24px 22px; display:grid; gap:9px; border-top:1px solid var(--line); background:var(--surface)}
.row{display:flex; justify-content:space-between; font-size:15px}
.row.total{font-size:19px; font-weight:800}
.d-foot .btn{width:100%}
.d-empty{text-align:center; padding:50px 20px; color:var(--muted)}
.d-empty svg{width:130px}
.d-empty strong{display:block; color:var(--ink); font-family:var(--serif); font-weight:500; font-size:24px; margin:6px 0}
.mnav{padding:0 24px 30px; overflow-y:auto}
.mnav h4{margin:22px 0 8px; color:var(--muted); font-size:14px}
.mnav button,.mnav a{display:block; width:100%; text-align:left; padding:12px 0; font-size:18px; font-weight:600; text-decoration:none; border-bottom:1px solid var(--line)}

.modal{position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; pointer-events:none}
.modal.on{pointer-events:auto}
.panel{position:relative; background:var(--bg); border-radius:34px; width:min(940px,100%); max-height:calc(100dvh - 40px); overflow:auto; opacity:0; transform:translateY(30px) scale(.96); transition:opacity .35s, transform .5s cubic-bezier(.2,.9,.3,1.15)}
.panel.narrow{width:min(560px,100%)}
.modal.on .panel{opacity:1; transform:none}
.panel > .x{position:absolute; top:16px; right:16px; z-index:3; background:var(--surface)}
.qv{display:grid; grid-template-columns:1.05fr 1fr}
.qv .gal{background:var(--tint); display:grid; place-items:center; min-height:480px; position:relative}
.qv .gal svg{width:70%; height:70%; animation:hover 6s ease-in-out infinite}
.qv .txt{padding:44px 38px}
.qv h2{font-size:34px; margin:10px 0 8px}
.qv .price{font-size:22px; margin:6px 0 14px}
.qv .desc{color:var(--muted); margin:0 0 18px}
.qv ul{margin:0 0 22px; padding-left:20px; display:grid; gap:4px; font-size:15px}
.lab{font-weight:700; font-size:14.5px; margin-bottom:10px}
.lab span{color:var(--muted); font-weight:500}
.qv .dots{margin:0 0 24px}
.qv .dot{width:32px; height:32px}
.qv .act{display:flex; gap:10px; flex-wrap:wrap}
.qv .act .btn{flex:1}
.qv .qty{margin:0}
.qv .qty button{width:44px; height:44px}
.assur{display:grid; gap:6px; margin-top:22px; font-size:14px; color:var(--muted)}
.checkout{padding:44px 40px}
.checkout h2{font-size:34px; margin-bottom:6px}
.checkout > p{color:var(--muted); margin:0}
.field{display:grid; gap:6px; margin-top:16px}
.field label,.field .lab{font-weight:700; font-size:14.5px; margin:0}
.field input{border:1.5px solid var(--line); background:var(--surface); border-radius:16px; padding:13px 16px; outline:none}
.field input:focus{border-color:var(--rose)}
.field input[aria-invalid="true"]{border-color:var(--rose-ink)}
.err{color:var(--rose-ink); font-size:13.5px; font-weight:600}
.payg{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.payg label{position:relative; border:1.5px solid var(--line); background:var(--surface); border-radius:16px; padding:14px 8px; text-align:center; font-weight:700; font-size:14px; cursor:pointer; transition:border-color .2s, background .2s}
.payg input{position:absolute; opacity:0; pointer-events:none}
.payg label:has(input:checked){border-color:var(--rose); background:color-mix(in srgb,var(--rose) 10%,var(--surface))}
.payg label:has(input:focus-visible){outline:2.5px solid var(--rose); outline-offset:2px}
.summary{background:var(--surface); border-radius:20px; padding:16px 18px; margin-top:20px; display:grid; gap:6px}
.success{text-align:center; padding:60px 40px}
.success svg{width:120px; height:120px}
.c1{stroke-dasharray:340; stroke-dashoffset:340; animation:draw .8s .1s cubic-bezier(.6,0,.3,1) forwards}
.c2{stroke-dasharray:80; stroke-dashoffset:80; animation:draw .5s .75s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h2{font-size:36px; margin:18px 0 10px}
.success p{color:var(--muted); max-width:38ch; margin:0 auto 24px}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:130; transform:translate(-50%,calc(100% + 80px)); visibility:hidden; background:var(--ink); color:var(--bg); padding:13px 22px; border-radius:999px; font-weight:600; font-size:15px; box-shadow:var(--shadow); transition:transform .45s var(--spring); max-width:calc(100% - 40px); text-align:center}
.toast.on{transform:translate(-50%,0); visibility:visible}
.flyer{position:fixed; z-index:140; pointer-events:none; display:grid; place-items:center; border-radius:24px}
.flyer svg{width:74%; height:74%}
.spark{position:fixed; z-index:141; pointer-events:none; width:9px; height:9px; border-radius:50%}


/* Barre de progression de lecture */
.sprog{position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--rose); transform-origin:0 50%; transform:scaleX(0)}

/* Vente flash */
.flash{display:grid; grid-template-columns:1fr 1.1fr; gap:0; background:var(--surface); border-radius:40px; overflow:hidden; margin-bottom:96px}
.fl-art{position:relative; background:var(--lav); display:grid; place-items:center; min-height:440px}
.fl-art svg{width:68%; height:68%; animation:hover 6s ease-in-out infinite}
.fl-badge{position:absolute; top:26px; left:26px; width:92px; height:92px; border-radius:50%; background:var(--rose); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:28px; transform:rotate(-12deg); animation:wob 3s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-4deg) scale(1.06)}}
.fl-txt{padding:48px 50px}
.fl-txt h2{font-size:clamp(32px,3.8vw,48px)}
.fl-txt > p{color:var(--muted); margin:12px 0 22px; max-width:44ch}
.cd{display:flex; gap:10px; margin-bottom:24px}
.cd div{background:var(--ink); color:var(--bg); border-radius:18px; width:78px; padding:12px 0 10px; text-align:center; overflow:hidden}
.cd b{display:block; font-family:var(--serif); font-size:34px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums}
.cd small{font-size:12px; opacity:.7; font-weight:600}
.stockbar{max-width:380px; margin-bottom:24px; font-size:14px; font-weight:700}
.stockbar .row{font-size:14px}
.stockbar .meter i{background:linear-gradient(90deg,#E8A33D,var(--rose))}
.fl-price{display:flex; align-items:baseline; gap:12px; margin-bottom:22px; font-weight:800; font-size:26px}
.fl-price s{font-size:16px; color:var(--muted); font-weight:500}

/* Quiz */
.quiz{background:var(--ink); color:var(--bg); border-radius:40px; margin-inline:20px; padding:70px 0; position:relative; overflow:hidden}
.quiz::before{content:""; position:absolute; width:520px; height:520px; right:-140px; top:-160px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--rose) 45%,transparent),transparent 70%); pointer-events:none}
.qz-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:center; position:relative}
.qz-head h2{font-size:clamp(34px,4.2vw,54px)}
.qz-head p{opacity:.75; margin:14px 0 0; max-width:36ch}
.qz-card{background:var(--bg); color:var(--ink); border-radius:32px; padding:34px; min-height:380px}
.qz-prog{display:flex; gap:6px; margin-bottom:22px}
.qz-prog i{flex:1; height:4px; border-radius:4px; background:var(--line); overflow:hidden}
.qz-prog i b{display:block; height:100%; width:0; background:var(--rose); transition:width .5s var(--ease)}
.qz-card h3{font-size:28px; margin:4px 0 20px}
.qz-step{font-size:14px; font-weight:700; color:var(--muted)}
.qz-opts{display:grid; gap:10px}
.qz-opt{display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--surface); border:1.5px solid var(--line); border-radius:20px; padding:15px 18px; font-weight:700; transition:border-color .2s, transform .3s var(--spring), background .2s}
.qz-opt:hover{border-color:var(--ink); transform:translateX(6px)}
.qz-opt i{font-style:normal; font-size:22px; width:44px; height:44px; border-radius:14px; background:var(--bg2); display:grid; place-items:center; flex-shrink:0}
.qz-opt small{display:block; color:var(--muted); font-weight:500; font-size:13.5px}
.qz-back{margin-top:16px; font-weight:700; font-size:14px; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.qz-res{display:grid; grid-template-columns:170px 1fr; gap:24px; align-items:center}
.qz-res .thumb{width:170px; height:170px; border-radius:28px}
.qz-res h3{margin:6px 0 8px}
.qz-res p{margin:0 0 14px; color:var(--muted); font-size:15px}
.qz-pack{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px}
.qz-pack > span{display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:14px; padding:6px 12px 6px 6px; font-size:13.5px; font-weight:600}
.qz-pack .thumb{width:36px; height:36px; border-radius:10px; flex-shrink:0}
.qz-res{align-items:start}
.qz-btns{display:flex; gap:10px; flex-wrap:wrap}

/* Récemment consultés */
#vus .rail{grid-auto-columns:calc((100% - 88px) / 5)}

/* Aperçu : galerie, tailles */
.stage3{width:100%; height:100%; min-height:inherit; overflow:hidden; display:grid; place-items:center; position:relative}
.gv{display:grid; place-items:center; width:100%; height:100%; transition:transform .7s var(--spring)}
.gv.v1{transform:perspective(700px) rotateY(32deg) rotate(-8deg) scale(.95)}
.gv.v2{transform:scale(1.9) translate(6%,-4%)}
.qv .gal{position:sticky; top:0; align-self:start; height:min(640px,calc(100dvh - 40px)); min-height:0; padding-bottom:84px; border-radius:34px 0 34px 0}
.qv .gal .stage3 svg{width:70%; height:70%}
.thumbs{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px}
.tb{width:58px; height:58px; border-radius:16px; background:var(--surface); overflow:hidden; box-shadow:0 0 0 2px transparent; transition:box-shadow .2s, transform .2s}
.tb[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.tb:hover{transform:translateY(-2px)}
.tb .gv svg{width:70%; height:70%; animation:none}
.sizes{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.size{min-width:52px; padding:10px 14px; border-radius:14px; border:1.5px solid var(--line); background:var(--surface); font-weight:700; font-size:14.5px; transition:border-color .2s, background .2s, color .2s}
.size:hover{border-color:var(--ink)}
.size[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.guide-btn{margin-left:10px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.guide{background:var(--surface); border-radius:16px; padding:12px 16px; margin:6px 0 10px; font-size:14px}
.guide table{width:100%; border-collapse:collapse}
.guide th{text-align:left; color:var(--muted); font-weight:600; padding:4px 0}
.guide td{padding:5px 0; border-top:1px solid var(--line); font-weight:600}
.stock{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; margin:12px 0 18px}
.stock i{width:9px; height:9px; border-radius:50%; background:#3E9B72; box-shadow:0 0 0 4px color-mix(in srgb,#3E9B72 22%,transparent); animation:blink 1.8s ease-in-out infinite}
.stock.low i{background:#E0892F; box-shadow:0 0 0 4px color-mix(in srgb,#E0892F 22%,transparent)}
@keyframes blink{50%{opacity:.4}}

/* Panier : taille, code promo, emballage */
.sz{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-left:10px}
.sz select{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:2px 4px; font-size:13px; font-weight:700; color:var(--ink)}
.promo{display:flex; gap:8px}
.promo input{flex:1; min-width:0; border:1.5px solid var(--line); background:var(--bg); border-radius:999px; padding:10px 16px; font-size:14px; outline:none; text-transform:uppercase}
.promo input:focus{border-color:var(--rose)}
.promo button{border-radius:999px; padding:0 18px; font-weight:700; font-size:14px; box-shadow:inset 0 0 0 1.5px var(--ink)}
.promo button:hover{background:var(--ink); color:var(--bg)}
.pchip{display:flex; justify-content:space-between; align-items:center; background:color-mix(in srgb,#3E9B72 14%,transparent); color:#2F7F5C; border-radius:14px; padding:9px 14px; font-weight:700; font-size:14px}
:root[data-theme="dark"] .pchip{color:#8FD8B5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pchip{color:#8FD8B5}}
.pchip button{font-size:13px; text-decoration:underline; font-weight:600}
.giftl{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; cursor:pointer}
.giftl input{width:18px; height:18px; accent-color:var(--rose)}
.eta{font-size:13.5px; color:var(--muted); text-align:center}
.row.disc{color:#2F7F5C}
:root[data-theme="dark"] .row.disc{color:#8FD8B5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row.disc{color:#8FD8B5}}

/* WhatsApp */
.wa{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.wa-btn{width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(37,211,102,.7); transition:transform .3s var(--spring)}
.wa-btn:hover{transform:scale(1.08) rotate(-8deg)}
.wa-btn svg{width:30px; height:30px}
.wa-bub{position:relative; width:260px; background:var(--surface); border-radius:22px 22px 6px 22px; padding:16px 18px; box-shadow:var(--shadow); font-size:14px; transform-origin:100% 100%; animation:bubIn .5s var(--spring)}
@keyframes bubIn{from{transform:scale(.5); opacity:0}}
.wa-bub b{display:block; margin-bottom:4px}
.wa-bub p{margin:0; color:var(--muted)}
.wa-x{position:absolute; top:6px; right:8px; width:28px; height:28px; border-radius:50%; font-size:18px; color:var(--muted)}
.wa-x:hover{background:var(--bg2)}

/* Responsive */
@media (max-width:1080px){
  nav.main{display:none}
  .burger{display:grid}
  .grid{grid-template-columns:repeat(3,1fr)}
  .rail{grid-auto-columns:calc((100% - 44px) / 3)}
  .st-grid{grid-template-columns:1fr 1fr}
  .st-grid > :nth-child(3){display:none}
}
@media (max-width:860px){
  .flash{grid-template-columns:1fr; border-radius:32px}
  .fl-art{min-height:300px}
  .fl-txt{padding:32px 24px}
  .quiz{margin-inline:10px; border-radius:32px; padding:50px 0}
  .qz-in{grid-template-columns:1fr; gap:30px}
  .qz-card{padding:24px}
  .qz-res{grid-template-columns:1fr}
  #vus .rail{grid-auto-columns:calc((100% - 44px) / 3)}
  .slide{grid-template-columns:1fr; padding:20px 0 110px; min-height:auto; gap:0}
  .s-art{height:340px; order:-1}
  .slide h1,.slide h2{font-size:clamp(38px,9vw,56px)}
  .cats{grid-template-columns:repeat(5,minmax(120px,1fr)); overflow-x:auto; scrollbar-width:none; padding-bottom:6px}
  .stages{padding:34px 22px; margin-inline:10px; border-radius:32px}
  .st-body{grid-template-columns:1fr}
  .spot{grid-template-columns:1fr}
  .rv{grid-template-columns:1fr}
  .club{grid-template-columns:1fr; padding:40px 26px; margin-inline:10px; border-radius:32px}
  .cols{grid-template-columns:1fr 1fr}
  .qv{grid-template-columns:1fr}
  .qv .gal{min-height:340px; position:relative; height:auto; border-radius:0}
  .rail-wrap .arr{display:none}
}
@media (max-width:640px){
  #vus .rail{grid-auto-columns:44%}
  .cd div{width:68px}
  .wa{right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .wa-bub{width:230px}
  body{font-size:16px}
  .bar{height:auto; padding:10px 0; flex-wrap:wrap; gap:6px}
  header.top.scrolled .bar{height:auto}
  .search{order:5; max-width:none; flex-basis:100%}
  .icons{margin-left:auto}
  #themeBtn{display:none}
  .logo{font-size:22px}
  .logo-sym{height:34px}
  .logo-txt{height:20px}
  .grid{grid-template-columns:1fr 1fr; gap:26px 12px}
  .rail{grid-auto-columns:72%}
  .rcards{grid-auto-columns:88%}
  .st-grid{grid-template-columns:1fr 1fr}
  .pic{border-radius:20px}
  .qadd{transform:none; left:8px; right:8px; bottom:8px; padding:9px; font-size:13px}
  .feat{display:none}
  .timeline .st small{display:none}
  .tabs-h{gap:12px}
  .tabs-h button{font-size:12.5px}
  section.sec{padding:66px 0}
  .payg{grid-template-columns:1fr}
  .checkout{padding:40px 22px}
  .qv .txt{padding:28px 22px 32px}
  .ups{grid-template-columns:1fr}
}
@media (hover:none){ .qadd{transform:none} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important}
  html{scroll-behavior:auto}
  .mq{animation:none}
}

/* Icônes au trait (remplacent les émojis) */
.ico{width:1.15em; height:1.15em; flex:none; vertical-align:-.2em}
.pill i .ico{width:13px; height:13px}
.fchip i{color:var(--rose-ink)} .fchip i .ico{width:18px; height:18px}
.feats .ic{color:var(--rose-ink)} .feats .ic .ico{width:20px; height:20px}
.qz-opt i{color:var(--rose-ink)} .qz-opt i .ico{width:22px; height:22px}
.verif{display:inline-flex; align-items:center; gap:4px}
.verif .ico{width:14px; height:14px}
.pchip span{display:inline-flex; align-items:center; gap:6px}
.qadd .ico{width:15px; height:15px}
.cal{display:flex; align-items:flex-start; gap:10px}
.cal > .ico{width:22px; height:22px; color:var(--rose-ink); margin-top:2px}
.ship .ico{width:17px; height:17px}

.legal a{color:inherit; text-decoration:none}
.legal a:hover{text-decoration:underline}
.btn-sm{padding:9px 16px; font-size:14px}
/* Contenu des blocs repliables : même calcul de largeur que le reste du site (Chrome ne le transmet pas) */
details *,details *::before,details *::after{box-sizing:border-box}
/* Menu principal : une ligne ; raccourcis de catégories masqués sur écran moyen (ils restent dans « Boutique ») */
.nav-link{white-space:nowrap}