/*
 * Direction visuelle 2026 — Graphite Mauve
 * Couche de marque commune aux pages historiques et aux guides.
 */

:root {
  --color-primary: #91819f !important;
  --color-primary-dark: #6f6279 !important;
  --color-primary-light: #b2a4bc !important;
  --color-primary-50: #f5f1f6 !important;
  --color-primary-100: #e7e0e9 !important;
  --color-secondary: #aca0b3 !important;
  --color-secondary-dark: #7b7083 !important;
  --color-secondary-light: #c9c0ce !important;
  --color-accent: #9aa4ad !important;
  --color-accent-dark: #747e87 !important;
  --color-accent-light: #c5cbd0 !important;

  --color-dark-50: #f4f2f5 !important;
  --color-dark-100: #ece9ee !important;
  --color-dark-200: #dcd8df !important;
  --color-dark-300: #c4bfc8 !important;
  --color-dark-400: #99959f !important;
  --color-dark-500: #73717a !important;
  --color-dark-600: #55565e !important;
  --color-dark-700: #3a3b42 !important;
  --color-dark-800: #24252a !important;
  --color-dark-900: #17181c !important;
  --color-dark-950: #0f1013 !important;

  --color-bg: #0f1013 !important;
  --color-bg-alt: #17181c !important;
  --color-bg-card: #23242a !important;
  --color-bg-header: rgba(15, 16, 19, .9) !important;
  --color-bg-footer: #111216 !important;
  --color-text: #ece9ee !important;
  --color-text-muted: #aaa6af !important;
  --color-text-light: #f5f3f6 !important;
  --color-border: #3a3b42 !important;
  --color-border-light: #4a4b53 !important;
  --color-border-dark: #292a30 !important;

  /* Alias employés par les guides historiques. */
  --primary: #9789a7 !important;
  --primary-d: #736581 !important;
  --primary-dark: #736581 !important;
  --secondary: #ad9ab8 !important;
  --accent: #91a0aa !important;
  --accent-primary: #9789a7 !important;
  --accent-secondary: #ad9ab8 !important;
  --primary-glow: #9789a7 !important;
  --secondary-glow: #ad9ab8 !important;
  --accent-glow: #91a0aa !important;
  --bg: #121216 !important;
  --bg2: #1b1c21 !important;
  --bg3: #272830 !important;
  --bg-primary: #0f1013 !important;
  --bg-secondary: #191a1f !important;
  --bg-tertiary: #27282e !important;
  --bg-card: #23242a !important;
  --bg-surface: rgba(255, 255, 255, .025) !important;
  --card-bg: #202126 !important;
  --card-hover: #292a30 !important;
  --text: #f2f1f4 !important;
  --text-primary: #f2f1f4 !important;
  --text-secondary: #c6c2ca !important;
  --text-muted: #9895a0 !important;
  --text-light: #aaa6af !important;
  --muted: #aaa6af !important;
  --sub: #9895a0 !important;
  --border: #3b3d46 !important;
  --border-color: #3b3d46 !important;
  --border-light: rgba(209, 203, 214, .18) !important;

  --gradient-primary: linear-gradient(135deg, #9d8dab 0%, #73677d 100%) !important;
  --gradient-accent: linear-gradient(135deg, #aeb5bc 0%, #8f809e 100%) !important;
  --gradient-dark: linear-gradient(145deg, #191a1f 0%, #0f1013 100%) !important;
  --gradient-card: linear-gradient(145deg, rgba(39, 40, 47, .98) 0%, rgba(28, 29, 34, .98) 100%) !important;
  --gradient-hero: linear-gradient(135deg, #34303a 0%, #51485a 52%, #75667e 100%) !important;
  --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
  --shadow-glow: 0 18px 55px rgba(126, 111, 139, .18) !important;
}

[data-theme="light"] {
  --color-primary: #796b84 !important;
  --color-primary-dark: #5d5266 !important;
  --color-primary-light: #97899f !important;
  --color-secondary: #8f8496 !important;
  --color-accent: #77848e !important;
  --color-bg: #f4f2f5 !important;
  --color-bg-alt: #eae7ec !important;
  --color-bg-card: #fbfafc !important;
  --color-bg-header: rgba(248, 246, 249, .92) !important;
  --color-bg-footer: #1a191d !important;
  --color-text: #3f3b43 !important;
  --color-text-muted: #6d6872 !important;
  --color-text-light: #242228 !important;
  --color-border: #d8d3da !important;
  --color-border-light: #e7e3e9 !important;
  --color-border-dark: #c8c2cb !important;

  --primary: #796b84 !important;
  --primary-d: #5d5266 !important;
  --primary-dark: #5d5266 !important;
  --secondary: #8f8496 !important;
  --accent: #77848e !important;
  --accent-primary: #796b84 !important;
  --accent-secondary: #8f8496 !important;
  --primary-glow: #796b84 !important;
  --secondary-glow: #8f8496 !important;
  --accent-glow: #77848e !important;
  --bg: #f4f2f5 !important;
  --bg2: #fbfafc !important;
  --bg3: #eae7ec !important;
  --bg-primary: #f4f2f5 !important;
  --bg-secondary: #eae7ec !important;
  --bg-tertiary: #ded9e1 !important;
  --bg-card: #fbfafc !important;
  --bg-surface: rgba(65, 58, 70, .03) !important;
  --card-bg: #fbfafc !important;
  --card-hover: #f0edf2 !important;
  --text: #312e35 !important;
  --text-primary: #242228 !important;
  --text-secondary: #55505a !important;
  --text-muted: #77717c !important;
  --text-light: #4f4a54 !important;
  --muted: #6d6872 !important;
  --sub: #77717c !important;
  --border: #d8d3da !important;
  --border-color: #d8d3da !important;
  --border-light: rgba(64, 58, 69, .14) !important;

  --gradient-primary: linear-gradient(135deg, #85768f 0%, #655a6d 100%) !important;
  --gradient-accent: linear-gradient(135deg, #929da5 0%, #776a82 100%) !important;
  --gradient-dark: linear-gradient(145deg, #f7f5f8 0%, #ece9ee 100%) !important;
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #f4f1f5 100%) !important;
  --gradient-hero: linear-gradient(135deg, #e6e0e8 0%, #cbc0cf 55%, #aa99b0 100%) !important;
  --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(244, 241, 245, .82)) !important;
  --shadow-glow: 0 18px 50px rgba(105, 91, 115, .12) !important;
}

html {
  background: var(--color-bg);
  scrollbar-color: #75687f #17181c;
}

body {
  background-color: var(--color-bg) !important;
  background-image:
    radial-gradient(circle at 12% -8%, rgba(151, 137, 167, .13), transparent 32rem),
    radial-gradient(circle at 92% 18%, rgba(145, 160, 170, .075), transparent 28rem) !important;
  background-attachment: fixed !important;
}

[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 12% -8%, rgba(121, 107, 132, .1), transparent 34rem),
    radial-gradient(circle at 92% 18%, rgba(119, 132, 142, .07), transparent 30rem) !important;
}

::selection { color: #fff; background: #75687f; }

.announcement-bar {
  background: linear-gradient(110deg, #4f4857 0%, #74687d 52%, #555d65 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-header {
  background: rgba(15, 16, 19, .86) !important;
  border-bottom: 1px solid rgba(202, 195, 207, .13) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

[data-theme="light"] .site-header {
  background: rgba(248, 246, 249, .88) !important;
  border-bottom-color: rgba(74, 67, 78, .12) !important;
  box-shadow: 0 12px 36px rgba(49, 43, 53, .08) !important;
}

.nav-link.active,
.nav-link:hover,
.action-btn:hover,
.theme-toggle:hover {
  border-color: rgba(178, 164, 188, .52) !important;
  background: rgba(151, 137, 167, .1) !important;
}

.guide-card,
.feature-card,
.app-card,
.video-card,
.step-card,
.issue-card,
.comparison-card,
.toc,
.cta-block {
  border-color: rgba(190, 183, 196, .16) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .16) !important;
}

[data-theme="light"] .guide-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .app-card,
[data-theme="light"] .video-card,
[data-theme="light"] .step-card,
[data-theme="light"] .issue-card,
[data-theme="light"] .comparison-card,
[data-theme="light"] .toc,
[data-theme="light"] .cta-block {
  border-color: rgba(89, 79, 95, .13) !important;
  box-shadow: 0 20px 50px rgba(57, 50, 61, .08) !important;
}

.btn,
.nav-pill,
.filter-btn,
.action-btn {
  border-radius: 12px;
}

.btn-primary,
.cta-button.primary,
.search-submit {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(115, 101, 129, .24) !important;
}

.btn-primary:hover,
.cta-button.primary:hover,
.search-submit:hover {
  box-shadow: 0 16px 36px rgba(115, 101, 129, .34) !important;
}

.page.guide-page,
.guide-auto {
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    radial-gradient(circle at 82% 3%, rgba(151, 137, 167, .11), transparent 30rem) !important;
  background-size: 36px 36px, 36px 36px, auto !important;
}

[data-theme="light"] .page.guide-page,
[data-theme="light"] .guide-auto {
  background-image:
    linear-gradient(rgba(68, 61, 73, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 61, 73, .028) 1px, transparent 1px),
    radial-gradient(circle at 82% 3%, rgba(121, 107, 132, .1), transparent 30rem) !important;
}

.page.guide-page .hero-badge,
.guide-auto .toc a {
  border-color: rgba(178, 164, 188, .34) !important;
  color: #c9bdcf !important;
  background: rgba(151, 137, 167, .09) !important;
}

[data-theme="light"] .page.guide-page .hero-badge,
[data-theme="light"] .guide-auto .toc a {
  color: #685b71 !important;
  background: rgba(121, 107, 132, .08) !important;
}

.site-footer {
  background:
    radial-gradient(circle at 15% 0%, rgba(151, 137, 167, .12), transparent 26rem),
    #111216 !important;
  border-top: 1px solid rgba(202, 195, 207, .12) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: #111216 !important; }
  [data-theme="light"] .site-header { background: #f8f6f9 !important; }
}

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll !important; }
}