/*
Theme Name: pepi laboratory
Theme URI: https://pepilaboratory.fr
Author: pepi laboratory
Description: Thème WooCommerce sur mesure pour pepi laboratory — peptides de qualité recherche. Design repris à l'identique du site statique d'origine. Compatible SliceWP, Omnisend et toutes les passerelles de paiement WooCommerce.
Version: 1.0.2
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pepi
Tags: e-commerce, woocommerce, custom-menu, translation-ready
WC requires at least: 8.0
WC tested up to: 9.5
*/

/* ===========================================================
   pepi laboratory — feuille de style principale
   Palette dérivée des visuels produit (teal), pas du violet
   de la template d'origine.
   =========================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --brand:#00464E;          /* teal profond — bandeau logo du flacon */
  --brand-900:#002E33;      /* teal très foncé — barres, footer */
  --brand-700:#003F45;
  --brand-500:#0A6B74;
  --sage:#7BA5A3;           /* capuchon du flacon */
  --sage-100:#E7F0EF;
  --sage-50:#F3F8F7;

  --ink:#16232B;
  --ink-soft:#4A5A63;
  --muted:#7C8A92;
  --line:#E3E6E7;
  --surface:#F7F8F8;
  --card-img:#DBDBDB;       /* fond studio des photos produit */
  --white:#fff;
  --sale:#D33A2C;
  --ok:#1E9E6A;
  --star:#F5C518;

  --radius:10px;
  --radius-lg:16px;
  --wrap:1240px;
  --pad:24px;
  --shadow:0 1px 2px rgba(22,35,43,.06), 0 8px 24px rgba(22,35,43,.05);
  --font:'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x masqué : les panneaux off-canvas (menu, panier) sont positionnés
   hors écran et ne doivent jamais créer de barre de défilement horizontale. */
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
body{overflow-x:hidden;
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--white); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--brand)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}
.wrap-narrow{max-width:900px; margin:0 auto; padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Marquee ---------- */
.marquee{background:var(--brand-900); color:#fff; overflow:hidden; padding:9px 0}
.marquee-track{display:flex; width:max-content; animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex; flex-shrink:0}
.marquee span{
  font-size:13.5px; white-space:nowrap; padding:0 22px;
  display:inline-flex; align-items:center; gap:6px; opacity:.95;
}
.marquee b{font-weight:800}
.marquee i{font-style:normal; opacity:.45; padding:0 2px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- 5. Barre livraison ---------- */
.shipbar{
  background:var(--brand); color:#fff; text-align:center;
  padding:13px 16px; font-size:14.5px; font-weight:500;
}
.shipbar span{display:inline-flex; align-items:center; gap:9px}
.shipbar svg{flex-shrink:0}

/* ---------- 6. Header ---------- */
.header{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
}
.header-in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; height:78px; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
}
.header-left,.header-right{display:flex; align-items:center; gap:18px}
.header-right{justify-content:flex-end}
.icon-btn{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:8px; color:var(--brand); transition:background .15s;
}
.icon-btn:hover{background:var(--sage-50)}
.logo{display:flex; align-items:center; gap:9px; justify-self:center}
.logo-mark{width:30px; height:30px; flex-shrink:0}
.logo-text{
  font-size:21px; font-weight:700; letter-spacing:-.03em;
  color:var(--brand); white-space:nowrap;
}
.cart-btn{position:relative}
.cart-count{
  position:absolute; top:2px; right:1px; min-width:17px; height:17px;
  background:var(--brand); color:#fff; border-radius:9px;
  font-size:10.5px; font-weight:800; display:grid; place-items:center; padding:0 4px;
}

/* ---------- 7. Menu / recherche / panier (drawers) ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(10,25,30,.45); z-index:70;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.scrim.open{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; bottom:0; width:min(400px,88vw); background:#fff;
  z-index:80; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.drawer-left{left:0; transform:translateX(-102%)}
.drawer-right{right:0; transform:translateX(102%)}
.drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.drawer-head h3{font-size:16px; text-transform:uppercase; letter-spacing:.09em; font-weight:800}
.drawer-body{flex:1; overflow-y:auto; padding:8px 0}
.drawer-foot{border-top:1px solid var(--line); padding:20px 24px}
.nav-link{
  display:block; padding:14px 24px; font-size:16.5px; font-weight:600;
  color:var(--brand); border-bottom:1px solid var(--surface);
}
.nav-link:hover{background:var(--sage-50)}
.nav-sub{
  padding:18px 24px 8px; font-size:11.5px; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}

/* recherche */
.search-panel{
  position:fixed; top:0; left:0; right:0; background:#fff; z-index:80;
  padding:26px var(--pad) 30px; box-shadow:var(--shadow);
  transform:translateY(-101%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.search-panel.open{transform:translateY(0)}
.search-row{display:flex; gap:12px; max-width:760px; margin:0 auto; align-items:center}
.search-row input{
  flex:1; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; font-size:16px; outline:none;
}
.search-row input:focus{border-color:var(--brand)}
.search-results{max-width:760px; margin:18px auto 0; display:grid; gap:8px}
.search-hit{display:flex; gap:14px; align-items:center; padding:10px; border-radius:var(--radius)}
.search-hit:hover{background:var(--sage-50)}
.search-hit img{width:52px; height:52px; object-fit:cover; border-radius:6px; background:var(--card-img)}
.search-hit b{display:block; font-size:14.5px}
.search-hit span{font-size:13px; color:var(--muted)}
.search-empty{max-width:760px; margin:18px auto 0; color:var(--muted); font-size:14.5px}

/* panier */
.cart-line{display:flex; gap:14px; padding:18px 24px; border-bottom:1px solid var(--surface)}
.cart-line img{width:76px; height:76px; object-fit:cover; border-radius:8px; background:var(--card-img); flex-shrink:0}
.cart-line-main{flex:1; min-width:0}
.cart-line-main b{display:block; font-size:14.5px; font-weight:700; margin-bottom:2px}
.cart-line-main small{color:var(--muted); font-size:12.5px}
.cart-line-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
.cart-empty{padding:56px 24px; text-align:center; color:var(--muted)}
.cart-total{display:flex; justify-content:space-between; font-size:17px; font-weight:800; margin-bottom:6px; color:var(--brand)}
.cart-note{font-size:12.5px; color:var(--muted); margin-bottom:16px}
.link-x{font-size:12.5px; color:var(--muted); text-decoration:underline}
.link-x:hover{color:var(--sale)}

/* ---------- 8. Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--brand); color:#fff; border-radius:999px;
  padding:16px 34px; font-size:16px; font-weight:600;
  transition:background .18s, transform .18s; text-align:center;
}
.btn:hover{background:var(--brand-700)}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:19px 44px; font-size:17px}
.btn-ghost{background:#fff; color:var(--brand); border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--sage-50); border-color:var(--sage)}
.btn-white{background:#fff; color:var(--brand)}
.btn-white:hover{background:var(--sage-100)}
.btn-block{display:flex; width:100%}
.btn-sq{border-radius:var(--radius)}
.btn[disabled]{opacity:.5; pointer-events:none}
.link-under{
  font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1.5px solid var(--brand); padding-bottom:3px; color:var(--brand);
}

/* ---------- 9. Hero ---------- */
.hero{background:linear-gradient(180deg,var(--sage-50) 0%,#fff 82%); padding:52px 0 72px}
.hero-grid{display:grid; gap:44px; align-items:center}
.hero-img{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.hero h1{font-size:clamp(30px,5vw,50px); margin-bottom:20px}
.hero h1 .thin{font-weight:400}
.hero-sub{font-size:17px; color:var(--ink-soft); max-width:56ch; margin-bottom:26px}
.hero-points{list-style:none; padding:0; margin:0 0 32px; display:grid; gap:13px}
.hero-points li{display:flex; align-items:flex-start; gap:12px; font-size:15.5px; color:var(--ink)}
.hero-points svg{flex-shrink:0; margin-top:2px; color:var(--brand)}
.hero-points b{font-weight:700}

/* ---------- 10. Bandeau confiance 4 colonnes ---------- */
.trust{background:var(--surface); border-radius:var(--radius-lg); padding:46px 30px; margin:0 auto}
.trust-grid{display:grid; gap:34px; text-align:center}
.trust-item svg{color:var(--brand); margin:0 auto 14px}
.trust-item h3{font-size:17.5px; margin-bottom:9px}
.trust-item p{font-size:14.5px; color:var(--ink-soft); margin:0}

/* ---------- 11. Sections génériques ---------- */
.section{padding:76px 0}
.section-sm{padding:52px 0}
.section-center{text-align:center}
.section h2{font-size:clamp(26px,4vw,40px); margin-bottom:14px}
.section h2 .thin{font-weight:400}
.eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-500); margin-bottom:14px;
}
.lede{font-size:17px; color:var(--ink-soft); max-width:62ch}
.section-center .lede{margin-left:auto; margin-right:auto}
.checkrow{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px;
  margin:26px 0 32px; padding:0; list-style:none;
}
.checkrow li{
  display:flex; align-items:center; gap:8px; font-size:12.5px;
  font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
}
.checkrow svg{color:var(--brand)}

/* ---------- 12. Grille + carte produit ---------- */
.grid-produits{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .22s, transform .22s;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.card-img{position:relative; background:var(--card-img); aspect-ratio:1/1; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.card:hover .card-img img{transform:scale(1.035)}
.badge-sale{
  position:absolute; top:12px; left:12px; background:var(--sale); color:#fff;
  font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:4px; z-index:2;
}
.badge-out{
  position:absolute; top:12px; left:12px; background:var(--muted); color:#fff;
  font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:4px; z-index:2;
}
.card-body{padding:16px 18px 20px}
.card-body h3{font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:8px}
.prices{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price-old{color:var(--muted); text-decoration:line-through; font-size:14.5px}
.price{font-size:16px; font-weight:800; color:var(--ink)}
.card .price{color:var(--ink)}

/* ---------- 13. Bandeau affiliation ---------- */
.band{
  background:linear-gradient(105deg,var(--brand-900) 0%,var(--brand) 55%,var(--brand-500) 100%);
  color:#fff; padding:88px 0; text-align:center;
}
.band h2{color:#fff; font-size:clamp(28px,4.4vw,44px); margin-bottom:18px}
.band h2 .accent{color:var(--sage)}
.band p{max-width:66ch; margin:0 auto 34px; opacity:.92; font-size:16.5px}

/* ---------- 14. Témoignages ---------- */
.temoins{background:var(--surface); padding:76px 0; text-align:center; overflow:hidden}
.stars{display:flex; justify-content:center; gap:6px; margin-bottom:24px; color:var(--star)}
.temoin-viewport{position:relative; max-width:760px; margin:0 auto}
.temoin{display:none}
.temoin.active{display:block; animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.temoin q{
  display:block; font-size:clamp(18px,2.6vw,23px); font-style:italic;
  line-height:1.45; color:var(--ink); margin-bottom:22px; quotes:none;
}
.temoin-who b{display:block; font-size:14.5px; color:var(--ink)}
.temoin-who span{font-size:14px; color:var(--muted)}
.temoin-nav{display:flex; align-items:center; justify-content:center; gap:26px; margin-top:26px}
.temoin-arrow{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--brand); transition:background .15s;
}
.temoin-arrow:hover{background:var(--sage-100)}
.dots{display:flex; gap:9px}
.dot{width:8px; height:8px; border-radius:50%; background:#CDD4D6; transition:background .2s}
.dot.active{background:var(--brand)}

/* ---------- 15. Stats ---------- */
.stats{display:grid; gap:40px; text-align:center; padding:70px 0}
.stat-num{font-size:clamp(42px,7vw,62px); font-weight:800; color:var(--brand); line-height:1; letter-spacing:-.04em}
.stat-lab{font-size:16px; margin:10px 0 14px; color:var(--ink)}
.stat p{font-size:14.5px; color:var(--ink-soft); margin:0}

/* ---------- 16. Newsletter ---------- */
.news{
  background:linear-gradient(100deg,var(--brand-900) 0%,var(--brand) 50%,var(--brand-500) 100%);
  color:#fff; padding:62px 0;
}
.news h2{color:#fff; font-size:clamp(24px,3.7vw,38px); margin-bottom:12px}
.news h2 .thin{font-weight:400}
.news p{opacity:.92; font-size:15.5px}
.news a{text-decoration:underline}
.news-form{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 16px; max-width:520px}
.news-form input{
  flex:1; min-width:220px; border:0; border-radius:999px; padding:15px 22px;
  font-size:15.5px; outline:none;
}
.news-ok{
  display:none; background:rgba(255,255,255,.16); border-radius:var(--radius);
  padding:13px 18px; font-size:14.5px; margin-bottom:14px;
}
.news-ok.show{display:block}

/* ---------- 17. Footer ---------- */
.footer{padding:64px 0 30px; border-top:1px solid var(--line)}
.footer-top{display:grid; gap:40px; margin-bottom:44px}
.footer-brand .logo{justify-self:start; margin-bottom:18px}
.footer-brand p{font-size:14.5px; color:var(--ink-soft); max-width:56ch}
.footer-contact{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px}
.footer-contact li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-soft)}
.footer-contact svg{color:var(--brand); flex-shrink:0}
.footer-contact a:hover{color:var(--brand); text-decoration:underline}
.socials{display:flex; gap:12px; margin-top:22px}
.socials a{
  width:38px; height:38px; border-radius:8px; display:grid; place-items:center;
  color:var(--brand); background:var(--sage-50); transition:background .15s;
}
.socials a:hover{background:var(--sage-100)}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.footer-cols h4{font-size:16.5px; margin-bottom:16px}
.footer-cols ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.footer-cols a{font-size:14.5px; color:var(--ink-soft)}
.footer-cols a:hover{color:var(--brand); text-decoration:underline}
.footer-legal{border-top:1px solid var(--line); padding-top:26px; margin-top:10px}
.copyright{font-size:14px; color:var(--ink-soft); margin-bottom:26px}
.disclaimer p{font-size:12.5px; color:var(--muted); line-height:1.65; margin-bottom:14px}

/* ---------- 18. Fil d'ariane + entête de page ---------- */
.crumbs{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); padding:26px 0 0}
.crumbs a:hover{color:var(--brand); text-decoration:underline}
.crumbs span{opacity:.5}
.page-head{padding:16px 0 34px}
.page-head h1{font-size:clamp(32px,5.2vw,52px); margin-bottom:16px}
.page-head p{font-size:16.5px; color:var(--ink-soft); max-width:62ch}

/* ---------- 19. Barre outils collection ---------- */
.toolbar{border-top:1px solid var(--line); padding-top:20px; margin-bottom:26px}
.toolbar-count{
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:14px;
}
.toolbar-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.filter-btn{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}
.filter-btn:hover{color:var(--brand)}
.sort-wrap{position:relative; display:inline-flex; align-items:center}
.sort-wrap select{
  appearance:none; border:0; background:transparent; padding:4px 26px 4px 0;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; outline:none;
}
.sort-wrap svg{position:absolute; right:0; pointer-events:none; color:var(--ink-soft)}

/* filtres */
.filter-group{padding:20px 24px; border-bottom:1px solid var(--surface)}
.filter-group h4{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px}
.check{display:flex; align-items:center; gap:11px; padding:7px 0; font-size:15px; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--brand); cursor:pointer}
.range-row{display:flex; align-items:center; gap:12px; margin-top:6px}
.range-row input[type=range]{flex:1; accent-color:var(--brand)}
.range-val{font-size:14px; font-weight:700; color:var(--brand); white-space:nowrap}

.empty-state{text-align:center; padding:70px 20px; color:var(--muted)}
.load-more-wrap{text-align:center; padding:40px 0 0}

/* ---------- 20. Page produit ---------- */
.pdp{padding-bottom:20px}
.pdp-main{
  background:var(--card-img); border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:1/1; margin-bottom:14px;
}
.pdp-main img{width:100%; height:100%; object-fit:cover}
.pdp-thumbs{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
.pdp-thumb{
  flex:0 0 118px; height:118px; border-radius:var(--radius); overflow:hidden;
  background:var(--card-img); border:2px solid transparent; cursor:pointer;
}
.pdp-thumb.active{border-color:var(--brand)}
.pdp-thumb img{width:100%; height:100%; object-fit:cover}

.pdp-title{font-size:clamp(28px,4.4vw,42px); margin-bottom:16px}
.pdp-prices{display:flex; align-items:baseline; gap:14px; margin-bottom:24px; flex-wrap:wrap}
.pdp-prices .price-old{font-size:20px}
.pdp-prices .price{font-size:27px; color:var(--sale)}
.pdp-prices .price.solo{color:var(--brand)}

.variants{display:flex; flex-wrap:wrap; gap:11px; margin-bottom:22px}
.variant{
  border:1.5px solid var(--line); border-radius:var(--radius); background:#fff;
  padding:13px 22px; font-size:15px; font-weight:600; color:var(--ink);
  transition:all .16s;
}
.variant:hover{border-color:var(--sage)}
.variant.active{background:var(--brand); border-color:var(--brand); color:#fff}

.stock{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ok); margin-bottom:26px}
.stock.out{color:var(--muted)}

.buybar{display:flex; gap:12px; align-items:center; margin-bottom:26px; flex-wrap:wrap}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden}
.qty button{width:42px; height:52px; display:grid; place-items:center; font-size:20px; color:var(--brand)}
.qty button:hover{background:var(--sage-50)}
.qty input{
  width:48px; height:52px; text-align:center; border:0; outline:none;
  font-size:16px; font-weight:700; -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buybar .btn{flex:1; min-width:200px; height:52px; padding:0 28px}
.wish{
  width:52px; height:52px; border:1.5px solid var(--line); border-radius:var(--radius);
  display:grid; place-items:center; color:var(--ink-soft); transition:all .16s;
}
.wish:hover{border-color:var(--sale); color:var(--sale)}
.wish.on{color:var(--sale); border-color:var(--sale)}

.notice{display:flex; gap:16px; margin-bottom:26px; align-items:flex-start}
.notice-icon{
  width:46px; height:46px; background:var(--brand); color:#fff; border-radius:6px;
  display:grid; place-items:center; flex-shrink:0;
}
.notice p{font-size:14.5px; color:var(--ink-soft); margin:0}
.notice b{color:var(--ink)}

.pdp-facts{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:9px}
.pdp-facts li{display:flex; gap:10px; font-size:15px; color:var(--ink-soft)}
.pdp-facts svg{color:var(--brand); flex-shrink:0; margin-top:4px}
.pdp-facts b{color:var(--ink)}
.pdp-ship{font-size:15px; color:var(--ink-soft); margin-bottom:14px}
.pdp-sku{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}

.infobox{
  display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:30px;
}
.infobox svg{color:var(--brand); flex-shrink:0; margin-top:2px}
.infobox b{display:block; margin-bottom:4px; color:var(--ink)}
.infobox p{font-size:14.5px; color:var(--ink-soft); margin:0}
.infobox a{color:var(--brand); font-weight:700; text-decoration:underline}

/* accordéons */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 0; font-size:16px; font-weight:800; color:var(--ink); text-align:left;
}
.acc-sign{font-size:22px; color:var(--brand); font-weight:400; line-height:1}
.acc-panel{display:none; padding:0 0 26px}
.acc-item.open .acc-panel{display:block}
.acc-panel h3{font-size:clamp(22px,3vw,30px); margin-bottom:16px}
.acc-panel p{font-size:15.5px; color:var(--ink-soft)}
.acc-clamp{position:relative; max-height:150px; overflow:hidden}
.acc-clamp::after{
  content:''; position:absolute; inset:auto 0 0 0; height:70px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);
}
.acc-clamp.expanded{max-height:none}
.acc-clamp.expanded::after{display:none}
.read-more{margin-top:12px; font-size:15px; text-decoration:underline; color:var(--ink); font-weight:600}
.read-more:hover{color:var(--brand)}

.spec-table{width:100%; border-collapse:collapse; font-size:15px}
.spec-table th,.spec-table td{border:1px solid var(--line); padding:14px 16px; text-align:left}
.spec-table th{background:var(--surface); font-weight:700; color:var(--ink); width:42%}
.spec-table td{color:var(--ink-soft)}

/* barre achat collante */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(22,35,43,.08);
  transform:translateY(102%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.stickybar.show{transform:translateY(0)}
.stickybar-in{
  max-width:var(--wrap); margin:0 auto; padding:12px var(--pad);
  display:flex; align-items:center; gap:16px;
}
.stickybar-name{font-size:15.5px; font-weight:800; color:var(--ink); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stickybar .prices{flex-shrink:0}
.stickybar .qty button{height:44px; width:38px}
.stickybar .qty input{height:44px; width:42px}
.stickybar .btn{height:44px; padding:0 26px; font-size:14.5px; white-space:nowrap}
.stickybar-hide-sm{display:none}

/* bandeau "pourquoi nous" sombre */
.whyband{
  background:linear-gradient(105deg,var(--brand-900) 0%,var(--brand) 60%,var(--brand-500) 100%);
  color:#fff; padding:60px 0;
}
.whyband .trust-grid{text-align:center}
.whyband .trust-item svg{color:#fff}
.whyband .trust-item h3{color:#fff; font-size:16.5px}
.whyband .trust-item p{color:rgba(255,255,255,.88); font-size:14px}

.section-label{
  font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); margin-bottom:22px;
}

/* ---------- 21. Page « pourquoi nous » ---------- */
.mission{text-align:center; padding:70px 0 40px}
.mission-statement{font-size:clamp(19px,2.7vw,26px); line-height:1.4; color:var(--ink); margin-bottom:26px}
.mission-statement b{color:var(--brand)}
.split{display:grid; gap:0; margin:30px 0}
.split-img{min-height:280px; background-size:cover; background-position:center}
.split-panel{background:var(--sage-100); padding:40px 34px; display:grid; align-content:center; gap:22px}
.split-panel p{font-size:17px; color:var(--brand); margin:0; font-weight:500}
.reveal-title{
  font-size:clamp(38px,9vw,86px); font-weight:800; text-align:center;
  line-height:1.05; letter-spacing:-.03em; padding:60px 0; color:#CFD5D6;
}
.reveal-title .w{transition:color .3s}
.reveal-title .w.on{color:var(--brand)}
.prose{max-width:820px; margin:0 auto; text-align:center}
.prose h3{font-size:17px; margin:34px 0 12px}
.prose p{font-size:15.5px; color:var(--ink-soft)}
.prose .big{font-size:clamp(17px,2.3vw,21px); color:var(--ink); line-height:1.5}
.prose .big b{color:var(--brand)}

/* ---------- 22. Contact ---------- */
.contact-cols{display:grid; gap:36px; text-align:center; padding:20px 0 50px}
.contact-col h3{font-size:19px; margin-bottom:14px}
.contact-col p{font-size:15px; color:var(--ink-soft)}
.contact-col a{color:var(--brand); font-weight:700}
.contact-col a:hover{text-decoration:underline}
.map{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.map iframe{width:100%; height:420px; border:0; display:block}

/* formulaire */
.form-grid{display:grid; gap:16px}
.field label{display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; font-size:15.5px; outline:none; background:#fff;
  transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand)}
.field textarea{min-height:130px; resize:vertical}
.field .err{color:var(--sale); font-size:13px; margin-top:6px; display:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--sale)}
.field.invalid .err{display:block}
.form-ok{
  display:none; background:var(--sage-100); color:var(--brand); border-radius:var(--radius);
  padding:16px 18px; font-size:15px; font-weight:600; margin-bottom:18px;
}
.form-ok.show{display:block}

/* ---------- 23. Wholesale / éditorial ---------- */
.article{max-width:860px; margin:0 auto}
.article h2{font-size:clamp(24px,3.4vw,34px); margin:44px 0 16px}
.article h3{font-size:20px; margin:30px 0 12px}
.article p{font-size:16px; color:var(--ink-soft)}
.article ul{padding-left:22px; margin:0 0 18px}
.article li{font-size:16px; color:var(--ink-soft); margin-bottom:9px}
.table-scroll{overflow-x:auto; margin:22px 0 30px; border-radius:var(--radius); border:1px solid var(--line)}
.table-scroll table{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
.table-scroll th,.table-scroll td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line)}
.table-scroll th{background:var(--surface); font-weight:800; color:var(--ink); font-size:14.5px}
.table-scroll td{color:var(--ink-soft)}
.table-scroll tr:last-child td{border-bottom:0}
.table-scroll a{color:var(--brand); font-weight:700}
.table-scroll a:hover{text-decoration:underline}

/* ---------- 24. Affiliation ---------- */
.aff-head{padding:60px 0 40px}
.aff-head h1{font-size:clamp(30px,5vw,46px); margin-bottom:18px}
.aff-btns{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 34px}
.aff-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.aff-stat{border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.aff-stat b{display:block; font-size:24px; font-weight:800; color:var(--brand); margin-bottom:8px}
.aff-stat span{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.steps{display:grid; gap:18px; margin-top:26px}
.step{border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.step-num{
  width:38px; height:38px; border-radius:50%; background:var(--sage-100); color:var(--brand);
  display:grid; place-items:center; font-weight:800; margin-bottom:16px;
}
.step h3{font-size:17.5px; margin-bottom:9px}
.step p{font-size:14.5px; color:var(--ink-soft); margin:0}

/* ---------- 25. Panier / commande ---------- */
.cart-layout{display:grid; gap:34px; align-items:start; padding:20px 0 60px}
.cart-table{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.cart-row{display:flex; gap:16px; padding:20px; border-bottom:1px solid var(--line); align-items:center}
.cart-row:last-child{border-bottom:0}
.cart-row img{width:92px; height:92px; object-fit:cover; border-radius:8px; background:var(--card-img); flex-shrink:0}
.cart-row-main{flex:1; min-width:0}
.cart-row-main b{font-size:16px; display:block; margin-bottom:3px}
.cart-row-main small{color:var(--muted); font-size:13px}
.cart-row-right{text-align:right; flex-shrink:0}
.cart-row-right .price{font-size:17px; display:block; margin-bottom:8px}
.summary{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--surface)}
.summary h3{font-size:19px; margin-bottom:20px}
.summary-line{display:flex; justify-content:space-between; font-size:15px; color:var(--ink-soft); margin-bottom:12px}
.summary-total{
  display:flex; justify-content:space-between; font-size:20px; font-weight:800;
  color:var(--brand); border-top:1px solid var(--line); padding-top:16px; margin-top:16px;
}
.demo-checkout{
  background:#FFF4D6; border:1px solid #F0DFA8; border-radius:var(--radius);
  padding:16px 18px; font-size:14px; color:#6B4E00; margin-top:18px;
}

/* ---------- 26. Responsive ---------- */
@media (min-width:640px){
  .grid-produits{gap:24px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .contact-cols{grid-template-columns:repeat(3,1fr)}
  .aff-stats{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .stickybar-hide-sm{display:flex}
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr 1fr; gap:56px}
  .hero{padding:70px 0 92px}
  .trust-grid{grid-template-columns:repeat(4,1fr)}
  .grid-produits{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1.25fr 1.4fr; gap:56px}
  .split{grid-template-columns:1fr 1fr}
  .pdp-layout{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
  .pdp-media{position:sticky; top:104px}
  .cart-layout{grid-template-columns:1.6fr 1fr}
}
@media (min-width:1160px){
  .grid-produits{grid-template-columns:repeat(4,1fr)}
}