/* =========================================================
   GRATOS — Design system (Orange / Blanc / Noir) — Mobile-first
   Zéro dépendance. Fichier unique, structuré, sans doublons.
   ========================================================= */
:root{
  --orange:#FF6A00;
  --black:#000000;
  --white:#FFFFFF;

  --text:#0b0b0b;
  --muted:rgba(0,0,0,.60);
  --border:rgba(0,0,0,.12);
  --bg:#fff;

  --radius-sm:10px;
  --radius:12px;
  --radius-lg:16px;

  --shadow-sm:0 4px 14px rgba(0,0,0,.06);
  --shadow-md:0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:0 14px 48px rgba(0,0,0,.10);
}

/* =============== Reset/Base =============== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  min-height:100dvh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.page-wrap{flex:1 0 auto;padding:16px 0}

/* Utils */
.hidden{display:none!important}
.only-mobile{display:none}
.only-desktop{display:flex}
@media (max-width:991px){ .only-mobile{display:flex} .only-desktop{display:none} }
.muted{color:var(--muted)}
.badge{
  display:inline-block;min-width:18px;padding:0 6px;text-align:center;
  background:var(--orange);color:#fff;border-radius:999px;font-size:11px;line-height:18px
}

/* =============== Boutons =============== */
.btn{
  --bg:var(--white);--fg:var(--black);--bd:var(--border);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  border-radius:var(--radius);padding:10px 14px;font-weight:800;cursor:pointer
}
.btn:hover{filter:brightness(.97);text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.tiny{padding:8px 10px;border-radius:10px}
.btn.ghost{--bg:#fff;--fg:var(--black);--bd:var(--border)}
.btn.btn-orange{--bg:var(--orange);--fg:#fff;--bd:var(--orange)}
.btn-cash{--bg:#111;--fg:#fff;--bd:#111}
.btn-molo{--bg:#fff;--fg:#000;--bd:var(--orange);border-style:dashed;border-width:2px}
.btn-credit{--bg:#fff;--fg:#000;--bd:rgba(0,0,0,.18)}

/* =============== Header =============== */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--border);box-shadow:0 6px 24px rgba(0,0,0,.05)
}
.hdr-top{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;min-height:68px}
.hdr-burger{
  width:44px;height:44px;border-radius:var(--radius);background:#fff;
  border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px
}
.hdr-burger span{display:block;width:20px;height:2px;background:#000}
.hdr-logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.4px}
.logo-mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--orange);color:#fff;font-weight:900}
.logo-text{font-size:18px}
.hdr-search{display:flex;gap:8px;align-items:center}
.hdr-search input{
  flex:1;min-width:0;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:inset 0 4px 18px rgba(0,0,0,.04)
}
.hdr-actions{display:flex;gap:12px;align-items:center}
.hdr-action{display:inline-flex;align-items:center;gap:6px}
.hdr-nav{display:flex;gap:16px;min-height:44px;align-items:center}
.nav-link{display:inline-flex;align-items:center;padding:10px 6px;border-bottom:2px solid transparent;font-weight:700}
.nav-link:hover{border-color:var(--orange);text-decoration:none}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;right:0;top:120%;min-width:220px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:8px;box-shadow:var(--shadow-lg);display:none
}
.dropdown-menu a{display:block;padding:10px 12px;border-radius:8px}
.dropdown-menu a:hover{background:rgba(0,0,0,.04);text-decoration:none}
.dropdown.open .dropdown-menu{display:block}

/* =============== Drawer (menu + catégories mobile) =============== */
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:86vw;max-width:360px;background:var(--orange);
  transform:translateX(-104%);transition:transform .25s ease;z-index:1000;color:#fff;
  border-right:1px solid rgba(0,0,0,.25);display:flex;flex-direction:column
}
.drawer.open{transform:translateX(0)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:999}
.drawer-overlay.active{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(0,0,0,.25)}
.drawer-title{font-weight:900}
.drawer-title2{font-weight:900;padding:8px 12px}
.drawer-close{background:transparent;border:1px solid rgba(255,255,255,.55);width:36px;height:36px;border-radius:8px;font-size:20px;color:#fff;cursor:pointer}
.drawer-search{display:flex;gap:8px;padding:12px;border-bottom:1px solid rgba(0,0,0,.25)}
.drawer-search input{flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(0,0,0,.25);border-radius:10px;background:#fff;color:#000}
.drawer-nav{display:flex;flex-direction:column;padding:6px 8px}
.drawer-nav a{padding:10px 8px;border-radius:8px;color:#fff}
.drawer-nav a:hover{background:rgba(255,255,255,.15);text-decoration:none}
.drawer-sep{height:1px;background:rgba(0,0,0,.25);margin:8px 0}

/* =============== Catégories (accordéon commun) =============== */
.cat-tree ul{list-style:none;margin:0;padding:0}
.cat-tree li{position:relative;margin:4px 0}
.cat-tree li > a{
  display:block;padding:10px 40px 10px 12px;border:1px solid rgba(0,0,0,.20);
  border-radius:10px;background:rgba(255,255,255,.12);color:#fff
}
.cat-tree li > a:hover{background:rgba(255,255,255,.18)}
.cat-expand{
  position:absolute;right:6px;top:6px;width:28px;height:28px;border:1px solid rgba(255,255,255,.45);
  border-radius:8px;background:rgba(255,255,255,.12);cursor:pointer
}
.cat-expand::before{
  content:"";display:block;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin:8px auto 0
}
.cat-tree li > ul{max-height:0;overflow:hidden;transition:max-height .25s ease;margin:6px 0 0}
.cat-tree li.open > ul{max-height:600px}
.cat-tree li.open > .cat-expand::before{transform:rotate(45deg)}

/* =============== Sidebar catégories (desktop) =============== */
.home-wrap{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
@media(min-width:1000px){ .home-wrap{grid-template-columns:260px 1fr} }
.cat-aside.desktop{
  display:none;background:var(--orange);color:#fff;border:1px solid rgba(0,0,0,.20);
  border-radius:var(--radius-lg);padding:10px
}
@media(min-width:1000px){ .cat-aside.desktop{display:block} }
.cat-aside__title{font-weight:900;margin:4px 6px 10px}

/* =============== Sections / Cards / Grids =============== */
.section{margin:18px 0}
.section__title{display:flex;align-items:center;gap:10px;margin:8px 0 14px;font-size:20px;font-weight:900}
.section__title::before{content:"";width:8px;height:22px;border-radius:6px;background:var(--orange)}
.kicker{color:var(--muted);font-size:13px}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;margin:8px 0;box-shadow:var(--shadow-sm)
}
.card.soft{padding:10px}

.grid{display:grid;gap:12px}
.grid--2{grid-template-columns:1fr}
.grid--3,.grid--4{grid-template-columns:1fr}
@media (min-width:992px){
  .grid--2{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* =============== Cartes PRODUIT (Home & listes) =============== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.product-card{
  border:1px solid var(--border);border-radius:14px;background:#fff;padding:10px;
  display:flex;flex-direction:column;gap:8px;transition:transform .18s ease, box-shadow .18s ease
}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Boîte image carrée, centrée, non recadrée — compatible avec nos pages */
.product-img-wrap{position:relative;display:grid;place-items:center;aspect-ratio:1/1;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;overflow:hidden}
.product-img-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* Compat ancien markup (thumb-wrap + .product-thumb) */
.thumb-wrap{display:block;position:relative;border-radius:12px;overflow:hidden}
.product-thumb{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px}

.noimg__ph{
  font-size:36px;opacity:.55;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1/1;background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  border:1px solid rgba(0,0,0,.06);border-radius:12px
}
.ribbon{
  position:absolute;top:10px;left:-8px;background:var(--orange);color:#fff;padding:4px 12px;
  font-weight:900;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.15)
}
.product-info{padding:2px}
.product-title{font-weight:900;display:block}
.price-row{display:flex;gap:8px;align-items:baseline;margin-top:4px}
.price{color:var(--orange);font-weight:900;font-size:1.05rem}
.price-old{color:var(--muted);text-decoration:line-through;font-size:.95rem}
.badges{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.badge.ghost{background:#f6f6f6;border:1px solid rgba(0,0,0,.08)}
.badge.ok{background:#e8fff0;border:1px solid #bfe8cc;color:#21623c}
.pay-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* =============== HERO / Bannières Flash (100% CSS) =============== */
.hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#fff}
.hero__slides{position:relative;height:220px}
@media (min-width:768px){ .hero__slides{height:280px} }
.hero__slide{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:22px;
  color:#fff;opacity:0;transform:translateX(6%);transition:opacity .35s ease, transform .35s ease
}
.hero__slide.is-active{opacity:1;transform:none}
.hero__title{font-size:28px;line-height:1.1;margin:0 0 8px;font-weight:900}
.hero__subtitle{font-size:14px;opacity:.9;margin:0 0 14px}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}

/* Variantes */
.banner--1{
  background:
    radial-gradient(1200px 300px at 10% -40%, rgba(255,255,255,.24), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #ff8c33 0%, #ff6a00 60%, #cc5500 100%);
}
.banner--2{
  background:
    radial-gradient(600px 200px at 90% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #000 0%, #111 35%, #222 50%, #000 100%);
  border-top:3px solid var(--orange);
}
.banner--3{
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 8px, rgba(0,0,0,.0) 8px 16px),
    linear-gradient(135deg, #ff6a00 0%, #ff812b 100%);
}

/* Dots */
.hero__dots{position:absolute;left:16px;bottom:12px;display:flex;gap:6px}
.hero__dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.15);cursor:pointer}
.hero__dot.is-active{background:#fff}

/* =============== Page Produit (galerie) =============== */
.product-page{display:grid;gap:16px}
@media(min-width:900px){ .product-page{grid-template-columns:1fr 1fr} }
.gallery{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px}
/* Supporte 2 systèmes: .product-hero (conteneur) et .gallery-main (img) */
.product-hero{width:100%;aspect-ratio:1/1;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;display:grid;place-items:center;overflow:hidden}
.product-hero img{max-width:100%;max-height:100%;object-fit:contain}
.gallery-main{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.06)}
.gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.gallery-thumbs img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;cursor:pointer}
.gallery-thumbs img.active{outline:2px solid var(--orange)}

/* =============== Checkout / Panier lignes =============== */
.checkout-line{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.08)}
.checkout-line:last-child{border-bottom:none}
.thumb{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.meta .name{font-weight:800}
.small{color:rgba(0,0,0,.6);font-size:.9rem}
.line-actions{display:flex;gap:6px;flex-wrap:wrap}
.checkout-total{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:2px solid rgba(0,0,0,.1);font-weight:900}
.total-num{color:var(--orange);font-size:1.1rem}

/* =============== Tables / Alertes =============== */
table{width:100%;border-collapse:separate;border-spacing:0 6px}
th,td{background:#fff;border:1px solid var(--border);padding:8px 10px}
th{background:rgba(255,106,0,.08)}
#flash-area{position:relative;margin:12px 0}
.alert{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:var(--radius);padding:10px 12px;border:1px solid var(--border);background:#fff
}
.alert.success{box-shadow:inset 0 0 0 2px rgba(255,106,0,.18)}
.alert.error{box-shadow:inset 0 0 0 2px rgba(0,0,0,.1)}
.alert.info{border-color:rgba(0,0,0,.12)}
.alert .x{background:transparent;border:none;font-size:16px;cursor:pointer}

/* =============== Footer =============== */
.site-footer{
  flex:0 0 auto;background:#000;color:#fff;
  padding:24px 0 calc(env(safe-area-inset-bottom,0px) + 18px)
}
.site-footer a{color:#fff}
.site-footer .foot-links{display:flex;gap:14px;flex-wrap:wrap}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* === Anti-crop hardening (priorité) === */
.product-thumb,
.gallery-main,
.gallery-thumbs img{
  object-fit:contain !important;
  aspect-ratio:1/1 !important;
  background:#fff !important;
  width:100% !important;
  height:auto !important;
}

/* Préf. rendu pour lazy images sur navigateurs modernes */
img[loading="lazy"]{content-visibility:auto}