/* ==============================================================
   Grain & Greeks — Phase 1 Brand Tokens Override
   ==============================================================
   Ce fichier surcharge les tokens de design système définis dans
   app.css :root. Il est chargé APRÈS app.css (par ordre alphabé-
   tique des assets dans Dash : a→b→c → app.css avant brand.css).

   Effet : toutes les références à var(--c-accent), var(--font-body)
   etc. récupèrent automatiquement les nouvelles valeurs sans
   toucher au CSS legacy.

   Pour rollback : supprimer ce fichier et redémarrer.
   ============================================================== */

:root {
  /* ── Brand accent — brass / hallmark ────────────────────────── */
  --c-accent: #c9a961;
  --c-accent-dim: rgba(201, 169, 97, 0.12);
  --c-accent-glow: rgba(201, 169, 97, 0.25);
  --c-accent-deep: #8a6d2e;
  --c-accent-pale: #e8d8a8;

  /* ── Brand background tones ─────────────────────────────────── */
  --c-loam: #1a1410;          /* terre, panneaux profonds */
  --c-grain: #e8d8a8;         /* grain pâle, highlights */
  --c-canvas: #0a0a0f;        /* fond app (déjà = --bg-base) */

  /* ── Typography ─────────────────────────────────────────────── */
  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ── Shadow refinement (brass-tinted depth) ─────────────────── */
  --shadow-brass-glow: 0 0 20px rgba(201, 169, 97, 0.15);
}

/* ── Body re-application (force la nouvelle font-family) ─────── */
body,
html {
  font-family: var(--font-body);
}

/* ── Headings get the editorial serif ────────────────────────── */
h1, h2, h3,
.gg-display,
.soy-section-title.gg-editorial {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

/* Note : on ne force PAS toute h1/h2/h3 globalement en Fraunces
   parce que le legacy utilise des `.soy-section-title` en bold uppercase
   (look terminal). On ajoutera `.gg-editorial` opt-in en Phase 3. */

/* ── Bouton focus / actif : nouvelle teinte brass ────────────── */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ── Selection highlight ─────────────────────────────────────── */
::selection {
  background: var(--c-accent-dim);
  color: var(--c-accent-pale);
}

/* ── Scrollbar (webkit) — discret brass ──────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, 0.18);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 169, 97, 0.32);
}
/* ==============================================================
   Grain & Greeks — Phase 3 Component Overrides
   ==============================================================
   À AJOUTER À LA FIN du fichier brand.css existant (créé en Phase 1).
   Couvre les couleurs cyan hardcodées que app.css n'expose pas comme
   variables.
   ============================================================== */

/* ── Force la nouvelle ligne de --c-accent au cas où app.css est
       chargé après brand.css dans certains navigateurs en cache ─── */
:root {
  --c-accent: #c9a961 !important;
  --c-accent-dim: rgba(201, 169, 97, 0.12) !important;
  --c-accent-glow: rgba(201, 169, 97, 0.25) !important;
}

/* ── Feedback widget — bannière flottante en bas à droite ────── */
.fbw-banner {
  background: linear-gradient(135deg, #d4b876, #8a6d2e) !important;
  color: #0e1410 !important;
}

.fbw-btn.primary {
  background: #d4b876 !important;
  color: #0e1410 !important;
}

.fbw-toast {
  border-color: #d4b876 !important;
}

/* ── Liens / cliquables qui héritaient de cyan ───────────────── */
a:not(.btn):not([class*="badge"]):not(.nav-link) {
  color: var(--c-accent);
}
a:not(.btn):not([class*="badge"]):not(.nav-link):hover {
  color: var(--c-accent-pale);
}

/* ── Inputs focus ring cyan → brass ──────────────────────────── */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 169, 97, 0.25) !important;
  outline: none !important;
}

/* ── Boutons primaires Bootstrap (dbc.Button) ────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #c9a961, #8a6d2e) !important;
  border-color: #8a6d2e !important;
  color: #0e1410 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #d4b876, #9c7c34) !important;
  border-color: #9c7c34 !important;
  color: #0a0a0f !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 169, 97, 0.35) !important;
}
.btn-outline-primary {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}
.btn-outline-primary:hover {
  background: var(--c-accent-dim) !important;
  color: var(--c-accent-pale) !important;
}

/* ── Badges Bootstrap teintés cyan ───────────────────────────── */
.badge.bg-info,
.badge.bg-primary {
  background: var(--c-accent-dim) !important;
  color: var(--c-accent-pale) !important;
  border: 1px solid var(--c-accent-glow);
}

/* ── Tabs Dash (.tab--selected) ──────────────────────────────── */
.tab--selected,
.dash-tab--selected {
  border-top-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}

/* ── Spinners et indicateurs de chargement ───────────────────── */
.spinner-border-primary,
.spinner-grow-primary {
  color: var(--c-accent) !important;
}

/* ── Sidebar item actif ──────────────────────────────────────── */
.sidebar-item.active,
.sidebar-item:hover {
  border-left-color: var(--c-accent) !important;
}
.sidebar-item.active .sidebar-item-label,
.sidebar-item.active .nav-icon {
  color: var(--c-accent) !important;
}

/* ── Sidebar logo container : aligner verticalement ──────────── */
.sidebar-logo {
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
  padding-bottom: 14px;
}

/* ── Plotly modebar (boutons charts) ─────────────────────────── */
.modebar-btn.active path,
.modebar-btn:hover path {
  fill: var(--c-accent) !important;
}

/* ── Section titles : option Fraunces editorial ──────────────── */
.gg-editorial,
.section-title-editorial {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--c-accent) !important;
}

/* ── Code / mono blocks unifiés ──────────────────────────────── */
code, pre, .mono, .font-mono,
[class*="-mono"], [class*="numeric"] {
  font-family: var(--font-mono) !important;
}