:root {
  --fond: #0b1220;
  --carte: #131c2e;
  --carte2: #1a2540;
  --trait: #263352;
  --texte: #e8edf7;
  --doux: #94a3c0;
  --vert: #3ee07a;
  --vert-fonce: #1f9e52;
  --or: #f5c542;
  --rouge: #ff6b6b;
  --rayon: 14px;
  --barre: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom) + 12px);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }

/* ---------- en-tête : le nom tout en haut ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-start;
  height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0;
  background: rgba(11, 18, 32, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
/* le logo cède de la place quand la flèche retour et la série sont là (petits écrans) : il rétrécit, rien ne se chevauche */
/* logo.svg : 906 × 162 (les antennes de la mascotte dépassent au-dessus des deux O) → 218 × 39 px, lettres de la même taille qu'avant */
.marque { display: flex; align-items: center; flex: 0 1 218px; min-width: 0; }
.marque img { display: block; width: 100%; height: auto; }
.entete-actions { display: flex; gap: 8px; flex: none; margin-left: auto; padding-left: 10px; margin-right: -4px; }
/* la flèche retour, à gauche du logo, sur toute page qui n'est pas la racine d'un onglet : zone tactile de 44 px */
.retour { flex: none; width: 44px; height: 44px; margin: 0 2px 0 -12px; padding: 0 0 4px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; font-size: 34px; line-height: 1; font-weight: 600; color: var(--texte); border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.retour[hidden] { display: none; }
.retour:active { background: var(--carte2); }
.retour:focus-visible { outline: 2px solid var(--vert); outline-offset: -4px; }
.rond {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--carte2); border: 1px solid var(--trait);
  font-weight: 800; font-size: 15px; text-transform: uppercase;
}
.rond svg { width: 19px; height: 19px; fill: currentColor; }
.rond.actif { border-color: var(--vert); color: var(--vert); }
.avatar.connecte, .avatar.connecte.actif { font-size: 14px; color: #fff; }
.avatar.connecte { background: var(--vert-fonce); border-color: var(--vert); }

/* ---------- barre d'onglets en bas ---------- */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--barre) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(13, 21, 38, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait);
}
.onglets a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--doux); font-size: 11.5px; font-weight: 600; }
.onglets svg { width: 25px; height: 25px; fill: currentColor; }
.onglets a.actif { color: var(--vert); }

main { max-width: 760px; margin: 0 auto; padding: 14px 16px 24px; outline: none; }

/* ---------- blocs ---------- */
h1 { font-size: 22px; margin: 6px 0 14px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); margin: 22px 0 10px; font-weight: 700; }
h2:first-child { margin-top: 4px; }
h3.jour { font-size: 15px; font-weight: 700; margin: 16px 2px 8px; }
h3.jour::first-letter { text-transform: uppercase; }
h2 + h3.jour { margin-top: 0; }
.voir-jour { display: block; text-align: center; padding: 10px; margin-top: 6px; font-weight: 700; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; }
.carte + .carte { margin-top: 10px; }
.doux { color: var(--doux); }
.petit { font-size: 13px; }
.vide { color: var(--doux); text-align: center; padding: 22px 12px; border: 1px dashed var(--trait); border-radius: var(--rayon); }
.pile > * + * { margin-top: 10px; }
.ligne { display: flex; align-items: center; gap: 10px; }
.ligne .pousse { flex: 1; min-width: 0; }
/* ⚠️ Un texte tronqué doit être un BLOC : sur un élément en ligne (un <span> nu), ni `overflow` ni l'ellipse ne s'appliquent,
   et le texte file sous ce qui le suit (la note d'un joueur passait sous les boutons ▲ ▼). D'où `display: block` ici. */
.tronque { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dans une ligne, ce qui est à droite (bouton, valeur, pastille) garde sa largeur : c'est le texte qui cède */
.joueur > .bouton, .joueur > button, .joueur > .badge, .joueur > .val, .ligne > .bouton, .ligne > button, .ligne > .badge, .ligne > .logo { flex: none; }
.joueur a.pousse, .joueur .pousse > .sous, .ligne > .pousse { overflow-wrap: anywhere; }

/* sous-onglets (Stats : championnats / joueurs ; Analyse : joueurs / matchs) */
.segments { display: flex; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.segments a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--doux); }
/* les deux modes du carnet (« Vu en entier » / « Vu en résumé ») : des boutons, pas des liens */
.segments.modes button { flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--doux); background: none; border: 0; cursor: pointer; min-height: 44px; font-family: inherit; }
.segments.modes button.actif { background: var(--vert); color: #06210f; }
.segments.modes { margin-bottom: 10px; background: var(--fond, transparent); }
.segments a.actif { background: var(--carte2); color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait); }

.puces { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 0 -16px 10px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puce { flex: none; padding: 7px 13px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); font-size: 13.5px; font-weight: 600; color: var(--doux); cursor: pointer; }
.puce.actif { background: var(--vert); border-color: var(--vert); color: #06210f; }

/* ---------- matchs ---------- */
.match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 11px 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }
.match + .match { margin-top: 8px; }
.match .eq { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 14px; }
.match .eq.ext { flex-direction: row-reverse; text-align: right; }
.match .eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .score { text-align: center; font-weight: 800; font-size: 17px; min-width: 58px; }
.match .score small { display: block; font-size: 11px; font-weight: 600; color: var(--doux); }
.match .meta { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; color: var(--doux); margin-top: -2px; }
.logo { width: 24px; height: 24px; object-fit: contain; flex: none; }
.logo.grand { width: 56px; height: 56px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--carte2); border: 1px solid var(--trait); color: var(--doux); }
.badge.or { background: rgba(245, 197, 66, .14); border-color: rgba(245, 197, 66, .5); color: var(--or); }
.badge.vert { background: rgba(62, 224, 122, .12); border-color: rgba(62, 224, 122, .45); color: var(--vert); }
.badge.direct { background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* ---------- joueurs ---------- */
.joueur { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }
.joueur + .joueur { margin-top: 7px; }
.joueur .rang { width: 24px; text-align: center; font-weight: 800; color: var(--doux); }
.joueur .rang.r1 { color: var(--or); }
.joueur .nom { font-weight: 700; }
.joueur .sous { font-size: 12.5px; color: var(--doux); }
.joueur .pousse { flex: 1; min-width: 0; }
.joueur .nom.tronque { display: inline-block; max-width: 100%; vertical-align: bottom; }
.joueur .val { font-weight: 800; font-size: 17px; text-align: right; white-space: nowrap; flex: none; }
.joueur .val small { display: block; font-size: 11px; color: var(--doux); font-weight: 600; }
.initiales { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--carte2); border: 1px solid var(--trait); position: relative; }
.initiales img { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; background: var(--fond); border-radius: 50%; padding: 1px; }
.poste { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: var(--carte2); color: var(--doux); }

/* ---------- formulaires ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--doux); margin: 12px 0 5px; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--trait); background: var(--carte2); outline: none; font-size: 16px;
}
input:focus, select:focus, textarea:focus { border-color: var(--vert); }
textarea { min-height: 96px; resize: vertical; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 11px; padding: 11px 16px; font-weight: 700; cursor: pointer; background: var(--vert); color: #06210f; }
.bouton.plein { width: 100%; }
.bouton.second { background: var(--carte2); color: var(--texte); border: 1px solid var(--trait); }
.bouton.danger { background: transparent; color: var(--rouge); border: 1px solid rgba(255, 107, 107, .4); }
.bouton.mini { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.bouton:disabled { opacity: .5; }
.icone-bt { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--trait); background: var(--carte2); display: grid; place-items: center; cursor: pointer; flex: none; font-size: 15px; }
.erreur { color: var(--rouge); font-size: 14px; margin-top: 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- fiches ---------- */
.tete { display: flex; align-items: center; gap: 14px; }
.tete h1 { margin: 0; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chiffre { background: var(--carte2); border-radius: 11px; padding: 10px 6px; text-align: center; }
.chiffre b { display: block; font-size: 20px; }
.chiffre span { font-size: 11.5px; color: var(--doux); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--trait); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--doux); font-weight: 600; font-size: 12px; }
.defile { overflow-x: auto; }

.score-geant { text-align: center; }
.score-geant .equipes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.score-geant .equipes div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; }
.score-geant .sc { font-size: 34px; font-weight: 900; letter-spacing: .04em; }
.evenements { margin-top: 10px; font-size: 13px; color: var(--doux); display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.evenements .ext { text-align: right; }

.compo .joueur { padding: 8px 10px; }
.compo .joueur.choisi { border-color: var(--vert); background: rgba(62, 224, 122, .08); }
.top5-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; border: 1px solid var(--trait); flex: none; cursor: pointer; background: var(--carte2); color: var(--doux); }
.top5-num.pris { background: var(--vert); color: #06210f; border-color: var(--vert); }
.stat-mini { font-size: 12px; color: var(--doux); }

.statut { text-align: center; }
.statut .voix { font-size: 46px; font-weight: 900; color: var(--vert); line-height: 1; }
.jauge { height: 10px; border-radius: 99px; background: var(--carte2); overflow: hidden; margin: 12px 0 6px; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--vert-fonce), var(--vert)); border-radius: 99px; }

/* ---------- fenêtre (ajout d'un joueur, repère d'une perf) ---------- */
.voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 40; display: flex; align-items: flex-end; justify-content: center; overscroll-behavior: contain; }
.fenetre { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px 18px 0 0; width: 100%; max-width: 760px; max-height: 88vh; max-height: 88dvh; overflow: auto; overscroll-behavior: contain;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
/* la page derrière une fenêtre ne défile pas (iPhone : seul `position: fixed` tient) ; app.js pose `top` et --fige-y */
body.fond-fige { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.fond-fige .entete { position: relative; top: var(--fige-y, 0px); }
/* « Ajouter un joueur » : la tête, la recherche et les filtres restent en place, seule la liste défile */
.fenetre-ajout { display: flex; flex-direction: column; height: 88vh; height: 88dvh; overflow: hidden; padding-bottom: 0; }
.fenetre-ajout > * { flex: none; }
.ajout-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ajout-tete h3 { flex: 1; min-width: 0; margin: 0; }
.ajout-tete .badge { flex: none; font-size: 12.5px; padding: 3px 9px; }
.fenetre-ajout .puces { margin: 10px -16px 0; padding-bottom: 2px; }
.puce.equipe { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 7px; }
.puce.equipe img { width: 20px; height: 20px; object-fit: contain; }
.puce.equipe .croix { font-size: 11px; margin-left: 2px; }
.ajout-equipes.liste { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ajout-equipes.liste select { flex: 1; min-width: 0; padding-top: 9px; padding-bottom: 9px; }
.ajout-equipes[hidden], .ajout-equipes [hidden] { display: none; }
.ajout-infos { margin: 10px 2px 8px; }
.ajout-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none;
  margin: 0 -16px; padding: 2px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); }
.ligne-ajout { cursor: pointer; }
.ligne-ajout .bouton { min-width: 84px; }
.ligne-ajout .bouton.ajoute { color: var(--vert); border-color: rgba(62, 224, 122, .5); }
.ajout-suite { text-align: center; padding: 16px 0 6px; }
.fenetre h3 { margin: 0 0 10px; font-size: 18px; }
@media (min-width: 700px) { .voile { align-items: center; } .fenetre { border-radius: 18px; } }

#toast { position: fixed; left: 50%; bottom: calc(var(--barre) + env(safe-area-inset-bottom) + 14px); transform: translateX(-50%) translateY(20px); opacity: 0; transition: .25s; background: var(--texte); color: var(--fond); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; z-index: 50; pointer-events: none; width: max-content; max-width: calc(100% - 32px); text-align: center; }
#toast.vu { opacity: 1; transform: translateX(-50%) translateY(0); }

.chargement { text-align: center; color: var(--doux); padding: 40px 0; }
.lien { color: var(--vert); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; }
.encart { background: linear-gradient(135deg, rgba(62, 224, 122, .14), rgba(62, 224, 122, .03)); border: 1px solid rgba(62, 224, 122, .35); border-radius: var(--rayon); padding: 14px; }

/* ---------- page concept ---------- */
.trophees { display: grid; grid-template-columns: 1fr; gap: 8px; }
.trophee { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 8px 12px; }
.trophee .pousse { flex: 1; min-width: 0; }
@media (min-width: 600px) { .trophees { grid-template-columns: 1fr 1fr; } }
.trophee b { display: block; font-size: 16px; font-style: italic; color: var(--vert); }
.trophee span { font-size: 13px; color: var(--doux); }
.trophee.supreme { grid-column: 1 / -1; border-color: rgba(245, 197, 66, .5); background: rgba(245, 197, 66, .08); }
.trophee.supreme b { color: var(--or); }
.etapes { counter-reset: e; }
.etapes > div { position: relative; padding-left: 38px; }
.etapes > div::before { counter-increment: e; content: counter(e); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--carte2); border: 1px solid var(--trait); font-weight: 800; font-size: 13px; color: var(--vert); }

/* ---------- communauté : membres suivis, fil d'actu, profil public ---------- */
.bloc { display: block; }
.haut4 { margin-top: 4px; } .haut6 { margin-top: 6px; } .haut10 { margin-top: 10px; } .haut14 { margin-top: 14px; }
.sans-marge { margin: 0; }
.membre .bouton { flex: none; min-width: 74px; }
.membre .sous .badge { margin-right: 3px; }
.membre .sous.bloc { margin-top: 3px; }
/* trois sous-onglets de longueurs inégales : chacun prend la place de son texte, sans retour à la ligne */
.segments.libres a { flex: 1 1 auto; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.actu a.bloc b { font-weight: 700; }
.initiales.grande { width: 64px; height: 64px; font-size: 22px; }
.tete .pousse { flex: 1; min-width: 0; }
.joueur .note { display: block; margin-top: 4px; font-size: 13px; color: var(--texte); overflow-wrap: anywhere; }
/* profil de démonstration : une petite marque discrète, collée au pseudo */
.badge.demo { padding: 1px 6px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-style: dashed; vertical-align: middle; flex: none; }
.ligne-pseudo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ligne-pseudo .tronque { min-width: 0; }

/* ---------- le jeu : série, badges, jumeau foot, repérages, défi, saison ---------- */
.centre { text-align: center; }
.droite { text-align: right; }
.clair { color: var(--texte); }
.vert { color: var(--vert); }
.alerte { color: var(--or); font-weight: 600; }
.voir-tout { display: block; margin: 10px 4px; cursor: pointer; }
details > summary { cursor: pointer; }
/* la série dans l'en-tête : une pastille basse, qui ne pousse ni le logo ni les deux ronds */
.serie-entete { display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 13px;
  background: rgba(245, 197, 66, .12); border: 1px solid rgba(245, 197, 66, .45); color: var(--or); }
.serie-entete[hidden] { display: none; }
.serie-entete b { font-weight: 800; }
.badge.serie { background: rgba(245, 197, 66, .12); border-color: rgba(245, 197, 66, .45); color: var(--or); }
.serie-carte { display: flex; align-items: center; gap: 14px; border-color: rgba(245, 197, 66, .45); background: rgba(245, 197, 66, .07); }
.serie-carte .flamme { font-size: 38px; line-height: 1; flex: none; }
.serie-carte b { font-size: 18px; }
.serie-carte.eteinte { border-color: var(--trait); background: var(--carte); }
.serie-carte.eteinte .flamme { filter: grayscale(1); opacity: .5; }
.serie-carte .pousse { flex: 1; min-width: 0; }

.badges-jeu { display: grid; gap: 7px; }
.badge-jeu { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }
.badge-jeu .pousse { flex: 1; min-width: 0; }
.badge-jeu .medaille { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--carte2); border: 1px solid var(--trait); color: var(--doux); }
.badge-jeu svg, #toast-badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.badge-jeu:not(.obtenu) b { color: var(--doux); }
.badge-jeu:not(.obtenu) .medaille { opacity: .55; }
.badge-jeu.obtenu { border-color: rgba(62, 224, 122, .4); }
.badge-jeu.obtenu .medaille { background: rgba(62, 224, 122, .14); border-color: rgba(62, 224, 122, .55); color: var(--vert); }
.badge-special { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--or);
  background: linear-gradient(135deg, rgba(245, 197, 66, .24), rgba(245, 197, 66, .07)); }
.badge-special .pousse { flex: 1; min-width: 0; }
.badge-special b { color: var(--or); }
.badge-special .medaille { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: #1a1405; }
.badge-special svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.badge-jeu.obtenu.or { border-color: rgba(245, 197, 66, .5); }
.badge-jeu.obtenu.or .medaille { background: rgba(245, 197, 66, .14); border-color: rgba(245, 197, 66, .6); color: var(--or); }
.niveaux { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.niveaux i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--doux); }
.niveaux i.plein { background: var(--vert); border-color: var(--vert); }
#toast-badge { position: fixed; left: 50%; bottom: calc(var(--barre) + env(safe-area-inset-bottom) + 66px); transform: translateX(-50%) translateY(20px); opacity: 0; transition: .25s;
  display: flex; align-items: center; gap: 10px; background: #1d2a17; color: var(--texte); border: 1px solid var(--or); padding: 10px 16px; border-radius: 12px;
  font-size: 14px; z-index: 51; pointer-events: none; width: max-content; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
#toast-badge.vu { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast-badge svg { color: var(--or); flex: none; }

.pct { font-size: 30px; font-weight: 900; color: var(--vert); line-height: 1; flex: none; white-space: nowrap; }
.accord .poste-accord { align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--trait); }
.accord .poste-accord > b { flex: none; }
.accord details { margin-top: 10px; }
.titre-jumeau { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vert); }
.jumeau b { font-size: 17px; }
.reperage .sous { white-space: normal; }

.defi { border-color: rgba(62, 224, 122, .4); background: linear-gradient(160deg, rgba(62, 224, 122, .1), rgba(62, 224, 122, .02) 60%), var(--carte); margin-bottom: 6px; }
.defi-titre { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vert); margin-bottom: 8px; }
.defi p { margin: 8px 0 0; }
.defi-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; margin: 4px 0 8px; }
.defi-match div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.defi-match .sc { font-size: 26px; font-weight: 900; }
.top-defi { margin: 6px 0 8px; padding: 0; list-style: none; counter-reset: t; }
.top-defi li { counter-increment: t; display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--trait); font-weight: 600; }
.top-defi li::before { content: counter(t); width: 18px; color: var(--doux); font-weight: 800; text-align: center; }
.top-defi li:first-child::before { color: var(--or); }
.top-defi li a { flex: 1; min-width: 0; }
.top-defi li span { color: var(--doux); font-size: 13px; }

.carte-saison { display: grid; place-items: center; padding: 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); }
.carte-saison canvas { width: min(100%, 270px); height: auto; aspect-ratio: 9 / 16; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
#saison-details .ligne { align-items: flex-start; }
#saison-details .ligne .pousse { flex: 0 0 42%; }
#saison-details .ligne b { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- préférences : club de cœur, compétitions suivies ---------- */
.sans-capitales { text-transform: none; letter-spacing: 0; font-weight: 600; }
.titre-club { display: flex; align-items: center; gap: 8px; }
.titre-club .logo { width: 20px; height: 20px; }
.badge.coeur { display: inline-flex; align-items: center; gap: 5px; color: var(--texte); }
.badge.coeur .logo { width: 15px; height: 15px; }
.logo.moyen { width: 40px; height: 40px; }
.sans-club { display: grid; place-items: center; border: 1px dashed var(--doux); border-radius: 50%; color: var(--doux); font-weight: 800; }
/* avis de match : compteur de caractères, avis masqué, « Signaler cet avis » */
.compteur { text-align: right; font-size: 12px; color: var(--doux); margin-top: 4px; font-variant-numeric: tabular-nums; }
.compteur.plein { color: var(--or); font-weight: 700; }
.compteur.trop { color: var(--rouge); }
.avis-masque { margin: 6px 0 0; }
.texte-avis { margin-top: 4px; overflow-wrap: anywhere; white-space: pre-line; }
.signal-avis { margin: 0; text-align: right; }
.avis-membre .signal-avis { margin: 2px -8px -10px 0; }
.carte + .signal-avis { margin-bottom: 4px; }
.signal-avis + .carte { margin-top: 0; }
.signal-avis > span { display: inline-block; padding: 8px 2px; }
/* sous une ligne de joueur (note d'une liste, commentaire d'une perf sur un profil) : le lien « Signaler » colle à sa ligne */
.joueur + .signal-texte { margin: -4px 0 4px; }
.texte-masque { color: var(--or); }
.progression { font-weight: 700; color: var(--texte); }
.lien-discret { background: none; border: 0; color: var(--doux); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px; }

.coches { display: grid; gap: 7px; }
.coche { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; cursor: pointer; color: var(--texte); font-size: 15px; }
.coche input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.coche .case { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid var(--doux); display: grid; place-items: center; }
.coche input:checked + .case { background: var(--vert); border-color: var(--vert); }
.coche input:checked + .case::after { content: ""; width: 11px; height: 6px; border-left: 3px solid #06210f; border-bottom: 3px solid #06210f; transform: translateY(-1px) rotate(-45deg); }
.coche input:focus-visible + .case { outline: 2px solid var(--vert); outline-offset: 2px; }
.coche:has(input:checked) { border-color: rgba(62, 224, 122, .45); }
.coche .pousse { flex: 1; min-width: 0; font-weight: 600; }
.coches.serrees { grid-template-columns: 1fr 1fr; }
.coches.serrees .coche { padding: 9px 10px; gap: 8px; font-size: 13.5px; background: var(--carte2); }
.coches.serrees .case { width: 20px; height: 20px; border-radius: 6px; }
.coches.serrees .coche input:checked + .case::after { width: 9px; height: 5px; border-width: 2.5px; }

/* la grille des clubs (tunnel d'arrivée, fenêtre « Mon club de cœur ») */
.clubs-tete { position: sticky; top: 0; z-index: 2; background: var(--fond); padding: 4px 0 2px; }
.clubs-tete .puces { margin-top: 8px; margin-bottom: 0; }
.clubs-fenetre .clubs-tete { background: var(--carte); }
.clubs-liste h3 { font-size: 14px; margin: 14px 2px 8px; }
.clubs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.club { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; min-width: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; cursor: pointer; }
.clubs-fenetre .club { background: var(--carte2); }
.club img, .club .sans-logo { width: 44px; height: 44px; object-fit: contain; }
.club .sans-logo { display: grid; place-items: center; border-radius: 50%; background: var(--carte2); border: 1px solid var(--trait); font-weight: 800; font-size: 13px; }
.club > span:last-child { font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club.choisi { border-color: var(--vert); background: rgba(62, 224, 122, .14); box-shadow: inset 0 0 0 1px var(--vert); }
.club[hidden], .clubs-liste section[hidden], .clubs-rien[hidden] { display: none; }

/* le champ de pseudo : état en direct et idées */
.pseudo-etat { margin-top: 6px; min-height: 19px; color: var(--doux); }
.pseudo-etat[data-etat=ok] { color: var(--vert); font-weight: 600; }
.pseudo-etat[data-etat=pris], .pseudo-etat[data-etat=refuse] { color: var(--rouge); font-weight: 600; }
.champ-pseudo:has(.pseudo-etat[data-etat=ok]) .pseudo-champ { border-color: var(--vert); }
.champ-pseudo:has(.pseudo-etat[data-etat=pris]) .pseudo-champ, .champ-pseudo:has(.pseudo-etat[data-etat=refuse]) .pseudo-champ { border-color: var(--rouge); }
.pseudo-idees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.pseudo-idees[hidden] { display: none; }
.pseudo-idees .idees { display: contents; }
.puce.idee { padding: 5px 11px; font-size: 13px; color: var(--texte); }
.pseudo-idees .autres-idees { padding: 6px 2px; }

/* ---------- la mascotte (les planches arrivent : rien n'est réservé tant qu'aucune image n'est déclarée) ---------- */
.mascotte { display: block; flex: none; max-width: 100%; height: auto; object-fit: contain; }
.tn-mascotte { width: min(34vw, 132px); }
.vide .mascotte { margin: 0 auto 8px; }
/* l'attente d'une page : la mascotte n'apparaît que si le chargement dure (pas de clignotement sur une page rapide) */
.attente .mascotte { margin: 0 auto 8px; opacity: 0; animation: attente-vue .3s ease .4s forwards; }
@keyframes attente-vue { to { opacity: 1; } }
.ecran-perplexe { padding: 28px 16px; }
.ecran-perplexe p { margin: 4px 0 0; }
.centre-actions { justify-content: center; }
/* la tête, dans le rond du compte tant qu'on n'est pas connecté : entière (antennes comprises), sans liseré rogné */
.avatar { overflow: hidden; }
.avatar .mascotte { width: 30px; height: 30px; }
.serie-carte .mascotte { margin: -4px 0; }
.tete-experts { margin-bottom: 12px; }
#toast-badge .mascotte { margin: -4px 0 -4px -6px; }

/* ---------- plein écran : tunnel d'arrivée, « choisis un nouveau pseudo » ---------- */
html.plein-ecran-ouvert, html.plein-ecran-ouvert body { overflow: hidden; }
.tunnel { position: fixed; inset: 0; z-index: 9000; background: var(--fond); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.tn-haut { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 600px; margin: 0 auto; padding: 10px 12px 6px; }
.tn-retour { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--trait); background: var(--carte2); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.tn-retour[hidden] { display: block; visibility: hidden; }
.tn-barre { flex: 1; display: flex; gap: 5px; }
.tn-barre i { flex: 1; height: 5px; border-radius: 99px; background: var(--carte2); transition: background .25s; }
.tn-barre i.fait { background: var(--vert); }
.tn-passer { flex: none; background: none; border: 0; color: var(--doux); font-size: 13.5px; font-weight: 600; padding: 9px 4px; cursor: pointer; }
.tn-haut.fini .tn-retour, .tn-haut.fini .tn-passer { visibility: hidden; }
.tn-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.tn-page { flex: 1 0 auto; width: 100%; max-width: 600px; margin: 0 auto; padding: 6px 16px 20px; }
.tn-page h1 { font-size: 24px; line-height: 1.2; margin: 8px 0 6px; }
.tn-sous { margin: 0 0 14px; }
.tn-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.tn-centre h1 { margin: 0; max-width: 420px; }
.tn-centre p { margin: 0; max-width: 420px; }
.tn-logo { width: min(64vw, 280px); height: auto; }
.tn-puces { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; width: 100%; max-width: 420px; text-align: left; }
.tn-puces li { position: relative; padding: 11px 14px 11px 42px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; color: var(--doux); font-size: 14px; }
.tn-puces li b { color: var(--texte); }
.tn-puces li::before { content: ""; position: absolute; left: 15px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 4px rgba(62, 224, 122, .18); }
.tn-recap { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tn-recap .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 13px; }
.mini-ecusson { width: 16px; height: 16px; object-fit: contain; }
.tn-bas { flex: none; border-top: 1px solid var(--trait); background: var(--fond); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 2px; }
.tn-bas .bouton { max-width: 568px; padding: 13px 16px; font-size: 16px; }
.tn-second { padding: 10px; color: var(--doux); }
.tn-emplacements { display: grid; gap: 8px; margin-bottom: 14px; }
.emplacement { width: 100%; text-align: left; cursor: pointer; padding: 12px; }
.emplacement:not(.rempli) .initiales { border-style: dashed; border-color: var(--doux); color: var(--doux); font-size: 18px; }
.emplacement.rempli { border-color: rgba(62, 224, 122, .45); }
.emplacement .nom.tronque { display: inline-block; max-width: 100%; vertical-align: bottom; }
/* la recherche d'un joueur, par-dessus l'étape */
.tn-feuille { position: absolute; inset: 0; z-index: 3; background: var(--fond); display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.tn-feuille > * { width: 100%; max-width: 568px; margin-left: auto; margin-right: auto; }
.tn-feuille-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tn-feuille-tete h2 { flex: 1; margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--texte); }
.tn-feuille-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 calc(16px + env(safe-area-inset-bottom)); }
.tn-feuille-liste h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); margin: 14px 2px 8px; }
.tn-feuille-liste .joueur { width: 100%; text-align: left; cursor: pointer; }
/* téléphone couché : tout tient dans 390 px de haut, les deux boutons du bas passent côte à côte */
@media (orientation: landscape) and (max-height: 500px) {
  .tn-haut { padding-top: 6px; padding-bottom: 2px; }
  .tn-page { max-width: 760px; padding-bottom: 12px; }
  .tn-page h1 { font-size: 20px; margin-top: 2px; }
  .tn-sous { margin-bottom: 8px; }
  .tn-centre { gap: 8px; }
  .tn-centre h1 { max-width: 640px; }
  .tn-logo { width: 190px; }
  .tn-mascotte { width: 72px; }
  .tn-puces { max-width: 728px; grid-template-columns: repeat(3, 1fr); }
  .tn-puces li { padding: 9px 10px 9px 34px; font-size: 13px; }
  .tn-puces li::before { left: 12px; top: 16px; margin-top: 0; }
  .tn-bas { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 14px; padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
  .tn-bas .bouton { width: auto; min-width: 280px; padding: 10px 16px; font-size: 15px; }
  .tn-emplacements, .tunnel .coches { grid-template-columns: 1fr 1fr; }
  .tunnel .clubs-tete { position: static; }      /* trop peu de hauteur pour garder la recherche collée en haut */
}

/* ---------- le tutoriel : une bulle à la fois, qui pointe un élément mis en lumière ---------- */
.tuto { position: fixed; inset: 0; z-index: 9000; }
.tuto-halo { position: fixed; border-radius: 14px; outline: 2px solid var(--vert); box-shadow: 0 0 0 200vmax rgba(3, 6, 12, .8); pointer-events: none;
  transition: left .25s, top .25s, width .25s, height .25s; }
.tuto-bulle { position: fixed; background: var(--carte); border: 1px solid var(--vert); border-radius: 14px; padding: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.tuto-fleche { position: absolute; width: 16px; height: 16px; background: var(--carte); border: 1px solid var(--vert); transform: rotate(45deg); }
.tuto-bulle[data-sens=bas] .tuto-fleche { bottom: -9px; border-top-color: transparent; border-left-color: transparent; }
.tuto-bulle[data-sens=haut] .tuto-fleche { top: -9px; border-bottom-color: transparent; border-right-color: transparent; }
.tuto-ligne { display: flex; align-items: center; gap: 12px; }
.tuto-ligne .pousse { flex: 1; min-width: 0; }
.tuto-titre { font-size: 16px; }
.tuto-texte { margin: 4px 0 0; font-size: 14px; }
.tuto-pied { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tuto-points { flex: 1; display: flex; gap: 6px; }
.tuto-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--trait); }
.tuto-points i.actif { background: var(--vert); }
.tuto-passer { color: var(--doux); padding: 8px 4px; }
.tuto-suivant { padding: 8px 14px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .tuto-halo, .tn-barre i { transition: none; } }

/* ---------- accueil épuré : les deux tuiles (Matchs, Top players) ---------- */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.tuile { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 124px; padding: 14px; border-radius: var(--rayon);
  background: linear-gradient(160deg, rgba(62, 224, 122, .12), rgba(62, 224, 122, .02) 65%), var(--carte); border: 1px solid rgba(62, 224, 122, .35); }
.tuile:active { transform: scale(.98); }
.tuile b { font-size: 18px; }
.tuile-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px; background: rgba(62, 224, 122, .14); color: var(--vert); }
.tuile-icone svg { width: 26px; height: 26px; }
.tuile-info { font-size: 13px; color: var(--doux); min-width: 0; }
.en-direct { color: var(--rouge); }
.en-direct::before, .point-direct { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); }
.en-direct::before { margin-right: 6px; }
.point-direct { margin-left: 3px; vertical-align: middle; }

/* ---------- pages Matchs et Top players ---------- */
.titre-page { margin: 2px 0 12px; }
.segments.trois a { font-size: 13.5px; padding-left: 5px; padding-right: 5px; }
.immanquables { border: 1px solid rgba(245, 197, 66, .4); background: rgba(245, 197, 66, .05); border-radius: var(--rayon); padding: 12px; margin-bottom: 6px; }
.immanquables .defi-titre { color: var(--or); }
.immanquables .raison { margin: 4px 4px 10px; }
.immanquables .raison:last-child { margin-bottom: 0; }
.suite-jour { margin-top: 8px; }
.suite-jour summary { list-style: none; cursor: pointer; }
.suite-jour summary::-webkit-details-marker { display: none; }
.suite-jour[open] summary { display: none; }
tr.hors-total td { color: var(--doux); }

/* ---------- compte : bandeau e-mail, sections (14/11/2026) ---------- */
.bandeau { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.35;
  background: rgba(245, 197, 66, .08); border: 1px solid rgba(245, 197, 66, .4); }
.bandeau .pousse { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bandeau-icone { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 197, 66, .16); color: var(--or); font-size: 15px; }
.bandeau > b { color: var(--or); font-size: 18px; }
.bandeau .lien { flex: none; padding: 8px 4px; }
#titre-compte { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }
.encart.centre { text-align: center; }
.encart.centre .mascotte { margin: 0 auto 6px; }
.encart.centre h1 { margin: 6px 0; }
p.centre { text-align: center; margin-bottom: 0; }
/* date de naissance : jour · mois · année */
.naissance { display: grid; grid-template-columns: 1fr 1.7fr 1.25fr; gap: 8px; }
.naissance select { padding-left: 10px; padding-right: 6px; min-width: 0; }
.naissance select:disabled { opacity: .7; }
#trop-jeune .bouton { margin-top: 4px; }
/* notifications */
.etapes-ios { margin: 8px 0 0; padding-left: 20px; }
.etapes-ios li + li { margin-top: 6px; }
#notifications .coche { background: var(--carte2); padding: 10px 12px; }
#notifications .coche.ferme { opacity: .6; cursor: default; }
#notifications .coche .pousse b { font-size: 14px; }
#titre-notifications { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }
/* passkeys (Face ID, empreinte) */
.ou { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--doux); font-size: 12.5px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
#connexion-passkey svg { flex: none; }
.passkey { padding: 8px 0; border-top: 1px solid var(--trait); }
.passkey-icone { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--carte2); color: var(--vert); }
#titre-passkeys { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }

/* ---------- pages légales (legal.js) : mentions légales, confidentialité ---------- */
.legal { line-height: 1.55; overflow-wrap: anywhere; }
.legal > p { margin: 0 0 14px; }
.legal .carte p, .legal .encart p { margin: 0 0 10px; }
.legal .carte > :last-child, .legal .encart > :last-child { margin-bottom: 0; }
.legal ul { margin: 0 0 10px; padding-left: 18px; }
.legal li + li { margin-top: 7px; }
.legal .encart ul { margin-top: 8px; }
.legal code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--carte2); border-radius: 5px; padding: 1px 5px; }
.legal .fiche { margin: 0; display: grid; gap: 8px; }
.legal .fiche dt { color: var(--doux); font-size: 12.5px; }
.legal .fiche dd { margin: 1px 0 0; }
.legal .a-completer { color: var(--or); font-weight: 700; }
.liens-legaux { margin: 22px 0 4px; }
.liens-legaux .lien, .ligne-inscription .lien { text-decoration: underline; text-underline-offset: 3px; }
.ligne-inscription { margin-top: 12px; text-align: center; }
.ligne-inscription p { margin: 0; }
.ligne-inscription p + p { margin-top: 6px; }
.ligne-inscription b { color: var(--texte); }
/* le texte lu par-dessus le tunnel d'arrivée (qui recouvre l'app) */
.legal-lecture { position: fixed; inset: 0; z-index: 9500; background: var(--fond); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.legal-lecture-haut { flex: none; padding: 10px 16px; border-bottom: 1px solid var(--trait); }
.legal-lecture-corps { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; outline: none;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
.legal-lecture-corps .legal { max-width: 640px; margin: 0 auto; }

/* ---------- la fin de saison (saison.js) : compte à rebours de l'accueil, dépôt des listes, vote, résultats ---------- */
/* le compte à rebours : UNE ligne sobre sous le défi — ni carte, ni cadre */
.ligne-saison { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--doux); text-align: center; text-wrap: balance; }
.ligne-saison.active .ligne-saison-lien { color: var(--vert); font-weight: 700; display: inline-block; padding: 6px 0; }
.ligne-saison .lien { display: inline-block; padding: 6px 4px; white-space: nowrap; }
.bandeau.ok { border-color: rgba(62, 224, 122, .4); background: rgba(62, 224, 122, .08); }
.bandeau.ok .bandeau-icone { background: rgba(62, 224, 122, .18); color: var(--vert); }
.joueur.reserve { border-style: dashed; background: transparent; }
.joueur.reserve.hors { opacity: .6; }
.reserve-titre { margin: 10px 2px 6px; }
.depot-actions { position: sticky; bottom: calc(var(--barre) + env(safe-area-inset-bottom) + 8px); z-index: 5; margin-top: 18px; }
.depot-actions .bouton { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.segments-vote a { font-size: 13px; padding-left: 2px; padding-right: 2px; white-space: nowrap; }
.encart.ligne { display: flex; align-items: center; gap: 12px; }
.encart.ligne p { margin: 4px 0 0; }
.trophee .gagnant { display: block; font-size: 16px; font-weight: 800; color: var(--texte); overflow-wrap: anywhere; }

/* Page d'un match : chaque équipe est repliée par défaut (la liste complète fait plus de 30 lignes) */
.compo-bloc { margin-top: 10px; border: 1px solid var(--trait, rgba(255,255,255,.12)); border-radius: 14px; background: var(--carte, rgba(255,255,255,.03)); }
.compo-bloc > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.compo-bloc > summary::-webkit-details-marker { display: none; }
.compo-bloc > summary .pousse { flex: 1; min-width: 0; }
.compo-bloc > summary .chevron { transition: transform .15s ease; }
.compo-bloc[open] > summary .chevron { transform: rotate(180deg); }
.compo-bloc > .compo { padding: 0 8px 8px; }
@media (prefers-reduced-motion: reduce) { .compo-bloc > summary .chevron { transition: none; } }
.compo-titre { margin: 12px 6px 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.compo-bloc > .compo > .compo-titre:first-child { margin-top: 4px; }