/* ChicSoko — thème « marketplace » (orange, vivant, animé) */
:root{
  --brand:#ff5a00; --brand2:#e84f00; --brand-soft:#fff2ea; --hot:#e8202a; --hot-soft:#ffe9ea;
  --ink:#1f1f1f; --ink2:#4a4a4a; --muted:#8a8a8a; --line:#ececec; --bg:#f4f4f6; --card:#fff;
  --green:#12a150; --wa:#25d366; --r:12px; --r-sm:8px; --sh:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
.narrow{max-width:1000px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:12px}
.i{width:20px;height:20px;flex:none}
.link{font-weight:600;font-size:13px;color:var(--brand)}
.link:hover{text-decoration:underline}

/* Bandeau défilant */
.ticker{background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;height:32px;overflow:hidden;position:relative}
.ticker-track{position:absolute;inset:0}
.ticker-track span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:tick 12s infinite}
.ticker-track span:nth-child(2){animation-delay:4s}
.ticker-track span:nth-child(3){animation-delay:8s}
@keyframes tick{0%{opacity:0;transform:translateY(8px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-8px)}}

/* En-tête */
.header{background:#fff;position:sticky;top:0;z-index:30;transition:box-shadow .2s}
.header.scrolled{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.header-row{display:flex;align-items:center;gap:22px;height:74px}
.icon-btn{background:none;border:0;padding:8px;cursor:pointer;display:inline-flex;position:relative;border-radius:50%;transition:background .15s}
.icon-btn:hover{background:var(--brand-soft)}
.icon-btn .i{width:24px;height:24px}
.menu-btn{display:none}
.logo{display:inline-flex;align-items:flex-start;font-weight:800;font-size:31px;letter-spacing:-1.6px;line-height:1;white-space:nowrap}
.logo-b{color:var(--brand);position:relative}
.logo-smile{position:absolute;left:4%;right:2%;bottom:-9px;width:94%;height:10px;color:var(--brand)}
.search{position:relative;flex:1;max-width:640px;display:flex;border:2px solid var(--brand);border-radius:999px;background:#fff;margin-left:auto}
.search input{flex:1;border:0;background:none;padding:11px 18px;font:inherit;min-width:0;outline:0;border-radius:999px}
.search button{display:flex;align-items:center;gap:6px;border:0;background:var(--brand);color:#fff;font-weight:600;padding:0 20px;border-radius:999px;margin:3px;cursor:pointer;transition:background .15s}
.search button:hover{background:var(--brand2)}
.search button .i{width:18px;height:18px}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.15);padding:6px;z-index:40;max-height:70vh;overflow-y:auto}
.suggest a{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:7px 8px;border-radius:var(--r-sm)}
.suggest a:hover{background:var(--brand-soft)}
.suggest img,.suggest a>span{width:46px;height:46px;border-radius:6px;object-fit:cover;background:var(--bg)}
.suggest b{font-weight:500;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggest em{font-style:normal;font-weight:700;color:var(--brand);white-space:nowrap;font-size:13px}
.suggest p{margin:10px;color:var(--muted)}
.help-pill{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;transition:background .15s}
.help-pill:hover{background:#eafaf0}
.help-pill .i{width:28px;height:28px;color:var(--wa)}
.help-pill span{display:flex;flex-direction:column;line-height:1.2}
.help-pill small{color:var(--muted);font-size:11px}
.help-pill b{font-size:13px;white-space:nowrap}
.cart-btn b{position:absolute;top:0;right:-2px;background:var(--hot);color:#fff;font-size:11px;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.cart-btn b.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.5)}60%{transform:scale(.9)}}
.catbar{background:var(--brand)}
.catbar-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.catbar-row::-webkit-scrollbar{display:none}
.catbar a{display:flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:13.5px;padding:10px 14px;border-radius:999px;margin:4px 0;transition:background .15s}
.catbar a:hover{background:rgba(255,255,255,.18)}
.catbar a.hot{background:#fff;color:var(--brand)}
.catbar .i{width:16px;height:16px;fill:currentColor}

/* Tiroirs */
.drawer{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:60;transition:background .25s}
.drawer[hidden]{display:none}
.drawer.open{background:rgba(0,0,0,.45)}
.drawer-panel{position:absolute;top:0;bottom:0;background:#fff;width:min(380px,90vw);overflow-y:auto;display:flex;flex-direction:column;transition:transform .25s ease}
.drawer-left .drawer-panel{left:0;transform:translateX(-100%)}
.drawer-right .drawer-panel{right:0;transform:translateX(100%)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 14px 16px 20px;border-bottom:1px solid var(--line)}
.drawer-head .logo{font-size:24px}
.drawer-left .drawer-panel>a{display:block;padding:14px 20px;font-weight:500;font-size:15px;border-bottom:1px solid #f6f6f6}
.drawer-left .drawer-panel>a:hover{background:var(--brand-soft)}
.drawer-panel .hot{color:var(--brand);font-weight:700!important}
.drawer hr{border:0;border-top:6px solid var(--bg);margin:0}
.drawer-empty{padding:30px 20px;color:var(--muted);text-align:center}
.drawer-lines{flex:1;overflow-y:auto;padding:8px 12px}
.dl{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:10px 8px;border-radius:var(--r-sm)}
.dl:hover{background:var(--bg)}
.dl-img{width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
.dl-img img{width:100%;height:100%;object-fit:cover}
.dl-txt{display:flex;flex-direction:column;gap:2px}
.dl-txt b{font-weight:500;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-txt small{color:var(--brand);font-weight:700}
.drawer-foot{padding:16px 20px 22px;border-top:1px solid var(--line);display:grid;gap:10px}
.toast{position:fixed;left:50%;top:90px;transform:translate(-50%,-10px);background:var(--ink);color:#fff;font-weight:600;padding:12px 22px;border-radius:999px;z-index:80;opacity:0;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);margin-right:10px;font-size:12px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:11px 20px;font-weight:600;font-size:14px;cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;text-align:center;line-height:1.2}
.btn:active{transform:scale(.97)}
.btn .i{width:18px;height:18px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(255,90,0,.28)}
.btn-primary:hover{background:var(--brand2)}
.btn-dark{background:var(--ink);color:#fff;width:100%}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-outline{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);flex:1}
.btn-outline:hover{background:var(--brand-soft)}
.btn-off{background:var(--bg);color:var(--muted);width:100%;cursor:default}
.btn-wa{background:var(--wa);color:#fff;margin-top:10px}
.btn-wa:hover{background:#1ebe5b}
.btn-wa .i{width:22px;height:22px}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-xl{width:100%;padding:16px;font-size:16px}
.btn-icon{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;cursor:pointer;transition:.15s}
.btn-icon:hover{background:var(--brand);color:#fff}
.btn-icon .i{width:19px;height:19px}
.loading{opacity:.6;pointer-events:none}

/* Accueil : diaporama + encarts */
.hero{display:grid;grid-template-columns:1fr 300px;gap:14px;margin-top:16px}
.slider{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:2.35/1;min-height:300px;background:var(--brand)}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:20px;padding:30px 60px;color:#fff;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.slide.is-on{opacity:1;visibility:visible}
.slide.is-on .slide-txt>*{animation:rise .6s both}
.slide.is-on .slide-txt>*:nth-child(2){animation-delay:.08s}
.slide.is-on .slide-txt>*:nth-child(3){animation-delay:.16s}
.slide.is-on .slide-txt>*:nth-child(4){animation-delay:.24s}
.slide.is-on .slide-img img{animation:pop .7s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
.t-orange{background:linear-gradient(120deg,#ff5a00,#ff8a00)}
.t-plum{background:linear-gradient(120deg,#6d28d9,#a855f7)}
.t-teal{background:linear-gradient(120deg,#0f766e,#14b8a6)}
.t-night{background:linear-gradient(120deg,#111827,#374151)}
.t-rose{background:linear-gradient(120deg,#e11d48,#fb7185)}
.slide-cat{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600}
.slide strong{display:block;font-size:clamp(22px,2.6vw,34px);font-weight:800;line-height:1.15;margin:12px 0}
.slide-price{display:flex;align-items:baseline;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.slide-price>span{font-size:30px;font-weight:800}
.slide-price small{font-size:14px}
.slide-price s{opacity:.7}
.slide-price em{font-style:normal;background:#fff;color:var(--hot);font-weight:800;font-size:13px;padding:3px 9px;border-radius:999px}
.slide-img{height:88%;display:grid;place-items:center}
.slide-img img{max-height:100%;width:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.25);border:6px solid rgba(255,255,255,.35)}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;z-index:3;opacity:0;transition:opacity .2s}
.slider:hover .slider-arrow{opacity:1}
.slider-arrow.prev{left:12px}.slider-arrow.next{right:12px}
.slider-dots{position:absolute;bottom:14px;left:60px;display:flex;gap:6px;z-index:3}
.slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.5);cursor:pointer;transition:width .3s}
.slider-dots button.on{width:26px;background:#fff}
.hero-side{display:grid;gap:14px}
.side-card{display:grid;grid-template-columns:1fr 110px;align-items:center;gap:10px;background:#fff;border-radius:var(--r);padding:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.side-card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.side-card img{width:110px;height:110px;object-fit:cover;border-radius:var(--r-sm)}
.side-txt b{display:block;font-weight:600;font-size:13px;line-height:1.35;margin-bottom:6px}
.side-txt .price{font-size:17px}
.side-txt em{font-style:normal;margin-left:6px;color:var(--hot);font-weight:700;font-size:12px}

.perks-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.perks-strip div{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r);padding:12px 14px;font-size:13px}
.perks-strip .i{color:var(--brand);width:24px;height:24px}

/* Panneaux de l'accueil */
.panel{background:#fff;border-radius:var(--r);padding:18px;margin-top:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head h2{font-size:20px;font-weight:700;margin:0}
.circles{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.circles::-webkit-scrollbar{display:none}
.circle{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;text-align:center}
.circle span{width:92px;height:92px;border-radius:50%;overflow:hidden;background:var(--bg);display:grid;place-items:center;transition:transform .2s,box-shadow .2s;border:3px solid #fff;box-shadow:0 0 0 2px var(--brand-soft)}
.circle:hover span{transform:scale(1.06);box-shadow:0 0 0 2px var(--brand)}
.circle img{width:100%;height:100%;object-fit:cover}
.circle b{font-weight:600;font-size:13px;line-height:1.3}
.circle-hot{background:var(--brand)!important;color:#fff}
.circle-hot .i{width:38px;height:38px;fill:#fff}

.flash{padding:0;overflow:hidden}
.flash-bar{display:flex;align-items:center;gap:16px;background:linear-gradient(90deg,var(--hot),#ff5a00);color:#fff;padding:12px 18px}
.flash-bar h2{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:800;margin:0}
.flash-bar h2 .i{fill:#ffd23f;color:#ffd23f;width:24px;height:24px;animation:flicker 1.6s infinite}
@keyframes flicker{50%{opacity:.4}}
.clock{display:flex;align-items:center;gap:4px;font-weight:700}
.clock span{font-weight:500;font-size:13px;margin-right:6px}
.clock b{background:#fff;color:var(--hot);min-width:32px;height:30px;border-radius:6px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.flash-all{margin-left:auto;font-weight:600;font-size:13px;background:rgba(255,255,255,.2);padding:6px 14px;border-radius:999px}
.flash-all:hover{background:rgba(255,255,255,.32)}
.flash .carousel{padding:14px 18px 18px}

/* Carrousels */
.carousel{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*12px)/5);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
.track::-webkit-scrollbar{display:none}
.track>.card{scroll-snap-align:start}
.car-arrow{position:absolute;top:38%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;z-index:3;transition:opacity .2s}
.car-arrow.prev{left:-6px}.car-arrow.next{right:-6px}
.carousel.at-start .car-arrow.prev,.carousel.at-end .car-arrow.next{opacity:0;pointer-events:none}

/* Carte produit */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.1)}
.card-img{position:relative;aspect-ratio:1;background:var(--bg);display:block;overflow:hidden}
.card-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .5s}
.card-img img.alt{opacity:0}
.card:hover .card-img img.alt{opacity:1}
.card:hover .card-img>img{transform:scale(1.04)}
.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1}
.card-title{font-size:13px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;color:var(--ink2)}
.card-title:hover{color:var(--brand)}
.card-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}
.price{color:var(--brand);font-size:18px;font-weight:700;white-space:nowrap}
.price small{font-size:11px;font-weight:700}
.card-price s{color:#aaa;font-size:12px}
.card-actions{display:flex;gap:8px;margin-top:10px}
.card-actions .btn{flex:1;padding:10px 8px;font-size:13px;box-shadow:none}
.card .btn-off{margin-top:10px}
.badge-off{position:absolute;top:8px;left:8px;z-index:2;background:var(--hot);color:#fff;font-weight:700;font-size:12px;padding:3px 8px;border-radius:6px}
.badge-video{position:absolute;right:8px;top:8px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.badge-video .i{width:11px;height:11px}

/* Apparition au défilement */
.reveal{transition:opacity .5s ease,transform .5s ease}
.reveal.pre{opacity:0;transform:translateY(18px)}

/* Visuel de remplacement */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#c9c9c9;padding:10px;text-align:center}
.ph-icon{width:40%;height:auto;stroke-width:1.1}
.ph b{color:var(--ink2);font-size:12px;letter-spacing:2px}
.ph small{color:var(--muted);font-size:11px}

/* Liste / catégorie */
.page-title{background:#fff;text-align:center;padding:26px 16px 18px;margin-bottom:16px}
.page-title h1{font-size:clamp(24px,3vw,32px);font-weight:800;margin:0 0 4px}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a:hover{color:var(--brand)}
.crumbs-left{padding:14px 0}
.filterbar{background:#fff;border-radius:var(--r);margin-bottom:14px;padding:0 16px}
.filterbar summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;font-weight:600;font-size:13px}
.filterbar summary::-webkit-details-marker{display:none}
.filterbar summary span{display:flex;align-items:center;gap:10px}
.filterbar summary em{font-style:normal;color:var(--muted)}
.filter-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 0 18px}
.filter-panel h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.opt{display:inline-block;padding:6px 12px;margin:0 6px 6px 0;font-size:13px;border-radius:999px;background:var(--bg)}
.opt:hover{background:var(--brand-soft);color:var(--brand)}
.opt.on{background:var(--brand);color:#fff;font-weight:600}
.pager{display:flex;gap:6px;justify-content:center;margin:26px 0;flex-wrap:wrap}
.pager a{min-width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fff;font-weight:600}
.pager a.on{background:var(--brand);color:#fff}
.empty{background:#fff;border-radius:var(--r);padding:48px 20px;text-align:center;color:var(--muted)}
.empty a{color:var(--brand);font-weight:600}

/* Fiche produit */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:start;background:#fff;border-radius:var(--r);padding:22px}
.pdp-media{min-width:0;position:sticky;top:140px}
.stage{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg)}
.stage-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.stage-track::-webkit-scrollbar{display:none}
.stage-slide{flex:0 0 100%;height:100%;scroll-snap-align:start}
.stage-slide img{width:100%;height:100%;object-fit:contain;background:#fff}
.stage-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15);display:grid;place-items:center;cursor:pointer;z-index:2}
.stage-arrow.prev{left:10px}.stage-arrow.next{right:10px}
.stage-count{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.stage .badge-off{font-size:14px;padding:5px 10px}
.watch-video{position:absolute;bottom:10px;left:10px;display:flex;align-items:center;gap:7px;background:var(--brand);color:#fff;font-weight:600;font-size:13px;padding:8px 14px;border-radius:999px;z-index:2;animation:pulse 2s infinite}
.watch-video .i{width:12px;height:12px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,0,.5)}70%{box-shadow:0 0 0 12px rgba(255,90,0,0)}100%{box-shadow:0 0 0 0 rgba(255,90,0,0)}}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.thumbs button{flex:0 0 68px;height:68px;padding:0;border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden;background:var(--bg);cursor:pointer;opacity:.65;transition:.15s}
.thumbs button.on,.thumbs button:hover{border-color:var(--brand);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-img{position:relative;width:100%;height:100%}
.pdp-brand{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.pdp-info h1{font-size:clamp(20px,2vw,26px);font-weight:700;margin:4px 0 12px}
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;background:var(--brand-soft);border-radius:var(--r);padding:14px 16px}
.pdp-price .price{font-size:32px;margin:0}
.pdp-price .price small{font-size:15px}
.pdp-price s{color:#999;font-size:16px}
.save{display:inline-block;background:var(--hot);color:#fff;font-weight:600;font-size:12px;padding:4px 12px;border-radius:999px;margin:10px 0 0}
.pitch{color:var(--ink2);font-size:14.5px;margin:14px 0 12px}
.benefits{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:8px}
.benefits li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.benefits .i{flex:none;width:20px;height:20px;padding:3px;margin-top:1px;border-radius:50%;background:#dcf7e7;color:var(--green);stroke-width:3}
.instock{display:flex;align-items:center;gap:6px;color:var(--green);font-size:13px;font-weight:600;margin:16px 0 10px}
.instock .i{width:16px;height:16px}
.eta{display:flex;gap:12px;align-items:center;border:1px dashed #ffc6a6;background:#fffaf6;border-radius:var(--r-sm);padding:11px 14px;margin-bottom:16px;font-size:13px}
.eta p{margin:0}
.eta .i{color:var(--brand);width:22px;height:22px}
.buy{display:grid;gap:10px}
.buy-row{display:flex;gap:10px}
.buy .btn-xl{animation:pulse 2.4s infinite}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.stepper button{width:42px;height:46px;border:0;background:#fff;font-size:20px;cursor:pointer}
.stepper button:hover{color:var(--brand)}
.stepper input{width:38px;text-align:center;border:0;font:inherit;font-weight:700;font-size:15px;-moz-appearance:textfield;outline:0}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper.sm button{width:32px;height:34px;font-size:16px}
.stepper.sm input{width:30px;font-size:13px}
.hint{font-size:12px;color:var(--muted);margin:0;text-align:center}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.trust-grid div{display:grid;grid-template-columns:26px 1fr;column-gap:10px;background:var(--bg);border-radius:var(--r-sm);padding:11px;font-size:12.5px}
.trust-grid .i{grid-row:span 2;color:var(--brand);width:24px;height:24px}
.trust-grid span{color:var(--muted);font-size:11.5px}
.help{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted)}
.help a{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.video-block,.why,.photo-story,.pdp-desc,.steps,.faq{background:#fff;border-radius:var(--r);padding:22px;margin-top:16px}
.video-block{text-align:center}
.video-block h2,.why h2,.photo-story h2,.steps h2,.faq h2,.pdp-desc h2{font-size:20px;font-weight:700}
.video-block video{width:100%;max-width:420px;max-height:80vh;border-radius:var(--r);background:#000;margin:0 auto}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.why-grid div{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border-radius:var(--r);padding:16px}
.why-grid b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px}
.why-grid p{margin:0;font-weight:500;font-size:14px}
.photo-story{text-align:center}
.photo-story img{width:100%;max-width:720px;border-radius:var(--r);margin:0 auto 12px}
.specs{border-collapse:collapse;width:100%;max-width:720px}
.specs th,.specs td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.specs tr:nth-child(odd){background:#fafafa}
.specs th{font-weight:500;width:40%;color:var(--muted)}
.steps ol{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.steps li{display:flex;gap:12px;background:var(--bg);border-radius:var(--r);padding:16px}
.steps li>b{flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center}
.steps strong{display:block;margin-bottom:2px}
.steps span{color:var(--ink2);font-size:13px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;padding:15px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;line-height:1;color:var(--brand);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 15px;color:var(--ink2)}
.block{background:#fff;border-radius:var(--r);padding:18px;margin-top:16px}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.block-head h2{font-size:20px;font-weight:700;margin:0}
.dock{position:fixed;left:0;right:0;top:0;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.12);z-index:45;transform:translateY(-110%);transition:transform .25s}
.dock.show{transform:none}
.dock-row{display:flex;align-items:center;gap:14px;height:68px}
.dock img{width:48px;height:48px;border-radius:var(--r-sm);object-fit:cover}
.dock-title{flex:1;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy{display:none}

/* Panier & commande */
.cart{background:#fff;border-radius:var(--r);padding:0 16px;margin-bottom:16px}
.cart-line{display:grid;grid-template-columns:90px 1fr auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:0}
.cart-thumb{position:relative;width:90px;height:90px;border-radius:var(--r-sm);overflow:hidden;display:block;background:var(--bg)}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-thumb .ph b,.cart-thumb .ph small{display:none}
.cart-thumb.sm{width:54px;height:54px;overflow:visible}
.cart-thumb.sm img{border-radius:var(--r-sm)}
.cart-thumb i{position:absolute;top:-7px;right:-7px;background:var(--brand);color:#fff;font-style:normal;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center}
.cart-info{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:14px}
.cart-info small{color:var(--muted)}
.cart-qty{margin-top:6px}
.cart-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;white-space:nowrap}
.cart-right b{color:var(--brand)}
.x{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px}
.x:hover{color:var(--hot)}
.summary{display:grid;gap:12px;align-self:start;background:#fff;border-radius:var(--r);padding:20px}
.checkout .summary{position:sticky;top:140px}
.sum-line{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.sum-line.total{font-size:18px;font-weight:700}
.sum-line.total b{color:var(--brand)}
.sum-item{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;font-size:13px}
.notice{display:flex;gap:12px;align-items:center;background:var(--brand-soft);border-radius:var(--r);padding:13px 16px;font-size:13.5px;margin-bottom:16px}
.notice .i{color:var(--brand)}
.checkout{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:40px}
.form{display:grid;gap:14px;background:#fff;border-radius:var(--r);padding:20px}
.form h3,.summary h3{font-size:18px;font-weight:700;margin:0}
.form label{display:grid;gap:6px;font-weight:500;font-size:13.5px}
.form input,.form textarea{font:inherit;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);outline:0;background:#fff;transition:border-color .15s}
.form input:focus,.form textarea:focus{border-color:var(--brand)}
.form .err input{border-color:var(--hot)}
.form small{color:var(--hot)}
.thanks-icon{width:76px;height:76px;margin:40px auto 18px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;animation:pop .5s both}
.thanks-icon .i{width:40px;height:40px;stroke-width:2.6}
.thanks-icon.off{background:#fff;color:var(--muted)}
.summary.left{text-align:left;max-width:560px;margin:24px auto}
.prose{background:#fff;border-radius:var(--r);padding:30px;margin-top:16px;margin-bottom:16px}
.prose a{color:var(--brand);font-weight:600}

/* Pied de page */
.trust{background:#fff;margin-top:32px;border-top:1px solid var(--line)}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 16px}
.trust-row div{display:flex;gap:12px;align-items:flex-start}
.trust-row .i{width:30px;height:30px;color:var(--brand)}
.trust-row p{margin:0;display:flex;flex-direction:column;font-size:14px}
.trust-row span{color:var(--muted);font-size:12.5px}
.footer{background:#161616;color:#a3a3a3;padding-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.footer h4{color:#fff;margin:0 0 12px;font-size:14px}
.footer a{display:block;padding:4px 0;font-size:13.5px}
.footer a:hover{color:#fff}
.footer p{font-size:13.5px;margin:14px 0}
.logo-foot{color:#fff;display:inline-flex}
.copy{border-top:1px solid #2a2a2a;margin-top:28px;padding:18px 16px;font-size:12.5px;color:#777}
.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:40;animation:pulse-wa 2.5s infinite}
@keyframes pulse-wa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-float .i{width:30px;height:30px}
.to-top{position:fixed;right:22px;bottom:86px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;z-index:40}
.to-top .i{transform:rotate(90deg)}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.reveal.pre{opacity:1;transform:none}}

/* Tablette */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .track{grid-auto-columns:calc((100% - 3*12px)/4)}
  .help-pill{display:none}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr 1fr}
  .slide{padding:26px 34px}
  .slider-dots{left:34px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .track{grid-auto-columns:calc((100% - 2*12px)/3)}
  .perks-strip{grid-template-columns:1fr 1fr}
  .pdp,.checkout{grid-template-columns:1fr;gap:22px}
  .pdp-media,.checkout .summary{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .filter-panel{grid-template-columns:1fr 1fr}
  .dock{display:none}
}
/* Mobile */
@media (max-width:640px){
  .wrap{padding:0 10px}
  .ticker{font-size:11.5px;height:28px}
  .header-row{flex-wrap:wrap;height:auto;gap:2px 6px;padding:8px 10px 10px}
  .menu-btn{display:inline-flex;margin-left:-6px}
  .logo{font-size:25px;margin-right:auto}
  .logo-smile{bottom:-7px;height:8px}
  .search{order:3;flex-basis:100%;max-width:none;margin:6px 0 0}
  .search button span{display:none}
  .search button{padding:0 14px}
  .catbar a{padding:8px 12px;font-size:12.5px}
  .hero{margin-top:10px;gap:10px}
  .slider{aspect-ratio:auto;min-height:0;height:430px}
  .slide{grid-template-columns:1fr;grid-template-rows:200px auto;padding:16px 18px 44px;gap:12px;align-items:start}
  .slide-img{order:-1;height:200px}
  .slide strong{font-size:20px;margin:8px 0}
  .slide-price{margin-bottom:12px}
  .slide-price>span{font-size:24px}
  .slider-dots{left:50%;transform:translateX(-50%);bottom:12px}
  .slider-arrow{display:none}
  .hero-side{grid-template-columns:1fr;gap:10px}
  .side-card{grid-template-columns:1fr 84px}
  .side-card img{width:84px;height:84px}
  .perks-strip{gap:8px;margin-top:10px}
  .perks-strip div{padding:10px;font-size:12px;gap:8px}
  .perks-strip .i{width:20px;height:20px}
  .panel{padding:14px 10px;margin-top:10px;border-radius:10px}
  .panel-head h2,.block-head h2{font-size:17px}
  .circles{gap:14px}
  .circle{width:78px}
  .circle span{width:70px;height:70px}
  .circle b{font-size:11.5px}
  .flash-bar{flex-wrap:wrap;gap:8px 12px;padding:10px 12px}
  .flash-bar h2{font-size:17px}
  .clock b{min-width:28px;height:26px;font-size:13px}
  .flash .carousel{padding:10px}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .track{grid-auto-columns:calc((100% - 8px)/2.15);gap:8px}
  .car-arrow{display:none}
  .card-body{padding:8px 9px 10px}
  .card-title{font-size:12.5px}
  .price{font-size:16px}
  .card-actions .btn{font-size:12px;padding:9px 4px}
  .btn-icon{width:36px;height:36px}
  .page-title{padding:18px 12px 14px;margin-bottom:10px}
  .filter-panel{grid-template-columns:1fr}
  .pdp{padding:12px;border-radius:10px}
  .pdp-price .price{font-size:26px}
  .trust-grid,.steps ol{grid-template-columns:1fr}
  .thumbs button{flex-basis:56px;height:56px}
  .video-block,.why,.photo-story,.pdp-desc,.steps,.faq,.block{padding:16px 12px;margin-top:10px}
  .footer-grid,.trust-row{grid-template-columns:1fr}
  .cart-line{grid-template-columns:70px 1fr}
  .cart-thumb{width:70px;height:70px}
  .cart-right{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center}
  .to-top{bottom:150px;right:16px}
  /* Barre d'achat fixe sur la fiche produit */
  .sticky-buy{display:block;position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -4px 18px rgba(0,0,0,.12);padding:8px 10px 10px;z-index:40}
  .sticky-price{font-size:13px;margin-bottom:6px}
  .sticky-price b{font-size:18px;font-weight:700;color:var(--brand)}
  .sticky-price b small{font-size:11px}
  .sticky-price s{color:#aaa;font-size:12px}
  .sticky-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .sticky-actions form{display:grid}
  .btn-wa-outline{border:1.5px solid var(--wa);background:#fff;font-size:12px;font-weight:600;justify-content:flex-start;padding:7px 12px;line-height:1.2;text-align:left;border-radius:999px;color:var(--ink)}
  .btn-wa-outline .i{width:24px;height:24px;color:var(--wa)}
  body:has(.sticky-buy) .footer{padding-bottom:130px}
  body:has(.sticky-buy) .wa-float{display:none}
}

/* ===== Habillage jaune et bleu (première version de la boutique), appliqué sur la structure actuelle ===== */
:root{
  --yellow:#ffc22e; --yellow2:#f2ae0f; --indigo:#26338a; --indigo2:#1b2566; --navy:#0b1736;
  --brand:#26338a; --brand2:#1b2566; --brand-soft:#eef0fb; --hot:#e8202a;
}
body{font-family:Montserrat,system-ui,sans-serif}
.ticker{background:var(--ink)}
.logo{letter-spacing:-1.2px}
.logo-a{color:var(--ink)}
.logo-b{color:var(--ink);background:var(--yellow);padding:0 7px 3px 6px;margin-left:3px;border-radius:7px}
.logo-smile{display:none}
.logo-foot .logo-a{color:#fff}
.search{border-color:#d9d9d9;border-radius:8px}
.search input{border-radius:8px}
.search button{background:var(--yellow);color:var(--ink);border-radius:6px;font-weight:700}
.search button:hover{background:var(--yellow2)}
.catbar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.catbar a{color:var(--ink2);font-weight:600}
.catbar a:hover{background:var(--brand-soft);color:var(--indigo)}
.catbar a.hot{background:var(--yellow);color:var(--ink)}
.catbar .i{fill:var(--ink)}
.cart-btn b{background:var(--yellow);color:var(--ink)}
/* Boutons : jaune pour commander, bleu pour le reste */
.btn-primary{background:var(--yellow);color:var(--ink);box-shadow:0 4px 14px rgba(242,174,15,.3);font-weight:700}
.btn-primary:hover{background:var(--yellow2)}
.card-actions .btn-primary{background:var(--indigo);color:#fff;box-shadow:none}
.card-actions .btn-primary:hover{background:var(--indigo2)}
.btn-outline{color:var(--indigo);box-shadow:inset 0 0 0 2px var(--indigo)}
.btn-icon{background:#fff4d6;color:var(--ink)}
.btn-icon:hover{background:var(--yellow);color:var(--ink)}
.price,.side-txt .price{color:var(--indigo)}
.badge-off{background:var(--ink)}
.sum-line.total b,.cart-right b,.dl-txt small{color:var(--indigo)}
/* Diaporama : fonds sombres + jaune, comme les bannières d'origine */
.t-orange,.t-plum,.t-teal,.t-night,.t-rose{background:radial-gradient(ellipse at 75% 55%,#1d2a63 0,#0b1736 60%)}
.t-plum{background:radial-gradient(ellipse at 75% 55%,#3a2a00 0,#0d0d0d 58%)}
.t-teal{background:radial-gradient(ellipse at 75% 55%,#063a4d 0,#07131f 58%)}
.slide-cat{border:1.5px solid var(--yellow);background:none;color:var(--yellow)}
.slide-price>span{color:var(--yellow)}
.slide-price em{background:var(--yellow);color:var(--ink)}
.btn-white{background:var(--yellow);color:var(--ink);font-weight:700}
.slider-dots button.on{background:var(--yellow)}
.slider{background:var(--navy)}
.perks-strip .i,.trust-row .i,.trust-grid .i,.eta .i,.notice .i{color:var(--indigo)}
.circle span{box-shadow:0 0 0 2px #ffe7a6}
.circle:hover span{box-shadow:0 0 0 2px var(--yellow2)}
.circle-hot{background:var(--yellow)!important}
.circle-hot .i{fill:var(--ink)}
/* Ventes flash en bloc jaune */
.flash{background:var(--yellow)}
.flash-bar{background:none;color:var(--ink);padding:16px 18px 4px}
.flash-bar h2 .i{fill:var(--ink);color:var(--ink)}
.clock b{background:var(--ink);color:#fff}
.flash-all{background:#fff;color:var(--ink)}
.flash-all:hover{background:#fff8e6}
/* Fiche produit */
.pdp-price{background:#fff8e6}
.save{background:var(--ink)}
.watch-video{background:var(--ink);animation:none}
.eta{border-color:#ffe08a;background:#fffbef}
.why-grid b,.steps li>b{background:var(--yellow);color:var(--ink)}
.faq summary::after{color:var(--indigo)}
.thumbs button.on,.thumbs button:hover{border-color:var(--ink)}
.buy .btn-xl{animation:none}
.opt.on,.pager a.on{background:var(--indigo)}
.form input:focus,.form textarea:focus{border-color:var(--indigo)}
.wa-float{animation:none}

/* ===== Mise en page façon boutique électronique classique : logo centré, recherche pleine largeur ===== */
body{background:#fff}
.header{border-bottom:1px solid var(--line)}
.header-row{flex-wrap:wrap;height:auto;gap:0;padding:10px 16px 14px;position:relative}
.menu-btn{display:inline-flex}
.header .logo{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:30px}
.header-row .cart-btn{margin-left:auto}
.help-pill{display:none}
.header .search{order:3;flex-basis:100%;max-width:none;margin:12px 0 0;border:1.5px solid #d9d9d9}
.header .search input{padding:14px 18px}
.header .search button{padding:0 26px;margin:0;border-radius:0 6px 6px 0}
.catbar{display:none}
.drawer-left .drawer-panel>a{font-weight:600}
.home-intro{padding:18px 0 10px}
.home-intro small{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--ink2)}
.home-intro h1{font-size:15px;font-weight:600;color:var(--muted);margin:2px 0 0}
.hero{grid-template-columns:1fr;margin-top:6px}
.hero-side{display:none}
.slider{aspect-ratio:16/6.2}
.slide{grid-template-columns:1fr 1fr;padding:30px 6%}
.slide-img img{border-radius:16px;border:0;box-shadow:none;aspect-ratio:1}
.panel{background:#fff;padding:0;border-radius:0;margin-top:34px}
.flash.panel{background:var(--yellow);border-radius:14px;padding:6px 6px 10px}
.panel-head{border-bottom:1px solid var(--line);padding-bottom:10px}
.panel-head h2{font-size:22px;font-weight:800}
.flash-bar h2{font-size:28px}
.card{border:1px solid var(--line)}
.flash .card{border:0}
.hlist{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hcard{display:grid;grid-template-columns:170px 1fr;gap:16px;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.hcard-img{position:relative;aspect-ratio:1;display:block;border-radius:8px;overflow:hidden;background:var(--bg)}
.hcard-img img{width:100%;height:100%;object-fit:cover}
.hcard-body{display:flex;flex-direction:column;align-items:flex-start}
.hcard .card-title{font-size:15px;font-weight:700;min-height:0;color:var(--ink)}
.hcard .price{font-size:22px;font-weight:800;margin-top:6px}
.hcard .price-old{color:#aaa;text-decoration:line-through;font-size:13px}
.hcard .instock{margin:4px 0 10px}
.hcard form{margin-top:auto}
.badge-off.yellow{background:var(--yellow);color:var(--ink)}
.perks-strip div{border:1px solid var(--line)}
@media (max-width:900px){
  .hlist{grid-template-columns:1fr}
}
@media (max-width:640px){
  .header .logo{font-size:24px;top:12px}
  .header .search{margin-top:10px}
  .header .search button{padding:0 16px}
  .slider{height:440px}
  .slide{grid-template-columns:1fr}
  .hcard{grid-template-columns:120px 1fr;gap:12px;padding:10px}
  .hcard .card-title{font-size:13.5px}
  .hcard .price{font-size:19px}
  .flash-bar h2{font-size:22px}
}
.flash-title small{font-size:11px;font-weight:800;letter-spacing:1.5px}
.flash-title p{margin:2px 0 0;font-size:13px;font-weight:500}
.flash-bar{align-items:flex-end;flex-wrap:wrap}
.clock{margin-left:auto}
.flash-all{margin-left:0}
.slide{overflow:hidden}
@media (max-width:640px){
  .slide-img{justify-self:center;width:200px;height:200px}
  .slide-img img{width:200px;height:200px;max-height:none}
}
@media (max-width:640px){
  .slider{aspect-ratio:auto;width:100%}
}
/* Cartes alignées : ancien prix toujours sous le prix, boutons toujours en bas */
.card-price{flex-direction:column;align-items:flex-start;gap:0;min-height:46px}
.card-price s{line-height:1.3}
.card-actions{margin-top:auto;padding-top:10px}
.card .btn-off{margin-top:auto}
/* Boutons flottants plus discrets : ne cachent plus les cartes */
.wa-float{width:48px;height:48px;right:14px;bottom:14px;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.wa-float .i{width:26px;height:26px}
.to-top{width:40px;height:40px;right:18px;bottom:72px}
main{padding-bottom:24px}
@media (max-width:640px){.wa-float{width:46px;height:46px;right:10px;bottom:10px}.to-top{right:13px;bottom:66px}}
.faq summary::after{flex:none;width:22px;text-align:center}
/* Blocs de l'accueil : marges latérales rétablies (la classe .panel écrasait celles de .wrap) */
.wrap.panel{padding-left:16px;padding-right:16px}
.wrap.flash.panel{padding:6px 6px 10px;max-width:1248px}
@media (max-width:1280px){.wrap.flash.panel{margin-left:16px;margin-right:16px}}
/* Rayons : cercles centrés et répartis sur la largeur */
.circles{justify-content:center;gap:48px;padding:6px 0 4px}
.circle{width:120px}
.circle span{width:108px;height:108px}
@media (max-width:640px){
  .wrap.panel{padding-left:10px;padding-right:10px}
  .wrap.flash.panel{margin-left:10px;margin-right:10px}
  .circles{gap:12px;justify-content:space-between}
  .circle{width:76px}
  .circle span{width:68px;height:68px}
}
/* Bandeau d'intro : garder les marges latérales de .wrap */
.home-intro{padding-left:16px;padding-right:16px}
/* Diaporama sur téléphone : titre sur 2 lignes, image plus petite, bouton toujours visible */
.slide strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){
  .home-intro{padding-left:10px;padding-right:10px}
  .slider{height:470px}
  .slide{grid-template-rows:180px auto;padding:16px 18px 40px}
  .slide-img,.slide-img img{width:180px;height:180px}
  .slide strong{font-size:19px;margin:8px 0 10px}
  .slide-price>span{font-size:22px}
  .slide-price{margin-bottom:12px}
}
@media (max-width:640px){.slider{height:400px}}
/* En-tête plus compact (il reste collé en haut pendant le défilement) */
.header-row{padding:8px 16px 10px}
.header .logo{top:12px}
.header .search{margin-top:8px}
.header .search input{padding:11px 16px}
@media (max-width:640px){
  .header-row{padding:6px 10px 8px}
  .header .logo{top:10px}
  .header .search{margin-top:6px}
  .header .search input{padding:10px 14px}
}
/* Pied de page : logo lisible, colonnes côte à côte sur téléphone */
.footer .logo-foot{font-size:28px}
@media (max-width:640px){
  .footer{padding-top:28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:18px 16px}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-grid>div:last-child{grid-column:1/-1}
  .footer h4{margin-bottom:6px}
  .footer a{padding:3px 0}
  .copy{margin-top:18px}
}
/* Diaporama téléphone : hauteur calculée sur la diapo la plus haute, boutons jamais collés aux points */
@media (max-width:640px){
  .slider{height:auto;display:grid}
  .slide{position:relative;inset:auto;grid-area:1/1/2/2;padding:16px 18px 52px}
  .slider-dots{bottom:18px}
}
/* Diaporama téléphone : photo produit en grand, sur toute la largeur */
@media (max-width:640px){
  .slide{grid-template-rows:auto auto;padding:12px 12px 52px}
  .slide-img{width:100%;height:auto;aspect-ratio:1/1;max-height:340px;justify-self:stretch;background:#fff;border-radius:12px;overflow:hidden}
  .slide-img img{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0}
  .slide-txt{padding:0 6px}
}
/* Ordinateur : photo plus grande et nette dans un cadre blanc */
@media (min-width:641px){
  .slide-img{height:92%;aspect-ratio:1/1;justify-self:end;background:#fff;border-radius:16px;overflow:hidden}
  .slide-img img{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0}
}
/* Bouton jaune collé au bord : il recouvre le contour gris au lieu de rester à l'intérieur */
.header .search{border-radius:8px}
.header .search button{margin:-1.5px -1.5px -1.5px 0;border-radius:0 8px 8px 0}
.header .search:focus-within{border-color:var(--yellow)}
/* « Les bonnes affaires » : 3 cartes par ligne sur ordinateur, sans vide à droite */
.hlist{grid-template-columns:repeat(3,1fr)}
.hcard{grid-template-columns:140px 1fr;gap:14px;padding:12px}
.hcard .card-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.hcard-body{align-items:stretch}
.hcard .price,.hcard .price-old,.hcard .instock{align-self:flex-start}
.hcard form .btn{width:100%}
@media (max-width:1100px){.hlist{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.hlist{grid-template-columns:1fr}.hcard{grid-template-columns:120px 1fr}}
/* Commande rapide sur la fiche produit (paiement à la livraison) */
.qo{border:2px solid var(--yellow);border-radius:14px;padding:16px;background:#fffdf5;display:grid;gap:10px;scroll-margin-top:120px}
.qo-head{display:flex;flex-direction:column;gap:2px;margin-bottom:2px}
.qo-head b{font-size:18px;font-weight:800;color:var(--ink)}
.qo-head span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--green);font-weight:600}
.qo-head .i{width:18px;height:18px}
.qo-field{position:relative;display:block}
.qo-field .i{position:absolute;left:13px;top:13px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.qo-field input{width:100%;font:inherit;font-size:15px;padding:12px 14px 12px 42px;border:1.5px solid #d9d9d9;border-radius:10px;background:#fff;outline:0;transition:border-color .15s}
.qo-field input:focus{border-color:var(--yellow2,#f5b400)}
.qo-field.err input{border-color:#e5484d;background:#fff6f6}
.qo-field small{display:block;color:#e5484d;font-size:12px;margin:4px 2px 0}
.qo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qo-qty{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:14px}
.qo-qty .stepper button{height:40px}
.qo-sum{border-top:1px dashed #e6d9a8;padding-top:10px;display:grid;gap:4px;font-size:14px}
.qo-sum div{display:flex;justify-content:space-between;gap:10px}
.qo-sum span{color:var(--muted)}
.qo-total{font-size:16px;margin-top:4px}
.qo-total span{color:var(--ink);font-weight:700}
.qo-total b{font-size:20px;font-weight:800;color:var(--indigo)}
.qo-btn{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:800;padding:16px}
.qo-btn .i{width:20px;height:20px}
.qo .hint{line-height:1.45}
.qo-cart{margin-top:10px}
.qo-cart .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.qo-cart .i{width:18px;height:18px}
.qo-total b{white-space:nowrap}
.sticky-buy.away{transform:translateY(110%);transition:transform .2s}
/* Diaporama ordinateur : plus vivant (cercle jaune derrière la photo, pastille de remise, atouts) */
.slide-perks,.slide-sticker{display:none}
@media (min-width:641px){
  .slider{aspect-ratio:16/5.6;min-height:340px}
  .slide{grid-template-columns:1.1fr 1fr;padding:28px 6% 40px;background:#0b1736;isolation:isolate}
  .slide::before{content:"";position:absolute;inset:0;z-index:-1;background:
    radial-gradient(circle at 74% 50%,rgba(255,194,46,.95) 0 23%,transparent 23.2%),
    radial-gradient(circle at 74% 50%,rgba(255,194,46,.18) 0 33%,transparent 33.2%),
    radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px) 0 0/18px 18px,
    linear-gradient(115deg,#0b1736 0,#14245c 55%,#1c2f78 100%)}
  .t-plum::before{background:
    radial-gradient(circle at 74% 50%,rgba(255,194,46,.95) 0 23%,transparent 23.2%),
    radial-gradient(circle at 74% 50%,rgba(255,194,46,.18) 0 33%,transparent 33.2%),
    radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px) 0 0/18px 18px,
    linear-gradient(115deg,#141414 0,#262626 60%,#3a2f12 100%)}
  .t-teal::before{background:
    radial-gradient(circle at 74% 50%,rgba(255,194,46,.95) 0 23%,transparent 23.2%),
    radial-gradient(circle at 74% 50%,rgba(255,194,46,.18) 0 33%,transparent 33.2%),
    radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px) 0 0/18px 18px,
    linear-gradient(115deg,#07131f 0,#0b2e3f 60%,#0f4a5c 100%)}
  .slide strong{font-size:clamp(26px,2.9vw,40px);letter-spacing:-.01em}
  .slide-price>span{font-size:36px}
  .slide .btn-white{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:16px;padding:14px 28px;border-radius:10px;box-shadow:0 8px 24px rgba(255,194,46,.35);transition:transform .15s}
  .slide:hover .btn-white{transform:translateY(-2px)}
  .slide .btn-white .i{width:18px;height:18px}
  .slide-perks{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
  .slide-perks>span{display:flex;align-items:center;gap:6px}
  .slide-perks .i{width:18px;height:18px;color:var(--yellow)}
  .slide-img{position:relative;justify-self:center;height:80%;overflow:visible;background:none;border-radius:0}
  .slide-img img{border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.35);transform:rotate(-3deg)}
  .slide-sticker{display:grid;place-items:center;position:absolute;top:-14px;right:-14px;width:72px;height:72px;border-radius:50%;background:#e5484d;color:#fff;font-weight:800;font-size:19px;box-shadow:0 8px 20px rgba(0,0,0,.3);transform:rotate(10deg)}
  .slide.is-on .slide-sticker{animation:pop .7s .25s both}
  .slider-dots{left:6%}
}
@media (min-width:641px){
  .slide-img{height:74%;align-self:center}
  .slider-dots{left:auto;right:6%;bottom:16px}
}
@media (min-width:641px){
  .slide{grid-template-rows:minmax(0,1fr)}
  .slide-img{height:78%;max-height:340px}
}
/* Écrans tactiles (iPhone) : pas d'effet de survol qui reste bloqué après un appui */
@media (hover:none){
  .card:hover,.side-card:hover{transform:none;box-shadow:none}
  .card:hover .card-img>img{transform:none}
  .card-img img.alt,.card:hover .card-img img.alt{display:none}
  .slide:hover .btn-white{transform:none}
}