@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* ==============================
   Variables & fond — unifiées (verre)
   ============================== */
:root{
  --text:#111; --text-inv:#fff;

  /* Palette verte (identique aux autres pages) */
  --brand:#4CAF50;
  --brand-700:#388E3C;

  /* Fond + “verre dépoli” (identiques) */
  --bg-image:url("../../assets/img/fond_ecran.png");
  --blur:12px;
  --tint:rgba(34,197,94,.30);
  --vignette:rgba(0,0,0,.18);

  /* Verre : mêmes niveaux que l’autre page */
  --glass-bg: rgba(255,255,255,.08);
  --glass-bg-strong: rgba(255,255,255,.12);
  --glass-border: rgba(255,255,255,.16);
  --glass-border-soft: rgba(255,255,255,.12);

  /* Neutres */
  --muted:#eef4ef; --card:#fff; --border:#dfe9e3;

  /* Navigation (verre sombre) */
  --nav: rgba(34,34,34,.58);
  --nav-2: rgba(40,40,40,.72);

  --shadow:0 2px 8px rgba(0,0,0,.12);
  --halo:0 0 26px rgba(76,175,80,.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:transparent; line-height:1.6; position:relative;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Fond photo + teinte + vignette (identiques) */
body::before{ content:""; position:fixed; inset:0; z-index:-2;
  background-image:var(--bg-image); background-size:cover; background-position:center;
  filter:blur(var(--blur)) saturate(1.05) contrast(1.02); transform:scale(1.06);
}
body::after{ content:""; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(120% 100% at 50% 0%, transparent 0%, var(--vignette) 72%),
             linear-gradient(0deg, var(--tint), var(--tint)); pointer-events:none;
}

/* liens */
a, a:visited { color: inherit; text-decoration: none; }
.navbar a, .menu-content nav a, .sidebar a { color: #fff; }
.menu-content nav a:hover{ color:#fff; }

/* ==============================
   Navbar & menu — verre aligné
   ============================== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; gap:16px;
  height:72px; padding:8px 16px;
  background:var(--nav); color:var(--text-inv);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}
.logo{ position:absolute; left:16px; display:flex; align-items:center; }
.logo img{ height:44px; width:auto; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.title{ font-weight:800; font-size:20px; letter-spacing:.3px; text-shadow:0 0 18px rgba(255,255,255,.08); }
.menu-button{ position:absolute; right:16px; border:0; background:transparent; color:#fff; font-size:28px; cursor:pointer; }

/* Menu déroulant = même verre que l’autre page */
.menu-content{
  position:fixed; top:72px; left:0; right:0; z-index:1001; display:block !important;
  background:var(--nav-2); color:#fff;
  visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition: transform .18s, opacity .18s, visibility 0s linear .18s;
  box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 28px rgba(76,175,80,.18);
  max-height:55dvh; overflow:auto; backdrop-filter: blur(8px);
  border-bottom:1px solid var(--glass-border-soft);
}
.menu-content.show{ visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
.menu-content nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px; padding:10px 12px;
}
.menu-content nav a{
  padding:8px 14px; border-radius:10px; transition:all .2s; border:1px solid transparent; color:#f0f0f0;
}
.menu-content nav a:hover{
  background:linear-gradient(135deg, var(--brand), var(--brand-700));
  box-shadow:0 0 26px rgba(76,175,80,.28); border-color:rgba(255,255,255,.12);
}

/* Barre de recherche (menu) — verre */
.menu-search{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  padding:8px; border-radius:12px; backdrop-filter: blur(6px);
}
.menu-search input[type="text"]{
  height:38px; min-width:240px; padding:0 12px; border-radius:10px;
  border:1px solid var(--glass-border); background:var(--glass-bg); color:#fff;
}
.menu-search input[type="text"]::placeholder{ color:#e8fff1; opacity:.8; }

/* Boutons (menu + haut) — mêmes dégradés verts */
.menu-search button,
.main-search button{
  position:relative; isolation:isolate;
  height:38px; padding:0 14px; border-radius:12px; border:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  color:#fff; font-weight:800; cursor:pointer; transition: transform .12s ease;
  border:1px solid rgba(187,247,208,.28); box-shadow: 0 8px 20px rgba(76,175,80,.22);
}
.menu-search button:hover,
.main-search button:hover{ transform: translateY(-1px); }

/* ==============================
   Layout & sidebar — verre
   ============================== */
.layout{ display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100dvh; }

.sidebar{
  position:sticky; top:72px; height:calc(100dvh - 72px); overflow-y:auto;
  background:rgba(32,56,38,.9); color:#fff; padding:18px 16px;
  border-right:1px solid var(--glass-border); backdrop-filter: blur(6px);
}
.sidebar h2{ margin:0 0 12px; font-size:18px; font-weight:800; color:#bbf7d0; text-transform:uppercase; }
.sidebar h3{ margin:16px 0 8px; font-size:14px; color:#e7e7e7; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{ margin:8px 0; }
.sidebar a{ display:block; padding:8px 10px; border-radius:10px; transition:all .2s; border:1px solid transparent; }
.sidebar a:hover{ background:linear-gradient(135deg,var(--brand),var(--brand-700)); transform:translateX(4px); box-shadow:var(--halo); }
.sidebar input[type="checkbox"]{ transform:translateY(1px); margin-right:8px; accent-color:var(--brand); }
.sidebar button{ width:100%; margin-top:10px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff; font-weight:800; padding:12px 14px; cursor:pointer; }

/* ==============================
   Barre recherche en haut — verre
   ============================== */
.main-search{
  position:sticky; top:72px; z-index:800;
  background:var(--glass-bg); padding:10px 0 12px; border-bottom:1px solid var(--glass-border-soft);
  backdrop-filter: blur(6px);
}
.main-search__inner{
  max-width:1200px; margin:0 auto; padding:0 8px;
  display:grid; grid-template-columns: 1fr auto auto; gap:10px;
}
.main-search input[type="text"]{
  height:46px; padding:0 14px; border-radius:12px;
  border:1px solid var(--glass-border); background:var(--card); color:#111;
}
.main-search select[name="order"]{
  height:46px; padding:0 12px; border-radius:12px;
  border:1px solid var(--glass-border); background:#fff; color:#111; font-weight:600;
}

/* ==============================
   Filtres (chips) — couleurs unifiées
   ============================== */
.filters-bar{ max-width:1200px; margin:6px auto 0; padding:0 8px; }
.filters-form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chip-select-wrap{ position: relative; }
.chip-select{
  height:38px; border-radius: 999px; padding:0 36px 0 12px;
  border:1px solid var(--glass-border); background:#fff; color:#134b2b; font-weight:700;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.chip-select-wrap::after{
  content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:12px; color:#2f7a39; pointer-events:none;
}
.chip-apply{
  height:38px; padding:0 14px; border-radius:999px; border:none;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color:#fff; font-weight:800; cursor:pointer; transition: transform .12s, box-shadow .18s;
}
.chip-apply:hover{ transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(187,247,208,.6); }

/* ==============================
   Main & grille produits
   ============================== */
main{ background:var(--muted); padding:92px 20px 40px; min-height:100dvh; }
main h1{ display:flex; align-items:center; gap:10px; margin:12px 0; font-size:22px; font-weight:800; color:#134b2b; }
main h1::before{ content:""; width:12px; height:12px; border-radius:3px; background:linear-gradient(135deg,var(--brand),var(--brand-700)); box-shadow:0 0 18px rgba(76,175,80,.35); }

.container{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:16px; max-width:1200px; margin:12px auto 0; padding:0 8px 24px;
}
.product{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .14s, box-shadow .2s, filter .2s;
}
.product:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.16), 0 0 28px rgba(76,175,80,.18); filter:saturate(1.02); }
.product .thumb{ position:relative; }
.product img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#eee; }
.name{ font-weight:800; font-size:15px; margin:10px 12px 4px; color:#0d1b12; }
.meta{ margin:0 12px 6px; color:#3b5f4a; font-size:12px; }
.meta small{ display:inline-block; padding:3px 8px; border-radius:999px; background:#e8f5ec; color:#1b5e20; font-weight:700; }

/* Prix + badge */
.price{ color:#1b5e20; font-weight:900; margin:0 12px 12px; }
.product .price{ display:flex; align-items:center; gap:8px; }
.product .price-old{ color:#a0a0a0; text-decoration: line-through; font-weight:700; opacity:.95; }
.product .price-new{ color:#1b5e20; font-weight:900; }

.badge-promo{
  position:absolute; top:8px; left:8px;
  font-size:12px; font-weight:800; line-height:1;
  padding:4px 8px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* ==============================
   Encadré Prix — barre + encart dessous
   ============================== */
.price-group{ margin-top: 8px; }

/* Barre (slider) */
#priceRange{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; border-radius:999px;
  background:#e5efe9; border:1px solid rgba(0,0,0,.08); outline:none;
}
#priceRange::-moz-range-track{ height:8px; border-radius:999px; background:#e5efe9; }
#priceRange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#2f7a39; border:2px solid #e6ffed;
  margin-top:-6px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition: transform .1s ease;
}
#priceRange::-webkit-slider-thumb:hover{ transform: scale(1.05); }
#priceRange::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#2f7a39; border:2px solid #e6ffed; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* Ligne sous la barre */
.price-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:8px; padding:10px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px; color:#f3fff5; font-weight:600;
  backdrop-filter: blur(6px);
}
.price-label{ font-size:14px; color:#e7f9ec; }
.price-row input[type="number"]{
  width: 110px; height: 36px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color:#fff; outline:none;
}
.price-row input[type="number"]::-webkit-outer-spin-button,
.price-row input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.price-row input[type="number"]{ -moz-appearance:textfield; }

/* ==============================
   Scrollbars & responsive
   ============================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#8a9a5b; border-radius:10px; border:2px solid transparent; }
::-webkit-scrollbar-thumb:hover{ background:#6a7d41; }
::-webkit-scrollbar-track{ background:#efefef; border-radius:10px; }

@media (max-width:1024px){ .layout{ grid-template-columns:220px 1fr; } }
@media (max-width:840px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{ position:relative; top:0; height:auto; border-right:none; border-bottom:1px solid var(--glass-border-soft); }
}
@media (max-width:520px){
  .title{ font-size:18px; } .logo img{ height:38px; } .menu-button{ font-size:26px; }
  .container{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
  .main-search__inner{ grid-template-columns:1fr; }
}

/* ===== Badge “Testé & approuvé” (haut-droite, vert) — même vert/effet */
.badge-tested{
  position:absolute; top:8px; right:8px;
  font-size:12px; font-weight:800; line-height:1;
  padding:4px 8px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; gap:6px;
  white-space: nowrap;
}
.badge-tested svg{ width:14px; height:14px; display:inline-block; }

/* Badge promo rouge (si tu veux garder la variation rouge) */
.badge-promo,
.badge--promo{
  position:absolute; top:8px; left:8px;
  font-size:12px; font-weight:800; line-height:1;
  padding:4px 8px; border-radius:999px;
  background:#e02424; color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* ================================
   BOUTIQUE — PATCH MOBILE ONLY
   (n'altère pas le desktop)
   ================================ */
@media (max-width: 768px){

  /* NAV + MENU : tailles tactiles, tiroir plein écran */
  .navbar{ height: 64px; padding: 6px 12px; }
  .logo img{ height: 36px; }
  .title h1{ font-size: 18px; margin: 0; }
  .menu-button{ font-size: 26px; padding: 6px; }

  .menu-content{
    top: 64px;
    bottom: 0;
    max-height: none;                 /* remplace le 55dvh desktop */
    overflow: auto;
    border-top: 1px solid var(--glass-border-soft);
    border-bottom: 0;
  }
  .menu-content nav{
    padding: 12px 14px;
    gap: 10px;
  }
  .menu-content nav a{
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    font-weight: 800;
  }
  .menu-search{
    width: 100%;
    gap: 8px;
  }
  .menu-search input[type="text"]{
    min-width: 0;
    flex: 1 1 auto;
  }

  /* LAYOUT : une seule colonne, marges respirantes */
  .layout{ grid-template-columns: 1fr !important; }
  main{ padding: 84px 12px 28px; } /* 64px nav + marge */

  /* SIDEBAR : bloc simple au-dessus des produits */
  .sidebar{
    position: static;
    height: auto;
    margin: 8px 0 10px;
    padding: 14px 12px;
    border-right: none;
    border-bottom: 1px solid var(--glass-border-soft);
    border-radius: 12px;
  }
  .sidebar h2{ font-size: 16px; margin-bottom: 8px; }
  .sidebar h3{ font-size: 13.5px; }
  .sidebar button{ padding: 10px 12px; border-radius: 10px; }

  /* BARRE DE RECHERCHE HAUT : pile sur 1 colonne */
  .main-search{
    top: 64px;          /* colle à la nav mobile */
    padding: 8px 0 10px;
  }
  .main-search__inner{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 8px;
  }
  .main-search input[type="text"]{ height: 42px; }

  /* CHIPS / FILTRES rapides */
  .filters-bar{ padding: 0 8px; }
  .filters-form{ gap: 8px; }
  .chip-select{ height: 38px; }

  /* TITRE PAGE */
  main h1{ font-size: 18px; margin: 10px 8px; }

  /* GRILLE PRODUITS : cartes plus petites (2 colonnes → 1 en XS) */
  .container{
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    padding: 0 4px 18px !important;
  }
  .product{
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
    transition: background .18s ease, box-shadow .18s ease;
  }
  .product:hover{
    transform: none;                   /* évite le jank mobile */
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
  }

  /* MEDIA + TEXTES compacts */
  .product img{
    aspect-ratio: 4 / 3;               /* stable & moins haut */
    object-fit: cover;
  }
  .name{
    font-size: 14px;
    margin: 8px 10px 4px;
    display: -webkit-box;              /* clamp 2 lignes */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.1em;
  }
  .meta{ font-size: 12px; margin: 0 10px 6px; }
  .price{ font-size: 14px; margin: 0 10px 10px; }
  .product .price-old{ font-size: 13px; }

  /* BADGES plus discrets pour éviter les chevauchements */
  .badge-promo,
  .badge-tested{
    padding: 4px 7px;
    font-size: 11.5px;
    border-radius: 999px;
  }
  .badge-tested svg{ width: 13px; height: 13px; }

  /* SCROLLBARS fins sur mobile */
  .menu-content,
  .sidebar,
  .container{ scrollbar-width: thin; }

  /* ANIMATIONS simples (compat mobile) */
  .product{
    opacity: 0;
    animation: fadeUp .4s ease both;
  }
  .product:nth-child(2){ animation-delay: .04s; }
  .product:nth-child(3){ animation-delay: .08s; }
  .product:nth-child(4){ animation-delay: .12s; }
}

/* XS : 1 produit par ligne */
@media (max-width: 420px){
  .container{ grid-template-columns: 1fr !important; }
  .title{ font-size: 16px; }
}

/* Fallback animation */
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ============================
   BOUTIQUE — MOBILE REWORK v2
   (desktop inchangé)
   ============================ */
@media (max-width: 768px){

  /* NAV */
  .navbar{ height:64px; padding:6px 12px; }
  .logo img{ height:36px; }
  .title h1{ font-size:18px; margin:0; }
  .menu-button{ font-size:26px; padding:6px; }

  .menu-content{
    top:64px; bottom:0; max-height:none; overflow:auto;
    border-top:1px solid var(--glass-border-soft);
    border-bottom:0;
  }
  .menu-content nav{ padding:12px 14px; gap:10px; }
  .menu-content nav a{
    display:block; width:100%; padding:12px 14px; border-radius:12px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
    font-weight:800;
  }
  .menu-search{ width:100%; gap:8px; }
  .menu-search input[type="text"]{ flex:1 1 auto; min-width:0; }

  /* LAYOUT */
  .layout{ grid-template-columns:1fr !important; }
  main{ padding:84px 10px 84px; } /* on libère le bas pour la barre sticky */

  /* SIDEBAR => accordéon compact */
  .sidebar{
    position:static; height:auto; margin:8px 0 10px; padding:0;
    border:0; background:transparent;
  }
  .sidebar .card{
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
    border-radius:12px; padding:12px; backdrop-filter:blur(6px);
  }
  /* on applique ce style à tout le contenu sidebar sans changer le HTML */
  .sidebar > * { margin:0 !important; }
  .sidebar h2{
    font-size:16px; margin:0; padding:12px; border-radius:12px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  }
  .sidebar h3{ font-size:13.5px; margin:12px 0 6px; }
  .sidebar ul{ padding:0 2px; }
  .sidebar li{ margin:8px 0; }
  .sidebar button{ width:100%; padding:10px 12px; border-radius:10px; }

  /* Barre de recherche principale */
  .main-search{
    top:64px; padding:8px 0 10px; background:var(--glass-bg); border-bottom:1px solid var(--glass-border-soft);
    backdrop-filter: blur(6px);
  }
  .main-search__inner{ grid-template-columns:1fr; gap:8px; padding:0 8px; }
  .main-search input[type="text"]{ height:42px; }

  /* TITRE */
  main h1{ font-size:18px; margin:10px 6px; }

  /* GRILLE PRODUITS — petite, régulière */
  .container{
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    gap:10px !important;
    padding:0 2px 18px !important;
  }
  @media (max-width: 420px){
    .container{ grid-template-columns:1fr !important; }
  }

  .product{
    border-radius:12px; overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.16);
    transition: background .18s ease, box-shadow .18s ease;
  }
  .product:hover{ transform:none; box-shadow:0 4px 12px rgba(0,0,0,.16); }

  .product .thumb{ position:relative; }
  .product img{
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display:block;
  }

  .name{
    font-size:14px; margin:8px 10px 4px; color:#0d1b12;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.1em;
  }
  .meta{ font-size:12px; margin:0 10px 6px; color:#3b5f4a; }
  .price{ font-size:14px; margin:0 10px 10px; display:flex; gap:8px; align-items:center; }
  .product .price-old{ font-size:13px; }

  /* Badges plus discrets */
  .badge-promo, .badge-tested{ padding:4px 7px; font-size:11.5px; }
  .badge-tested svg{ width:13px; height:13px; }

  /* ANIMATIONS simples */
  .product{ opacity:0; animation: fadeUp .4s ease both; }
  .product:nth-child(2){ animation-delay:.04s }
  .product:nth-child(3){ animation-delay:.08s }
  .product:nth-child(4){ animation-delay:.12s }

  /* ===== Barre sticky en bas : tri + action "Filtrer" ===== */
  .filters-bar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    padding: 8px 10px; background: rgba(34,34,34,.88);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--glass-border-soft);
  }
  .filters-form{
    display:grid; grid-template-columns: 1fr 120px; gap:8px; align-items:center;
  }
  .chip-select{
    height:44px; width:100%;
    border-radius:12px; border:1px solid var(--glass-border); background:#fff; color:#134b2b; font-weight:800;
  }
  .chip-apply{
    height:44px; border-radius:12px; font-weight:900;
    background:linear-gradient(135deg, var(--brand), var(--brand-700));
  }

  /* Masque le doublon "Filtrer" en haut pour alléger */
  .main-search + .filters-bar:not(:empty) ~ h1 { margin-top: 10px; }
}

/* animation fallback */
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ================================
   FIX OVERLAP NAV (mobile only)
   ================================ */
@media (max-width: 768px){
  /* Hauteur de la nav mobile */
  .navbar{ --navH: 64px; }

  /* Le drawer et la barre de recherche collent à la nav */
  .menu-content{ top: var(--navH) !important; }
  .main-search{  top: var(--navH) !important; z-index: 900; }

  /* On ajoute la place pour la nav + la barre de recherche sticky */
  /* 60px ≈ hauteur de .main-search en mobile */
  main{
    padding-top: calc(var(--navH) + 60px + 12px) !important;
    /* iPhone notch safe-area */
    padding-top: calc(env(safe-area-inset-top) + var(--navH) + 60px + 12px) !important;
  }

  /* Quand on scrolle vers une ancre/section, ne pas la cacher sous la nav */
  :target,
  main h1,
  .sidebar,
  .container,
  .filters-bar,
  .price-group{
    scroll-margin-top: calc(var(--navH) + 70px);
  }
}
/* ================================
   FIX MOBILE — nav overlap + filtres
   ================================ */
@media (max-width: 768px){
  /* 1) Calage global sous la nav + barre de recherche */
  .navbar{ --navH: 64px; }
  .menu-content{ top: var(--navH) !important; }
  .main-search{  top: var(--navH) !important; z-index: 900; }

  /* Donne assez de place au contenu pour ne rien cacher sous la nav */
  main{
    /* nav (64) + search (~60) + marge */
    padding-top: calc(var(--navH) + 64px + 12px) !important;
  }

  /* Tout élément ciblé/au début d’une section ne se cache plus sous la nav */
  .sidebar,
  .sidebar a,
  .sidebar h2,
  .sidebar h3,
  .container,
  main h1 { scroll-margin-top: calc(var(--navH) + 70px); }

  /* 2) Barre de filtres en bas : crée un vrai espace en bas du contenu
        pour qu’aucun bouton ne passe dessous */
  .filters-bar{
    position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 950;
  }
  /* espace de réserve sous la grille (hauteur de la barre ~64px + marge) */
  main{ padding-bottom: 84px !important; }

  /* 3) Ouverture des filtres “vers le bas” :
        quand on focus le select ou le bouton, on remonte la barre
        pour laisser de la place à l’overlay natif du select. */
  @supports(selector(:has(*))){
    .filters-bar:has(select:focus),
    .filters-bar:has(button:focus){
      transform: translateY(-220px);
    }
    /* on ajoute la même réserve au bas de la page pendant le focus */
    main:has(.filters-bar:has(select:focus)),
    main:has(.filters-bar:has(button:focus)){
      padding-bottom: calc(84px + 220px) !important;
    }
  }

  /* 4) Sécurité z-index pour que rien ne masque les UI natives */
  .menu-content{ z-index: 1001; }
  .navbar{ z-index: 1002; }
  .main-search{ z-index: 1000; }
}

/* iPhone à encoche : marge de sécurité */
@supports (padding: max(0px)) {
  @media (max-width: 768px){
    .filters-bar{ padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    main{ padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  }
}

/* ===== Sub-bar (menu-content) — entrée douce & soyeuse ===== */
@media (prefers-reduced-motion: no-preference){
  /* état initial (fermée) : déjà géré chez toi via opacity/translate */
  .menu-content{
    transform-origin: top center;
    /* petit masque arrondi pour un reveal propre (supporte la plupart des nav modernes) */
    clip-path: inset(-10px -10px 100% -10px round 14px);
    filter: blur(0);
  }

  /* ouverture : keyframe + easing "springy" */
  .menu-content.show{
    animation: subbarIn .38s cubic-bezier(.2,.7,.2,1.02) both;
    /* assure que les transitions restantes ne perturbent pas la keyframe */
    transition: none;
  }

  /* liens à l’intérieur : léger "cascade" */
  .menu-content nav a{
    opacity: 0;
    transform: translateY(6px);
  }
  .menu-content.show nav a{
    animation: itemIn .42s cubic-bezier(.2,.7,.2,1.02) both;
  }
  /* Stagger (max 12 items, ajuste si besoin) */
  .menu-content.show nav a:nth-child(1){ animation-delay: .03s; }
  .menu-content.show nav a:nth-child(2){ animation-delay: .06s; }
  .menu-content.show nav a:nth-child(3){ animation-delay: .09s; }
  .menu-content.show nav a:nth-child(4){ animation-delay: .12s; }
  .menu-content.show nav a:nth-child(5){ animation-delay: .15s; }
  .menu-content.show nav a:nth-child(6){ animation-delay: .18s; }
  .menu-content.show nav a:nth-child(7){ animation-delay: .21s; }
  .menu-content.show nav a:nth-child(8){ animation-delay: .24s; }
  .menu-content.show nav a:nth-child(9){ animation-delay: .27s; }
  .menu-content.show nav a:nth-child(10){ animation-delay: .30s; }
  .menu-content.show nav a:nth-child(11){ animation-delay: .33s; }
  .menu-content.show nav a:nth-child(12){ animation-delay: .36s; }

  @keyframes subbarIn{
    0%{
      opacity: 0;
      transform: translateY(-8px) scaleY(.98);
      filter: blur(8px) saturate(1.05);
      clip-path: inset(-10px -10px 100% -10px round 14px);
      box-shadow: 0 8px 24px rgba(0,0,0,.0), 0 0 0 rgba(76,175,80,0);
    }
    60%{
      opacity: 1;
      transform: translateY(0) scaleY(1.005);
      filter: blur(2px) saturate(1.06);
      clip-path: inset(-10px -10px 0% -10px round 14px);
      box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 24px rgba(76,175,80,.12);
    }
    100%{
      opacity: 1;
      transform: translateY(0) scaleY(1);
      filter: blur(0) saturate(1);
      clip-path: inset(-10px -10px 0% -10px round 14px);
      box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 28px rgba(76,175,80,.18);
    }
  }

  @keyframes itemIn{
    from{ opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to  { opacity: 1; transform: translateY(0);   filter: blur(0); }
  }
}

/* Fallback motion-safe : garde ton close fluide (pas d’anim rebond quand on referme) */
@media (prefers-reduced-motion: reduce){
  .menu-content, .menu-content.show{ animation:none !important; }
}