/* ═══════════════════════════════════════════════════════════════
   NEXT OS SIGNATURE THEME — EX@COM DIGITAL v3.0
   Étalonnage cinématique complet : vidéo + textes + contenus
   Palette adaptive via CSS custom properties — 6 looks cinéma
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* ─── 1. TOKENS — Defaults Naturel (EX@COM Rouge) ─── */
:root {
    /* Primaire */
    --c-primary:         #FF0000;
    --c-primary-rgb:     255, 0, 0;
    /* Secondaire */
    --c-secondary:       #00FFFF;
    --c-secondary-rgb:   0, 255, 255;
    /* Backgrounds */
    --c-bg-base:         #000008;
    --c-bg-rgb:          0, 0, 8;
    --c-bg-glass:        rgba(0, 4, 20, 0.65);
    /* Textes */
    --c-title:           #FFF5F5;
    --c-text:            #888888;
    --c-text-mid:        #BBBBBB;
    /* Shadows & glows (computed depuis les RGB vars) */
    --glow-r:            0 0 18px rgba(var(--c-primary-rgb), 0.65), 0 0 45px rgba(var(--c-primary-rgb), 0.25);
    --glow-c:            0 0 16px rgba(var(--c-secondary-rgb), 0.55), 0 0 40px rgba(var(--c-secondary-rgb), 0.2);
    --glow-cs:           0 0 8px rgba(var(--c-secondary-rgb), 0.35);
    --shadow-title:      0 0 12px rgba(255,80,40,0.55), 0 0 35px rgba(255,0,0,0.22), 0 0 75px rgba(255,60,0,0.1);
    --shadow-accent:     0 0 10px rgba(255,0,0,0.8), 0 0 30px rgba(255,0,0,0.4), 0 0 60px rgba(255,0,0,0.15);
    --gradient-line:     linear-gradient(90deg, transparent, #FF0000 20%, #FF0000 50%, #00FFFF 80%, transparent);
    --video-filter:      sepia(0.3) hue-rotate(310deg) saturate(2.0) brightness(0.80) contrast(1.05);
    /* Polices */
    --font-display:      'Orbitron', 'Quantico', 'Segoe UI', sans-serif;
    --font-mono:         'Share Tech Mono', 'DM Mono', monospace;
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 4px;
}

/* ─── 2. BODY — Background adaptatif ─── */
body {
    background: var(--c-bg-base) !important;
}

/* ─── 3. VIDEO FOND — Étalonnage cinéma (override studio-master) ─── */
#bg-video {
    filter: var(--video-filter) !important;
    transition: filter 0.9s ease !important;
}

/* ─── 4. SCANLINES CRT ─── */
body::after {
    content: '';
    position: fixed; inset: 0;
    z-index: 9990; pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(0, 0, 0, 0.055) 2px, rgba(0, 0, 0, 0.055) 4px
    );
}

/* ─── 5. GRILLE PERSPECTIVE ─── */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--c-secondary-rgb), 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--c-secondary-rgb), 0.022) 1px, transparent 1px);
    background-size: 46px 46px;
}

/* ─── 6. TYPOGRAPHIE DISPLAY — Orbitron ─── */
h1, h2, h3,
.hero-title, .manifesto-rule,
.t-h1, .t-h2, .t-h3,
.title-xl, .title-lg, .title-3d-depth,
.hero-title-highlight,
.portfolio-client, .service-title, .number-val {
    font-family: var(--font-display) !important;
    letter-spacing: 0.04em;
}

/* ─── 7a. H1 pages intérieures — titre adaptatif + halo ─── */
h1,
.t-h1,
.title-xl,
.page-main h1,
.expertise-intro h1 {
    color: var(--c-title) !important;
    font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
    line-height: 1.1 !important;
    text-shadow: var(--shadow-title) !important;
    letter-spacing: 0.06em;
    animation: nos-glitch 10s infinite;
}

/* ─── 7b. HERO TITLE — homepage uniquement ─── */
.hero-title {
    color: var(--c-title) !important;
    font-size: clamp(3.5rem, 8.5vw, 8rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0.05em !important;
    text-shadow: var(--shadow-title) !important;
    animation: nos-glitch 10s infinite;
}

/* ─── 8. H2 / H3 — couleur titre + glow secondaire ─── */
h2, h3,
.t-h2, .t-h3,
.title-lg,
.manifesto-rule,
.service-title,
.portfolio-client {
    color: var(--c-title) !important;
    text-shadow:
        0 0 12px rgba(var(--c-secondary-rgb), 0.18),
        0 0 30px rgba(var(--c-secondary-rgb), 0.06) !important;
}

/* ─── 9. ACCENT SPANS — Primaire néon ─── */
.accent, .t-accent, em {
    color: var(--c-primary) !important;
    text-shadow: var(--shadow-accent) !important;
    font-style: normal;
}

/* ─── 10. SECTION LABELS — secondaire ─── */
.section-label {
    color: var(--c-secondary) !important;
    text-shadow: var(--glow-cs);
    letter-spacing: 0.3em;
}
.section-label::before {
    background: var(--c-secondary) !important;
    box-shadow: var(--glow-cs);
}

/* ─── 11. BADGE ─── */
.badge-ai {
    color: var(--c-primary) !important;
    border-color: rgba(var(--c-primary-rgb), 0.35) !important;
    background: rgba(var(--c-primary-rgb), 0.06) !important;
    font-family: var(--font-display) !important;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
}

/* ─── 12. BOUTONS PRIMAIRES ─── */
.btn.btn-primary,
.btn-primary,
.cta-magnetic,
.nav-cta {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    box-shadow:
        0 0 20px rgba(var(--c-primary-rgb), 0.5),
        0 0 45px rgba(var(--c-primary-rgb), 0.2) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.15em !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.btn.btn-primary:hover,
.btn-primary:hover,
.cta-magnetic:hover,
.nav-cta:hover {
    background: var(--c-primary) !important;
    filter: brightness(0.82) !important;
    box-shadow:
        0 0 32px rgba(var(--c-primary-rgb), 0.75),
        0 0 70px rgba(var(--c-primary-rgb), 0.3) !important;
    transform: translateY(-1px);
}

/* ─── 13. BOUTONS OUTLINE — secondaire ─── */
.btn.btn-outline,
.btn-outline {
    border-color: var(--c-secondary) !important;
    color: var(--c-secondary) !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.15em !important;
    box-shadow: 0 0 10px rgba(var(--c-secondary-rgb), 0.1) !important;
}
.btn.btn-outline:hover,
.btn-outline:hover {
    background: rgba(var(--c-secondary-rgb), 0.07) !important;
    box-shadow: 0 0 24px rgba(var(--c-secondary-rgb), 0.35) !important;
    transform: translateY(-1px);
}

/* ─── 14. NAVIGATION ─── */
.nav-link:hover {
    color: var(--c-secondary) !important;
    text-shadow: var(--glow-cs);
}
.nav-link::after {
    background: var(--gradient-line) !important;
}
.main-nav a[aria-current="page"],
.nav-link[aria-current="page"] {
    color: var(--c-secondary) !important;
    border-color: var(--c-secondary) !important;
}

/* CTA nav */
.cta {
    border-radius: 0 !important;
    background: rgba(var(--c-primary-rgb), 0.9) !important;
    box-shadow: 0 0 14px rgba(var(--c-primary-rgb), 0.35) !important;
}

/* ─── 15. HEADER ─── */
.site-header, .topbar {
    border-bottom: 1px solid rgba(var(--c-secondary-rgb), 0.18) !important;
    background: rgba(var(--c-bg-rgb), 0.92) !important;
    backdrop-filter: blur(20px) !important;
}
.site-header::after {
    content: '';
    position: absolute; bottom: -2px; left: 0; right: 0; height: 1px;
    background: var(--gradient-line);
    opacity: 0.45;
}

/* Logo */
.header-logo, .topbar-emblem, .header-brand-logo {
    filter: drop-shadow(0 0 5px rgba(var(--c-primary-rgb), 0.15)) !important;
}
.header-logo:hover, .topbar-emblem:hover {
    filter:
        drop-shadow(0 0 12px rgba(var(--c-primary-rgb), 0.4))
        drop-shadow(0 0 22px rgba(var(--c-primary-rgb), 0.2)) !important;
}

/* ─── 16. ORBES ATMOSPHÉRIQUES ─── */
.atmo-orb--1 {
    background: radial-gradient(circle, rgba(var(--c-primary-rgb), 0.15) 0%, transparent 70%) !important;
    filter: blur(90px) !important;
}
.atmo-orb--2 {
    background: radial-gradient(circle, rgba(var(--c-primary-rgb), 0.14) 0%, transparent 70%) !important;
    filter: blur(110px) !important;
}
.atmo-orb--3 {
    background: radial-gradient(circle, rgba(var(--c-secondary-rgb), 0.08) 0%, transparent 70%) !important;
    filter: blur(80px) !important;
}

/* ─── 17. HERO COORDS & MONO ─── */
.hero-coords span,
.t-mono,
.footer-readout,
.section-num {
    color: rgba(var(--c-secondary-rgb), 0.6) !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.08em;
}

/* ─── 18. PROJETS — work list ─── */
.work-item {
    border-color: rgba(var(--c-secondary-rgb), 0.1) !important;
    border-radius: 0 !important;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.work-item:hover {
    border-color: rgba(var(--c-primary-rgb), 0.4) !important;
    box-shadow: 0 0 28px rgba(var(--c-primary-rgb), 0.07) !important;
}
.work-num {
    color: var(--c-primary) !important;
    font-family: var(--font-display) !important;
    text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5);
    font-size: 0.75rem !important;
}
.work-title {
    font-family: var(--font-display) !important;
    letter-spacing: 0.05em;
    color: var(--c-title) !important;
}
.work-arrow {
    color: var(--c-primary) !important;
    text-shadow: var(--glow-r);
}
.work-tag {
    color: rgba(var(--c-secondary-rgb), 0.55) !important;
}

/* ─── 19. SERVICES BENTO ─── */
.service-card {
    border-radius: 0 !important;
    border-color: rgba(var(--c-secondary-rgb), 0.12) !important;
    background: var(--c-bg-glass) !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.service-card:hover {
    border-color: rgba(var(--c-primary-rgb), 0.3) !important;
    box-shadow: 0 0 28px rgba(var(--c-primary-rgb), 0.06) !important;
}
.service-card--accent {
    border-color: rgba(var(--c-primary-rgb), 0.35) !important;
    box-shadow: 0 0 28px rgba(var(--c-primary-rgb), 0.07) !important;
}
.service-card--accent:hover {
    border-color: rgba(var(--c-primary-rgb), 0.6) !important;
    box-shadow: 0 0 40px rgba(var(--c-primary-rgb), 0.14) !important;
}
.service-num {
    color: var(--c-primary) !important;
    font-family: var(--font-display) !important;
    font-size: 0.7rem !important;
    text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5);
}
.service-tag {
    border-color: rgba(var(--c-secondary-rgb), 0.16) !important;
    color: rgba(var(--c-secondary-rgb), 0.7) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em;
}

/* ─── 20. SECTION AGENTS / STUDIO ─── */
.ai-agent-dot {
    background: var(--c-primary) !important;
    box-shadow:
        0 0 8px var(--c-primary),
        0 0 18px rgba(var(--c-primary-rgb), 0.45) !important;
}
.ai-agent-name {
    font-family: var(--font-display) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.06em;
    color: var(--c-title) !important;
}
.ai-agent-role {
    color: rgba(var(--c-secondary-rgb), 0.5) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
}
.ai-agent-item {
    border-color: rgba(var(--c-primary-rgb), 0.1) !important;
}
.ai-agent-item:hover {
    border-color: rgba(var(--c-primary-rgb), 0.3) !important;
    background: rgba(var(--c-primary-rgb), 0.03) !important;
}

/* ─── 21. CHIFFRES CLÉS ─── */
.number-val {
    color: var(--c-primary) !important;
    text-shadow: var(--glow-r) !important;
    font-family: var(--font-display) !important;
}
.number-val span { color: var(--c-primary) !important; text-shadow: var(--glow-r); }
.number-label {
    color: rgba(var(--c-secondary-rgb), 0.5) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.number-item {
    border-color: rgba(var(--c-primary-rgb), 0.12) !important;
    border-radius: 0 !important;
}

/* ─── 22. MANIFESTO ─── */
.manifesto-rule {
    text-shadow:
        0 0 20px rgba(var(--c-title), 0.12),
        0 0 50px rgba(var(--c-secondary-rgb), 0.06) !important;
}
.manifesto-text {
    color: var(--c-text-mid) !important;
}

/* ─── 23. HERO SCROLL ─── */
.hero-scroll-line {
    background: linear-gradient(180deg, var(--c-primary), transparent) !important;
    box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5) !important;
}
.hero-scroll {
    color: rgba(var(--c-primary-rgb), 0.55) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em;
}

/* ─── 24. PORTFOLIO ─── */
.portfolio-item,
.portfolio-item--wide,
.portfolio-item--tall {
    border-radius: 0 !important;
    border-color: rgba(var(--c-secondary-rgb), 0.12) !important;
}
.portfolio-item:hover {
    border-color: rgba(var(--c-primary-rgb), 0.3) !important;
    box-shadow: 0 0 28px rgba(var(--c-primary-rgb), 0.07) !important;
}
.portfolio-locked-wrap { border-radius: 0 !important; }
.portfolio-lock-gate {
    background: rgba(var(--c-bg-rgb), 0.95) !important;
    border-color: rgba(var(--c-primary-rgb), 0.25) !important;
    border-radius: 0 !important;
}
.portfolio-lock-gate__label {
    color: var(--c-primary) !important;
    font-family: var(--font-display) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.5);
}

/* ─── 25. FORMULAIRES ─── */
input, textarea, select {
    border-color: rgba(var(--c-secondary-rgb), 0.18) !important;
    background: rgba(var(--c-bg-rgb), 0.6) !important;
    color: var(--c-text-mid) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
}
input::placeholder, textarea::placeholder {
    color: rgba(var(--c-secondary-rgb), 0.28) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 14px rgba(var(--c-primary-rgb), 0.25) !important;
    outline: none !important;
    background: var(--c-bg-glass) !important;
}
label {
    color: rgba(var(--c-primary-rgb), 0.75) !important;
    font-family: var(--font-display) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.18em;
}

/* ─── 26. SOUND MODAL ─── */
.sound-modal-card {
    background: rgba(var(--c-bg-rgb), 0.97) !important;
    border-color: rgba(var(--c-primary-rgb), 0.25) !important;
    border-radius: 0 !important;
}
.sound-modal-title {
    font-family: var(--font-display) !important;
    color: var(--c-primary) !important;
    text-shadow: var(--glow-r);
    letter-spacing: 0.08em;
}
.sound-modal-eyebrow {
    color: var(--c-primary) !important;
    font-family: var(--font-display) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.25em;
    text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5);
}
.sound-modal-icon {
    color: var(--c-primary) !important;
    text-shadow: var(--glow-r);
}

/* ─── 27. FOOTER ─── */
.site-footer {
    border-top: 1px solid rgba(var(--c-primary-rgb), 0.2) !important;
    background: rgba(var(--c-bg-rgb), 0.97) !important;
}
.site-footer::before {
    content: '';
    display: block; height: 1px;
    background: var(--gradient-line);
    opacity: 0.35; margin-bottom: 0;
}
.footer-logo-img {
    filter: drop-shadow(0 0 5px rgba(var(--c-primary-rgb), 0.12)) !important;
    opacity: 0.9;
}
.footer-tagline {
    color: rgba(var(--c-primary-rgb), 0.45) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em;
}
.footer-readout {
    color: rgba(var(--c-secondary-rgb), 0.45) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em;
    line-height: 2;
    text-shadow: 0 0 6px rgba(var(--c-secondary-rgb), 0.18);
}
.footer-nav a, .footer-legal a {
    color: rgba(var(--c-secondary-rgb), 0.4) !important;
    transition: color 0.2s, text-shadow 0.2s;
}
.footer-nav a:hover, .footer-legal a:hover {
    color: var(--c-secondary) !important;
    text-shadow: var(--glow-cs);
}
.footer-copy {
    color: rgba(var(--c-primary-rgb), 0.25) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em;
}

/* ─── 28. CARDS GÉNÉRIQUES ─── */
.card, .glass-card, .bento-item {
    border-radius: 0 !important;
    border-color: rgba(var(--c-primary-rgb), 0.12) !important;
    background: var(--c-bg-glass) !important;
}
.card:hover, .glass-card:hover {
    border-color: rgba(var(--c-primary-rgb), 0.28) !important;
}

/* ─── 29. LOADER ─── */
#loader { background: var(--c-bg-base) !important; }
.loader-logo {
    font-family: var(--font-display) !important;
    color: var(--c-title) !important;
    letter-spacing: 0.25em;
}
.loader-logo span {
    color: var(--c-primary) !important;
    text-shadow: var(--glow-r);
}
.loader-bar {
    background: var(--gradient-line) !important;
    box-shadow: 0 0 12px rgba(var(--c-primary-rgb), 0.5) !important;
}
.loader-bar-track { background: rgba(var(--c-primary-rgb), 0.1) !important; }

/* ─── 30. WELCOME SCREEN ─── */
#welcome-screen { background: var(--c-bg-base) !important; }
.welcome-text {
    font-family: var(--font-display) !important;
    color: var(--c-title) !important;
    text-shadow:
        0 0 28px rgba(var(--c-primary-rgb), 0.6),
        0 0 70px rgba(var(--c-primary-rgb), 0.25) !important;
    letter-spacing: 0.08em;
}

/* ─── 31. MOBILE NAV ─── */
.mobile-nav {
    background: rgba(var(--c-bg-rgb), 0.97) !important;
    border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.2) !important;
}
.mobile-nav .nav-link { border-bottom-color: rgba(var(--c-primary-rgb), 0.1) !important; }
.mobile-nav .nav-link:hover,
.mobile-nav .t-accent { color: var(--c-primary) !important; }

/* ─── 32. THEME & AUDIO BUTTONS ─── */
.theme-btn, .audio-btn {
    border-color: rgba(var(--c-primary-rgb), 0.25) !important;
    color: rgba(var(--c-primary-rgb), 0.6) !important;
}
.theme-btn:hover, .audio-btn:hover {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
    box-shadow: var(--glow-r) !important;
}
.audio-btn.is-on {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
    box-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.35) !important;
}

/* ─── 33. WORK PREVIEW ─── */
#work-preview {
    border-radius: 0 !important;
    border: 1px solid rgba(var(--c-primary-rgb), 0.2) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.85) !important;
}

/* ─── 34. CURSOR ─── */
.cursor-dot {
    background: var(--c-primary) !important;
    box-shadow:
        0 0 8px var(--c-primary),
        0 0 16px rgba(var(--c-primary-rgb), 0.4) !important;
}
.cursor-ring {
    border-color: rgba(var(--c-primary-rgb), 0.6) !important;
    box-shadow: 0 0 6px rgba(var(--c-primary-rgb), 0.3) !important;
}

/* ─── 35. CONTACT ─── */
.contact-label,
.form-section-title {
    font-family: var(--font-display) !important;
    color: var(--c-primary) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.2em;
}
.contact-value a, .contact-email {
    color: var(--c-primary) !important;
    text-decoration: none;
}
.contact-value a:hover, .contact-email:hover {
    text-shadow: var(--glow-r);
}

/* ─── 36. LANCER UN PROJET ─── */
.project-step-num {
    color: var(--c-primary) !important;
    font-family: var(--font-display) !important;
    text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5) !important;
}
.project-step-title { font-family: var(--font-display) !important; }

[data-page="projet"] .form-section-title {
    color: var(--c-title) !important;
    text-shadow: none !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.22em;
    opacity: 0.9;
}
[data-page="projet"] .check-item {
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Rajdhani', 'DM Sans', sans-serif !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em;
    cursor: pointer;
}
[data-page="projet"] .check-item:hover {
    color: var(--c-title) !important;
}

/* ─── 37. NEON PULSE ─── */
@keyframes neon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.theme-dot-live {
    background: var(--c-primary) !important;
    box-shadow:
        0 0 6px var(--c-primary),
        0 0 14px rgba(var(--c-primary-rgb), 0.4) !important;
    animation: neon-pulse 2s ease-in-out infinite !important;
}

/* ─── 38. GLITCH — H1 uniquement ─── */
@keyframes nos-glitch {
    0%, 88%, 100% { transform: translate(0); clip-path: none; }
    90% { transform: translate(-2px, 1px); clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%); }
    92% { transform: translate(2px, -1px); clip-path: polygon(0 65%, 100% 65%, 100% 82%, 0 82%); }
    94% { transform: translate(0); clip-path: none; }
}

/* ─── 39. THEME PANEL — Override studio-master ─── */
#themePanel.theme-panel {
    background: rgba(var(--c-bg-rgb), 0.96) !important;
    border: 1px solid rgba(var(--c-primary-rgb), 0.3) !important;
    border-radius: 4px !important;
    box-shadow:
        0 0 40px rgba(var(--c-primary-rgb), 0.08),
        0 20px 60px rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(24px) !important;
}
.theme-panel-label {
    color: var(--c-secondary) !important;
    font-family: var(--font-display) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.28em;
    text-shadow: var(--glow-cs);
}
.theme-option {
    border-radius: 0 !important;
}
.theme-option:hover {
    background: rgba(var(--c-primary-rgb), 0.07) !important;
}
.theme-option.active {
    background: rgba(var(--c-primary-rgb), 0.12) !important;
    border-left: 2px solid var(--c-primary) !important;
}
.theme-name {
    color: var(--c-title) !important;
    font-family: var(--font-display) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
}
.theme-desc {
    color: rgba(var(--c-secondary-rgb), 0.55) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.theme-check {
    color: var(--c-primary) !important;
    text-shadow: 0 0 6px rgba(var(--c-primary-rgb), 0.6);
    font-size: 0.8rem;
}
.theme-swatch {
    border-radius: 0 !important;
    width: 8px;
    height: 8px;
}

/* ─── 40. RESPONSIVE ─── */
@media (max-width: 768px) {
    h1 {
        letter-spacing: 0.02em;
        font-size: clamp(1.5rem, 7vw, 2.4rem) !important;
        line-height: 1.15 !important;
    }
    .hero-title {
        letter-spacing: 0.03em;
        font-size: clamp(2.2rem, 11vw, 3.8rem) !important;
        line-height: 1.08 !important;
    }
    h2 { letter-spacing: 0.02em; }
    #themePanel.theme-panel { right: 1rem !important; width: 185px !important; }
}

/* ─── 41. REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    h1, .hero-title { animation: none !important; }
    #bg-video { transition: none !important; }
}

/* ─── 42. FOOTER SOCIAL ─── */
.footer-social {
    margin-top: 1rem;
}
.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.footer-social-link:hover {
    opacity: 1;
    color: var(--c-primary);
}

/* ─── 43. MOBILE TOUCH TARGETS (INP / accessibilité — conformité Google 44px) ─── */
@media (max-width: 768px) {
    .nav-link,
    .mobile-nav .nav-link,
    .nav-cta,
    .footer-nav a,
    .footer-legal a,
    .footer-social a,
    footer a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }
    .btn, .btn-primary, .btn-outline, .btn-arrow,
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;
    }
    .theme-btn, .audio-btn, .menu-toggle,
    .ui-interactive {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}