/* ============================================================================
   theme-dark-gold.css — palette sombre + accent or.
   Inspirée de la maquette Trading Mastery v5 (1).html.
   ============================================================================ */

:root {
  /* ── Surfaces ──
     `--surface` fully opaque : les tableaux de données (.eq-bt-tbl, .card,
     .adm-stat, etc.) doivent occulter complètement la photo de fond, sinon
     les rangées laissent passer le ballon (visible surtout là où l'image
     est claire). `--surface-2` garde un léger alpha pour les hovers /
     formulaires où un effet glass reste OK. */
  --bg:         #060c08;
  --bg-2:       #0a0e0c;
  --surface:    #08100c;
  --surface-2:  rgba(0,0,0,.78);
  --surface-3:  rgba(255,255,255,.05);

  /* ── Bordures ── */
  --border:     rgba(255,255,255,.08);
  --border-b:   rgba(255,255,255,.18);

  /* ── Accent (or mat) ──
     Adouci de #f0c040 (or vif/néon, trop agressif sur le voile sombre) vers
     #d4af37 (or mat) : moins lumineux, et déjà la valeur de fallback présente
     partout dans le CSS des pages → cohérence. Les dérivés (-dim/-mid/-2)
     suivent la même teinte. */
  --accent:     #d4af37;
  --accent-2:   #b8962a;
  --accent-fg:  #000000;
  --accent-dim: rgba(212,175,55,.10);
  --accent-mid: rgba(212,175,55,.22);

  /* ── Texte ──
     `--text-1` désaturé d'un cran (#ffffff → #e6ebe8) : le blanc pur sur
     le voile sombre + photo de fond saute aux yeux ; un off-white légèrement
     teinté reste lisible sans agresser. */
  --text-1: #e6ebe8;
  --text-2: #d8e0dc;
  --text-3: rgba(255,255,255,.55);

  /* ── Header / nav ── */
  --header-bg:     rgba(6,12,8,.92);
  --header-fg:     #ffffff;
  --header-dim:    rgba(255,255,255,.55);
  --header-border: rgba(255,255,255,.08);
  --nav-bg:        rgba(0,0,0,.65);
  --nav-fg:        #ffffff;
  --nav-dim:       rgba(255,255,255,.55);
  --footer-bg:     rgba(0,0,0,.7);

  /* ── Logo ── */
  --logo-bg: var(--accent);
  --logo-fg: #000000;

  /* ── Statuts ── */
  --accent-green: #00c96e;
  --accent-red:   #e53935;
  --accent-blue:  #2196f3;

  --good-bg: rgba(0,201,110,.18);   --good-fg: #5dfc9a;
  --warn-bg: rgba(244,196,80,.18);  --warn-fg: #ffd966;
  --bad-bg:  rgba(229,57,53,.18);   --bad-fg:  #ff8080;

  /* ── Polices (mêmes dans les 2 thèmes) ── */
  --font-display: 'Bebas Neue', sans-serif;
  /* Corps/données : sans à chasse normale (lisibilité, cf. ancien site) ;
     Barlow Condensed (condensée) abandonnée car « paraissait » trop petite. */
  --font-ui:      system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
}

/* ── Fond global : photo stade + assombrissement pour lisibilité ── */
html, body {
  background:
    linear-gradient(rgba(6,12,8,.75), rgba(6,12,8,.75)),
    var(--bg-url, url('../img/bg-dark.png')) center / cover no-repeat fixed,
    var(--bg);
}

/* ============================================================================
   Overrides « fond image » — depuis l'ajout de la photo en background, les
   panneaux et tableaux dont les composants (accueil.css, match-detail.css…)
   utilisent `var(--bg-elev, rgba(255,255,255,.04))` ou pas de fond du tout
   laissent passer la pelouse → illisible. On rétablit un voile sombre opaque
   sur tous les conteneurs « carte ». Préfixe `html[data-theme="dark-gold"]`
   pour spécificité (0,1,1) : accueil.css / match-detail.css sont chargés
   APRÈS ce fichier (cf. conf/header.php:97-100).
   ============================================================================ */

/* Tokens manquants — résout les fallbacks `var(--bg-elev, …)` / `var(--bg-light, …)`
   qui sinon retombent sur des rgba blancs trop pâles. */
html[data-theme="dark-gold"] {
  --bg-elev:  rgba(8,14,10,.88);
  --bg-light: rgba(255,255,255,.06);
  --win:  var(--good-fg);
  --loss: var(--bad-fg);
}

/* Cartes / panneaux opaques posés sur la photo */
html[data-theme="dark-gold"] .acc-filters,
html[data-theme="dark-gold"] .acc-table-wrap,
html[data-theme="dark-gold"] .acc-rates,
html[data-theme="dark-gold"] .acc-legend,
html[data-theme="dark-gold"] .acc-debug,
html[data-theme="dark-gold"] .search-results,
html[data-theme="dark-gold"] .suggestions {
  background: rgba(8,14,10,.88);
  backdrop-filter: blur(6px);
  border-radius: 6px;
}
/* Dans la lightbox équipe : wrapper transparent, sous-éléments opaques */
html[data-theme="dark-gold"] .search-team-lb .search-results {
  background: transparent;
  backdrop-filter: none;
  border: none;
}
html[data-theme="dark-gold"] .search-team-lb .acc-table-wrap,
html[data-theme="dark-gold"] .search-team-lb .hs-timeline-section,
html[data-theme="dark-gold"] .search-team-lb .search-acc,
html[data-theme="dark-gold"] .search-team-lb .hs-tl-prev-wrap {
  background: rgba(8,14,10,.88);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 14px;
}
html[data-theme="dark-gold"] .search-team-lb .hs-sub {
  background: rgba(8,14,10,.75);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
}

/* Bordure discrète sur le wrap de table pour matérialiser la « carte » */
html[data-theme="dark-gold"] .acc-table-wrap {
  border: 1px solid var(--border);
}

/* En-tête de table : force un noir opaque pour démarquer la ligne d'en-tête
   du voile semi-transparent du wrap. */
html[data-theme="dark-gold"] .acc-table th {
  background: rgba(0,0,0,.55);
}

/* ── Championnats (championnats.php) ──
   `.eq-agenda-tbl` n'a pas de fond et `.ch-col` est un simple grid container :
   chaque colonne devient une carte opaque avec le titre + la table à l'intérieur. */
html[data-theme="dark-gold"] .ch-col {
  background: rgba(8,14,10,.88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
html[data-theme="dark-gold"] .ch-col-title { border-bottom-color: var(--border-b); }

/* ── Backtests : équipes_backtest (.eq-bt-tbl) + championnats_backtest (.ch-bt-tbl)
   Fond noir plein, cascade ceinture-bretelles à tous les niveaux pour bloquer
   tout bleed de la photo. */
html[data-theme="dark-gold"] .eq-bt-tbl,
html[data-theme="dark-gold"] .eq-bt-tbl tbody,
html[data-theme="dark-gold"] .eq-bt-tbl thead,
html[data-theme="dark-gold"] .eq-bt-tbl tr,
html[data-theme="dark-gold"] .eq-bt-tbl th,
html[data-theme="dark-gold"] .eq-bt-tbl td,
html[data-theme="dark-gold"] .eq-bt-tbl tr:hover td:not(.eq-bt-team),
html[data-theme="dark-gold"] .ch-bt-tbl,
html[data-theme="dark-gold"] .ch-bt-tbl tbody,
html[data-theme="dark-gold"] .ch-bt-tbl thead,
html[data-theme="dark-gold"] .ch-bt-tbl tr,
html[data-theme="dark-gold"] .ch-bt-tbl th,
html[data-theme="dark-gold"] .ch-bt-tbl td,
html[data-theme="dark-gold"] .ch-bt-tbl tr:hover td {
  background: #000 !important;
}
/* Le fond noir opaque ci-dessus s'applique aussi au survol, ce qui supprimait
   tout retour visuel sur la ligne pointée. On le rétablit avec une teinte
   OPAQUE (surtout pas d'alpha : la photo de fond repasserait au travers),
   à peine plus claire que le #000 — assez pour suivre la ligne des yeux
   sans attirer l'attention.
   Le `:not(.eq-bt-team)` de la règle ci-dessus compte la spécificité de son
   argument : il faut donc le reprendre ici (+ `tbody`) pour l'emporter, sinon
   seule la colonne équipe — la seule qu'elle exclut — recevrait la teinte. */
html[data-theme="dark-gold"] .eq-bt-tbl tbody tr:hover td:not(.eq-bt-team),
html[data-theme="dark-gold"] .eq-bt-tbl tbody tr:hover td.eq-bt-team,
html[data-theme="dark-gold"] .ch-bt-tbl tbody tr:hover td:not(.ch-bt-name),
html[data-theme="dark-gold"] .ch-bt-tbl tbody tr:hover td.ch-bt-name {
  background: #0e1712 !important;
}

html[data-theme="dark-gold"] .eq-bt-section-h,
html[data-theme="dark-gold"] .eq-bt-legend {
  background: rgba(8,14,10,.78);
  padding: 6px 10px;
  border-radius: 4px;
}

/* ── Favoris (favoris.php) ──
   `.fav-list` (wrapper de toute la page connectée) et `.fav-empty` (états
   non-connecté / sans favori, en standalone) n'ont aucune règle CSS : carte. */
html[data-theme="dark-gold"] .fav-list,
html[data-theme="dark-gold"] .fav-empty {
  background: rgba(8,14,10,.88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
}
/* `.fav-slot-empty` est imbriqué dans `.fav-list` → reset visuel pour éviter
   l'effet « carte dans carte ». */
html[data-theme="dark-gold"] .fav-list .fav-empty {
  background: transparent;
  backdrop-filter: none;
  border: 0;
  padding: 8px 0;
}

/* ── Overrides Paramètres & Admin : SUPPRIMÉS ──
   `parametres.css` et `admin.css` ont été refondus sur les tokens (bordures
   `--border`, texte `--text-1/2/3`, surfaces `--surface*`). Les overrides
   `html[data-theme="dark-gold"] .pm-* / .adm-*` qui rétablissaient bordure
   neutre et soft-white ne sont plus nécessaires (cf. DESIGN_SYSTEM.md §6.4). */

/* ── Inputs / selects : fond blanc + texte noir ──
   Sur le fond sombre + photo, les champs de formulaire en `--surface` quasi-noir
   se confondent avec le background. Fond blanc opaque pour lisibilité maximale. */
html[data-theme="dark-gold"] input[type="text"],
html[data-theme="dark-gold"] input[type="email"],
html[data-theme="dark-gold"] input[type="password"],
html[data-theme="dark-gold"] input[type="number"],
html[data-theme="dark-gold"] input[type="search"],
html[data-theme="dark-gold"] input[type="date"],
html[data-theme="dark-gold"] select,
html[data-theme="dark-gold"] textarea {
  background: #fff;
  color: #111;
  border-color: var(--border-b);
}
/* Sur fond blanc forcé, le calendrier natif WebKit doit rester en clair
 * (sinon l'icône + le texte de la date héritent du color-scheme sombre). */
html[data-theme="dark-gold"] input[type="date"] { color-scheme: light; }
html[data-theme="dark-gold"] input::placeholder,
html[data-theme="dark-gold"] textarea::placeholder { color: #888; }
html[data-theme="dark-gold"] select option { background: #fff; color: #111; }

/* ════════════════════════════════════════════════════════════════
   Fiche match — en-tête sombre (override du bandeau or)
   En dark, le gradient or pleine largeur des `.m-team-name`
   (match-detail.css l.414-427) sature l'œil. On le remplace par un
   voile noir légèrement opacifié — plus sombre vers le centre pour se
   fondre avec la carte VS (`--surface-2`) — l'or ne subsistant qu'en
   accents fins : filet supérieur, titres d'équipe, chips V/N/D.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark-gold"] .m-team-name.home {
  background: linear-gradient(90deg, #102b1d 0%, #0a1c13 100%);
}
html[data-theme="dark-gold"] .m-team-name.away {
  background: linear-gradient(90deg, #0a1c13 0%, #102b1d 100%);
}
/* Carte VS centrale : même vert que le bord intérieur des bandes
   (#0a1c13) + suppression des liserés latéraux → bande homogène. */
html[data-theme="dark-gold"] .m-header > div:not(.m-team-name) {
  background: #0a1c13;
  border-left-color: transparent;
  border-right-color: transparent;
}
/* Filet supérieur or atténué : marque l'en-tête sans le bandeau plein. */
html[data-theme="dark-gold"] .m-header { border-top-width: 3px; }
/* L'accent or migre du fond vers le texte : titre d'équipe en or. */
html[data-theme="dark-gold"] .m-team-title { color: var(--accent); }
/* Chips position / côté : sur fond or le noir transparent suffisait ;
   sur fond sombre il faut un voile clair pour rester lisible. */
html[data-theme="dark-gold"] .m-team-pos,
html[data-theme="dark-gold"] .m-team-side {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

/* ── Lightboxes (fiche match / équipe) : fond noir plein ──
   La photo de stade en fond rendait la fiche « sale » et illisible en dark.
   On pose un noir quasi-plein sur toute la lightbox : les cartes internes
   (tables, accordéons) restent légèrement plus claires et ressortent. */
html[data-theme="dark-gold"] .m-lightbox,
html[data-theme="dark-gold"] .search-team-lb {
  background: #07100b;
}