/* =========================================================
   COUTURIA — Design System « Maison de Couture »
   Palette HARMONISÉE avec le mobile backoffice (AppTheme Flutter).
   Toute l'application web (vitrine, portal, employé, admin) doit
   employer ces valeurs : aucune autre nuance de navy/or n'est admise.
      navy          #0F172A   (bleu nuit — primaire)
      navy-dark     #0B111E   (bleu nuit profond — dégradés, milieu)
      navy-darker   #080C15   (bleu nuit le plus sombre — footer/topbar)
      gold          #D4AF37   (or premium — accent principal)
      gold-soft     #CDA00F   (or foncé — survols, versants sur sombre)
      canvas        #FAF6EE   (ivoire chaud — fond éditorial vitrine)
      ink           #1C2536   (encre — texte courant)
   Référence : mobile/backoffice/lib/core/themes/app_theme.dart
   ========================================================= */

:root{
  --ink: #1C2536;
  --ink-soft: #6E665A;
  --canvas: #FAF6EE;
  --surface: #FFFFFF;
  --light-grey: #F2ECDF;
  --navy: #0F172A;
  --navy-dark: #0B111E;
  --navy-darker: #080C15;
  --gold: #D4AF37;
  --gold-soft: #CDA00F;
  --body-bg: #FFFFFF;
  --body-color: #1C2536;
  --gold-rgb: 212,175,55;
  --navy-rgb: 15,23,42;
  --navy-dark-rgb: 11,17,30;
  --navy-darker-rgb: 8,12,21;
  --ink-rgb: 28,37,54;
  --canvas-rgb: 250,246,238;
  --hero-grad-a: #0B111E;
  --hero-grad-b: #0F172A;
  --white: #FFFFFF;
  --muted: #847A68;
  --border-c: rgba(var(--ink-rgb),0.10);
  --shadow-s: 0 2px 10px rgba(var(--ink-rgb),.05);
  --shadow-m: 0 18px 44px rgba(var(--ink-rgb),.10);
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
}

body{
  font-family: var(--font-body);
  color: var(--body-color, var(--ink));
  background: var(--body-bg, var(--surface));
}

h1,h2,h3,.font-display{ font-family: var(--font-display); }

a{ text-decoration:none; }

::selection{ background: rgba(var(--gold-rgb),.3); }

.text-gold{ color: var(--gold) !important; }
.text-navy{ color: var(--navy) !important; }
.bg-navy{ background-color: var(--navy) !important; }
.bg-navy-dark{ background-color: var(--navy-dark) !important; }
.bg-navy-darker{ background-color: var(--navy-darker) !important; }
.bg-gold{ background-color: var(--gold) !important; }
.bg-light-grey{ background-color: var(--light-grey) !important; }
.border-gold{ border-color: var(--gold) !important; }

.btn{
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-gold{
  background-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
  border: none;
  letter-spacing: .02em;
}
.btn-gold:hover{ background-color: var(--gold-soft); color: #0F172A; }

.btn-navy{
  background-color: var(--ink);
  color: #fff;
  font-weight: 700;
  border: none;
}
.btn-navy:hover{ background-color: var(--navy); color:#fff; }

.btn-outline-navy{
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.btn-outline-navy:hover{ background: var(--ink); color:#fff; }

.btn-outline-gold{
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
}
.btn-outline-gold:hover{ background: var(--gold); color: var(--ink); }

/* ---------- Top bar ---------- */
.topbar{
  background: var(--navy-darker);
  color: rgba(255,255,255,0.62);
  font-size: 0.75rem;
}
.topbar a{ color: rgba(255,255,255,0.62); }
.topbar a:hover{ color: var(--gold-soft); }

.top-select .dropdown-toggle{
  color: rgba(255,255,255,0.7);
  font-size: .75rem;
  background: none;
  border: none;
}
.top-select .dropdown-toggle:hover{ color:#fff; }
.top-select .dropdown-toggle::after{ display:none; }

/* ---------- Promo bar ---------- */
.promo-bar{
  background: var(--gold);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  padding: .5rem 2rem;
  text-align: center;
  position: relative;
}
.promo-bar .btn-close-promo{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  background:none;border:none;color:var(--ink);opacity:.5;
}
.promo-bar .btn-close-promo:hover{ opacity:1; }

/* ---------- Header / Nav (marine) ---------- */
.site-header{
  background: var(--navy);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.site-header .navbar-brand img{ height: 34px; }
.site-header .nav-link{
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: .9rem;
  opacity: .9;
  transition: opacity .15s, color .15s;
}
.site-header .nav-link:hover{ color: var(--gold); opacity:1; }

.icon-btn{
  width: 38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: .5rem;
  color: rgba(255,255,255,.85);
  background: transparent;
  border: none;
  position: relative;
  transition: background .15s, color .15s;
}
.icon-btn:hover{ background: rgba(255,255,255,.1); color: var(--gold); }

.cart-badge{
  position:absolute; top:-2px; right:-2px;
  width:18px; height:18px; font-size:.65rem; font-weight:700;
  background: var(--gold); color: var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Mega dropdown */
.mega-dropdown{
  border:none;
  box-shadow: var(--shadow-m);
  border-radius: .85rem;
  padding: .75rem;
  background:#fff;
}
.mega-dropdown.wide{ min-width: 520px; }
.mega-dropdown .mega-item{
  display:flex; gap:.75rem; padding:.6rem .75rem; border-radius:.5rem;
  color: var(--ink);
}
.mega-dropdown .mega-item:hover{ background: var(--gold); }
.mega-dropdown .mega-icon{ font-size:1.4rem; line-height:1; }
.mega-dropdown .mega-title{ font-size:.875rem; font-weight:600; margin-bottom:.15rem; }
.mega-dropdown .mega-sub{ font-size:.75rem; color: var(--muted); }

.search-bar-collapse{
  background: var(--canvas);
  border-top: 1px solid var(--border-c);
}
.search-bar-collapse input{
  background: #fff;
  border: 1px solid var(--border-c);
  color: var(--ink);
}
.search-bar-collapse input::placeholder{ color: rgba(var(--ink-rgb),.4); }
.search-bar-collapse input:focus{
  background: #fff;
  color: var(--ink); box-shadow:none; border-color: var(--gold);
}

.mobile-menu{
  background: var(--surface);
  border-top: 1px solid var(--border-c);
}
.mobile-menu a{
  color: var(--ink);
  padding: .7rem 0;
  border-bottom: 1px solid var(--border-c);
  display:block;
  font-weight:500;
}

/* ---------- Hero (marine sombre) ---------- */
.hero{
  position: relative;
  background:
    radial-gradient(circle at 82% 15%, rgba(var(--gold-rgb),.10), transparent 45%),
    linear-gradient(135deg, var(--hero-grad-a, #0B111E) 0%, var(--navy-dark) 55%, var(--hero-grad-b, #0F172A) 100%);
  min-height: 86vh;
  display:flex; align-items:center;
  overflow:hidden;
}
/* Le hero est un conteneur flex : sans `width:100%`, le carrousel (seul
   élément flex, `flex:0 1 auto`) se réduit à la largeur de son contenu au
   lieu de remplir la section → l'image de fond est comprimée dans une
   colonne étroite et le visuel paraît déformé (Audit accueil). */
.hero .carousel, .hero .carousel-inner, .hero .carousel-item{ height:100%; width:100%; }
.hero-slide-bg{
  position:absolute; inset:0;
}
.hero-slide-bg img{
  width:100%; height:100%; object-fit:cover; opacity:.92;
}
.hero-slide-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(var(--navy-dark-rgb),.97) 0%, rgba(var(--navy-dark-rgb),.88) 42%, rgba(var(--navy-dark-rgb),.5) 68%, rgba(var(--navy-dark-rgb),.15) 100%);
}
.hero-content{ position:relative; z-index:2; padding: 5rem 0; }
.hero-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color: var(--gold); border:1px solid rgba(var(--gold-rgb),.55);
  background: rgba(255,255,255,.08);
  padding:.4rem .9rem; margin-bottom:1.5rem;
}
.hero-title{
  font-size: 3.4rem;
  font-weight:700;
  line-height:1.05;
  color: #fff;
  margin-bottom:1.5rem;
  white-space: pre-line;
}
@media (max-width: 767px){ .hero-title{ font-size:2.3rem; } }
.hero-sub{ color: rgba(255,255,255,.78); font-size:1.1rem; max-width:480px; margin-bottom:2rem;}
.hero .btn.border.text-white{
  color: #fff !important;
  border-color: rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.12);
  transition: border-color .15s, background .15s;
}
.hero .btn.border.text-white:hover{ border-color: #fff !important; background: rgba(255,255,255,.24); }
.hero-stats{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:3rem; }
.hero-stats .stat{ border-left:2px solid rgba(var(--gold-rgb),.7); padding-left:.75rem; }
.hero-stats .stat .v{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; color: #fff; }
.hero-stats .stat .l{ font-size:.75rem; color: rgba(255,255,255,.68); }

.hero-floaters{ position:relative; height:320px; }
.floater{ position:absolute; border-radius:.85rem; box-shadow: var(--shadow-m); }
.floater-1{ right:0; top:0; width:220px; background:#fff; padding:1rem; border:1px solid var(--border-c); }
.floater-2{ left:1rem; bottom:1rem; width:190px; background: var(--navy-darker); color:#fff; padding:1rem; }
.floater-2 .text-uppercase{ color: var(--gold-soft); }
.floater-3{ right:2rem; bottom:2.5rem; width:175px; background:#fff; padding:.75rem; border:1px solid var(--border-c); }

.hero-indicators{
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem; z-index:3;
}
.hero-indicators button{
  height:4px; width:16px; border-radius:2px; border:none;
  background: rgba(255,255,255,.25);
  transition: all .2s;
}
.hero-indicators button.active{ width:32px; background: var(--gold); }

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color: #fff;
  display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.hero-arrow:hover{ background:#fff; color: var(--gold); }
.hero-arrow.prev{ left:1rem; }
.hero-arrow.next{ right:1rem; }

/* ---------- Ad banner ---------- */
.ad-banner{
  position:relative;
  border:1px solid var(--border-c);
  border-radius:.85rem;
  padding: 1rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
  background: var(--surface);
}
.ad-banner .ad-tag{
  position:absolute; top:.35rem; right:.5rem;
  font-size:.6rem; font-family:monospace; text-transform:uppercase; letter-spacing:.1em;
  color: var(--muted); opacity:.4;
}
.ad-banner .ad-logo{
  width:40px; height:40px; border-radius:.5rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.65rem; font-weight:700;
}
.ad-banner .ad-brand{ font-size:.8rem; font-weight:600; margin:0; }
.ad-banner .ad-tagline{ font-size:.7rem; color:var(--muted); margin:0; }
.ad-banner .ad-cta{
  flex-shrink:0; font-size:.75rem; font-weight:700; color:#fff;
  padding:.35rem .9rem; border-radius:999px;
}

/* ---------- Catalogue ---------- */
.category-pill{
  padding:.4rem 1rem; font-size:.875rem; border-radius:999px;
  border:1px solid rgba(var(--ink-rgb),.22);
  background:transparent; color:var(--ink-soft); font-weight:500;
  transition: all .15s;
}
.category-pill.active, .category-pill:hover{
  background: var(--ink); color:#fff; border-color:var(--ink);
}

/* ---------- Product card ---------- */
.product-card{
  border:1px solid var(--border-c);
  border-radius: .95rem;
  overflow:hidden;
  background:var(--surface);
  box-shadow: var(--shadow-s);
  transition: box-shadow .2s, transform .2s;
  height:100%;
}
.product-card:hover{ box-shadow: var(--shadow-m); transform: translateY(-3px); }
.product-media{
  position:relative;
  aspect-ratio: 3/4;
  background: var(--light-grey);
  overflow:hidden;
  cursor:pointer;
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s;
}
.product-card:hover .product-media img{ transform: scale(1.05); }
.product-badge{
  position:absolute; top:.6rem; left:.6rem;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.18rem .5rem; border-radius:.3rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.badge-bestseller{ background: var(--gold); color: var(--ink); }
.badge-surmesure, .badge-tendance, .badge-exclusif{ background: var(--ink); color:#fff; }
.badge-premium{ background: var(--navy-dark); color:#fff; }
.badge-solde{ background:#C0392B; color:#fff; }
.badge-nouveau{ background: var(--ink); color:#fff; }

.like-btn{
  position:absolute; top:.6rem; right:.6rem;
  width:32px; height:32px; border-radius:50%; border:none;
  background: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.like-btn:hover{ background:#fff; }
.like-btn.liked i{ color:#d64545; }
.like-btn.liked i::before{ content:"\f415"; } /* filled heart fallback handled via class */

.product-hover-actions{
  position:absolute; left:0; right:0; bottom:0;
  padding:.65rem;
  display:flex; flex-direction:column; gap:.4rem;
  opacity:0; transform: translateY(8px);
  transition: all .2s;
}
.product-card:hover .product-hover-actions{ opacity:1; transform:translateY(0); }
.btn-add-cart{
  width:100%; padding:.55rem; font-size:.75rem; font-weight:700;
  border-radius:.5rem; border:none; color:#fff; background: var(--ink);
}
.btn-add-cart:hover{ background: var(--navy); }
.btn-add-cart.added{ background:#1F7A4D; }
.hover-row{ display:flex; gap:.4rem; }
.btn-view-quick{
  flex:1; padding:.4rem; font-size:.7rem; font-weight:600; border-radius:.5rem;
  background: var(--gold); color: var(--ink); border:none;
  display:flex; align-items:center; justify-content:center; gap:.3rem;
}
.btn-view-quick:hover{ background: var(--gold-soft); }
.btn-compare-quick{
  flex:1; padding:.4rem; font-size:.7rem; font-weight:600; border-radius:.5rem;
  background:#fff; color:var(--muted); border:1px solid rgba(var(--ink-rgb),.22);
  display:flex; align-items:center; justify-content:center; gap:.3rem;
}
.btn-compare-quick.in-compare{
  background: rgba(var(--gold-rgb),.15); border-color:var(--gold); color:var(--ink);
}

.product-info{ padding: .75rem; }
.product-info .p-loc{ font-size:.68rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-info .p-name{ font-size:.85rem; font-weight:700; margin: .1rem 0 .15rem; cursor:pointer; color: var(--ink); }
.product-info .p-name:hover{ color: var(--gold); }
.product-info .p-fabric{ font-size:.68rem; color:var(--muted); margin-bottom:.35rem; }
.product-info .p-rating{ font-size:.68rem; color:var(--muted); margin-bottom:.4rem; }
.product-info .p-price{ font-size:.85rem; font-weight:700; color: var(--ink); }
.product-info .p-orig{ font-size:.7rem; text-decoration:line-through; color:var(--muted); }
.product-info .p-delivery{ font-size:.62rem; color:var(--muted); margin-top:.25rem; }

.stars i{ color: var(--gold); font-size: .8em; }
.stars i.empty{ color: #e3ddd0; }

/* ---------- Artisans ---------- */
.artisan-card{
  position:relative; border-radius:.95rem; overflow:hidden; cursor:pointer;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-s);
}
.artisan-card img{
  width:100%; height:100%; object-fit:cover; opacity:.72;
  transition: transform .5s;
}
.artisan-card:hover img{ transform: scale(1.05); }
.artisan-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(var(--navy-darker-rgb),.92), rgba(var(--navy-darker-rgb),.25) 60%, transparent);
}
.artisan-info{ position:absolute; left:0; right:0; bottom:0; padding:1.25rem; color:#fff; }
.artisan-info h3{ font-size:1.3rem; font-weight:700; margin:.3rem 0 .15rem; }
.artisan-info .loc{ font-size:.75rem; color:rgba(255,255,255,.55); margin-bottom:.75rem; }
.artisan-info .tag{
  font-size:.7rem; padding:.25rem .6rem; border-radius:.25rem;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color: var(--gold-soft);
}

/* ---------- Process steps ---------- */
.step-card{
  border:1px solid var(--border-c); border-radius:.85rem; background:var(--surface); padding:1.5rem; height:100%;
  box-shadow: var(--shadow-s);
}
.step-num{
  font-family: var(--font-display); font-size:2.4rem; font-weight:700;
  color: rgba(var(--gold-rgb),.35);
}
.step-icon{
  width:44px; height:44px; border-radius:.6rem;
  background: rgba(var(--gold-rgb),.14);
  display:flex; align-items:center; justify-content:center; color: var(--ink);
}

/* ---------- Testimonials ---------- */
.testimonial-card{ border:1px solid var(--border-c); border-radius:.85rem; padding:1.5rem; height:100%; background:var(--surface); box-shadow: var(--shadow-s); }

/* ---------- Plans d'abonnement (vitrine) ---------- */
.plan-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--surface); border:1px solid var(--border-c); border-radius:1rem;
  padding:2.25rem 1.75rem 1.75rem; box-shadow:var(--shadow-s);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:rgba(var(--gold-rgb),.45); }
.plan-card-popular{ border:2px solid var(--gold); box-shadow:0 14px 34px rgba(var(--gold-rgb),.16); }
.plan-card-popular:hover{ box-shadow:0 18px 40px rgba(var(--gold-rgb),.22); }
.plan-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--gold); color:#0F172A; font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  padding:.32rem .95rem; border-radius:999px;
  box-shadow:0 4px 12px rgba(var(--gold-rgb),.35);
}
.plan-name{ font-family:var(--font-display); font-size:1.35rem; color:var(--ink); margin-bottom:.25rem; }
.plan-desc{ color:var(--muted); font-size:.8rem; min-height:2.4em; margin-bottom:1.1rem; }
.plan-price{
  display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap;
  margin-bottom:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border-c);
}
.plan-amount{ font-family:var(--font-display); font-size:2.75rem; line-height:1; font-weight:700; color:var(--ink); }
.plan-amount-free{ color:var(--gold); }
.plan-currency{ font-size:.95rem; font-weight:700; color:var(--gold); letter-spacing:.03em; }
.plan-period{ font-size:.8rem; color:var(--muted); }
.plan-features{ list-style:none; margin:0 0 1.5rem; padding:0; flex:1 1 auto; display:flex; flex-direction:column; gap:.55rem; }
.plan-features li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.85rem; line-height:1.35; }
.plan-ico-on{ color:var(--gold); font-size:.85rem; margin-top:.1rem; flex-shrink:0; }
.plan-ico-off{ color:var(--muted); opacity:.5; font-size:.85rem; margin-top:.1rem; flex-shrink:0; }
.plan-off-label{ color:var(--muted); opacity:.65; }

/* ---------- Newsletter ---------- */
.newsletter-section{ border-top:1px solid var(--border-c); background: var(--surface); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-darker); color: rgba(255,255,255,.62); }
.site-footer a{ color: rgba(255,255,255,.62); }
.site-footer a:hover{ color: var(--gold-soft); }
.site-footer h4{ color:#fff; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.footer-social{
  width:32px; height:32px; border-radius:50%;
  background: rgba(var(--gold-rgb),.16);
  display:flex; align-items:center; justify-content:center; color: var(--gold-soft);
}
.footer-social:hover{ background: var(--gold); color: var(--ink); }
.payment-pill{
  font-size:.7rem; padding:.25rem .75rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font-weight:500;
}
/* Badges moyens de paiement (footer, icônes seulement — nom en title/aria) */
.payment-badge{
  width:38px; height:32px; border-radius:.55rem;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color: var(--gold); font-size:.95rem;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  cursor:default;
}
.payment-badge:hover{ background: rgba(var(--gold-rgb),.15); border-color: rgba(var(--gold-rgb),.45); color:#F3E5B6; }
.payment-badge .visually-hidden, .payment-badge .sr-only{ display:none; }

/* ---------- Newsletter (carte détachée marine/or) ---------- */
.newsletter-section{
  background: linear-gradient(135deg, var(--navy-darker) 0%, var(--navy) 55%, #16223C 100%);
  position:relative; overflow:hidden;
}
.newsletter-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(var(--gold-rgb),.10), transparent 65%),
    radial-gradient(500px 260px at 8% 90%, rgba(var(--gold-rgb),.07), transparent 65%);
}
.newsletter-card{
  position:relative; max-width:640px; margin:0 auto;
  background:var(--surface); border:1px solid rgba(var(--gold-rgb),.55); border-radius:1rem;
  box-shadow:var(--shadow-m); padding:2.25rem 2rem 2rem;
}
.newsletter-deco{
  position:absolute; top:-22px; right:24px; width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:#0F172A; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; box-shadow:0 6px 18px rgba(var(--gold-rgb),.35);
}
.newsletter-eyebrow{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.4rem;
}
.newsletter-text{ color:var(--muted); font-size:.9rem; max-width:440px; margin:0 auto; }
.newsletter-form{ max-width:480px; margin:0 auto 1rem; }
.newsletter-input-group .input-group-text{
  background:var(--light-grey); border:1px solid var(--border-c); border-right:0; color:var(--muted);
}
.newsletter-input-group .form-control{
  border:1px solid var(--border-c); box-shadow:none; height:44px; font-size:.9rem;
}
.newsletter-input-group .form-control:focus{ border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(var(--gold-rgb),.18); }
.newsletter-input-group .btn-gold{ padding:0 1.35rem; height:44px; }
.newsletter-input-group .btn{
  border-radius:0 .55rem .55rem 0;
}
.newsletter-note{
  text-align:center; color:var(--muted); font-size:.72rem;
  display:flex; align-items:center; justify-content:center; gap:.35rem;
}
.newsletter-note i{ color: var(--gold); }
[data-theme="dark"] .newsletter-input-group .input-group-text{ background:var(--light-grey); color:var(--muted); }
[data-theme="dark"] .newsletter-input-group .form-control{ background:#151820; color:var(--ink); border-color:var(--border-c); }
[data-theme="dark"] .newsletter-card{ background:var(--surface); }
[data-theme="dark"] .newsletter-deco{ color:#12141a; }
[data-theme="dark"] .payment-badge{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* ---------- Compare sticky bar ---------- */
.compare-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:1040;
  background:var(--surface); border-top:2px solid var(--gold);
  box-shadow: 0 -10px 30px rgba(var(--navy-rgb),.12);
  padding: .75rem 0;
  display:none;
}
.compare-bar.show{ display:block; }
.compare-chip{
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius:.5rem; border:1px solid var(--border-c);
  background: rgba(var(--ink-rgb),.04); font-size:.75rem; font-weight:600;
}
.compare-chip img{ width:28px;height:28px;border-radius:.3rem;object-fit:cover; }

/* ---------- Product modal ---------- */
.pm-color-dot{
  width:24px;height:24px;border-radius:50%; border:2px solid #fff;
  box-shadow:0 0 0 1px var(--border-c);
}
.pm-size-btn{
  width:40px;height:40px; border-radius:.5rem; border:2px solid rgba(var(--ink-rgb),.2);
  color: var(--ink); font-weight:600; font-size:.85rem; background:#fff;
}
.pm-size-btn.active{ background: var(--ink); border-color:var(--ink); color:#fff; }
.pm-guarantee{ font-size:.75rem; color: var(--muted); display:flex; align-items:center; gap:.4rem; }
.pm-tabs .nav-link{ color: var(--muted); font-weight:600; font-size:.875rem; border:none; border-bottom:2px solid transparent; }
.pm-tabs .nav-link.active{ color: var(--ink); border-bottom-color: var(--gold); background:none; }

/* Compare table */
.compare-table th, .compare-table td{ vertical-align: middle; }
.compare-table thead th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }

/* Section headings */
.eyebrow{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color: var(--gold); }
.section-title{ font-family: var(--font-display); font-weight:700; color: var(--ink); }

@media (max-width: 991.98px){
  .nav-desktop{ display:none !important; }
}
@media (min-width: 992px){
  .nav-mobile-toggle{ display:none !important; }
}

/* =========================================================
   BOTTOM NAVBAR — mobile app style (PWA)
   ========================================================= */
@media (max-width: 991.98px){
  body{ padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1045;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-c);
  box-shadow: 0 -4px 20px rgba(var(--navy-rgb),.08);
  padding-bottom: env(safe-area-inset-bottom);
  display: none;
}
@media (max-width: 991.98px){
  .bottom-nav{ display: flex; }
}
.bottom-nav .bn-inner{
  display:flex;
  align-items:stretch;
  width:100%;
  height:60px;
}
.bottom-nav .bn-link{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color: var(--muted);
  font-size:.65rem;
  font-weight:600;
  position:relative;
  transition: color .15s, transform .15s;
  border:none;
  background:none;
  text-decoration:none;
}
.bottom-nav .bn-link i{
  font-size:1.25rem;
  line-height:1;
  transition: transform .15s;
}
.bottom-nav .bn-link.active{
  color: var(--ink);
}
.bottom-nav .bn-link.active i{
  transform: translateY(-2px) scale(1.08);
  color: var(--gold);
}
.bottom-nav .bn-link:active{
  transform: scale(0.94);
}
.bottom-nav .bn-link .bn-badge{
  position:absolute;
  top:2px; right:calc(50% - 18px);
  min-width:16px; height:16px; padding:0 3px;
  font-size:.6rem; font-weight:700;
  background: var(--gold); color: var(--ink);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
}

/* Smooth native-app feel */
html{ -webkit-tap-highlight-color: transparent; }
a, button{ -webkit-tap-highlight-color: transparent; }
@media (max-width: 991.98px){
  html { scroll-behavior: smooth; }
}

/* Page hero (interior pages) — marine sombre */
.page-hero{
  background:
    radial-gradient(circle at 82% 8%, rgba(var(--gold-rgb),.16), transparent 55%),
    linear-gradient(160deg, var(--hero-grad-a, #0B111E) 0%, var(--navy-dark) 60%);
  color: #fff;
  padding: 3.5rem 0 2.5rem;
  position:relative;
  overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 82% 8%, rgba(var(--gold-rgb),.16), transparent 55%);
}
.page-hero .container-xl{ position:relative; z-index:1; }
.page-hero .eyebrow{ color: var(--gold); }
.page-hero h1{ font-family: var(--font-display); font-weight:700; color: #fff; }
.breadcrumb-nav a{ color: rgba(255,255,255,.68); }
.breadcrumb-nav a:hover{ color: var(--gold); }
.breadcrumb-nav .sep{ color: rgba(255,255,255,.35); margin: 0 .4rem; }

/* Simple content cards used across secondary pages */
.simple-card{
  border:1px solid var(--border-c);
  border-radius:.85rem;
  background:var(--surface);
  padding:1.5rem;
  height:100%;
  box-shadow: var(--shadow-s);
}

/* Auth page */
.auth-card{
  max-width: 440px;
  margin: 0 auto;
  border:1px solid var(--border-c);
  border-radius:1.1rem;
  padding: 2rem;
  background:var(--surface);
  box-shadow: var(--shadow-m);
}
.auth-tabs .nav-link{ font-weight:700; color:var(--muted); border:none; border-bottom:2px solid transparent; }
.auth-tabs .nav-link.active{ color:var(--ink); border-bottom-color: var(--gold); background:none; }

/* Cart page */
.cart-line{
  display:flex; gap:1rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--border-c);
}
.cart-line img{ width:72px;height:96px;object-fit:cover;border-radius:.5rem; flex-shrink:0; }
.qty-control{
  display:flex; align-items:center; border:1px solid var(--border-c); border-radius:.5rem; overflow:hidden;
}
.qty-control button{ width:30px; height:30px; border:none; background:var(--surface); color:var(--ink); font-weight:700; }
.qty-control button:hover{ background: var(--light-grey); }
.qty-control span{ width:32px; text-align:center; font-weight:600; font-size:.85rem; }

/* Blog / training cards */
.blog-card, .training-card{
  border:1px solid var(--border-c); border-radius:.85rem; overflow:hidden; background:var(--surface); height:100%;
  box-shadow: var(--shadow-s);
}
.blog-card img, .training-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-card .body, .training-card .body{ padding:1.1rem; }
.blog-card .tag{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); }

/* Legal doc tabs */
.legal-tabs .nav-link{ color: var(--muted); font-weight:600; }
.legal-tabs .nav-link.active{ color:#fff; background: var(--ink); }

/* Artisan directory page */
.artisan-list-card{ border:1px solid var(--border-c); border-radius:.85rem; overflow:hidden; background:var(--surface); height:100%; box-shadow: var(--shadow-s); }
.artisan-list-card .thumb{ aspect-ratio:4/3; overflow:hidden; }
.artisan-list-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.artisan-list-card .body{ padding:1rem; }

/* Product detail page */
.pdp-gallery-thumb{ width:64px; height:80px; object-fit:cover; border-radius:.4rem; cursor:pointer; border:2px solid transparent; }
.pdp-gallery-thumb.active{ border-color: var(--gold); }

/* ---------- Retouches globales Bootstrap (harmonie ivoire) ---------- */
.dropdown-menu{ box-shadow: var(--shadow-m); border:1px solid var(--border-c); border-radius:.7rem; }
.form-control{
  background: var(--surface);
  border-color: var(--border-c);
  color: var(--ink);
}
.form-control:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(var(--gold-rgb),.18);
  background: var(--surface);
  color: var(--ink);
}
.form-check-input:checked{ background-color: var(--gold); border-color: var(--gold); }
.table{ --bs-table-bg: transparent; }

/* =========================================================
   BASCULE DE THÈME (clair / sombre)
   ========================================================= */
.theme-toggle-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1);
  color:#fff; font-size:1rem; cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle-btn:hover{ background: rgba(255,255,255,.2); color: var(--gold); border-color: rgba(255,255,255,.35); }

/* Bouton flottant de secours (portails statiques sans toggle dans le header) */
.theme-fab{
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-c);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-m);
  display: flex; align-items: center; justify-content: center;
  z-index: 1080; font-size: 1.15rem; cursor: pointer;
}
@media (max-width: 991.98px){ .theme-fab{ bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* Toggle intégré au menu mobile (aligné sur .mobile-menu a) */
.mobile-menu .theme-toggle-btn{
  width:100%; height:auto; border:none; border-radius:0;
  background:none; color:var(--ink); font-size:1rem;
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 0; border-bottom:1px solid var(--border-c);
  justify-content:flex-start;
}
.mobile-menu .theme-toggle-btn:hover{ color: var(--gold); background:none; }

/* =========================================================
   MODE SOMBRE — data-theme="dark" (toute la plateforme)
   NB : `:root[data-theme="dark"]` (spécificité 0,2,0) > `:root` du
   `<style>` inline injecté par themeCss (0,1,0) → les variables
   sombres gagnent même si le bloc inline arrive après ce fichier.
   ========================================================= */
:root[data-theme="dark"]{
  --body-bg: #12141a;
  --body-color: #e4e6eb;
  --canvas: #151820;
  --surface: #1e2028;
  --light-grey: #23262f;
  --ink: #e4e6eb;
  --ink-soft: #9ca3af;
  --muted: #8b90a0;
  --border-c: rgba(255,255,255,.10);
  --shadow-s: 0 2px 10px rgba(0,0,0,.35);
  --shadow-m: 0 18px 44px rgba(0,0,0,.45);
  --ink-rgb: 228,230,235;
  --canvas-rgb: 21,24,32;
}
[data-theme="dark"] body{ background: var(--body-bg); color: var(--body-color); }
[data-theme="dark"] .site-header{ background: var(--navy); }
[data-theme="dark"] .search-bar-collapse{ background: var(--canvas); }
[data-theme="dark"] .search-bar-collapse input{ background: var(--surface); color: var(--ink); }
[data-theme="dark"] .mega-dropdown{ background: var(--surface); }
[data-theme="dark"] .mega-dropdown .mega-item:hover{ background: var(--light-grey); }
[data-theme="dark"] .floater-1, [data-theme="dark"] .floater-3{ background: var(--surface); border-color: var(--border-c); }
[data-theme="dark"] .bottom-nav{ background: rgba(30,32,40,.96); }
[data-theme="dark"] .compare-bar{ background: var(--surface); }
[data-theme="dark"] .pm-size-btn{ background: var(--surface); }
[data-theme="dark"] .stars i.empty{ color: #3a3d46; }
[data-theme="dark"] .ad-banner, [data-theme="dark"] .step-card,
[data-theme="dark"] .testimonial-card, [data-theme="dark"] .simple-card,
[data-theme="dark"] .auth-card, [data-theme="dark"] .blog-card,
[data-theme="dark"] .training-card, [data-theme="dark"] .artisan-list-card,
[data-theme="dark"] .product-card{ background: var(--surface); }
[data-theme="dark"] .qty-control button{ background: var(--surface); }
[data-theme="dark"] .dropdown-menu{ background: var(--surface); }
/* Textes encre claire sur fond encre/gold → repassés en sombre pour rester lisibles */
[data-theme="dark"] .btn-gold,
[data-theme="dark"] .promo-bar,
[data-theme="dark"] .promo-bar .btn-close-promo,
[data-theme="dark"] .cart-badge,
[data-theme="dark"] .badge-bestseller,
[data-theme="dark"] .btn-view-quick,
[data-theme="dark"] .bottom-nav .bn-link .bn-badge,
[data-theme="dark"] .category-pill.active,
[data-theme="dark"] .category-pill:hover,
[data-theme="dark"] .badge-surmesure,
[data-theme="dark"] .badge-tendance,
[data-theme="dark"] .badge-exclusif,
[data-theme="dark"] .badge-nouveau,
[data-theme="dark"] .btn-add-cart,
[data-theme="dark"] .pm-size-btn.active,
[data-theme="dark"] .legal-tabs .nav-link.active{ color:#12141a; }
[data-theme="dark"] .theme-fab{ background: var(--surface); color: var(--ink); border-color: var(--border-c); }
/* ── Correctifs contraste (dark) ──────────────────────────────────────
   `--ink` devient la couleur de TEXTE claire en sombre : les boutons qui
   l'utilisaient comme FOND (.btn-navy, .btn-compare-quick) se retrouvaient
   en gris clair. Le CTA principal passe en or (marine sur or ≈ 8,7:1) et
   les cartes Bootstrap basculent sur la surface sombre. */
[data-theme="dark"] .btn-navy{ background-color:#D4AF37; color:#0F172A; }
[data-theme="dark"] .btn-navy:hover{ background-color:#e4e6eb; color:#12141a; }
[data-theme="dark"] .card{ background: var(--surface); border-color: var(--border-c); color: var(--body-color); }
[data-theme="dark"] .btn-compare-quick{ background: var(--surface); color: var(--ink-soft); border-color: var(--border-c); }
[data-theme="dark"] .btn-compare-quick.in-compare{ background: rgba(var(--gold-rgb),.15); border-color: var(--gold); color: var(--ink); }

/* =========================================================
   CORRECTIF RESPONSIVE
   Une gouttière Bootstrap `.g-5` (3rem) génère des marges
   négatives de -1.5rem alors que le padding horizontal du
   container n'est que de 0.75rem : la ligne dépasse le
   container de ~12px de chaque côté, ce qui provoque un
   défilement horizontal (concernait le footer `row g-5`).
   On aligne la gouttière horizontale sur le padding du
   container (la gouttière verticale `gy` reste à 3rem).
   ========================================================= */
.row.g-5{ --bs-gutter-x: 1.5rem; }