/* ============================================================
   WOW — IMPORT DU LEXIQUE MODERNE (fond sombre + dynamique)
   À charger en DERNIER, juste avant le content.
   Override l'ensemble des fonds et adapte le contenu.
   ============================================================ */

/* Verrouillage mode sombre — on masque le bouton Clair/Sombre */
.nav-tools .nav-btn:first-child {
  display: none !important;
}

:root {
  /* Palette moderne réinjectée */
  --m-lime:     #D4F15A;
  --m-emerald:  #0E7C5A;
  --m-forest:   #063F2D;
  --m-saffron:  #F2A71B;
  --m-rust:     #C4451C;
  --m-clay:     #E07856;
  --m-lavender: #8E7BC4;
  --m-sky:      #7CC4D8;
  --m-cream:    #FBF8F2;
  --m-bone:     #ECE8DC;

  /* Encre sombre moderne */
  --m-ink:      #0F1719;
  --m-ink-2:    #2B3336;
  --m-ink-3:    #5E6A6E;

  /* Override des fonds papier — devient sombre tendance forest */
  --paper-dark:      #0a1614;
  --paper-dark-2:    #0e1c19;
  --paper-dark-edge: #1a2d28;
}

/* ============================================================
   1. ENVIRONNEMENT — fond sombre dynamique avec radials
   ============================================================ */
html, body {
  background: #0a0c0d !important;
}

.stage {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(212,241,90,0.10), transparent 55%),
    radial-gradient(ellipse at 82% 18%, rgba(124,196,216,0.08), transparent 50%),
    radial-gradient(ellipse at 75% 88%, rgba(242,167,27,0.09), transparent 55%),
    radial-gradient(ellipse at 25% 80%, rgba(224,120,86,0.08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(14,124,90,0.05), transparent 70%),
    #0a0c0d !important;
  background-attachment: fixed !important;
}

/* Animation subtile du fond */
.stage::before {
  content: "";
  position: fixed;
  inset: -10%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(142,123,196,0.08), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(212,241,90,0.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
  animation: wmm-drift 24s ease-in-out infinite alternate;
}
@keyframes wmm-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2%, -3%) scale(1.05); }
  100% { transform: translate(-2%, 2%) scale(0.98); }
}

/* ============================================================
   2. PAGES — fond sombre forest avec subtle gradient interne
   ============================================================ */
.page {
  background: linear-gradient(180deg, #0e1c19 0%, #0a1614 100%) !important;
  color: var(--m-cream) !important;
  border: 1px solid rgba(212,241,90,0.08);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.4),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 0 0.5px rgba(212,241,90,0.06),
    0 0 60px rgba(14,124,90,0.10) !important;
}

/* Pages famille — accent coloré subtil par-dessus le sombre */
.page.fam-minerales {
  background:
    radial-gradient(circle at 95% 5%, rgba(224,120,86,0.18), transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(196,69,28,0.12), transparent 45%),
    linear-gradient(180deg, #0e1c19 0%, #0a1614 100%) !important;
}
.page.fam-vegetales {
  background:
    radial-gradient(circle at 95% 5%, rgba(212,241,90,0.18), transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(14,124,90,0.18), transparent 45%),
    linear-gradient(180deg, #0e1c19 0%, #0a1614 100%) !important;
}
.page.fam-animales {
  background:
    radial-gradient(circle at 95% 5%, rgba(196,69,28,0.18), transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(142,123,196,0.10), transparent 45%),
    linear-gradient(180deg, #0e1c19 0%, #0a1614 100%) !important;
}
.page.fam-specifiques {
  background:
    radial-gradient(circle at 95% 5%, rgba(242,167,27,0.20), transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(212,241,90,0.10), transparent 45%),
    linear-gradient(180deg, #0e1c19 0%, #0a1614 100%) !important;
}

/* ============================================================
   3. TYPOGRAPHIE — adaptée au fond sombre
   ============================================================ */
.page,
.page * {
  --paper: var(--paper-dark);
  --paper-2: var(--paper-dark-2);
  --paper-edge: var(--paper-dark-edge);
  --cream: rgba(255,255,255,0.05);
  --sage-pale: rgba(212,241,90,0.12);
  --paper-3: rgba(255,255,255,0.04);
}

.page h1, .page h2, .page h3, .page h4 {
  color: var(--m-cream) !important;
}

.section-title {
  color: var(--m-cream) !important;
}

/* Override des titres avec gradient — re-coloriser pour sombre */
.page.fam-vegetales .section-title {
  background: linear-gradient(100deg,
    var(--m-lime) 0%, var(--m-emerald) 35%, var(--m-cream) 60%, var(--m-emerald) 80%, var(--m-lime) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.page.fam-minerales .section-title {
  background: linear-gradient(100deg,
    var(--m-clay) 0%, var(--m-saffron) 40%, var(--m-cream) 65%, var(--m-saffron) 85%, var(--m-clay) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.page.fam-animales .section-title {
  background: linear-gradient(100deg,
    var(--m-clay) 0%, var(--m-rust) 40%, var(--m-cream) 65%, var(--m-rust) 85%, var(--m-clay) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.page.fam-specifiques .section-title {
  background: linear-gradient(100deg,
    var(--m-saffron) 0%, var(--m-clay) 40%, var(--m-cream) 65%, var(--m-clay) 85%, var(--m-saffron) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
/* Pages neutres (cover, toc, termes, etc.) */
.page:not(.fam-minerales):not(.fam-vegetales):not(.fam-animales):not(.fam-specifiques) .section-title {
  background: linear-gradient(100deg,
    var(--m-lime) 0%, var(--m-emerald) 40%, var(--m-cream) 65%, var(--m-emerald) 85%, var(--m-lime) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.eyebrow {
  color: var(--m-lime) !important;
}
.eyebrow::before {
  background: var(--m-lime) !important;
}

/* Body text */
.body, .lead, .body-text, p, .foreword {
  color: rgba(251,248,242,0.85) !important;
}
.body strong, .lead strong, .body-text strong {
  color: var(--m-cream) !important;
}
.body em, .lead em, .body-text em, em {
  color: var(--m-lime) !important;
}

/* Headers/footers de page */
.page-header, .page-footer {
  border-color: rgba(212,241,90,0.18) !important;
  color: rgba(251,248,242,0.55) !important;
}
.page-header span, .page-footer span {
  color: rgba(251,248,242,0.55) !important;
}
.page-num {
  background: linear-gradient(135deg, var(--m-lime), var(--m-emerald)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   4. FICHES — cartes sombres avec accent vif
   ============================================================ */
.fiche {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.02) 100%) !important;
  border: 1px solid rgba(212,241,90,0.12) !important;
  border-top: 5px solid var(--fam-accent, var(--m-lime)) !important;
  color: var(--m-cream) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fiche:hover {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.03) 100%) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.4),
    0 0 24px color-mix(in srgb, var(--fam-accent, var(--m-lime)) 30%, transparent),
    0 4px 10px color-mix(in srgb, var(--fam-accent, var(--m-lime)) 20%, transparent) !important;
}

.fiche-name {
  color: var(--m-cream) !important;
}
.fiche-subtitle {
  color: rgba(251,248,242,0.6) !important;
}
.fiche-family {
  color: var(--fam-accent, var(--m-lime)) !important;
}
.fiche-body, .fiche-body p {
  color: rgba(251,248,242,0.8) !important;
}
.fiche-stat {
  background: rgba(0,0,0,0.25) !important;
  border-color: rgba(212,241,90,0.10) !important;
  color: var(--m-cream) !important;
}
.fiche-stat-value {
  color: var(--m-cream) !important;
}
.fiche-stat-label {
  color: rgba(251,248,242,0.55) !important;
}
.fiche-secondary {
  background: rgba(0,0,0,0.25) !important;
  border-color: rgba(212,241,90,0.10) !important;
}
.fiche-secondary-label {
  color: rgba(251,248,242,0.55) !important;
}
.fiche-plate {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border-color: rgba(212,241,90,0.10) !important;
}
.fiche-plate.has-photo {
  background: rgba(0,0,0,0.3) !important;
}

/* ============================================================
   5. NPK BARS — sombre avec gradient lumineux
   ============================================================ */
.npk-bar-track {
  background: rgba(0,0,0,0.35) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4) !important;
}
.npk-bar-label {
  color: var(--m-cream) !important;
}
.npk-bar-value {
  color: rgba(251,248,242,0.7) !important;
}

/* ============================================================
   6. TABLEAUX — sombres
   ============================================================ */
table.data {
  color: var(--m-cream) !important;
}
table.data th {
  background: rgba(212,241,90,0.10) !important;
  color: var(--m-cream) !important;
  border-bottom: 2px solid var(--m-lime) !important;
}
table.data td {
  border-bottom-color: rgba(212,241,90,0.10) !important;
  color: rgba(251,248,242,0.85) !important;
}
table.data tr:hover td {
  background: rgba(212,241,90,0.05) !important;
}

/* Override des couleurs famille sur tableaux */
.page.fam-minerales .data thead th,
.page.fam-vegetales .data thead th,
.page.fam-animales  .data thead th,
.page.fam-specifiques .data thead th {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fam-accent) 25%, rgba(0,0,0,0.4)),
    color-mix(in srgb, var(--fam-accent) 10%, rgba(0,0,0,0.5))) !important;
  color: var(--m-cream) !important;
}

/* ============================================================
   7. BLOCS SAVIEZ — verre teinté
   ============================================================ */
.block.saviez {
  background: linear-gradient(135deg,
    rgba(212,241,90,0.10),
    rgba(14,124,90,0.18)) !important;
  border-left: 4px solid var(--m-lime) !important;
  color: var(--m-cream) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.block.saviez .block-label {
  color: var(--m-lime) !important;
}
.block-body {
  color: rgba(251,248,242,0.9) !important;
}
.block.regl {
  background: rgba(0,0,0,0.4) !important;
  color: var(--m-cream) !important;
  border-left-color: var(--m-cream) !important;
}

/* Page neutre : conserver lime accent */
.page:not(.fam-minerales):not(.fam-vegetales):not(.fam-animales):not(.fam-specifiques) .block.saviez {
  background: linear-gradient(135deg,
    rgba(212,241,90,0.12),
    rgba(14,124,90,0.20)) !important;
  border-left: 4px solid var(--m-lime) !important;
}

/* Page famille : tint avec accent famille */
.page.fam-minerales .block.saviez,
.page.fam-vegetales .block.saviez,
.page.fam-animales  .block.saviez,
.page.fam-specifiques .block.saviez {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fam-accent) 20%, transparent),
    color-mix(in srgb, var(--fam-accent) 8%, transparent)) !important;
  border-left-color: var(--fam-accent) !important;
}

/* ============================================================
   8. BADGES — verre teinté lumineux
   ============================================================ */
.badge {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(212,241,90,0.25) !important;
  color: var(--m-cream) !important;
  font-weight: 600;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.badge:hover {
  background: rgba(212,241,90,0.15) !important;
  color: var(--m-lime) !important;
  border-color: var(--m-lime) !important;
}
.badge-ab {
  background: var(--m-lime) !important;
  color: var(--m-forest) !important;
  border-color: var(--m-lime) !important;
}
.badge-vegan {
  background: var(--m-emerald) !important;
  color: var(--m-cream) !important;
  border-color: var(--m-emerald) !important;
}
.badge-conv {
  background: var(--m-ink) !important;
  color: var(--m-cream) !important;
  border-color: var(--m-cream) !important;
}
.badge-soluble {
  background: var(--m-sky) !important;
  color: var(--m-forest) !important;
  border-color: var(--m-sky) !important;
}
.badge-lore {
  background: linear-gradient(120deg, var(--m-lime), var(--m-emerald)) !important;
  color: var(--m-forest) !important;
  border-color: transparent !important;
}

/* ============================================================
   9. NAV / FILTERS — sombres avec lime accent
   ============================================================ */
.nav-btn {
  color: rgba(251,248,242,0.7) !important;
  border-color: rgba(212,241,90,0.18) !important;
  background: transparent !important;
}
.nav-btn:hover {
  color: var(--m-lime) !important;
  border-color: var(--m-lime) !important;
  background: rgba(212,241,90,0.06) !important;
}
.nav-btn.active {
  background: linear-gradient(120deg, var(--m-lime), var(--m-emerald)) !important;
  color: var(--m-forest) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(212,241,90,0.3) !important;
}

/* ============================================================
   10. SVG SCHEMAS — adaptation du sombre
   ============================================================ */
/* Inverse les éléments noirs en clairs dans les SVG  */
.page svg text { fill: rgba(251,248,242,0.85); }
.page svg [fill="var(--ink)"] { fill: var(--m-cream) !important; }
.page svg [fill="var(--ink-muted)"] { fill: rgba(251,248,242,0.55) !important; }
.page svg [fill="var(--ink-soft)"] { fill: rgba(251,248,242,0.65) !important; }
.page svg [fill="var(--paper)"] { fill: rgba(0,0,0,0.4) !important; }
.page svg [fill="var(--paper-2)"] { fill: rgba(255,255,255,0.05) !important; }
.page svg [fill="var(--cream)"] { fill: rgba(255,255,255,0.06) !important; }

.page svg [stroke="var(--ink)"] { stroke: rgba(251,248,242,0.7) !important; }
.page svg [stroke="var(--ink-muted)"] { stroke: rgba(251,248,242,0.4) !important; }
.page svg [stroke="var(--paper-edge)"] { stroke: rgba(212,241,90,0.15) !important; }

.page svg path[fill="var(--paper-2)"][stroke] { fill: rgba(255,255,255,0.08) !important; }

/* ============================================================
   11. TOOLTIPS, INPUTS — adaptés au sombre
   ============================================================ */
input[type="text"], input[type="search"], .search-input {
  background: rgba(0,0,0,0.3) !important;
  color: var(--m-cream) !important;
  border-color: rgba(212,241,90,0.20) !important;
}
input[type="text"]::placeholder, input[type="search"]::placeholder {
  color: rgba(251,248,242,0.4) !important;
}

/* ============================================================
   12. MODAL DETAIL — sombre
   ============================================================ */
.detail-modal {
  background: linear-gradient(180deg, #0e1c19, #0a1614) !important;
  color: var(--m-cream) !important;
  border: 1px solid rgba(212,241,90,0.15);
}
.detail-header {
  background: linear-gradient(180deg, rgba(212,241,90,0.06), transparent) !important;
  border-bottom: 1px solid rgba(212,241,90,0.18) !important;
}
.detail-close {
  background: rgba(0,0,0,0.5) !important;
  color: var(--m-cream) !important;
  border-color: var(--m-cream) !important;
}
.detail-close:hover {
  background: var(--m-lime) !important;
  color: var(--m-forest) !important;
  border-color: var(--m-lime) !important;
}
.detail-section {
  border-color: rgba(212,241,90,0.12) !important;
}
.detail-section h3 {
  color: var(--m-cream) !important;
  border-bottom-color: rgba(212,241,90,0.18) !important;
}
.detail-section p {
  color: rgba(251,248,242,0.85) !important;
}
.detail-npk-bars {
  background: rgba(0,0,0,0.3) !important;
  border-color: rgba(212,241,90,0.12) !important;
}
.detail-npk-cell {
  border-color: rgba(212,241,90,0.10) !important;
}

/* ============================================================
   13. TERMES (glossaire inline)
   ============================================================ */
.term {
  color: var(--m-lime) !important;
  border-bottom: 1px dashed var(--m-lime) !important;
}
.term:hover {
  background: rgba(212,241,90,0.10) !important;
  color: var(--m-cream) !important;
}

/* ============================================================
   14. RACINES — opacité un peu boostée sur fond sombre
   ============================================================ */
.wr-roots { opacity: 0.55 !important; }
.wr-soil { opacity: 0.35 !important; }

/* ============================================================
   15. LISERÉ GAUCHE & BANDEAU HAUT — couleurs vives sur sombre
   ============================================================ */
.page.fam-minerales::before,
.page.fam-vegetales::before,
.page.fam-animales::before,
.page.fam-specifiques::before {
  height: 5px !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--fam-accent) 60%, transparent);
}
.page:not(.fam-minerales):not(.fam-vegetales):not(.fam-animales):not(.fam-specifiques)::before {
  box-shadow: 0 0 14px rgba(212,241,90,0.5);
}

/* ============================================================
   16. SCROLLBAR — verre teinté sombre
   ============================================================ */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.3) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--m-lime), var(--m-emerald)) !important;
  border: 3px solid #0a0c0d !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--m-saffron), var(--m-clay)) !important;
}

/* ============================================================
   17. TITRES DE SECTION — gradients vifs lisibles sur fond sombre
   (corrige le texte transparent/illisible "N · P", etc.)
   ============================================================ */
.page .section-title,
.page.fam-minerales .section-title,
.page.fam-vegetales .section-title,
.page.fam-animales .section-title,
.page.fam-specifiques .section-title,
.page:not(.fam-minerales):not(.fam-vegetales):not(.fam-animales):not(.fam-specifiques) .section-title {
  background: linear-gradient(100deg, #ffffff 0%, var(--fam-accent, var(--m-lime)) 55%, #ffffff 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.page.fam-minerales   { --fam-accent: var(--m-saffron); }
.page.fam-vegetales   { --fam-accent: var(--m-lime); }
.page.fam-animales    { --fam-accent: var(--m-clay); }
.page.fam-specifiques { --fam-accent: var(--m-saffron); }

/* Titres simples & autres intitulés — cream lisible */
.page h1, .page h2, .page h3, .page h4,
.page .chapter-title, .page .entry-title,
.page .display {
  color: var(--m-cream) !important;
}
.page .chapter-title em, .page .display em { color: var(--m-lime) !important; }

/* ============================================================
   18. CARTES MATIÈRES — texte clair garanti sur fond sombre
   (corrige tout reste de blanc-sur-blanc / sombre-sur-sombre)
   ============================================================ */
.page .fiche {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(212,241,90,0.14) !important;
}
.page .fiche .fiche-title,
.page .fiche .fiche-name {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}
.page .fiche .fiche-subtitle,
.page .fiche .fiche-family {
  color: var(--m-lime) !important;
  -webkit-text-fill-color: var(--m-lime) !important;
}
.page .fiche .fiche-body,
.page .fiche .fiche-body p,
.page .fiche .fiche-stat-value,
.page .fiche .fiche-sec-v {
  color: rgba(251,248,242,0.9) !important;
  -webkit-text-fill-color: rgba(251,248,242,0.9) !important;
}
.page .fiche .fiche-stat-label,
.page .fiche .fiche-sec-k,
.page .fiche .fiche-secondary-label {
  color: rgba(251,248,242,0.6) !important;
  -webkit-text-fill-color: rgba(251,248,242,0.6) !important;
}
.page .fiche .fiche-stat,
.page .fiche .fiche-stats,
.page .fiche .fiche-secondary {
  background: rgba(0,0,0,0.28) !important;
  border-color: rgba(212,241,90,0.12) !important;
}
.page .fiche .fiche-stat-value { color: var(--m-lime) !important; -webkit-text-fill-color: var(--m-lime) !important; }

/* ============================================================
   19. MODALE FICHE DÉTAILLÉE — surfaces sombres, texte clair
   (corrige le blanc-sur-beige à l'ouverture d'une carte)
   ============================================================ */
.detail-modal {
  background: linear-gradient(180deg, #0e1c19, #0a1614) !important;
  color: var(--m-cream) !important;
  border: 1px solid rgba(212,241,90,0.16) !important;
}
.detail-header {
  background: linear-gradient(180deg, rgba(212,241,90,0.07), transparent) !important;
  border-bottom: 1px solid rgba(212,241,90,0.18) !important;
}
.detail-title { color: #fff !important; -webkit-text-fill-color:#fff !important; }
.detail-subtitle { color: var(--m-lime) !important; }
.detail-kicker, .detail-famille, .detail-dot { color: rgba(251,248,242,0.6) !important; }
.detail-kicker .eyebrow { color: var(--m-lime) !important; }
.detail-section-title {
  color: var(--m-lime) !important;
  border-bottom-color: rgba(212,241,90,0.18) !important;
}
.detail-section p,
.detail-meta-row,
.detail-soil-ideal {
  color: rgba(251,248,242,0.88) !important;
}
.detail-section p strong,
.detail-meta-row .small-caps { color: #fff !important; }
.detail-npk {
  background: rgba(0,0,0,0.3) !important;
  border-color: rgba(212,241,90,0.14) !important;
}
.detail-npk-cell { border-color: rgba(212,241,90,0.12) !important; }
.detail-npk-label, .detail-npk-unit { color: rgba(251,248,242,0.6) !important; }
.detail-photo-frame {
  background: rgba(0,0,0,0.3) !important;
  border-color: rgba(212,241,90,0.14) !important;
}
.detail-photo-cap { color: rgba(251,248,242,0.6) !important; }
.detail-soil-ideal {
  background: rgba(212,241,90,0.08) !important;
  border-left-color: var(--m-lime) !important;
}
.detail-why { background: rgba(14,124,90,0.16) !important; border-left-color: var(--m-emerald) !important; }
.detail-history { background: rgba(242,167,27,0.12) !important; border-left-color: var(--m-saffron) !important; }
.detail-advice { background: rgba(124,196,216,0.12) !important; border-left-color: var(--m-sky) !important; }
.detail-warning { background: rgba(196,69,28,0.14) !important; border-left-color: var(--m-rust) !important; }
.detail-why p, .detail-history p, .detail-advice p, .detail-warning p { color: rgba(251,248,242,0.9) !important; }
.oligo-chip { background: rgba(255,255,255,0.05) !important; }
.detail-close {
  background: rgba(0,0,0,0.5) !important;
  color: var(--m-cream) !important;
  border-color: rgba(212,241,90,0.3) !important;
}
.detail-close:hover { background: var(--m-lime) !important; color: var(--m-forest) !important; }