:root{
  --bg:#0b132b; --card:#1c2541; --muted:#3a506b;
  --accent:#2e7d32; --accent-2:#1b4d1b;
  --text:#e6eef8; --text-muted:#b7c4d4;
  --danger:#c62828; --danger-2:#8b0000;
  --shadow:0 8px 30px rgba(0,0,0,.25);
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0; padding:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: linear-gradient(180deg, #0b132b 0%, #0f1b3d 100%);
  color: var(--text);
}
nav{ position:sticky; top:0; z-index:50; background: rgba(12,18,43,.8);
  backdrop-filter: blur(8px); display:flex; gap:.8rem; padding:.8rem 1.2rem;
  align-items:center; border-bottom:1px solid rgba(255,255,255,.06);}
nav a{ color:var(--text); text-decoration:none; font-weight:600; padding:.45rem .7rem;
  border-radius:10px; transition:.2s ease;}
nav a:hover, nav a[aria-current="page"]{ background: rgba(255,255,255,.08); }

header{
  text-align:center; padding:5rem 1rem 4rem;
  background:
    radial-gradient(1200px 500px at 50% -50%, rgba(46,125,50,.35), transparent),
    url('https://images.unsplash.com/photo-1511689660979-10d4bf06d0d5?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: inset 0 -140px 120px -120px rgba(0,0,0,.6);
}
.title{ font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:.5px; margin:0 0 .6rem;
  text-shadow:0 6px 30px rgba(0,0,0,.55);}
.subtitle{ color:var(--text-muted); margin:0; }

/* APRES — ne s’applique qu’à la page produits */
.products main{ display:grid; grid-template-columns: 1fr 380px; gap:2rem;
  max-width:1200px; margin:-2rem auto 3rem; padding:0 1rem; }
  /* Layout neutre pour les autres pages */
.home main, .contact main{
  display:block;
  max-width:1100px;
  margin:-2rem auto 3rem;
  padding:0 1rem;
}



/* Produits */
#products-list{ display:grid; gap:1.2rem; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }
.product-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:clip; transition: transform .15s ease, box-shadow .15s ease;
  border:1px solid rgba(255,255,255,.06);}
.product-card:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.35); }
.product-card .img-wrap{ position:relative; height:160px; overflow:hidden; }
.product-card img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.chip{ position:absolute; top:10px; left:10px; background:rgba(46,125,50,.9); color:#fff;
  font-size:.8rem; font-weight:700; padding:.2rem .5rem; border-radius:999px; box-shadow:0 4px 12px rgba(46,125,50,.4); }
.product-name{ font-weight:800; font-size:1.05rem; padding:.9rem .9rem .2rem; }
.product-price{ color:#8be28a; font-weight:700; padding:0 .9rem .8rem; }
.add-to-cart-btn{ margin:.2rem .9rem 1rem; width:calc(100% - 1.8rem); background:var(--accent); border:none; color:#fff;
  font-weight:800; padding:.65rem .9rem; border-radius:12px; cursor:pointer; transition:background .15s ease; }
.add-to-cart-btn:hover{ background:var(--accent-2); }

/* Panier */
#cart{ position:sticky; top:16px; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem 1.2rem 1.2rem; border:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; max-height:calc(100vh - 32px); }
#cart h3{ margin:.2rem 0 0; font-size:1.2rem; font-weight:900; border-bottom:1px dashed rgba(255,255,255,.1); padding-bottom:.6rem; }
.cart-list{ list-style:none; padding:0; margin:1rem 0; overflow:auto; flex:1; }
.cart-item{ display:grid; grid-template-columns:1fr 82px 80px 26px; gap:.6rem; align-items:center;
  padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06);}
.cart-item-name{ font-weight:600; }
.cart-item-qty{ width:100%; text-align:center; border-radius:10px; padding:.45rem;
  border:1px solid rgba(255,255,255,.15); background:#0f1834; color:var(--text); }
.cart-item-price{ font-weight:800; color:#8be28a; text-align:right; }
.cart-item-remove{ background:transparent; border:none; color:#c62828; font-size:1.3rem; cursor:pointer; }
#total-price{ font-weight:900; font-size:1.15rem; color:#9bf39a; text-align:right; margin:.6rem 0 1rem; }

/* Formulaire */
form label{ display:block; font-weight:700; margin-bottom:.25rem; }
form input, form textarea{ width:100%; padding:.65rem .7rem; margin-bottom:.8rem;
  border-radius:12px; border:1px solid rgba(255,255,255,.14); background:#0f1834; color:var(--text); font-size:1rem; }
form textarea{ resize:vertical; min-height:80px; }
.visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
form button[type="submit"]{ width:100%; background:linear-gradient(135deg, var(--accent), #3fae46);
  border:none; color:#fff; padding:.8rem 1rem; font-weight:900; font-size:1.05rem; border-radius:14px; cursor:pointer;
  transition: filter .15s ease, transform .05s ease; }
form button[type="submit"]:disabled{ filter:grayscale(.6) brightness(.8); cursor:not-allowed; }
form button[type="submit"]:active{ transform:translateY(1px); }
#form-message{ min-height:24px; font-weight:800; margin:.6rem 0 0; }

/* Modal */
.qty-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:100; }
.qty-modal.active{ display:flex; }
.qty-modal > div{ width:340px; max-width:92vw; background:var(--card); color:var(--text); border-radius:18px; padding:1.2rem 1.2rem 1rem;
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.08); text-align:center; }
#modal-qty{ width:80px; font-size:1.2rem; text-align:center; margin:.8rem 0 1.2rem;
  border-radius:12px; border:1px solid rgba(255,255,255,.14); background:#0f1834; color:var(--text); }
#modal-add-btn, #modal-close-btn{ background:#2e7d32; color:#fff; border:none; padding:.6rem 1.2rem; margin:.2rem .3rem; font-weight:800; border-radius:12px; cursor:pointer; }
#modal-close-btn{ background:#c62828; }

/* Toast */
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#0f1834; color:var(--text); padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow); display:none; }
.toast.show{ display:block; animation: fade 2.6s ease both; }
@keyframes fade{
  0%{ opacity:0; transform:translateX(-50%) translateY(10px); }
  10%{ opacity:1; transform:translateX(-50%); }
  90%{ opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(10px); }
}

/* Responsive */
@media (max-width:980px){
  main{ grid-template-columns:1fr; }
  #cart{ position:relative; top:auto; max-height:none; }
}


/* =========================
   Navbar 2.0 (responsive)
   ========================= */
.site-nav{ position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.8rem 1.2rem; background: rgba(12,18,43,.65); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06); }
.site-nav .brand{ font-weight:900; letter-spacing:.3px; text-decoration:none; color:var(--text); display:flex; align-items:center; gap:.5rem; }
.brand-mark{ padding:.32rem .6rem; border-radius:12px; background: linear-gradient(135deg, var(--accent), #3fae46); box-shadow: 0 8px 26px rgba(46,125,50,.35); color:#fff; }
.site-nav .links{ display:flex; gap:.3rem; align-items:center; }
.site-nav .links a{ position:relative; color:var(--text); text-decoration:none; font-weight:700; padding:.5rem .8rem; border-radius:10px; transition: transform .15s ease, background .15s ease, color .15s ease; }
.site-nav .links a:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.site-nav .links a.active,[aria-current="page"]{ background: rgba(255,255,255,.08); }
.site-nav .links a::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, #9bf39a, var(--accent)); transition:transform .2s ease; opacity:.9; }
.site-nav .links a:hover::after, .site-nav .links a.active::after, .site-nav .links [aria-current="page"]::after{ transform:scaleX(1); }

/* Hamburger */
.nav-toggle{ display:none; position:relative; width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span{ position:absolute; width:20px; height:2px; background:var(--text); border-radius:2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle span:nth-child(1){ transform:translateY(-6px); }
.nav-toggle span:nth-child(2){ }
.nav-toggle span:nth-child(3){ transform:translateY(6px); }
.site-nav.open .nav-toggle span:nth-child(1){ transform: rotate(45deg); }
.site-nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.site-nav.open .nav-toggle span:nth-child(3){ transform: rotate(-45deg); }

/* Mobile menu */
@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .site-nav{ padding:.7rem .9rem; }
  .site-nav .links{ position:fixed; inset:auto 0 0 0; display:grid; gap:.2rem; background: rgba(12,18,43,.9); backdrop-filter: blur(10px); padding: .6rem .8rem calc(env(safe-area-inset-bottom) + .8rem); transform: translateY(100%); transition: transform .24s ease; border-top:1px solid rgba(255,255,255,.08); }
  .site-nav.open .links{ transform: translateY(0); }
  .site-nav .links a{ padding: .9rem 1rem; font-size:1.05rem; }
}

/* =============
   Hero (home)
   ============= */
.hero{ position:relative; text-align:center; padding:6rem 1rem 5rem; background:
  radial-gradient(1200px 500px at 50% -50%, rgba(46,125,50,.35), transparent),
  url('https://images.unsplash.com/photo-1511689660979-10d4bf06d0d5?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; box-shadow: inset 0 -160px 140px -140px rgba(0,0,0,.6); }
.hero .accent{ color:#9bf39a; text-shadow:0 6px 30px rgba(0,0,0,.55); }
.hero .cta-row{ margin-top:1.2rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.btn-primary{ display:inline-block; background:linear-gradient(135deg, var(--accent), #3fae46); color:#fff; font-weight:900; padding:.8rem 1rem; border-radius:14px; text-decoration:none; box-shadow:0 10px 30px rgba(46,125,50,.35); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ display:inline-block; color:var(--text); font-weight:800; padding:.8rem 1rem; border-radius:14px; text-decoration:none; border:1px solid rgba(255,255,255,.14); background:rgba(15,24,52,.6); }

.hero-orb{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.35; }
.orb-1{ width:240px; height:240px; left:6%; top:18%; background:#2e7d32; }
.orb-2{ width:300px; height:300px; right:8%; top:30%; background:#3fae46; }

/* Feature cards */
.features{ max-width:1100px; margin:-2rem auto 2rem; padding:0 1rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06); }
.feature{ padding:1.2rem; text-align:center; }
.feature .icon{ font-size:1.6rem; margin-bottom:.4rem; }

/* Home grid panels */
.home-grid{ max-width:1100px; margin:0 auto 3rem; padding:0 1rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.panel{ padding:1.1rem; }
.tilt{ transform: perspective(600px) rotateX(0) rotateY(0); transition: transform .2s ease; }
.tilt:hover{ transform: perspective(600px) rotateX(2deg) rotateY(2deg) translateY(-2px); }
.link-arrow{ display:inline-block; margin-top:.4rem; font-weight:800; color:#9bf39a; text-decoration:none; }

/* Contact */
.contact-hero{ text-align:center; padding:5rem 1rem 3rem; background:
  radial-gradient(1200px 500px at 50% -50%, rgba(46,125,50,.35), transparent); }
.contact-main{ max-width:800px; margin:0 auto 3rem; padding:0 1rem; }
.contact-card{ padding:1rem 1.2rem; }
.contact-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.contact-row a{ color:#9bf39a; text-decoration:none; font-weight:800; }
.socials{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Footer */
.site-footer{ max-width:1100px; margin:0 auto 3rem; padding:0 1rem; text-align:center; color:var(--text-muted); }

/* Fade-in on scroll */
.fade-in{ opacity:0; transform: translateY(12px); }
.fade-in.visible{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }

/* Hero layers fix: s'assurer que le texte passe au-dessus des orbes */
.hero{ position:relative; }
.hero-inner{ position:relative; z-index:2; }
.hero-orb{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.35; z-index:1; }

/* Fade-in — visible par défaut (progressive enhancement) */
.fade-in{ /* visible si JS absent */ opacity:1; transform:none; }
.js .fade-in{ opacity:0; transform: translateY(12px); }
.js .fade-in.visible{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }

/* ====== Hover effects (Accueil) ====== */
.feature.card, .panel.card{
  position: relative;
  overflow: clip; /* évite les débordements du glow */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Glow dégradé discret au survol */
.feature.card::before, .panel.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: var(--radius);
  background: conic-gradient(from 180deg, rgba(155,243,154,.0), rgba(155,243,154,.35), rgba(63,174,70,.35), rgba(155,243,154,.0));
  filter: blur(14px);
  opacity:0; transition: opacity .18s ease;
  pointer-events:none;
}

/* état au repos */
.feature.card, .panel.card{
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.06);
}

/* survol */
.feature.card:hover, .panel.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.12);
}
.feature.card:hover::before, .panel.card:hover::before{ opacity:.8; }

/* petit mouvement de l’icône/emoji */
.feature.card .icon{ transition: transform .18s ease; will-change: transform; }
.feature.card:hover .icon{ transform: translateY(-2px); }

/* compatibilité avec le tilt existant : on cumule proprement */
.tilt{ will-change: transform; }
.tilt:hover{ transform: perspective(600px) rotateX(2deg) rotateY(2deg) translateY(-2px); }
/* quand on est sur panel + tilt, ajoute 2px d’élévation pour l’effet combiné */
.panel.card.tilt:hover{ transform: perspective(600px) rotateX(2deg) rotateY(2deg) translateY(-4px); }

/* Réduction des animations si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce){
  .feature.card, .panel.card, .feature.card .icon, .tilt{
    transition: none !important;
    transform: none !important;
  }
  .feature.card::before, .panel.card::before{ opacity:0 !important; }
}


/* ===========================
   PRODUITS — Layout & Panier
   =========================== */

/* Desktop : cart fixe sur la droite, contenu à gauche avec espace réservé */
@media (min-width: 981px){
  .products main{
    display:block; /* on sort de la grille pour figer le cart */
    max-width:1200px; margin:-2rem auto 3rem; padding:0 1rem;
  }
  .products #products-list{
    /* on réserve la place du cart fixe */
    padding-right: 420px; /* 360px cart + marge */
  }
  /* APRES — top dynamique basé sur le début de <main> */
.products #cart{
  position: fixed;
  top: var(--cart-offset, 96px); /* 96px par défaut si JS ne calcule rien */
  right: max(16px, calc((100vw - 1200px)/2 + 1rem));
  width: 360px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  will-change: auto;
  contain: layout paint;
  transform: translateZ(0);
}


}



/* Mobile : bottom sheet + bouton flottant */
@media (max-width: 980px){
  .products #cart{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    transform: translateY(100%);
    transition: transform .25s ease;
    z-index: 999;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    max-height: 75vh; /* tiroir */
  }
  .products #cart.open{
    transform: translateY(0);
  }
  .cart-fab{
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 1000;
    background: linear-gradient(135deg, var(--accent), #3fae46);
    color:#fff; border:none; font-weight:900;
    padding:.9rem 1.1rem; border-radius:999px;
    box-shadow: var(--shadow);
    cursor: pointer;
  }
  .cart-fab .count{
    background:#0b132b; color:#9bf39a; font-weight:900;
    padding:.1rem .5rem; border-radius:999px; margin-left:.4rem;
  }
}

/* Note de formulaire (remplace le textarea) */
.form-note{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:.8rem .9rem;
  color: var(--text);
  font-weight:600;
}
.form-note strong{ color:#9bf39a; }

/* Optionnel : éviter le léger “tremblement” sur certains navigateurs */
#cart{ backface-visibility: hidden; }


/* Bouton de validation toujours accessible dans le panneau */
.products #order-form button[type="submit"]{
  position: sticky;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -8px 12px rgba(0,0,0,.25);
}

/* Hauteur de barre (mobile) */
:root{ --nav-h: 64px; }

.site-nav{ min-height: var(--nav-h); position: sticky; top: 0; }

/* Assure que brand + burger passent toujours au-dessus */
.site-nav .brand,
.site-nav .nav-toggle{ position: relative; z-index: 1001; }

/* Panneau mobile sous la barre (plein écran en-dessous) */
@media (max-width: 860px){
  .site-nav .links{
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    display: grid; gap: .2rem;
    background: rgba(12,18,43,.95);
    backdrop-filter: blur(10px);
    padding: .8rem 1rem calc(env(safe-area-inset-bottom) + 1rem);
    border-top: 1px solid rgba(255,255,255,.08);

    /* état fermé par défaut */
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
    z-index: 1000;
  }
  .site-nav.open .links{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .22s ease, opacity .18s ease;
  }

  /* liens plus grands au toucher */
  .site-nav .links a{ padding: 1rem; font-size: 1.05rem; }
}

/* Empêche le scroll de la page quand le menu est ouvert */
body.nav-open{ overflow: hidden; }
/* Contact — contraste renforcé */
.contact .contact-hero{
  /* gradient un peu plus présent sur mobile */
  background: radial-gradient(1200px 500px at 50% -50%, rgba(46,125,50,.55), transparent);
}
.contact .contact-card{
  border-color: rgba(255,255,255,.16);
}
.contact .contact-row strong{ color: #eaf6ec; }
.contact .contact-row a{
  color:#b8ffb6; /* plus “flashy” */
  font-weight: 900;
  text-decoration: none;
}
.contact .contact-row a:hover{ text-decoration: underline; }

/* Navbar mobile — lisibilité & contraste */
@media (max-width:860px){
  .site-nav .links{
    background: rgba(12,18,43,.98); /* un peu plus opaque */
  }
  .site-nav .links a{
    color: #f2fff2; /* plus clair */
    font-weight: 800;
  }
  .site-nav .links a.active,
  .site-nav .links [aria-current="page"]{
    background: rgba(255,255,255,.12);
  }
}

/* Bouton burger et brand plus visibles sur fonds sombres */
.site-nav .nav-toggle{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.site-nav .nav-toggle span{ background: #ffffff; }
.site-nav .brand .brand-mark{
  box-shadow: 0 10px 30px rgba(46,125,50,.55);
}

/* Meilleure accessibilité focus */
.site-nav .links a:focus-visible,
.site-nav .nav-toggle:focus-visible,
.site-nav .brand:focus-visible{
  outline: 2px solid #9bf39a;
  outline-offset: 3px;
  border-radius: 12px;
}


/* ========= NAVBAR LISIBLE PARTOUT (patch final) ========= */

/* Toujours au-dessus du contenu */
.site-nav{ z-index: 1200; }

/* Couleur de base plus opaque (évite le texte sur image) */
.site-nav{
  background: rgba(12,18,43,.92); /* plus sombre et lisible */
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Page Contact : fond encore plus net */
.contact .site-nav{
  background: #0c122b; /* plein, pas transparent */
}

/* Liens bien visibles dans la barre */
.site-nav .links a{
  color: #f6fff6; /* très clair */
  font-weight: 800;
}
.site-nav .links a:hover{
  background: rgba(255,255,255,.12);
}
.site-nav .links a.active,
.site-nav .links [aria-current="page"]{
  background: rgba(255,255,255,.16);
}

/* Brand + burger plus contrastés */
.site-nav .brand{ color:#ffffff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.site-nav .brand .brand-mark{
  color:#fff;
  box-shadow: 0 12px 34px rgba(46,125,50,.55);
}
.nav-toggle{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}
.nav-toggle span{ background:#ffffff; }

/* Panneau mobile : fond quasi plein (sous la barre) */
@media (max-width: 860px){
  .site-nav{ background: #0c122b !important; } /* force la barre elle-même */
  .site-nav .links{
    background: rgba(12,18,43,.98) !important;
  }
  .site-nav .links a{
    color:#ffffff !important;
  }
}

/* Navbar au-dessus du tiroir/overlay sur mobile */
@media (max-width: 980px){
  .site-nav{ z-index: 2000 !important; }
  .site-nav .brand, .site-nav .nav-toggle{ z-index: 2001 !important; }
}


/* ====== Base nav height ====== */
:root { --nav-h: 64px; }

/* Barre toujours visible et au-dessus */
.site-nav { position: sticky; top: 0; z-index: 2100; background: #0c122b; }

/* Brand + burger au-dessus du panneau de liens */
.site-nav .brand, .site-nav .nav-toggle { position: relative; z-index: 2101; }

/* Panneau liens mobile : sous la barre, mais au-dessus du contenu */
@media (max-width: 860px){
  .site-nav .links{
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    display: grid; gap: .2rem;
    padding: .8rem 1rem calc(env(safe-area-inset-bottom) + 1rem);
    background: rgba(12,18,43,.98);
    backdrop-filter: none; /* pas de flou sur le menu */
    border-top: 1px solid rgba(255,255,255,.12);
    transform: translateY(100%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
    z-index: 2090;
  }
  .site-nav.open .links{
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .22s ease, opacity .18s ease;
  }
  /* Bloque le scroll de la page quand le menu est ouvert */
  body.nav-open { overflow: hidden; }
}

/* ====== CART — Desktop : fixe, hauteur calculée ====== */
@media (min-width: 981px){
  .products #cart{
    position: fixed;
    top: var(--cart-offset, 96px);
    right: max(16px, calc((100vw - 1200px)/2 + 1rem));
    width: 360px;
    max-height: calc(100vh - var(--cart-offset, 96px) - 16px);
    overflow: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex; flex-direction: column;
    z-index: 1400;
  }
  .products .cart-list{ flex: 1; overflow: auto; }
  /* Bouton Valider toujours accessible */
  .products #order-form button[type="submit"]{
    position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -8px 12px rgba(0,0,0,.25);
  }
}

/* ====== CART — Mobile : tiroir + FAB + overlay ====== */
@media (max-width: 980px){
  .products #cart{
    position: fixed; left: 0; right: 0; bottom: 0;
    transform: translateY(100%);
    transition: transform .25s ease;
    z-index: 2040; /* au-dessus de l’overlay et du contenu */
    border-top-left-radius: 18px; border-top-right-radius: 18px;
    max-height: 80vh; overflow: auto; -webkit-overflow-scrolling: touch;
    background: var(--card);
  }
  .products #cart.open{ transform: translateY(0); }

  .cart-fab{
    position: fixed; right: 16px; bottom: 16px;
    z-index: 2050; /* au-dessus de tout sauf la barre */
    background: linear-gradient(135deg, var(--accent), #3fae46);
    color:#fff; border:none; font-weight:900; padding:.9rem 1.1rem; border-radius:999px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .cart-fab .count{
    background:#0b132b; color:#9bf39a; font-weight:900;
    padding:.1rem .5rem; border-radius:999px; margin-left:.4rem;
  }

  /* La barre reste devant l’overlay et cliquable */
  .site-nav { z-index: 2100 !important; }
  .site-nav .brand, .site-nav .nav-toggle { z-index: 2101 !important; }
}

/* Accessibilité focus (utile sur mobile clavier / screenreader) */
.site-nav .links a:focus-visible,
.site-nav .nav-toggle:focus-visible,
.site-nav .brand:focus-visible{
  outline: 2px solid #9bf39a; outline-offset: 3px; border-radius: 12px;
}

/* ===== Amélioration visibilité navbar mobile ===== */
@media (max-width: 860px){
  .site-nav {
    background: #0b132b !important; /* bleu foncé plein */
  }
  .site-nav .links {
    background: #0b132b !important; /* panneau menu plein */
  }
  .site-nav .links a {
    color: #ffffff !important; /* texte blanc */
    font-weight: 600;
  }
  .site-nav .links a:hover,
  .site-nav .links a:focus {
    color: #9bf39a !important; /* accent vert au survol */
  }
}
/* ===== NAVBAR MOBILE — FORÇAGE VISIBILITÉ ===== */
@media (max-width: 980px){
  .site-nav {
    background-color: #0b132b !important; /* fond plein bleu nuit */
    backdrop-filter: none !important;     /* supprime flou/transparence */
    -webkit-backdrop-filter: none !important;
    border-bottom: 2px solid rgba(255,255,255,0.1) !important;
  }

  .site-nav .links {
    background-color: #0b132b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-nav a {
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }

  .site-nav a:hover,
  .site-nav a:focus {
    color: #9bf39a !important;
  }
}
/* ===== Navbar mobile compacte (dropdown) ===== */
@media (max-width: 860px){
  .site-nav{ position: sticky; top: 0; z-index: 2100; }

  /* Panneau : petit dropdown sous la barre (plus auto plein écran) */
  .site-nav .links{
    position: absolute;
    top: var(--nav-h, 64px);
    left: 12px; right: 12px; bottom: auto;
    display: flex; flex-direction: column; gap: .2rem;
    padding: .4rem;
    background: #0b132b !important;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);

    /* fermé par défaut */
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .18s ease, opacity .15s ease, visibility 0s linear .18s;

    /* si la liste devient longue, scrolle dans le panneau */
    max-height: calc(100vh - var(--nav-h, 64px) - 24px);
    overflow: auto;
  }
  .site-nav.open .links{
    transform: scaleY(1);
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .18s ease, opacity .15s ease;
  }

  /* Liens compacts et lisibles */
  .site-nav .links a{
    padding: .7rem .9rem;
    font-size: 1rem;
    color: #fff !important;
    font-weight: 700;
    border-radius: 10px;
  }
  .site-nav .links a:hover,
  .site-nav .links a:focus{
    background: rgba(255,255,255,.12);
    color: #9bf39a !important;
  }
}

/* Desktop : grilles stables dans le panneau panier */
@media (min-width: 981px){
  .products #cart{
    display: grid !important;
    grid-template-rows: auto 1fr auto auto; /* h3 | liste | total | form */
    gap: .6rem;
  }
  .products #cart h3{ margin: .2rem 0 0; }
  .products .cart-list{
    overflow: auto !important;
    min-height: 60px; /* garantit une zone visible même avec 1 article */
  }
  /* s’assure que le total et le formulaire restent visibles */
  .products #total-price{ align-self: end; }
  .products #order-form{ position: relative; }
}

/* Sur desktop, quand tout tient, on enlève le scroll interne du panier */
@media (min-width: 981px){
  .products #cart.no-scroll{
    overflow: visible !important;
  }
  .products #cart.no-scroll .cart-list{
    overflow: visible !important;
  }
}

/* === PANIER DESKTOP — flex propre, scroll seulement si besoin === */
@media (min-width: 981px){
  .products #cart{
    /* redevient un conteneur flex colonne */
    display: flex !important;
    flex-direction: column;

    position: fixed;
    top: var(--cart-offset, 96px);
    right: max(16px, calc((100vw - 1200px)/2 + 1rem));
    width: 360px;

    /* hauteur dispo = fenêtre - offset - petite marge */
    max-height: calc(100vh - var(--cart-offset, 96px) - 16px);

    /* le conteneur lui-même ne scrolle pas par défaut */
    overflow: hidden;
    z-index: 1400;
  }

  /* la liste occupe l'espace restant et ne scrolle que si elle dépasse */
  .products .cart-list{
    flex: 1 1 auto;
    min-height: 0;          /* clé pour éviter le scroll fantôme en flex */
    overflow: auto;         /* n'apparaît que si nécessaire */
  }

  /* total + formulaire restent visibles sous la liste */
  .products #total-price { margin-top: .4rem; }
  .products #order-form  { margin-top: .2rem; position: relative; }
}

/* === FIX FINAL PANIER DESKTOP — priorité maximale === */
@media (min-width: 981px){
  body.products #products-list{
    padding-right: 420px !important; /* réserve la place du panier fixe */
  }

  body.products #cart{
    position: fixed !important;
    top: var(--cart-offset, 96px) !important;
    right: max(16px, calc((100vw - 1200px)/2 + 1rem)) !important;
    width: 360px !important;

    /* layout clair */
    display: flex !important;
    flex-direction: column !important;

    /* hauteur dispo = fenêtre - offset - marge */
    max-height: calc(100vh - var(--cart-offset, 96px) - 16px) !important;

    /* le conteneur ne scrolle pas : seule la liste scrolle si besoin */
    overflow: hidden !important;

    z-index: 1400 !important;
  }

  body.products #cart .cart-list{
    flex: 1 1 auto !important;
    min-height: 0 !important;     /* clé anti-scroll fantôme en flex */
    overflow: auto !important;     /* n’apparaît que si nécessaire */
  }

  body.products #total-price{ margin-top: .4rem !important; }
  body.products #order-form { margin-top: .2rem !important; position: relative !important; }
}

/* === PANIER DESKTOP — FIX DEFINITIF (écrase tout le reste) === */
@media (min-width: 981px){

  body.products #products-list{
    padding-right: 420px !important; /* espace pour le panier */
  }

  body.products #cart{
    position: fixed !important;
    top: var(--cart-offset, 96px) !important;
    right: max(16px, calc((100vw - 1200px)/2 + 1rem)) !important;
    width: 360px !important;

    /* layout clair */
    display: flex !important;
    flex-direction: column !important;

    /* hauteur dispo = fenêtre - offset - marge */
    max-height: calc(100vh - var(--cart-offset, 96px) - 16px) !important;

    /* le conteneur NE scrolle pas, seule la liste scrolle si besoin */
    overflow: hidden !important;

    z-index: 1400 !important;
    padding: 1rem 1.2rem 1.2rem !important; /* garde ton padding */
  }

  /* La liste prend toute la place restante */
  body.products #cart .cart-list{
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 120px !important;   /* clé : assure une zone visible même avec 1-2 items */
    overflow: auto !important;
  }

  /* Le total et le formulaire restent visibles sous la liste */
  body.products #total-price{ margin-top: .4rem !important; }
  body.products #order-form { margin-top: .2rem !important; position: relative !important; }
}