/* ═══════════════════════════════════════════════════════════════
   ONIVA SHOP V53 — Design System front-office (source unique)
   Tokens surchargés par la saison active (--ov-accent, --ov-gradient)
   Mobile First · WCAG AA · zones tactiles ≥48px · dark mode
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ov-accent:#1B5E20; --ov-accent2:#D4A017;
  --ov-gradient:linear-gradient(135deg,#1B5E20,#D4A017);
  --ov-bg:#fafbfa; --ov-surface:#ffffff; --ov-text:#191c19; --ov-muted:#5f6a62;
  --ov-line:#e3e8e4; --ov-danger:#b3261e;
  --ov-radius:14px; --ov-radius-sm:9px;
  --ov-shadow:0 1px 2px rgba(10,25,15,.06),0 6px 24px rgba(10,25,15,.07);
  --ov-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ov-dur:.2s; --ov-ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root{--ov-bg:#101311;--ov-surface:#181c19;--ov-text:#e9ede9;--ov-muted:#9aa79e;--ov-line:#262c27;
        --ov-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 28px rgba(0,0,0,.35)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ov-font);background:var(--ov-bg);color:var(--ov-text);
  font-size:15.5px;line-height:1.55;padding-bottom:76px}
img{max-width:100%;display:block}
a{color:var(--ov-accent);text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid color-mix(in srgb,var(--ov-accent) 60%,transparent);outline-offset:2px}

/* ── Barre d'information (UNE seule) ── */
.infobar{background:var(--ov-gradient);color:#fff;text-align:center;font-size:.86rem;
  padding:8px 14px;font-weight:500}
.infobar a{color:#fff;text-decoration:underline}

/* ── Header ── */
.hdr{position:sticky;top:0;z-index:40;background:var(--ov-surface);box-shadow:var(--ov-shadow)}
.hdr-in{display:flex;align-items:center;gap:10px;padding:10px 14px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:6px;font-weight:800;font-size:1.05rem;color:var(--ov-text);white-space:nowrap}
.logo span{background:var(--ov-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.hdr-search{flex:1;display:flex;min-width:0}
.hdr-search input{flex:1;min-width:0;border:1px solid var(--ov-line);border-right:none;
  border-radius:24px 0 0 24px;padding:0 16px;min-height:44px;background:var(--ov-bg);color:var(--ov-text);font:inherit}
.hdr-search button{border:1px solid var(--ov-line);border-left:none;background:var(--ov-bg);
  border-radius:0 24px 24px 0;padding:0 14px;min-height:44px}
.hdr-actions{display:flex;align-items:center;gap:6px}
.wa-hdr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#25D366;color:#fff;transition:transform var(--ov-dur) var(--ov-ease)}
.wa-hdr:active{transform:scale(.92)}
.cart-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border:none;
  border-radius:50%;background:var(--ov-accent);color:#fff;font-size:1.1rem;
  transition:transform var(--ov-dur) var(--ov-ease)}
.cart-btn:active{transform:scale(.92)}
.cart-badge{position:absolute;top:-2px;right:-2px;background:var(--ov-accent2);color:#1a1a1a;
  font-size:.68rem;font-weight:700;border-radius:999px;min-width:18px;height:18px;
  display:grid;place-items:center;padding:0 4px}

/* ── Menu categories ── */
.catnav{border-top:1px solid var(--ov-line);background:var(--ov-surface)}
.catnav-in{display:flex;overflow-x:auto;max-width:1200px;margin:0 auto;scrollbar-width:none}
.catnav-in::-webkit-scrollbar{display:none}
.catnav-item{position:relative;flex-shrink:0}
.catnav-item>a{display:block;padding:11px 13px;font-size:.88rem;font-weight:600;color:var(--ov-text);
  border-bottom:3px solid transparent;white-space:nowrap;transition:border-color var(--ov-dur)}
.catnav-item>a:hover{border-bottom-color:var(--ov-accent)}
.catnav-sub{display:none;position:absolute;left:0;top:100%;z-index:50;background:var(--ov-surface);
  border:1px solid var(--ov-line);border-radius:var(--ov-radius-sm);box-shadow:var(--ov-shadow);
  min-width:210px;padding:6px 0}
.catnav-sub a{display:block;padding:9px 16px;font-size:.86rem;color:var(--ov-text)}
.catnav-sub a:hover{background:color-mix(in srgb,var(--ov-accent) 8%,transparent)}
@media (hover:hover){.catnav-item:hover .catnav-sub{display:block}}

/* ── Layout ── */
.wrap{max-width:1200px;margin:0 auto;padding:16px 14px}
.sec-title{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 12px}
.sec-title h2{font-size:1.15rem;margin:0}
.sec-title a{font-size:.85rem;font-weight:600}

/* ── Hero ── */
.hero{background:var(--ov-gradient);border-radius:var(--ov-radius);color:#fff;
  padding:34px 22px;margin-top:14px;position:relative;overflow:hidden}
.hero h1{margin:0 0 6px;font-size:clamp(1.3rem,4.5vw,2rem);line-height:1.2}
.hero p{margin:0 0 16px;opacity:.94;max-width:520px}
.hero .btn-light{background:#fff;color:var(--ov-accent);border-radius:24px;padding:12px 22px;
  font-weight:700;display:inline-block;min-height:48px;line-height:24px}
.season-chip{display:inline-block;background:rgba(255,255,255,.22);border-radius:999px;
  padding:4px 14px;font-size:.8rem;font-weight:600;margin-bottom:10px;backdrop-filter:blur(4px)}

/* ── Grilles produits (compactes, jamais interminables) ── */
.grid-prod{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.grid-prod{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.grid-prod{grid-template-columns:repeat(4,1fr)}}
.card-p{background:var(--ov-surface);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform var(--ov-dur) var(--ov-ease),box-shadow var(--ov-dur)}
.card-p:hover{transform:translateY(-3px);box-shadow:var(--ov-shadow)}
.card-p .ph{aspect-ratio:1;background:color-mix(in srgb,var(--ov-accent) 6%,var(--ov-bg));
  display:grid;place-items:center;font-size:2rem;overflow:hidden}
.card-p .ph img{width:100%;height:100%;object-fit:cover}
.card-p .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-p .nm{font-size:.88rem;font-weight:600;color:var(--ov-text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.card-p .pr{font-weight:800;color:var(--ov-accent);font-size:.98rem}
.card-p .pr s{color:var(--ov-muted);font-weight:400;font-size:.8rem;margin-left:6px}
.card-p .add{margin-top:auto;border:none;background:var(--ov-accent);color:#fff;border-radius:22px;
  min-height:42px;font-weight:600;font-size:.86rem;transition:transform var(--ov-dur) var(--ov-ease)}
.card-p .add:active{transform:scale(.96)}
.card-p .oos{margin-top:auto;text-align:center;color:var(--ov-muted);font-size:.82rem;padding:10px 0}

/* ── Grille categories ── */
.grid-cat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:640px){.grid-cat{grid-template-columns:repeat(4,1fr)}}
.card-c{background:var(--ov-surface);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
  padding:18px 12px;text-align:center;color:var(--ov-text);font-weight:600;font-size:.88rem;
  transition:transform var(--ov-dur) var(--ov-ease),box-shadow var(--ov-dur)}
.card-c:hover{transform:translateY(-3px);box-shadow:var(--ov-shadow)}
.card-c .em{font-size:1.8rem;display:block;margin-bottom:6px}

/* ── Fiche produit ── */
.pfiche{display:grid;gap:20px;margin-top:14px}
@media (min-width:860px){.pfiche{grid-template-columns:1fr 1fr}}
.pfiche .gal{background:var(--ov-surface);border:1px solid var(--ov-line);
  border-radius:var(--ov-radius);overflow:hidden}
.pfiche .gal img{width:100%;aspect-ratio:1;object-fit:cover}
.pfiche h1{font-size:1.35rem;margin:.1em 0}
.pprice{font-size:1.5rem;font-weight:800;color:var(--ov-accent)}
.pprice s{font-size:1rem;color:var(--ov-muted);font-weight:400;margin-left:10px}
.pstock{font-size:.85rem;font-weight:600}
.pstock.in{color:#1b5e20}.pstock.out{color:var(--ov-danger)}
.pactions{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--ov-accent);
  color:#fff;border:none;border-radius:26px;min-height:50px;padding:0 26px;font-weight:700;
  font-size:1rem;transition:transform var(--ov-dur) var(--ov-ease)}
.btn-primary:active{transform:scale(.97)}
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#25D366;
  color:#fff;border-radius:26px;min-height:50px;padding:0 26px;font-weight:700;font-size:1rem}
.breadcrumb{font-size:.82rem;color:var(--ov-muted);margin:12px 0 0}
.breadcrumb a{color:var(--ov-muted)}

/* ── Chips / voir plus ── */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;background:var(--ov-surface);border:1px solid var(--ov-line);border-radius:999px;
  padding:9px 16px;font-size:.85rem;font-weight:600;color:var(--ov-text);min-height:40px;display:inline-flex;align-items:center}
.chip.on{background:var(--ov-accent);color:#fff;border-color:var(--ov-accent)}
.more-wrap{text-align:center;margin:18px 0}
.btn-more{background:var(--ov-surface);border:1px solid var(--ov-line);border-radius:24px;
  min-height:46px;padding:0 28px;font-weight:600;color:var(--ov-text)}

/* ── Panier flottant (Politique du Panier) ── */
.cart-overlay{position:fixed;inset:0;background:rgba(10,15,12,.45);z-index:60;
  opacity:0;transition:opacity var(--ov-dur)}
.cart-overlay.show{opacity:1}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,94vw);z-index:61;
  background:var(--ov-surface);box-shadow:-8px 0 30px rgba(0,0,0,.18);
  transform:translateX(105%);transition:transform .28s var(--ov-ease);
  display:flex;flex-direction:column;will-change:transform}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--ov-line)}
.cart-head button{border:none;background:none;font-size:1.2rem;width:44px;height:44px;color:var(--ov-text)}
.cart-items{flex:1;overflow-y:auto;padding:10px 16px}
.cart-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ov-line)}
.cart-line .i{flex:1;min-width:0}
.cart-line .n{font-size:.87rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-line .p{font-size:.83rem;color:var(--ov-accent);font-weight:700}
.cart-qty{display:flex;align-items:center;gap:2px}
.cart-qty button{width:34px;height:34px;border:1px solid var(--ov-line);background:var(--ov-bg);
  border-radius:8px;font-weight:700;color:var(--ov-text)}
.cart-qty span{min-width:26px;text-align:center;font-weight:600}
.cart-empty{text-align:center;color:var(--ov-muted);padding:40px 10px}
.cart-foot{padding:14px 16px;border-top:1px solid var(--ov-line);display:flex;flex-direction:column;gap:10px}
.cart-total{font-size:1rem}

/* ── WhatsApp flottant (jamais masque) ── */
.wa-float{position:fixed;left:14px;bottom:14px;z-index:59;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 4px 16px rgba(37,211,102,.45);
  transition:transform var(--ov-dur) var(--ov-ease)}
.wa-float:active{transform:scale(.92)}

/* ── Tunnel de commande ── */
.tunnel{max-width:680px;margin:0 auto}
.tcard{background:var(--ov-surface);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
  padding:18px;margin-bottom:14px}
.tcard h2{font-size:1.02rem;margin:0 0 12px}
.tunnel label{display:block;font-size:.85rem;color:var(--ov-muted);margin:10px 0 4px}
.tunnel input,.tunnel textarea{width:100%;border:1px solid var(--ov-line);border-radius:10px;
  padding:12px 14px;min-height:48px;background:var(--ov-bg);color:var(--ov-text);font:inherit}
.tunnel input:focus{outline:none;border-color:var(--ov-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ov-accent) 18%,transparent)}
.qsuggest{position:relative}
.qsuggest-list{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--ov-surface);
  border:1px solid var(--ov-line);border-radius:10px;box-shadow:var(--ov-shadow);
  max-height:260px;overflow-y:auto}
.qsuggest-list button{display:block;width:100%;text-align:left;border:none;background:none;
  padding:12px 14px;color:var(--ov-text);min-height:46px}
.qsuggest-list button:hover{background:color-mix(in srgb,var(--ov-accent) 8%,transparent)}
.qsuggest-list .c{color:var(--ov-muted);font-size:.8rem}
.quote-box{background:color-mix(in srgb,var(--ov-accent) 8%,var(--ov-surface));
  border:1px solid color-mix(in srgb,var(--ov-accent) 30%,var(--ov-line));
  border-radius:10px;padding:12px 14px;font-size:.9rem;margin-top:10px}
.trecap td{padding:6px 0;font-size:.9rem}
.trecap .tt{font-weight:800;font-size:1.05rem;color:var(--ov-accent)}

/* ── Footer ── */
.ftr{background:var(--ov-surface);border-top:1px solid var(--ov-line);margin-top:36px}
.ftr-in{max-width:1200px;margin:0 auto;padding:22px 14px;display:grid;gap:14px;
  font-size:.86rem;color:var(--ov-muted)}
@media (min-width:720px){.ftr-in{grid-template-columns:1fr 1fr 1fr}}

/* ── Effets saison (canvas plein ecran, GPU, discret) ── */
#ovSeasonFx{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5}

/* ── Divers ── */
.empty-msg{text-align:center;color:var(--ov-muted);padding:44px 14px}
.skel{animation:ovpulse 1.2s infinite}
@keyframes ovpulse{50%{opacity:.45}}
.fade-in{animation:ovfade .45s var(--ov-ease) both}
@keyframes ovfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto}
  #ovSeasonFx{display:none}
}