:root {
  --dark: #1e4177;
  --dark-2: #27508c;
  --dark-3: #2f5c9e;
  --blue: #1f6fb2;
  /* Light blue for accents on the dark navy surfaces. Lightened when --dark
     moved from near-black to #1e4177: at the old tint this fell to 3.49:1
     against the new background, below the 4.5:1 needed for small text such as
     the hero eyebrow and the mega-menu links. */
  --blue-light: #79bde7;
  /* Official brand blue (from the real TEEKA logo) — now the primary accent.
     Deep navy for solid fills / text on light backgrounds; --blue-light (above)
     is used where a brand-blue accent needs to pop against dark backgrounds. */
  --brand-blue: #1a3a6b;
  --brand-blue-dark: #122a4f;
  --brand-blue-rgb: 26, 58, 107;
  /* Secondary accent only — mirrors the gold tagline treatment ("La Force du
     Solaire") on TEEKA's real materials. Not used for primary buttons/CTAs. */
  --orange: #f5a83c;
  --orange-dark: #e08a1a;
  --text-light: #f5f7fa;
  --text-muted: #a9b4c2;
  --text-dark: #1b2431;
  --bg-light: #f5f7fa;
  --bg-card: #ffffff;
  --border-light: #e3e7ed;
  --radius: 10px;
  --shadow: 0 4px 16px rgba(18, 24, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(18, 24, 31, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-dark);
  background: var(--bg-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Language switcher ---------- */
.lang-switch {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch button.active { background: var(--brand-blue); color: #fff; }
.mobile-nav .lang-switch { align-self: flex-start; margin-top: 4px; }

/* ---------- Brands / trust strip ---------- */
.brands {
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 40px 0;
}
.brands-head {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93a1;
  margin-bottom: 24px;
}
.brands-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.brand-badge {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--dark-2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 20px;
  background: var(--bg-light);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.brand-badge:hover { border-color: var(--blue-light); color: var(--blue); transform: translateY(-2px); }

/* ---------- Trust badges (contact) ---------- */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #3c4653;
  background: #eef4fa;
  border-radius: 999px;
  padding: 7px 14px;
}
.trust-chip svg { width: 14px; height: 14px; stroke: var(--blue); }

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 72px 0; }
section[id] { scroll-margin-top: 84px; }
.cat-strip { scroll-margin-top: 84px; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 10px;
}

h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; }

.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: 2rem; color: var(--dark-2); margin-bottom: 12px; }
.section-head p { color: #5b6675; font-size: 1.02rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand-blue); color: #fff; box-shadow: 0 6px 18px rgba(var(--brand-blue-rgb), 0.35); }
.btn-primary:hover { background: var(--brand-blue-dark); }
.btn-ghost { background: rgba(255,255,255,0.08); color: var(--text-light); border: 1px solid rgba(255,255,255,0.35); }
.btn-ghost:hover { background: rgba(255,255,255,0.18); }
.btn-dark { background: var(--dark-2); color: var(--text-light); }
.btn-dark:hover { background: var(--dark); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.brand-mark {
  height: 48px;
  width: 60px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px 5px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.brand-text { line-height: 1.15; flex-shrink: 0; text-align: center; }
.brand-text span { display: block; color: var(--orange); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }

nav.main-nav { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
nav.main-nav a {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease;
}
nav.main-nav a:hover { color: #fff; }
nav.main-nav .mega-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(var(--brand-blue-rgb), 0.18);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.5);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 16px;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
nav.main-nav .mega-trigger:hover,
nav.main-nav .mega-trigger.open { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.phone-pill {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-light); font-size: 0.85rem; font-weight: 700;
  white-space: nowrap;
}
.header-actions .btn-primary { white-space: nowrap; }
.phone-pill svg { width: 16px; height: 16px; stroke: var(--blue-light); flex-shrink: 0; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--dark);
  color: var(--text-light);
  padding: 0;
}

/* Promotions & news ticker */
.promo-ticker {
  background: var(--brand-blue);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  position: sticky;
  top: var(--header-h, 70px);
  z-index: 90;
}
.promo-ticker-track {
  display: inline-flex;
  gap: 48px;
  padding: 9px 0;
  /* Duration is tied to the number of ticker items (11): the track always
     travels the same -50%, so more items must take proportionally longer or
     the messages scroll past too fast to read. ~6.8s per item. */
  animation: marquee-left 75s linear infinite;
  width: max-content;
}
.promo-ticker-item {
  font-size: 0.83rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .promo-ticker-track { animation: none; }
}

@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Hero promotional carousel ---------- */
.hero-carousel {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.9s ease;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide .hero-overlay {
  position: absolute; inset: 0;
  z-index: 0;
  /* Tinted with the navy from --dark rather than near-black, and eased off so
     the carousel photo reads through. The left-hand stops stay densest because
     the headline and body copy sit there. */
  background: linear-gradient(100deg, rgba(20,45,82,0.90) 0%, rgba(22,50,90,0.78) 38%, rgba(22,50,90,0.44) 68%, rgba(22,50,90,0.12) 100%);
  pointer-events: none;
}
.hero-slide-content { position: relative; z-index: 1; max-width: 640px; padding: 100px 24px 70px; }
.hero-slide-content .eyebrow { color: var(--blue-light); }
.hero-slide-content h1 { font-size: 2.9rem; margin-bottom: 18px; }
.hero-slide-content h1 span { color: var(--blue-light); }
.hero-slide-content p { color: var(--text-muted); font-size: 1.08rem; margin-bottom: 32px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Full-graphic promo flyer slides — the image already carries its own text,
   so no dark gradient overlay and no duplicate headline. The CTA sits in its
   own strip below the image (never overlapping the flyer's own text). */
.hero-slide.flyer {
  background: var(--dark);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 24px 0;
}
.hero-slide.flyer .flyer-img {
  max-width: 100%;
  max-height: calc(100% - 76px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.hero-slide.flyer .btn {
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.hero-dots {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 9px;
}
.hero-dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dots button.active { background: var(--blue-light); transform: scale(1.25); }

.hero-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(15,21,28,0.4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hero-arrow:hover { background: rgba(15,21,28,0.7); }
.hero-arrow svg { width: 20px; height: 20px; stroke: #fff; }
.hero-arrow-prev { left: 20px; }
.hero-arrow-next { right: 20px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

.hero-stats { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 34px; }
.hero-stats div strong { display: block; font-size: 1.5rem; color: #fff; }
.hero-stats div span { font-size: 0.82rem; color: var(--text-muted); }

/* ---------- Category strip ---------- */
.cat-strip { background: var(--dark-2); padding: 0; }
.cat-strip .container { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; }
.cat-strip button {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 8px;
  font-size: 0.78rem; font-weight: 700; text-align: center;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cat-strip button svg { width: 26px; height: 26px; stroke: currentColor; }
.cat-strip button:hover { color: #fff; background: rgba(255,255,255,0.03); }
.cat-strip button.active { color: var(--blue-light); border-bottom-color: var(--blue-light); background: rgba(var(--brand-blue-rgb), 0.1); }

/* ---------- Products ---------- */
.products-panel { display: none; animation: fadeIn 0.25s ease; }
.products-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none; } }

.panel-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.panel-intro h3 { font-size: 1.5rem; color: var(--dark-2); }
.panel-intro p { color: #5b6675; font-size: 0.95rem; max-width: 480px; }

.subcat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.subcat-chip {
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: #5b6675;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.subcat-chip .count { opacity: 0.6; font-weight: 600; margin-left: 3px; }
.subcat-chip:hover { border-color: var(--blue-light); color: var(--blue); }
.subcat-chip.active { background: var(--dark-2); border-color: var(--dark-2); color: #fff; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  perspective: 1200px;
}
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.22s ease-out, box-shadow 0.22s ease;
  will-change: transform;
  cursor: pointer;
  position: relative;
}
/* Hover/focus zooms the card straight forward. z-index lifts it above its
   neighbours so the grown edges are not clipped by the next card in the grid. */
.product-card:hover,
.product-card:focus-within {
  box-shadow: var(--shadow-lg);
  transform: scale(1.06);
  z-index: 2;
}
.product-card .card-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: #eef1f5;
  animation: cardFloat 3.8s ease-in-out infinite;
}
/* Stagger the float so cards don't all bob in sync */
.product-card:nth-child(2n) .card-img { animation-duration: 4.3s; animation-delay: -1.4s; }
.product-card:nth-child(3n) .card-img { animation-duration: 3.6s; animation-delay: -2.1s; }
.product-card:nth-child(5n) .card-img { animation-duration: 4.7s; animation-delay: -0.7s; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card .card-img { animation: none; }
  .product-card { transition: none; }
  /* Drop the zoom rather than let it snap instantly to full size, which is a
     harsher motion than the animation it is meant to replace. The shadow
     still marks which card is hovered. */
  .product-card:hover,
  .product-card:focus-within { transform: none; }
}
.product-card::after {
  content: "💬";
  position: absolute;
  top: 104px;
  right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.product-card:hover::after { opacity: 1; transform: translateY(0); }
.product-card .tag {
  display: inline-block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--blue); background: rgba(31,111,178,0.1);
  padding: 3px 9px; border-radius: 999px; margin: 16px 18px 12px; text-transform: uppercase;
}
.product-card h4 { font-size: 0.98rem; color: var(--dark-2); margin: 0 18px 10px; min-height: 44px; }
.product-card .price { font-size: 1.2rem; font-weight: 800; color: var(--brand-blue); margin: 0 18px 18px; }
.product-card .price small { font-size: 0.7rem; color: #8a93a1; font-weight: 600; margin-left: 4px; }
.product-card.no-match { display: none !important; }
.product-card.subcat-hidden { display: none !important; }

.add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 36px);
  margin: 0 18px 18px;
  padding: 10px 12px;
  background: var(--dark-2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.add-to-cart svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }
.add-to-cart:hover { background: var(--blue); }
.add-to-cart:active { transform: scale(0.97); }
.add-to-cart.added { background: #1f7a4d; }

/* ---------- Cart icon + badge (header) ---------- */
.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  flex-shrink: 0;
}
.cart-btn svg { width: 18px; height: 18px; stroke: #fff; }
.cart-btn .cart-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.cart-btn .cart-badge:empty,
.cart-btn .cart-badge[data-count="0"] { display: none; }
.mobile-nav .cart-btn {
  width: auto; height: auto; border-radius: 999px;
  justify-content: flex-start;
  padding: 8px 14px;
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.95rem;
}
.mobile-nav .cart-btn .cart-badge { position: static; margin-left: 4px; }

/* ---------- Shop modal (Boutique — full screen) ---------- */
body.modal-open { overflow: hidden; }
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.shop-modal.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.shop-modal-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: var(--dark);
  color: #fff;
}
.shop-modal-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; }
.shop-modal-brand img { width: 32px; height: 32px; border-radius: 50%; }
.shop-modal-close {
  background: rgba(255,255,255,0.1);
  border: none; color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.shop-modal-close svg { width: 17px; height: 17px; }
.shop-modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.shop-modal-body .cat-strip { position: sticky; top: 0; z-index: 5; scroll-margin-top: 0; }

/* ---------- Info modals (Pourquoi nous / À propos / Contact) ---------- */
.info-overlay {
  position: fixed; inset: 0;
  background: rgba(10,14,19,0.6);
  z-index: 320;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.info-overlay.open { opacity: 1; pointer-events: auto; }

.info-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  width: min(900px, 92vw);
  max-height: 86vh;
  background: var(--bg-light);
  border-radius: 16px;
  z-index: 321;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.info-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }

.info-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  background: var(--dark);
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}
.info-modal-head .eyebrow { color: var(--blue-light); margin: 0; }
.info-modal-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-modal-close svg { width: 17px; height: 17px; }

.info-modal-body {
  overflow-y: auto;
  padding: 32px 28px 36px;
}
.info-modal-body h2 { font-size: 1.7rem; color: var(--dark-2); margin-bottom: 12px; }
.info-modal-body > p { color: #5b6675; font-size: 1rem; margin-bottom: 28px; max-width: 640px; }
.info-modal-body .about { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.info-modal-body .about-media img { border-radius: 12px; box-shadow: var(--shadow-lg); }
.info-modal-body .about-text p { color: #4b5563; margin-bottom: 14px; }
.info-modal-body .about-list { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.info-modal-body .about-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: #374151; }
.info-modal-body .about-list svg { width: 16px; height: 16px; stroke: var(--blue); flex-shrink: 0; margin-top: 2px; }
.brands-inline { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border-light); }
.brands-inline .brands-head { text-align: left; margin-bottom: 16px; }
@media (max-width: 720px) {
  .info-modal-body .about { grid-template-columns: 1fr; }
}

/* ---------- Cart drawer ---------- */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(10,14,19,0.55);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--bg-light);
  z-index: 301;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 32px rgba(0,0,0,0.25);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  background: var(--dark);
  color: #fff;
  flex-shrink: 0;
}
.cart-drawer-head h3 { font-size: 1.1rem; }
.cart-drawer-head button {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cart-drawer-head button svg { width: 16px; height: 16px; }

.cart-drawer-note {
  font-size: 0.76rem;
  color: #5b6675;
  background: #eef4fa;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-empty {
  text-align: center;
  color: #8a93a1;
  font-size: 0.92rem;
  padding: 60px 20px;
}
.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px;
}
.cart-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.cart-item-name { font-size: 0.82rem; font-weight: 700; color: var(--dark-2); margin-bottom: 4px; line-height: 1.25; }
.cart-item-price { font-size: 0.78rem; color: #8a93a1; }
.cart-item-controls { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cart-item-controls button {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: var(--dark-2);
  line-height: 1;
}
.cart-item-controls span { font-size: 0.82rem; font-weight: 700; min-width: 18px; text-align: center; }
.cart-item-remove {
  align-self: flex-start;
  background: none; border: none; cursor: pointer;
  color: #b9412c;
  padding: 4px;
}
.cart-item-remove svg { width: 15px; height: 15px; }
.cart-item-total { font-weight: 800; color: var(--brand-blue); font-size: 0.86rem; text-align: right; }

.cart-drawer-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border-light);
  padding: 18px 22px 22px;
  background: var(--bg-card);
}
.cart-subtotal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.cart-subtotal-row span:first-child { font-size: 0.88rem; color: #5b6675; font-weight: 700; }
.cart-subtotal-row strong { font-size: 1.3rem; color: var(--dark-2); }
.cart-clear {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: #8a93a1;
  font-size: 0.78rem;
  margin-top: 10px;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Product search ---------- */
.product-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 12px 20px;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}
.product-search svg { width: 18px; height: 18px; stroke: #8a93a1; flex-shrink: 0; }
.product-search input {
  border: none; outline: none; flex: 1;
  font-size: 0.95rem; font-family: inherit; color: var(--text-dark);
  background: none;
}
.product-search .search-count { font-size: 0.78rem; color: #8a93a1; font-weight: 600; white-space: nowrap; }
body.searching .products-panel { display: block !important; animation: none; }
body.searching .panel-intro, body.searching .catalog-note, body.searching .cat-strip { display: none !important; }
.search-empty { display: none; text-align: center; padding: 40px 20px; color: #8a93a1; }
body.searching .search-empty.visible { display: block; }

.catalog-note {
  margin-top: 32px;
  background: linear-gradient(120deg, #eef4fa, #fdf3e4);
  border: 1px dashed #cfd9e6;
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.catalog-note p { color: #3c4653; font-size: 0.94rem; }
.catalog-note strong { color: var(--dark-2); }

/* ---------- Why us ---------- */
.why { background: var(--dark); color: var(--text-light); }
.why .section-head h2 { color: #fff; }
.why .section-head p { color: var(--text-muted); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
}
.why-card {
  background: var(--dark-3);
  border-radius: var(--radius);
  padding: 26px 22px;
  border: 1px solid rgba(255,255,255,0.06);
}
.why-card .icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(var(--brand-blue-rgb), 0.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.why-card .icon svg { width: 24px; height: 24px; stroke: var(--blue-light); }
.why-card h4 { font-size: 1.02rem; margin-bottom: 8px; color: #fff; }
.why-card p { font-size: 0.9rem; color: var(--text-muted); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-media img { border-radius: var(--radius); }
.about-text .eyebrow { color: var(--brand-blue); }
.about-text h2 { font-size: 2rem; color: var(--dark-2); margin-bottom: 18px; }
.about-text p { color: #4b5563; margin-bottom: 16px; }
.about-list { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.about-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; color: #374151; }
.about-list svg { width: 18px; height: 18px; stroke: var(--blue); flex-shrink: 0; margin-top: 2px; }

/* ---------- Contact ---------- */
.contact { background: var(--bg-light); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; }
.contact-grid > * { min-width: 0; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 22px;
  display: flex; gap: 16px; align-items: flex-start;
  box-shadow: var(--shadow);
}
.info-card .icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(var(--brand-blue-rgb), 0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-card .icon svg { width: 22px; height: 22px; stroke: var(--brand-blue); }
.info-card h4 { font-size: 0.95rem; color: var(--dark-2); margin-bottom: 4px; }
.info-card p, .info-card a { font-size: 0.9rem; color: #5b6675; }
.info-card a:hover { color: var(--blue); }

.agencies-card { align-items: flex-start; }
.agency-group { margin-top: 10px; }
.agency-group:first-of-type { margin-top: 8px; }
.agency-group strong {
  display: block; font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--brand-blue); margin-bottom: 4px;
}
.agency-group ul { list-style: none; display: grid; gap: 4px; }
.agency-group li {
  /* center, not baseline: the round WhatsApp button has no text baseline and
     would otherwise sit visibly above the phone number. */
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 0.85rem; padding: 3px 0;
}
.agency-group li span { color: #5b6675; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.agency-group li a { font-weight: 700; color: var(--dark-2); white-space: nowrap; flex-shrink: 0; }
.agency-group li a:hover { color: var(--blue); }

.cart-branch-field { margin: 4px 0 14px; }
.cart-branch-field label { font-size: 0.78rem; font-weight: 700; color: #374151; display: block; margin-bottom: 6px; }
.cart-branch-field select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-light); border-radius: 8px;
  font-size: 0.85rem; font-family: inherit; color: var(--text-dark); background: #fbfcfd;
}

.whatsapp-card {
  background: #1f7a4d;
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow);
}
.whatsapp-card svg { width: 30px; height: 30px; flex-shrink: 0; }
.whatsapp-card a { font-weight: 700; text-decoration: underline; }

form.quote-form {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
}
form.quote-form h3 { color: var(--dark-2); font-size: 1.2rem; margin-bottom: 4px; }
form.quote-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.quote-form .row > *, form.quote-form > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 700; color: #374151; }
.field input, .field select, .field textarea {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--text-dark);
  background: #fbfcfd;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(74,159,216,0.15);
}
.form-note { font-size: 0.78rem; color: #8a93a1; }

/* ---------- Footer ---------- */
footer { background: var(--dark); color: var(--text-muted); padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.footer-grid h5 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { font-size: 0.88rem; color: var(--text-muted); }
.footer-grid a:hover { color: var(--blue-light); }
.footer-brand p { font-size: 0.88rem; margin-top: 12px; max-width: 300px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.8rem; color: #6b7686;
}

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cat-strip .container { grid-template-columns: repeat(3, 1fr); }
  .about { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  nav.main-nav, .header-actions .phone-pill, .header-actions .lang-switch { display: none; }
  .nav-toggle { display: block; }
  .brand-text strong { font-size: 1rem; }
  .header-actions { gap: 8px; }
  .header-actions .btn-primary { padding: 11px 16px; font-size: 0.82rem; white-space: nowrap; }
  .hero-overlay { background: rgba(20, 45, 82, 0.82); }
  .hero-slide-content h1 { font-size: 2.1rem; }
  .hero-arrow { display: none; }
  .hero-stats { gap: 20px; }
  .hero-carousel { min-height: 460px; }
  .hero-slide.flyer { padding: 16px 16px 0; gap: 12px; }
  .hero-slide.flyer .flyer-img { max-height: calc(100% - 58px); }
  form.quote-form .row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cat-strip .container { grid-template-columns: repeat(3, 1fr); }
}

/* Compact horizontal-scroll category strip on phones — the 3-column wrapped
   grid above eats ~350px of a phone screen before any product is visible. */
@media (max-width: 640px) {
  .cat-strip .container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-strip .container::-webkit-scrollbar { display: none; }
  .cat-strip button {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 12px 14px;
    white-space: nowrap;
  }
  .cat-strip button svg { width: 16px; height: 16px; }
  /* Phone hero.
     The branded slide carries an eyebrow, a 3-line headline, a paragraph, two
     buttons and a stats row. At the desktop sizes that stack came to ~657px
     inside a 340px carousel, so the buttons were clipped. Everything below is
     tightened for the phone and the carousel is allowed to fit its content. */
  /* Slides are position:absolute, so the carousel needs an explicit height —
     auto would collapse it. 500px fits the tightened content stack (~453px)
     with a little breathing room. */
  .hero-carousel { min-height: 500px; }
  .hero-slide.flyer { padding: 12px 12px 0; gap: 10px; }
  .hero-slide.flyer .flyer-img { max-height: calc(100% - 50px); }

  .hero-slide-content { padding: 34px 20px 28px; }
  .hero-slide-content .eyebrow { font-size: 0.68rem; letter-spacing: 0.09em; margin-bottom: 8px; }
  .hero-slide-content h1 { font-size: 1.72rem; line-height: 1.18; margin-bottom: 12px; }
  .hero-slide-content p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 20px; }

  /* Full-width stacked buttons: side by side they were 220px each in a 327px
     container, so they wrapped into a ragged two-line block. */
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 14px 20px; }

  /* Three stats read better as a single row of thirds than as a wrapped flex
     line that left the third item stranded on its own. */
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
                padding-top: 18px; padding-bottom: 22px; }
  .hero-stats div strong { font-size: 1.15rem; }
  .hero-stats div span { font-size: 0.7rem; line-height: 1.25; display: block; }

  /* Keep the floating WhatsApp button clear of the last row of content */
  .wa-float { width: 52px; height: 52px; bottom: 16px; right: 16px; }
  .wa-float svg { width: 26px; height: 26px; }
}

/* Very narrow phones: brand text + quote button no longer fit beside the
   hamburger/cart icons without wrapping into each other. */
@media (max-width: 480px) {
  .header-actions .btn-primary { display: none; }
  .brand-text span { display: none; }
  .brand-mark { height: 42px; width: 52px; }
  .nav-wrap { padding: 10px 16px; gap: 8px; }
}

/* ---------- Categories mega-menu ---------- */
.mega-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mega-trigger svg.chev { width: 12px; height: 12px; transition: transform 0.15s ease; }
.mega-trigger.open svg.chev { transform: rotate(180deg); }

.mega-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: var(--dark-2);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  display: none;
  z-index: 90;
  max-height: 70vh;
  overflow-y: auto;
}
.mega-panel.open { display: block; }
.mega-panel-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.mega-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
}
.mega-col-title svg { width: 15px; height: 15px; stroke: var(--blue-light); flex-shrink: 0; }
.mega-col ul { list-style: none; display: grid; gap: 8px; }
.mega-col a {
  font-size: 0.82rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.mega-col a:hover { color: var(--blue-light); }
.mega-col a .count { opacity: 0.55; font-size: 0.72rem; margin-left: 4px; }
.mega-col-all {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-light);
}
.mega-col-all:hover { color: #fff; text-decoration: underline; }
.mega-col:hover .mega-col-title { border-color: rgba(var(--brand-blue-rgb), 0.6); }

/* Mobile: accordion inside mobile-nav */
.mobile-categories { display: flex; flex-direction: column; gap: 2px; }
.mobile-cat-group { border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border: none;
  color: var(--text-light);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 0;
  cursor: pointer;
}
.mobile-cat-head svg.chev { width: 14px; height: 14px; transition: transform 0.15s ease; flex-shrink: 0; }
.mobile-cat-label { display: flex; align-items: center; gap: 10px; }
.mobile-cat-label svg { width: 17px; height: 17px; stroke: var(--blue-light); flex-shrink: 0; }
.mobile-cat-head.open svg.chev { transform: rotate(180deg); }
.mobile-cat-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 12px 14px;
}
.mobile-cat-sub.open { display: flex; }
.mobile-cat-sub a { font-size: 0.85rem; color: var(--text-muted); padding: 6px 0; }
.mobile-cat-sub a .count { opacity: 0.55; font-size: 0.75rem; margin-left: 4px; }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--dark-2);
  padding: 12px 24px 20px;
  gap: 14px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { color: var(--text-light); font-weight: 600; font-size: 0.95rem; }

/* ---------- Presentation mode: obscure prices ---------- */
.price,
.cart-item-price,
.cart-item-total,
#cartSubtotal {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}



/* ---------- Familles de produits (page d'accueil) ----------
   Bloc clair volontairement place entre le hero et le pied de page : sans lui
   la page d'accueil est entierement bleu marine, ce qui la rend lourde et ne
   montre aucun produit. */
.cat-tiles { background: var(--bg-light); padding: 56px 0 64px; }
.cat-tiles .section-head { margin-bottom: 32px; }
.cat-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-lg);
}
.cat-tile .cat-tile-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--brand-blue-rgb), 0.10);
  flex-shrink: 0;
}
.cat-tile svg { width: 23px; height: 23px; stroke: var(--brand-blue); fill: none; }
.cat-tile .cat-tile-name {
  font-weight: 700; font-size: 0.93rem; color: var(--dark-2); line-height: 1.25;
}
.cat-tile .cat-tile-count { font-size: 0.78rem; color: #6b7686; font-weight: 600; }

@media (max-width: 900px) {
  .cat-tiles-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cat-tiles { padding: 40px 0 44px; }
  .cat-tiles .section-head { margin-bottom: 22px; }
  .cat-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-tile { padding: 18px 10px; gap: 8px; }
  .cat-tile .cat-tile-icon { width: 40px; height: 40px; }
  .cat-tile svg { width: 20px; height: 20px; }
  .cat-tile .cat-tile-name { font-size: 0.85rem; }
  .cat-tile .cat-tile-count { font-size: 0.72rem; }
}


/* Bouton WhatsApp par agence, a cote du numero d'appel dans « Nos Agences ».
   Le numero reste un lien tel: ; celui-ci ouvre WhatsApp avec l'agence deja
   nommee dans le message, pour que le vendeur sache de quelle boutique il
   s'agit. */
.branch-wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: #25D366;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.branch-wa:hover { transform: scale(1.1); filter: brightness(1.08); }
.branch-wa svg { width: 16px; height: 16px; fill: #fff; }