/* ============================================================
   MDA AUTO 34 — Premium Design Upgrade
   Polices : Montserrat (display) + Poppins (body)  
   Palette : Noir #0A0A0A | Rouge #D42B2B | Or #C9962C
   ============================================================ */



/* ── Surcharge Variables ─────────────────────────────────── */
:root {
  /* Couleurs principales MDA AUTO 34 */
  --mda-black:    #0A0A0F;
  --mda-darkgray: #111118;
  --mda-gray:     #1C1C26;
  --mda-red:      #D42B2B;
  --mda-red-dark: #A81F1F;
  --mda-red-glow: rgba(212,43,43,.25);
  --mda-gold:     #C9962C;
  --mda-gold-lt:  #E0B84A;
  --mda-white:    #FFFFFF;
  --mda-off:      #F5F5F8;
  --mda-border:   #E8E8EE;
  --mda-border-d: #D0D0DC;
  --mda-text:     #111118;
  --mda-mid:      #3A3A4A;
  --mda-muted:    #7A7A90;

  /* Surcharge variables CSS existantes */
  --navy:        var(--mda-black);
  --navy-mid:    var(--mda-darkgray);
  --navy-light:  var(--mda-gray);
  --orange:      var(--mda-red);
  --orange-dark: var(--mda-red-dark);
  --orange-light:#E84545;
  --off-white:   var(--mda-off);
  --surface:     #F0F0F5;
  --border:      var(--mda-border);
  --border-dark: var(--mda-border-d);
  --text:        var(--mda-text);
  --text-mid:    var(--mda-mid);
  --text-muted:  var(--mda-muted);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --shadow:      0 4px 20px rgba(0,0,0,.09);
  --shadow-md:   0 8px 32px rgba(0,0,0,.13);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.18);

  /* Polices MDA */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Poppins', sans-serif;

  /* Timings */
  --t:   0.2s;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Base body ───────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--mda-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ── Typographie ─────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  color: var(--mda-text);
}

/* ══════════════════════════════════════════════════════════
   TOPBAR — Bande supérieure ultra-fine élégante
══════════════════════════════════════════════════════════ */
.topbar {
  background: var(--mda-black) !important;
  border-bottom: 1px solid rgba(212,43,43,.3) !important;
  padding: 7px 0 !important;
  position: relative;
  overflow: hidden;
}
.topbar::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mda-red), transparent);
  animation: topbar-shine 4s ease-in-out infinite;
}
@keyframes topbar-shine {
  0%   { left: -60%; }
  100% { left: 160%; }
}
.topbar-item { color: rgba(255,255,255,.55) !important; font-size: .72rem; letter-spacing: .02em; }
.topbar-item:hover { color: rgba(255,255,255,.9) !important; }
.topbar-divider { background: rgba(255,255,255,.12) !important; }

/* ══════════════════════════════════════════════════════════
   HEADER — Navigation premium fond sombre
══════════════════════════════════════════════════════════ */
header#mainHeader {
  background: rgba(10,10,15,.96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,.4) !important;
  position: sticky !important;
  top: 0;
  z-index: 1000;
  transition: background var(--t), box-shadow var(--t);
}
header#mainHeader.scrolled {
  background: rgba(10,10,15,.99) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.5) !important;
}

/* Logo */
.logo-link img { height: 48px !important; filter: brightness(1.05); }

/* Liens nav */
.nav-link {
  color: rgba(255,255,255,.65) !important;
  font-family: var(--font-display);
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  transition: all var(--t) !important;
}
.nav-link:hover, .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}
.nav-link.active { color: var(--mda-red) !important; }

/* Flèche dropdown */
.nav-link svg { color: rgba(255,255,255,.4) !important; }
.nav-item:hover .nav-link svg { color: rgba(255,255,255,.7) !important; }

/* Dropdown menu */
.dropdown {
  background: #16161E !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  top: calc(100% + 12px) !important;
}
.dropdown::before {
  content: '';
  position: absolute;
  top: -4px; left: 24px;
  width: 8px; height: 8px;
  background: #16161E;
  border-left: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.08);
  transform: rotate(45deg);
}
.dropdown-link {
  color: rgba(255,255,255,.6) !important;
  font-size: .82rem !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-weight: 500 !important;
}
.dropdown-link:hover {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  padding-left: 18px !important;
}
.dropdown-link svg { color: var(--mda-red) !important; }

/* Bouton panier */
.cart-btn {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.8) !important;
  border-radius: 8px !important;
  transition: all var(--t) !important;
}
.cart-btn:hover {
  background: var(--mda-red) !important;
  border-color: var(--mda-red) !important;
  color: #fff !important;
}
.cart-count {
  background: var(--mda-red) !important;
  color: #fff;
}

/* Hamburger */
.hamburger span { background: rgba(255,255,255,.8) !important; }

/* ══════════════════════════════════════════════════════════
   HERO — Section principale spectaculaire
══════════════════════════════════════════════════════════ */
.hero {
  background: var(--mda-black) !important;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(212,43,43,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(201,150,44,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Grille décorative */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  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;
  pointer-events: none;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; }
.hero-title { color: #fff !important; }
.hero-desc { color: rgba(255,255,255,.6) !important; }

/* Stats hero */
.hero-stat-num { color: #fff !important; }
.hero-stat-label { color: rgba(255,255,255,.45) !important; }

/* Page hero (breadcrumb pages intérieures) */
.page-hero {
  background: linear-gradient(135deg, #0A0A0F 0%, #16161E 100%) !important;
  padding: 52px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--mda-red), var(--mda-gold));
}
.page-hero h1 { color: #fff !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; }
.page-hero p  { color: rgba(255,255,255,.5) !important; }
.breadcrumb a { color: rgba(255,255,255,.45) !important; }
.breadcrumb a:hover { color: var(--mda-red) !important; }
.breadcrumb-sep { color: rgba(255,255,255,.2) !important; }
.breadcrumb-current { color: rgba(255,255,255,.75) !important; }

/* ══════════════════════════════════════════════════════════
   BOUTONS — Redesign complet
══════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-display) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  transition: all var(--t) var(--ease) !important;
  position: relative;
  overflow: hidden;
}

/* Bouton principal — rouge vif */
.btn-primary {
  background: linear-gradient(135deg, #B82020 0%, var(--mda-red) 50%, #E83535 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--mda-red-glow), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(212,43,43,.45), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .4s;
}
.btn-primary:hover::before { left: 100%; }

/* Bouton navy — sombre */
.btn-navy {
  background: linear-gradient(135deg, #0A0A0F, #1C1C26) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
.btn-navy:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.4) !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* Bouton outline blanc (sur fond sombre) */
.btn-outline {
  background: transparent !important;
  color: rgba(255,255,255,.9) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}

/* Bouton outline navy (sur fond clair) */
.btn-outline-navy {
  background: transparent !important;
  color: var(--mda-text) !important;
  border: 1.5px solid var(--mda-border-d) !important;
}
.btn-outline-navy:hover {
  background: var(--mda-text) !important;
  color: #fff !important;
  border-color: var(--mda-text) !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARDS — Cartes produits premium
══════════════════════════════════════════════════════════ */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}

.product-card {
  background: #fff !important;
  border: 1px solid var(--mda-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: all .25s var(--ease) !important;
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mda-red), var(--mda-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
  z-index: 1;
}
.product-card:hover {
  border-color: transparent !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
  transform: translateY(-5px) !important;
}
.product-card:hover::before { transform: scaleX(1); }

/* Image produit */
.product-img {
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  background: #F0F0F5 !important;
  position: relative !important;
}
.product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease) !important;
}
.product-card:hover .product-img img { transform: scale(1.06) !important; }

/* Overlay dégradé sur l'image */
.product-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,.3), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.product-card:hover .product-img::after { opacity: 1; }

/* Badges */
.badge {
  font-family: var(--font-display) !important;
  font-size: .6rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}
.badge-new  { background: var(--mda-text) !important; color: #fff !important; }
.badge-used { background: #4A5568 !important; color: #fff !important; }
.badge-sale { background: var(--mda-red) !important; color: #fff !important; }
.badge-feat { background: var(--mda-gold) !important; color: #fff !important; backdrop-filter: none !important; }

/* Corps de la carte */
.product-body { padding: 18px 20px !important; flex: 1; display: flex; flex-direction: column; }
.product-cat {
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--mda-red) !important;
  margin-bottom: 6px !important;
}
.product-name {
  font-family: var(--font-display) !important;
  font-size: .97rem !important;
  font-weight: 800 !important;
  color: var(--mda-text) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
  letter-spacing: -.02em !important;
}
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { color: var(--mda-red) !important; }
.product-desc {
  font-size: .8rem !important;
  color: var(--mda-muted) !important;
  line-height: 1.6 !important;
  flex: 1;
  margin-bottom: 14px !important;
}

/* Prix */
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-current {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: var(--mda-text) !important;
  letter-spacing: -.03em !important;
}
.price-old { color: var(--mda-muted) !important; font-size: .8rem !important; text-decoration: line-through !important; }
.price-pct {
  background: #FFF0F0 !important;
  color: var(--mda-red) !important;
  font-weight: 700 !important;
  font-size: .65rem !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

/* Footer carte — boutons compacts, texte ne déborde pas */
/* ═══════════════════════════════════════════════
   PRODUCT CARD BUTTONS — v11.0 — Source unique
   - btn-sm retiré du HTML : zéro conflit possible
   - Desktop : icône + texte entier, taille auto
   - Mobile ≤768px : icône seule
════════════════════════════════════════════════ */

/* Conteneur footer */
.product-footer {
  padding: 10px 12px 14px !important; /* padding-bottom 14px : espace sous les boutons pour éviter la coupure par overflow:hidden de .product-card */
  border-top: 1px solid var(--border, #eee) !important;
  display: flex !important;
  gap: 8px !important;
  background: #fff !important;
}

/* Bouton de base — les deux boutons se partagent l'espace à 50/50 */
.product-footer .btn {
  flex: 1 1 0% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 9px 4px !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
  text-overflow: unset !important;
  overflow: visible !important;
}

/* Icône dans les boutons */
.product-footer .btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.product-footer .btn.btn-outline-navy svg { stroke: var(--navy, #1a1a2e) !important; }
.product-footer .btn.btn-primary svg     { stroke: #ffffff !important; }

/* Texte : visible desktop */
.pf-label {
  display: inline !important;
  font-size: inherit !important;
}

/* Grands écrans : plus d'espace disponible */
@media (min-width: 1024px) {
  .product-footer .btn {
    font-size: .7rem !important;
    padding: 9px 8px !important;
    gap: 6px !important;
  }
  .product-footer .btn svg { width: 15px !important; height: 15px !important; }
}

/* Mobile : icône seule */
@media (max-width: 768px) {
  .product-footer {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .pf-label {
    display: none !important;
  }
  .product-footer .btn {
    padding: 11px 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
  }
  .product-footer .btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Texte des boutons — visible desktop, masqué mobile */
/* Grands écrans : on peut se permettre un peu plus */
@media (min-width: 1200px) {
  .product-footer .btn {
    font-size: .72rem !important;
    gap: 5px !important;
    padding: 9px 6px !important;
  }
}

@media (max-width: 768px) {
  .product-footer .btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}


/* Placeholder sans image */
.no-img {
  background: linear-gradient(135deg, #F0F0F5, #E8E8EF) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-img svg { opacity: .3; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR CATALOGUE — Filtres élégants
══════════════════════════════════════════════════════════ */
.shop-layout {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 32px !important;
  align-items: start;
}
.shop-sidebar {
  background: #fff !important;
  border: 1px solid var(--mda-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sidebar-block {
  border-bottom: 1px solid var(--mda-border) !important;
  padding: 0 !important;
}
.sidebar-block:last-child { border-bottom: none !important; }
.sidebar-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px !important;
  font-family: var(--font-display) !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--mda-muted) !important;
  background: #FAFAFA !important;
  border-bottom: 1px solid var(--mda-border) !important;
}
.sidebar-body { padding: 8px !important; }
.sidebar-cat-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--mda-mid) !important;
  transition: all var(--t) !important;
}
.sidebar-cat-link:hover {
  background: var(--surface) !important;
  color: var(--mda-text) !important;
  padding-left: 16px !important;
}
.sidebar-cat-link.active {
  background: rgba(212,43,43,.07) !important;
  color: var(--mda-red) !important;
  font-weight: 600 !important;
}
.sidebar-count {
  background: #F0F0F5 !important;
  color: var(--mda-muted) !important;
  font-size: .68rem !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
}
.sidebar-cat-link.active .sidebar-count {
  background: rgba(212,43,43,.12) !important;
  color: var(--mda-red) !important;
}
.sidebar-search { padding: 12px 16px !important; background: #fff !important; }
.sidebar-search input {
  border: 1.5px solid var(--mda-border) !important;
  border-radius: 8px !important;
  font-size: .84rem !important;
  color: var(--mda-text) !important;
  padding: 9px 12px !important;
}
.sidebar-search input:focus {
  border-color: var(--mda-red) !important;
  box-shadow: 0 0 0 3px rgba(212,43,43,.1) !important;
}
.sidebar-search button {
  background: var(--mda-red) !important;
  border-radius: 8px !important;
}

/* Shop header */
.shop-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding: 14px 18px !important;
  background: #fff !important;
  border: 1px solid var(--mda-border) !important;
  border-radius: 12px !important;
}
.shop-count strong { color: var(--mda-text) !important; }
.shop-sort {
  border: 1.5px solid var(--mda-border) !important;
  border-radius: 8px !important;
  font-size: .82rem !important;
  padding: 8px 32px 8px 12px !important;
}
.filter-tag {
  background: rgba(212,43,43,.07) !important;
  color: var(--mda-red) !important;
  border: 1px solid rgba(212,43,43,.2) !important;
  border-radius: 6px !important;
  font-size: .72rem !important;
}

/* ══════════════════════════════════════════════════════════
   CATEGORY STRIP — Strip catégories homepage
══════════════════════════════════════════════════════════ */
.cat-strip {
  background: #fff !important;
  border-bottom: 1px solid var(--mda-border) !important;
}
.cat-chip {
  font-family: var(--font-display) !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  color: var(--mda-muted) !important;
  border-bottom: 2px solid transparent !important;
  padding: 20px 18px !important;
}
.cat-chip:hover { color: var(--mda-text) !important; }
.cat-chip.active { color: var(--mda-red) !important; border-bottom-color: var(--mda-red) !important; }

/* ══════════════════════════════════════════════════════════
   SECTION HEADERS — En-têtes de sections
══════════════════════════════════════════════════════════ */
.label {
  color: var(--mda-red) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.label::before {
  content: '';
  display: inline-block;
  width: 20px; height: 2px;
  background: var(--mda-red);
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════
   FEATURE CARDS — Cartes avantages
══════════════════════════════════════════════════════════ */
.feature-card {
  border: 1px solid var(--mda-border) !important;
  border-radius: 14px !important;
  transition: all .25s var(--ease) !important;
}
.feature-card::before {
  background: linear-gradient(90deg, var(--mda-red), var(--mda-gold)) !important;
  height: 2px !important;
}
.feature-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.1) !important; transform: translateY(-4px) !important; }
.feature-icon {
  background: linear-gradient(135deg, var(--mda-black), var(--mda-gray)) !important;
  border-radius: 12px !important;
}

/* ══════════════════════════════════════════════════════════
   STATS BAR — Bande de statistiques
══════════════════════════════════════════════════════════ */
.stats-bar {
  background: linear-gradient(135deg, #0A0A0F 0%, #111118 50%, #1C1C26 100%) !important;
  position: relative;
  overflow: hidden;
}
.stats-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 50% 80% at 0% 50%, rgba(212,43,43,.08), transparent),
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(201,150,44,.06), transparent);
  pointer-events: none;
}
.stat-num { color: #fff !important; }
.stat-num span { color: var(--mda-red) !important; }
.stat-label { color: rgba(255,255,255,.4) !important; }

/* ══════════════════════════════════════════════════════════
   REVIEWS — Cartes avis clients
══════════════════════════════════════════════════════════ */
.review-card {
  border: 1px solid var(--mda-border) !important;
  border-radius: 14px !important;
}
.review-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.1) !important; }
.review-stars svg { fill: var(--mda-gold) !important; color: var(--mda-gold) !important; }
.review-avatar { background: linear-gradient(135deg, var(--mda-black), var(--mda-gray)) !important; }
.review-name { color: var(--mda-text) !important; }

/* ══════════════════════════════════════════════════════════
   FOOTER — Pied de page premium
══════════════════════════════════════════════════════════ */
footer {
  background: linear-gradient(180deg, #0A0A0F 0%, #070709 100%) !important;
  border-top: 1px solid rgba(212,43,43,.2);
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mda-red), var(--mda-gold), transparent);
}
.footer-col h4 {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.footer-link { color: rgba(255,255,255,.6) !important; font-size: .82rem !important; }
.footer-link:hover { color: var(--mda-red) !important; }
.footer-desc { color: rgba(255,255,255,.4) !important; }
.social-btn:hover { background: var(--mda-red) !important; }
.footer-contact-item svg { color: var(--mda-red) !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.05) !important; }

/* ══════════════════════════════════════════════════════════
   CTA SECTION — Appel à l'action
══════════════════════════════════════════════════════════ */
.cta-section, section.grad-navy, div.grad-navy {
  background: linear-gradient(135deg, #0A0A0F 0%, #111118 50%, #1C1C26 100%) !important;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(212,43,43,.1), transparent);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   FORMULAIRES — Inputs stylés
══════════════════════════════════════════════════════════ */
.form-control {
  border: 1.5px solid var(--mda-border) !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: .88rem !important;
  color: var(--mda-text) !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
}
.form-control:focus {
  border-color: var(--mda-red) !important;
  box-shadow: 0 0 0 3px rgba(212,43,43,.1) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   ALERTS — Notifications
══════════════════════════════════════════════════════════ */
.alert-success { background: #ECFDF5 !important; border-color: #A7F3D0 !important; color: #065F46 !important; }
.alert-error   { background: #FFF0F0 !important; border-color: #FECACA !important; color: #991B1B !important; }
.alert-info    { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
.alert-warning { background: #FFFBEB !important; border-color: #FDE68A !important; color: #92400E !important; }

/* ══════════════════════════════════════════════════════════
   MOBILE NAV — Navigation mobile
══════════════════════════════════════════════════════════ */
.mobile-nav-panel {
  background: #0D0D14 !important;
  box-shadow: 8px 0 60px rgba(0,0,0,.6) !important;
}
.mobile-nav-link {
  color: rgba(255,255,255,.75) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  font-family: var(--font-display) !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.mobile-nav-link:hover { color: var(--mda-red) !important; }
.mobile-nav-close {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.6) !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT PAGE — Page détail produit
══════════════════════════════════════════════════════════ */
.gallery-main {
  border-radius: 14px !important;
  border: 1px solid var(--mda-border) !important;
  overflow: hidden !important;
  background: #F5F5F8 !important;
}
.gallery-thumb {
  border-radius: 8px !important;
  border: 2px solid var(--mda-border) !important;
}
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--mda-red) !important; }

/* Info produit */
.product-info h1 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}
.product-price-main {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  color: var(--mda-text) !important;
  letter-spacing: -.04em !important;
}

/* ══════════════════════════════════════════════════════════
   PARTNERS — Logos partenaires
══════════════════════════════════════════════════════════ */
.partners-strip {
  background: var(--mda-off) !important;
  border-top: 1px solid var(--mda-border) !important;
  border-bottom: 1px solid var(--mda-border) !important;
}
.partner-logo {
  color: #C0C0CC !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  letter-spacing: -.01em !important;
}
.partner-logo:hover { color: var(--mda-text) !important; }

/* ══════════════════════════════════════════════════════════
   ZONES GRID — Zones de livraison
══════════════════════════════════════════════════════════ */
.zone-card {
  border-radius: 14px !important;
  overflow: hidden;
  transition: all .25s var(--ease) !important;
}
.zone-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 48px rgba(0,0,0,.18) !important; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Overrides mobiles
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: 1fr !important;
  }
  .shop-sidebar {
    position: fixed !important;
    top: 0 !important; left: -100% !important;
    bottom: 0 !important;
    width: 300px !important;
    border-radius: 0 !important;
    z-index: 998 !important;
    transition: left .35s var(--ease) !important;
  }
  .shop-sidebar.open { left: 0 !important; }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-body { padding: 12px 14px !important; }
  .product-name { font-size: .82rem !important; }
  .price-current { font-size: 1.1rem !important; }
  /* product-footer mobile — géré dans le bloc v8.0 ci-dessus */
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .product-img { aspect-ratio: 1 !important; }
}

/* ══════════════════════════════════════════════════════════
   MISC — Finitions diverses
══════════════════════════════════════════════════════════ */
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F5F5F8; }
::-webkit-scrollbar-thumb { background: #C8C8D8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--mda-red); }

/* Selection */
::selection { background: rgba(212,43,43,.15); color: var(--mda-text); }

/* Badges section icon */
.section-icon-badge--red { background: var(--mda-red) !important; }
.section-icon-badge--navy { background: var(--mda-black) !important; }

/* Bordure rouge ligne produit véhicule */
.product-card--vehicle .product-img::after {
  background: var(--mda-red) !important;
  height: 3px !important;
}

/* Pagination */
.page-btn:hover, .page-btn.active {
  background: var(--mda-text) !important;
  border-color: var(--mda-text) !important;
}

/* ══════════════════════════════════════════════════════════
   EMPTY STATE — Aucun produit trouvé
══════════════════════════════════════════════════════════ */
/* Style amélioré pour l'état vide */
[style*="text-align:center"][style*="padding:80px"] h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -.02em !important;
}