/* ============================================================
   STYLE DU MENU UNIQUE STOCKLIVE
   Charge sur : index.html, boutique.html, produit.html, panier.html
   Ce fichier est la seule source de verite pour l'apparence du menu.
   ============================================================ */

/* Barre d'urgence 2 niveaux (au-dessus de l'entete, defile au scroll) */
.promo-bar{background:var(--ink,#1B2436);color:#fff;font-family:"Manrope",system-ui,sans-serif}
.promo-headline .wrap{display:flex;align-items:center;justify-content:center;padding:12px 16px;text-align:center}
.promo-headline span{font-size:14.5px;font-weight:600;letter-spacing:.03em}
.promo-tel{display:none}
@media(max-width:900px){
  .promo-headline span{display:none}
  .promo-tel{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:15px;letter-spacing:.02em}
  .promo-tel b{color:#BFD0FF;font-weight:700}
}
.promo-strip{border-top:1px solid rgba(255,255,255,.14)}
.promo-strip .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}
.promo-strip span{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.88)}
.promo-strip span+span{border-left:1px solid rgba(255,255,255,.14)}
.promo-strip svg{width:16px;height:16px;stroke:#93B1FF;fill:none;stroke-width:1.7;flex-shrink:0}
@media(max-width:560px){
  .promo-headline span{font-size:12.5px}
  .promo-strip span{padding:7px 12px;font-size:11px;gap:6px}
  .promo-strip span:nth-child(n+3){display:none}
  .promo-strip span+span{border-left:0}
}

header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.htop{display:flex;align-items:center;gap:24px;padding:16px 0}
.burger{background:none;border:0;cursor:pointer;display:flex;padding:10px;margin:-10px;-webkit-tap-highlight-color:transparent}
.burger svg{width:26px;height:26px;stroke:var(--ink);stroke-width:1.6;fill:none}
header .brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;white-space:nowrap;line-height:1}
header .brand .brand-txt{font-family:"Bricolage Grotesque",serif;font-weight:600;font-size:25px;letter-spacing:-.01em;color:var(--ink)}
header .brand .brand-txt span{color:var(--sand)}
header .brand .brand-tag{font-family:"Manrope",system-ui,sans-serif;font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:4px}
@media(max-width:560px){header .brand .brand-tag{display:none}}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--soft,#F1F5FD);border-radius:99px;padding:12px 20px;max-width:620px}
.search svg{width:19px;height:19px;stroke:var(--ink-soft);stroke-width:1.7;fill:none;flex-shrink:0}
.search input{border:0;background:none;font-family:"Manrope",system-ui,sans-serif;font-size:15px;width:100%;outline:none;color:var(--ink)}
.search input::-webkit-search-cancel-button{cursor:pointer}
.htools{display:flex;align-items:center;gap:22px;margin-left:auto;flex-shrink:0}
.htools a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--ink-soft);white-space:nowrap}
.htools svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.5;fill:none}
.hphone{display:flex;align-items:center;gap:9px;flex-shrink:0;color:var(--ink)}
.hphone svg{width:22px;height:22px;stroke:var(--sand);fill:none;stroke-width:1.7}
.hphone .hp-txt{display:flex;flex-direction:column;line-height:1.15}
.hphone .hp-txt b{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;font-family:"Bricolage Grotesque",sans-serif}
.hphone .hp-txt small{font-size:11px;color:var(--ink-soft)}
@media(max-width:900px){.hphone .hp-txt{display:none}.hphone{padding:8px;margin:-8px;-webkit-tap-highlight-color:transparent}.hphone svg{width:24px;height:24px}}
/* Bannière déstockage (image hero) — accueil + boutique + pages catégories */
.hero-banner{display:block;width:100%;line-height:0;background:#0C1B49}
.hero-banner picture{display:block}
.hero-banner img{width:100%;height:auto;display:block}
/* Version compacte (boutique + catégories) : bande courte, recadrée sur le « -50% » */
.hero-banner.compact img{height:200px;object-fit:cover;object-position:center}
@media(max-width:640px){.hero-banner.compact img{height:140px}}
.hnav{display:flex;align-items:center;justify-content:center;gap:30px;padding:12px 0;overflow:visible}
.hnav a{font-size:14px;font-weight:500;white-space:nowrap;position:relative;padding:3px 0}
.hnav a.hot{color:var(--sand)}
.hnav a:hover{color:var(--sand)}

/* Page en cours : souligne le lien correspondant */
.hnav a.on{color:var(--sand)}
.hnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sand)}

/* MENU DÉROULANT (ordinateur)
   - petits sous-menus : s'ouvrent SOUS le lien, toujours vers la droite
   - rayons (méga-menu) : grand panneau pleine largeur sous l'entête, colonnes + photo du rayon */
.hitem{position:relative;display:flex;align-items:center}
.hnav > a,.hitem > a{transition:color .15s}
.hitem > a::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--sand);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.hitem:hover > a::before,.hitem:focus-within > a::before{transform:scaleX(1)}
.hitem:hover > a{color:var(--sand)}
.submenu{position:absolute;top:calc(100% + 12px);left:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -18px rgba(27,36,54,.28);padding:18px 22px;display:flex;gap:38px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;z-index:60}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.hitem:hover .submenu,.hitem:focus-within .submenu{opacity:1;visibility:visible;transform:none;transition-delay:.06s,.06s,0s}
.sub-col{display:flex;flex-direction:column;min-width:170px}
.sub-h{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;text-decoration:none;white-space:nowrap}
a.sub-h:hover{color:var(--sand)}
.submenu a{font-size:13.5px;font-weight:400;color:var(--ink-soft);padding:5px 0;white-space:nowrap;text-decoration:none;transition:color .15s,transform .15s}
.submenu a:not(.sub-h):not(.mm-feat):not(.sub-all):hover{color:var(--sand);transform:translateX(3px)}
.submenu .sub-h{padding:0}
.submenu a.sub-h{color:var(--ink);font-weight:700;font-size:14px}
.submenu a.sub-h:hover{color:var(--sand)}
.submenu .sub-all{display:none}
/* Méga-menu pleine largeur : accroché à l'entête (et non au lien) → jamais coupé à gauche */
@media(min-width:821px){
  .hitem.has-mega{position:static}
  .submenu.mega{left:0;right:0;top:100%;display:block;padding:0;border:0;border-top:1px solid var(--line);border-radius:0 0 22px 22px;box-shadow:0 30px 50px -24px rgba(27,36,54,.35)}
  .submenu.mega::before{top:-14px;height:14px}
  .mm-in{max-width:1240px;margin:0 auto;padding:28px 32px 30px;display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:stretch}
  .mm-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px 32px;align-content:start}
  .mm-cols .sub-col{min-width:0;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .hitem:hover .mm-cols .sub-col,.hitem:focus-within .mm-cols .sub-col{opacity:1;transform:none}
  .mm-cols .sub-col:nth-child(2){transition-delay:.03s}.mm-cols .sub-col:nth-child(3){transition-delay:.06s}
  .mm-cols .sub-col:nth-child(4){transition-delay:.09s}.mm-cols .sub-col:nth-child(n+5){transition-delay:.12s}
  .mm-cols .sub-h{display:inline-block;padding-bottom:6px;margin-bottom:6px;border-bottom:2px solid var(--soft,#F1F5FD)}
  .mm-feat{position:relative;display:block;min-height:220px;border-radius:16px;overflow:hidden;padding:0!important;background:#e9eef7}
  .mm-feat .mm-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s var(--ease)}
  .mm-feat:hover .mm-img{transform:scale(1.05)}
  .mm-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,36,54,0) 40%,rgba(27,36,54,.78) 100%)}
  .mm-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:2px;color:#fff;white-space:normal}
  .mm-cap small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
  .mm-cap b{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;font-weight:600}
  .mm-cap em{font-style:normal;font-weight:700;font-size:13.5px;margin-top:4px;color:#fff;text-decoration:underline;text-underline-offset:3px}
  .mm-in:not(:has(.mm-feat)){grid-template-columns:1fr}
}
/* Chevron d'accordéon : visible seulement sur mobile (ajouté par header.js) */
.submenu-toggle{display:none;align-items:center;justify-content:center;background:none;border:0;color:var(--ink-soft);cursor:pointer;padding:8px}

@media(max-width:820px){
  .search{display:none}
  .hnav{display:none;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:6px 28px;box-shadow:0 14px 26px rgba(0,0,0,.08);overflow-x:auto;max-height:80vh}
  .hnav.open{display:flex}
  .hnav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .hnav a.on::after{display:none}
  /* Un item à sous-menu = ligne avec le lien + le chevron ; le sous-menu se déplie dessous */
  .hitem{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
  .hitem > a{flex:1;border-bottom:0}
  .submenu-toggle{display:inline-flex}
  .hitem.open .submenu-toggle svg{transform:rotate(180deg)}
  /* Sous-menu en accordéon (plus de volet flottant) */
  .submenu,.submenu.mega{position:static;transform:none;opacity:1;visibility:visible;display:none;flex-basis:100%;flex-direction:column;gap:0;max-width:none;border:0;border-radius:0;box-shadow:none;padding:0 0 8px 12px}
  .hitem.open .submenu{display:flex}
  .submenu .sub-col{min-width:0}
  .submenu .sub-h{display:block;padding:12px 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
  .submenu a{padding:10px 0;border-bottom:1px solid var(--line)}
  .submenu a:not(.sub-h){padding-left:14px;font-size:13.5px}
  .submenu .sub-all{display:block;padding:12px 0;border-top:1px solid var(--line);color:var(--sand);font-weight:600}
  .mm-feat{display:none}
  .mm-in,.mm-cols{display:block}
  .hitem > a::before{display:none}
}
@media(min-width:821px){.burger{display:none}}
@media(max-width:560px){.htools{gap:14px}.htools a{font-size:10px}.htop{gap:12px}}