/* ============================================================
   Grand Gaz — Mode Clair (v3)
   Inversion complète du mode sombre de style_refonte_v2.css
   ============================================================ */

/* ── 1. Variables globales ────────────────────────────────── */
/* Palette "confort" : gris chauds et texte anthracite plutôt que blanc pur / noir pur.
   Luminance des surfaces réduite d'environ 8 %, contrastes toujours >= WCAG AA (texte principal ~14:1).
   Sélecteur renforcé (:root:root) : les blocs de variables de style_refonte_v2.css ont une spécificité
   plus élevée et écraseraient sinon ces valeurs. */
:root:root[data-theme='light'],
html[data-theme='light'] {
  /* Palette de base (à modifier ici pour ajuster tout le mode clair) */
  --lm-bg:      #e4e3df;   /* fond de page */
  --lm-bg2:     #dcdad5;   /* fond en retrait, séparateurs pleins */
  --lm-card:    #f2f1ed;   /* cartes, panneaux, barre latérale */
  --lm-card2:   #eceae6;   /* champs, boutons secondaires, survols */
  --lm-surface: #f7f6f3;   /* éléments surélevés (le plus clair : jamais de blanc pur) */
  --lm-line:    rgba(36, 38, 44, 0.11);
  --lm-ink:     #24262b;   /* texte principal */
  --lm-ink2:    #43474f;   /* texte secondaire */
  --lm-muted:   #5d626b;   /* libellés, aides */
  --lm-shadow:  0 6px 22px rgba(36, 38, 44, 0.07);

  /* Variables historiques du site, branchées sur la palette */
  --gg-bg:    var(--lm-bg);
  --gg-bg2:   var(--lm-bg2);
  --dark-bg:  var(--lm-bg);
  --gg-card:  rgba(247, 246, 243, 0.86);
  --gg-card2: rgba(247, 246, 243, 0.96);
  --card-bg:  var(--lm-card);
  --glass-bg: rgba(36, 38, 44, 0.05);
  --gg-line:      var(--lm-line);
  --border-color: var(--lm-line);
  --gg-text:   var(--lm-ink);
  --gg-soft:   var(--lm-ink2);
  --gg-muted:  var(--lm-muted);
  --text-white:var(--lm-ink);
  --text-gray: var(--lm-muted);
  --pure-white:#ffffff;
  --gg-shadow: var(--lm-shadow);
  --skeleton-bg: rgba(36, 38, 44, 0.07);

  /* Live Track */
  --lt-bg:      var(--lm-bg);
  --lt-surface: var(--lm-surface);
  --lt-border:  rgba(36, 38, 44, 0.10);
  --lt-border2: rgba(36, 38, 44, 0.16);
  --lt-white:   var(--lm-ink);
  --lt-gray:    var(--lm-muted);

  /* Misc */
  --overlay: linear-gradient(rgba(228,227,223,0.9), rgba(228,227,223,0.95));
  color-scheme: light;
}

/* ── 2. Body & fond ───────────────────────────────────────── */
html[data-theme='light'] body {
  background: var(--lm-bg) !important;
  color: var(--lm-ink) !important;
}

/* Grille de fond (body::before) */
html[data-theme='light'] body::before {
  background:
    linear-gradient(90deg, rgba(36,38,44,0.025) 1px, transparent 1px),
    linear-gradient(rgba(36,38,44,0.018) 1px, transparent 1px) !important;
  mask-image: none !important;
}

/* ── 3. Navigation latérale ───────────────────────────────── */
html[data-theme='light'] nav#main-nav {
  background: var(--lm-card) !important;
  border-right: 1px solid rgba(36,38,44,0.10) !important;
  box-shadow: 4px 0 20px rgba(36,38,44,0.06) !important;
}

html[data-theme='light'] .nav-header {
  background: rgba(36,38,44,0.025) !important;
  border-bottom: 1px solid rgba(36,38,44,0.10) !important;
}

html[data-theme='light'] .nav-header h1 {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] .nav-header h1 span {
  color: var(--team-color) !important;
  text-shadow: none !important;
}

html[data-theme='light'] .search-container {
  background: var(--lm-card2) !important;
  border: 1px solid rgba(36,38,44,0.10) !important;
}

html[data-theme='light'] .search-container i {
  color: var(--lm-muted) !important;
}

html[data-theme='light'] .search-container input {
  color: var(--lm-ink) !important;
  background: transparent !important;
}

html[data-theme='light'] .nav-section-title {
  color: var(--lm-muted) !important;
  border-bottom-color: rgba(36,38,44,0.08) !important;
}

html[data-theme='light'] nav a {
  color: var(--lm-ink2) !important;
}

html[data-theme='light'] nav a:hover,
html[data-theme='light'] nav a.active {
  background: var(--lm-card2) !important;
  border-color: rgba(36,38,44,0.10) !important;
  color: var(--team-color) !important;
}

html[data-theme='light'] .nav-footer .tiktok-link,
html[data-theme='light'] .tiktok-link {
  background: var(--lm-card2) !important;
  border: 1px solid rgba(36,38,44,0.10) !important;
  color: var(--lm-ink2) !important;
}

html[data-theme='light'] .sidebar-footer-text {
  border-top: 1px solid rgba(36,38,44,0.08) !important;
  color: #9ca3af !important;
}

/* ── 4. Topbar ────────────────────────────────────────────── */
html[data-theme='light'] .top-bar {
  background: var(--lm-surface) !important;
  border-bottom: 2px solid var(--team-color) !important;
  box-shadow: 0 2px 12px rgba(36,38,44,0.06) !important;
}

html[data-theme='light'] .top-bar-right > a,
html[data-theme='light'] .top-bar-right > button,
html[data-theme='light'] .points-tag,
html[data-theme='light'] .user-tag {
  background: var(--lm-card2) !important;
  border: 1px solid rgba(36,38,44,0.10) !important;
  color: var(--lm-ink) !important;
}

html[data-theme='light'] .top-bar-right span,
html[data-theme='light'] .user-tag span {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] .points-tag {
  color: var(--team-color) !important;
  font-weight: 900 !important;
}

html[data-theme='light'] .burger-btn span {
  background: var(--lm-ink) !important;
}

/* ── 5. Cards / panels ────────────────────────────────────── */
html[data-theme='light'] .f1-card,
html[data-theme='light'] .license-card,
html[data-theme='light'] .news-card,
html[data-theme='light'] .league-card,
html[data-theme='light'] .cal-card,
html[data-theme='light'] .result-matrix-card,
html[data-theme='light'] .compare-card,
html[data-theme='light'] .card-tech,
html[data-theme='light'] .gg-card,
html[data-theme='light'] .gg-panel,
html[data-theme='light'] .gg-hero-card,
html[data-theme='light'] .gg-home-main,
html[data-theme='light'] .gg-home-race-card,
html[data-theme='light'] .gg-stat-card,
html[data-theme='light'] .hof-card,
html[data-theme='light'] .badge-card {
  background: var(--lm-card) !important;
  border: 1px solid rgba(36,38,44,0.09) !important;
  box-shadow: 0 2px 12px rgba(36,38,44,0.05) !important;
  color: var(--lm-ink) !important;
  backdrop-filter: none !important;
}

html[data-theme='light'] .gg-preview-card {
  background: rgba(36,38,44,0.03) !important;
  border: 1px solid rgba(36,38,44,0.09) !important;
}

/* ── 6. Typographie générale ──────────────────────────────── */
html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3,
html[data-theme='light'] h4,
html[data-theme='light'] h5,
html[data-theme='light'] h6,
html[data-theme='light'] strong,
html[data-theme='light'] b {
  color: var(--lm-ink) !important;
  text-shadow: none !important;
}

html[data-theme='light'] p,
html[data-theme='light'] li {
  color: var(--lm-ink) !important;
  text-shadow: none !important;
}

html[data-theme='light'] .gg-muted,
html[data-theme='light'] .gg-label,
html[data-theme='light'] .gg-cd-label,
html[data-theme='light'] .nav-section-title,
html[data-theme='light'] .f1-card p {
  color: var(--lm-muted) !important;
  text-shadow: none !important;
}

html[data-theme='light'] .gg-value,
html[data-theme='light'] .gg-cd-number {
  color: var(--lm-ink) !important;
  text-shadow: none !important;
}

html[data-theme='light'] .gg-soft,
html[data-theme='light'] .gg-preview-label,
html[data-theme='light'] .gg-lead {
  color: var(--lm-ink2) !important;
}

/* ── 7. Tableaux ──────────────────────────────────────────── */
html[data-theme='light'] .gg-table,
html[data-theme='light'] .table-responsive table,
html[data-theme='light'] .table-wrap table,
html[data-theme='light'] section table {
  background: var(--lm-surface) !important;
}

html[data-theme='light'] th {
  color: var(--lm-ink2) !important;
  background: var(--lm-card) !important;
  border-bottom: 2px solid rgba(36,38,44,0.10) !important;
  text-shadow: none !important;
}

html[data-theme='light'] td {
  color: var(--lm-ink) !important;
  border-bottom: 1px solid rgba(36,38,44,0.07) !important;
  text-shadow: none !important;
}

html[data-theme='light'] td,
html[data-theme='light'] th {
  border-color: rgba(36,38,44,0.08) !important;
}

html[data-theme='light'] .standings-row:nth-child(even),
html[data-theme='light'] .legend-row,
html[data-theme='light'] .legend-stats-col {
  background: rgba(36,38,44,0.025) !important;
}

html[data-theme='light'] .legend-row {
  border-color: rgba(36,38,44,0.07) !important;
  backdrop-filter: none !important;
}

html[data-theme='light'] .legend-info-col {
  background: transparent !important;
}

/* ── 8. Formulaires ───────────────────────────────────────── */
html[data-theme='light'] input,
html[data-theme='light'] select,
html[data-theme='light'] textarea {
  background: var(--lm-card) !important;
  border: 1px solid rgba(36,38,44,0.14) !important;
  color: var(--lm-ink) !important;
}

html[data-theme='light'] option {
  background: var(--lm-surface);
  color: var(--lm-ink);
}

html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder {
  color: #9ca3af !important;
}

/* ── 9. Composants GG spécifiques ─────────────────────────── */

/* Timer countdown */
html[data-theme='light'] .gg-timer div,
html[data-theme='light'] .gg-cd-item {
  background: #d8dce8 !important;
  border-color: rgba(36,38,44,0.08) !important;
  box-shadow: inset 0 1px 3px rgba(36,38,44,0.06) !important;
}

html[data-theme='light'] .gg-timer b,
html[data-theme='light'] .gg-cd-number {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] .gg-timer span,
html[data-theme='light'] .gg-cd-label {
  color: var(--lm-muted) !important;
}

/* Events / timeline */
html[data-theme='light'] .gg-event {
  background: var(--lm-card) !important;
  border-color: rgba(36,38,44,0.07) !important;
}

html[data-theme='light'] .gg-event h4 {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] .gg-event p {
  color: var(--lm-muted) !important;
}

/* Kicker */
html[data-theme='light'] .gg-kicker {
  background: rgba(225,6,0,0.08) !important;
  color: #c00000 !important;
  border-color: rgba(225,6,0,0.18) !important;
}

/* Tabs */
html[data-theme='light'] .gg-tab {
  background: var(--lm-card2) !important;
  border-color: rgba(36,38,44,0.10) !important;
  color: var(--lm-ink2) !important;
}

html[data-theme='light'] .gg-tab.active {
  background: linear-gradient(135deg, var(--team-color), var(--gg-orange)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Bouton secondaire */
html[data-theme='light'] .gg-btn.secondary,
html[data-theme='light'] .rhub-btn.sec {
  background: var(--lm-card2) !important;
  border: 1px solid rgba(36,38,44,0.12) !important;
  color: var(--lm-ink2) !important;
  box-shadow: none !important;
}

/* Notice */
html[data-theme='light'] .gg-notice {
  background: rgba(22,163,74,0.08) !important;
  border: 1px solid rgba(22,163,74,0.20) !important;
  color: #14532d !important;
}

/* Icône */
html[data-theme='light'] .gg-icon {
  background: var(--lm-card2) !important;
  border-color: rgba(36,38,44,0.10) !important;
}

/* Progress bar fond */
html[data-theme='light'] .gg-progress {
  background: var(--lm-bg2) !important;
}

/* Links preview */
html[data-theme='light'] .gg-preview-links a {
  background: rgba(36,38,44,0.04) !important;
  border-color: rgba(36,38,44,0.10) !important;
  color: var(--lm-ink) !important;
}

/* ── 10. Skeleton ─────────────────────────────────────────── */
html[data-theme='light'] .gg-skeleton {
  background: rgba(36,38,44,0.06) !important;
}

html[data-theme='light'] .gg-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
}

/* ── 11. Toast ────────────────────────────────────────────── */
html[data-theme='light'] .gg-toast-card {
  background: rgba(247,246,243,0.97) !important;
  border: 1px solid rgba(36,38,44,0.12) !important;
  border-left: 4px solid var(--team-color) !important;
  color: var(--lm-ink) !important;
  box-shadow: 0 8px 30px rgba(36,38,44,0.12) !important;
}

/* ── 12. Mobile nav ───────────────────────────────────────── */
html[data-theme='light'] .gg-mobile-quick-nav {
  background: rgba(247,246,243,0.95) !important;
  border: 1px solid rgba(36,38,44,0.10) !important;
  box-shadow: 0 8px 30px rgba(36,38,44,0.10) !important;
  backdrop-filter: blur(12px) !important;
}

html[data-theme='light'] .gg-mobile-quick-nav a {
  color: var(--lm-muted) !important;
}

html[data-theme='light'] .gg-mobile-quick-nav a.active {
  background: rgba(36,38,44,0.06) !important;
  color: var(--team-color) !important;
}

/* ── 13. Race Hub ─────────────────────────────────────────── */
html[data-theme='light'] .rhub-card {
  background: var(--lm-surface) !important;
  border-color: rgba(36,38,44,0.09) !important;
}

html[data-theme='light'] .rhub-watch-item {
  background: var(--lm-card) !important;
  border-color: rgba(36,38,44,0.07) !important;
}

html[data-theme='light'] .rhub-watch-title { color: var(--lm-ink) !important; }
html[data-theme='light'] .rhub-watch-text  { color: var(--lm-muted) !important; }
html[data-theme='light'] .rhub-tech-val    { color: var(--lm-ink) !important; }
html[data-theme='light'] .rhub-tname       { color: var(--lm-ink) !important; }
html[data-theme='light'] .rhub-ttime       { color: var(--lm-ink2) !important; }
html[data-theme='light'] .rhub-trow.done .rhub-tname { color: #9ca3af !important; }
html[data-theme='light'] .rhub-trow.done .rhub-ttime { color: #9ca3af !important; }

html[data-theme='light'] .rhub-check {
  background: var(--lm-card) !important;
  border-color: rgba(36,38,44,0.07) !important;
  color: var(--lm-ink) !important;
}
html[data-theme='light'] .rhub-check:hover { background: var(--lm-card2) !important; }

/* ── 14. Live Track ───────────────────────────────────────── */
html[data-theme='light'] .lt2 {
  --lt-bg:      #edf0f7;
  --lt-surface: #ffffff;
  --lt-border:  rgba(36,38,44,0.09);
  --lt-border2: rgba(36,38,44,0.14);
  --lt-white:   #111827;
  --lt-gray:    #6b7280;
}

html[data-theme='light'] .lt2-panel-hd {
  background: rgba(36,38,44,0.03) !important;
}

html[data-theme='light'] .lt2-driver-name {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] #lt2-wdc-panel > div,
html[data-theme='light'] #lt2-wcc-panel > div,
html[data-theme='light'] #lt2-wdc-panel-d > div,
html[data-theme='light'] #lt2-wcc-panel-d > div {
  border-bottom-color: rgba(36,38,44,0.06) !important;
}

html[data-theme='light'] .lt2-sub-tab {
  color: var(--lm-ink2) !important;
  border-bottom-color: transparent !important;
}

html[data-theme='light'] .lt2-sub-tab[style*="color:#fff"],
html[data-theme='light'] .lt2-sub-tab.active {
  color: var(--lm-ink) !important;
}

/* ── 15. Fiche pilote (valeurs hardcodées PHP) ────────────── */
html[data-theme='light'] .pd-history-full > div,
html[data-theme='light'] [style*="background: #121518"],
html[data-theme='light'] [style*="background:#121518"] {
  background: var(--lm-surface) !important;
  border-color: rgba(36,38,44,0.10) !important;
  color: var(--lm-ink) !important;
}

html[data-theme='light'] .pd-history-full [style*="border-bottom:1px solid #1e2126"],
html[data-theme='light'] .pd-history-full [style*="border-bottom: 1px solid #1e2126"] {
  border-bottom-color: rgba(36,38,44,0.09) !important;
  color: var(--lm-muted) !important;
}

html[data-theme='light'] .pd-history-full tr[style*="border-top:1px solid #111"],
html[data-theme='light'] .pd-history-full tr[style*="border-top: 1px solid #111"] {
  border-top-color: rgba(36,38,44,0.07) !important;
}

html[data-theme='light'] .pd-history-full td[style*="color:#fff"],
html[data-theme='light'] .pd-history-full td[style*="color: #fff"],
html[data-theme='light'] [style*="background: #121518"] [style*="color:#fff"],
html[data-theme='light'] [style*="background: #121518"] [style*="color: #fff"],
html[data-theme='light'] [style*="background:#121518"] [style*="color:#fff"] {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] [style*="background: #121518"] [style*="color:#aaa"],
html[data-theme='light'] [style*="background: #121518"] [style*="color: #aaa"],
html[data-theme='light'] [style*="background:#121518"] [style*="color:#aaa"] {
  color: var(--lm-muted) !important;
}

/* ── 16. Podium ───────────────────────────────────────────── */
html[data-theme='light'] .gg-podium-card {
  background: var(--lm-surface) !important;
  border-color: rgba(36,38,44,0.10) !important;
}

html[data-theme='light'] .gg-podium-card.first {
  background: linear-gradient(180deg, rgba(234,179,8,0.12), var(--lm-surface)) !important;
}

/* ── 17. Raccourcis home ──────────────────────────────────── */
html[data-theme='light'] .gg-home-shortcut {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] .gg-home-race-card p,
html[data-theme='light'] .gg-home-shortcut p {
  color: var(--lm-muted) !important;
}

/* ── 18. Spans isolés avec couleurs hardcodées ────────────── */
html[data-theme='light'] span[style*="color:#fff"],
html[data-theme='light'] span[style*="color: #fff"],
html[data-theme='light'] div[style*="color:#fff"],
html[data-theme='light'] div[style*="color: #fff"] {
  color: var(--lm-ink) !important;
}

html[data-theme='light'] span[style*="color:#aaa"],
html[data-theme='light'] span[style*="color: #aaa"],
html[data-theme='light'] div[style*="color:#aaa"] {
  color: var(--lm-muted) !important;
}

/* ── 19. Backgrounds sombres hardcodés génériques ─────────── */
html[data-theme='light'] [style*="background:#111"],
html[data-theme='light'] [style*="background: #111"],
html[data-theme='light'] [style*="background:#0b0f1a"],
html[data-theme='light'] [style*="background: #0b0f1a"],
html[data-theme='light'] [style*="background:#05070d"],
html[data-theme='light'] [style*="background: #05070d"],
html[data-theme='light'] [style*="background:#10162a"],
html[data-theme='light'] [style*="background: #10162a"],
html[data-theme='light'] [style*="background:#111827"],
html[data-theme='light'] [style*="background: #111827"] {
  background: var(--lm-card) !important;
  color: var(--lm-ink) !important;
}
/* ============================================================
   10. Page d'accueil (mode clair)
   Le hero, le compte à rebours et les options du défi flash étaient
   pensés pour le fond sombre (fonds noirs translucides, texte #aaa) :
   en clair ils donnaient des dalles grises et du texte illisible.
   ============================================================ */

/* Hero : surface douce avec une très légère lueur de la couleur d'équipe */
html[data-theme='light'] .gg-hero {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--team-color, #e10600) 8%, transparent), transparent 42%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--team-color, #e10600) 5%, transparent), transparent 45%),
    var(--lm-surface);
  border: 1px solid var(--lm-line);
  box-shadow: var(--lm-shadow);
  backdrop-filter: none;
}
html[data-theme='light'] .gg-hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--team-color, #e10600) 6%, transparent), transparent 64%); }
html[data-theme='light'] .gg-hero p { color: var(--lm-ink2) !important; }

/* Compte à rebours : carte claire lisible, chiffres en pastilles sombres façon tableau d'affichage */
html[data-theme='light'] .gg-countdown-container {
  background: var(--lm-card);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 6px 22px rgba(17,24,39,.08);
  backdrop-filter: none;
}
html[data-theme='light'] .gg-countdown-container:hover {
  box-shadow: 0 10px 30px rgba(225,6,0,.16);
  border-color: rgba(225,6,0,.45);
}
html[data-theme='light'] .gg-countdown-title { color: var(--lm-ink2) !important; }
html[data-theme='light'] .gg-countdown-title i { color: #e10600; }
html[data-theme='light'] .gg-countdown .gg-cd-item {
  background: #111827 !important;
  border: 0 !important;
  border-radius: 12px;
  padding: 10px 6px 8px;
  box-shadow: 0 3px 10px rgba(17,24,39,.18) !important;
}
html[data-theme='light'] .gg-countdown .gg-cd-number { color: #ffffff !important; }
html[data-theme='light'] .gg-countdown .gg-cd-label { color: #9ca3af !important; }

/* Défi flash : options claires, état survol / sélection visibles */
html[data-theme='light'] .defi-option {
  background: var(--lm-surface);
  border: 1px solid rgba(17,24,39,.14);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
html[data-theme='light'] .defi-option:hover {
  background: #fff5f5;
  border-color: rgba(225,6,0,.45);
}
html[data-theme='light'] .defi-option:has(input:checked) {
  background: #fff1f0;
  border-color: #e10600;
  box-shadow: 0 0 0 3px rgba(225,6,0,.12);
}
html[data-theme='light'] .defi-option:focus-within { outline: 2px solid #e10600; outline-offset: 2px; }
html[data-theme='light'] .gg-card.defi-flash { border-top: 3px solid #e10600 !important; }

/* Cartes de l'accueil : ombre légère et arrondi cohérent */
html[data-theme='light'] .gg-home .gg-card,
html[data-theme='light'] .gg-home .gg-stat { border-radius: 16px; }

/* Boutons principaux : le halo néon du thème sombre devient une ombre discrète */
html[data-theme='light'] .gg-btn:not(.secondary),
html[data-theme='light'] .btn-f1 {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--team-color, #e10600) 24%, transparent) !important;
}
html[data-theme='light'] .gg-btn:not(.secondary):hover,
html[data-theme='light'] .btn-f1:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--team-color, #e10600) 30%, transparent) !important;
}
/* Ombres de cartes uniformes et légères */
html[data-theme='light'] .gg-card,
html[data-theme='light'] .f1-card,
html[data-theme='light'] .news-card { box-shadow: var(--lm-shadow) !important; }
/* Sélection de texte et barre de défilement assorties à la palette */
html[data-theme='light'] ::selection { background: color-mix(in srgb, var(--team-color, #e10600) 22%, transparent); }
html[data-theme='light'] { scrollbar-color: rgba(36,38,44,.28) transparent; }