/* ============================================================================
   dark.css — MB « Premium Personal » (Direction B, validée cliente 06/07/2026)
   Charte noire au standing LOP, accent OR chaud (au lieu du teal) comme
   signature propre à Manal. Home + Podcast (preuve).

   Loaded AFTER css/style.css. COULEURS uniquement — aucun layout touché.
     1. Remap des tokens :root → toutes les sections en style="… var(--color-*)"
        basculent en noir gratuitement.
     2. !important ciblés sur les classes Tailwind dont la couleur est codée en
        dur dans js/main.js (bg-warm-bg / text-dark / text-muted / border-bord).
     3. Finitions premium : dégradé or sur les CTA, filets or, hover cartes.
   ============================================================================ */

:root {
    /* Surfaces (noir LOP) */
    --color-deep:     #0A0A0A;
    --color-dark:     #111119;
    --color-brown:    #1A1420;
    --color-warm-bg:  #0A0A0A;
    --color-light-bg: #111119;

    /* Texte */
    --color-text:     #FFFFFF;
    --color-muted:    #9CA3AF;
    --color-on-dark:  #E5E2E1;

    /* Filets */
    --color-border:   rgba(255, 255, 255, 0.10);

    /* Accent OR chaud (signature MB — gold-on-black, standing LOP) */
    --color-bronze:   #C4956A;
    --color-blush:    #D4A08A;
    --gold-a:         #C4956A;
    --gold-b:         #E3B979;
    --gold-grad:      linear-gradient(135deg, #C4956A 0%, #E3B979 100%);
}

body { background-color: var(--color-warm-bg); color: var(--color-text); }

/* --- Tailwind hard-coded utilities (js/main.js) → dark --- */
.bg-warm-bg  { background-color: #0A0A0A !important; }
.bg-light-bg { background-color: #111119 !important; }
.text-dark   { color: #FFFFFF !important; }
.text-muted  { color: #9CA3AF !important; }
.border-bord { border-color: rgba(255, 255, 255, 0.10) !important; }

/* --- Solid header (Podcast) : verre clair → verre sombre --- */
.site-header {
    background: rgba(10, 10, 10, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.site-header .site-logo { color: var(--color-on-dark); }
.site-header .site-nav a { color: rgba(245, 237, 232, 0.6); }
.site-header .site-nav a:hover,
.site-header .site-nav a.active { color: var(--color-on-dark); }
.site-header .site-nav a.active { border-bottom-color: var(--color-bronze); }
.site-header .lang-switch { color: rgba(245, 237, 232, 0.5); }
.site-header .lang-switch .lang-active { color: var(--color-on-dark); }
/* Home garde son header hero transparent (.header-hero plus spécifique). */

/* --- Bouton « Contact » header : contour visible sur noir --- */
.btn-primary {
    background: transparent;
    color: var(--color-on-dark);
    border: 1px solid rgba(245, 237, 232, 0.4);
}
.btn-primary:hover {
    background: var(--gold-grad);
    color: #0A0A0A;
    border-color: transparent;
}

/* --- CTA principaux : dégradé OR premium --- */
.btn-bronze,
.hero-fullpage .hero-text .hero-cta {
    background: var(--gold-grad);
    color: #0A0A0A;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.btn-bronze:hover,
.hero-fullpage .hero-text .hero-cta:hover { filter: brightness(1.06); }
/* Le CTA secondaire du hero reste en contour (inline transparent l'emporte). */

/* --- Menu mobile → sombre --- */
.mobile-menu { background: #0A0A0A; }
.mobile-menu a { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* --- Logo band : wordmarks clairs sur noir (glyphe BBC corrigé dans le HTML) --- */
.logo-band { color: rgba(245, 237, 232, 0.55); }

/* --- Cartes « facettes » (accueil) : surface LOP + hover or premium --- */
.facet-card {
    background: #111119 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.facet-card:hover {
    border-color: rgba(196, 149, 106, 0.55) !important;
    transform: translateY(-4px);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55);
}

/* --- Filet or fin (rappel des lignes accent de LOP) --- */
.intro-rule { background: var(--gold-grad) !important; height: 2px !important; }

/* --- Hero : scrim raffiné (texte à droite lisible, photo à gauche préservée) --- */
.hero-fullpage .hero-overlay {
    background:
        linear-gradient(to left, rgba(10,10,10,.78) 0%, rgba(10,10,10,.32) 38%, transparent 62%),
        linear-gradient(to top,  rgba(10,10,10,.55) 0%, transparent 46%);
}
/* Ancrage haut-gauche : le « cover » ne rogne jamais le haut (sa tête). */
.hero-fullpage .hero-bg img { object-position: left top; }
/* Correctif « tête coupée » (desktop) : la photo démarre SOUS le header.
   L'image n'a ~10% de marge au-dessus de la tête → le header de 80px la mordait.
   On décale le fond de la hauteur du header ; le bandeau noir se fond dans le
   thème sombre (rendu plus institutionnel, à la LOP). Mobile inchangé. */
@media (min-width: 768px) {
    .hero-fullpage .hero-bg { top: 80px; }
}

/* Liens accent (rôles hero, footer) → or */
.hero-fullpage .hero-text .hero-subtitle a { color: #E3B979 !important; text-decoration-color: rgba(227,185,121,.6); }

/* --- Formulaires (page Contact) sur fond noir --- */
input, textarea, select { color: var(--color-text); }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.32); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--color-bronze); }
select option { color: #111; }