/* ═══════════════════════════════════════════════════════════════════════
   Ligue ebTV — système de design unifié
   Feuille partagée par toutes les pages.
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0d0a14;
  --surface:     #15111f;   /* remplissage solide (cartes de manche, inputs, slots) */
  --surface2:    #241d33;   /* survol / bandeaux d'en-tête */
  --accent:      #ff2f92;
  --accent-dark: #d81e78;
  --blue:        #1f1b29;   /* bouton fantôme / inputs hérités */
  --text:        #f4f2fb;
  --muted:       #9d96b8;
  --body:        #c9c3dd;
  --win:         #2fe88a;
  --lose:        #ff2f92;
  --yellow:      #ffe14d;
  --cyan:        #12e0e0;
  --panel:        rgba(255,255,255,.05);   /* verre des cartes de la refonte */
  --panel-border: rgba(255,255,255,.10);
  --line:         rgba(255,255,255,.08);
  --radius:      14px;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  text-wrap: pretty;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--yellow); }
button { font-family: inherit; }

/* ── Coquille (fond + blobs d'encre) ─────────────────────────────────── */
/* « clip » et non « hidden » : les deux rognent les halos qui debordent du
   cadre, mais « hidden » fait de .app un conteneur de defilement, et la barre
   collante se met alors a coller a LUI, qui ne defile jamais. « clip » rogne
   sans creer ce conteneur, donc la barre colle bien a la fenetre.
   La declaration « hidden » reste en premier comme repli : un navigateur qui
   ignore « clip » garde le comportement d'avant, halos rognes et barre fixe
   en haut de page. */
.app { min-height: 100vh; position: relative; overflow: hidden; overflow: clip; }
.content { position: relative; z-index: 1; }
.blob { position: absolute; pointer-events: none; z-index: 0; border-radius: 44% 56% 60% 40%/50% 45% 55% 50%; }
.blob-pink { width: 480px; height: 480px; top: -160px; right: -160px;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%); opacity: var(--blob-pink-op, .22); }
.blob-cyan { width: 420px; height: 420px; bottom: -140px; left: -140px;
  border-radius: 50% 50% 40% 60%/45% 55% 45% 55%;
  background: radial-gradient(circle at 60% 60%, var(--cyan), transparent 70%); opacity: var(--blob-cyan-op, .15); }

/* ── Nav partagée ────────────────────────────────────────────────────── */
/* La barre suit le defilement : sur les pages longues (rapport de match,
   fiche joueur, annuaire) on perdait la navigation des les premiers ecrans.
   Le fond est opaque et floute ce qui passe dessous, sinon le contenu se lit
   au travers. La hauteur est exposee en variable : l'ancre d'une manche
   (#m-3) doit s'arreter SOUS la barre, et un autre element colle doit se
   caler en dessous, pas derriere. */
:root { --hauteur-nav: 65px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px clamp(16px,4vw,32px); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Les navigateurs sans color-mix retombent sur un fond plein. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .nav { background: var(--bg); }
}

/* Une ancre ne doit pas atterrir sous la barre. */
[id] { scroll-margin-top: calc(var(--hauteur-nav) + 12px); }
/* --hauteur-nav est une valeur de depart : nav.js la remplace par la hauteur
   reellement mesuree, qui depend du contenu de la barre et de la largeur. */

.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.nav-brand img { width: 32px; height: 32px; }
.nav-brand span { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.nav-brand sup { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-left: 3px; vertical-align: super; }
.nav-brand:hover { color: var(--text); }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px,3vw,28px); }
.nav-link { color: var(--muted); font-weight: 600; font-size: 13.5px; }
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); font-weight: 700; }
.btn-account { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 13px; display: inline-block; }
.btn-account:hover { background: rgba(255,255,255,.14); color: var(--text); }
.btn-connect { background: var(--yellow); color: #1a1300; border: none; border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: 13px; display: inline-block; }
.btn-connect:hover { background: #fff0a0; color: #1a1300; }

/* Sur un ecran etroit la barre passait a la ligne : collante, elle aurait
   mange la moitie de la hauteur utile. Les liens tiennent donc sur une seule
   ligne et defilent horizontalement, comme les onglets de l'administration.
   La barre reste ainsi a une hauteur constante quelle que soit la largeur. */
@media (max-width: 760px) {
  :root { --hauteur-nav: 57px; }
  .nav { flex-wrap: nowrap; gap: 10px; padding: 10px clamp(12px,4vw,20px); }
  .nav-brand span { display: none; }
  .nav-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
               gap: 16px; min-width: 0; -webkit-overflow-scrolling: touch; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; }
  .btn-connect, .btn-account { flex: none; padding: 7px 14px; font-size: 12px; }
}

/* ── Menu du smartphone (public/js/nav.js, barreMobile) ─────────────────
   Sous 760 px, les liens de la barre du haut cèdent la place à une barre
   d'onglets fixée en bas (maquette A du 7 octobre 2026). En haut il reste le
   logo, FR/EN et le compte. La barre n'existe que sur les pages qui ont des
   liens de navigation ; elle ne s'affiche pas sur ordinateur. */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .avec-barre-mobile .nav-links { display: none; }
  .barre-mobile { display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .barre-mobile a { display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 0 3px; border-radius: 12px; color: var(--muted);
    font-size: 10.5px; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .barre-mobile a:active { background: rgba(255,255,255,.06); }
  .barre-mobile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round; }
  .barre-mobile a.on { color: var(--text); }
  .barre-mobile a.on svg { color: var(--accent); }
  .barre-mobile a.on::after { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--accent); }
  /* La place de la barre, réservée en bas de page : sans elle, la fin de
     chaque page (pied de page, bouton « Voir plus ») resterait dessous. */
  .avec-barre-mobile body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* Pendant une saisie, la barre se retire (voir nav.js). */
  .saisie-en-cours .barre-mobile { display: none; }
  .saisie-en-cours body { padding-bottom: 0; }
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .barre-mobile { background: var(--bg); }
}

/* ── Conteneurs centrés ──────────────────────────────────────────────── */
.page { max-width: 1100px; margin: 0 auto; padding: clamp(20px,5vw,32px) 20px 90px; }
.wrap-560 { max-width: 560px; margin: 0 auto; padding: clamp(28px,7vw,56px) 20px 90px; }
.wrap-720 { max-width: 720px; margin: 0 auto; padding: clamp(20px,5vw,32px) 20px 90px; }
.wrap-760 { max-width: 760px; margin: 0 auto; padding: clamp(20px,5vw,32px) 20px 90px; }
.wrap-840 { max-width: 840px; margin: 0 auto; padding: clamp(20px,5vw,36px) 20px 90px; }

/* ── Titres ──────────────────────────────────────────────────────────── */
h1 { font-size: clamp(22px,5vw,26px); font-weight: 800; letter-spacing: -.01em; color: var(--text); }
h1.page-title { margin: 0 0 4px; }
h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; }
.subtitle { font-size: 13.5px; color: var(--muted); margin: .25rem 0 26px; }
.subtitle-center { font-size: 13.5px; color: var(--muted); text-align: center; margin: 0 0 26px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 14px; text-align: center; }
h1.title { font-size: clamp(28px,7vw,40px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
  margin: 0 0 16px; text-align: center; }
.lead { font-size: 15px; color: var(--body); line-height: 1.6; text-align: center; margin: 0 0 40px; }
.section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 22px 0 10px; }

/* ── Cartes ──────────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px;
  padding: 22px 24px; margin-bottom: 16px; backdrop-filter: blur(6px); }
.card h2 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.card p.desc { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn { display: block; width: fit-content; margin: .75rem auto 0; padding: .8rem 1.25rem;
  background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; border: none;
  border-radius: 10px; cursor: pointer; text-align: center; text-decoration: none; transition: background .15s, filter .15s; }
.btn:hover:not(:disabled) { background: var(--accent-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.btn-primary { display: block; width: 100%; text-align: center; padding: 13px; border: none; border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), var(--yellow)); color: #1a0a14; font-weight: 800; font-size: 14px;
  cursor: pointer; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-secondary { display: block; width: 100%; text-align: center; padding: 12px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text);
  font-weight: 700; font-size: 13.5px; cursor: pointer; }
.btn-secondary:hover { background: rgba(255,255,255,.14); color: var(--text); }

/* ── Formulaires ─────────────────────────────────────────────────────── */
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .35rem; }
input[type="text"], input.text-input {
  width: 100%; padding: .65rem .85rem; background: var(--surface);
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: var(--text); font-size: .95rem;
  font-family: inherit; outline: none; }
input[type="text"]:focus, input.text-input:focus { border-color: var(--accent); }
input[type="text"]::placeholder { color: #66607a; }
select.team-select { background: var(--surface); border: 1px solid rgba(255,255,255,.14); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; font-family: inherit; }

/* ── Étapes (page de connexion) ──────────────────────────────────────── */
.steps, .step-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-num { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.08);
  color: var(--accent); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.step p { font-size: 13px; color: var(--body); line-height: 1.55; }
.step strong { color: var(--text); }
.error-text { color: var(--accent); font-size: 12.5px; margin-top: 10px; min-height: 1em; }

/* ── Pills (filtres division / mode) ─────────────────────────────────── */
.pill { padding: 8px 18px; background: transparent; border: 2px solid rgba(255,255,255,.14); border-radius: 999px;
  color: var(--body); font-size: 13px; font-weight: 700; cursor: pointer; }
.pill:hover { border-color: rgba(255,255,255,.3); color: var(--text); }
.pill.active { background: rgba(255,47,146,.15); border-color: var(--accent); color: #fff; }
.pill-sm { padding: 6px 14px; font-size: 12px; }

/* ── Liste de matchs (lobby / sélection) ─────────────────────────────── */
.battle-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.battle-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem 1.1rem; display: flex; align-items: center; gap: 1rem; cursor: pointer;
  border: 2px solid transparent; transition: border-color .12s, background .12s; user-select: none;
  position: relative; overflow: hidden; }
.battle-item::before { content: ''; position: absolute; inset: 0;
  background: var(--stage-bg, none) center/cover no-repeat; opacity: .13; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 45%);
  mask-image: linear-gradient(to bottom, transparent 10%, black 45%); }
.battle-item > * { position: relative; z-index: 1; }
.battle-item:hover { background: rgba(255,255,255,.09); }
.battle-item.selected { border-color: var(--accent); background: rgba(255,47,146,.12); }
.battle-item input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent);
  flex-shrink: 0; pointer-events: none; }
.battle-info { flex: 1; }
.battle-main { font-weight: 700; font-size: .95rem; }
.battle-sub { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.battle-result { font-weight: 700; font-size: .88rem; }
.win  { color: var(--win); }
.lose { color: var(--lose); }
.draw { color: var(--muted); }

.selection-hint { color: var(--muted); font-size: .88rem; margin-bottom: .5rem; }
.selection-hint span { color: var(--accent); font-weight: 700; }

/* ── En-tête de match + manches (résultat) ───────────────────────────── */
.match-header { text-align: center; padding: 2rem 1rem; background: var(--panel);
  border: 1px solid var(--panel-border); border-radius: 16px; margin-bottom: 1rem; }
.score-display { font-size: 2.5rem; font-weight: 800; margin: .5rem 0; }
.score-display .divider { color: var(--muted); margin: 0 .5rem; }
.score-alpha { color: var(--win); }
.score-bravo { color: var(--lose); }

.round-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px;
  overflow: hidden; margin-bottom: .75rem; position: relative; }
.round-card::before { content: ''; position: absolute; inset: 0;
  background: var(--stage-bg, none) center/cover no-repeat; opacity: .13; z-index: 0; pointer-events: none; }
.round-header { padding: .75rem 1.25rem; background: rgba(255,255,255,.04); display: flex; align-items: center;
  gap: .75rem; font-size: .9rem; position: relative; z-index: 1; flex-wrap: wrap; }
.round-header .round-num { font-weight: 700; }
.round-header .round-info { color: var(--muted); }
.mode-icon { width: 1.25rem; height: 1.25rem; object-fit: contain; flex-shrink: 0; }
.round-body { padding: 1rem 1.25rem; display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 1rem; position: relative; z-index: 1; }
.team-label { font-weight: 700; font-size: .85rem; margin-bottom: .5rem; }
.player-row { display: flex; justify-content: space-between; font-size: .82rem; padding: .2rem 0; }
.player-name { color: var(--text); }
.player-kda { color: var(--muted); font-family: ui-monospace, monospace; }
.team-score { font-size: .8rem; color: var(--muted); margin-top: .4rem; }

/* ── Utilitaires ─────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.center { text-align: center; }
.muted { color: var(--muted); }
.error { color: var(--accent); font-size: .88rem; margin-top: .4rem; }
.info  { color: var(--muted); font-size: .88rem; margin-top: .4rem; }
.success { color: var(--win); font-size: .9rem; margin-top: .5rem; }
.loading-msg { text-align: center; color: var(--muted); padding: 3rem 0; }
.empty-state { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 0; }

/* ── Tableaux et classements : en-tête collant ──────────────────────────
   Règle commune à tout le site (demande du 6 octobre 2026) : quand on
   descend dans un tableau, la ligne d'en-tête reste visible SOUS la barre de
   navigation. La page défile normalement, le tableau n'a jamais son propre
   ascenseur vertical.

   Mode d'emploi : entourer le <table> d'un cadre portant la classe
   « cadre-tableau ». Rien d'autre à faire, y compris pour un tableau construit en
   JavaScript.

   POURQUOI LE CADRE NE DÉFILE PAS EN LARGEUR PAR DÉFAUT. Un élément collant
   colle au premier ancêtre qui défile. Si le cadre avait overflow-x: auto,
   l'en-tête collerait au cadre et non à la fenêtre : il ne bougerait jamais.
   Le cadre ne défile donc en largeur que lorsque le tableau est vraiment
   trop large pour lui. C'est nav.js qui le mesure et pose alors la classe
   « deborde » (cas typique : un téléphone). L'en-tête redevient alors un
   en-tête ordinaire, ce qui est acceptable sur un écran qui ne montre que
   quelques colonnes à la fois.

   Les sélecteurs :where() ont une spécificité nulle : une page qui définit
   déjà le fond ou le filet de ses en-têtes garde les siens. */
.cadre-tableau.deborde { overflow-x: auto; }
/* Sur le <thead> et non sur chaque <th> : un en-tête sur deux lignes (le
   classement des équipes) reste ainsi d'un seul bloc. */
.cadre-tableau:not(.deborde) > table > thead {
  position: sticky; top: var(--hauteur-nav, 65px); z-index: 2;
}
/* Un en-tête collé doit être opaque, sinon les lignes passent à travers. */
:where(.cadre-tableau) > table > thead th { background: var(--surface); }
/* Bordures « separate » et non « collapse ». En mode collapse, les bordures
   appartiennent à la grille du tableau et restent sur place quand l'en-tête
   colle : il s'ouvre alors une fente d'un pixel sous chaque ligne d'en-tête,
   par laquelle on voit défiler les lignes du tableau. En mode separate, chaque
   cellule porte sa bordure et l'emmène avec elle. Avec des bordures posées
   seulement en bas des cellules, le rendu est identique.
   ATTENTION : une page qui écrit « border-collapse: collapse » sur son tableau
   l'emporte sur cette règle ; écrire separate dans la page aussi. */
:where(.cadre-tableau) > table { border-collapse: separate; border-spacing: 0; }
/* Un cadre bordé et arrondi ne coupe plus ce qui dépasse : le fond de
   l'en-tête déborderait de ses coins. Un tel cadre pose --rayon-tableau
   (son rayon moins sa bordure) ; les autres n'arrondissent rien. */
:where(.cadre-tableau) > table > thead tr:first-child th:first-child { border-top-left-radius: var(--rayon-tableau, 0); }
:where(.cadre-tableau) > table > thead tr:first-child th:last-child { border-top-right-radius: var(--rayon-tableau, 0); }
/* En-tête fantôme (public/js/nav.js) : quand le tableau déborde et que son
   cadre défile en largeur, une copie de l'en-tête se fixe sous la barre à la
   place du vrai. Elle prend la largeur visible du cadre et cache ce qui
   dépasse ; nav.js la décale pour suivre le défilement horizontal. Une ombre
   la détache des lignes qui passent dessous. */
.entete-fantome { position: fixed; z-index: 3; overflow: hidden;
  box-shadow: 0 6px 12px -8px rgba(0,0,0,.7); }
.entete-fantome[hidden] { display: none; }
:where(.entete-fantome) > table > thead th { background: var(--surface); }
/* Les coins arrondis du vrai en-tête n'ont pas de sens sous la barre. */
.entete-fantome > table > thead th { border-radius: 0 !important; }

/* ══════════ Barre « Aujourd'hui » (maquette du 7 octobre 2026) ══════════
   Les matchs du jour en cartes, sur « Tous les matchs » (rubrique « Cette
   semaine ») et sur l'accueil. Le HTML vient de /js/aujourdhui.mjs (carteJour),
   le même pour les deux pages : ne styler ces classes qu'ici.
   Préfixes « jour- » et « jc » : .replie et .dv existent déjà ailleurs
   (admin.html, players.html), d'où .jour-replie et .tag-div. */
.jour { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 14px 16px 16px; margin-bottom: 22px;
  background: linear-gradient(180deg, rgba(255,47,146,.10), rgba(255,47,146,.02)), var(--surface); }
.jour-tete { display: flex; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jour-tete h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); }
.jour-tete span { color: var(--muted); font-size: 12.5px; }
.jour-tete a { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--cyan); }
.jour-tete a:hover { color: var(--yellow); }
.jour-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jc { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px 14px; border-radius: 14px;
  background: rgba(13,10,20,.55); border: 1px solid rgba(255,255,255,.1); color: var(--text); text-decoration: none; }
a.jc:hover { border-color: rgba(255,255,255,.28); color: var(--text); }
/* En direct (casté, à regarder) : rouge. En cours (pas de vidéo) : cyan. */
.jc.live { border-color: rgba(229,48,74,.6);
  background: linear-gradient(180deg, rgba(229,48,74,.16), rgba(229,48,74,.03)), rgba(13,10,20,.55); }
.jc.cours { border-color: rgba(18,224,224,.45);
  background: linear-gradient(180deg, rgba(18,224,224,.10), rgba(18,224,224,.02)), rgba(13,10,20,.55); }
/* Ton match : un liseré jaune, qui s'ajoute à la couleur de son état. */
.jc.moi { box-shadow: 0 0 0 2px var(--yellow); }
.jc .moment { font-size: 12px; font-weight: 800; color: var(--cyan); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.jc.live .moment { color: #ff6b7f; }
.jc.fini .moment { color: #2fe88a; }
.jc .eq { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.jc .eq .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc .eq .s { font-variant-numeric: tabular-nums; font-weight: 800; }
.jc .eq .p { color: var(--muted); font-weight: 600; }
.jc small { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.jc small .ton { color: var(--yellow); }
.badge-cours { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 10px; font-weight: 900;
  letter-spacing: .06em; color: var(--cyan); background: rgba(18,224,224,.14); padding: 2px 6px; border-radius: 5px; }
.badge-cours::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* La division du match, quand plusieurs divisions sont mêlées. */
.tag-div { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 5px;
  background: rgba(157,140,255,.16); color: #b6a9ff; letter-spacing: .02em; }
.tag-div.d1 { background: rgba(255,225,77,.16); color: var(--yellow); }
/* Accueil : « +N autres matchs aujourd'hui ». */
.jc.plus { justify-content: center; align-items: center; text-align: center; border-style: dashed;
  border-color: rgba(18,224,224,.45); background: rgba(18,224,224,.05); }
.jc.plus b { font-size: 22px; color: var(--cyan); }
.jc.plus span { font-size: 12px; color: var(--body); font-weight: 700; }
/* « Cette semaine » : les matchs terminés repliés quand la journée est chargée. */
.jour-replie { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px;
  border: 1px dashed rgba(255,255,255,.16); border-radius: 12px; font-size: 12.5px; color: var(--body); }
.jour-replie b { color: #2fe88a; white-space: nowrap; }
.jour-replie span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jour-replie button { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--cyan); cursor: pointer; white-space: nowrap; }
/* Téléphone et tablette : les cartes défilent sur une ligne. */
@media (max-width: 900px) {
  /* Le défilement coupe ce qui dépasse : 2 px de marge intérieure pour que
     le liseré jaune de « Ton match » (box-shadow) reste entier. */
  .jour-cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: -2px; }
  .jc { flex: 0 0 78%; scroll-snap-align: start; }
  .jc.plus { flex-basis: 42%; }
  .jour-replie span { display: none; }
}

/* Chercheur de personne (10 octobre 2026, /js/personne-ui.mjs) : les autres
   noms d'une personne trouvée, celui qui a correspondu en clair. */
.pe-ids { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; }
.pe-id { font-size: 11px; color: var(--muted); font-weight: 600; }
.pe-id.discord { color: #8f9cff; } .pe-id.olympe { color: var(--violet, #a78bfa); }
.pe-id.ici { color: var(--text); font-weight: 800; }

/* ── Logos d'équipe et avatars (11 octobre 2026, public/js/visuels.mjs) ──
   Les initiales sont toujours dessinées ; l'image, si elle charge, les couvre.
   --t : la taille (16 à 72 px) ; --h : la teinte tirée du nom (avatars). */
.vx { position: relative; display: inline-grid; place-items: center; width: var(--t, 28px); height: var(--t, 28px); flex-shrink: 0;
  overflow: hidden; vertical-align: middle; font-weight: 800; line-height: 1; letter-spacing: .02em; font-size: calc(var(--t, 28px) * .38); }
.vx-av { border-radius: 50%; background: hsl(var(--h, 260) 70% 68%); color: #0d0a14; }
.vx-lo { border-radius: 22%; background: rgba(255,255,255,.08); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.vx-ini { pointer-events: none; user-select: none; }
.vx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vx-lo .vx-img { background: var(--surface, #15111f); }

/* ══ Ta semaine (maquette « Mes matchs de la semaine », 11 octobre 2026) ══
   Les matchs de l'équipe du joueur pour la semaine : bloc de l'accueil et
   encadré en tête de Ligue › Cette semaine › Matchs. HTML : blocMaSemaine
   (/js/aujourdhui.mjs). Une ligne : quand, contre qui, l'action. */
.ms-resume { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ms-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--body); line-height: 1.3; }
.ms-chip.ok { color: var(--win); border-color: rgba(47,232,138,.35); background: rgba(47,232,138,.08); }
.ms-chip.jn { color: var(--yellow); border-color: rgba(255,225,77,.35); background: rgba(255,225,77,.07); }
.ms-chip.cy { color: var(--cyan); border-color: rgba(18,224,224,.35); background: rgba(18,224,224,.07); }
.ms-chip.ko { color: #ff6b7f; border-color: rgba(255,107,127,.4); background: rgba(255,107,127,.08); }
.ms-chip.live { color: #fff; background: #e5304a; border-color: #e5304a; font-size: 10px; font-weight: 900; letter-spacing: .06em; padding: 2px 7px; justify-self: start; }
.ms-chip.cast, .ms-chip.tw { color: var(--text); }
.ms-pt { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; flex: none; }
.ms-pt.pale { background: var(--muted); }
.ms-liste { display: grid; gap: 8px; }
.ms-l { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0;
  border: 1px solid var(--panel-border); border-radius: 13px; padding: 10px 12px; background: rgba(13,10,20,.45); }
.ms-l.ce-soir { border-color: rgba(255,225,77,.55); background: linear-gradient(90deg, rgba(255,225,77,.07), rgba(13,10,20,.45) 60%); }
.ms-l.direct { border-color: rgba(255,107,127,.6); background: linear-gradient(90deg, rgba(255,107,127,.09), rgba(13,10,20,.45) 60%); }
.ms-l.cours { border-color: rgba(18,224,224,.45); }
.ms-l.afixer { border-style: dashed; border-color: rgba(255,225,77,.45); }
.ms-l.attente { border-color: rgba(255,107,127,.5); }
.ms-q { display: grid; gap: 2px; min-width: 0; }
.ms-q b { color: var(--text); font-size: 13.5px; }
.ms-q small { color: var(--muted); font-size: 11.5px; }
.ms-res { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.ms-res.v { color: var(--win); } .ms-res.d { color: #ff6fb2; }
.ms-qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-qui > span { min-width: 0; }
.ms-qui b { display: block; color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-lg { width: 34px; height: 34px; border-radius: 10px; flex: none; object-fit: cover; display: grid; place-items: center;
  font-weight: 800; font-size: 12px; color: #0d0a14; background: linear-gradient(140deg, #bde0fe, #c8b6ff); }
img.ms-lg { background: rgba(255,255,255,.06); }
.ms-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.ms-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ms-bt { display: inline-block; padding: 6px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-decoration: none;
  color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--panel-border); }
.ms-bt:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.ms-bt.jn { color: var(--yellow); border-color: rgba(255,225,77,.45); background: rgba(255,225,77,.07); }
.ms-bt.live { color: #fff; background: #e5304a; border-color: #e5304a; }
.ms-vide { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.ms-vide b { color: var(--text); }
.ms-resume + .ms-vide, .ms-vide:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .ms-l { grid-template-columns: 84px minmax(0, 1fr); }
  .ms-act { grid-column: 1 / -1; justify-content: flex-start; }
}
/* L'encadré de Ligue › Cette semaine › Matchs, au-dessus du filtre de division. */
.ms-encadre { border: 1px solid rgba(255,225,77,.4); background: rgba(255,225,77,.035); border-radius: 16px; padding: 14px; margin: 0 0 16px; min-width: 0; }
.ms-encadre .ms-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.ms-encadre .ms-tete h2 { margin: 0; font-size: 16px; color: var(--text); }
.ms-encadre .ms-tete small { color: var(--muted); font-size: 12px; }

/* Les icônes des modes (12 octobre 2026) : public/js/visuels.mjs, iconeMode, et
   sa copie dans les fiches Ligue. La taille vient des attributs width et height. */
.ico-mode { flex: none; object-fit: contain; vertical-align: -4px; }
.mode-ico { display: inline-flex; gap: 7px; align-items: center; }