/* ============================================================
   MELOTURF — DESIGN SYSTEM PREMIUM v2  (« Terminal IA »)
   Couche de thème chargée EN DERNIER : retune les tokens de
   styles.css vers la palette premium et upgrade les primitives
   partagées (panel, topbar, onglets, hero, boutons, chiffres).
   Additif & réversible : retirer le <link> restaure l'ancien look.
   Réf. maquette : écran d'accueil « Terminal IA ».
   ============================================================ */

/* ---------- 1. TOKENS : palette premium ---------- */
:root {
  /* Fond : noir profond → vert très foncé */
  --bg: #071412;
  --bg-deep: #020806;
  /* Surfaces verre */
  --panel:   rgba(255, 255, 255, .045);
  --panel-2: rgba(255, 255, 255, .028);
  --panel-3: rgba(255, 255, 255, .06);
  --line:        rgba(183, 255, 60, .10);
  --line-strong: rgba(183, 255, 60, .20);
  /* Accents */
  --lime: #B7FF3C;            /* Accent IA */
  --lime-soft: rgba(183, 255, 60, .14);
  --lime-dark: #06140d;
  --gold: #FFD54A;            /* Premium or doux */
  --cyan: #4ADE80;            /* ex-turquoise → vert émeraude (cohérence palette premium) */
  --red: #ff5a6a;
  /* Texte */
  --text: #FFFFFF;
  --muted: #A5B4B7;           /* Texte secondaire */
  --muted-2: #7d8d90;
  /* Typo : SF Pro en tête (rendu natif iOS = exactement le brief) */
  --font-body: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-display: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Sora", "Space Grotesk", system-ui, sans-serif;
  /* Rayons : cartes 24 px */
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 24px;
  /* Ombres & glow */
  --shadow-1: 0 12px 40px rgba(0, 0, 0, .42);
  --shadow-2: 0 18px 55px rgba(0, 0, 0, .58);
  --glow-lime: 0 0 26px rgba(183, 255, 60, .28);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.15);
}

/* ---------- 2. FOND VIVANT (Apple Intelligence discret) ---------- */
body {
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(30, 74, 54, .55) 0, transparent 60%),
    radial-gradient(90% 55% at 85% 6%, rgba(183, 255, 60, .06) 0, transparent 55%),
    radial-gradient(120% 90% at 50% 118%, rgba(2, 10, 7, .9) 0, transparent 60%),
    linear-gradient(180deg, #071412 0%, #04100c 42%, var(--bg-deep) 100%) !important;
  background-attachment: fixed;
  letter-spacing: -.01em;
}
::selection { background: var(--lime); color: var(--lime-dark); }
::-webkit-scrollbar-thumb { background: rgba(183, 255, 60, .18); border-color: transparent; }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Canvas de particules injecté par meloturf-theme.js */
#mt-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
}

/* Chiffres alignés partout */
.num, .day-stats strong, .metric b, .metric strong { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 3. TOPBAR verre profond ---------- */
.topbar {
  position: relative;
  background: linear-gradient(180deg, rgba(9, 24, 19, .86), rgba(7, 20, 16, .72)) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
}
/* Liseré IA : fin dégradé lime en bas du header, pour ancrer l'app-bar. */
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 255, 60, .38) 45%, rgba(74, 222, 128, .28) 62%, transparent);
  pointer-events: none;
}
.brand-mark {
  border-radius: 15px;
  background: linear-gradient(160deg, #0e2a1f, #071b13);
  border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.brand strong {
  letter-spacing: .04em;
  background: linear-gradient(100deg, #fff, #cfe4ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* « SPORT EDGE » : accent bleu, plus léger, accolé au wordmark HELIOS. */
.brand-edge {
  -webkit-text-fill-color: #3b82f6; color: #3b82f6;
  font-weight: 700; letter-spacing: .12em; font-size: .82em;
}
.brand small { color: var(--muted); }

/* ---------- 3b. CLUSTER DROITE : statut + compte regroupés ---------- */
/* Le statut « Moteur actif » flottait, orphelin, au centre : on le pousse
   à droite pour le coller à la pastille compte et supprimer le vide central.
   (Sur mobile styles.css garde .status en display:none — on n'y touche pas.) */
.status {
  margin-left: auto;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: -.01em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.status b { color: #e9fbe4; }
/* Le point d'état sert d'espacement via gap : on annule sa marge d'origine. */
.status span, #api-dot { margin-right: 0 !important; box-shadow: 0 0 10px currentColor; }
.status.offline b { color: #ffd7dc; }
.account-area { margin-left: 12px; }

/* ---------- 3c. BARRE SEGMENTÉE : statut + compte fusionnés ----------
   meloturf-theme.js enveloppe .status et .account-area dans un
   .topbar-cluster → une seule barre verre, deux segments séparés par
   un fin trait. Sans JS, le fallback ci-dessus (pills autonomes) tient. */
.topbar-cluster {
  position: relative;
  margin-left: auto;
  display: flex; align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
/* Chaque segment perd son fond/bordure propre : c'est le cluster qui porte le verre. */
.topbar-cluster .status,
.topbar-cluster .account-chip {
  margin: 0;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 999px;
  transition: background .2s ease;
}
.topbar-cluster .status { cursor: pointer; }
.topbar-cluster .status:hover,
.topbar-cluster .status[aria-expanded="true"],
.topbar-cluster .account-chip:hover { background: var(--panel-3) !important; }
/* Caret discret indiquant que le statut ouvre un panneau. */
.topbar-cluster .status::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px; flex-shrink: 0;
  border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
  transform: rotate(45deg) translateY(-1px);
  transition: transform .2s var(--ease-spring), border-color .2s;
}
.topbar-cluster .status[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-1px); border-color: var(--lime);
}
/* Séparateur inter-segments. */
.topbar-cluster .account-area {
  margin: 0; padding-left: 5px; margin-left: 5px;
  border-left: 1px solid var(--line);
}
.topbar-cluster .account-area:first-child { border-left: none; padding-left: 0; margin-left: 0; }
/* Mobile (styles.css masque .status ≤600px) : le cluster n'enveloppe plus que
   le compte → on efface cadre, fond et séparateur pour ne pas laisser un trait
   ni une pill vide devant l'avatar. */
@media (max-width: 600px) {
  .topbar-cluster {
    padding: 0; background: transparent; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .topbar-cluster .account-area {
    border-left: none; padding-left: 0; margin-left: 0;
  }
}

/* ---------- 3d. POPOVER SANTÉ DU MOTEUR (statut cliquable) ---------- */
.mt-health {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 250px; z-index: 60;
  padding: 12px 14px 6px;
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, rgba(12, 28, 21, .98), rgba(7, 18, 14, .98));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  animation: mt-pop .18s var(--ease-spring);
}
@keyframes mt-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.mt-health-h {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.mt-health-row {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 8px 0; font-size: 13px; color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.mt-health-row:first-of-type { border-top: none; }
.mt-health-row b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-health-row .mt-ok  { color: var(--cyan); }
.mt-health-row .mt-ko  { color: var(--red); }
.mt-health-row .mt-hot { color: var(--lime); }
.mt-health-row .mt-live { display: inline-flex; align-items: center; gap: 6px; }
.mt-health-row .mt-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: mt-pulse 2s infinite;
}

/* ---------- 4. ONGLETS DE VUE — pilules glass, actif = glow IA ---------- */
.view-tabs {
  gap: 8px;
  /* On annule le plein-bord hérité de program.css (margin: 0 calc(50%-50vw)) :
     la barre d'onglets reste dans main → bord gauche aligné sur le logo. */
  margin: 2px 0 10px !important;
  padding: 6px;
  border-radius: 18px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.view-tab {
  border-radius: 13px !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color .25s, background .25s, box-shadow .3s, transform .25s var(--ease-spring);
  background: transparent !important;
}
.view-tab:active { transform: scale(.96); }
.view-tab.active {
  color: var(--lime-dark) !important;
  background: linear-gradient(100deg, var(--lime), #8fe024) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(183, 255, 60, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
  font-weight: 700;
}

/* ---------- 5. PANNEAUX / CARTES — verre, 24 px, hairline IA ---------- */
.panel,
.summary > *,
.program-hero,
.direct-hero,
.performance-hero,
.daily-brief,
.day-highlights-panel,
.hotlist-panel {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-l) !important;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* Micro-relief au toucher sur les cartes cliquables */
.meeting-card, .highlight-card, .focus-card, .top-card {
  transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.meeting-card:active, .highlight-card:active, .focus-card:active, .top-card:active {
  transform: scale(.985);
}

/* Les hero sont devenus des cartes : il leur faut un padding intérieur,
   sinon le texte (« VENDREDI 31 JUILLET », titre…) colle au bord/ligne.
   L'original avait un padding horizontal de 0 (contenu aligné sur la page). */
.program-hero, .direct-hero, .performance-hero {
  padding: 30px clamp(20px, 5.5vw, 34px) 28px !important;
}
/* Le raccourci Quinté flottant reste dans les marges de la carte */
.quinte-quicklink { top: 16px !important; right: 18px !important; }

/* ---------- 6. TYPO — grande hiérarchie ---------- */
h1, .program-hero h1, .direct-hero h1, .performance-hero h1 {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.program-hero h1, .direct-hero h1, .performance-hero h1 { font-size: clamp(30px, 9vw, 46px); font-weight: 800; }
h2 { letter-spacing: -.02em; font-weight: 800; }
.eyebrow {
  color: var(--muted);
  letter-spacing: .2em;
  font-weight: 800;
}
.subtitle, .weather-note, .responsible-note { color: var(--muted); }

/* ---------- 7. STATS D'ACCUEIL — cartes premium à glow ---------- */
.day-stats { gap: 12px; }
.day-stats > div {
  background: var(--panel) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 16px 14px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 30px rgba(183, 255, 60, .04);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.day-stats > div:active { transform: scale(.97); }
.day-stats strong {
  font-family: var(--font-display);
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(100deg, #fff, #d7ffd0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.day-stats span { color: var(--muted); font-weight: 500; }

/* ---------- 8. BOUTONS — CTA premium ---------- */
.quinte-quicklink,
#simulate, #run-race, #bet-save, #duel-save {
  border-radius: 14px !important;
  border: none !important;
  font-weight: 700;
  color: var(--lime-dark) !important;
  background: linear-gradient(100deg, var(--lime), #8fe024) !important;
  box-shadow: 0 8px 24px rgba(183, 255, 60, .26), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .28s var(--ease-spring), box-shadow .3s;
}
.quinte-quicklink:active,
#simulate:active, #run-race:active, #bet-save:active, #duel-save:active { transform: scale(.975); }

/* Bouton Premium doré → vert avec reflet balayant (classe optionnelle) */
.mt-premium {
  position: relative; overflow: hidden;
  color: #0a1c02 !important;
  background: linear-gradient(100deg, var(--gold) 0%, #e9ff7a 45%, var(--lime) 100%) !important;
  box-shadow: 0 10px 32px rgba(183, 255, 60, .28), 0 4px 14px rgba(255, 213, 74, .22), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.mt-premium::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-18deg); animation: mt-shine 4.2s ease-in-out infinite;
}
@keyframes mt-shine { 0%, 55% { left: -60%; } 80%, 100% { left: 130%; } }

/* ---------- 9. TAGS / SIGNAUX — accent IA & or ---------- */
.tag.value, .cat.gagnant, .lg.good { color: var(--lime); }
.tag.joker { color: var(--gold); }
.demo-stamp { border-color: var(--line-strong); color: var(--muted); }

/* Filtres du programme : pilule active en dégradé IA (au lieu du blanc plein) */
.filter-button.active {
  background: linear-gradient(100deg, var(--lime), #8fe024) !important;
  border-color: transparent !important;
  color: var(--lime-dark) !important;
  box-shadow: 0 4px 16px rgba(183, 255, 60, .28);
}

/* ---------- 10. RÉVÉLATION À L'ENTRÉE (piloté par meloturf-theme.js) ---------- */
.mt-reveal { opacity: 0; transform: translateY(20px) scale(.99); }
.mt-reveal.mt-in { animation: mt-rise .7s var(--ease-spring) forwards; }
@keyframes mt-rise { to { opacity: 1; transform: none; } }

/* ============================================================
   11. CENTRE DE COMMANDE IA  (bande injectée par le JS)
   Statut unique CENTRÉ qui pivote (fondu) — aucune écriture
   coupée, contrairement à un bandeau défilant.
   ============================================================ */
.mt-command {
  position: relative;
  margin: 12px 0 6px;
  min-height: 42px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 18px;
  overflow: hidden;
  /* Pill verre léger, accordé aux segments du header (§3c). */
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.mt-rot {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .005em;
  text-align: center; line-height: 1.25;
  transition: opacity .4s ease, transform .4s var(--ease-spring);
}
.mt-rot.mt-out { opacity: 0; transform: translateY(-6px); }
.mt-rot b { color: var(--text); font-weight: 700; }
.mt-rot .mt-hot { color: var(--lime); font-weight: 700; }
.mt-rot .mt-gold { color: var(--gold); font-weight: 700; }
.mt-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(183, 255, 60, .6); animation: mt-pulse 2s infinite;
}
@keyframes mt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(183, 255, 60, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(183, 255, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(183, 255, 60, 0); }
}

/* ============================================================
   12. TAB BAR BASSE — thème premium de la .bottom-nav EXISTANTE
   L'app fournit déjà .bottom-nav (≤700px) avec de vrais .view-tab
   câblés à switchView. On la rend flottante / verre / glow IA.
   ============================================================ */
@media (max-width: 700px) {
  .bottom-nav {
    left: 12px; right: 12px; width: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px;
    padding: 8px 6px;                 /* la zone sûre passe désormais par « bottom » */
    background: linear-gradient(180deg, rgba(12, 28, 21, .86), rgba(6, 16, 12, .9));
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .bottom-nav .view-tab {
    color: var(--muted); border-radius: 14px;
    transition: color .2s, background .2s, transform .2s var(--ease-spring);
  }
  .bottom-nav .view-tab.active {
    color: var(--lime); background: var(--lime-soft);
  }
  .bottom-nav .view-tab.active svg { filter: drop-shadow(0 0 8px rgba(183, 255, 60, .7)); }
  .bottom-nav .view-tab:active { transform: scale(.9); }
  /* Dégagement pour la barre flottante (elle ne colle plus au bord). */
  main   { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
  footer { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .mt-reveal { opacity: 1; transform: none; }
  #mt-particles { display: none; }
  body { background-attachment: scroll; }
  .mt-ticker { animation: none; }
}

/* ============================================================
   13. PASSE DE POLISH TRANSVERSALE (cohérence sur toutes les vues)
   ============================================================ */
/* Boutons d'auth (topbar) : tiennent sur UNE ligne (ne débordent plus). */
.account-area { gap: 6px; }
.account-area .account-btn {
  white-space: nowrap;
  font-size: 11px;
  padding: 8px 10px;
  line-height: 1.1;
  letter-spacing: 0;
}

/* Cartes de synthèse (Résultats · Carnet · calibration) : grille compacte
   au lieu d'une colonne pleine largeur trop haute, + gros chiffre premium. */
.performance-summary {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}
.performance-metric { padding: 14px 16px !important; }
.performance-metric strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 30px);
  letter-spacing: -.02em;
  background: linear-gradient(100deg, #fff, #d7ffd0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}