/* =======================================================
   LAOTIE — stylesheet global (burger pro + zéro barres)
   ======================================================= */

:root{
  --primary:#e60012;
  --primary-600:#c4000f;
  --text:#111;
  --muted:#6b7280;
  --border:rgba(17,24,39,.12);
}

*{box-sizing:border-box}
html, body{
  margin:0; padding:0; width:100%;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;           /* anti scroll horizontal */
}
img{max-width:100%;height:auto;display:block}
a, a:visited{color:inherit;text-decoration:none}
a:hover{color:var(--primary)}
.container{max-width:1180px;margin:0 auto;padding:0 14px}

/* =======================================================
   HEADER / NAV
   ======================================================= */
.site-header{
  background:#fff;
  border-bottom:1px solid #e5e8ef;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  height:88px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:.6rem}
.brand img{height:64px;width:auto;display:block}

/* Liens nav */
.nav.desktop{display:none}
.nav a{
  color:#111; padding:10px 14px; border-radius:10px;
  font-weight:600; transition:all .2s ease;
}
.nav a:hover{color:#e60012;background:#f9f9f9}
.cart-count{
  display:inline-block; min-width:22px; text-align:center;
  padding:0 8px; border-radius:999px; background:#f7f9fc;
  border:1px solid var(--border); font-size:12px; margin-left:6px;
}

/* -------- Burger mobile (SVG only) -------- */
.burger{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;                 /* plus petit et propre */
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* supprime toute ancienne implémentation avec pseudo-éléments */
.burger::before, .burger::after, .burger span{
  display:none !important; content:none !important;
  width:0 !important; height:0 !important; background:none !important; border:0 !important;
}

.burger-ic{ width:26px; height:26px; color:#111; }
.burger-ic rect{ fill:currentColor; }

/* animation hamburger -> X */
.burger-ic .line rect{
  transition:transform .22s ease, opacity .22s ease;
  transform-origin:12px 12px;
}
.menu-open .burger-ic .line-1 rect{ transform: translateY(5px) rotate(45deg); }
.menu-open .burger-ic .line-2 rect{ opacity:0; }
.menu-open .burger-ic .line-3 rect{ transform: translateY(-5px) rotate(-45deg); }

/* Panneau mobile */
.nav-panel{display:none;background:#fff;border-top:1px solid #f0f2f6}
.menu-open .nav-panel{display:block}
.nav-panel a{
  display:block; padding:14px 18px; border-bottom:1px solid #f0f2f6;
  color:#111; font-weight:600;
}
.nav-panel a:hover{background:#f9f9f9;color:#e60012}
.nav-panel .cart-line{display:flex; align-items:center; gap:10px}

/* Bloque le scroll quand menu ouvert */
html.menu-open, body.menu-open{overflow:hidden}

@media (min-width:980px){
  .header-inner{height:95px}
  .brand img{height:85px}
  .burger{display:none}
  .nav.desktop{display:flex}
  .nav-panel{display:none !important}
}

/* =======================================================
   HERO
   ======================================================= */
.hero{margin:0;padding:0}
.hero-img{
  width:100vw; max-width:100vw; height:auto; display:block;
  margin:0 auto; border:0; border-radius:0; object-fit:cover;
}

/* =======================================================
   SECTIONS + TITRES
   ======================================================= */
.section{padding:28px 0}
.section h2{
  font-size:1.4rem; font-weight:800; color:#111; text-align:center;
  margin:28px 0 18px;
}

/* =======================================================
   LISTE PRODUITS
   ======================================================= */
.grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08)}
.card a{display:block}
.card .thumb{
  width:100%; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  background:#fff; overflow:hidden;
}
.card .thumb img{height:100%; width:auto; object-fit:contain; padding:10px}
.card .body{padding:14px 16px; text-align:center}
.card .body h3{margin:0 0 4px; font-size:1rem; font-weight:800; line-height:1.25}

/* =======================================================
   FOOTER
   ======================================================= */
.site-footer.dark{
  background:#0b0d12; color:#d9e0ea; margin-top:50px;
  border-top:1px solid #111; text-align:center; padding:20px 0 10px;
}
.site-footer.dark{width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0}
.footer-top, .footer-bottom{width:100%; box-sizing:border-box}
.footer-top{
  max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:20px;
}
.footer-brand img{
  height:45px; width:auto; display:block; margin:0 auto 8px;
  filter:invert(100%) brightness(140%);
}
.footer-contact{color:#a8b4c3; font-size:.9rem; line-height:1.4}
.footer-contact h4{color:#fff; font-size:.95rem; margin-bottom:6px; font-weight:700}
.footer-contact a{color:#fff; font-weight:600}
.footer-contact a:hover{color:var(--primary)}
.footer-payment h4{color:#fff; font-size:.95rem; margin-bottom:6px; font-weight:700}
.pay-logos{display:flex; justify-content:center; align-items:center; gap:10px}
.pay-logos img{height:24px; width:auto; background:#fff; border-radius:5px; padding:4px 6px}
.footer-bottom{border-top:1px solid #1a1f28; margin-top:10px; padding-top:8px; font-size:.85rem; color:#8e9aad}
@media (max-width:768px){
  .footer-top{flex-direction:column; gap:10px; padding:10px 0}
  .footer-brand img{height:36px; margin-bottom:4px}
  .footer-contact h4, .footer-payment h4{font-size:.9rem}
  .footer-contact p{margin:2px 0; font-size:.85rem}
  .pay-logos img{height:20px; padding:3px 5px}
  .footer-bottom{font-size:.8rem; padding:6px 0}
}

/* =======================================================
   PAGE PRODUIT (galerie responsive)
   ======================================================= */
.product-page .back-link{display:inline-block;margin-bottom:16px;color:#111;font-weight:600}
.product-page .back-link:hover{color:var(--primary)}

.product-page .product-layout{display:grid;gap:40px;align-items:start}
@media (min-width:981px){ .product-page .product-layout{grid-template-columns:540px 1fr} }
@media (max-width:980px){ .product-page .product-layout{grid-template-columns:1fr} }

/* desktop : rail vertical */
@media (min-width:981px){
  .product-page .gallery{display:grid;grid-template-columns:100px 1fr;gap:16px}
  .product-page .gallery .thumbs{display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:560px;padding-right:4px}
  .product-page .gallery .thumb{
    width:100%;aspect-ratio:1/1;border:1px solid var(--border);border-radius:12px;background:#fff;padding:4px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s;
  }
  .product-page .gallery .thumb:hover{border-color:#cfd6e0}
  .product-page .gallery .thumb.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(230,0,18,.15)}
  .product-page .gallery .thumb img{width:100%;height:100%;object-fit:contain}
  .product-page .gallery .main-img{border:1px solid #eee;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff;min-height:420px}
  .product-page .gallery .main-img img{max-width:100%;max-height:600px;object-fit:contain}
}

/* mobile : rail horizontal */
@media (max-width:980px){
  .product-page .gallery{display:grid;grid-template-columns:1fr;gap:10px}
  .product-page .gallery .main-img{order:1;border:1px solid #eee;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff;min-height:260px}
  .product-page .gallery .main-img img{max-width:100%;max-height:60vh;object-fit:contain}
  .product-page .gallery .thumbs{
    order:2;display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 6px 8px;margin:0 -6px;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  }
  .product-page .gallery .thumb{
    width:82px;height:82px;flex:0 0 auto;scroll-snap-align:start;border:1px solid var(--border);border-radius:12px;background:#fff;padding:4px;
    display:flex;align-items:center;justify-content:center;
  }
  .product-page .gallery .thumb.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(230,0,18,.15)}
  .product-page .gallery .thumb img{width:100%;height:100%;object-fit:contain}
}

.product-info h1{margin:0 0 10px;font-size:1.8rem;font-weight:800;color:#111}
.product-info .price{font-size:1.6rem;font-weight:800;color:var(--primary);margin-bottom:16px}
.product-info .desc{color:#333;line-height:1.6;margin-bottom:20px}
.buy-form{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.qty-input{width:70px;padding:6px 8px;border:1px solid #ddd;border-radius:8px}

/* bouton générique */
.btn-primary{
  background:var(--primary);color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 22px rgba(230,0,18,.28);transition:background .2s,box-shadow .2s,transform .06s;
}
.btn-primary:hover{background:var(--primary-600);box-shadow:0 12px 30px rgba(230,0,18,.4)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}


/* === Minimal fix: hide unwanted 'X' close button inside mobile menu === */
.offcanvas .btn-close,
.nav-panel .btn-close,
.nav-panel .close,
.nav-panel [aria-label="Close"],
.nav-panel .js-close {
  display: none !important;
}
/* Ensure header layout stays tidy when menu open */
.menu-open .site-header { box-shadow: 0 2px 14px rgba(0,0,0,.08); }


/* === Override: Keep burger as three bars (no morph into X) === */
.menu-open .burger-ic .line-1 rect { transform: none !important; }
.menu-open .burger-ic .line-2 rect { opacity: 1 !important; }
.menu-open .burger-ic .line-3 rect { transform: none !important; }

/* Optional: subtle active feedback without turning into X */
.menu-open .burger { box-shadow: 0 0 0 2px rgba(17,24,39,.06) inset; }