/* ═══════════════════════════════════════════════════════════
   KORA Design System — OVERTIPS v2.1 — 2026-07-14
   Applies to all production pages via injected <link> tag.
   [V2.0] Charte bronze/ivoire/ébène remplacée par les couleurs réelles
   du logo (bleu marine → vert), extraites par échantillonnage pixel
   (Logo_moderne_OVERTIPS_en_bleu_et_vert.png). Couleurs sémantiques
   (--kora-forest/--kora-red/--kora-amber/--kora-blue, grades A-D,
   sévérité d'alertes) volontairement inchangées — fonctionnelles,
   pas identité de marque.
   [V2.1] Direction premium/institutionnel + dynamique, validée par Cédric
   sur le prototype Claude Design "OVERTIPS KORA — Aurore Africaine" v2 :
   dégradé du logo comme élément récurrent (boutons, bandeaux, pas juste le
   wordmark), ombres double-couche avec profondeur + lift au survol,
   hiérarchie typographique plus contrastée sur les héros.
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --kora-bg:           #FAFBFB;
  --kora-bg-subtle:    #EEF2F1;
  --kora-surface:      #FFFFFF;
  --kora-bronze:       linear-gradient(135deg, #0D3856, #4B7A34);
  --kora-bronze-deep:  linear-gradient(135deg, #082638, #3A5F28);
  --kora-bronze-solid: #4B7A34;
  --kora-bronze-light: #D4E4C8;
  --kora-bronze-hover: linear-gradient(135deg, #164569, #5C9142, #164569);
  --kora-ebony:        #0D3856;
  --kora-ebony-soft:   #1E4A6B;
  --kora-text:         #0D3856;
  --kora-text-secondary: #3D5A6C;
  --kora-text-muted:   #8A9AA3;
  --kora-forest:       #1B4332;
  --kora-forest-light: #2D6A4F;
  --kora-red:          #9B2C2C;
  --kora-red-light:    #C45B4A;
  --kora-amber:        #92400E;
  --kora-blue:         #1E3A5F;
  --kora-radius-sm:    6px;
  --kora-radius-md:    10px;
  --kora-radius-lg:    16px;
  --kora-radius-badge: 8px 12px 12px 8px;
  --kora-shadow-sm:    0 2px 8px rgba(13,56,86,.08), 0 1px 3px rgba(13,56,86,.05);
  --kora-shadow-md:    0 8px 24px rgba(13,56,86,.10), 0 2px 8px rgba(13,56,86,.06);
  --kora-shadow-lg:    0 20px 48px rgba(13,56,86,.18), 0 6px 16px rgba(13,56,86,.10);
  --kora-transition:   all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Remap existing Aurore Africaine vars to KORA ─────── */
  --ivory:        #FAFBFB;
  --ivory-2:      #EEF2F1;
  --gold:         #4B7A34;
  --gold-light:   #D4E4C8;
  --text:         #0D3856;
  --text-muted:   #8A9AA3;
  --border:       #D6E0E5;
  --border-2:     rgba(75,122,52,.15);
  --card-bg:      #FFFFFF;
  --white:        #FAFBFB;
  --mono:         'JetBrains Mono', monospace;
  --heading-font: 'Playfair Display', serif;
}

/* ── VARIANTE "KORA Lecture" — vidéos Academy uniquement ───
   Jamais utilisée sur le site ni les documents. Ebène désaturé/éclairci
   (bleu-gris au lieu de noir dur), bronze -15% de saturation, ivoire
   légèrement réchauffé (teinte cassée) — réduit la fatigue oculaire en
   lecture vidéo continue. Consommée directement par
   tools/video-pipeline/animated/slide-html.js (constante K), pas par le
   site — bloc présent ici comme source de vérité documentée. */
:root[data-theme="video-lecture"] {
  --kora-ebony:        #1A1D24;
  --kora-ebony-deep:   #111318;
  --kora-bronze-solid: #BA9345;
  --kora-bronze-dim:   #927538;
  --ivory:             #F7EFE2;
  --ivory-dim:         #C9BEAE;
  --ivory-muted:       #968875;
  --kora-border:       #343A48;
  --kora-data-box:     #0D0F12;
}

/* ── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes growWidth {
  from { width: 0 !important; }
  to   { width: var(--bar-w, 100%); }
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar            { width: 8px; height: 8px; }
::-webkit-scrollbar-track      { background: var(--kora-bg-subtle); }
::-webkit-scrollbar-thumb      { background: var(--kora-bronze-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--kora-bronze-solid); }

/* ── 1. BODY ─────────────────────────────────────────────── */
html, body {
  background: var(--kora-bg) !important;
  color: var(--kora-text) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px;
  line-height: 1.6;
}

/* ── 2. HEADINGS ─────────────────────────────────────────── */
h1, h2, h3, h4,
.section-title, .card-title, .modal-title, .page-title,
.kpi-label, .f-col-title, .ft-t, .ft-h, .col-title,
.plan-name, .score-label, .room-title,
[class$="-title"], [class$="-heading"], [class$="-header"] {
  font-family: 'Playfair Display', serif !important;
  color: var(--kora-ebony);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h1 { font-size: 40px !important; font-weight: 700 !important; }
h2 { font-size: 28px !important; font-weight: 700 !important; }
h3 { font-size: 20px !important; font-weight: 600 !important; }
h4 { font-size: 16px !important; font-weight: 600 !important; }

/* ── 12. LINKS ───────────────────────────────────────────── */
a:not([class*="btn"]):not([class*="nav-"]):not([class*="sidebar"]):not([class*="-lk"]):not(.fl):not(.fs) {
  color: var(--kora-bronze-solid);
  text-decoration: none;
  transition: var(--kora-transition);
}
a:not([class*="btn"]):not([class*="nav-"]):not([class*="sidebar"]):not([class*="-lk"]):not(.fl):not(.fs):hover {
  color: var(--kora-ebony);
  text-decoration: underline;
}

/* ── 3. CARDS ────────────────────────────────────────────── */
.card,
.kpi-card, .kpi-box,
.plan-card, .plan-box,
.score-card, .feature-card,
.metric-card, .stat-card, .info-card,
.str-card, .room-card, .media-card,
.kanban-card,
.ai-tool-card,
.cc-section,
[class$="-card"]:not(.kanban-col):not(.grade-a):not(.grade-b):not(.grade-c):not(.grade-d):not(.fl):not(.fs) {
  background: var(--kora-surface) !important;
  border-radius: var(--kora-radius-lg) !important;
  box-shadow: var(--kora-shadow-md) !important;
  border: 1px solid rgba(75,122,52,.1) !important;
  transition: var(--kora-transition) !important;
}
.card:hover,
.kpi-card:hover, .plan-card:hover, .score-card:hover,
.feature-card:hover, .metric-card:hover, .str-card:hover,
.room-card:hover, .media-card:hover, .ai-tool-card:hover,
[class$="-card"]:not(.kanban-col):not(.grade-a):not(.grade-b):not(.grade-c):not(.grade-d):not(.fl):not(.fs):hover {
  box-shadow: var(--kora-shadow-lg) !important;
  border-color: rgba(75,122,52,.3) !important;
  transform: translateY(-4px) !important;
}

/* ── 4. PRIMARY BUTTONS ──────────────────────────────────── */
.btn-primary, .btn-cta, .btn-gold, .btn-hg, .btn-wh, .btn-solid,
.submit-btn, .nav-cta, .cta-btn, .str-run-btn,
[class*="btn-primary"], [class*="btn-submit"],
button[type="submit"]:not([class*="secondary"]):not([class*="outline"]):not([class*="ghost"]) {
  background: var(--kora-bronze) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--kora-radius-md) !important;
  padding: 10px 24px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 18px rgba(75,122,52,.28) !important;
  transition: var(--kora-transition) !important;
}
.btn-primary::after, .btn-cta::after, .btn-hg::after, .btn-wh::after,
.btn-solid::after, .str-run-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--kora-bronze-hover);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover::after, .btn-cta:hover::after, .btn-hg:hover::after,
.btn-wh:hover::after, .btn-solid:hover::after, .str-run-btn:hover::after {
  opacity: 1;
}
.btn-primary:hover, .btn-cta:hover, .btn-gold:hover, .btn-hg:hover, .btn-wh:hover, .btn-solid:hover,
.submit-btn:hover, .nav-cta:hover, .cta-btn:hover, .str-run-btn:hover,
[class*="btn-primary"]:hover, [class*="btn-submit"]:hover,
button[type="submit"]:not([class*="secondary"]):not([class*="outline"]):not([class*="ghost"]):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(75,122,52,.38) !important;
}

/* ── 5. SECONDARY BUTTONS ────────────────────────────────── */
.btn-secondary, .btn-outline, .btn-ol, .btn-ghost, .btn-ghost-wh,
[class*="btn-outline"], [class*="btn-secondary"] {
  background: transparent !important;
  border: 1.5px solid var(--kora-bronze-solid) !important;
  color: var(--kora-bronze-solid) !important;
  border-radius: var(--kora-radius-md) !important;
  padding: 10px 24px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: var(--kora-transition) !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-ol:hover,
.btn-ghost:hover, .btn-ghost-wh:hover {
  background: var(--kora-bronze-light) !important;
  color: var(--kora-ebony) !important;
}

/* ── Generic button reset ────────────────────────────────── */
button { font-family: 'DM Sans', sans-serif; cursor: pointer; }

/* ── 6. BADGES — Grades ──────────────────────────────────── */
.grade-A, .grade-a, [data-grade="A"] .grade-badge, .badge-a {
  background: var(--kora-forest) !important;
  color: #fff !important;
  border-radius: var(--kora-radius-badge) !important;
  padding: 2px 10px !important;
  font-size: 12px; font-weight: 600; display: inline-block;
}
.grade-B, .grade-b, [data-grade="B"] .grade-badge, .badge-b {
  background: var(--kora-bronze-solid) !important;
  color: #fff !important;
  border-radius: var(--kora-radius-badge) !important;
  padding: 2px 10px !important;
  font-size: 12px; font-weight: 600; display: inline-block;
}
.grade-C, .grade-c, [data-grade="C"] .grade-badge, .badge-c {
  background: var(--kora-amber) !important;
  color: #fff !important;
  border-radius: var(--kora-radius-badge) !important;
  padding: 2px 10px !important;
  font-size: 12px; font-weight: 600; display: inline-block;
}
.grade-D, .grade-d, .grade-E, .grade-e,
[data-grade="D"] .grade-badge, [data-grade="E"] .grade-badge, .badge-d {
  background: var(--kora-red) !important;
  color: #fff !important;
  border-radius: var(--kora-radius-badge) !important;
  padding: 2px 10px !important;
  font-size: 12px; font-weight: 600; display: inline-block;
}

/* Plan badges */
.badge, .plan-badge, [class*="plan-badge"],
.sub-badge, .role-badge, .status-badge {
  border-radius: var(--kora-radius-badge);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  padding: 3px 10px;
}

/* ── 7. TABLES ───────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
thead tr {
  background: var(--kora-bronze) !important;
}
thead th {
  color: #fff !important;
  text-transform: uppercase;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  border: none !important;
}
tbody tr:nth-child(even) { background: var(--kora-bg-subtle) !important; }
tbody tr:hover           { background: var(--kora-bronze-light) !important; transition: var(--kora-transition); }
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(75,122,52,.1) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}

/* ── 8. SIDEBARS ─────────────────────────────────────────── */
.sidebar, #sidebar, .side-nav, .app-sidebar {
  background: var(--kora-bronze-deep) !important;
  color: rgba(255,255,255,.85) !important;
}
.sidebar .nav-item, .sidebar .sidebar-item, .sidebar li,
.sidebar a:not(.nav-brand):not(.brand) {
  color: rgba(255,255,255,.75) !important;
  transition: var(--kora-transition);
}
.sidebar .active, .sidebar .nav-item.active,
.sidebar [class*="active"]:not(.modal) {
  border-left: 3px solid var(--kora-bronze-solid) !important;
  color: var(--kora-bronze-solid) !important;
  background: rgba(255,255,255,.05) !important;
  font-weight: 600;
}
.sidebar a:hover, .sidebar .nav-item:hover, .sidebar li:hover {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.95) !important;
}
/* Sidebar top brand stays gold */
.sidebar .sidebar-brand, .sidebar .brand,
.sidebar .nav-logo, .sidebar .logo-text,
.sidebar .sidebar-logo-text {
  color: var(--kora-bronze-solid) !important;
  font-family: 'Playfair Display', serif !important;
}
.sidebar .sidebar-logo-text span { color: var(--kora-bronze-solid) !important; }
.sidebar .sidebar-user-name { color: rgba(255,255,255,.92) !important; }
.sidebar .sidebar-user-role { color: var(--kora-bronze-solid) !important; }
.sidebar .sidebar-logo-sub { color: rgba(255,255,255,.38) !important; }
.sidebar .nav-section-title { color: rgba(255,255,255,.38) !important; }
.sidebar .logout-btn { color: rgba(255,255,255,.55) !important; }
.sidebar .logout-btn:hover { color: #F87171 !important; background: rgba(239,68,68,.08) !important; }

/* ── 9. TICKER STRIP ─────────────────────────────────────── */
.ticker, .ticker-strip, .ticker-bar,
.scroll-ticker, .live-ticker, .price-ticker {
  background: #082638 !important;
}
.ticker-name, .ticker .symbol, [class*="ticker"] .name,
.t-name { color: rgba(255,255,255,.7) !important; }
.ticker .positive, .ticker [class*="up"],
.t-pos, .change-pos, .var-pos, .positive { color: var(--kora-bronze-solid) !important; }
.ticker .negative, .ticker [class*="down"],
.t-neg, .change-neg, .var-neg, .negative { color: var(--kora-red-light) !important; }

/* ── 10. SCORE BARS ──────────────────────────────────────── */
.score-bar-inner, .score-fill, .bar-fill, .progress-bar {
  animation: growWidth 1.2s cubic-bezier(.4,0,.2,1) forwards;
  border-radius: 4px;
  height: 8px;
}
.score-bar-inner.a, .score-fill.a, .bar-a { background: var(--kora-forest) !important; }
.score-bar-inner.b, .score-fill.b, .bar-b { background: var(--kora-bronze-solid) !important; }
.score-bar-inner.c, .score-fill.c, .bar-c { background: var(--kora-amber) !important; }
.score-bar-inner.d, .score-fill.d, .bar-d,
.score-bar-inner.e, .score-fill.e, .bar-e { background: var(--kora-red) !important; }

/* ── 11. INPUTS ──────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
  border: 1px solid var(--kora-bronze-light) !important;
  border-radius: var(--kora-radius-md) !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px;
  background: var(--kora-surface) !important;
  color: var(--kora-text) !important;
  transition: var(--kora-transition);
}
input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus, textarea:focus {
  outline: none;
  border-color: var(--kora-bronze-solid) !important;
  box-shadow: 0 0 0 3px rgba(75,122,52,.15) !important;
}

/* ── 13. ANIMATIONS ──────────────────────────────────────── */
.page-section, .section-inner, .section, .main-section,
.hero, [class*="hero-"], .features, .pricing-section,
.faq-container, .contact-wrap, .dash-section {
  animation: fadeInUp .4s cubic-bezier(.4,0,.2,1) both;
}
.office-alert, [class*="alert-item"],
.alert-card, .kanban-card { animation: slideInRight .35s cubic-bezier(.4,0,.2,1) both; }

section:nth-child(2) { animation-delay: 80ms; }
section:nth-child(3) { animation-delay: 160ms; }
section:nth-child(4) { animation-delay: 240ms; }

/* ── 14. SEPARATOR ───────────────────────────────────────── */
.kora-divider {
  position: relative;
  border: none;
  height: 1px;
  background: rgba(75,122,52,.2);
  margin: 24px 0;
}
.kora-divider::before {
  content: '◆';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background: var(--kora-bg);
  padding: 0 8px;
  color: var(--kora-bronze-solid);
  font-size: 10px;
}

/* ── 15. HERO GRADIENT HEADING ───────────────────────────── */
.hero h1, .hero-title, .landing-hero h1,
.hero-h, .hero-h-dark,
[class*="hero"] > h1 {
  background: var(--kora-bronze) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-size: 54px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

/* ── 16. NAVBAR ──────────────────────────────────────────── */
/* :not(.sidebar-nav) excludes the <nav class="sidebar-nav"> menu nested inside .sidebar — its class name doesn't match ".sidebar" so it would otherwise inherit this light navbar background, making the dark-sidebar text illegible. */
nav:not(.sidebar):not(.side-nav):not(.sidebar-nav),
.nav:not(.sidebar):not(.side-nav):not(.sidebar-nav):not(.f-nav),
.navbar, header.nav {
  background: rgba(250,251,251,.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(75,122,52,.12);
}
/* Nav links become readable on light bg */
nav:not(.sidebar):not(.sidebar-nav) a, .nav:not(.sidebar):not(.sidebar-nav) a,
.navbar a, .nav-links a, .nav-lk {
  color: var(--kora-text) !important;
  transition: var(--kora-transition);
}
nav:not(.sidebar):not(.sidebar-nav) a:hover, .nav:not(.sidebar):not(.sidebar-nav) a:hover,
.navbar a:hover, .nav-links a:hover, .nav-lk:hover {
  color: var(--kora-bronze-solid) !important;
}
/* Brand stays gold */
.nav-brand, .nav-wm, .f-logo-over {
  color: var(--kora-bronze-solid) !important;
  font-family: 'Playfair Display', serif !important;
}
.f-logo-tips { color: var(--kora-ebony) !important; }

/* ── 17. FOOTER ──────────────────────────────────────────── */
footer {
  background: var(--kora-bronze-deep) !important;
  color: rgba(255,255,255,.7) !important;
}
footer h3, footer h4, footer .f-col-title, footer .ft-t,
footer [class$="-title"] {
  color: var(--kora-bronze-solid) !important;
}
footer a, footer .fl, footer [class*="footer"] a {
  color: var(--kora-bronze-light) !important;
  transition: var(--kora-transition);
}
footer a:hover, footer .fl:hover {
  color: var(--kora-bronze-solid) !important;
  text-decoration: none;
}
footer .fs, footer [class*="social"] a,
footer [class*="icon-link"] {
  color: var(--kora-bronze-solid) !important;
  border-color: rgba(75,122,52,.3) !important;
}
footer .footer-copy, footer .ft-copy,
footer [class*="copy"] { color: rgba(255,255,255,.35) !important; }

/* ── 18. MODALS ──────────────────────────────────────────── */
.modal-content, .modal-box, .modal-inner, .modal-body,
[class*="modal-content"], [class*="modal-box"] {
  background: var(--kora-surface) !important;
  border-radius: var(--kora-radius-lg) !important;
  box-shadow: var(--kora-shadow-lg) !important;
}
.modal-overlay, .overlay, .modal-backdrop,
[class*="-overlay"], [class*="-backdrop"] {
  background: rgba(13,56,86,.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── 19. LOADING SHIMMER ─────────────────────────────────── */
.loading, .skeleton, [class*="loading"],
[class*="skeleton"], [class*="placeholder"] {
  background: linear-gradient(
    90deg,
    var(--kora-bg-subtle) 25%,
    var(--kora-bronze-light) 50%,
    var(--kora-bg-subtle) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
}

/* ── 20. SCROLLBAR already handled above ─────────────────── */

/* ── 21. FINANCIAL NUMBERS ───────────────────────────────── */
.kpi-value, .kpi-num, .stat-value, .price-value,
.ticker-price, .ticker-change, .score-num,
.amount, .arr-val, .mrr-val,
.financial, [class*="-kpi"] [class*="-val"],
.num, .value-mono, td[class*="price"], td[class*="amount"],
td[class*="score"], td[class*="value"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ── 22. FLOATING BUTTONS ────────────────────────────────── */
.fab, .floating-btn, [class*="floating-action"],
.add-btn[class*="round"], button[class*="fab"] {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  box-shadow: var(--kora-shadow-lg) !important;
  border: 2px solid var(--kora-bronze-light) !important;
  transition: var(--kora-transition) !important;
}
.fab:hover, .floating-btn:hover { transform: scale(1.1) !important; }

/* ── 23. CRM KANBAN ──────────────────────────────────────── */
.kanban-col, .kanban-column, .crm-col {
  background: var(--kora-bg-subtle) !important;
  border-radius: var(--kora-radius-lg) !important;
  border: 1px solid rgba(75,122,52,.12) !important;
}
.kanban-col-header, .kanban-col h3, .crm-col-title {
  border-bottom: 3px solid var(--kora-bronze-solid) !important;
  font-family: 'Playfair Display', serif !important;
  padding-bottom: 8px;
  font-weight: 700;
}
.kanban-card, .crm-card {
  border-left: 4px solid var(--kora-bronze-solid);
  background: var(--kora-surface) !important;
  border-radius: var(--kora-radius-md) !important;
  box-shadow: var(--kora-shadow-sm) !important;
  margin-bottom: 8px;
}

/* ── 24. CONTENT CALENDAR ────────────────────────────────── */
.month-header, .calendar-month,
.cc-month, [class*="month-title"] {
  font-family: 'Playfair Display', serif !important;
  color: var(--kora-ebony);
  font-weight: 700;
}
input[type="checkbox"] { accent-color: var(--kora-bronze-solid) !important; }
.calendar-entry .status-dot,
.event-dot, [class*="status-dot"] { border-radius: 50%; }

/* ── 25. STRATEGIC IA ────────────────────────────────────── */
.str-card.critical, .str-critical { border-left: 4px solid var(--kora-red) !important; }
.str-card.high, .str-high         { border-left: 4px solid var(--kora-amber) !important; }
.str-card.medium, .str-medium     { border-left: 4px solid var(--kora-text-muted) !important; }
.str-card.opp, .str-card.opportunity,
.str-opp                          { border-left: 4px solid var(--kora-forest) !important; }
.str-card.tech, .str-tech         { border-left: 4px solid var(--kora-blue) !important; }
.str-card.commercial, .str-commercial { border-left: 4px solid var(--kora-bronze-solid) !important; }
.str-card.kpi, .str-kpi           { border-left: 4px solid var(--kora-forest-light) !important; }
.str-card.agent, .str-agent       { border-left: 4px solid var(--kora-blue) !important; }

/* ── 26. AI CHAT ─────────────────────────────────────────── */
.chat-bubble-user, .message-user, .msg-user,
[class*="chat"][class*="user"], .user-bubble {
  background: var(--kora-bronze-light) !important;
  border-radius: 16px 16px 4px 16px !important;
  color: var(--kora-ebony) !important;
}
.chat-bubble-ai, .message-ai, .msg-ai,
[class*="chat"][class*="ai"], [class*="chat"][class*="assistant"],
.ai-bubble, .assistant-bubble {
  background: var(--kora-surface) !important;
  border: 1px solid rgba(75,122,52,.15) !important;
  border-radius: 16px 16px 16px 4px !important;
}
.thumb-btn, [class*="thumb-up"], [class*="thumb-down"],
[class*="thumbs"], [class*="rating"] button {
  color: var(--kora-text-muted) !important;
  transition: var(--kora-transition) !important;
}
.thumb-btn:hover, [class*="thumb-up"]:hover,
[class*="thumb-down"]:hover, [class*="rating"] button:hover {
  color: var(--kora-bronze-solid) !important;
}

/* ── UTILITY CLASSES ─────────────────────────────────────── */
.kora-text-bronze   { color: var(--kora-bronze-solid) !important; }
.kora-text-ebony    { color: var(--kora-ebony) !important; }
.kora-text-muted    { color: var(--kora-text-muted) !important; }
.kora-bg-subtle     { background: var(--kora-bg-subtle) !important; }
.kora-surface       { background: var(--kora-surface) !important; }
.kora-font-display  { font-family: 'Playfair Display', serif !important; }
.kora-font-mono     { font-family: 'JetBrains Mono', monospace !important; }

/* ── SECTION BACKGROUNDS — transparent base ──────────────── */
section {
  background-color: transparent;
}

/* ── DARK SECTION explicit overrides ─────────────────────── */
.dark-section, .hero-dark, .section-dark,
[class*="section--dark"], .hero-bg-dark {
  background: var(--kora-ebony) !important;
}
.dark-section *, .hero-dark *, .hero-bg-dark * {
  color: rgba(255,255,255,.85);
}
.dark-section h1, .dark-section h2, .dark-section h3,
.hero-dark h1, .hero-dark h2, .hero-bg-dark h1 {
  color: var(--kora-bronze-light) !important;
  -webkit-text-fill-color: var(--kora-bronze-light) !important;
}

/* ── HUB terminal main area ──────────────────────────────── */
.hub-main, .terminal-main, .main-content, #main {
  background: var(--kora-bg) !important;
}

/* ── Mobile hamburger stays visible ──────────────────────── */
.mobile-menu-btn {
  background: var(--kora-ebony) !important;
  color: var(--kora-bronze-solid) !important;
  border: 1px solid var(--kora-bronze-solid) !important;
}

/* ── FAQ accordion overrides ─────────────────────────────── */
.faq-question { font-family: 'Playfair Display', serif !important; }
.faq-question.open { color: var(--kora-bronze-solid) !important; }
.faq-icon { border-color: var(--kora-bronze-solid) !important; color: var(--kora-bronze-solid) !important; }

/* ── Payment form ────────────────────────────────────────── */
.plan-selector, .payment-plan-card {
  border: 2px solid rgba(75,122,52,.15) !important;
  border-radius: var(--kora-radius-lg) !important;
  transition: var(--kora-transition) !important;
}
.plan-selector.selected, .payment-plan-card.selected,
.plan-selector:has(input:checked), .payment-plan-card:has(input:checked) {
  border-color: var(--kora-bronze-solid) !important;
  background: rgba(75,122,52,.06) !important;
}

/* ── Auth pages (register/reset) ─────────────────────────── */
.auth-card, .login-card, .register-card, .form-card {
  background: var(--kora-surface) !important;
  border-radius: var(--kora-radius-lg) !important;
  box-shadow: var(--kora-shadow-lg) !important;
  border: 1px solid rgba(75,122,52,.1) !important;
}

/* ── Prochaines étapes / alerts in office ────────────────── */
.step-card, .next-step, .etape-item,
.step-item { border-left: 3px solid var(--kora-bronze-solid) !important; }

/* ── Validation R2 ───────────────────────────────────────── */
.validation-row, .score-row { transition: var(--kora-transition); }
.validation-row:hover { background: var(--kora-bronze-light) !important; }

/* ── Detail panel (CRM slide-in) ─────────────────────────── */
.detail-panel, .slide-panel, .crm-detail,
[class*="detail-panel"], [class*="slide-panel"] {
  background: var(--kora-surface) !important;
  box-shadow: var(--kora-shadow-lg) !important;
  border-left: 3px solid var(--kora-bronze-solid);
}

/* ── Tabs ────────────────────────────────────────────────── */
.tab, .tab-btn, [class*="tab-btn"]:not([class*="kanban"]) {
  color: var(--kora-text-secondary);
  font-family: 'DM Sans', sans-serif;
  border-bottom: 2px solid transparent;
  transition: var(--kora-transition);
}
.tab.active, .tab-btn.active, [class*="tab-btn"].active,
.str-tab.active {
  color: var(--kora-bronze-solid) !important;
  border-bottom-color: var(--kora-bronze-solid) !important;
}

/* ── Subscription expiry badge ───────────────────────────── */
.expiry-badge, .sub-expiry, [class*="expiry"] {
  background: var(--kora-bronze-light) !important;
  color: var(--kora-ebony) !important;
  border-radius: var(--kora-radius-badge);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Academy accordion ───────────────────────────────────── */
.accordion-header, .level-header, [class*="accordion-btn"] {
  font-family: 'Playfair Display', serif !important;
  color: var(--kora-ebony);
}

/* ── Phase 2 cards (hub) ─────────────────────────────────── */
.phase-card, [class*="phase-"] {
  border-top: 3px solid var(--kora-bronze-solid) !important;
  background: var(--kora-surface) !important;
  border-radius: var(--kora-radius-lg) !important;
  box-shadow: var(--kora-shadow-md) !important;
}

/* ── Alert severity variants ─────────────────────────────── */
.alert-urgent, .alert-critical { border-left: 4px solid var(--kora-red) !important; }
.alert-info, .alert-info-card  { border-left: 4px solid var(--kora-blue) !important; }
.alert-fiscal                  { border-left: 4px solid var(--kora-amber) !important; }
.alert-strategic               { border-left: 4px solid var(--kora-forest) !important; }