/* ============================================================
   MBS — Medical Blue System
   Design System v3 · "Blanc Givre" · Quiet Luxury
   Architecture : Atomic Design (Tokens → Atoms → Molecules → Organisms)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   TOKEN LAYER — Custom Properties
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Palette Brand ───────────────────────────────────────── */
  --pine-50:    #EBF5EF;
  --pine-100:   #D5E8DF;
  --pine-400:   #7AA88F;
  --pine-500:   #5A7A6E;
  --pine-600:   #3A8060;
  --pine-700:   #2D6A4F;
  --pine-800:   #1B4332;
  --pine-900:   #122B22;
  --pine-950:   #0A1A13;

  --cyan:       #06B6D4;
  --cyan-light: #22D3EE;
  --cyan-dark:  #0891B2;

  --frost:      #F4F7F6;
  --frost-dark: #E4EDE9;
  --white:      #FFFFFF;

  /* ── Palette Premium (Quiet Luxury) ─────────────────────── */
  --gold:       var(--cyan);
  --gold-light: var(--cyan-light);
  --gold-pale:  rgba(6,182,212,0.12);
  --anthracite: #2C2C2C;
  --ecru:       #F5F0E8;
  --noir:       #0A0A0A;

  /* ── Semantic ────────────────────────────────────────────── */
  --text:         #1A2E28;
  --text-muted:   #5A7A6E;
  --border:       #D0E0DB;
  --border-light: #E8EFED;

  /* Aliases */
  --green:       var(--pine-800);
  --green-light: var(--pine-700);
  --green-dark:  var(--pine-900);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.05);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg:    0 20px 50px rgba(0,0,0,0.10);
  --shadow-xl:    0 40px 80px rgba(0,0,0,0.12);
  --shadow-card:  0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-hover: 0 20px 50px rgba(0,0,0,.10), 0 8px 20px rgba(0,0,0,.06);
  --shadow-gold:  0 8px 30px rgba(6,182,212,0.22);
  --shadow-cyan:  0 8px 30px rgba(6,182,212,0.22);
  --shadow-glass: 0 4px 24px rgba(27,67,50,0.10), 0 1px 4px rgba(27,67,50,0.06);
  --shadow-glass-lg: 0 12px 48px rgba(27,67,50,0.14), 0 2px 8px rgba(27,67,50,0.08);

  /* ── Glass Tokens ────────────────────────────────────────── */
  --glass-bg:      rgba(255,255,255,0.72);
  --glass-bg-dark: rgba(18,43,34,0.70);
  --glass-border:  rgba(255,255,255,0.20);
  --glass-blur:    blur(18px);
  --glass-blur-lg: blur(28px);

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-head:    'Montserrat', var(--font-sans);
  --font-display: 'Montserrat', var(--font-sans);

  /* ── Spacing — Golden Ratio φ=1.618 ─────────────────────── */
  --sp-xs:  0.313rem;  /*  5px */
  --sp-sm:  0.500rem;  /*  8px */
  --sp-md:  0.813rem;  /* 13px */
  --sp-lg:  1.313rem;  /* 21px */
  --sp-xl:  2.125rem;  /* 34px */
  --sp-2xl: 3.438rem;  /* 55px */
  --sp-3xl: 5.500rem;  /* 88px */

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w:     1280px;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  420ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 650ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ══════════════════════════════════════════════════════════════
   ATOM LAYER — Reset + Base
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(ellipse 900px 700px at -5% -5%, rgba(6,182,212,.06) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 105% 95%, rgba(45,106,79,.05) 0%, transparent 55%),
    var(--frost);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* bg-ambient alias for body background */
.bg-ambient {
  background:
    radial-gradient(ellipse 900px 700px at -5% -5%, rgba(6,182,212,.06) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 105% 95%, rgba(45,106,79,.05) 0%, transparent 55%),
    var(--frost) !important;
}

img    { max-width: 100%; display: block; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection { background: rgba(6,182,212,.20); color: inherit; }

/* Scrollbar */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(27,67,50,.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,67,50,.45); }

/* Mark highlight */
mark { background: rgba(6,182,212,.22); border-radius: 3px; color: inherit; padding: 0 2px; }


/* ══════════════════════════════════════════════════════════════
   ATOM LAYER — Typography
   ══════════════════════════════════════════════════════════════ */

body h1,
body h2 {
  font-family: var(--font-head) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--pine-900);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--pine-900);
}
h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pine-900);
}
h4 {
  font-family: var(--font-head);
  font-size: 0.925rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pine-900);
}
h3, h4 { font-family: var(--font-head); }

/* Overline — maison de couture style */
.overline {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.overline-cyan { color: var(--cyan-dark); }

/* Section divider — filet cyan */
.section-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan-light) 50%, var(--cyan) 80%, transparent);
  margin: var(--sp-md) auto 0;
  opacity: 0.70;
  border: none;
  border-radius: 2px;
}
.section-rule--left { margin-left: 0; }

.stat-num {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--pine-900);
}
.font-black.text-2xl,
.font-black.text-xl {
  font-family: var(--font-head) !important;
  font-style: normal;
  letter-spacing: -0.01em;
}

/* Cyan section divider lines */
body h2 + div.mt-3 {
  background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan-light) 50%, var(--cyan) 80%, transparent) !important;
  height: 2px !important;
  width: 48px !important;
  opacity: 0.70;
  border-radius: 2px !important;
}

.text-muted  { color: var(--text-muted); }
.text-small  { font-size: 0.85rem; }

/* Line clamp utilities */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ══════════════════════════════════════════════════════════════
   ATOM LAYER — Buttons
   ══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  padding: 10px 22px;
  border-radius: var(--radius);
  transition: all var(--t-med);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pine-900) 0%, var(--pine-800) 100%);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(18,43,34,.22), 0 1px 4px rgba(18,43,34,.12);
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.65s var(--ease);
  pointer-events: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--pine-800) 0%, var(--pine-700) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18,43,34,.28), 0 2px 8px rgba(18,43,34,.14);
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-cta {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-light) 100%);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(6,182,212,.35);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(6,182,212,.50);
}

.btn-ghost {
  background: rgba(255,255,255,.10);
  color: var(--white);
  border-color: rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.40);
  transform: translateY(-2px);
}

.btn-outline {
  background: rgba(255,255,255,.78);
  color: var(--pine-800);
  border-color: var(--border);
}
.btn-outline:hover {
  border-color: var(--cyan);
  background: rgba(6,182,212,.06);
  color: var(--pine-900);
}

.btn-sm  { padding: 7px 16px; font-size: 0.78rem; border-radius: var(--radius-sm); gap: 5px; }
.btn-lg  { padding: 14px 32px; font-size: 0.95rem; }
.btn-xl  { padding: 16px 40px; font-size: 1rem; border-radius: var(--radius-lg); }

.btn-icon {
  width: 38px; height: 38px;
  padding: 0;
  border-radius: var(--radius-sm);
}


/* ══════════════════════════════════════════════════════════════
   ATOM LAYER — Badges
   ══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-best {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-light));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(6,182,212,.35);
}
.badge-cat {
  background: var(--pine-50);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.badge-new {
  background: rgba(6,182,212,.10);
  color: var(--cyan-dark);
  border: 1px solid rgba(6,182,212,.22);
}

/* Badge shine */
.badge-shine { position: relative; overflow: hidden; }
.badge-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent);
  animation: shine 3s infinite;
}


/* ══════════════════════════════════════════════════════════════
   ATOM LAYER — Layout Helpers
   ══════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.section    { padding: var(--sp-2xl) 0; }
.section-sm { padding: var(--sp-xl) 0; }

.section-head         { text-align: center; margin-bottom: var(--sp-2xl); }
.section-head h2      { margin-top: var(--sp-sm); }

/* Section header — text-center spacing boost */
.text-center.mb-12 { margin-bottom: 4rem !important; }


/* ══════════════════════════════════════════════════════════════
   MOLECULE LAYER — Glass Utilities
   ══════════════════════════════════════════════════════════════ */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.50);
}
.glass-strong {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.60);
}
.glass-dark {
  background: rgba(18,43,34,.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.10);
}
.glass-hero {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.20);
}
.header-glass {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.52);
}


/* ══════════════════════════════════════════════════════════════
   MOLECULE LAYER — Product Card
   ══════════════════════════════════════════════════════════════ */
.product-glass {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep on hover */
.product-glass::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.65s var(--ease);
  pointer-events: none;
}
.product-glass:hover {
  transform: translateY(-6px) scale(1.016);
  box-shadow: var(--shadow-hover), 0 0 0 1.5px rgba(6,182,212,.18);
  border-color: rgba(6,182,212,.38);
}
.product-glass:hover::after { transform: translateX(120%); }

/* Expanded state (click to expand description) */
.product-glass.card-expanded {
  border-color: rgba(6,182,212,.48);
  box-shadow: var(--shadow-hover);
}
.product-glass.card-expanded .line-clamp-2,
.product-glass.card-expanded .line-clamp-3 {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.product-expand-hint    { color: rgba(27,67,50,.25); transition: color var(--t-fast); }
.product-expand-chevron { transition: transform var(--t-fast); }
.product-glass:hover .product-expand-hint { color: rgba(6,182,212,.68); }
.product-glass.card-expanded .product-expand-chevron { transform: rotate(180deg); }

/* Best Seller badge — cyan (Tailwind from-cyan-500/to-cyan-400 stays as-is) */

/* CTA buttons in product cards */
[class*="from-pine-800"][class*="to-pine-700"],
[class*="from-pine-800"][class*="to-pine-700"]:not(:hover) {
  background: linear-gradient(135deg, var(--pine-900) 0%, var(--pine-800) 100%) !important;
  letter-spacing: 0.04em;
}
[class*="from-pine-800"][class*="to-pine-700"]:hover,
[class*="from-pine-700"][class*="to-pine-600"]:hover {
  background: linear-gradient(135deg, var(--pine-800) 0%, var(--pine-700) 100%) !important;
}


/* ══════════════════════════════════════════════════════════════
   MOLECULE LAYER — Category Card
   ══════════════════════════════════════════════════════════════ */
.cat-glass {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med), background var(--t-med);
}
.cat-glass:hover {
  transform: translateY(-5px) scale(1.018);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-hover);
  border-color: rgba(6,182,212,.28);
}


/* ══════════════════════════════════════════════════════════════
   MOLECULE LAYER — Filter & Sort Controls
   ══════════════════════════════════════════════════════════════ */
.filter-glass {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.52);
  transition: all var(--t-fast);
}
.filter-glass:hover  { background: rgba(255,255,255,.92); }
.filter-glass.active {
  background: rgba(27,67,50,.08);
  border-color: rgba(27,67,50,.28);
  color: var(--pine-900);
  font-weight: 600;
}

.sort-glass {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.52);
  transition: all var(--t-fast);
}
.sort-glass.active {
  background: linear-gradient(135deg, var(--pine-900), var(--pine-800));
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(18,43,34,.22);
}
.sort-glass:hover:not(.active) {
  border-color: rgba(6,182,212,.38);
  color: var(--pine-800);
}


/* ══════════════════════════════════════════════════════════════
   ORGANISM LAYER — Search Float (hero)
   ══════════════════════════════════════════════════════════════ */
.search-float {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,255,255,.28);
  box-shadow: 0 24px 64px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.15);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-float:focus-within {
  border-color: rgba(6,182,212,.70);
  box-shadow: 0 24px 64px rgba(0,0,0,.25), 0 0 0 4px rgba(6,182,212,.18), 0 0 40px rgba(6,182,212,.25), inset 0 1px 0 rgba(255,255,255,.15);
}


/* ══════════════════════════════════════════════════════════════
   ORGANISM LAYER — Search Overlay
   ══════════════════════════════════════════════════════════════ */
#searchOverlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast), visibility var(--t-fast);
}
#searchOverlay.open { opacity: 1; visibility: visible; }

#searchBox {
  transform: translateY(-14px) scale(.97);
  transition: transform var(--t-med);
}
#searchOverlay.open #searchBox { transform: translateY(0) scale(1); }

#searchResults  { max-height: 420px; overflow-y: auto; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--sp-md);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--t-fast);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--frost); }

.sri-icon {
  width: 38px; height: 38px;
  background: var(--frost);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--pine-800); flex-shrink: 0;
}
.sri-body { flex: 1; min-width: 0; }
.sri-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sri-meta { font-size: .75rem; color: var(--text-muted); }
.sri-badge {
  padding: 2px 8px; border-radius: 20px;
  font-size: .70rem; font-weight: 600; flex-shrink: 0;
}
.sri-badge.best { background: rgba(6,182,212,.10); color: var(--cyan-dark); border: 1px solid rgba(6,182,212,.22); }

.search-empty { padding: var(--sp-xl); text-align: center; color: var(--text-muted); }
.search-hint {
  padding: 10px var(--sp-md);
  font-size: .78rem; color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  display: flex; gap: var(--sp-sm); align-items: center;
}
.search-hint kbd {
  display: inline-block; padding: 1px 6px;
  background: var(--frost); border: 1px solid var(--border);
  border-radius: 4px; font-size: .70rem;
}


/* ══════════════════════════════════════════════════════════════
   ORGANISM LAYER — Catalogue Dropdown
   ══════════════════════════════════════════════════════════════ */
/* Transition uniquement — l'ouverture/fermeture est gérée via panel.style.* en JS */
#catDropdownPanel {
  transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast);
}
#catChevron { transition: transform var(--t-fast); }

.cat-trigger-active > a {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  border-color: rgba(27,67,50,.18) !important;
}
.cat-trigger-active .cat-trigger-icon {
  background: linear-gradient(135deg, var(--pine-800), var(--pine-700)) !important;
  color: var(--white) !important;
  box-shadow: 0 4px 16px rgba(27,67,50,.25);
}


/* ══════════════════════════════════════════════════════════════
   ORGANISM LAYER — Mobile Drawer
   ══════════════════════════════════════════════════════════════ */
#mobileDrawer {
  transform: translateX(-100%);
  transition: transform var(--t-med);
}
#mobileDrawer.open { transform: translateX(0); }

/* display:none géré par le JS — le CSS anime uniquement la transition */
#drawerOverlay {
  opacity: 0;
  transition: opacity var(--t-fast);
}
#drawerOverlay.open { opacity: 1; }

/* Accordion */
.drawer-acc .drawer-acc-panel { display: none; }
.drawer-acc.open .drawer-acc-panel { display: block; }
.drawer-acc.open .drawer-chevron { transform: rotate(180deg); }
.drawer-chevron { transition: transform var(--t-fast); }


/* ══════════════════════════════════════════════════════════════
   ORGANISM LAYER — Hero
   ══════════════════════════════════════════════════════════════ */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-glow-tl {
  background: radial-gradient(ellipse 750px 650px at 8% 28%, rgba(6,182,212,.18) 0%, transparent 65%);
}
.hero-glow-br {
  background: radial-gradient(ellipse 550px 450px at 92% 72%, rgba(45,106,79,.28) 0%, transparent 60%);
}


/* ══════════════════════════════════════════════════════════════
   ORGANISM LAYER — Page Header (catalogue pages)
   ══════════════════════════════════════════════════════════════ */
.page-header-bg {
  background: linear-gradient(135deg, var(--pine-950) 0%, var(--pine-800) 55%, var(--pine-700) 100%);
}


/* ══════════════════════════════════════════════════════════════
   ORGANISM LAYER — Social Float
   ══════════════════════════════════════════════════════════════ */
.social-btn {
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.social-btn:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}


/* ══════════════════════════════════════════════════════════════
   UTILITY LAYER — Scroll Reveal
   ══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .70s var(--ease), transform .70s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-fade { opacity: 0; transition: opacity .80s var(--ease); }
.reveal-fade.is-visible { opacity: 1; }

.reveal-left {
  opacity: 0; transform: translateX(-26px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal-right {
  opacity: 0; transform: translateX(26px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal-left.is-visible,
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Stagger delays */
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; }


/* ══════════════════════════════════════════════════════════════
   UTILITY LAYER — Special Effects & Keyframes
   ══════════════════════════════════════════════════════════════ */

/* Badge shine sweep */
@keyframes shine {
  0%        { left: -100%; }
  40%, 100% { left:  120%; }
}

/* Gold shimmer text */
@keyframes shimmer-cyan {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.text-shimmer-gold,
.text-shimmer-cyan {
  background: linear-gradient(90deg, var(--cyan), var(--cyan-light), var(--cyan), var(--cyan-light));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-cyan 4s linear infinite;
}

/* Pulse CTA glow */
@keyframes pulse-ambient {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6,182,212,0); }
  50%       { box-shadow: 0 0 0 10px rgba(6,182,212,.10); }
}
.pulse-cta { animation: pulse-ambient 3.5s var(--ease) infinite; }

/* Scale-in (dynamic content) */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.scale-in        { animation: scaleIn .40s var(--ease) both; }
.animate-scale-in { animation: scaleIn .40s var(--ease) both; }

/* Fade-up (hero, page load) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp .45s var(--ease) both; }

/* Fade-in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fade-in { animation: fadeIn .30s var(--ease) both; }

/* Pulse slow (ambient orbs) */
@keyframes pulseSlow {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}
.animate-pulse-slow { animation: pulseSlow 4s cubic-bezier(0.4,0,0.6,1) infinite; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile overrides
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding: 0 var(--sp-md); }
  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.35rem, 6vw, 1.85rem); }
  .section { padding: var(--sp-xl) 0; }

  /* Touch targets minimum 44px */
  .cat-glass, .cat-trigger a, .filter-glass, .sort-glass { min-height: 44px; }

  /* Supprime le survol sur touch (évite l'état "collant" après tap) */
  @media (hover: none) {
    .cat-glass:hover      { transform: none; box-shadow: var(--shadow-card); }
    .product-glass:hover  { transform: none; box-shadow: var(--shadow-card); }
  }

  /* Scrollbar horizontale invisible sur les chips filtres */
  .scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
  .scrollbar-none::-webkit-scrollbar { display: none; }
}