/* ============================================================
   CM2026 — Feuille de style principale
   Inclut : base, nav, layout, composants, accordéons,
            custom-select, match cards, classement, mobile
   Chargé par layout.php ET index.php
   ============================================================ */

/* ---- VARIABLES ---- */
:root {
  --rouge:   #D42B2B;
  --rouge2:  #A01E1E;
  --vert:    #2BAD5C;
  --or:      #F0B429;
  --bg:      #0D0D0D;
  --surface: #181818;
  --border:  #2A2A2A;
  --text:    #F0EDE8;
  --muted:   #888;
  --radius:  8px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }

/* ---- NAV ---- */
nav {
  background: var(--surface);
  border-bottom: 2px solid var(--rouge);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nav-brand span { color: var(--rouge); }
.nav-user-mobile { display: none; }
.nav-burger { display: none; }
.nav-links { display: flex; gap: .25rem; align-items: center; }
.nav-links a {
  padding: .4rem .85rem;
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--border); }
.nav-links a.admin-link { color: var(--or); border: 1px solid var(--or); }
.nav-links a.admin-link:hover { background: rgba(240,180,41,.12); }
.nav-user {
  font-size: .82rem;
  color: var(--muted);
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.nav-user strong { color: var(--text); }

/* ---- MAIN ---- */
main {
  flex: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  align-self: stretch;
}
main > * { width: 100%; box-sizing: border-box; }

/* ---- FLASH ---- */
.flash {
  padding: .8rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: .92rem;
  font-weight: 500;
}
.flash.success { background: rgba(43,173,92,.15);  border: 1px solid var(--vert);  color: var(--vert); }
.flash.error   { background: rgba(212,43,43,.15);  border: 1px solid var(--rouge); color: #f88; }
.flash.info    { background: rgba(240,180,41,.12); border: 1px solid var(--or);    color: var(--or); }

/* ---- CARDS ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  color: var(--rouge);
  margin-bottom: 1rem;
}

/* ---- FORMS ---- */
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
input[type=text],
input[type=number],
input[type=datetime-local],
select {
  width: 100%;
  background: #111;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .55rem .75rem;
  font-family: inherit;
  font-size: .92rem;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus { outline: none; border-color: var(--rouge); }
input::placeholder { color: var(--muted); }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 120px; }
button { -webkit-appearance: none; appearance: none; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.2rem;
  border-radius: var(--radius);
  border: none;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.btn:hover  { opacity: .85; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-rouge { background: var(--rouge); color: #fff; }
.btn-vert  { background: var(--vert);  color: #fff; }
.btn-or    { background: var(--or);    color: #111; }
.btn-ghost { background: var(--border); color: var(--text); }
.btn-sm    { padding: .35rem .8rem; font-size: .82rem; }

/* ---- TABLES ---- */
table { width: 100%; border-collapse: collapse; }
th {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-size: .88rem;
  color: var(--muted);
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
}
td { padding: .65rem .75rem; border-bottom: 1px solid #1e1e1e; font-size: .9rem; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,.02); }

/* ---- BADGES ---- */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.badge-rouge { background: rgba(212,43,43,.2);  color: #f88; }
.badge-vert  { background: rgba(43,173,92,.2);  color: #6ee; }
.badge-or    { background: rgba(240,180,41,.2); color: var(--or); }
.badge-grey  { background: var(--border);        color: var(--muted); }

/* ---- SCORE INPUT ---- */
.score-pair { display: flex; align-items: center; gap: .5rem; justify-content: center; }
.score-pair input[type=number] { width: 60px; text-align: center; font-size: 1.1rem; font-weight: 600; padding: .4rem; }
.score-sep { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--muted); }

/* ---- CLASSEMENT ---- */
.rank-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--border); width: 2rem; text-align: center; }
.rank-1 .rank-num { color: #FFD700; }
.rank-2 .rank-num { color: #C0C0C0; }
.rank-3 .rank-num { color: #CD7F32; }
.pts-big    { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--text); }
.pts-detail { font-size: .78rem; color: var(--muted); }

/* ---- PAGE TITLE ---- */
.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  line-height: 1;
}
.page-title span { color: var(--rouge); }

/* ---- PHASE LABEL ---- */
.phase-header {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--or);
  padding: .5rem 0 .25rem;
  border-bottom: 1px solid var(--border);
  margin: 1.5rem 0 .75rem;
}

/* ---- ACCORDÉON PHASES ---- */
.phase-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
  margin: 1.5rem 0 .75rem;
}
.phase-toggle {
  flex: 1;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: var(--or);
  padding: .5rem 0 .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  margin: 0;
  user-select: none;
}
.phase-toggle:hover { color: var(--text); }
.phase-toggle[aria-expanded="true"] .phase-arrow { transform: rotate(90deg); }
.phase-arrow { font-size: .75rem; transition: transform .2s; display: inline-block; color: var(--muted); flex-shrink: 0; }
.phase-grp-btn { font-family: var(--font-base, sans-serif); font-size: .72rem; flex-shrink: 0; letter-spacing: 0; cursor: pointer; }

/* ---- ACCORDÉON GROUPES ---- */
.groupe-accordion { width: 100%; display: block; box-sizing: border-box; min-width: 0; margin-bottom: .5rem; }
.groupe-toggle {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  letter-spacing: 1.5px;
  transition: background .15s, border-color .15s;
  user-select: none;
}
.groupe-toggle:hover, .groupe-toggle:active { background: #222; border-color: var(--rouge); }
.groupe-toggle[aria-expanded="true"] {
  border-color: var(--rouge);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #1a0e0e;
}
.groupe-toggle[aria-expanded="true"] .grp-arrow { color: var(--rouge); transform: rotate(90deg); }
.grp-arrow  { font-size: .75rem; transition: transform .2s; display: inline-block; color: var(--muted); flex-shrink: 0; }
.grp-title  { flex-shrink: 0; }
.groupe-body {
  border: 1px solid var(--rouge);
  border-top: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  padding: .5rem;
  margin-bottom: .25rem;
}

/* ---- MATCH VS ---- */
.match-vs { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.match-team { flex: 1; font-weight: 600; font-size: .95rem; }
.match-team.right { text-align: right; }
.match-date   { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.locked-badge { font-size: .75rem; color: var(--muted); font-style: italic; }

/* ---- MATCH CARD ---- */
.match-card { margin-bottom: .75rem; }
.match-card[data-has-pronos] { cursor: pointer; transition: border-color .18s; }
.match-card[data-has-pronos]:hover { border-color: var(--rouge); }
.match-card[data-has-pronos] .match-pronos-bar { display: none; }
.match-card[data-has-pronos].pronos-open .match-pronos-bar { display: block; }
.match-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
  flex-wrap: wrap;
  gap: .4rem;
}
.match-phase { font-size: .78rem; color: var(--or); }
.match-time  { font-size: .78rem; color: var(--muted); }
.match-stade { font-size: .73rem; margin: .15rem 0 .35rem; }
.match-stade-link { color: var(--muted); text-decoration: none; }
.match-stade-link:hover { color: var(--rouge); }
.match-stade-txt { color: var(--muted); }
.match-center { text-align: center; min-width: 90px; }
.match-score { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; line-height: 1; }
.score-sep-sm { color: var(--muted); }
.match-score-placeholder { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--muted); }
.match-status      { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
.match-status.done { color: var(--vert);  font-size: .72rem; }
.match-status.live { color: var(--rouge); font-size: .8rem; letter-spacing:.02em; }
.live-score { color: var(--rouge); animation: pulse-live 1.5s ease-in-out infinite; }
@keyframes pulse-live { 0%,100% { opacity:1 } 50% { opacity:.6 } }
.live-pts-table { display:flex; flex-direction:column; gap:.2rem; margin-top:.4rem; }
.live-pts-row { display:grid; grid-template-columns:1.5rem 1fr auto; align-items:center; gap:.4rem; padding:.25rem .4rem; border-radius:4px; font-size:.8rem; }
.live-pts-row.is-me { background:rgba(255,255,255,.06); }
.live-pts-rank { font-weight:700; font-size:.75rem; text-align:center; }
.live-pts-nom { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-pts-val { font-weight:700; font-size:.82rem; text-align:right; white-space:nowrap; }
.match-my-prono    { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

/* ---- PRONOS BAR ---- */
.match-pronos-bar  { border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .4rem; }
.pronos-label      { font-size: .72rem; color: var(--muted); margin-bottom: .35rem; }
.pronos-list       { display: flex; flex-wrap: wrap; gap: .3rem; }
.prono-chip        { font-size: .78rem; background: var(--border); border-radius: 5px; padding: .2rem .5rem; display: flex; align-items: center; gap: .3rem; }
.prono-chip.is-me  { background: rgba(212,43,43,.15); }
.prono-nom         { color: var(--muted); }
.prono-pts         { font-size: .68rem; }
.prono-empty       { color: var(--muted); }
.pronos-missing    { font-size: .72rem; color: var(--rouge); margin-top: .35rem; }
.match-manquants   { display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0 .1rem }
.manquant-chip     { font-size:.72rem;color:var(--rouge);background:rgba(212,43,43,.1);padding:.1rem .45rem;border-radius:3px }

/* ---- CUSTOM SELECT (drapeaux) ---- */
.custom-select { position: relative; width: 100%; }
.custom-select-trigger {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #111;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .55rem .75rem;
  font-family: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .2s;
  user-select: none;
}
.custom-select-trigger:hover,
.custom-select-trigger:focus,
.custom-select-trigger.cs-open { border-color: var(--rouge); outline: none; }
.cs-arrow { margin-left: auto; color: var(--muted); font-size: .8rem; transition: transform .2s; }
.custom-select-trigger.cs-open .cs-arrow { transform: rotate(180deg); }
.cs-placeholder { color: var(--muted); }
.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0; right: 0;
  background: #181818;
  border: 1px solid var(--rouge);
  border-radius: var(--radius);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.cs-group-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .78rem;
  letter-spacing: 1.5px;
  color: var(--or);
  padding: .45rem .75rem .2rem;
  border-top: 1px solid var(--border);
  margin-top: .2rem;
}
.cs-group-label:first-child { border-top: none; margin-top: 0; }
.cs-option { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; cursor: pointer; font-size: .9rem; transition: background .12s; }
.cs-option:hover { background: rgba(255,255,255,.06); }
.cs-option.cs-selected { background: rgba(212,43,43,.15); color: var(--text); }
.cs-emoji { font-size: 1.1rem; flex-shrink: 0; line-height: 1; }

/* ---- TWEMOJI ---- */
img.emoji { height: 1.1em; width: 1.1em; vertical-align: -0.15em; display: inline-block; }

/* ---- LOGIN PAGE ---- */
.login-wrap  { width: 100%; max-width: 420px; padding: 1rem; margin: auto; }
.login-logo  { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; letter-spacing: 4px; text-align: center; margin-bottom: .25rem; }
.login-logo span { color: var(--rouge); }
.login-sub   { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.login-card  { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; }
.login-card h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 2px; color: var(--rouge); margin-bottom: 1.25rem; }
.login-hint  { margin-top: 1.25rem; text-align: center; font-size: .8rem; color: var(--muted); }
.login-ball  { font-size: 2.5rem; text-align: center; margin-bottom: .5rem; display: block; animation: spin 4s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---- FOOTER ---- */
footer {
  text-align: center;
  padding: 1.5rem;
  font-size: .78rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ---- MOBILE ---- */
@media (max-width: 600px) {
  main { padding: 1.25rem 1rem; }
  .form-row { flex-direction: column; }

  nav { height: auto; flex-direction: column; align-items: stretch; padding: 0; }
  .nav-brand {
    padding: .55rem 1rem;
    font-size: 1.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-user-mobile { display: block; font-size: .75rem; font-family: 'DM Sans', sans-serif; letter-spacing: 0; color: var(--muted); }
  .nav-user-mobile strong { color: var(--text); font-weight: 600; }

  /* Hamburger button */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    flex-shrink: 0;
    margin-left: .5rem;
  }
  .nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav links : cachés par défaut, visibles quand menu ouvert */
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: .25rem 0 .5rem;
    border-top: 1px solid var(--border);
    white-space: normal;
    overflow-x: visible;
  }
  nav.nav-open .nav-links { display: flex; }

  .nav-links a {
    padding: .7rem 1.25rem;
    font-size: .9rem;
    border-radius: 0;
    flex-shrink: unset;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
  }
  .nav-links a:last-of-type { border-bottom: none; }
  .nav-links a:hover, .nav-links a.active { background: var(--border); color: var(--text); }
  .nav-links a.admin-link { color: var(--or); }
  .nav-user { display: none; }
  .nav-links .btn-ghost.btn-sm {
    padding: .7rem 1.25rem;
    font-size: .9rem;
    border-radius: 0;
    border-bottom: none;
    text-align: left;
    margin: 0;
    color: var(--muted);
  }
}

/* ============================================================
   Utilitaires — remplacent les styles inline répétitifs
   ============================================================ */

/* Texte */
.u-muted        { color: var(--muted); }
.u-rouge        { color: var(--rouge); }
.u-or           { color: var(--or); }
.u-vert         { color: #6ee; }
.u-bold         { font-weight: 600; }
.u-sm           { font-size: .85rem; }
.u-xs           { font-size: .78rem; }
.u-xxs          { font-size: .72rem; }
.u-muted-sm     { font-size: .8rem;  color: var(--muted); }
.u-muted-xs     { font-size: .78rem; color: var(--muted); }
.u-rouge-xs     { font-size: .75rem; color: var(--rouge); }
.u-or-xs        { font-size: .7rem;  color: var(--or); }

/* Alignement */
.u-tc  { text-align: center; }
.u-tr  { text-align: right; }
.u-tl  { text-align: left; }
.u-tc-muted    { text-align: center; color: var(--muted); }
.u-tc-muted-p  { text-align: center; color: var(--muted); padding: 2rem; }

/* Flex */
.u-flex         { display: flex; }
.u-flex-center  { display: flex; align-items: center; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.u-flex-end     { display: flex; align-items: flex-end; }
.u-flex-gap4    { display: flex; gap: .4rem; }
.u-flex-gap5    { display: flex; gap: .5rem; }
.u-flex-row-mb  { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.u-inline       { display: inline; }
.u-hidden       { display: none; }

/* Marges */
.u-mb0  { margin-bottom: 0; }
.u-mb5  { margin-bottom: .5rem; }
.u-mb75 { margin-bottom: .75rem; }
.u-mb1  { margin-bottom: 1rem; }
.u-mb15 { margin-bottom: 1.5rem; }
.u-mt15 { margin-top: 1.5rem; }
.u-mt6  { margin-top: .6rem; }
.u-m0   { margin: 0; }

/* Cards admin */
.card-flush   { padding: 0; }
.card-flush15 { padding: 0; margin-bottom: 1.5rem; }
.row-me       { background: rgba(212,43,43,.06); }
.row-me-alt   { background: rgba(212,43,43,.08); }

/* Tableau score — cellules fixes */
.td-score    { width: 60px;  text-align: center; }
.td-score-sm { width: 48px;  text-align: center; padding: .25rem; }
.td-icon     { width: 2.5rem; }
.td-w160     { width: 160px; }
.td-nowrap   { white-space: nowrap; }
.td-center   { text-align: center; padding: .4rem .3rem; }
.td-center-sm{ text-align: center; padding: .45rem .3rem; font-size: .82rem; color: var(--muted); }
.td-center-lg{ text-align: center; padding: .45rem .3rem; font-weight: 700; font-size: .95rem; }

/* Admin — score large */
.score-xl    { font-size: 1.8rem; }
.btn-lg-full { font-size: 1rem; padding: .7rem 2.5rem; }

/* Utilitaires supplémentaires */
.u-tc-or        { text-align: center; color: var(--or); }
.u-tc-vert      { text-align: center; color: #6ee; }
.u-tc-muted-sm  { text-align: center; font-size: .8rem; color: var(--muted); }
.u-mt6-tc       { margin-top: .6rem; text-align: center; }

/* Tableau groupes (tableau.php) */
.td-grp         { text-align: center; padding: .4rem .3rem; }
.td-grp-sm      { text-align: center; padding: .45rem .3rem; font-size: .82rem; color: var(--muted); }
.td-grp-bold    { text-align: center; padding: .45rem .3rem; font-weight: 700; font-size: .95rem; }

/* Token user (admin) */
.token-code {
  font-size: .78rem;
  background: #111;
  padding: .15rem .45rem;
  border-radius: 4px;
  user-select: all;
  font-family: monospace;
}

/* Scroll horizontal pour tables sur mobile */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
/* Sur mobile : réduire la taille des cellules de tableau */
@media (max-width: 600px) {
  .table-wrap th,
  .table-wrap td { font-size: .78rem; padding: .5rem .4rem; }
}

/* Widget pronostic classement de groupe */
.prono-groupe-rank {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.pgr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.pgr-label { font-size: .83rem; font-weight: 600; color: var(--text); }
.pgr-list  { margin: 0; padding: .2rem 0; }
.pgr-item  {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pgr-item:last-child { border-bottom: none; }
.pgr-pos {
  width: 1.3rem;
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.pgr-team  { flex: 1; font-size: .88rem; }
.pgr-btns  { display: flex; gap: .2rem; flex-shrink: 0; }
.pgr-btn {
  background: #1e1e1e;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: .2rem .5rem;
  font-size: .75rem;
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
}
.pgr-btn:active { background: #2a2a2a; }
.pgr-locked .pgr-team { color: var(--muted); }

/* ---- NAV BADGE (alertes pronostics urgents) ---- */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rouge);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 99px;
  padding: 0 3px;
  margin-left: .3rem;
  vertical-align: middle;
  line-height: 1;
}

/* ---- DASHBOARD ---- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.dash-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  margin-bottom: 0;
}
.dash-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  color: var(--rouge);
  line-height: 1;
}
.dash-stat-sub {
  font-size: 1.1rem;
  color: var(--muted);
}
.dash-stat-lbl {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dash-section { margin-bottom: 2rem; }
.dash-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .75rem;
  color: var(--text);
}
.dash-urgent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .875rem 1rem;
  margin-bottom: .5rem;
}
.dash-urgent-item .h2h-mini {
  width: 100%;
  margin-top: .25rem;
  padding-top: .5rem;
}
.urgent-hot    { border-color: var(--rouge); }
.dash-miss-prono { border-color: var(--rouge); }
a.dash-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.dash-card-link:hover { border-color: var(--rouge); filter: brightness(1.07); }

/* Prono status row */
.dash-prono-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}
.dash-prono-lbl   { color: var(--muted); }
.dash-prono-miss  { color: var(--rouge); font-weight: 600; }
.dash-prono-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .5px;
}
.dash-prono-btn { margin-left: auto; flex-shrink: 0; }

/* Countdown */
.dash-countdown {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.dash-cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.8rem;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  padding: .3rem .4rem .2rem;
}
.dash-cd-block span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
}
.dash-cd-block small {
  font-size: .58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .1rem;
}
.dash-cd-sep {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--border);
  align-self: flex-start;
  padding-top: .3rem;
  flex-shrink: 0;
}
.dash-match-teams {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: .92rem;
  flex: 1;
  min-width: 0;
}
.vs-sep { color: var(--muted); flex-shrink: 0; }
.dash-urgent-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--muted);
  flex-shrink: 0;
}
/* ---- Match Hero Card (home — prochains matchs) ---- */
.dash-hero-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(160deg, #1e1e1e 0%, #141414 55%, rgba(160,30,30,.08) 100%);
  transition: border-color .2s, filter .2s;
}
.dash-hero-card:hover      { border-color: var(--rouge); filter: brightness(1.06); }
.dash-hero-card.dash-miss-prono { border-color: var(--rouge); }
.dash-hero-card.urgent-hot { border-color: var(--rouge); }

.dash-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem .875rem;
  background: rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .72rem;
  color: var(--muted);
  gap: .5rem;
}

.dash-hero-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem 1.1rem;
  gap: .5rem;
}

.dash-hero-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}

.dash-hero-emoji {
  font-size: 3.5rem;
  line-height: 1;
}

.dash-hero-name {
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #e8e8e8;
  max-width: 9rem;
}

.dash-hero-vs {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  color: var(--muted);
  flex-shrink: 0;
  padding: 0 .5rem;
  align-self: center;
}

.dash-hero-bottom {
  padding: .75rem 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

.dash-hero-date {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: .65rem;
}

@media (max-width: 600px) {
  .dash-hero-emoji { font-size: 2.6rem; }
  .dash-hero-vs    { font-size: 1.75rem; }
  .dash-hero-name  { font-size: .75rem; }
}

.dash-recent-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  margin-bottom: .5rem;
}
.dash-recent-teams { font-size: .88rem; }
.dash-recent-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 1px;
}
.dash-recent-pts {
  font-weight: 700;
  font-size: .9rem;
  min-width: 56px;
  text-align: right;
  flex-shrink: 0;
}
@media (max-width: 500px) {
  .dash-stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .dash-stat-val { font-size: 1.8rem; }
  .dash-stat-lbl { font-size: .7rem; }
  .dash-match-teams { font-size: .82rem; gap: .35rem; }
}

/* ---- MULTI-SERVICE (admin) ---- */
.service-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
}
.service-check-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.service-check-item input[type=checkbox] {
  width: auto;
  cursor: pointer;
  accent-color: var(--rouge);
}

/* ---- EVOLUTION ---- */
.evo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.evo-toggles {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.evo-chart-card {
  padding: 1.25rem 1rem 1rem;
  position: relative;
  height: 460px;
}
@media (max-width: 600px) {
  .evo-chart-card { height: 320px; }
}

/* ============================================================
   PUBLIC PAGES — header/footer partagé (resultats, bracket)
   ============================================================ */
.pub-header {
  background: var(--surface);
  border-bottom: 2px solid var(--rouge);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.pub-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
}
.pub-logo span { color: var(--rouge); }
footer.pub-footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: .78rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

/* ============================================================
   BRACKET — page tableau public/protégé
   ============================================================ */
.bk-container { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.bk-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--rouge);
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.bk-section-title:first-of-type { margin-top: 0; }

/* Grille groupes */
.bk-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .625rem;
  margin-bottom: .625rem;
}
@media (max-width: 1100px) { .bk-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .bk-row { grid-template-columns: repeat(2, 1fr); } }

.bk-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.bk-group-head {
  background: var(--rouge);
  padding: .35rem .7rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bk-group-head-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  letter-spacing: 0;
  opacity: .8;
  font-weight: 400;
}
.bk-gtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bk-gtable thead th {
  font-size: .6rem;
  color: var(--muted);
  text-transform: uppercase;
  padding: .25rem .3rem;
  text-align: center;
}
.bk-gtable thead th:nth-child(2) { text-align: left; }
.bk-gtable tbody tr { border-bottom: 1px solid #191919; }
.bk-gtable tbody tr:last-child { border-bottom: none; }
.bk-gq1 { border-left: 3px solid var(--vert); background: rgba(43,173,92,.06); }
.bk-gq3 { border-left: 3px solid var(--or);   background: rgba(240,180,41,.04); }
.bk-gq4 { border-left: 3px solid transparent; }
.bk-gpos  { width: 1.3rem; text-align: center; padding: .38rem .2rem; font-size: .7rem; color: var(--muted); }
.bk-gteam { padding: .38rem .3rem; font-size: .75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-gpts  { text-align: center; padding: .38rem .25rem; font-weight: 700; font-size: .82rem; }
.bk-gnum  { text-align: center; padding: .38rem .25rem; font-size: .72rem; color: var(--muted); }
.bk-gdiff { text-align: center; padding: .38rem .25rem; font-size: .72rem; }
.bk-gdiff.pos { color: var(--vert); }
.bk-gdiff.neg { color: #f88; }
.bk-legend {
  display: flex;
  gap: 1rem;
  font-size: .7rem;
  color: var(--muted);
  margin: .5rem 0 .25rem;
}
.bk-leg-q1 { color: var(--vert); }
.bk-leg-q3 { color: var(--or); }

/* Bracket éliminatoire */
.bk-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scroll-snap-type: x proximity;
}
.bk-bracket {
  display: flex;
  align-items: stretch;
  min-width: max-content;
}
.bk-round {
  display: flex;
  flex-direction: column;
  width: 175px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}
.bk-round:last-child { border-right: none; }
.bk-round-label {
  background: var(--rouge);
  font-family: 'Bebas Neue', sans-serif;
  font-size: .88rem;
  letter-spacing: 1.5px;
  text-align: center;
  padding: .4rem .5rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.bk-round-matches {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: .5rem;
}
.bk-match {
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  background: #111;
  position: relative;
}
.bk-match-played { border-color: #333; }
.bk-match-live   { border-color: var(--rouge); }
.bk-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .28rem .5rem;
  font-size: .76rem;
  font-weight: 500;
  gap: .35rem;
  min-height: 24px;
  white-space: nowrap;
  overflow: hidden;
}
.bk-team:not(:last-child) { border-bottom: 1px solid #191919; }
.bk-team-name  { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.bk-team-score { font-family: 'Bebas Neue', sans-serif; font-size: .95rem; flex-shrink: 0; letter-spacing: .5px; }
.bk-winner     { background: rgba(43,173,92,.12); font-weight: 700; }
.bk-tbd        { color: var(--muted); font-style: italic; font-size: .7rem; }
.bk-match-date {
  text-align: center;
  font-size: .58rem;
  color: var(--muted);
  padding: .1rem;
  border-top: 1px solid #191919;
  background: #0d0d0d;
}
.bk-round-finale { width: 200px; }
.bk-round-finale .bk-match { background: rgba(212,43,43,.08); border-color: var(--rouge); }
.bk-round-finale .bk-team  { font-size: .82rem; min-height: 30px; }
.bk-scroll-hint {
  display: none;
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .5rem;
  text-align: right;
}
@media (max-width: 900px) { .bk-scroll-hint { display: block; } }
@media (max-width: 600px) {
  .bk-round { width: 148px; }
  .bk-team  { font-size: .7rem; }
}

/* ---- H2H MINI WIDGET (home.php) ---- */
.h2h-mini {
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.h2h-mini-title {
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.h2h-mini-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  padding: .1rem 0;
}
.h2h-mini-year {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .88rem;
  color: var(--rouge);
  width: 2.4rem;
  flex-shrink: 0;
}
.h2h-mini-comp {
  flex: 1;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
}
.h2h-mini-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  flex-shrink: 0;
  letter-spacing: .5px;
}

/* ---- HISTORIQUE PAGE ---- */
.hist-form-card { max-width: 700px; }
.hist-form { display: flex; flex-direction: column; gap: 1rem; }
.hist-selects {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.hist-select {
  flex: 1;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .45rem .6rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: inherit;
}
.hist-select:focus { outline: none; border-color: var(--rouge); }
.hist-vs {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  color: var(--muted);
  flex-shrink: 0;
}
.hist-bilan {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.hist-bilan-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.hist-bilan-team {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .95rem;
  flex: 1;
}
.hist-bilan-team-r {
  flex-direction: row-reverse;
  text-align: right;
}
.hist-bilan-emoji { font-size: 1.5rem; line-height: 1; }
.hist-bilan-scores {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-shrink: 0;
}
.hist-bilan-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  min-width: 1.8rem;
  text-align: center;
  line-height: 1;
  color: var(--muted);
}
.hist-bilan-win { color: var(--text); }
.hist-bilan-sep { color: var(--border); font-size: 1.4rem; }
.hist-bilan-legend {
  display: flex;
  gap: .5rem;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hist-bilan-sub { font-size: .8rem; color: var(--muted); }
.hist-teams-cell { font-size: .85rem; }
.hist-winner { font-weight: 700; }
.hist-neutral {
  font-size: .62rem;
  color: var(--muted);
  padding: .08rem .28rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-left: .3rem;
  vertical-align: middle;
}
.hist-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: var(--text);
  margin: 1.6rem 0 .6rem;
  max-width: 700px;
}
.hist-res {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: .1rem .4rem;
  border-radius: 4px;
  min-width: 1.6rem;
  text-align: center;
}
.hist-res-v { background: rgba(43,173,92,.18); color: var(--vert); }
.hist-res-n { background: rgba(255,255,255,.08); color: var(--muted); }
.hist-res-d { background: rgba(220,50,47,.18); color: var(--rouge); }
@media (max-width: 600px) {
  .hist-bilan-big   { font-size: 1.7rem; }
  .hist-bilan-emoji { font-size: 1.2rem; }
  .hist-bilan-team  { font-size: .82rem; }
  .hist-select      { min-width: 140px; }
}