/* ===========================================================
   Asia4All — THEME CLAIR universel
   Fond blanc, bandeau noir, plus de doré sauf le "4" du logo.
   À inclure sur toutes les pages publiques après leur <style>.
   =========================================================== */

/* Police luxe pour les gros titres (DM Serif Display — moderne luxe) */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&display=swap');

:root {
  --ink:   #ffffff;
  --void:  #f5f2ec;
  --bone:  #0a0a0a;
  --ivory: #f5f2ec;
  --line:  rgba(0,0,0,.10);
  --ann-bg:#000000;
  --ann-fg:#ffffff;
  /* Nouvelle police pour les gros titres (override --ff-d) */
  --ff-d:  'DM Serif Display', 'Playfair Display', Georgia, serif;
}

/* Force tous les gros titres à utiliser la nouvelle police */
.hero-title,
.coll-title, .coll-title em,
.s-h, .s-h em,
.banner-title, .banner-title em,
.nl-title, .nl-title em,
.wa-cta-title, .wa-cta-title em,
.stat-n,
.coll-ghost,
.hero-ghost-num,
.subcat-card-title, .subcat-card-title em,
#qv-name, #qv-price,
.ci-name,
.ft-logo {
  font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
}
.hero-title em,
.coll-title em,
.s-h em,
.banner-title em,
.nl-title em,
.wa-cta-title em,
.subcat-card-title em {
  font-weight: 400 !important;
  font-style: italic !important;
}

/* MARQUEE / SLIDEBAR — on garde Playfair (police d'origine) */
.mq-item, .mq-item b {
  font-family: 'Playfair Display', Georgia, serif !important;
}
/* Bannière du haut (announce bar) — DM Sans, on touche pas */
.ann, .ann-item { font-family: 'DM Sans', system-ui, sans-serif !important; }

/* ============ BODY / GENERIC ============ */
body { background:#ffffff !important; color:#0a0a0a !important; }
.grain { opacity:.025 !important; }

/* Cursor sur fond clair */
#cur-r              { border-color:rgba(0,0,0,.45) !important; }
.cursor-big #cur-r  { border-color:rgba(0,0,0,.85) !important; }

/* ============ LOADER ============ */
#loader              { background:#ffffff !important; }
#loader-logo         { color:#0a0a0a !important; }
#loader-logo span    { color:var(--gold) !important; }
#loader-sub          { color:rgba(0,0,0,.5) !important; }
#loader-bar-wrap     { background:rgba(0,0,0,.08) !important; }
#loader-bar          { background:#0a0a0a !important; }
#loader-pct          { color:rgba(0,0,0,.45) !important; }

/* ============ ANNOUNCE BAR ============ */
.ann                 { background:#000000 !important; }
.ann-item            { color:#ffffff !important; }
.ann-dot             { background:rgba(255,255,255,.35) !important; }

/* ============ NAV ============
   Au-dessus du hero (état "transparent") : texte BLANC
   Quand la barre blanche apparaît (.scrolled)   : texte NOIR */

/* État transparent (par défaut) — sur l'image hero */
.nav-logo                     { color:#ffffff !important; }
.nav-logo .logo-4             { color:var(--gold) !important; }
.nav-links a                  { color:rgba(255,255,255,.78) !important; }
.nav-links a:hover            { color:#ffffff !important; }
.nav-links a::after           { background:#ffffff !important; }
.cart-nav-btn                 { border-color:rgba(255,255,255,.4) !important; }
.cart-nav-btn:hover           { background:rgba(255,255,255,.1) !important; border-color:#ffffff !important; }
.cart-nav-btn svg             { stroke:#ffffff !important; }

/* État scrolled — barre blanche visible : texte NOIR */
#nav.scrolled                 { background:rgba(255,255,255,.94) !important; backdrop-filter:blur(20px); border-color:rgba(0,0,0,.07) !important; }
#nav.scrolled .nav-logo       { color:#0a0a0a !important; }
#nav.scrolled .nav-logo .logo-4 { color:var(--gold) !important; }
#nav.scrolled .nav-links a    { color:rgba(0,0,0,.55) !important; }
#nav.scrolled .nav-links a:hover { color:#0a0a0a !important; }
#nav.scrolled .nav-links a::after { background:#0a0a0a !important; }
#nav.scrolled .cart-nav-btn   { border-color:rgba(0,0,0,.18) !important; }
#nav.scrolled .cart-nav-btn:hover { background:rgba(0,0,0,.05) !important; border-color:#0a0a0a !important; }
#nav.scrolled .cart-nav-btn svg { stroke:#0a0a0a !important; }

/* CTA "Commander" reste identique partout (déjà très lisible) */
.nav-cta                      { background:#0a0a0a !important; color:#ffffff !important; }
.nav-cta:hover                { background:#ffffff !important; color:#0a0a0a !important; outline:1px solid #0a0a0a; }

/* Dropdown : fond blanc */
.nav-dd-menu         { background:rgba(255,255,255,.96) !important; border-color:rgba(0,0,0,.08) !important; }
.nav-dd-menu li a    { color:rgba(0,0,0,.55) !important; }
.nav-dd-menu li a:hover { color:#0a0a0a !important; }
.nav-dd-menu::before { display:none !important; }

/* Cart icon dans le nav — sac à provisions + label "Votre Panier" */
.cart-nav-btn{
  position:relative !important;
  width:auto !important; height:38px !important;
  padding:0 1.05rem 0 .8rem !important;
  gap:.55rem;
  background:transparent !important;
  border:1px solid rgba(0,0,0,.18) !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  margin-right:.6rem;
  cursor:pointer;
  font-family:'DM Sans',system-ui,sans-serif;
  transition:background .25s, border-color .25s;
}
.cart-nav-btn::after{
  content:"Votre Panier";
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:inherit;
  font-weight:400;
}
@media(max-width:760px){
  .cart-nav-btn{ width:38px !important; padding:0 !important; }
  .cart-nav-btn::after{ display:none; }
}
.cart-nav-btn:hover{
  background:rgba(0,0,0,.04) !important;
  border-color:#0a0a0a !important;
}
.cart-nav-btn svg{
  width:17px !important; height:17px !important;
  stroke:#0a0a0a !important;
  stroke-width:1.6 !important;
  stroke-linecap:round; stroke-linejoin:round;
  fill:none !important;
}
/* Badge noir en haut à droite */
.cart-badge{
  position:absolute !important;
  top:-7px !important; right:-7px !important;
  min-width:18px; height:18px;
  padding:0 5px;
  background:#0a0a0a !important;
  color:#ffffff !important;
  font-size:9.5px !important;
  font-weight:600;
  border-radius:50% !important;
  display:flex !important;
  align-items:center; justify-content:center;
  line-height:1;
  border:2px solid #ffffff;       /* anneau blanc qui détache du fond */
}
.cart-badge.hidden{ display:none !important; }

/* État scrolled — barre blanche : on garde même look */
#nav.scrolled .cart-nav-btn{ border-color:rgba(0,0,0,.18) !important; }
#nav.scrolled .cart-nav-btn svg{ stroke:#0a0a0a !important; }
#nav.scrolled .cart-badge{ border-color:#ffffff; }

/* État transparent (sur image) — bordure et icône blancs */
.cart-nav-btn{ /* supplémentaire pour transparent */ }
#nav:not(.scrolled) .cart-nav-btn{ border-color:rgba(255,255,255,.45) !important; }
#nav:not(.scrolled) .cart-nav-btn svg{ stroke:#ffffff !important; }
#nav:not(.scrolled) .cart-nav-btn:hover{ background:rgba(255,255,255,.08) !important; border-color:#ffffff !important; }
#nav:not(.scrolled) .cart-badge{ border-color:#0a0a0a; background:#ffffff !important; color:#0a0a0a !important; }

/* ============ HERO (image avec overlay sombre, texte blanc) ============ */
#hero                { color:#ffffff; }
.hero-title          { color:#ffffff !important; }
.hero-title em       { color:transparent !important; -webkit-text-stroke:1px rgba(255,255,255,.5); }
.hero-eyebrow span   { color:#ffffff !important; }
.hero-eyebrow-line   { background:#ffffff !important; }
.hero-desc           { color:rgba(255,255,255,.78) !important; }

/* ============ BREADCRUMB ============ */
.breadcrumb          { border-bottom-color:rgba(0,0,0,.08) !important; }
.breadcrumb a        { color:rgba(0,0,0,.45) !important; }
.breadcrumb a:hover  { color:#0a0a0a !important; }
.breadcrumb-sep      { color:rgba(0,0,0,.25) !important; }
.breadcrumb-cur      { color:#0a0a0a !important; }

/* ============ TITRES ET TAGS GÉNÉRIQUES ============ */
.s-tag               { color:#0a0a0a !important; }
.s-tag::before       { background:#0a0a0a !important; }
.s-h, .s-h em        { color:#0a0a0a !important; }

/* ============ BOUTONS gold/line ============ */
.btn-gold            { background:#0a0a0a !important; color:#ffffff !important; }
.btn-gold::before    { background:#ffffff !important; }
.btn-gold:hover      { color:#0a0a0a !important; }
.btn-line            { color:rgba(0,0,0,.6) !important; border-bottom-color:rgba(0,0,0,.2) !important; }
.btn-line:hover      { color:#0a0a0a !important; border-bottom-color:#0a0a0a !important; }

/* ============ SHOP LAYOUT (pages catégories) ============ */
.shop-sidebar        { border-color:rgba(0,0,0,.10) !important; }
.sidebar-head        { color:#0a0a0a !important; border-bottom-color:rgba(0,0,0,.10) !important; }
.sidebar-arrow       { color:#0a0a0a !important; }
.tag-btn             { color:rgba(0,0,0,.55) !important; border-color:rgba(0,0,0,.18) !important; background:#ffffff !important; }
.tag-btn:hover       { color:#0a0a0a !important; border-color:#0a0a0a !important; }
.tag-btn.active      { color:#ffffff !important; background:#0a0a0a !important; border-color:#0a0a0a !important; }
.shop-toolbar        { border-bottom-color:rgba(0,0,0,.10) !important; }
.results-count       { color:rgba(0,0,0,.5) !important; }
.results-count strong{ color:#0a0a0a !important; }
.show-group          { color:rgba(0,0,0,.5) !important; }
.show-num            { color:rgba(0,0,0,.55) !important; }
.show-num.active     { color:#0a0a0a !important; border-bottom-color:#0a0a0a !important; }
.sort-sel            { background:#ffffff !important; color:#0a0a0a !important; border-color:rgba(0,0,0,.18) !important; }
.view-btn            { color:rgba(0,0,0,.5) !important; border-color:rgba(0,0,0,.18) !important; background:#ffffff !important; }
.view-btn.active     { color:#ffffff !important; background:#0a0a0a !important; border-color:#0a0a0a !important; }

/* ============ CARTES PRODUIT (.p-card) ============ */
.p-card              { background:transparent; }
.p-media             { background:#f5f2ec !important; }
.p-badge             { background:#0a0a0a !important; color:#ffffff !important; }
.p-cat               { color:#0a0a0a !important; opacity:.6; }
.p-name              { color:#0a0a0a !important; }
.p-brand             { color:rgba(0,0,0,.55) !important; }
.p-price             { color:#0a0a0a !important; }
.p-btn               { color:#0a0a0a !important; border-color:#0a0a0a !important; background:rgba(255,255,255,.92) !important; }
.p-btn:hover         { background:#0a0a0a !important; color:#ffffff !important; }
.p-hover             { background:rgba(255,255,255,.55) !important; }
.p-actions           { background:transparent; }

/* ============ COLLECTIONS (sur homme.html / femme.html) ============ */
.coll-body           { background:#fafafa !important; border-color:rgba(0,0,0,.07) !important; }
.coll-ghost          { color:rgba(0,0,0,.07) !important; }
.coll-tag            { color:#0a0a0a !important; }
.coll-title, .coll-title em { color:#0a0a0a !important; }
.coll-desc           { color:rgba(0,0,0,.55) !important; }
.coll-link           { color:#0a0a0a !important; border-color:rgba(0,0,0,.18) !important; }
.coll-link:hover     { color:#0a0a0a !important; border-color:#0a0a0a !important; }

/* Subcat cards (grille 6 cartes sur homme.html / femme.html) */
.subcat-grid         { background:rgba(0,0,0,.10) !important; }
.subcat-card         { background:#fafafa !important; }
/* Garde le visuel : overlay foncé + texte blanc dans les cartes (image de fond visible) */

/* ============ MARQUEE (toujours noir comme la bannière) ============ */
.mq-wrap             { background:#0a0a0a !important; border-top:1px solid rgba(255,255,255,.1) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; }
.mq-item             { color:rgba(255,255,255,.7) !important; opacity:1 !important; }
.mq-item b           { color:#ffffff !important; opacity:1 !important; }

/* ============ PROCESS (toujours noir) ============ */
.proc-section        { background:#0a0a0a !important; border-top:1px solid rgba(255,255,255,.1) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; }
.proc-section .s-tag,
.proc-section .s-h,
.proc-section .s-h em{ color:#ffffff !important; }
.proc-section .s-tag::before { background:#ffffff !important; }
.proc-steps::before  { background:linear-gradient(90deg,#ffffff,rgba(255,255,255,.15)) !important; }
.step-dot            { background:#0a0a0a !important; border-color:rgba(255,255,255,.5) !important; }
.step-dot span       { color:#ffffff !important; }
.step:hover .step-dot{ background:#ffffff !important; box-shadow:0 0 0 6px rgba(255,255,255,.12) !important; }
.step:hover .step-dot span { color:#0a0a0a !important; }
.step-t              { color:#ffffff !important; }
.step-d              { color:rgba(255,255,255,.55) !important; }
.proc-section .btn-gold { background:#ffffff !important; color:#0a0a0a !important; }
.proc-section .btn-gold::before { background:#0a0a0a !important; }
.proc-section .btn-gold:hover { color:#ffffff !important; }

/* Variantes du process mini sur les pages catégorie */
.proc-mini           { background:#0a0a0a !important; border-top:1px solid rgba(255,255,255,.1) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; }
.proc-mini .s-tag,
.proc-mini .s-h,
.proc-mini .s-h em   { color:#ffffff !important; }
.proc-mini .s-tag::before { background:#ffffff !important; }

/* ============ STATS (toujours noir) ============ */
.stats-strip         { background:#0a0a0a !important; border-top:1px solid rgba(255,255,255,.06) !important; }
.stat                { border-right:1px solid rgba(255,255,255,.07) !important; }
.stat-n              { color:#ffffff !important; }
.stat-l              { color:rgba(255,255,255,.55) !important; }

/* ============ TRUST (sur fond blanc) ============ */
.trust-section       { background:#ffffff !important; }
.trust-grid          { border-top-color:rgba(0,0,0,.08) !important; }
.trust-item          { border-color:rgba(0,0,0,.08) !important; }
.t-icon              { border-color:rgba(0,0,0,.18) !important; }
.t-icon svg          { stroke:#0a0a0a !important; }
.trust-item:hover .t-icon { border-color:#0a0a0a !important; }
.t-title             { color:#0a0a0a !important; }
.t-desc              { color:rgba(0,0,0,.55) !important; }

/* ============ BANNER PARALLAXE ============ */
.banner-sub          { color:#0a0a0a !important; }
.banner-title, .banner-title em { color:#0a0a0a !important; }

/* ============ BRANDS ROW ============ */
.brands-section      { background:#fafafa !important; border-top-color:rgba(0,0,0,.08) !important; }
.brand               { filter:none !important; opacity:.55 !important; }

/* ============ NEWSLETTER ============ */
.nl-section          { border-top:1px solid rgba(0,0,0,.08) !important; }
.nl-title em         { color:#0a0a0a !important; }
.nl-sub              { color:rgba(0,0,0,.55) !important; }
.nl-form-row         { border-color:rgba(0,0,0,.35) !important; }
.nl-in               { color:#0a0a0a !important; }
.nl-in::placeholder  { color:rgba(0,0,0,.4) !important; }
.nl-go               { color:#0a0a0a !important; }
.nl-go:hover         { color:#666 !important; }
.nl-note             { color:rgba(0,0,0,.5) !important; }

/* ============ FOOTER (toujours noir, "4" doré) ============ */
footer               { background:#0a0a0a !important; color:#ffffff !important; border-top:1px solid rgba(255,255,255,.1) !important; }
.ft-logo, .asia-logo-footer, .ft-logo-text { color:#ffffff !important; }
.ft-logo .logo-4,
.asia-logo-footer .logo-4,
.ft-logo-text span   { color:var(--gold) !important; }
.ft-about            { color:rgba(255,255,255,.55) !important; }
.ft-col-h            { color:#ffffff !important; letter-spacing:.38em; }
.ft-links a          { color:rgba(255,255,255,.55) !important; }
.ft-links a:hover    { color:#ffffff !important; }
.ft-bot              { color:rgba(255,255,255,.4) !important; border-top:1px solid rgba(255,255,255,.08) !important; }

/* ============ QUICK VIEW (overlay reste sombre, mais accents en blanc) ============ */
#qv-overlay.qv-open  { background:rgba(0,0,0,.92) !important; }
#qv-modal            { box-shadow:0 40px 100px rgba(0,0,0,.55) !important; }
#qv-photo            { background:#f5f2ec !important; }
#qv-panel            { background:#0a0a0a !important; border-color:rgba(255,255,255,.08) !important; }
#qv-eyebrow          { color:#ffffff !important; opacity:.6; }
#qv-name             { color:#ffffff !important; }
#qv-desc             { color:rgba(255,255,255,.55) !important; }
.qv-lbl              { color:rgba(255,255,255,.5) !important; }
.qv-sw.active        { outline-color:#ffffff !important; }
.qv-cname            { color:rgba(255,255,255,.6) !important; }
.qv-sz               { color:rgba(255,255,255,.45) !important; border-color:rgba(255,255,255,.18) !important; }
.qv-sz.active        { color:#ffffff !important; border-color:#ffffff !important; background:rgba(255,255,255,.08) !important; }
.qv-sz:hover:not(.active) { color:#ffffff !important; border-color:rgba(255,255,255,.4) !important; }
.qv-sep              { background:rgba(255,255,255,.12) !important; }
#qv-price            { color:#ffffff !important; }
#qv-cta              { background:#ffffff !important; color:#0a0a0a !important; }
#qv-cta:hover        { background:#e5e5e5 !important; }
#qv-cta svg          { stroke:#0a0a0a !important; }
#qv-close            { background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.18) !important; }
#qv-close svg        { stroke:#ffffff !important; }
.qv-wa-direct        { color:rgba(255,255,255,.5) !important; }
.qv-wa-direct:hover  { color:#25D366 !important; }

/* ============ CART DRAWER ============ */
#cart-drawer         { background:#0a0a0a !important; border-left:1px solid rgba(255,255,255,.08) !important; }
#cart-head           { border-bottom-color:rgba(255,255,255,.1) !important; }
#cart-head-title     { color:#ffffff !important; }
#cart-close-btn      { border-color:rgba(255,255,255,.18) !important; }
#cart-close-btn:hover{ border-color:#ffffff !important; }
#cart-close-btn svg  { stroke:#ffffff !important; }
.cart-empty p        { color:rgba(255,255,255,.4) !important; }
.cart-empty svg      { color:rgba(255,255,255,.25) !important; }
.ci                  { border-bottom-color:rgba(255,255,255,.08) !important; }
.ci-img              { background:rgba(255,255,255,.04) !important; }
.ci-brand            { color:#ffffff !important; opacity:.7; }
.ci-name             { color:#ffffff !important; }
.ci-meta             { color:rgba(255,255,255,.45) !important; }
.ci-qbtn             { color:#ffffff !important; border-color:rgba(255,255,255,.18) !important; }
.ci-qbtn:hover       { border-color:#ffffff !important; }
.ci-qnum             { color:#ffffff !important; }
.ci-rm               { color:rgba(255,255,255,.4) !important; }
#cart-foot           { background:#0a0a0a !important; border-top-color:rgba(255,255,255,.1) !important; }
#cart-count-txt      { color:rgba(255,255,255,.5) !important; }

/* ============ WA FLOAT (reste vert WhatsApp) ============ */
/* Pas de modif — couleur d'identité WhatsApp conservée */

/* ============ SECTION wa-cta sur les pages catégorie ============ */
.wa-cta              { background:#fafafa !important; border-top:1px solid rgba(0,0,0,.08) !important; }
.wa-cta-title, .wa-cta-title em { color:#0a0a0a !important; }
.wa-cta-sub          { color:rgba(0,0,0,.55) !important; }