/* ============================================================================
   style.css — layout commun + composants. AUCUNE couleur en dur ici.
   Toutes les valeurs chromatiques via var(--…) définies dans
   assets/css/theme-<theme>.css (chargé en parallèle par conf/header.php).
   Référence design : maquettes Trading Mastery v5 (dark) et light blue (5).
   ============================================================================ */

/* ── Reset minimal ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: var(--font-ui);
  /* Base 17px (ex-16px) : `--font-ui` est passé d'une condensée (Barlow) à une
     sans à chasse normale → besoin d'un cran de plus pour la lisibilité des
     données (noms de matchs, horaires), au niveau de l'ancien site. Tout étant
     en rem, la hiérarchie est préservée. line-height aéré pour le corps. */
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-1);
  background: var(--bg);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-b); border-radius: 99px; }

/* ============================================================================
   TOKENS — échelles fermées (cf. DESIGN_SYSTEM.md §2-4).
   Toute valeur visuelle d'un écran doit passer par l'un de ces paliers.
   Aucune taille/espacement/rayon « libre » dans les CSS de page.
   ============================================================================ */
:root {
  /* ── Gouttières de page (responsive, surchargées plus bas) ── */
  --pad-x: 56px;
  --pad-y: 24px;

  /* ── Espacement (échelle fermée, base ~4px) ── */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  /* alias rétro-compat (ne plus utiliser dans le neuf) */
  --gap-sm: var(--sp-4);
  --gap-md: var(--sp-6);
  --gap-lg: 28px;

  /* ── Échelle typographique (fermée, 1rem = 16px) ── */
  --fs-micro: .65rem;   /* ticks, micro-badges          */
  --fs-xs:    .75rem;   /* pills, th caps, méta dense    */
  --fs-sm:    .85rem;   /* texte secondaire, tables denses */
  --fs-base:  1rem;     /* corps par défaut, cellules    */
  --fs-md:    1.15rem;  /* valeurs mises en avant        */
  --fs-lg:    1.35rem;  /* sous-titres de section        */
  --fs-xl:    1.6rem;   /* titre de page, nom d'équipe   */
  --fs-2xl:   2rem;     /* score héro, page-title        */

  /* ── Rayons (fermé) ── */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;
  --radius: var(--r-sm); /* alias rétro-compat */

  /* ── Ombres ── */
  --shadow-pop:   0 8px 24px rgba(0,0,0,.45);
  --shadow-modal: 0 30px 80px rgba(0,0,0,.45);

  /* ── Z-index (échelle fermée) ── */
  --z-header:   20;
  --z-dropdown: 100;
  --z-popover:  1000;
  --z-modal:    1100;

  /* ── Pastilles V/N/D — couleurs SOLIDES (cf. maquette v5, identiques dans les
     deux thèmes : un badge vert/ambre/rouge plein reste lisible sur clair comme
     sur sombre, contraste porté par sa propre couleur de texte). */
  --vnd-v-bg: #1d8c3e;  --vnd-v-fg: #ffffff;   /* victoire — vert plein   */
  --vnd-n-bg: #d4a017;  --vnd-n-fg: #2a1a00;   /* nul — ambre, texte foncé */
  --vnd-d-bg: #c33636;  --vnd-d-fg: #ffffff;   /* défaite — rouge plein    */
}
@media (max-width: 1280px) {
  :root { --pad-x: 32px; --pad-y: 18px; }
}
@media (max-width: 720px) {
  :root {
    /* Gouttières quasi nulles : le contenu (et donc chaque box) occupe ~99 %
       de la largeur de l'écran. */
    --pad-x: 0.5%; --pad-y: 14px;
    /* Marges/paddings de box réduits sur mobile (gagner de la place). */
    --gap-md: 10px;
    --gap-lg: 16px;
  }
  /* Box génériques : padding plus compact. */
  .card        { padding: 10px; }
  .panel       { padding: 10px; }
  .panel--lg   { padding: 12px; }
  .page-title  { font-size: 1.5rem; margin-bottom: 10px; }
  /* Formulaires : police réduite par défaut sur toutes les pages. */
  .content input,
  .content select,
  .content textarea { font-size: .85rem; }
}

/* ============================================================================
   APP SHELL
   ============================================================================ */
.app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header sticky (status bar + nav) */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(8px);
}

/* ── Status bar ── */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--pad-x);
  border-bottom: 1px solid var(--header-border);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--header-dim);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand .logo {
  width: 34px; height: 34px;
  background: var(--logo-bg);
  color: var(--logo-fg);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .03em;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .14em;
  color: var(--header-fg);
  line-height: 1;
}
.brand-sub {
  font-size: .65rem;
  letter-spacing: .18em;
  color: var(--accent);
  font-weight: 700;
  margin-top: 2px;
}

/* ── Nav Search ── */
.nav-search-wrap { position: relative; flex: 0 1 300px; }
.nav-search-wrap input.nav-search-input {
  width: 100%; padding: 7px 12px; font-size: .88rem;
  background: #fff; border: 1px solid var(--border, #1a2a52);
  border-radius: var(--radius, 6px); color: #111; outline: none;
}
.nav-search-wrap input.nav-search-input::placeholder { color: #888; font-size: .82rem; }
.nav-search-input:focus { border-color: var(--accent, #d4af37); }
.nav-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: var(--bg-elev, #0f1a33); border: 1px solid var(--border, #1a2a52);
  border-radius: 6px; max-height: 340px; overflow-y: auto; display: none;
  z-index: 999; box-shadow: 0 4px 12px rgba(0,0,0,.35);
  /* Couleur de texte explicite : sans ça, les items héritent du blanc de la
     nav (--nav-fg) → texte clair sur fond clair illisible en thème light. */
  color: var(--text-1, #e9eefc);
}
.nav-sug-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border, #1a2a52);
  font-size: .92rem;
}
.nav-sug-item:last-child { border-bottom: 0; }
.nav-sug-item:hover { background: var(--bg-light, rgba(255,255,255,.06)); color: var(--accent, #d4af37); }
.nav-sug-type { float: right; font-size: .78rem; color: var(--text-2, #9bb0d0); text-transform: uppercase; letter-spacing: .05em; }
.nav-sug-meta { color: var(--text-2, #9bb0d0); font-size: .85rem; }
.nav-sug-hint, .nav-sug-error { padding: 10px 14px; font-size: .88rem; }
.nav-sug-error { color: #ff8080; }
@media (max-width: 640px) {
  /* Header compact mobile : on garde le logo TM, on masque le texte de marque
     pour libérer de la place (sinon la barre déborde) ; la recherche redevient
     utilisable et le bloc droit (user/thème/burger) rentre. */
  .brand-name, .brand-sub { display: none; }
  .nav-search-wrap { flex: 1 1 90px; }
  .status-right { gap: 10px; }
}

.status-right { display: flex; align-items: center; gap: 16px; }

.session-info {
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--header-dim);
}

/* ── Menu utilisateur : nom cliquable → dropdown « déconnecter » ── */
.user-menu { position: relative; }
.session-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.session-info-btn:hover { color: var(--accent); }
.user-menu-caret { font-size: .9em; opacity: .75; transition: transform .15s; }
.user-menu.is-open .user-menu-caret { transform: rotate(180deg); }
.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 160px;
  background: var(--bg-elev, #0f1a33);
  border: 1px solid var(--border, #1a2a52);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  overflow: hidden;
  z-index: 1000;
  /* Couleur de texte explicite (cf. fix autocomplete) : sinon héritage du
     blanc du header → illisible sur fond clair en thème light. */
  color: var(--text-1, #e9eefc);
}
.user-menu-item {
  display: block;
  padding: 10px 14px;
  color: var(--text-1, #e9eefc);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.user-menu-item:hover { background: var(--bg-light, rgba(255,255,255,.06)); color: var(--accent-red, #ff6b6b); }

/* ── Toggle thème ── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-b);
  color: var(--header-fg);
  width: 32px; height: 32px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  font-size: 1rem;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Main nav ── */
.main-nav {
  display: flex;
  align-items: stretch;
  padding: 0 var(--pad-x);
  gap: 4px;
  background: var(--nav-bg);
}

.nav-tab {
  border: 0;
  background: transparent;
  color: var(--nav-dim);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: .14em;
  padding: 14px 22px;
  cursor: pointer;
  position: relative;
  transition: color .15s;
  white-space: nowrap;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s;
}
.nav-tab:hover { color: var(--nav-fg); }
.nav-tab:hover::after { transform: scaleX(.5); }

.nav-tab.active { color: var(--accent); }
.nav-tab.active::after { transform: scaleX(1); }

.nav-spacer { flex: 1; }

/* ── Menu burger (mobile / tablette) ── */
.nav-burger {
  display: none;            /* visible seulement sous le breakpoint */
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--header-border, rgba(255,255,255,.18));
  border-radius: 6px;
  cursor: pointer;
}
.nav-burger-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--header-fg, #fff);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-burger.is-open .nav-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Burger jusqu'au format portable inclus (1280px = le breakpoint « portable »
   déjà utilisé pour --pad-x). Au-dessus de 1024px la nav horizontale tenait
   techniquement, mais elle est à l'étroit sur un laptop ou une tablette en
   paysage — et le zoom navigateur ramène vite la largeur CSS sous 1100px. */
@media (max-width: 1280px) {
  .nav-burger { display: inline-flex; }
  .main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .main-nav.is-open { display: flex; }
  .nav-tab {
    width: 100%;
    padding: 14px var(--pad-x);
    font-size: 1.1rem;
    border-top: 1px solid var(--nav-border, rgba(255,255,255,.08));
  }
  .nav-tab::after { display: none; }       /* l'underline n'a pas de sens en vertical */
  .nav-tab.active {
    background: var(--nav-active-bg, rgba(255,255,255,.06));
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* Items déplacés dans le burger : menu utilisateur + bouton thème en pleine
     largeur, façon entrées de menu. */
  .main-nav .user-menu { width: 100%; position: relative; }
  .main-nav .session-info-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px var(--pad-x);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nav-dim);
    border-top: 1px solid var(--nav-border, rgba(255,255,255,.08));
  }
  .main-nav .user-menu-caret { margin-left: auto; }
  .main-nav .user-menu-dropdown {     /* déroulé en flux normal, pas en overlay */
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .main-nav .user-menu-item { padding-left: calc(var(--pad-x) + 16px); }

  .main-nav #tm-theme-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px var(--pad-x);
    border-top: 1px solid var(--nav-border, rgba(255,255,255,.08));
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nav-dim);
  }
  .main-nav #tm-theme-toggle::before { content: 'Thème'; }
}

.nav-logout {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .14em;
  color: var(--nav-dim);
  text-transform: uppercase;
}
.nav-logout:hover { color: var(--accent-red); }

/* ============================================================================
   CONTENT
   ============================================================================ */
.content {
  flex: 1;
  padding: var(--pad-y) var(--pad-x);
  position: relative;
}

/* Pages « pleine largeur » (championnats, équipes, backtests, fiche match) :
   contenu dense en tableaux. Les gouttières standard (56px, 32px en portable)
   mangeaient jusqu'à 112px de largeur utile — on les rend au contenu. Le
   header, la nav et le footer gardent leur alignement normal. */
body.page-fullwidth > .content { padding-left: 10px; padding-right: 10px; }
@media (max-width: 720px) {
  body.page-fullwidth > .content { padding-left: 4px; padding-right: 4px; }
}

.page-title {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: .1em;
  color: var(--text-1);
  margin-bottom: var(--gap-md);
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap-md);
}

/* ── Panel (primitive de panneau — cf. DESIGN_SYSTEM.md §5.1) ──
   Surface de carte opaque, theme-aware. À utiliser PARTOUT à la place des
   variantes par page (.acc-filters, .ch-col, .eq-form, .ot-card, .pm-card,
   .adm-stat/.adm-card, .ic-card, .mt-card, .fav-list…). `--surface` est opaque
   dans chaque thème → plus besoin d'override `html[data-theme] { background }`. */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.panel--lg    { padding: var(--sp-7); }
.panel--flush { padding: 0; }           /* table pleine largeur dans un panel */

/* ── Boutons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-b);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--accent-fg);
}
.btn-danger {
  border-color: var(--accent-red);
  color: var(--accent-red);
}
.btn--ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn--ghost:hover { background: var(--accent-dim); }
.btn--sm {
  padding: 5px 12px;
  font-size: var(--fs-sm);
}

/* ── Tables ── */
table.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.tbl thead th {
  background: var(--surface-2);
  text-align: left;
  padding: 10px 14px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
table.tbl tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
}
table.tbl tbody tr:hover td { background: var(--accent-dim); }

/* ── Form controls ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
  background: var(--surface);
  border: 1px solid var(--border-b);
  color: var(--text-1);
  padding: 8px 12px;
  border-radius: var(--radius);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

label { font-size: .92rem; letter-spacing: .04em; color: var(--text-2); display: block; margin-bottom: 4px; }

/* ── Badges & tags ── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: .72rem;
  letter-spacing: .06em;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-mid);
  font-weight: 700;
}
.tag-success { background: var(--good-bg); color: var(--good-fg); border-color: var(--good-bg); }
.tag-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bg); }
.tag-danger  { background: var(--bad-bg);  color: var(--bad-fg);  border-color: var(--bad-bg);  }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-red);
  text-transform: uppercase;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  animation: tm-pulse 1.6s infinite;
}
@keyframes tm-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ── Onglets (primitive — cf. DESIGN_SYSTEM.md §5.1) ──
   À utiliser à la place de .eq-tab / .m-tab / .hs-tl-tab / .td-pill /
   .ch-type-btn / .mt-mode / .adm-tab / .eq-scope-btn. */
.tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tab {
  padding: 8px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.tab:hover { color: var(--accent); }
.tab.is-active,
.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

/* ── Pastilles V/N/D (primitive — cf. DESIGN_SYSTEM.md §5.1) ──
   Badge carré. Modificateurs scopés `.vnd.vnd-*` pour ne PAS toucher les
   lettres inline `.vnd-v/n/d` standalone du recap H2H (h2h_tooltip.js). */
.vnd {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
}
.vnd.vnd-v { background: var(--vnd-v-bg); color: var(--vnd-v-fg); }
.vnd.vnd-n { background: var(--vnd-n-bg); color: var(--vnd-n-fg); }
.vnd.vnd-d { background: var(--vnd-d-bg); color: var(--vnd-d-fg); }

/* ── Page de login ── */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--pad-y) var(--pad-x);
}
.login-card {
  width: min(420px, 100%);
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.login-card h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .12em;
  margin-bottom: var(--gap-md);
  color: var(--text-1);
  text-align: center;
}
.login-card .form-row { margin-bottom: var(--gap-md); }
.login-card .form-row input { width: 100%; }
.login-card .btn-primary { width: 100%; justify-content: center; }
.login-error {
  background: var(--bad-bg);
  color: var(--bad-fg);
  padding: 8px 12px;
  border-radius: var(--radius);
  margin-bottom: var(--gap-md);
  font-size: .9rem;
}
.login-success {
  background: var(--good-bg, rgba(40,140,70,.15));
  color: var(--good-fg, inherit);
  padding: 8px 12px;
  border-radius: var(--radius);
  margin-bottom: var(--gap-md);
  font-size: .9rem;
}
.login-hint {
  color: var(--text-2, inherit);
  font-size: .85rem;
  margin-bottom: var(--gap-md);
}
.login-links {
  margin-top: var(--gap-md);
  text-align: center;
  font-size: .85rem;
}
.login-links a { color: var(--accent, inherit); }

/* ── Footer ── */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--pad-x);
  background: var(--footer-bg);
  border-top: 1px solid var(--header-border);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--header-dim);
  text-transform: uppercase;
}

/* ── Utilitaires ── */
.muted    { color: var(--text-3); }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-sm   { gap: var(--gap-sm); }
.gap-md   { gap: var(--gap-md); }
.gap-lg   { gap: var(--gap-lg); }
.mt-md    { margin-top: var(--gap-md); }
.mb-md    { margin-bottom: var(--gap-md); }
.text-sm  { font-size: .85rem; }
.text-mono { font-family: var(--font-mono); }
.hidden   { display: none !important; }
.sr-only  {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}