/* ==========================================================
   MICRONEST.MA — DESIGN v3  |  Moderne & Minimaliste
   Palette : #0f172a (dark) · #2563eb (blue) · #f8fafc (light)
   ========================================================== */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800;900&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --c-dark:       #0f172a;
  --c-dark-2:     #1e293b;
  --c-blue:       #2563eb;
  --c-blue-dark:  #1d4ed8;
  --c-blue-bg:    #eff6ff;
  --c-white:      #ffffff;
  --c-bg:         #f8fafc;
  --c-border:     #e2e8f0;
  --c-text:       #0f172a;
  --c-muted:      #64748b;
  --c-wa:         #25d366;
  --c-wa-dark:    #16a34a;
  --c-orange:     #ea580c;

  --r:            12px;
  --r-lg:         18px;
  --r-full:       999px;

  --sh:           0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --sh-hover:     0 4px 16px rgba(0,0,0,.08), 0 12px 40px rgba(37,99,235,.12);

  --t:            all .2s ease;
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--c-text) !important;
  background: var(--c-white) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  color: var(--c-dark) !important;
  line-height: 1.2 !important;
}

a { transition: var(--t); }

/* ── Header ───────────────────────────────────────────────── */
.header {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}

/* ── Logo ─────────────────────────────────────────────────── */
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  width: 34px !important;
  height: 34px !important;
  background: var(--c-blue) !important;
  color: #fff !important;
  border-radius: 9px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

.logo-text-wrap {
  display: inline-flex;
  align-items: center;
}

.logo-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--c-dark) !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
}

.logo-name span {
  color: var(--c-blue) !important;
  font-weight: 500 !important;
}

/* ── Navigation ───────────────────────────────────────────── */
.nav-links a {
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: .88rem !important;
  letter-spacing: .01em !important;
}

.nav-links a:hover { color: var(--c-blue) !important; }

.nav-submenu {
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.1) !important;
  border-radius: var(--r) !important;
}

.nav-submenu a {
  color: #374151 !important;
  font-size: .85rem !important;
}

.nav-submenu a:hover {
  background: var(--c-bg) !important;
  color: var(--c-blue) !important;
}

.nav-submenu a i { color: var(--c-blue) !important; }

/* Mega brands dropdown */
.nav-submenu--brands {
  min-width: 480px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  padding: 12px !important;
  gap: 2px !important;
}

.nav-submenu--brands li { list-style: none !important; }

.nav-submenu--brands a {
  border-radius: 8px !important;
  padding: 9px 14px !important;
}

/* ── Hamburger ────────────────────────────────────────────── */
.hamburger {
  color: var(--c-dark) !important;
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 9px !important;
}

/* Mobile nav */
.nav.active {
  background: var(--c-white) !important;
  border-top: 1px solid var(--c-border) !important;
}

.nav.active .nav-links a {
  color: var(--c-dark) !important;
  border-bottom: 1px solid var(--c-border) !important;
  padding: 13px 20px !important;
}

.nav.active .nav-links a:hover { color: var(--c-blue) !important; }

.nav-mobile-footer {
  border-top: 1px solid var(--c-border) !important;
  padding: 16px 20px !important;
}

.nav-mobile-header {
  border-bottom: 1px solid var(--c-border) !important;
  padding: 16px 20px !important;
}

.nav-close {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-dark) !important;
  border-radius: 8px !important;
  width: 34px !important;
  height: 34px !important;
  cursor: pointer;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero, .hero-v3 {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 60%, #1e3a8a 100%) !important;
}

/* Remove decorative orbs */
.hero-orb, .hero-dots-bg { display: none !important; }

.hero-label {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.8) !important;
  font-size: .75rem !important;
  letter-spacing: .08em !important;
}

.hero-label i { color: #60a5fa !important; }

.hero-title {
  color: #fff !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  letter-spacing: -.04em !important;
}

.hero-title span { color: #60a5fa !important; }

.hero-subtitle {
  color: rgba(255,255,255,.6) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

.hero-badge {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
}

.hero-badge i { color: #60a5fa !important; }

.hero-reassurance span {
  color: rgba(255,255,255,.55) !important;
  font-size: .82rem !important;
}

.hero-trust-sep { color: rgba(255,255,255,.2) !important; }

.hero-image-frame {
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.4) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

.hero-image-glow { display: none !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  transition: var(--t) !important;
}

.btn-primary {
  background: var(--c-blue) !important;
  background-image: none !important;
  border: 1.5px solid var(--c-blue) !important;
  color: #fff !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: var(--c-blue-dark) !important;
  border-color: var(--c-blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.25) !important;
}

.btn-secondary {
  background: var(--c-wa) !important;
  background-image: none !important;
  border: 1.5px solid var(--c-wa) !important;
  color: #fff !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--c-wa-dark) !important;
  border-color: var(--c-wa-dark) !important;
  transform: translateY(-1px) !important;
}

.btn-outline {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: var(--r) !important;
}

.btn-outline:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
}

.btn-large {
  border-radius: var(--r) !important;
  padding: 14px 28px !important;
  font-size: 1rem !important;
}

.btn-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--c-blue-bg) !important;
  color: var(--c-blue) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--r) !important;
  padding: 9px 16px !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
}

.btn-brand:hover {
  background: var(--c-blue) !important;
  color: #fff !important;
}

/* ── Stats Bar ────────────────────────────────────────────── */
.stats-bar {
  background: var(--c-dark) !important;
  box-shadow: none !important;
  padding: 24px 0 !important;
}

.stat-bar-number {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.stat-bar-label { color: rgba(255,255,255,.45) !important; }

.stat-bar-item { border-right-color: rgba(255,255,255,.08) !important; }

/* ── Section Titles ───────────────────────────────────────── */
.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--c-dark) !important;
  letter-spacing: -.03em !important;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
  margin-bottom: 40px !important;
}

.section-title span { color: var(--c-blue) !important; }

.section-title::after {
  background: var(--c-blue) !important;
  width: 40px !important;
  height: 3px !important;
  border-radius: 3px !important;
}

/* ── Categories Section ───────────────────────────────────── */
.categories-section {
  background: var(--c-white) !important;
  padding: 72px 0 40px !important;
}

.categories-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 16px !important;
}

.category-card {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  padding: 28px 16px !important;
  gap: 12px !important;
  transition: var(--t) !important;
}

.category-card:hover {
  border-color: var(--c-blue) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,.1) !important;
  transform: translateY(-3px) !important;
  background: var(--c-white) !important;
}

.category-icon {
  width: 60px !important;
  height: 60px !important;
  background: var(--c-blue-bg) !important;
  color: var(--c-blue) !important;
  border-radius: 14px !important;
  font-size: 1.5rem !important;
  border: none !important;
}

.category-card:hover .category-icon {
  background: var(--c-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.category-card h3 {
  font-size: .95rem !important;
  color: var(--c-dark) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  margin: 0 !important;
}

.category-count {
  font-size: .78rem !important;
  color: var(--c-muted) !important;
}

/* Override specific category card colors */
.category-card--robuste .category-icon,
.category-card--tablette .category-icon,
.category-card--classique .category-icon,
.category-card--montre .category-icon {
  background: var(--c-blue-bg) !important;
  color: var(--c-blue) !important;
}

.category-card--robuste:hover,
.category-card--tablette:hover,
.category-card--classique:hover,
.category-card--montre:hover {
  border-color: var(--c-blue) !important;
}

.category-card--robuste:hover .category-icon,
.category-card--tablette:hover .category-icon,
.category-card--classique:hover .category-icon,
.category-card--montre:hover .category-icon {
  background: var(--c-blue) !important;
  color: #fff !important;
}

/* ── Brands Section ───────────────────────────────────────── */
.brands-section {
  background: var(--c-bg) !important;
  padding: 72px 0 !important;
}

.brands-intro-text {
  text-align: center;
  color: var(--c-muted);
  font-size: .95rem;
  margin-top: -28px;
  margin-bottom: 40px;
}

.brands-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

/* New brand card — compact modern */
.brand-card {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  padding: 20px !important;
  transition: var(--t) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  color: var(--c-text) !important;
}

.brand-card:hover {
  border-color: var(--c-blue) !important;
  box-shadow: var(--sh-hover) !important;
  transform: translateY(-3px) !important;
}

.brand-icon-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.brand-logo-badge {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: var(--c-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--c-border) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 6px !important;
}

.brand-logo-badge img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.brand-card h3 {
  font-size: 1rem !important;
  color: var(--c-dark) !important;
  margin: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.brand-positioning {
  font-size: .75rem !important;
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}

.brand-card p {
  font-size: .85rem !important;
  color: var(--c-muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.brand-targets {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.brand-targets li {
  font-size: .8rem !important;
  color: var(--c-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.brand-targets li i { color: var(--c-blue) !important; font-size: .7rem !important; }

/* Brand logo initials badge (fallback) */
.brand-initial {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  flex-shrink: 0;
}

/* ── Filters ──────────────────────────────────────────────── */
.filters {
  background: var(--c-white) !important;
  border-top: 1px solid var(--c-border) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
}

.filter-group label { color: var(--c-dark) !important; font-size: .85rem !important; font-weight: 600 !important; }

select, input {
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  background: var(--c-white) !important;
  color: var(--c-text) !important;
  font-family: 'Inter', sans-serif !important;
}

select:focus, input:focus {
  border-color: var(--c-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

/* ── Products ─────────────────────────────────────────────── */
.products { background: var(--c-bg) !important; }

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 20px !important;
}

.product-card {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: var(--t) !important;
}

.product-card:hover {
  border-color: transparent !important;
  box-shadow: var(--sh-hover) !important;
  transform: translateY(-4px) !important;
}

.product-badge {
  background: var(--c-blue) !important;
  background-image: none !important;
  border-radius: 8px !important;
  font-size: .72rem !important;
  box-shadow: none !important;
}

.product-info h3 { color: var(--c-dark) !important; font-size: 1rem !important; }

.product-card-price {
  color: var(--c-dark) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.product-card-price small { color: var(--c-muted) !important; }

.product-card-stock { color: var(--c-wa-dark) !important; }

.product-card-stock i { color: var(--c-wa) !important; }

.product-card-desc { color: var(--c-muted) !important; }

.product-card-actions .btn-primary {
  font-size: .82rem !important;
  padding: 10px 12px !important;
}

.product-card-actions .btn-secondary {
  font-size: .82rem !important;
  padding: 10px 12px !important;
}

/* ── Features Section ─────────────────────────────────────── */
.features {
  background: var(--c-dark) !important;
}

.features .section-title { color: #fff !important; }
.features .section-title::after { background: var(--c-blue) !important; }

.feature-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: var(--r-lg) !important;
  backdrop-filter: none !important;
}

.feature-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(37,99,235,.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.2) !important;
}

.feature-icon {
  background: rgba(37,99,235,.12) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(37,99,235,.2) !important;
  border-radius: 14px !important;
}

.feature-card:hover .feature-icon {
  background: var(--c-blue) !important;
  color: #fff !important;
  border-color: var(--c-blue) !important;
}

.feature-card h3 { color: #fff !important; font-size: 1rem !important; }
.feature-card p { color: rgba(255,255,255,.5) !important; }

/* ── Reviews ──────────────────────────────────────────────── */
.reviews-section { background: var(--c-bg) !important; }

.review-card {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: var(--t) !important;
}

.review-card:hover {
  border-color: var(--c-blue) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,.08) !important;
}

.review-stars { color: #f59e0b !important; }

.review-text { color: #4b5563 !important; }

.review-author strong { color: var(--c-dark) !important; }
.review-author span { color: var(--c-muted) !important; }

.review-avatar {
  background: linear-gradient(135deg, var(--c-blue), #1d4ed8) !important;
}

.reviews-badge {
  background: var(--c-blue) !important;
  color: #fff !important;
}

/* ── Quiz ─────────────────────────────────────────────────── */
.quiz-section { background: var(--c-bg) !important; }

.quiz-card {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--sh) !important;
}

/* ── Magazine Section ─────────────────────────────────────── */
.magazine-section {
  background: var(--c-dark) !important;
}

.magazine-section::before,
.magazine-section::after { display: none !important; }

.mag-header .section-title { color: #fff !important; }
.mag-header .section-title::after { background: var(--c-blue) !important; }
.mag-subtitle { color: rgba(255,255,255,.5) !important; }
.mag-tag {
  background: rgba(37,99,235,.15) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(37,99,235,.25) !important;
}

/* ── Contact Section ──────────────────────────────────────── */
.contact-section { background: var(--c-bg) !important; }
.contact-intro { color: var(--c-muted) !important; }

.contact-card {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: var(--t) !important;
}

.contact-card:hover {
  border-color: var(--c-blue) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,.1) !important;
  transform: translateY(-3px) !important;
}

.contact-card-icon {
  background: var(--c-blue-bg) !important;
  color: var(--c-blue) !important;
  border-radius: 14px !important;
}

.contact-card--wa .contact-card-icon {
  background: rgba(37,211,102,.1) !important;
  color: var(--c-wa-dark) !important;
}

.contact-card:hover .contact-card-icon {
  background: var(--c-blue) !important;
  color: #fff !important;
}

.contact-card--wa:hover .contact-card-icon {
  background: var(--c-wa) !important;
  color: #fff !important;
}

.contact-card h3 { color: var(--c-dark) !important; }
.contact-card p { color: var(--c-muted) !important; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--c-dark) !important;
}

.footer-brand .logo-name { color: #fff !important; }

.footer-brand p {
  color: rgba(255,255,255,.45) !important;
  font-size: .85rem !important;
}

.footer-links a, .footer-contact p {
  color: rgba(255,255,255,.5) !important;
}

.footer-links a:hover { color: var(--c-blue) !important; }

.footer-links h3::after,
.footer-contact h3::after { background: var(--c-blue) !important; }

.footer-contact i { color: rgba(255,255,255,.4) !important; }

.social-links a {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.5) !important;
}

.social-links a:hover {
  background: var(--c-blue) !important;
  border-color: var(--c-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.footer-bottom {
  background: rgba(0,0,0,.2) !important;
  color: rgba(255,255,255,.3) !important;
}

/* ── WhatsApp Float ───────────────────────────────────────── */
.whatsapp-float {
  background: var(--c-wa) !important;
  background-image: none !important;
  box-shadow: 0 4px 16px rgba(37,211,102,.3) !important;
  width: 52px !important;
  height: 52px !important;
  bottom: 28px !important;
  right: 28px !important;
}

.whatsapp-float:hover {
  background: var(--c-wa-dark) !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.35) !important;
  transform: scale(1.08) !important;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { background: var(--c-white) !important; border-bottom: 1px solid var(--c-border) !important; }
.breadcrumb a { color: var(--c-blue) !important; }
.current-page { color: var(--c-dark) !important; }

/* ── Product Detail Page ──────────────────────────────────── */
.product-details-section { background: var(--c-bg) !important; }

.product-image-wrapper {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  box-shadow: none !important;
  border-radius: var(--r-lg) !important;
}

.product-badge-large {
  background: var(--c-blue) !important;
  background-image: none !important;
  border-radius: 8px !important;
}

.product-title-large { color: var(--c-dark) !important; }

.product-price-large {
  color: var(--c-dark) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.delivery-item {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
}

.delivery-item i { color: var(--c-blue) !important; }

.tab-btn.active { color: var(--c-blue) !important; }
.tab-btn.active::after { background: var(--c-blue) !important; }

.specs-key { background: var(--c-bg) !important; color: var(--c-dark) !important; }

/* ── Order Form ───────────────────────────────────────────── */
.order-form-section {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 100%) !important;
}

.order-form-section::before,
.order-form-section::after { display: none !important; }

.order-form-badge {
  background: rgba(37,99,235,.15) !important;
  border: 1px solid rgba(37,99,235,.25) !important;
  color: #93c5fd !important;
}

.order-input:focus {
  border-color: var(--c-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

.btn-order-submit {
  background: var(--c-blue) !important;
  background-image: none !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}

.btn-order-submit:hover:not(:disabled) {
  background: var(--c-blue-dark) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.3) !important;
}

/* ── Marque page hero ─────────────────────────────────────── */
.brand-hero {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 100%) !important;
}

/* ── Cookie Banner ────────────────────────────────────────── */
.cookie-banner {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.1) !important;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Footer 4 colonnes ────────────────────────────────────── */
.footer-container {
  grid-template-columns: 1.8fr 1fr 1.2fr 1fr !important;
  gap: 32px !important;
}

/* ── Responsive ───────────────────────────────────────────── */

/* ── Tablette large (≤ 1024px) ── */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
  }

  .footer-brand > * { flex-shrink: 0; }

  .nav-submenu--brands {
    min-width: 320px !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Tablette (≤ 900px) ── */
@media (max-width: 900px) {
  /* Header */
  .header-container { height: 60px !important; }

  /* Mobile nav — fond blanc, plein écran */
  .nav {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--c-white) !important;
    transform: translateX(-100%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    z-index: 998 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-top: 1px solid var(--c-border) !important;
  }

  .nav.active {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Nav links mobile */
  .nav-links {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 8px 0 !important;
    flex: 1 !important;
  }

  .nav-links > li {
    border-bottom: 1px solid var(--c-border) !important;
  }

  .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--c-dark) !important;
    width: 100% !important;
    border-bottom: none !important;
  }

  .nav-links > li > a:hover {
    background: var(--c-bg) !important;
    color: var(--c-blue) !important;
  }

  .nav-item-icon {
    color: var(--c-blue) !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  .nav-arrow {
    margin-left: auto !important;
    transition: transform .25s !important;
  }

  .nav-dropdown.open .nav-arrow {
    transform: rotate(180deg) !important;
  }

  /* Submenu mobile — accordéon */
  .nav-submenu {
    position: static !important;
    display: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--c-bg) !important;
    padding: 4px 0 !important;
    min-width: 0 !important;
    border-top: 1px solid var(--c-border) !important;
  }

  .nav-dropdown.open .nav-submenu {
    display: flex !important;
    flex-direction: column !important;
  }

  .nav-submenu a {
    padding: 11px 20px 11px 48px !important;
    border-radius: 0 !important;
    font-size: .88rem !important;
    border-bottom: 1px solid var(--c-border) !important;
  }

  .nav-submenu a:last-child { border-bottom: none !important; }

  /* Brands submenu mobile — single column */
  .nav-submenu--brands {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
  }

  /* Mobile header in nav */
  .nav-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--c-border) !important;
  }

  /* Mobile footer in nav */
  .nav-mobile-footer {
    padding: 16px 20px !important;
    border-top: 1px solid var(--c-border) !important;
    margin-top: auto !important;
  }

  .nav-whatsapp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: var(--c-wa) !important;
    color: #fff !important;
    border-radius: var(--r) !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    text-decoration: none !important;
    width: 100% !important;
  }

  /* Overlay behind mobile nav */
  .nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,.4) !important;
    z-index: 997 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .3s ease !important;
  }

  .nav-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Hamburger */
  .hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
  }

  /* Header actions hide on mobile */
  .header-actions { display: none !important; }

  /* Footer */
  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 0 24px !important;
    text-align: center !important;
  }

  .hero-image-col { order: -1 !important; }

  .hero-image-frame {
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  .hero-badges,
  .hero-buttons,
  .hero-reassurance { justify-content: center !important; }

  .hero-subtitle,
  .hero-label { margin-left: auto !important; margin-right: auto !important; }

  .hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Sections */
  .categories-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .brands-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Footer */
  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-brand { grid-column: 1 !important; }

  /* Whatsapp float */
  .whatsapp-float {
    bottom: 16px !important;
    right: 16px !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 1.3rem !important;
  }

  /* Stats bar */
  .stats-bar-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .stat-bar-item:nth-child(2) { border-right-color: rgba(255,255,255,.08) !important; }
  .stat-bar-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08) !important; }

  /* Product grid */
  .product-grid { grid-template-columns: 1fr !important; }

  /* Features grid */
  .features-grid { grid-template-columns: 1fr !important; }

  /* Review cards */
  .reviews-grid { grid-template-columns: 1fr !important; }

  /* Section title */
  .section-title { font-size: 1.5rem !important; margin-bottom: 28px !important; }

  /* Contact */
  .contact-cards { grid-template-columns: 1fr 1fr !important; }
}

/* ── Très petit mobile (≤ 360px) ── */
@media (max-width: 360px) {
  .categories-grid { grid-template-columns: 1fr !important; }
  .contact-cards { grid-template-columns: 1fr !important; }
  .hero-image-frame { max-width: 220px !important; }
}