/* Override de thème : aligne les outils sur la DA « Encre & Miel » de Marge Brut
   (crème #FBF6EC, encre bleue #15293D, accent miel #E1A12B ; Bricolage Grotesque
   + Hanken Grotesk + Geist Mono). Le rouge est réservé aux alertes/erreurs.
   Chargé APRÈS le <style> inline de chaque outil → il l'emporte dans la cascade.

   Règles DA (source de vérité : src/index.css, Button/Card/PageHeader/Landing) :
   - var(--mono) UNIQUEMENT sur les nombres tabulaires (.num) ; partout ailleurs
     → var(--sans) (chrome/labels/boutons) ou var(--display) (titres).
   - Pas d'uppercase + letter-spacing sauvage sur le chrome. Exception : l'eyebrow
     (sans 700, miel, uppercase, tracking 0.14em).
   - Boutons arrondis (rayon 12-13px), encre/miel, sentence-case, ombres douces.
   - Emphase <em> : Bricolage 800, droite, miel + surlignage ; jamais italique,
     jamais weight 300, jamais rouge, jamais opsz/SOFT/serif.
   - Hairlines encre translucides (var(--hair)) ; texte sur fond encre = crème. */

:root {
  --bg: #fbf6ec;
  --bg-alt: #f4ecdd;
  --paper: #ffffff;
  --surface: #ffffff;
  /* crème = papier crème de la DA (plus de blanc pur sur les fonds encre) */
  --cream: #fbf6ec;
  --soft: #f4ecdd;

  --ink: #15293d;
  --ink-soft: #51606e;
  /* --muted relevé pour respecter WCAG-AA (l'ancien #9AA6B2 échouait) */
  --muted: #5e6b78;
  --hair: rgba(21, 41, 61, 0.10);
  --hair-2: rgba(21, 41, 61, 0.18);
  --line-2: rgba(21, 41, 61, 0.18);

  /* Primaire = bleu encre ; accent = miel. « signal » → brand navy (PAS rouge). */
  --signal: #173b5a;
  --signal-deep: #0f2a43;
  --primary: #173b5a;
  --primary-deep: #0f2a43;
  --brand: #173b5a;
  --brand-600: #103048;
  --brand-700: #0f2a43;
  --brand-soft: #e7eef4;
  --accent: #e1a12b;
  --accent-600: #c2851a;
  --accent-soft: #f8e8c5;
  --on-primary: #fbf6ec;

  --ok: #3c8c68;
  --good: #3c8c68;
  --warn: #c75e38;
  --crit: #bb3b2b;

  /* Ombres douces & chaudes (sur encre) */
  --shadow-card: 0 1px 2px rgb(21 41 61 / 0.05), 0 6px 20px rgb(21 41 61 / 0.06);
  --shadow-pop: 0 2px 6px rgb(21 41 61 / 0.07), 0 12px 30px rgb(21 41 61 / 0.09);

  --display: 'Bricolage Grotesque', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Bricolage Grotesque', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
}

/* ─────────────────────────────────────────────────────────────
   1. EMPHASE <em> dans les titres — Bricolage 800, droite, miel + surlignage
   (jamais italique / weight 300 / rouge / serif / opsz/SOFT)
   ───────────────────────────────────────────────────────────── */
em,
.serif,
h1 em, h2 em, h3 em, h4 em,
.q-title em, .intro h1 em, .confirm h1 em,
.page-head h1 em, .gate h3 em, .verdict h4 em,
.score, .score-meta .v {
  font-style: normal !important;
  font-variation-settings: normal !important;
}
.page-head h1 em,
.intro h1 em,
.confirm h1 em,
h2.q-title em,
.verdict h4 em,
.gate h3 em {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  color: var(--accent-600) !important;
  position: relative;
  display: inline-block;
}
/* Surlignage miel derrière les <em> (au lieu du teal/terracotta). */
.page-head h1 em::after,
.intro h1 em::after,
.confirm h1 em::after,
h2.q-title em::after {
  background: color-mix(in oklab, var(--accent) 45%, transparent) !important;
}

/* ─────────────────────────────────────────────────────────────
   2. WORDMARK / masthead — point miel ; pas de re-typographie uppercase mono
   ───────────────────────────────────────────────────────────── */
.mark::before,
.logo .wm em {
  color: var(--accent) !important;
}
.mark {
  font-family: var(--display) !important;
  text-transform: none !important;
}
/* Fils d'ariane / retour : sans, sentence-case, sans tracking ni uppercase */
.mast-center,
.mast-trail,
.mast-trail strong,
.mast-back {
  font-family: var(--sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
.mast-trail strong { font-weight: 600 !important; }
.mast-center,
.mast-trail { color: var(--ink-soft) !important; }
.mast-back:hover { border-color: var(--hair-2) !important; }

/* ─────────────────────────────────────────────────────────────
   3. EYEBROW / labels de section — sans 700, miel, uppercase + 0.14em
   (la SEULE exception uppercase+tracking ; pas de tiret ::before)
   ───────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--accent) !important;
}
.eyebrow.muted { color: var(--ink-soft) !important; }
.eyebrow::before {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   4. BOUTONS / CTA — sans 600, sentence-case, arrondis, encre/miel, ombres
   ───────────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.cta,
.nav-next,
.nav-back,
.dontknow,
.add-row,
.add-row-btn,
.gate-form button,
.filter-select {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Bouton primaire : remplissage encre, texte crème, arrondi, ombre douce */
.btn,
.btn-primary,
.cta,
.nav-next {
  border-radius: 13px !important;
  border: none !important;
}
.btn-primary,
.cta,
.nav-next {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow: var(--shadow-card) !important;
}
.btn-primary:hover,
.cta:hover,
.nav-next:hover {
  background: var(--primary-deep) !important;
  box-shadow: var(--shadow-pop) !important;
}
.cta.signal,
.nav-next.signal { background: var(--primary) !important; }
.cta.signal:hover,
.nav-next.signal:hover { background: var(--primary-deep) !important; }

/* Boutons secondaire / outline : surface, bord hairline, encre */
.btn-secondary {
  border-radius: 13px !important;
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.btn-secondary:hover {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
.cta.ghost {
  border-radius: 13px !important;
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.cta.ghost:hover {
  background: var(--soft) !important;
  color: var(--ink) !important;
}

/* Ghost / liens d'action discrets */
.btn-ghost,
.nav-back {
  border: none !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
}
.btn-ghost:hover,
.nav-back:hover {
  background: var(--soft) !important;
  color: var(--ink) !important;
}
.nav-back { border-radius: 999px !important; }

/* Pill « je ne sais pas » : sentence-case, bord hairline arrondi */
.dontknow {
  border-radius: 999px !important;
  border: 1px dashed var(--line-2) !important;
  color: var(--ink-soft) !important;
}
.dontknow:hover {
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
  background: var(--soft) !important;
}
.dontknow.selected {
  color: var(--on-primary) !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Liens « ajouter une ligne » : sans, accent encre, sans uppercase */
.add-row,
.add-row-btn {
  color: var(--signal) !important;
}

/* Bouton du formulaire e-mail (gate) : remplissage encre arrondi */
.gate-form button {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-radius: 12px !important;
}
.gate-form button:hover {
  background: var(--accent) !important;
  color: var(--ink) !important;
}

/* Filtre / select : sentence-case, bord hairline arrondi */
.filter-select {
  border-radius: 12px !important;
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* Bouton danger : conserve la sémantique data (rouge), géométrie DA */
.btn-danger {
  border-radius: 13px !important;
  border: 1px solid var(--crit) !important;
  background: transparent !important;
  color: var(--crit) !important;
}
.btn-danger:hover {
  background: var(--crit) !important;
  color: var(--on-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   5. LABELS / EN-TÊTES / CLÉS / NOTES — sans, sentence-case, sans tracking
   (mono réservé aux nombres tabulaires .num)
   ───────────────────────────────────────────────────────────── */
.recap-cell .k,
.recap-cell .v small,
.range-cell .label,
.range-cell .suffix,
.param .label,
.param .help,
.sec-head h2,
.sec-head .note,
.intro-meta div,
.intro-meta strong,
.cta-meta,
.progress-label,
.slider-readout .unit,
.slider-readout .median,
.slider-readout .median strong,
.slider-bounds,
.score-meta .label,
.score-meta .v,
.gauge-label,
.gauge-values,
.gauge-values .you,
.gauge-values .delta,
.gauge-median::after,
.verdict .tag,
.verdict .impact,
.verdict .impact strong,
.verdict-stamp,
.intro-stamp,
.gate p,
.signature,
.signature a,
.page-head .legal,
.lg .num,
.lg .txt span,
table.wines-table th,
table.wines-table td.tag,
table.mat thead th,
table.mat tbody td.cat select,
footer.tail {
  font-family: var(--sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Poids cohérents pour ces éléments de chrome */
.recap-cell .k,
.range-cell .label,
.param .label,
.sec-head .note,
.cta-meta,
.progress-label,
.slider-readout .unit,
.slider-readout .median,
.slider-bounds,
.score-meta .label,
.gauge-label,
.gauge-values,
.verdict .tag,
.verdict .impact,
.page-head .legal,
.lg .txt span,
table.wines-table th,
table.wines-table td.tag,
table.mat thead th,
table.mat tbody td.cat select,
footer.tail,
.gate p {
  font-weight: 500 !important;
}
.sec-head h2,
.intro-meta strong,
.slider-readout .median strong,
.score-meta .v,
.gauge-values .you,
.verdict .impact strong {
  font-weight: 600 !important;
}
.intro-meta strong,
.slider-readout .median strong,
.score-meta .v {
  font-family: var(--display) !important;
}

/* Couleur des libellés discrets : ink-soft (au lieu du muted trop clair) */
.recap-cell .k,
.range-cell .label,
.param .label,
.param .help,
.sec-head .note,
.cta-meta,
.progress-label,
.slider-readout .unit,
.slider-readout .median,
.slider-bounds,
.score-meta .label,
.verdict .tag,
.page-head .legal,
.lg .num,
.lg .txt span,
table.wines-table th,
table.wines-table td.tag,
table.mat thead th,
table.mat tbody td.cat select,
footer.tail {
  color: var(--ink-soft) !important;
}

/* Tampons (intro-stamp / verdict-stamp) : pill encre, crème, sentence-case */
.intro-stamp,
.verdict-stamp {
  background: var(--ink) !important;
  color: var(--on-primary) !important;
  border-radius: 999px !important;
}

/* ─────────────────────────────────────────────────────────────
   6. CONTRÔLES RANGE — piste hairline, pastille miel arrondie, focus brand
   ───────────────────────────────────────────────────────────── */
input[type="range"]::-webkit-slider-runnable-track { background: var(--hair) !important; }
input[type="range"]::-moz-range-track { background: var(--hair) !important; }
input[type="range"]::-webkit-slider-thumb {
  border-radius: 999px !important;
  background: var(--accent) !important;
  border: 2px solid var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}
input[type="range"]::-moz-range-thumb {
  border-radius: 999px !important;
  background: var(--accent) !important;
  border: 2px solid var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 35%, transparent) !important;
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 35%, transparent) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. HAIRLINES — adoucir les bordures encre pleine en hairline translucide
   ───────────────────────────────────────────────────────────── */
.masthead,
.progress,
.page-head,
.recap, .recap-cell,
.settings,
.wines, .wine-wrap,
table.wines-table th, table.wines-table td,
.ranges-grid, .range-cell,
.params, .param,
.controls, .matrix, .matrix-wrap,
table.mat th, table.mat td,
.legend, .legend-grid, .lg,
.slider-readout, .slider-bounds,
.screen-nav, .result-head,
.gauges, .gauge, .gauge-bar,
.verdict, .chip, .intro-meta,
.signature, .confirm .check,
footer.tail {
  border-color: var(--hair) !important;
}
.eyebrow::before { background: var(--hair) !important; }
.signature a { border-bottom-color: var(--hair) !important; }
.gauge-bar { background: var(--bg-alt) !important; }
.gauge-median { border-left-color: var(--ink-soft) !important; }
.gauge-median::after { color: var(--ink-soft) !important; background: var(--bg) !important; }

/* Cartes / frames arrondies + ombres douces */
.chip, .verdict, .gate, .gate-form {
  border-radius: 14px !important;
}
.ranges-grid, .params, .wine-wrap,
.controls, .matrix-wrap, .gauges {
  border-radius: 14px !important;
}
.gate-form { border-color: var(--accent) !important; }
.cell-check { border-radius: 8px !important; border-color: var(--hair) !important; }

/* ─────────────────────────────────────────────────────────────
   8. FONDS ENCRE — texte/icône en crème (jamais blanc pur)
   ───────────────────────────────────────────────────────────── */
.intro-stamp,
.verdict-stamp,
.cta,
.nav-next,
.gate,
.gate-form button,
.dontknow.selected,
.chip.selected,
.chip:hover,
.toast,
.autosave,
.cell-check.on {
  color: var(--on-primary) !important;
}
.gate { background: var(--ink) !important; }

/* ─────────────────────────────────────────────────────────────
   9. SÉLECTION — surlignage miel doux, texte brand
   ───────────────────────────────────────────────────────────── */
::selection {
  background: var(--accent-soft);
  color: var(--brand-700);
}