/* ===== BABASS SHOP — THÈME CLAIR PREMIUM ===== */
/* Palette raffinée : ivoire, blanc cassé, neutres, doré discret */

:root {
  --lt-bg: #FAF8F3;
  --lt-surface: #FFFFFF;
  --lt-ivory: #F5F1E8;
  --lt-text: #1A1712;
  --lt-text-soft: #4A443A;
  --lt-muted: #8A8175;
  --lt-line: #E8E0D0;
  --lt-gold: #B8962E;
  --lt-gold-soft: rgba(184, 150, 46, 0.12);
}

/* === BASE === */
body {
  background: var(--lt-bg) !important;
  color: var(--lt-text) !important;
}

/* === HEADER (clair premium) === */
.bb-lux-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid var(--lt-line) !important;
  backdrop-filter: blur(10px);
}
.bb-lux-header .bb-lux-brand .name {
  color: var(--lt-gold) !important;
}
.bb-lux-header .bb-lux-brand .name span {
  color: var(--lt-text) !important;
}
.bb-lux-header .bb-lux-brand .tag {
  color: var(--lt-muted) !important;
}
.bb-lux-icons a, .bb-lux-icons button {
  color: var(--lt-text) !important;
}
.bb-lux-icons a:hover, .bb-lux-icons button:hover {
  color: var(--lt-gold) !important;
}
.lang-switch a {
  color: var(--lt-muted) !important;
}
.lang-switch a.active {
  color: var(--lt-gold) !important;
}

/* === HERO (clair) === */
.bb-hero {
  background: linear-gradient(135deg, #FAF8F3 0%, #F0EAD8 100%) !important;
  color: var(--lt-text) !important;
}
.bb-hero h1, .bb-hero h2, .bb-hero .hero-title {
  color: var(--lt-text) !important;
}
.bb-hero p, .bb-hero .hero-sub {
  color: var(--lt-text-soft) !important;
}
.bb-hero .bb-btn-gold, .bb-hero .cta-gold {
  background: var(--lt-gold) !important;
  color: #fff !important;
}

/* === SECTIONS === */
.bb-section, .bb-catalogue, .catalogue, #catalogue {
  background: var(--lt-bg) !important;
}
.bb-section h2, .bb-catalogue h2 {
  color: var(--lt-text) !important;
}

/* === CARTES PRODUITS === */
.bb-card, .product-card {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.bb-card .nom, .product-card .nom,
.bb-card .prix, .product-card .prix {
  color: var(--lt-text) !important;
}
.bb-card .marque, .product-card .marque {
  color: var(--lt-muted) !important;
}

/* === CATÉGORIES (images conservées) === */
.bb-cat-card {
  border: 1px solid var(--lt-line) !important;
}
.bb-cat-card .bb-cat-label {
  color: #fff !important; /* texte sur image */
}

/* === FOOTER (sombre stratégique) === */
.bb-footer {
  background: #141210 !important;
  color: #E8E0D0 !important;
}
.bb-footer a {
  color: #B8AE9C !important;
}
.bb-footer h4 {
  color: var(--lt-gold) !important;
}

/* === BOUTONS === */
.bb-btn-gold, .btn-gold, .bb-cta {
  background: var(--lt-gold) !important;
  color: #fff !important;
  border: none !important;
}
.bb-btn-outline {
  border: 1px solid var(--lt-gold) !important;
  color: var(--lt-gold) !important;
  background: transparent !important;
}

/* === FORMULAIRES === */
input, select, textarea {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--lt-gold) !important;
  outline: none !important;
}
label {
  color: var(--lt-text-soft) !important;
}

/* === PANIER === */
.bb-panier-titre {
  color: var(--lt-text) !important;
}
.bb-ligne {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
}
.bb-ligne .nom {
  color: var(--lt-text) !important;
}
.bb-ligne .prix-u {
  color: var(--lt-muted) !important;
}
.bb-ligne-total {
  color: var(--lt-text) !important;
  font-weight: 600;
}
.bb-resume {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
}
.bb-resume h3, .bb-resume-ligne {
  color: var(--lt-text) !important;
}
.bb-resume-total .montant {
  color: var(--lt-gold) !important;
}

/* === CHECKOUT === */
.co-page {
  --ink: #FAF8F3 !important;
  --card: #FFFFFF !important;
  --card2: #F5F1E8 !important;
  --txt: #1A1712 !important;
  --muted: #6B6455 !important;
  --field: #FFFFFF !important;
  --field-line: #E8E0D0 !important;
  --line: rgba(184, 150, 46, 0.2) !important;
}

/* === COMPTE === */
.bb-compte-card {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
}

/* === CINÉMA (reste sombre - identité) === */
.cinema-dark {
  background: #0A0908 !important;
}

/* === CORRECTIONS CIBLÉES (vrais sélecteurs) === */
.hp-hero {
  background: linear-gradient(135deg, #FAF8F3 0%, #F0EAD8 100%) !important;
}
.hp-hero::before { display: none !important; }
.hp-hero h1, .hp-hero h2, .hp-hero .hp-title { color: #1A1712 !important; }
.hp-hero p, .hp-hero .hp-sub { color: #4A443A !important; }
.hp-wrap { background: #FAF8F3 !important; }
.hp-pcard {
  background: #FFFFFF !important;
  border: 1px solid #E8E0D0 !important;
}
.hp-pcard .hp-name, .hp-pcard h3 { color: #1A1712 !important; }
.hp-pcard .hp-price { color: #1A1712 !important; }
.hp-pcard .hp-brand { color: #8A8175 !important; }
.hp-badge { background: #B8962E !important; color: #fff !important; }
.hp-add {
  background: #1A1712 !important;
  color: #fff !important;
}
.hp-cta {
  background: #B8962E !important;
  color: #fff !important;
}
.hp-promo { background: #F5F1E8 !important; }
.hp-promo h3, .hp-promo p { color: #1A1712 !important; }
/* Sections principales */
main { background: #FAF8F3 !important; }
.hp-section { background: #FAF8F3 !important; }
.hp-section h2 { color: #1A1712 !important; }

/* === CORRECTIONS LISIBILITÉ (v2) === */
/* Flèches carrousel : visibles sur fond clair */
.hp-arrow {
  background: rgba(26, 23, 18, 0.85) !important;
  border: 1px solid #1A1712 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
.hp-arrow:hover {
  background: #B8962E !important;
  border-color: #B8962E !important;
}

/* Bouton Cinéma : contraste renforcé */
.hp-cinema-btn, a[href*="cinema"].hp-cta, .hp-hero a[href="/cinema"] {
  background: #1A1712 !important;
  color: #FFFFFF !important;
  border: 2px solid #1A1712 !important;
  font-weight: 600 !important;
}
.hp-cinema-btn:hover {
  background: #B8962E !important;
  border-color: #B8962E !important;
}

/* Textes et dorés : renforcer sur fond clair */
.hp-hero .hp-eyebrow, .hp-eyebrow {
  color: #8A6D1B !important; /* doré plus foncé */
  font-weight: 600 !important;
}
.hp-sub, .hp-hero p {
  color: #3A352C !important; /* texte plus foncé */
}
/* Prix et accents */
.hp-price { color: #1A1712 !important; font-weight: 700 !important; }
.hp-old-price { color: #8A8175 !important; }

/* Zone noire sous image parfum : vérifier */
.hp-hero-img-wrap, .hp-hero-visual {
  background: transparent !important;
}

/* Ombre du flacon hero : adoucie pour fond clair */
.hp-slide-img img {
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15)) !important;
}

/* === CORRECTIONS CONTRASTE v3 === */
/* Bouton Cinéma : contraste fort */
.hp-hero a[href="/cinema"], .hp-cinema, a.hp-btn-cinema {
  background: #1A1712 !important;
  color: #FFFFFF !important;
  border: 2px solid #1A1712 !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
}
/* Titre Avis clients : sombre et lisible */
.bb-avis h2, .bb-avis h3, .avis-titre, [class*="avis"] h2 {
  color: #1A1712 !important;
}
/* Textes secondaires : plus foncés */
.bb-produit .bb-desc, .bb-description, .bb-info-sec {
  color: #3A352C !important;
}
.text-muted, .bb-muted { color: #5A5348 !important; }
/* Étapes checkout : lisibles */
.co-steps .step, .co-etape {
  color: #4A443A !important;
}
.co-steps .step.active, .co-etape.active {
  color: #1A1712 !important;
  font-weight: 700 !important;
}
/* Messages validation : cachés par défaut */
.co-field .error:empty { display: none !important; }
input:placeholder-shown + .error { display: none !important; }

/* === POLISSAGE PREMIUM v4 === */
/* Boutons secondaires : contraste élégant */
.hp-btn-secondary, .hp-hero .hp-btn-outline {
  border: 2px solid #1A1712 !important;
  color: #1A1712 !important;
  background: rgba(255,255,255,0.9) !important;
  font-weight: 600 !important;
}
.hp-btn-secondary:hover {
  background: #1A1712 !important;
  color: #fff !important;
}
/* Nom parfum : présentation premium */
.bb-produit h1, .bb-produit .bb-nom {
  color: #1A1712 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.bb-produit .bb-marque {
  color: #8A6D1B !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.85em !important;
}
/* Description : lisible et élégante */
.bb-produit .bb-desc {
  color: #3A352C !important;
  line-height: 1.7 !important;
}
/* Infos service : bien visibles */
.bb-service-info, .bb-garanties {
  color: #4A443A !important;
}
.bb-service-info strong { color: #1A1712 !important; }
/* Harmonisation boutons */
.bb-btn, button.bb-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
/* Espacements équilibrés */
.bb-section { padding: 48px 0 !important; }
.bb-card { border-radius: 12px !important; }
/* Typographie raffinée */
body { -webkit-font-smoothing: antialiased !important; }
h1, h2, h3 { letter-spacing: -0.015em !important; }

/* === FINITION PROFESSIONNELLE v5 === */
/* --- Compte : titres lisibles sur fond clair --- */
.bb-compte h2, .bb-compte h3,
.compte-section h2, .compte-section h3 {
  color: #1A1712 !important;
}
/* --- Compte : cartes stats aux couleurs de la marque --- */
.stat-card, .bb-stat {
  background: #FFFFFF !important;
  border: 1px solid #E8E0D0 !important;
  border-top: 3px solid #B8962E !important;
}
.stat-card .stat-value, .bb-stat .valeur {
  color: #1A1712 !important;
}
.stat-card .stat-label, .bb-stat .label {
  color: #6B6455 !important;
}
/* Supprimer les couleurs arc-en-ciel */
.stat-card.violet, .stat-card.rose, .stat-card.bleu,
.bb-stat.violet, .bb-stat.rose, .bb-stat.bleu {
  background: #FFFFFF !important;
  border-top-color: #B8962E !important;
}
/* --- Cinéma : contraste amélioré (reste sombre) --- */
.cinema-hero h1, .cinema-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
}
.cinema-card .platform-name {
  color: #E8E0D0 !important;
}
.cinema-card .price, .cinema-card .prix {
  color: #D4AF37 !important;
  font-weight: 700 !important;
}
/* --- Accueil : boutons secondaires bien visibles --- */
.hp-btn-outline, a.hp-btn-outline {
  border: 2px solid #1A1712 !important;
  color: #1A1712 !important;
  background: #FFFFFF !important;
  font-weight: 700 !important;
}
/* --- Produit : hiérarchie --- */
.bb-produit .bb-prix {
  color: #1A1712 !important;
  font-size: 1.6em !important;
  font-weight: 700 !important;
}
/* --- Mobile : lisibilité --- */
@media (max-width: 768px) {
  .co-step-label { font-size: 0.75em !important; }
  .bb-resume { font-size: 0.95em !important; }
}

/* === FIX COMPTE v6 (sélecteurs directs) === */
.bb-section-titre h2 {
  color: #1A1712 !important;
}
div.bb-section-titre > h2 {
  color: #1A1712 !important;
}
/* Forcer tous les h2 du compte en sombre */
.bb-compte h2, #compte h2, main h2 {
  color: #1A1712 !important;
}
/* === FIX CINÉMA v6 === */
.cinema-platform-name, .platform-name {
  color: #E8E0D0 !important;
}
/* Noms sous les logos */
.cinema-card span:last-child, .svod-card .nom {
  color: #E8E0D0 !important;
}

/* === ULTRA-SPECIFIC FIXES v7 === */
/* Compte: forcer avec sélecteur d'attribut */
h2[id="abonnements"], h2[id="infos"], 
div[class*="section-titre"] h2 {
  color: #1A1712 !important;
  text-shadow: none !important;
}
/* Cinéma: noms plateformes */
[style*="background:#0"] .platform, 
.cinema-grid span {
  color: #FFFFFF !important;
}

/* === CINÉMA h3 (cartes dynamiques) === */
.svc-body h3, .svc h3 {
  color: #FFFFFF !important;
}

/* === FINALISATION v8 === */
/* Cartes stats : chiffres et libellés bien visibles */
.bb-stat .chiffre {
  color: #1A1712 !important;
  font-size: 1.8em !important;
  font-weight: 700 !important;
}
.bb-stat .etiquette {
  color: #4A443A !important;
  font-weight: 500 !important;
}
/* Menu latéral : Mon compte lisible */
.bb-compte-aside .titre, .bb-menu-titre {
  color: #1A1712 !important;
}
/* Libellés formulaire : pas trop sombres */
.bb-form label, .bb-compte label {
  color: #4A443A !important;
}
/* Cinéma : forcer blanc sur h3 des cartes */
.svc h3, .svc-body h3, div.svc > div > h3 {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* === VÉRIFICATION FINALE v9 === */
/* Cinéma : titre bannière bien lisible */
.chero h1, .chero .titre {
  color: #FFFFFF !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5) !important;
}
.chero .kick, .chero .surtitre {
  color: #D4AF37 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8) !important;
}
.chero .desc, .chero p {
  color: #F0EBDD !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7) !important;
}
/* Cartes abonnement : tous les textes lisibles */
.svc-body .desc, .svc .info {
  color: #C8BFAE !important;
}
.svc-body .formules {
  color: #D4AF37 !important;
}

/* === FIX PRÉCIS : titre bannière cinéma === */
/* Structure réelle: .cslide > .cslide-body > h3 */
.cslide-body h3 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 32px rgba(0,0,0,0.6) !important;
}
.cslide-kicker {
  color: #D4AF37 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85) !important;
}
.cslide-body p {
  color: #F0EBDD !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.75) !important;
}

/* === FIX MOBILE PROD v10 === */
/* 1. Nom parfum + prix sous "Voir la collection" : contraste fort */
.hp-hero .hp-product-name, .hp-slide .hp-pname {
  color: #1A1712 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(255,255,255,0.8) !important;
}
.hp-hero .hp-product-price, .hp-slide .hp-pprice {
  color: #1A1712 !important;
  font-weight: 700 !important;
}
/* Pastille produit hero */
.hp-pastille, .hp-badge-produit {
  background: #1A1712 !important;
  color: #FFFFFF !important;
}
/* 2. Bouton Cinéma : texte et bordures visibles */
a[href="/cinema"].hp-cta, .hp-btn-cinema {
  background: #1A1712 !important;
  color: #FFFFFF !important;
  border: 2px solid #1A1712 !important;
}
/* 3. Cartes catégories : textes lisibles */
.hp-cat-label, .bb-cat-label {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
  font-weight: 600 !important;
}
/* 4. Header mobile : espacement professionnel */
@media (max-width: 768px) {
  .bb-lux-header {
    padding: 8px 12px !important;
  }
  .bb-lux-header .bb-lux-brand .name {
    font-size: 1.1em !important;
  }
  .bb-lux-icons {
    gap: 12px !important;
  }
}
/* 5. Audit global : prix, liens, boutons */
.hp-price, .bb-prix, .prix {
  color: #1A1712 !important;
}
a.bb-link, .bb-lien {
  color: #8A6D1B !important;
  font-weight: 500 !important;
}

/* === FIX PRÉCIS v11 : badge produit + bouton cinéma === */
/* 1. Badge produit hero (.hp-slide-tag) : texte sombre lisible sur fond or clair */
.hp-slide-tag {
  color: #1A1712 !important;
  background: rgba(212,175,55,.22) !important;
  border: 1.5px solid #B8912F !important;
  font-weight: 600 !important;
}
.hp-slide-tag i {
  color: #8A6D1B !important;
}
/* 2. Bouton Cinéma (.hp-cine-link a) : identifiable, élégant, contrasté */
.hp-cine-link a {
  color: #1A1712 !important;
  background: #FFFFFF !important;
  border: 2px solid #B8912F !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(184,145,47,.18) !important;
}
.hp-cine-link a i {
  color: #B8912F !important;
}
.hp-cine-link a:hover {
  background: #1A1712 !important;
  color: #FFFFFF !important;
  border-color: #1A1712 !important;
}
.hp-cine-link a:hover i {
  color: #D4AF37 !important;
}

/* === FIX v12 : barre noire sous image hero === */
/* Cause: ancien correctif ciblait des sélecteurs inexistants */
.hp-slide-img, section.hp-hero .hp-slide .hp-slide-img {
  background: transparent !important;
}
.hp-slide-img a {
  background: transparent !important;
  display: inline-block;
}

/* v13 diagnostic retiré - le drop-shadow n'était pas la cause */

/* === OPTIMISATION RÉACTIVITÉ v14 === */
/* Élimine le délai 300ms sur mobile */
a, button, .hp-cta, .hp-add, .hp-dot, .hp-arrow,
.hp-cat, .hp-pcard, .hp-slide-tag, .hp-cine-link a,
input[type="submit"], [role="button"] {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(212,175,55,.25) !important;
}
/* Feedback visuel immédiat au toucher */
.hp-cta:active, .hp-add:active, button:active {
  transform: scale(.97) !important;
  transition: transform .05s !important;
}
/* Transitions trop longues réduites */
.hp-rv {
  transition-duration: .3s !important;
}

/* === STELLA : ne jamais recouvrir les boutons importants sur mobile === */
@media (max-width: 768px) {
  /* Réduire la bulle et la décaler pour éviter les boutons de checkout */
  #stella-bulle {
    bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 35 !important; /* Sous la zone de confirmation (z-index 40) */
  }
  /* Fenêtre de chat : ne pas bloquer tout l'écran */
  #stella-fenetre {
    bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 60vh !important;
    z-index: 35 !important;
  }
}