/**
 * tbr-skin.css — Habillage « The Black Room / News Room » pour GNewsalyzer V2.
 *
 * Calque PUREMENT ADDITIF, à charger EN DERNIER (après design-tokens.css,
 * material-components.css ET Tailwind). Il ne touche à aucun markup ni à
 * aucune logique : il se contente de
 *   1. redéfinir les tokens Material Design 3 (--md-sys-color-*) en thème
 *      sombre TBR → tout le chrome Material (sidebar, topbar, cartes,
 *      boutons, grilles) bascule d'un coup ;
 *   2. neutraliser les classes utilitaires Tailwind « claires » les plus
 *      utilisées (bg-white, text-gray-*, border-gray-*) vers la palette TBR.
 *
 * RÉVERSIBLE À 100 % : retirer le <link> de ce fichier dans les deux layouts
 * (includes/layout-wrapper.php et app/views/layouts/default.php) rétablit le
 * design Material clair d'origine. Aucun fichier d'origine n'est modifié.
 *
 * Palette source : News Room (styles/tokens.css).
 */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   1. PALETTE TBR — variables propres au skin
   ============================================================ */
:root {
  --tbr-bg:          #000000; /* fond global              */
  --tbr-surface:     #15181C; /* cartes / panneaux        */
  --tbr-surface-2:   #1B1E22; /* surfaces secondaires     */
  --tbr-surface-3:   #22262C; /* header / topbar / hover  */
  --tbr-line:        #30343A; /* bordures discrètes       */
  --tbr-line-2:      #3A3F45; /* bordures marquées        */
  --tbr-text:        #FFFFFF; /* texte primaire           */
  --tbr-text-2:      #9AA0A6; /* texte secondaire         */
  --tbr-text-3:      #6B7075; /* texte tertiaire / hint   */
  --tbr-accent:      #F50000; /* rouge signal TBR         */
  --tbr-accent-2:    #FF4D4D; /* rouge clair (texte/hover)*/
  --tbr-accent-bg:   #1E0606; /* fond teinté accent       */
  --tbr-accent-line: rgba(245, 0, 0, 0.45);
  --tbr-glow:        0 0 0 1px var(--tbr-accent-line), 0 0 18px -4px rgba(245, 0, 0, 0.55);
}

/* ============================================================
   2. OVERRIDE DES TOKENS MATERIAL DESIGN 3 → thème sombre TBR
   (redéfinit les mêmes variables que design-tokens.css ; comme ce
    fichier est chargé après, ce sont ces valeurs qui s'appliquent —
    tout composant .md-* en hérite sans modification.)
   ============================================================ */
:root {
  /* Primaire : violet Material → rouge TBR */
  --md-sys-color-primary:                 var(--tbr-accent) !important;
  --md-sys-color-on-primary:              #FFFFFF !important;
  --md-sys-color-primary-container:       var(--tbr-accent-bg) !important;
  --md-sys-color-on-primary-container:    #FF9D9D !important;

  /* Secondaire / tertiaire : neutres sombres (accents discrets) */
  --md-sys-color-secondary:               #B8BDC2 !important;
  --md-sys-color-on-secondary:            #0A0A0A !important;
  --md-sys-color-secondary-container:     #17191B !important;
  --md-sys-color-on-secondary-container:  #D7DBDF !important;
  --md-sys-color-tertiary:                var(--tbr-accent-2) !important;
  --md-sys-color-on-tertiary:             #0A0A0A !important;
  --md-sys-color-tertiary-container:      #1E0606 !important;
  --md-sys-color-on-tertiary-container:   #FFC2C2 !important;

  /* Fond & surfaces */
  --md-sys-color-background:              var(--tbr-bg) !important;
  --md-sys-color-on-background:           var(--tbr-text) !important;
  --md-sys-color-surface:                 var(--tbr-surface) !important;
  --md-sys-color-on-surface:              var(--tbr-text) !important;
  --md-sys-color-surface-variant:         var(--tbr-surface-2) !important;
  --md-sys-color-on-surface-variant:      var(--tbr-text-2) !important;

  /* Contour & erreur */
  --md-sys-color-outline:                 var(--tbr-line-2) !important;
  --md-sys-color-error:                   #FF5C5C !important;
  --md-sys-color-on-error:                #1A0000 !important;

  /* Typographie : Roboto → Figtree (mono = JetBrains Mono ailleurs) */
  --md-sys-typescale-font-family: 'Figtree', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;

  /* Élévations : les ombres claires deviennent invisibles sur fond noir.
     On les remplace par un liseré clair (pour détacher les surfaces) +
     une ombre portée profonde pour les niveaux élevés. */
  --md-sys-elevation-0: none !important;
  --md-sys-elevation-1: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  --md-sys-elevation-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  --md-sys-elevation-3: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 12px 32px rgba(0, 0, 0, 0.7) !important;
  --md-sys-elevation-4: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 44px rgba(0, 0, 0, 0.75) !important;
  --md-sys-elevation-5: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 56px rgba(0, 0, 0, 0.8) !important;
}

/* ============================================================
   3. BASE
   ============================================================ */
html,
body {
  background-color: var(--tbr-bg) !important;
  color: var(--tbr-text);
  font-family: 'Figtree', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

::selection {
  background: var(--tbr-accent);
  color: #fff;
}

/* Scrollbar discrète et sombre */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tbr-line-2) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--tbr-line-2);
  border-radius: 6px;
  border: 2px solid var(--tbr-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #3a3e42; }

/* ============================================================
   4. OVERRIDE DES CLASSES TAILWIND « CLAIRES »
   (chargé après Tailwind ; !important pour primer sur les éventuels
    styles inline ou utilitaires concurrents.)
   ============================================================ */

/* Fonds */
.bg-white            { background-color: var(--tbr-surface) !important; color: var(--tbr-text); }
.bg-gray-50,
.bg-gray-100         { background-color: var(--tbr-surface-2) !important; }
.bg-gray-200,
.bg-gray-300         { background-color: var(--tbr-surface-3) !important; }
.bg-gray-400,
.bg-gray-500,
.bg-gray-600,
.bg-gray-700,
.bg-gray-800,
.bg-gray-900         { background-color: var(--tbr-surface-3) !important; }

/* Textes (clair → palette TBR par intensité) */
.text-gray-900,
.text-gray-800       { color: var(--tbr-text) !important; }
.text-gray-700,
.text-gray-600       { color: var(--tbr-text-2) !important; }
.text-gray-500,
.text-gray-400,
.text-gray-300,
.text-gray-200       { color: var(--tbr-text-3) !important; }
/* text-white reste blanc (souvent posé sur des fonds colorés) */

/* Bordures */
.border-gray-100,
.border-gray-200,
.border-gray-300     { border-color: var(--tbr-line) !important; }
.border-gray-400,
.border-gray-500     { border-color: var(--tbr-line-2) !important; }

/* Accents : bleus / indigos / violets Tailwind → rouge TBR */
.bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
.bg-purple-500, .bg-purple-600, .bg-purple-700,
.bg-violet-500, .bg-violet-600, .bg-violet-700 {
  background-color: var(--tbr-accent) !important;
  color: #fff !important;
}
.text-blue-500, .text-blue-600, .text-blue-700,
.text-indigo-500, .text-indigo-600, .text-indigo-700,
.text-purple-500, .text-purple-600, .text-purple-700,
.text-violet-500, .text-violet-600, .text-violet-700 {
  color: var(--tbr-accent-2) !important;
}
.border-blue-500, .border-indigo-500, .border-purple-500,
.border-blue-600, .border-indigo-600, .border-purple-600 {
  border-color: var(--tbr-accent-line) !important;
}

/* Chips / fonds teintés clairs accent */
.bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100,
.bg-purple-50, .bg-purple-100, .bg-violet-50, .bg-violet-100 {
  background-color: var(--tbr-accent-bg) !important;
  color: var(--tbr-accent-2) !important;
}

/* Ombres Tailwind → liseré sobre (sinon invisibles sur fond noir) */
.shadow-sm  { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) !important; }
.shadow,
.shadow-md  { box-shadow: var(--md-sys-elevation-1) !important; }
.shadow-lg,
.shadow-xl,
.shadow-2xl { box-shadow: var(--md-sys-elevation-2) !important; }

/* Champs de formulaire */
input, select, textarea {
  background-color: var(--tbr-surface-2);
  color: var(--tbr-text);
  border-color: var(--tbr-line-2);
}
input::placeholder, textarea::placeholder { color: var(--tbr-text-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--tbr-accent);
  box-shadow: 0 0 0 2px var(--tbr-accent-line);
}

/* ============================================================
   5. TOUCHES TBR (signature)
   ============================================================ */

/* Accent rouge sur les liens au survol */
/* Liens (palette News Room) : ils HÉRITENT de la couleur de leur texte
   — un titre blanc reste blanc, du texte gris reste gris — et passent au
   rouge au survol. Le rouge est un ACCENT, pas la couleur des liens.
   Les boutons-liens et boutons d'action gardent leur propre style. */
a { transition: color 0.15s ease; }
a:not([class*="btn"]):not([class*="button"]):not(.md-button):not(.action-btn):not([class*="chip"]):not(.topic-tag):not(.category-tag):not(.source-link) {
  color: inherit !important;
}
a:not([class*="btn"]):not([class*="button"]):not(.md-button):not(.action-btn):not([class*="chip"]):not(.topic-tag):not(.category-tag):not(.source-link):hover {
  color: var(--tbr-accent) !important;
}

/* ============================================================
   7. COMPOSANTS GNEWSALYZER (chips, catégories, sources, boutons)
   ============================================================ */

/* Chips topics / catégories : pastille sombre lisible au repos,
   accent rouge + texte BLANC au survol (corrige le « rouge sur rouge »). */
.topic-tag, .category-tag {
  background: var(--tbr-surface-3) !important;
  color: var(--tbr-text-2) !important;
  border: 1px solid var(--tbr-line) !important;
  border-radius: 999px;
  transition: all .15s ease;
}
.topic-tag:hover, .category-tag:hover {
  background: var(--tbr-accent) !important;
  border-color: var(--tbr-accent) !important;
  color: #fff !important;
}

/* Sources : couleur accent, repérables (palette News Room) */
.source-link { color: var(--tbr-accent-2) !important; font-weight: 600; text-decoration: none; }
.source-link:hover { color: #fff !important; }

/* Icônes de métadonnées : touche de couleur rouge */
.article-meta i, .source-info i, .article-content .fas, .article-content .far { color: var(--tbr-accent) !important; }

/* Boutons d'action sous l'image : pilules sombres modernes, accent au survol */
.action-btn {
  background: var(--tbr-surface-3) !important;
  border: 1px solid var(--tbr-line) !important;
  color: var(--tbr-text-2) !important;
  border-radius: 10px !important;
  min-width: 36px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.action-btn:hover {
  background: var(--tbr-accent) !important;
  border-color: var(--tbr-accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.action-btn i { color: inherit !important; }
/* le bouton « supprimer » reste rouge danger */
.action-btn[style*="error"] { color: #FF6B6B !important; }
.action-btn[style*="error"]:hover { background: #FF5C5C !important; border-color: #FF5C5C !important; color: #fff !important; }

/* ===== Hero « Discover - Beta » : bordeaux uni (plus de dégradé rouge vif) =====
   Sélecteurs renforcés pour primer sur le <style> de discover-styles.php. */
body .discover-page-header,
.md-content-section .discover-page-header {
  background: #5A1322 !important;
  background-image: none !important;
  border: 1px solid #7A1A2E !important;
}

/* ===== Header : 3 liens uniformisés (pilules sombres modernes, accent TBR) =====
   Sélecteurs renforcés pour primer sur le <style> de topbar.php. */
.md-topbar-actions .md-topbar-cdm,
.md-topbar-actions .md-topbar-chatbot,
.md-topbar-actions .md-topbar-cta {
  background: var(--tbr-surface-3) !important;
  background-image: none !important;
  border: 1px solid var(--tbr-line) !important;
  color: var(--tbr-text) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: transform .12s ease, background .15s ease, border-color .15s ease !important;
}
.md-topbar-actions .md-topbar-cdm:hover,
.md-topbar-actions .md-topbar-chatbot:hover,
.md-topbar-actions .md-topbar-cta:hover {
  background: var(--tbr-surface-2) !important;
  border-color: var(--tbr-accent) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.md-topbar-actions .md-topbar-cdm-icon,
.md-topbar-actions .md-topbar-chatbot-icon,
.md-topbar-actions .md-topbar-cta-icon { color: var(--tbr-accent) !important; }
/* badges NEW / BETA : pastille accent discrète */
.md-topbar-cdm-badge, .md-topbar-chatbot-badge {
  background: var(--tbr-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* Focus visible cohérent */
:focus-visible {
  outline: 2px solid var(--tbr-accent);
  outline-offset: 2px;
}

/* Barre d'accent sur les cartes Material au survol (rappel News Room) */
.md-card:hover { box-shadow: var(--md-sys-elevation-2), inset 3px 0 0 var(--tbr-accent); }

/* ============================================================
   6. FILET « LEGACY INLINE »
   Certaines pages historiques codent des couleurs en dur dans des
   attributs style="" (≈ 20 pages). Une règle externe !important prime
   sur un style inline NON-!important : on neutralise donc ici les fonds
   clairs ET les textes gris foncés codés en dur, par paires cohérentes,
   pour éviter tout « blanc sur blanc » ou « foncé sur sombre ».
   On NE touche PAS aux fonds sémantiques (rouge #B71C1C, orange #FF6B35,
   alertes jaunes/rouges claires) : ils restent volontairement colorés.
   ============================================================ */

/* Fonds clairs en dur → surface sombre */
[style*="background:white"],   [style*="background: white"],
[style*="background-color:white"], [style*="background-color: white"],
[style*="background:#fff"],     [style*="background: #fff"],
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="#f9fafb"], [style*="#F9FAFB"],
[style*="#f3f4f6"], [style*="#F3F4F6"],
[style*="#f8fafc"], [style*="#F8FAFC"],
[style*="#fafafa"], [style*="#FAFAFA"] {
  background-color: var(--tbr-surface) !important;
}

/* Textes gris foncés en dur → texte primaire clair
   (#111827 = gray-900, #1f2937 = gray-800, #333/#111/#000) */
[style*="color:#111827"], [style*="color: #111827"],
[style*="color:#1f2937"], [style*="color: #1f2937"],
[style*="color:#1a1a1a"], [style*="color: #1a1a1a"],
[style*="color:#333"],    [style*="color: #333"],
[style*="color:#111"],    [style*="color: #111"],
[style*="color:#000"],    [style*="color: #000"] {
  color: var(--tbr-text) !important;
}

/* Textes gris moyens en dur → texte secondaire
   (#374151 = gray-700, #4b5563 = gray-600, #6b7280 = gray-500) */
[style*="color:#374151"], [style*="color: #374151"],
[style*="color:#4b5563"], [style*="color: #4b5563"],
[style*="color:#6b7280"], [style*="color: #6b7280"] {
  color: var(--tbr-text-2) !important;
}

/* Bordures claires en dur → ligne discrète */
[style*="1px solid #e"], [style*="1px solid #d"],
[style*="1px solid rgba(0,0,0"], [style*="1px solid rgba(0, 0, 0"] {
  border-color: var(--tbr-line) !important;
}

/* ── google_news.php : encart « articles liés » (flux Google News RSS) ──────
   Le <style> de la page code background:#ffffff EN DUR (hors portée du filet
   « inline » du skin) ; combiné à la règle color:inherit sur les <a>, les
   titres blancs devenaient invisibles sur fond blanc (seuls les <font> gris
   des sources restaient, décalés). On rebascule l'encart en sombre. */
.related-articles {
  background: var(--tbr-surface-2) !important;
  border-color: var(--tbr-line) !important;
  color: var(--tbr-text);
}
.related-articles li {
  border-bottom-color: var(--tbr-line) !important;
}