/* ============================================
   ATELIER DU GROOVE - PALETTES DE COULEURS PREMIUM
   Deux thèmes sophistiqués pour ambiances riches
   ============================================ */

/* ================================================
   THÈME 1: MIDNIGHT LOUNGE (par défaut)
   Charbon élégant, ambiance jazz club nocturne
   ================================================ */
:root,
[data-theme="midnight"] {
    /* --- Couleurs de base --- */
    --color-bg-primary: #1C1917;         /* Charcoal warm - fond principal */
    --color-bg-elevated: #292524;        /* Surfaces légèrement élevées */
    --color-bg-deep: #0C0A09;            /* Ombres et zones enfoncées */
    --color-bg-overlay: rgba(250, 248, 243, 0.04); /* Overlay subtil fumé */

    /* --- Variables legacy (pour compatibilité) --- */
    --color-cream: #FAF8F3;
    --color-cream-dark: #D6D3CD;
    --color-ink: #FAF8F3;
    --color-ink-light: #A8A29E;
    --color-brass: #D4A574;
    --color-brass-light: #E8C4A0;
    --color-brass-dark: #A67C52;

    /* --- Texte --- */
    --color-text-primary: #FAF8F3;       /* Crème chaud - texte principal */
    --color-text-secondary: #D6D3CD;     /* Texte secondaire */
    --color-text-tertiary: #A8A29E;      /* Texte discret */
    --color-text-muted: rgba(250, 248, 243, 0.5); /* Texte très discret */

    /* --- Accents Brass (or réchauffé) --- */
    --color-accent-primary: #D4A574;     /* Brass lumineux */
    --color-accent-bright: #E8C4A0;      /* Highlights dorés */
    --color-accent-deep: #A67C52;        /* Brass assombri */
    --color-accent-glow: rgba(212, 165, 116, 0.25); /* Glow effect */
    --color-accent-subtle: rgba(212, 165, 116, 0.12); /* Bg subtle */

    /* --- Éléments spécifiques --- */
    --color-vinyl-black: #0A0908;        /* Noir vinyle profond */
    --color-led-active: #D97706;         /* LED/indicateurs actifs (amber) */
    --color-border-subtle: rgba(250, 248, 243, 0.08);
    --color-border-medium: rgba(250, 248, 243, 0.15);
    --color-border-strong: rgba(212, 165, 116, 0.3);

    /* --- Dégradés signature --- */
    --gradient-brass: linear-gradient(135deg, #E8C4A0 0%, #D4A574 50%, #A67C52 100%);
    --gradient-bg-subtle: linear-gradient(180deg, #1C1917 0%, #0C0A09 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(212, 165, 116, 0.15), transparent 70%);
}

/* ================================================
   THÈME 2: TERRE BRÛLÉE
   Tons terreux profonds, ambiance organique
   ================================================ */
[data-theme="earth"] {
    /* --- Couleurs de base --- */
    --color-bg-primary: #2C1810;         /* Brun chocolat profond */
    --color-bg-elevated: #3D2518;        /* Surfaces élevées terre cuite */
    --color-bg-deep: #1A0E08;            /* Ombres profondes */
    --color-bg-overlay: rgba(245, 237, 228, 0.03);

    /* --- Variables legacy (pour compatibilité) --- */
    --color-cream: #F5EDE4;
    --color-cream-dark: #D4C7BB;
    --color-ink: #F5EDE4;
    --color-ink-light: #A89985;
    --color-brass: #C9955F;
    --color-brass-light: #E5B886;
    --color-brass-dark: #9D7247;

    /* --- Texte --- */
    --color-text-primary: #F5EDE4;       /* Sable chaud */
    --color-text-secondary: #D4C7BB;     /* Beige nuancé */
    --color-text-tertiary: #A89985;      /* Taupe */
    --color-text-muted: rgba(245, 237, 228, 0.45);

    /* --- Accents Copper-Gold (cuivre-or) --- */
    --color-accent-primary: #C9955F;     /* Or cuivré */
    --color-accent-bright: #E5B886;      /* Highlights chauds */
    --color-accent-deep: #9D7247;        /* Cuivre patiné */
    --color-accent-glow: rgba(201, 149, 95, 0.22);
    --color-accent-subtle: rgba(201, 149, 95, 0.10);

    /* --- Éléments spécifiques --- */
    --color-vinyl-black: #0F0805;        /* Noir chaud */
    --color-led-active: #B85C38;         /* LED rouille */
    --color-border-subtle: rgba(245, 237, 228, 0.07);
    --color-border-medium: rgba(245, 237, 228, 0.14);
    --color-border-strong: rgba(201, 149, 95, 0.35);

    /* --- Accents organiques uniques --- */
    --color-walnut: #4A2C1A;             /* Bois de noyer */
    --color-rust-accent: #B85C38;        /* Rouille chaleureuse */

    /* --- Dégradés signature --- */
    --gradient-brass: linear-gradient(135deg, #E5B886 0%, #C9955F 50%, #9D7247 100%);
    --gradient-bg-subtle: linear-gradient(180deg, #2C1810 0%, #1A0E08 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(201, 149, 95, 0.12), transparent 70%);
}

/* ================================================
   MAPPAGE DES VARIABLES DANS LE CSS PRINCIPAL
   ================================================ */

/* Appliquer les nouvelles couleurs */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* Navigation */
.nav {
    background: linear-gradient(to bottom, var(--color-bg-primary) 0%, transparent 100%);
}

.nav--scrolled {
    background: color-mix(in srgb, var(--color-bg-primary) 85%, transparent);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: 0 1px 0 var(--color-border-subtle);
}

.nav__monogram,
.hero__monogram-a,
.hero__monogram-g,
.footer__monogram {
    fill: var(--color-text-primary);
}

.nav__link::after {
    background-color: var(--color-accent-primary);
}

.nav__link--accent {
    color: var(--color-accent-primary);
}

.nav__menu-btn span {
    background-color: var(--color-text-primary);
}

/* Mobile menu */
.mobile-menu {
    background-color: var(--color-bg-primary);
}

/* Hero */
.hero__tagline {
    color: var(--color-text-secondary);
}

.hero__scroll-text {
    color: var(--color-text-tertiary);
}

.hero__scroll-indicator {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
    z-index: 100;
    text-decoration: none;
    color: inherit;
}

.hero__scroll-indicator:hover {
    transform: translateY(-5px);
}

.hero__scroll-indicator:active {
    transform: translateY(-2px);
}

.hero__scroll-line {
    background: linear-gradient(to bottom, var(--color-accent-primary), transparent);
}

/* Hero — atmosphère alignée sur les palettes premium */
.hero__vignette {
    background: radial-gradient(
        ellipse 85% 65% at 50% 45%,
        transparent 0%,
        color-mix(in srgb, var(--color-bg-deep) 55%, transparent) 100%
    );
}

.hero__grid {
    opacity: 0.055;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text-primary) 35%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text-primary) 35%, transparent) 1px, transparent 1px);
}

.hero__orb--1 {
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-bright) 45%, transparent) 0%, transparent 70%);
}

.hero__orb--2 {
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-primary) 38%, transparent) 0%, transparent 68%);
}

.hero__orb--3 {
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-deep) 28%, transparent) 0%, transparent 65%);
}

.hero__kicker {
    color: var(--color-accent-bright);
}

.hero__title-line {
    color: var(--color-text-primary);
}

.hero__title-accent {
    background: linear-gradient(
        120deg,
        var(--color-accent-bright) 0%,
        var(--color-accent-primary) 40%,
        var(--color-accent-deep) 60%,
        var(--color-accent-bright) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Sections avec fond clair -> adapter */
.manifeste {
    background-color: var(--color-bg-primary);
}

.manifeste__header::after {
    background: linear-gradient(to bottom, var(--color-accent-primary), transparent);
}

.manifeste__eyebrow {
    color: var(--color-accent-primary);
}

.manifeste__intro-text {
    color: var(--color-text-secondary);
}

.manifeste__chapter {
    border-top: 1px solid var(--color-border-subtle);
}

.manifeste__chapter:hover {
    background: var(--color-bg-overlay);
    border-color: var(--color-border-medium);
    box-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.35);
}

.manifeste__chapter-num {
    color: var(--color-accent-primary);
}

.manifeste__chapter-text {
    color: var(--color-text-secondary);
}

/* Auditorium - déjà sombre mais ajuster */
.auditorium {
    background-color: var(--color-bg-deep);
    color: var(--color-text-primary);
}

.auditorium::before {
    background:
        radial-gradient(ellipse at 30% 20%, var(--color-accent-glow) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, var(--color-accent-glow) 0%, transparent 40%);
}

.auditorium__eyebrow {
    color: var(--color-accent-bright);
}

.auditorium__subtitle {
    color: var(--color-text-muted);
}

/* Turntable - enrichir les couleurs */
.turntable__glow {
    background: radial-gradient(
        circle at center,
        var(--color-accent-glow) 0%,
        rgba(212, 165, 116, 0.08) 30%,
        transparent 60%
    );
}

.turntable__base {
    background: linear-gradient(
        135deg,
        var(--color-walnut, #2d2520) 0%,
        #3d332a 20%,
        #2a221c 40%,
        #352c24 60%,
        var(--color-walnut, #2d2520) 80%,
        #3d332a 100%
    );
}

.turntable__label {
    background: var(--gradient-brass);
}

.turntable__label-brand {
    color: var(--color-bg-deep);
}

.turntable__label-a,
.turntable__label-g {
    color: var(--color-bg-deep);
}

.turntable__label-slash {
    color: rgba(12, 10, 9, 0.5);
}

.turntable__label-rpm {
    color: rgba(12, 10, 9, 0.6);
}

.turntable__play-btn {
    border-color: var(--color-accent-primary);
    background: var(--color-accent-subtle);
    color: var(--color-accent-primary);
}

.turntable__play-btn:hover {
    background: var(--color-accent-primary);
    color: var(--color-bg-deep);
    box-shadow:
        0 6px 20px var(--color-accent-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.turntable__speed-dot--active {
    background: var(--color-accent-primary);
    box-shadow: 0 0 8px var(--color-accent-glow);
}

.turntable__speed-label {
    color: var(--color-text-muted);
}

.turntable--playing .turntable__led {
    background: var(--color-led-active);
    box-shadow:
        0 0 10px var(--color-led-active),
        0 0 20px rgba(217, 119, 6, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Playlist */
.playlist__header {
    border-bottom: 1px solid var(--color-border-medium);
}

.playlist__now-playing {
    color: var(--color-accent-bright);
}

.playlist__item {
    border-color: transparent;
    color: var(--color-text-primary);
}

.playlist__item:hover {
    background: var(--color-bg-overlay);
    border-color: var(--color-border-medium);
}

.playlist__item--active {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent-primary);
}

.playlist__item-num {
    color: var(--color-accent-bright);
}

.playlist__item-desc {
    color: var(--color-text-muted);
}

.playlist__item-duration {
    color: var(--color-text-tertiary);
}

.playlist__progress-bar {
    background: var(--color-border-medium);
}

.playlist__progress-fill {
    background: var(--color-accent-primary);
}

.playlist__time {
    color: var(--color-text-tertiary);
}

/* Services */
.services {
    background-color: var(--color-bg-primary);
}

.services__eyebrow {
    color: var(--color-accent-primary);
}

.service-card {
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-elevated);
    transition: all 0.4s ease;
}

.service-card:hover {
    border-color: var(--color-accent-primary);
    background: var(--color-bg-primary);
    box-shadow: 0 8px 32px var(--color-accent-glow);
}

.service-card::before {
    background: linear-gradient(
        135deg,
        transparent 0%,
        var(--color-accent-glow) 50%,
        transparent 100%
    );
}

.service-card__icon {
    color: var(--color-accent-primary);
}

.service-card__desc {
    color: var(--color-text-secondary);
}

.service-card__list {
    color: var(--color-text-secondary);
}

.service-card__list li {
    border-bottom: 1px solid var(--color-border-subtle);
}

.service-card__list li::before {
    color: var(--color-accent-primary);
}

/* Contact */
.contact {
    background-color: var(--color-bg-elevated);
}

.contact__text {
    color: var(--color-text-secondary);
}

.contact__label {
    color: var(--color-text-secondary);
}

.contact__input {
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
}

.contact__input:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px var(--color-accent-glow);
}

.contact__input::placeholder {
    color: var(--color-text-tertiary);
}

.contact__submit {
    color: var(--color-accent-primary);
    background: transparent;
    border: 1px solid var(--color-accent-primary);
}

.contact__submit:hover {
    background: var(--color-accent-primary);
    color: var(--color-bg-deep);
}

.contact__feedback--success {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.contact__feedback--error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Mobile player */
.mobile-player {
    background: var(--color-bg-deep);
    color: var(--color-text-primary);
}

.mobile-player__vinyl-inner {
    background: var(--color-accent-primary);
}

.mobile-player__status {
    color: var(--color-accent-bright);
}

.mobile-player__btn {
    border: 1px solid var(--color-accent-primary);
    background: transparent;
    color: var(--color-accent-primary);
}

/* Footer */
.footer {
    background-color: var(--color-bg-primary);
    border-top: 1px solid var(--color-border-subtle);
}

.footer__tagline,
.footer__links a,
.footer__legal {
    color: var(--color-text-secondary);
}

.footer__links a:hover {
    color: var(--color-accent-primary);
}

/* Selection */
::selection {
    background-color: var(--color-accent-primary);
    color: var(--color-bg-deep);
}

/* Grain overlay - adapter l'opacité */
.grain-overlay {
    opacity: 0.025; /* Légèrement réduit sur fond sombre */
}

/* ================================================
   TOGGLE DE THÈME (optionnel)
   ================================================ */

/* Bouton de changement de thème (à ajouter dans le HTML si souhaité) */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent-primary);
    border: 2px solid var(--color-accent-bright);
    color: var(--color-bg-deep);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    z-index: 9998;
    box-shadow: 0 4px 16px var(--color-accent-glow);
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 24px var(--color-accent-glow);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Icônes de thème */
.theme-toggle__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Animation de transition de thème */
body.theme-transitioning {
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.theme-transitioning * {
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease !important;
}