/* FILTERS MOBILE */
  .filters-toggle {
    display: flex;
  }

  .filters-strip {
    flex-wrap: wrap;
    gap: 0;
    padding: 0.75rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .filters-content {
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .filters-content.open {
    max-height: 800px;
  }

  .filters-strip.expanded .filters-content {
    display: flex;
  }

  .fsearch {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--gris10);
    border: 1.5px solid var(--gris20);
    padding: .55rem 1.1rem;
    width: 100%;
    transition: border-color .3s;
  }

  .fgroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .fbtns {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
  }

  .fsort {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 0;
  }

  .fselect {
    width: 100%;
  }
  
/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  --g900: #0a2318;
  --g800: #0f3526;
  --g700: #165c3e;
  --g600: #1e7a52;
  --g500: #279165;
  --g400: #3daa7c;
  --g300: #6dc49f;
  --g200: #a8dfc5;
  --g100: #d4f0e4;
  --g50:  #eef9f4;
  --g25:  #f5fcf9;

  --or:       #c8952a;
  --or-vif:   #e0aa38;
  --or-clair: #f0c96a;
  --or-pale:  #fdf3dc;
  --or-trait: #d4a840;

  --blanc:    #ffffff;
  --creme:    #fafaf7;
  --gris10:   #f4f4f2;
  --gris20:   #e8e8e4;
  --gris40:   #c8c8c2;
  --gris60:   #8a8a82;
  --gris80:   #404038;
  --noir:     #1a1a14;

  --rayon: 0px;
  --ombre-sm: 0 2px 12px rgba(10,35,24,0.08);
  --ombre-md: 0 8px 32px rgba(10,35,24,0.12);
  --ombre-lg: 0 20px 60px rgba(10,35,24,0.16);
  --ombre-or: 0 8px 30px rgba(200,149,42,0.25);
  --trans: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--creme);
  color: var(--gris80);
  cursor: none;
  overflow-x: hidden;
}

/* ============================================================
   CURSEUR
   ============================================================ */
#cur {
  width: 10px; height: 10px;
  background: var(--g600);
  border-radius: 50%;
  position: fixed; top:0; left:0;
  pointer-events: none; z-index:9999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, background .25s;
}
#cur-ring {
  width: 38px; height: 38px;
  border: 1.5px solid var(--g500);
  border-radius: 50%;
  position: fixed; top:0; left:0;
  pointer-events: none; z-index:9998;
  transform: translate(-50%,-50%);
  transition: transform .16s ease, width .3s, height .3s, opacity .3s;
  opacity: .45;
}
#cur.hov { width:18px; height:18px; background: var(--or-vif); }
#cur-ring.hov { width:58px; height:58px; opacity:.18; border-color: var(--or-vif); }

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: 78px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5rem;
  transition: var(--trans);
}
nav.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(24px);
  box-shadow: var(--ombre-sm);
  height: 64px;
  border-bottom: 1px solid var(--g100);
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--g800);
  text-decoration: none;
  cursor: none;
  letter-spacing: -.01em;
}
.nav-logo span { color: var(--or); font-style: italic; font-weight: 400; }
.nav-menu { display:flex; gap:2.8rem; align-items:center; }
.nav-menu a {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris60);
  text-decoration: none; cursor: none;
  position: relative;
  transition: color .3s;
}
.nav-menu a::after {
  content:''; position:absolute; bottom:-5px; left:0;
  width:0; height:2px;
  background: var(--g500);
  transition: width .35s ease;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--g700); }
.nav-menu a:hover::after, .nav-menu a.active::after { width:100%; }
.nav-pill {
  background: var(--g700) !important;
  color: white !important;
  padding: .55rem 1.5rem;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em;
  cursor: none;
  transition: background .3s, box-shadow .3s !important;
  box-shadow: 0 3px 14px rgba(30,122,82,.3);
  border-radius: 100px;
}
.nav-pill:hover { background: var(--g600) !important; box-shadow: 0 5px 20px rgba(30,122,82,.4) !important; }
.nav-pill::after { display:none !important; }

/* HAMBURGER MENU */
.nav-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: none;
  padding: 0.5rem;
  z-index: 1001;
}
.hamburger {
  width: 24px;
  height: 2px;
  background: var(--g800);
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--g800);
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
  transform-origin: center;
}
.hamburger::before {
  top: -8px;
  box-shadow: 0 16px 0 var(--g800);
}
.hamburger::after {
  bottom: -8px;
}
.nav-toggle.active .hamburger {
  background: transparent;
}
.nav-toggle.active .hamburger::before {
  box-shadow: 0 0 0 var(--g800);
  transform: rotate(45deg) translateY(8px);
}
.nav-toggle.active .hamburger::after {
  transform: rotate(-45deg) translateY(-8px);
}

/* ============================================================
   PAGES
   ============================================================ */
.page { display:none; }
.page.active { display:block; }

/* ============================================================
   PAGE ACCUEIL — HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

/* Colonne gauche : texte */
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 10rem 4rem 6rem 5rem;
  position: relative; z-index: 2;
  background: var(--blanc);
}
.hero-left::after {
  content: '';
  position: absolute; top:0; right:-1px; bottom:0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--g200) 30%, var(--g200) 70%, transparent);
}
.hero-tag {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--g50);
  border: 1px solid var(--g200);
  color: var(--g600);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
  padding: .4rem 1rem;
  margin-bottom: 2rem;
  width: fit-content;
}
.hero-tag::before {
  content:''; width:6px; height:6px;
  background: var(--g500); border-radius:50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(.7); }
}
.hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 4.5vw, 5.2rem);
  font-weight: 700;
  line-height: 1.06;
  color: var(--g900);
  margin-bottom: 1.8rem;
}
.hero-h1 .accent {
  display: block;
  color: var(--g600);
  font-style: italic; font-weight: 400;
}
.hero-h1 .gold { color: var(--or); }
.hero-desc {
  font-size: .9rem; font-weight: 400;
  line-height: 1.85; color: var(--gris60);
  max-width: 420px; margin-bottom: 2.8rem;
}
.hero-ctas { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.btn-vert {
  background: var(--g700);
  color: white;
  padding: .9rem 2.2rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  border: none; cursor: none;
  position: relative; overflow: hidden;
  transition: var(--trans);
  box-shadow: 0 4px 18px rgba(30,122,82,.28);
}
.btn-vert::before {
  content:''; position:absolute; inset:0;
  background: var(--g600);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.btn-vert:hover::before { transform: scaleX(1); }
.btn-vert span { position:relative; z-index:1; }
.btn-vert:hover { box-shadow: 0 6px 28px rgba(30,122,82,.4); }
.btn-outline-vert {
  background: transparent;
  border: 2px solid var(--g300);
  color: var(--g700);
  padding: .88rem 2.2rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: none; transition: var(--trans);
}
.btn-outline-vert:hover {
  background: var(--g50);
  border-color: var(--g500);
}
.hero-trust {
  margin-top: 3.5rem;
  display: flex; gap: 2.5rem;
  align-items: center;
}
.trust-item { display:flex; flex-direction:column; gap:.2rem; }
.trust-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 700;
  color: var(--g700); line-height: 1;
}
.trust-label {
  font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris60);
}
.trust-divider {
  width: 1px; height: 40px;
  background: var(--gris20);
}

/* Colonne droite : visuel vert */
.hero-right {
  background: var(--g700);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-right-pattern {
  position: absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(212,240,228,.1) 0%, transparent 50%);
}
.hero-right-grid {
  position: absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 50px 50px;
}
.hero-orb-wrap {
  position: relative; z-index:2;
  display: flex; flex-direction:column;
  align-items: center; gap: 2rem;
}
.hero-big-orb {
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, rgba(255,255,255,.25), rgba(61,170,124,.2) 50%, transparent 75%);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex; align-items:center; justify-content:center;
  font-size: 7rem;
  animation: floatOrb 7s ease-in-out infinite;
  box-shadow: 0 0 80px rgba(61,170,124,.3), inset 0 0 50px rgba(255,255,255,.05);
}
@keyframes floatOrb {
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-16px) scale(1.02); }
}
.hero-orb-ring {
  position: absolute;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  animation: spinRing 20s linear infinite;
}
.hero-orb-ring:nth-child(1){ width:340px; height:340px; animation-duration:25s; }
.hero-orb-ring:nth-child(2){ width:420px; height:420px; animation-direction:reverse; animation-duration:35s; border-style:dashed; border-color:rgba(255,255,255,.06); }
@keyframes spinRing { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.hero-right-chips {
  display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center;
  position: relative; z-index:2;
}
.chip {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform:uppercase;
  padding: .4rem 1rem;
  backdrop-filter: blur(10px);
  transition: var(--trans);
}
.chip:hover { background: rgba(255,255,255,.22); }
.hero-right-label {
  position: absolute; bottom: 3rem; left:0; right:0;
  text-align:center;
  font-size: .62rem; font-weight:600;
  letter-spacing: .3em; text-transform:uppercase;
  color: rgba(255,255,255,.4);
}

/* SCROLL HINT */
.hero-scroll-hint {
  position: absolute; bottom: 2.5rem; left: 5rem;
  display:flex; align-items:center; gap:1rem;
  z-index:3;
}
.scroll-dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--g400);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }
.hero-scroll-hint span {
  font-size:.6rem; font-weight:600;
  letter-spacing:.25em; text-transform:uppercase;
  color: var(--gris60);
  writing-mode: vertical-rl;
}

/* ============================================================
   BANDE VERTE MARQUEE
   ============================================================ */
.green-band {
  background: var(--g600);
  padding: .85rem 0; overflow:hidden;
}
.green-band-track {
  display:flex; animation: marquee 28s linear infinite; white-space:nowrap;
}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.band-item {
  display:inline-flex; align-items:center; gap:1.8rem;
  padding: 0 2rem;
  font-size:.62rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color: rgba(255,255,255,.92);
}
.band-sep {
  width:5px; height:5px; border-radius:50%;
  background: var(--or-clair); opacity:.7;
}

/* ============================================================
   SECTION : POURQUOI NOUS
   ============================================================ */
.why-section {
  padding: 7rem 5rem;
  background: var(--blanc);
  position: relative;
}
.why-section::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:4px;
  background: linear-gradient(90deg, var(--g600), var(--or), var(--g600));
}
.sec-eyebrow {
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:.62rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color: var(--g600);
  margin-bottom:1rem;
}
.sec-eyebrow::before {
  content:''; width:28px; height:2px; background: var(--g500);
}
.sec-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem,3.5vw,3rem); font-weight:700;
  color: var(--g900); line-height:1.15; margin-bottom:4rem;
}
.sec-h2 em { font-style:italic; color: var(--g600); }
.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.why-card {
  background: var(--g25);
  border: 1.5px solid var(--g100);
  padding: 2.5rem 2rem;
  cursor: none;
  transition: var(--trans);
  position: relative; overflow:hidden;
}
.why-card::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--g500), var(--or));
  transform: scaleX(0); transform-origin:left;
  transition: transform .45s ease;
}
.why-card:hover { background: var(--blanc); transform:translateY(-6px); box-shadow: var(--ombre-md); border-color: var(--g200); }
.why-card:hover::after { transform: scaleX(1); }
.why-icon {
  width:54px; height:54px;
  background: var(--g700);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:1.5rem;
}
.why-card h3 {
  font-family:'Playfair Display',serif;
  font-size:1.2rem; font-weight:700;
  color: var(--g800); margin-bottom:.7rem;
}
.why-card p {
  font-size:.8rem; font-weight:400;
  line-height:1.8; color: var(--gris60);
}

/* ============================================================
   SECTION : CATÉGORIES VITRINE
   ============================================================ */
.cats-section {
  padding: 7rem 5rem;
  background: var(--creme);
}
.cats-mosaic {
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 12px;
  margin-top: 4rem;
}
.cat-tile {
  position:relative; overflow:hidden; cursor:none;
  transition: var(--trans);
}
.cat-tile:first-child { grid-row: span 2; }
.cat-tile:hover { z-index:3; box-shadow: var(--ombre-lg); }
.cat-tile-bg {
  position:absolute; inset:0;
  transition: transform .7s ease;
}
.cat-tile:hover .cat-tile-bg { transform: scale(1.06); }
.cat-tile:nth-child(1) .cat-tile-bg { background: linear-gradient(160deg, var(--g700) 0%, var(--g500) 60%, var(--g400) 100%); }
.cat-tile:nth-child(2) .cat-tile-bg { background: linear-gradient(145deg, #2d5a1a, #4a8c28, #3a7020); }
.cat-tile:nth-child(3) .cat-tile-bg { background: linear-gradient(145deg, #5a3d0a, #9a6c18, #7a5010); }
.cat-tile:nth-child(4) .cat-tile-bg { background: linear-gradient(145deg, #1a3d5a, #286c9a, #1a5070); }
.cat-tile:nth-child(5) .cat-tile-bg { background: linear-gradient(145deg, #3d1a5a, #7a28a0, #5a1a7a); }
.cat-tile-noise {
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity:.5; mix-blend-mode: overlay;
}
.cat-tile-content {
  position:absolute; inset:0;
  padding:2rem;
  background: linear-gradient(to top, rgba(10,35,24,.8) 0%, transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: var(--trans);
}
.cat-tile:hover .cat-tile-content { background: linear-gradient(to top, rgba(10,35,24,.88) 0%, transparent 40%); }
.cat-tile-emoji { font-size:2.8rem; margin-bottom:.8rem; display:block; }
.cat-tile:first-child .cat-tile-emoji { font-size:4.5rem; }
.cat-tile-name {
  font-family:'Playfair Display',serif;
  font-weight:700; color:white;
  margin-bottom:.3rem;
}
.cat-tile:first-child .cat-tile-name { font-size:2.2rem; }
.cat-tile-name { font-size:1.15rem; }
.cat-tile-count {
  font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color: rgba(255,255,255,.6);
}
.cat-tile-btn {
  position:absolute; top:1.2rem; right:1.2rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color:white;
  font-size:.55rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  padding: .3rem .8rem;
  backdrop-filter: blur(8px);
  opacity:0; transform:translateY(-6px);
  transition: var(--trans);
}
.cat-tile:hover .cat-tile-btn { opacity:1; transform:translateY(0); }

/* ============================================================
   STATS BANDE VERTE
   ============================================================ */
.stats-band {
  background: var(--g800);
  display:grid; grid-template-columns:repeat(4,1fr);
  position: relative; overflow:hidden;
}
.stats-band::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--or), var(--g400), var(--or));
}
.stat-col {
  padding: 4rem 2rem;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.07);
  cursor:none; transition: background .3s;
}
.stat-col:last-child { border:none; }
.stat-col:hover { background: rgba(255,255,255,.04); }
.stat-n {
  font-family:'Playfair Display',serif;
  font-size:3.2rem; font-weight:700;
  color: var(--g300); display:block; line-height:1;
  margin-bottom:.5rem;
}
.stat-n span { color: var(--or-clair); }
.stat-l {
  font-size:.62rem; font-weight:600;
  letter-spacing:.25em; text-transform:uppercase;
  color: rgba(255,255,255,.45);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--g900);
  padding: 5rem;
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:4rem;
}
.foot-brand .nav-logo { display:block; font-size:1.55rem; margin-bottom:1rem; cursor:default; }
.foot-brand p {
  font-size:.78rem; font-weight:400;
  line-height:1.85; color: var(--g200);
  max-width:270px;
}
.foot-col h4 {
  font-size:.6rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color: var(--or); margin-bottom:1.5rem;
}
.foot-col a {
  display:block; color: var(--g200);
  font-size:.78rem; font-weight:400;
  text-decoration:none; margin-bottom:.65rem;
  cursor:none; transition: color .25s;
}
.foot-col a:hover { color: white; }
.foot-bottom {
  background: rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.4rem 5rem;
  display:flex; justify-content:space-between; align-items:center;
}
.foot-bottom p { font-size:.62rem; color: var(--g300); opacity:.6; letter-spacing:.08em; }

/* ============================================================
   PAGE CATALOGUE
   ============================================================ */
.cat-hero {
  padding: 110px 5rem 4rem;
  background: linear-gradient(135deg, var(--g700) 0%, var(--g800) 60%, var(--g900) 100%);
  position:relative; overflow:hidden;
}
.cat-hero::after {
  content:'CATALOGUE';
  position:absolute; right:4rem; bottom:-2rem;
  font-family:'Playfair Display',serif;
  font-size:11rem; font-weight:700;
  color:rgba(255,255,255,.04); pointer-events:none;
  user-select:none; letter-spacing:.1em;
  white-space:nowrap;
}
.cat-hero-inner {
  position:relative; z-index:2;
}
.cat-hero h1 {
  font-family:'Playfair Display',serif;
  font-size: clamp(2.5rem,5vw,4.2rem); font-weight:700;
  color:white; margin-bottom:.6rem;
}
.cat-hero h1 em { font-style:italic; font-weight:400; color:var(--g300); }
.cat-hero p { font-size:.85rem; font-weight:400; color:rgba(255,255,255,.6); }
.cat-hero-chips {
  display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem;
}
.cat-hero-chip {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.8);
  font-size:.58rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  padding: .3rem .8rem;
}

/* BARRE FILTRES */
.filters-strip {
  position:sticky; top:64px; z-index:100;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(24px);
  border-bottom: 2px solid var(--g100);
  box-shadow: 0 4px 20px rgba(10,35,24,.06);
  padding: 1rem 5rem;
  display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap;
}
/* Toggle Filtres Button */
.filters-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0.5rem;
  margin-right: 1rem;
}
.filters-toggle span {
  width: 20px;
  height: 2px;
  background: var(--g700);
  transition: all 0.3s ease;
  display: block;
}
.filters-toggle.collapsed span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}
.filters-toggle.collapsed span:nth-child(2) {
  opacity: 0;
}
.filters-toggle.collapsed span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.filters-content {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}
.fsearch {
  display:flex; align-items:center; gap:.7rem;
  background: var(--gris10); border: 1.5px solid var(--gris20);
  padding: .55rem 1.1rem; flex:1; min-width:180px;
  transition: border-color .3s;
}
.fsearch:focus-within { border-color: var(--g400); background: var(--blanc); }
.fsearch svg { color: var(--g500); flex-shrink:0; }
.fsearch input {
  background:none; border:none; outline:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.78rem; font-weight:400; color: var(--noir); width:100%;
}
.fsearch input::placeholder { color: var(--gris40); }

.fgroup { display:flex; align-items:center; gap:.7rem; }
.flabel {
  font-size:.6rem; font-weight:700;
  letter-spacing:.25em; text-transform:uppercase;
  color: var(--g700); white-space:nowrap;
}
.fbtns { display:flex; gap:.4rem; flex-wrap:wrap; }
.fbtn {
  background: var(--gris10); border: 1.5px solid var(--gris20);
  color: var(--gris60);
  padding: .38rem .9rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.62rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:none; transition: var(--trans);
}
.fbtn:hover { border-color: var(--g400); color: var(--g700); background: var(--g25); }
.fbtn.on {
  background: var(--g700); border-color: var(--g700);
  color:white;
}

.fsort { margin-left:auto; display:flex; align-items:center; gap:.7rem; }
.fselect {
  background: var(--gris10); border: 1.5px solid var(--gris20);
  color: var(--gris60); padding:.5rem 1rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.65rem; cursor:none; outline:none;
  transition: border-color .3s;
}
.fselect:focus { border-color: var(--g400); }
.fselect option { background:white; }

/* CORPS CATALOGUE */
.cat-body { background: var(--creme); }
.cat-results-bar {
  padding: .9rem 5rem .5rem;
  font-size:.65rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--g400);
}
.no-res { padding:6rem 5rem; text-align:center; display:none; }
.no-res.show { display:block; }
.no-res h3 {
  font-family:'Playfair Display',serif;
  font-size:2rem; font-weight:700; color:var(--g700); margin-bottom:.8rem;
}
.no-res p { font-size:.8rem; color:var(--gris60); }

.cat-grp { padding:3rem 5rem 1.5rem; }
.cat-grp-head {
  display:flex; align-items:center; gap:1.5rem;
  padding-bottom:1.2rem; margin-bottom:2rem;
  border-bottom: 2px solid var(--g100);
}
.cat-grp-icon { font-size:1.6rem; }
.cat-grp-title {
  font-family:'Playfair Display',serif;
  font-size:1.8rem; font-weight:700; color:var(--g800);
}
.cat-grp-count {
  margin-left:auto;
  font-size:.6rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--g600);
  background: var(--g50); border: 1px solid var(--g100);
  padding: .25rem .8rem;
}

/* GRILLE PRODUITS */
.prod-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:1.5rem;
}
.prod-card {
  background: var(--blanc);
  border: 1.5px solid var(--gris20);
  cursor:none; transition: var(--trans);
  position:relative; overflow:hidden;
}
.prod-card:hover {
  border-color: var(--g300);
  box-shadow: var(--ombre-md);
  transform: translateY(-4px);
}

/* Barre verte décorative haut card */
.prod-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:4px;
  background: linear-gradient(90deg, var(--g600), var(--g400));
  transform: scaleX(0); transform-origin:left;
  transition: transform .4s ease;
}
.prod-card:hover::before { transform: scaleX(1); }

.prod-visual {
  height:170px; position:relative;
  background: var(--g25);
  display:flex; align-items:center; justify-content:center;
}
.prod-img {
  width: 160px;
  height: 160px;
}
.prod-card:hover .prod-emoji { transform: scale(1.12) rotate(-6deg); }

.prod-card:hover .prod-visual-glow { opacity:.28; }

.badge-promo {
  position:absolute; top:.75rem; left:.75rem;
  background: var(--or-vif); color:white;
  font-size:.5rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.25rem .65rem;
}
.badge-new {
  position:absolute; top:.75rem; right:.75rem;
  background: var(--g600); color:white;
  font-size:.5rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.25rem .65rem;
}

.prod-body { padding:1.4rem 1.5rem; }
.prod-brand {
  font-size:.58rem; font-weight:700;
  letter-spacing:.25em; text-transform:uppercase;
  color: var(--or); margin-bottom:.35rem;
  display:flex; align-items:center; gap:.5rem;
}
.prod-brand::before {
  content:''; width:16px; height:1.5px; background: var(--or);
}
.prod-name {
  font-family:'Playfair Display',serif;
  font-size:1.2rem; font-weight:700;
  color: var(--g900); margin-bottom:.5rem; line-height:1.25;
}
.prod-desc {
  font-size:.75rem; font-weight:400;
  line-height:1.75; color: var(--gris60);
  margin-bottom:.9rem;
}
.prod-pills { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem; }
.prod-pill {
  background: var(--g50); border: 1px solid var(--g200);
  color: var(--g700);
  font-size:.52rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .55rem;
}

/* TABLE PRIX */
.price-tbl {
  width:100%; border-collapse:collapse;
  margin-bottom:1.2rem; overflow:hidden;
  border: 1.5px solid var(--g100);
}
.price-tbl thead tr {
  background: var(--g700);
}
.price-tbl th {
  color:rgba(255,255,255,.9);
  font-size:.5rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.55rem .5rem; text-align:center;
}
.price-tbl th:last-child { background: var(--or); color:white; }
.price-tbl td {
  padding:.48rem .5rem; text-align:center;
  border: 1px solid var(--g50);
  font-size:.68rem; font-weight:500;
  color: var(--gris80); background: white;
  transition: background .18s;
}
.price-tbl tr:hover td { background: var(--g25); }
.price-tbl td:first-child { color:var(--gris60); font-size:.6rem; font-weight:600; }
.price-tbl td.best {
  color: var(--or); font-weight:700;
  background: var(--or-pale);
}

.prod-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem; border-top: 1.5px solid var(--g50);
}
.prod-price-col { display:flex; flex-direction:column; }
.prod-price-lbl {
  font-size:.52rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gris40);
}
.prod-price-val {
  font-family:'Playfair Display',serif;
  font-size:1.55rem; font-weight:700;
  color: var(--g700); line-height:1;
}
.prod-price-unit { font-size:.6rem; color:var(--gris40); }
.btn-cta-card {
  background: var(--g700); color:white; border:none;
  padding:.6rem 1.2rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.58rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  cursor:none; transition: var(--trans);
  white-space:nowrap;
}
.btn-cta-card:hover { background: var(--g600); box-shadow: 0 4px 16px rgba(30,122,82,.28); }

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.cont-hero {
  padding: 110px 5rem 5rem;
  background: linear-gradient(135deg, var(--g700) 0%, var(--g800) 50%, var(--g900) 100%);
  position:relative; overflow:hidden;
}
.cont-hero::after {
  content:'CONTACT';
  position:absolute; right:4rem; bottom:-2rem;
  font-family:'Playfair Display',serif;
  font-size:11rem; font-weight:700;
  color:rgba(255,255,255,.04); pointer-events:none;
  user-select:none; letter-spacing:.1em;
}
.cont-hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,4.2rem); font-weight:700;
  color:white; margin-bottom:.6rem; position:relative; z-index:2;
}
.cont-hero h1 em { font-style:italic; font-weight:400; color:var(--g300); }
.cont-hero p {
  font-size:.85rem; font-weight:400;
  color:rgba(255,255,255,.6); position:relative; z-index:2;
}

/* LAYOUT CONTACT */
.cont-body {
  padding: 5rem;
  background: var(--creme);
  display:grid; grid-template-columns:1fr 1.2fr; gap:4rem;
}
.cont-left h2 {
  font-family:'Playfair Display',serif;
  font-size:1.9rem; font-weight:700;
  color: var(--g900); margin-bottom:.5rem;
}
.cont-left > p {
  font-size:.82rem; color:var(--gris60); line-height:1.8; margin-bottom:2.5rem;
}

/* INFOS GÉNÉRALES */
.cont-infos {
  background: var(--g700);
  padding:1.8rem 2rem; margin-bottom:2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.cinfo {
  display:flex; gap:1rem; align-items:flex-start;
}
.cinfo-icon {
  width:36px; height:36px;
  background: rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0; color:white;
}
.cinfo-lbl {
  font-size:.55rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--g300); display:block; margin-bottom:.2rem;
}
.cinfo-val {
  font-size:.78rem; font-weight:400; color:white; line-height:1.5;
}

/* BOUTIQUES */
.boutiques-list { display:flex; flex-direction:column; gap:1.2rem; }
.boutique {
  background: var(--blanc);
  border: 1.5px solid var(--g100);
  overflow:hidden; cursor:none; transition: var(--trans);
}
.boutique:hover {
  border-color: var(--g300);
  box-shadow: var(--ombre-sm);
  transform: translateX(4px);
}
.bout-head {
  background: var(--g700);
  padding:1.2rem 1.8rem;
  display:flex; align-items:center; gap:1.2rem;
}
.bout-num {
  width:40px; height:40px;
  border: 2px solid var(--or-clair);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:700; color:var(--or-clair);
}
.bout-head h3 {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:700; color:white;
}
.bout-head p {
  font-size:.58rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.bout-body { padding:1.4rem 1.8rem; display:flex; flex-direction:column; gap:.8rem; }
.bout-row { display:flex; gap:.9rem; align-items:flex-start; }
.bout-icon { font-size:.95rem; flex-shrink:0; margin-top:.1rem; }
.bout-lbl {
  font-size:.55rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--or); display:block; margin-bottom:.1rem;
}
.bout-val {
  font-size:.75rem; font-weight:400;
  color: var(--gris80); line-height:1.55;
}
.bout-map-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--g700); color:white; border:none;
  padding:.45rem 1.1rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.58rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  cursor:none; transition:background .3s;
  margin-top:.4rem; width:fit-content;
}
.bout-map-btn:hover { background: var(--g600); }

/* FORMULAIRE */
.cont-form {
  background: var(--blanc);
  border: 1.5px solid var(--g100);
  padding:2.5rem;
  box-shadow: var(--ombre-sm);
}
.cont-form h2 {
  font-family:'Playfair Display',serif;
  font-size:1.7rem; font-weight:700;
  color: var(--g900); margin-bottom:.4rem;
}
.cont-form > p {
  font-size:.78rem; color:var(--gris60); margin-bottom:2rem; line-height:1.7;
}
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.fg { display:flex; flex-direction:column; gap:.35rem; }
.fg.full { grid-column:span 2; }
.fg label {
  font-size:.58rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--g700);
}
.fg input, .fg textarea, .fg select {
  background: var(--gris10); border: 1.5px solid var(--gris20);
  color: var(--noir); padding:.75rem 1rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.8rem; font-weight:400;
  outline:none; cursor:none; transition: border-color .3s, background .3s;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--g500); background: var(--blanc);
}
.fg input::placeholder, .fg textarea::placeholder { color:var(--gris40); }
.fg textarea { resize:vertical; min-height:95px; }
.fg select option { background:white; }
.btn-submit-form {
  background: var(--g700); color:white; border:none;
  padding:.95rem 2.5rem; width:100%; margin-top:.5rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  cursor:none; transition: var(--trans);
  position:relative; overflow:hidden;
}
.btn-submit-form::before {
  content:''; position:absolute; inset:0;
  background: var(--g600);
  transform:translateX(-100%); transition:transform .4s ease;
}
.btn-submit-form:hover::before { transform:translateX(0); }
.btn-submit-form:hover { box-shadow: 0 6px 28px rgba(30,122,82,.35); }
.btn-submit-form span { position:relative; z-index:1; }

/* MAP + HORAIRES */
.maps-hors-section {
  padding: 0 5rem 5rem;
  background: var(--creme);
  display: block; gap:10rem; align-items:start;
}
.maps-block h3 {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; font-weight:700; color:var(--g900);
  margin-bottom:1.5rem;
}
.maps-list { display:flex; flex-direction: column; gap:1rem; }
.map-card-item {
  background:var(--blanc); border:1.5px solid var(--g100); 
  width: 100%;
}
.map-vis {
  height:auto; position:relative;
  background: linear-gradient(135deg, var(--g200), var(--g300));
   align-items:center; justify-content:center;  
}
.map-vis::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(30,122,82,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,122,82,.08) 1px, transparent 1px);
  background-size:25px 25px;
}
.map-pin {
  font-size:2.8rem; position:relative; z-index:1;
  filter: drop-shadow(0 6px 14px rgba(10,35,24,.25));
  animation: pinBounce 2s ease-in-out infinite;
}
@keyframes pinBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.map-card-info {
  padding:1rem 1.3rem;
  border-top: 2px solid var(--g100);
}
.map-card-info strong {
  font-family:'Playfair Display',serif;
  font-size:.95rem; font-weight:700;
  color:var(--g800); display:block; margin-bottom:.25rem;
}
.map-card-info p {
  font-size:.7rem; color:var(--gris60); font-weight:400;
}

.hors-block h3 {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; font-weight:700; color:var(--g900); margin-bottom:1.5rem;
}
.hors-cards { display:flex; flex-direction:column; gap:1rem; }
.hor-card {
  background:var(--blanc); border: 1.5px solid var(--g100); padding:1.5rem 1.8rem;
}
.hor-card h4 {
  font-family:'Playfair Display',serif;
  font-size:1rem; font-weight:700; color:var(--g700);
  margin-bottom:1rem; padding-bottom:.7rem;
  border-bottom: 2px solid var(--g100);
  display:flex; align-items:center; gap:.6rem;
}
.hor-row {
  display:flex; justify-content:space-between;
  padding:.38rem 0; border-bottom:1px solid rgba(30,122,82,.06);
}
.hor-day { font-size:.72rem; font-weight:400; color:var(--gris60); }
.hor-time { font-size:.72rem; font-weight:700; color:var(--g700); }
.hor-off { color:var(--gris40); font-style:italic; font-weight:400; }

/* TOAST */
.toast {
  position:fixed; bottom:2rem; right:2rem;
  background:var(--g700); color:white;
  padding:.9rem 1.8rem;
  font-size:.68rem; font-weight:700;
  letter-spacing:.1em;
  z-index:9997;
  transform:translateY(100px); opacity:0;
  transition: all .4s ease;
  box-shadow: 0 8px 28px rgba(30,122,82,.35);
  display:flex; align-items:center; gap:.7rem;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast::before { content:'✓'; font-size:1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
  /* NAVBAR MOBILE */
  nav { padding: 0 1.5rem; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    gap: 0;
    padding: 1.5rem;
    box-shadow: var(--ombre-sm);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    display: none;
  }
  .nav-menu.open {
    max-height: 500px;
    display: flex;
  }
  .nav-menu a {
    padding: 1rem;
    border-bottom: 1px solid var(--gris20);
    font-size: .8rem;
  }
  .nav-menu a:last-child {
    border-bottom: none;
  }
  .nav-pill {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
  
  
  /* FILTERS MOBILE */
  .filters-toggle {
    display: flex;
  }

  .filters-strip {
    flex-wrap: wrap;
    gap: 0;
    padding: 0.75rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .filters-content {
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .filters-content.open {
    max-height: 800px;
  }

  .filters-strip.expanded .filters-content {
    display: flex;
  }

  .fsearch {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--gris10);
    border: 1.5px solid var(--gris20);
    padding: .55rem 1.1rem;
    width: 100%;
    transition: border-color .3s;
  }

  .fgroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .fbtns {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
  }

  .fsort {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 0;
  }

  .fselect {
    width: 100%;
  }
  
  
 /* REST OF MOBILE STYLES */
  .hero { grid-template-columns:1fr; }
  .hero-right { height:40vh; }
  .hero-left { padding:8rem 1.5rem 4rem; }
  .hero-scroll-hint { display:none; }
  .why-section, .cats-section, .cont-body { padding:4rem 1.5rem; }
  .why-grid { grid-template-columns:1fr; }
  .cats-mosaic { grid-template-columns:1fr; grid-template-rows:auto; gap: 12px; }
  .cat-tile { min-height:200px; }
  .cat-tile:first-child { grid-row:span 1; min-height:200px; }
  .stats-band { grid-template-columns:1fr 1fr; }
  footer { grid-template-columns:1fr; padding:3rem 1.5rem; gap:2rem; }
  .foot-bottom { padding:1.5rem; flex-direction:column; gap:.5rem; }
  .cat-hero, .cont-hero { padding:90px 1.5rem 3rem; }
  .filters-strip { padding:1rem 1.5rem; }
  .cat-grp { padding:2rem 1.5rem 1rem; }
  .prod-grid { grid-template-columns:1fr; }
  .cont-body { grid-template-columns:1fr; }
  .maps-hors-section { grid-template-columns:1fr; padding:0 1.5rem 3rem; }
  .fgrid { grid-template-columns:1fr; }
  .fg.full { grid-column:span 1; }
  .cont-infos { grid-template-columns:1fr; }
}

@media (max-width:900px) {
  nav { padding:0 1.5rem; }
  .hero { grid-template-columns:1fr; }
  .hero-right { height:40vh; }
  .hero-left { padding:8rem 1.5rem 4rem; }
  .hero-scroll-hint { display:none; }
  .why-section, .cats-section, .cont-body { padding:4rem 1.5rem; }
  .why-grid { grid-template-columns:1fr; }
  .cats-mosaic { grid-template-columns:1fr; grid-template-rows:auto; gap: 12px; }
  .cat-tile { min-height:200px; }
  .cat-tile:first-child { grid-row:span 1; min-height:200px; }
  .stats-band { grid-template-columns:1fr 1fr; }
  footer { grid-template-columns:1fr; padding:3rem 1.5rem; gap:2rem; }
  .foot-bottom { padding:1.5rem; flex-direction:column; gap:.5rem; }
  .cat-hero, .cont-hero { padding:90px 1.5rem 3rem; }
  .cat-grp { padding:2rem 1.5rem 1rem; }
  .prod-grid { grid-template-columns:1fr; }
  .cont-body { grid-template-columns:1fr; }
  .maps-hors-section { grid-template-columns:1fr; padding:0 1.5rem 3rem; }
  .fgrid { grid-template-columns:1fr; }
  .fg.full { grid-column:span 1; }
  .cont-infos { grid-template-columns:1fr; }
}