/* Salle de draft : ardoise sombre aux reflets de faille, or = argent (tresorerie, salaires, primes),
   turquoise hextech = actions du coach. Theme unique sombre (c'est un jeu). */
:root {
  --fond: #0a1416;
  --plaque: #10201f;
  --plaque-2: #16302f;
  --trait: #24423f;
  --texte: #e4ede6;
  --discret: #8fa8a2;
  --hextech: #3fd0c4;
  --hextech-sombre: #12403d;
  --or: #e9b44c;
  --or-sombre: #3a2c10;
  --victoire: #5fd38a;
  --defaite: #f0677a;
  --top: #e88a5c;
  --jungle: #79c46a;
  --mid: #7fa8ff;
  --bot: #ec6f9a;
  --support: #b58cf0;
  --f-titre: "Oxanium", "Bahnschrift", "Segoe UI", sans-serif;
  --f-texte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-log: "JetBrains Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fond); }
body {
  margin: 0; color: var(--texte); font: 16px/1.5 var(--f-texte);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(63, 208, 196, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(233, 180, 76, .07), transparent 60%),
    var(--fond);
  min-height: 100vh;
}
.conteneur { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--hextech); text-underline-offset: 3px; }
a:hover { color: var(--texte); }
:focus-visible { outline: 2px solid var(--hextech); outline-offset: 2px; }
h1, h2, h3, .titre { font-family: var(--f-titre); text-wrap: balance; letter-spacing: .3px; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; margin: 0; }
h2 { font-size: 1.2rem; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--texte); }
h2 small { font-family: var(--f-texte); text-transform: none; letter-spacing: 0; color: var(--discret); font-weight: 400; margin-left: 8px; }
.discret { color: var(--discret); }
.nombre { font-family: var(--f-titre); font-variant-numeric: tabular-nums; }

/* ---------- bandeau */
.bandeau { border-bottom: 1px solid var(--trait); background: rgba(10, 20, 22, .85); backdrop-filter: blur(8px);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.bandeau-int { display: flex; align-items: center; gap: 14px; padding-block: 12px; flex-wrap: wrap; }
.logo { font-family: var(--f-titre); font-weight: 800; font-size: 1.3rem; letter-spacing: 1px; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; color: var(--texte); text-decoration: none; }
.logo b { color: var(--or); }
.logo svg { width: 26px; height: 26px; }
.ligue-nom { color: var(--discret); font-size: .9rem; border-left: 1px solid var(--trait); padding-left: 14px; }
.nav { margin-left: auto; display: flex; gap: 14px; font-size: .95rem; }
.nav a { color: var(--discret); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { color: var(--hextech); }
main { padding-block: 24px 8px; display: grid; gap: 22px; }
.pied { color: var(--discret); font-size: .78rem; padding-block: 28px 36px; }

/* ---------- blocs */
.plaque { background: linear-gradient(180deg, var(--plaque-2), var(--plaque) 70px); border: 1px solid var(--trait);
  border-radius: 14px; padding: 20px; min-width: 0; }
.deux { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.deux > * { min-width: 0; }
@media (max-width: 900px) { .deux { grid-template-columns: 1fr; } }
.defile { overflow-x: auto; }

/* ---------- hero coach */
.hero { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  padding: 24px; border-radius: 18px; border: 1px solid var(--trait); position: relative; overflow: hidden;
  background:
    linear-gradient(115deg, hsla(var(--h), 60%, 40%, .35), transparent 55%),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px),
    var(--plaque); }
.hero .sur { font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--discret); }
.hero .bilan { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.rang { font-family: var(--f-titre); font-size: 2.6rem; font-weight: 800; line-height: 1; text-align: center; }
.rang small { display: block; font-size: .75rem; letter-spacing: 2px; color: var(--discret); font-weight: 500; }
@media (max-width: 640px) { .hero { grid-template-columns: auto 1fr; } .hero .rang { grid-column: 1 / -1; text-align: left; } }

.blason { width: 64px; height: 74px; flex: none; }
.blason.petit { width: 26px; height: 30px; vertical-align: middle; }
.blason.moyen { width: 40px; height: 46px; }
.blason text { font-family: var(--f-titre); font-weight: 800; fill: #fff; }

.puce { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 12px;
  font-size: .82rem; font-weight: 600; background: var(--plaque-2); border: 1px solid var(--trait); white-space: nowrap; }
.puce.v { color: var(--victoire); border-color: rgba(95, 211, 138, .4); }
.puce.d { color: var(--defaite); border-color: rgba(240, 103, 122, .4); }
.puce.or { color: var(--or); border-color: rgba(233, 180, 76, .45); background: var(--or-sombre); }
.puce.hex { color: var(--hextech); border-color: rgba(63, 208, 196, .45); background: var(--hextech-sombre); }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(233, 180, 76, .0), 0 0 18px rgba(233, 180, 76, .35); } }

/* ---------- jetons d'argent */
.coffre { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.jeton { border-radius: 12px; padding: 12px 14px; background: var(--plaque-2); border: 1px solid var(--trait); }
.jeton small { display: block; color: var(--discret); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
.jeton b { font-family: var(--f-titre); font-size: 1.45rem; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.jeton.or b { color: var(--or); }
.piece { width: 16px; height: 16px; border-radius: 50%; flex: none; display: inline-block;
  background: radial-gradient(circle at 35% 35%, #ffe49a, var(--or) 55%, #9a6b16); box-shadow: 0 0 0 1px #7a5410 inset; }

/* ---------- progression de saison */
.saison { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
td .saison { flex-wrap: nowrap; gap: 4px; }
.saison i { width: 26px; height: 8px; border-radius: 4px; background: var(--trait); display: block; }
.saison i.fait { background: var(--discret); }
.saison i.v { background: var(--victoire); }
.saison i.d { background: var(--defaite); }
.saison i.ici { background: var(--or); box-shadow: 0 0 10px rgba(233, 180, 76, .6); }

/* ---------- roles */
.role { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--rc); white-space: nowrap; }
.role svg { width: 18px; height: 18px; flex: none; }
.r-Top { --rc: var(--top); } .r-Jungle { --rc: var(--jungle); } .r-Mid { --rc: var(--mid); }
.r-Bot { --rc: var(--bot); } .r-Support { --rc: var(--support); }

/* ---------- niveaux et jauge */
.tier { font-family: var(--f-titre); font-weight: 800; font-size: .8rem; width: 24px; height: 24px; border-radius: 6px;
  display: inline-grid; place-items: center; flex: none; border: 1px solid; }
.tier-S { color: #1a1205; background: linear-gradient(135deg, #ffe08a, var(--or)); border-color: #ffe08a; box-shadow: 0 0 12px rgba(233, 180, 76, .45); }
.tier-A { color: var(--hextech); border-color: var(--hextech); background: var(--hextech-sombre); }
.tier-B { color: var(--texte); border-color: var(--discret); }
.tier-C { color: var(--discret); border-color: var(--trait); }
.jauge { width: 90px; height: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; display: inline-block; vertical-align: middle; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--hextech-sombre), var(--hextech)); border-radius: 3px; }

/* ---------- ligne de depart */
.ligne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ligne { grid-template-columns: 1fr; } }
.poste { border-radius: 14px; padding: 14px 12px; text-align: center; border: 1px solid var(--trait); position: relative;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), var(--plaque-2); }
.poste .medaillon { width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--rc); background: var(--fond); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 40%, transparent); }
.poste .medaillon svg { width: 28px; height: 28px; }
.poste .nom-poste { font-size: .72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--rc); font-weight: 600; }
.poste select { width: 100%; margin-top: 8px; }
.poste.vide { border-style: dashed; background: var(--plaque); }
.poste.vide .medaillon { filter: grayscale(1); opacity: .5; }
.poste .alerte { color: var(--defaite); font-size: .8rem; }

/* ---------- cartes joueurs */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.carte-joueur { border-radius: 14px; border: 1px solid var(--trait); padding: 14px; display: grid; gap: 8px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 16%, var(--plaque-2)), var(--plaque) 60%);
  transition: transform .15s ease, border-color .15s ease; }
.carte-joueur:hover { transform: translateY(-2px); border-color: var(--rc); }
.carte-joueur .haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.carte-joueur .nom { font-family: var(--f-titre); font-weight: 700; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.carte-joueur .ligne-info { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; color: var(--discret); }
.carte-joueur .ligne-info b { color: var(--texte); font-family: var(--f-titre); font-variant-numeric: tabular-nums; }
.carte-joueur .ligne-info b.or { color: var(--or); }
.contrat { display: flex; gap: 3px; }
.contrat i { width: 10px; height: 10px; border-radius: 2px; background: var(--hextech); display: block; }
.contrat i.passe { background: var(--trait); }
.carte-joueur.fin { border-color: var(--or); box-shadow: 0 0 0 1px rgba(233, 180, 76, .3), 0 0 22px rgba(233, 180, 76, .12); }
.carte-joueur select { width: 100%; }

/* ---------- tableaux */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; vertical-align: middle; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--discret); font-weight: 600;
  background: var(--plaque); position: sticky; top: 0; z-index: 1; }
td.n, th.n { text-align: right; }
td.joueur { font-weight: 600; }
tbody tr:hover td { background: rgba(63, 208, 196, .04); }
tr.offre td { background: rgba(233, 180, 76, .08); }
tr.offre td:first-child { box-shadow: inset 3px 0 0 var(--or); }
tr.moi td { background: rgba(63, 208, 196, .08); }
.or { color: var(--or); }

/* ---------- formulaires */
input, select, button, textarea { font: inherit; color: var(--texte); }
input[type=number], input[type=text], select, textarea { background: var(--fond); border: 1px solid var(--trait);
  border-radius: 8px; padding: 6px 8px; }
input[type=number] { width: 120px; }
input[type=number]:focus, select:focus, textarea:focus { border-color: var(--hextech); outline: none; box-shadow: 0 0 0 3px rgba(63, 208, 196, .2); }
textarea, .pleine { width: 100%; }
.bouton, button { font-family: var(--f-titre); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 0; border-radius: 10px; padding: 11px 20px; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; gap: 8px; color: #06201d; background: linear-gradient(180deg, #6ff0e4, var(--hextech));
  box-shadow: 0 6px 18px rgba(63, 208, 196, .25); transition: transform .1s ease, box-shadow .15s ease; }
.bouton:hover, button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(63, 208, 196, .4); color: #06201d; }
.bouton.or, button.or { background: linear-gradient(180deg, #ffd98a, var(--or)); color: #2a1c04; box-shadow: 0 6px 18px rgba(233, 180, 76, .25); }
button.secondaire, .bouton.secondaire { background: var(--plaque-2); color: var(--texte); border: 1px solid var(--trait); box-shadow: none; text-transform: none; letter-spacing: 0; font-family: var(--f-texte); font-weight: 600; padding: 6px 12px; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtres button { padding: 5px 12px; }
.filtres button[aria-pressed=true] { background: var(--hextech-sombre); border-color: var(--hextech); color: var(--hextech); }
.outils-marche { display: flex; justify-content: space-between; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 12px; }
.outils-marche .filtres { margin-bottom: 0; }
.interrupteur { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; }
.interrupteur input { appearance: none; width: 40px; height: 22px; border-radius: 11px; background: var(--trait); position: relative;
  cursor: pointer; transition: background .15s ease; flex: none; margin: 0; }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--discret); transition: transform .15s ease, background .15s ease; }
.interrupteur input:checked { background: var(--hextech-sombre); box-shadow: inset 0 0 0 1px var(--hextech); }
.interrupteur input:checked::after { transform: translateX(18px); background: var(--hextech); }
tr.sous-contrat td { background: rgba(0, 0, 0, .18); }
tr.sous-contrat td.joueur { color: var(--discret); }
tr.sous-contrat.moi td { background: rgba(63, 208, 196, .07); }
.proprio { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; white-space: normal; min-width: 220px; }
.fin-lien { font-weight: 600; }
.mode-emploi { margin: -4px 0 16px; padding-left: 20px; color: var(--discret); display: grid; gap: 4px; max-width: 80ch; }
.mode-emploi b { color: var(--texte); }
.champs-offre { display: flex; align-items: center; gap: 6px; }
.champs-offre input { width: 104px; }
button.offrir { padding: 6px 12px; font-size: .78rem; box-shadow: none; }
tr.offre button.offrir { background: var(--plaque-2); color: var(--defaite); border: 1px solid rgba(240, 103, 122, .45); }
.sous-ligne { font-weight: 400; display: inline-flex; gap: 4px; align-items: center; }
.sous-ligne .role { font-size: .8rem; }
.sous-ligne .role svg { width: 14px; height: 14px; }
.appel { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 18px 20px;
  border-radius: 14px; border: 1px solid var(--or); background: linear-gradient(110deg, var(--or-sombre), var(--plaque) 70%); }
.appel .titre { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--or); text-transform: uppercase; letter-spacing: 1.5px; }
.mes-offres { display: flex; flex-wrap: wrap; gap: 6px; max-height: 66px; overflow-y: auto; }
.mes-offres .puce { font-size: .75rem; padding: 2px 9px; }
#mercato { scroll-margin-top: 80px; }
#libres td.joueur { position: sticky; left: 0; z-index: 1; background: var(--plaque); box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .6); }
#libres tr.offre td.joueur { background: color-mix(in srgb, var(--or) 8%, var(--plaque)); }
.roles-couverts { display: flex; gap: 8px; flex-wrap: wrap; }
.role-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 10px;
  border: 1px solid var(--trait); background: var(--plaque-2); color: var(--rc); font-size: .9rem; }
.role-pastille svg { width: 18px; height: 18px; }
.role-pastille span { color: var(--texte); }
.role-pastille b { font-family: var(--f-titre); }
.role-pastille.ok { border-color: color-mix(in srgb, var(--rc) 60%, transparent); }
.role-pastille.ok b { color: var(--victoire); }
.role-pastille.manque { border-style: dashed; opacity: .75; }
.role-pastille.manque b { color: var(--defaite); }
.statuts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.barre .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.poste label.mini { display: block; text-align: left; margin-top: 10px; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--discret); }
.poste select { margin-top: 4px; }
.kdas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; text-align: left; font-size: .8rem; }
.kdas li { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.kdas li b { font-family: var(--f-titre); font-variant-numeric: tabular-nums; }
.attente { border-color: var(--hextech); box-shadow: 0 0 0 1px rgba(63, 208, 196, .25), 0 0 30px rgba(63, 208, 196, .08); }
.attente-tete { display: flex; gap: 16px; align-items: center; }
.sablier { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 3px solid var(--trait);
  border-top-color: var(--hextech); animation: tourne 1.1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.liste-attente { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.liste-attente li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--plaque-2); border: 1px solid var(--trait); }
.liste-attente li span { flex: 1; font-weight: 600; }
.liste-attente li b { font-weight: 500; color: var(--discret); }
.liste-attente li.fait b { color: var(--victoire); }
.liste-attente li.fait b::before { content: "✓ "; }
.liste-attente li.discret { background: none; border-style: dashed; justify-content: center; font-weight: 400; }
.liste-attente li.discret::before, .liste-attente li.discret b::before { content: none; }
tr.res-gagne td:first-child { box-shadow: inset 3px 0 0 var(--victoire); }
tr.res-battue td:first-child, tr.res-impossible td:first-child { box-shadow: inset 3px 0 0 var(--defaite); }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--trait); padding-bottom: 10px; }
.onglets button { background: var(--plaque-2); color: var(--discret); border: 1px solid var(--trait); box-shadow: none;
  font-size: .85rem; padding: 8px 14px; }
.onglets button:hover { color: var(--texte); transform: none; box-shadow: none; }
.onglets button[aria-selected=true] { background: var(--hextech-sombre); color: var(--hextech); border-color: var(--hextech); }
.offres-joueur { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.offre-chip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--trait); background: var(--plaque-2); font-size: .82rem; }
.offre-chip em { font-style: normal; color: var(--discret); }
.offre-chip.gagne { border-color: rgba(95, 211, 138, .55); background: rgba(95, 211, 138, .08); }
.offre-chip.gagne em { color: var(--victoire); font-weight: 600; }
.offre-chip.battue { opacity: .75; }
.offre-chip.impossible { border-style: dashed; border-color: rgba(240, 103, 122, .5); }
.offre-chip.impossible em { color: var(--defaite); }
.fiches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fiche { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; background: var(--plaque-2); display: grid; gap: 6px; }
.fiche.res-gagne { box-shadow: inset 3px 0 0 var(--victoire); }
.fiche.res-battue, .fiche.res-impossible { box-shadow: inset 3px 0 0 var(--defaite); }
.fiche-tete { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.fiche-tete .titre { font-size: 1.05rem; }
.fiche-tete .puce, .fiche-gagnant { margin-left: auto; }
.fiche-gagnant { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--discret); }
.fiche-gagnant b { color: var(--texte); }
.fiche-texte { margin: 0; font-size: .9rem; }
.fiche-texte b { color: var(--texte); }
.regles { display: grid; gap: 22px; }
.regles p { max-width: 75ch; }
.puces-regles, .etapes { margin: 0; padding-left: 22px; display: grid; gap: 8px; max-width: 80ch; }
.puces-regles b, .etapes b { color: var(--texte); }
.etapes li::marker { font-family: var(--f-titre); font-weight: 800; color: var(--hextech); }
.lexique { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 10px 18px; margin: 0; }
.lexique dt { font-family: var(--f-titre); font-weight: 700; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lexique dd { margin: 0; color: var(--discret); }
@media (max-width: 560px) { .lexique { grid-template-columns: 1fr; gap: 4px; } .lexique dd { margin-bottom: 10px; } }
.exemple { border-left: 3px solid var(--or); background: var(--or-sombre); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 12px 0; }
/* ---------- duels face a face (recit de game) */
.duels { display: grid; gap: 8px; }
.duels-tete { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 6px; }
.camp-total { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--trait);
  background: var(--plaque-2); min-width: 0; }
.camp-total.droite { flex-direction: row-reverse; text-align: right; }
.camp-total > div { display: grid; min-width: 0; }
.camp-total .nom-equipe { font-family: var(--f-titre); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-total b { font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.1; color: var(--texte); }
.camp-total small { color: var(--discret); }
.camp-total.gagnant { border-color: var(--or); background: linear-gradient(135deg, var(--or-sombre), var(--plaque-2) 70%);
  box-shadow: 0 0 24px rgba(233, 180, 76, .18); }
.camp-total.gagnant b { color: var(--or); }
.duels-vs { font-family: var(--f-titre); font-weight: 800; color: var(--discret); letter-spacing: 2px; }
.duel { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 8px; align-items: stretch; }
.duel-centre { display: grid; place-items: center; align-content: center; gap: 4px; color: var(--rc); }
.medaillon-duel { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--rc);
  background: var(--fond); box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); }
.medaillon-duel svg { width: 22px; height: 22px; }
.fleche { font-size: .9rem; color: var(--discret); }
.fleche.vers-a, .fleche.vers-b { color: var(--or); }
.jd { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; background: var(--plaque-2); display: grid; gap: 6px;
  min-width: 0; transition: border-color .15s ease; }
.jd.droite { text-align: right; }
.jd:not(.gagne) { opacity: .78; }
.jd.gagne { border-color: var(--or); background: linear-gradient(160deg, var(--or-sombre), var(--plaque-2) 65%);
  box-shadow: 0 0 18px rgba(233, 180, 76, .15); opacity: 1; }
.jd.vide { opacity: .45; border-style: dashed; }
.jd-haut { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jd.droite .jd-haut { flex-direction: row-reverse; }
.jd-nom { display: grid; min-width: 0; }
.jd-nom b { font-family: var(--f-titre); font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-nom small { color: var(--discret); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-kda { display: flex; align-items: baseline; gap: 4px; font-family: var(--f-titre); font-variant-numeric: tabular-nums; }
.jd.droite .jd-kda { justify-content: flex-end; }
.jd-kda b { font-size: 1.15rem; }
.jd-kda b.morts { color: var(--defaite); }
.jd-kda i { font-style: normal; color: var(--discret); }
.jd-kda small { color: var(--discret); font-family: var(--f-texte); margin-left: 6px; font-size: .75rem; }
.jd-badges { display: flex; gap: 4px; flex-wrap: wrap; min-height: 0; }
.jd.droite .jd-badges { justify-content: flex-end; }
.bdg { font-size: .66rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.bdg.victoire { color: var(--victoire); background: rgba(95, 211, 138, .12); }
.bdg.mvp { color: #2a1c04; background: var(--or); }
.bdg.multi { color: #fff; background: linear-gradient(90deg, #b8436b, #8a4fd1); }
.jd-points { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.jd.droite .jd-points { justify-content: flex-end; }
.jd-points > b { font-size: 1.5rem; color: var(--texte); }
.jd.gagne .jd-points > b { color: var(--or); }
.jd-points > span { color: var(--discret); font-size: .8rem; }
.bonus-duel { font-family: var(--f-titre); font-weight: 800; font-size: .75rem !important; color: #2a1c04 !important;
  background: linear-gradient(180deg, #ffd98a, var(--or)); padding: 2px 8px; border-radius: 6px; letter-spacing: .5px; }
.jd-detail summary { font-size: .75rem; color: var(--discret); }
.jd-detail ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: .8rem; text-align: left; }
.jd-detail li { display: flex; justify-content: space-between; gap: 8px; }
.jd-detail li b { font-family: var(--f-titre); font-variant-numeric: tabular-nums; }
.jd-detail .ligne-duel b { color: var(--or); }
.jd-detail .ligne-total { border-top: 1px solid var(--trait); margin-top: 3px; padding-top: 3px; }
.duels-pied { display: flex; gap: 6px 14px; align-items: baseline; justify-content: center; flex-wrap: wrap; margin: 8px 0 0; text-align: center; }
.deux-recit { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; align-items: start; }
.deux-recit > * { min-width: 0; }
.sous-titre { font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--discret); margin: 0 0 10px; }
.marquants { display: flex; flex-wrap: wrap; gap: 8px; }
.marquant { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(184, 67, 107, .25), rgba(138, 79, 209, .15)); border: 1px solid rgba(184, 67, 107, .5); }
.marquant b { font-family: var(--f-titre); letter-spacing: 1px; }
.marquant span { color: var(--discret); }
@media (max-width: 760px) { .deux-recit { grid-template-columns: 1fr; } }
@media (max-width: 560px) { #nuage .graduation { font-size: 17px; } #nuage .titre-axe { font-size: 18px; } #nuage .etiquette-pt { font-size: 16px; } }
@media (max-width: 560px) {
  .duel { grid-template-columns: 1fr 36px 1fr; gap: 5px; }
  .medaillon-duel { width: 30px; height: 30px; } .medaillon-duel svg { width: 16px; height: 16px; }
  .jd { padding: 8px; }
  .jd-haut .champion { width: 26px; height: 26px; }
  .jd-nom b { font-size: .9rem; } .jd-nom small { display: none; }
  .jd-kda b { font-size: .95rem; } .jd-kda small { display: none; }
  .jd-points > b { font-size: 1.15rem; }
  .camp-total { padding: 8px 10px; gap: 8px; } .camp-total .blason { display: none; }
  .duels-tete { gap: 6px; } .duels-vs { font-size: .75rem; }
}
/* ---------- bandeau overlay (resume des objectifs d'une game) */
.overlay { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--trait); background: linear-gradient(90deg, rgba(63, 208, 196, .10), var(--fond) 45%, var(--fond) 55%, rgba(233, 180, 76, .10)); }
.ov-equipe { display: grid; gap: 8px; padding: 12px 16px; min-width: 0; align-content: center; }
.ov-equipe.droite { justify-items: end; text-align: right; }
.ov-equipe.gagnant { box-shadow: inset 0 3px 0 var(--or); }
.ov-nom { display: flex; align-items: center; gap: 8px; font-family: var(--f-titre); font-weight: 700; min-width: 0; }
.ov-equipe.droite .ov-nom { flex-direction: row-reverse; }
.ov-nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-equipe.gagnant .ov-nom span { color: var(--or); }
.ov-stats { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.ov-equipe.droite .ov-stats { justify-content: flex-end; flex-direction: row-reverse; }
.ov-stat { display: inline-flex; align-items: center; gap: 5px; }
.ov-stat b { font-size: 1.15rem; }
.ov-stat.zero { opacity: .35; }
.ico-obj { width: 20px; height: 20px; flex: none; }
.ov-dragons { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; min-height: 22px; }
.ov-equipe.droite .ov-dragons { justify-content: flex-end; flex-direction: row-reverse; }
.ov-dragon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--trait); }
.ov-dragon .ico-obj { width: 16px; height: 16px; }
.ov-vide { color: var(--discret); font-size: .75rem; }
.ov-tag { font-family: var(--f-titre); font-size: .65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; }
.ame-tag { color: #2a1c04; background: linear-gradient(180deg, #ffe08a, var(--or)); }
.ancestral-tag { color: #0a1416; background: linear-gradient(135deg, #e3d4ff, #9fc4ff); }
.ov-centre { display: grid; place-items: center; align-content: center; gap: 2px; padding: 10px 18px;
  background: rgba(0, 0, 0, .35); border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); }
.ov-kills { display: flex; align-items: center; gap: 10px; }
.ov-kills b { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1; }
.ov-kills .ico-obj { width: 22px; height: 22px; }
.ov-centre small { color: var(--discret); font-size: .8rem; }
@media (max-width: 640px) {
  .overlay { grid-template-columns: 1fr 1fr; }
  .ov-centre { grid-column: 1 / -1; grid-row: 1; border: 0; border-bottom: 1px solid var(--trait); padding: 8px; }
  .ov-equipe { padding: 10px; gap: 6px; }
  .ov-nom .blason { width: 26px; height: 30px; }
  .ov-stats { gap: 4px 9px; }
  .ov-stat b { font-size: 1rem; }
  .ico-obj { width: 17px; height: 17px; }
}
.ov-nom-txt { display: grid; min-width: 0; }
.ov-equipe.droite .ov-nom-txt { justify-items: end; }
.ov-points { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ov-equipe.droite .ov-points { justify-content: flex-end; flex-direction: row-reverse; }
.ov-points b { font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.05; color: var(--texte); }
.ov-equipe.gagnant .ov-points b { color: var(--or); }
.ov-points small { color: var(--discret); font-size: .78rem; }
.ov-legende { text-transform: uppercase; letter-spacing: 2px; font-size: .65rem !important; margin-top: -2px; }
/* ---------- fiche de stats d'un joueur */
button.voir-stats { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: .7rem; letter-spacing: .5px;
  background: var(--hextech-sombre); color: var(--hextech); border: 1px solid rgba(63, 208, 196, .4); box-shadow: none;
  vertical-align: middle; border-radius: 6px; }
button.voir-stats:hover { color: var(--texte); transform: none; box-shadow: none; }
.ico-stats { width: 13px; height: 13px; }
.carte-joueur button.voir-stats { justify-self: start; }
.fiche-dialog { width: min(96vw, 940px); max-height: 92vh; overflow: auto; padding: 0; border: 1px solid var(--trait);
  border-radius: 16px; background: var(--plaque); color: var(--texte); }
.fiche-dialog::backdrop { background: rgba(4, 10, 11, .72); backdrop-filter: blur(3px); }
#fiche-contenu { padding: 20px; }
.fiche-joueur { display: grid; gap: 16px; }
.fj-tete { display: flex; align-items: center; gap: 14px; }
.fj-titre { flex: 1; min-width: 0; }
.fj-titre h2 { margin: 0; font-size: 1.6rem; text-transform: none; letter-spacing: .5px; }
.fj-titre p { margin: 4px 0 0; color: var(--discret); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fj-fermer { padding: 6px 12px; }
.fj-cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fj-cles .jeton span { display: block; color: var(--discret); font-size: .72rem; margin-top: 2px; }
.fj-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.fj-tuile { background: var(--plaque-2); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; }
.fj-tuile small { color: var(--discret); font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; }
.fj-tuile b { font-family: var(--f-titre); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.fj-tuile b i { font-style: normal; color: var(--discret); font-size: .9rem; }
.fj-tuile span { color: var(--discret); font-size: .75rem; }
.fj-tuiles.petites .fj-tuile b { font-size: 1.1rem; }
.fj-deux { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.fj-deux .fj-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fj-deux .fj-tuile { padding: 8px 10px; }
.fj-sous { margin: 12px 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--discret); }
.fj-objectifs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.fj-objectifs small { color: var(--discret); font-size: .75rem; }
.fj-graphe { margin: 0; }
.fj-graphe figcaption { font-size: .75rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--discret); margin-bottom: 4px; }
.fj-graphe svg { width: 100%; max-width: 420px; height: auto; display: block; }
.fj-graphe rect { fill: var(--hextech); }
.fj-graphe rect.neg { fill: var(--defaite); }
.fj-graphe .axe { stroke: var(--trait); stroke-width: 1; }
.fj-graphe text { font-family: var(--f-titre); font-size: 10px; fill: var(--discret); }
.fj-graphe text.val { fill: var(--texte); font-weight: 700; }
.fj-graphe text.v { fill: var(--victoire); font-weight: 700; }
.fj-graphe text.d { fill: var(--defaite); font-weight: 700; }
.fj-graphe .barre-g:hover rect { fill: var(--or); }
.fj-obj-cell { white-space: nowrap; }
.fj-obj-cell span { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.fj-obj-cell .ico-obj { width: 15px; height: 15px; }
.gagne-txt { color: var(--victoire); }
@media (max-width: 640px) {
  #fiche-contenu { padding: 14px; }
  .fj-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fj-deux { grid-template-columns: 1fr; }
  .fj-titre h2 { font-size: 1.3rem; }
}
.fj-tuiles.comp { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fj-tuile.niveau-haut { border-color: rgba(95, 211, 138, .5); box-shadow: inset 3px 0 0 var(--victoire); }
.fj-tuile.niveau-bas { border-color: rgba(240, 103, 122, .45); box-shadow: inset 3px 0 0 var(--defaite); }
.fj-tuile.niveau-moyen { box-shadow: inset 3px 0 0 var(--discret); }
.fj-tuile em.rang { font-style: normal; font-weight: 700; color: var(--texte); }
.fj-tuile.niveau-haut em.rang { color: var(--victoire); }
.fj-tuile.niveau-bas em.rang { color: var(--defaite); }
/* ---------- comparaison des joueurs */
.cmp-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; }
.cmp-filtres .large { grid-column: 1 / -1; }
.cmp-filtres .filtres { margin: 0; }
.etiquette { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--discret); }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pastille.libre { background: #3987e5; } .pastille.moi { background: #d95926; } .pastille.autre { background: #199e70; }
.cmp-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.cmp-tete h2 { text-transform: none; letter-spacing: .3px; }
.cmp-legende { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: .85rem; color: var(--discret); }
.legende-formes { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.legende-formes > span { display: inline-flex; align-items: center; gap: 4px; }
.forme-leg { width: 12px; height: 12px; } .forme-leg path { fill: var(--discret); }
.cmp-graphe { position: relative; }
#nuage { width: 100%; height: auto; display: block; }
#nuage .grille { stroke: var(--trait); stroke-width: 1; opacity: .6; }
#nuage .mediane { stroke: var(--discret); stroke-width: 1; stroke-dasharray: 4 4; }
#nuage .graduation { fill: var(--discret); font-size: 11px; font-family: var(--f-texte); }
#nuage .titre-axe { fill: var(--texte); font-size: 12px; font-family: var(--f-titre); letter-spacing: .5px; }
#nuage .pt { cursor: pointer; outline: none; }
#nuage .pt .cible { fill: transparent; }
#nuage .pt .forme { stroke: var(--plaque); stroke-width: 2; transition: transform .12s ease; }
#nuage .pt.actif .forme, #nuage .pt:focus-visible .forme { transform: scale(1.6); stroke: var(--texte); }
#nuage .etiquette-pt { fill: var(--texte); font-size: 11px; font-family: var(--f-texte); paint-order: stroke; stroke: var(--plaque); stroke-width: 3px; }
.cmp-bulle { position: absolute; z-index: 5; pointer-events: none; min-width: 190px; max-width: 260px; padding: 10px 12px; border-radius: 10px;
  background: var(--fond); border: 1px solid var(--trait); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); display: grid; gap: 3px; font-size: .85rem; }
.cmp-bulle b { font-family: var(--f-titre); font-size: 1rem; }
.cmp-bulle span { color: var(--discret); }
.cmp-bulle dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 6px 0 0; }
.cmp-bulle dt { color: var(--discret); } .cmp-bulle dd { margin: 0; text-align: right; font-family: var(--f-titre); font-variant-numeric: tabular-nums; }
.cmp-table th.tri { cursor: pointer; user-select: none; }
.cmp-table th.tri:hover { color: var(--texte); }
.cmp-table th[aria-sort=descending]::after { content: " ▼"; } .cmp-table th[aria-sort=ascending]::after { content: " ▲"; }
.cmp-table .axe { background: rgba(63, 208, 196, .06); color: var(--texte); }
.cmp-table tbody tr { cursor: pointer; }
.cmp-table tbody tr.actif td { background: rgba(233, 180, 76, .10); }
.champ { display: grid; gap: 6px; }
.champ label { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--discret); }
.lien { display: flex; gap: 6px; }
.lien input { flex: 1; min-width: 0; }

/* ---------- barre d'engagement */
.barre { position: sticky; bottom: 0; z-index: 10; margin-top: 4px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 14px 14px 0 0; border: 1px solid var(--or); border-bottom: 0; background: rgba(16, 32, 31, .96);
  backdrop-filter: blur(6px); display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; }
.barre .budget { display: grid; gap: 6px; min-width: 0; }
.barre .budget-txt { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.barre .rail { height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; }
.barre .rail i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9a6b16, var(--or)); transition: width .25s ease; }
.barre .rail.trop i { background: linear-gradient(90deg, #8c2d3b, var(--defaite)); }
.barre .trop-txt { color: var(--defaite); }
@media (max-width: 640px) {
  .bandeau { position: static; }
  .ligue-nom { display: none; }
  .barre { grid-template-columns: 1fr auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px 10px; }
  .barre .budget-txt { font-size: .8rem; }
  .barre .budget-txt > span:last-child { display: none; }
  .mes-offres { flex-wrap: nowrap; overflow-x: auto; max-height: none; }
  .mes-offres > .discret { display: none; }
  .mes-offres .puce { flex: none; }
  .barre button { padding: 9px 14px; font-size: .85rem; }
  .barre { grid-template-columns: 1fr; }
  .barre .actions { justify-content: stretch; }
  .barre .actions button { flex: 1; justify-content: center; }
}

/* ---------- notes */
.note { border-radius: 12px; padding: 12px 16px; border: 1px solid; }
.note.ok { color: var(--victoire); border-color: rgba(95, 211, 138, .4); background: rgba(95, 211, 138, .07); }
.note.alerte { color: #ffb3bd; border-color: rgba(240, 103, 122, .45); background: rgba(240, 103, 122, .08); }
.note ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- affiches de match */
.affiche { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 16px;
  border-radius: 14px; border: 1px solid var(--trait); background: var(--plaque-2); text-decoration: none; color: var(--texte); }
a.affiche:hover { border-color: var(--hextech); color: var(--texte); }
.affiche .camp { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--f-titre); font-weight: 700; }
.affiche .camp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.affiche .camp.droite { flex-direction: row-reverse; text-align: right; }
.affiche .camp.perd { opacity: .55; }
.affiche .score { font-family: var(--f-titre); font-size: 1.7rem; font-weight: 800; letter-spacing: 2px; }
.affiche.grand .score { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.affiche.grand .camp { font-size: clamp(1rem, 3vw, 1.5rem); }
.bandeau-resultat { font-family: var(--f-titre); font-weight: 800; letter-spacing: 4px; text-transform: uppercase; font-size: 1.4rem; }
.bandeau-resultat.v { color: var(--victoire); text-shadow: 0 0 18px rgba(95, 211, 138, .5); }
.bandeau-resultat.d { color: var(--defaite); }
.journees { display: grid; gap: 18px; }
.journee-bloc h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--discret); margin: 0 0 8px; }
.affiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
@media (max-width: 420px) { .affiches { grid-template-columns: 1fr; } }

/* ---------- classement */
.podium td:first-child { font-family: var(--f-titre); font-weight: 800; font-size: 1.1rem; }
.rang-1 td:first-child { color: var(--or); }
.rang-2 td:first-child { color: #c9d4d8; }
.rang-3 td:first-child { color: #d48b56; }
.coach-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---------- mercato */
.op { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 2px 8px; border-radius: 6px; }
.op-Enchere { color: var(--hextech); background: var(--hextech-sombre); }
.op-Transfert { color: var(--or); background: var(--or-sombre); }
.op-Vente { color: var(--support); background: rgba(181, 140, 240, .12); }

/* ---------- recit de match */
.game { display: grid; gap: 18px; }
.game-tete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.comparatif { display: grid; gap: 8px; }
.stat-ligne { display: grid; grid-template-columns: 40px 1fr 110px 1fr 40px; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; }
.stat-ligne .lab { text-align: center; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--discret); }
.stat-ligne .va { text-align: right; font-family: var(--f-titre); font-weight: 700; }
.stat-ligne .vb { font-family: var(--f-titre); font-weight: 700; }
.stat-ligne .ga, .stat-ligne .gb { height: 8px; background: var(--trait); border-radius: 4px; overflow: hidden; display: flex; }
.stat-ligne .ga { justify-content: flex-end; }
.stat-ligne .ga i { background: var(--hextech); display: block; }
.stat-ligne .gb i { background: var(--or); display: block; }
.chrono { display: grid; gap: 4px; }
.evt { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 10px; align-items: center; font-size: .9rem; }
.evt .t { text-align: center; font-family: var(--f-log); font-size: .8rem; color: var(--discret);
  border: 1px solid var(--trait); border-radius: 6px; padding: 2px 0; background: var(--fond); }
.evt .ga, .evt .gb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.evt .ga { justify-content: flex-end; text-align: right; }
.evt .txt { min-width: 0; overflow-wrap: anywhere; }
.ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none;
  font-family: var(--f-titre); font-weight: 800; font-size: .7rem; color: #06201d; }
.ico-fb { background: var(--defaite); color: #fff; }
.ico-dragon { background: #f08a4b; }
.ico-ancestral { background: linear-gradient(135deg, #b9f2ff, #7fa8ff); }
.ico-baron { background: var(--support); }
.ico-heraut { background: #7fa8ff; }
.ico-larves { background: #c08af0; }
.ico-tour { background: var(--discret); }
.ico-nexus { background: linear-gradient(135deg, #ffe08a, var(--or)); }
.ame { color: var(--or); font-weight: 700; }
.equipes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.equipes > * { min-width: 0; }
@media (max-width: 760px) { .equipes { grid-template-columns: 1fr; } .stat-ligne { grid-template-columns: 32px 1fr 80px 1fr 32px; } }
.champion { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--trait); flex: none; background: var(--fond);
  display: inline-grid; place-items: center; font-size: .7rem; color: var(--discret); overflow: hidden; vertical-align: middle; }
.champion img { width: 100%; height: 100%; display: block; }
.mvp { font-family: var(--f-titre); font-weight: 800; font-size: .7rem; color: #2a1c04; background: var(--or); border-radius: 4px; padding: 1px 6px; letter-spacing: 1px; }
.fantome { opacity: .45; }

/* ---------- accueil */
.une { padding-block: 48px 24px; display: grid; gap: 18px; max-width: 760px; }
.une h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
.une h1 b { color: var(--or); }
.une p { font-size: 1.15rem; color: var(--discret); max-width: 60ch; margin: 0; }
.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.atout h3 { margin: 0 0 6px; font-size: 1.05rem; }
.atout p { margin: 0; color: var(--discret); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Passe sobriete (2026-10-20) : plus compact, plus net, sans fioritures.
   Ce bloc passe en dernier et resserre les espacements de tout le site.
   ===================================================================== */
body { font-size: 15px; line-height: 1.45;
  background: radial-gradient(1000px 420px at 85% -10%, rgba(63, 208, 196, .06), transparent 60%), var(--fond); }
main { padding-block: 14px 4px; gap: 12px; }
h1 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
h2 { font-size: .85rem; margin: 0 0 10px; letter-spacing: 1.4px; }
h2 small { font-size: .8rem; }
.bandeau-int { padding-block: 7px; gap: 12px; }
.logo { font-size: 1.05rem; } .logo svg { width: 22px; height: 22px; }
.nav { gap: 12px; font-size: .9rem; }
.pied { padding-block: 14px 18px; font-size: .72rem; }
.plaque { padding: 12px 14px; border-radius: 10px; background: var(--plaque); }
.deux { gap: 12px; }
.hero { padding: 12px 14px; gap: 12px; border-radius: 10px;
  background: linear-gradient(115deg, hsla(var(--h), 55%, 40%, .22), transparent 50%), var(--plaque); }
.hero .blason { width: 44px; height: 51px; }
.hero h1 { font-size: 1.45rem; }
.hero .bilan { margin-top: 6px; gap: 8px; }
.rang { font-size: 1.7rem; }
.pulse { animation: none; }
.tier-S, .camp-total.gagnant, .jd.gagne, .attente, .carte-joueur.fin, .saison i.ici, .medaillon-duel,
.poste .medaillon, .bouton, button, .bouton.or, button.or, .bandeau-resultat.v { box-shadow: none; text-shadow: none; }
.bouton, button { padding: 8px 14px; border-radius: 8px; letter-spacing: .6px; font-size: .85rem;
  background: var(--hextech); }
.bouton.or, button.or { background: var(--or); }
.bouton:hover, button:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
button.secondaire, .bouton.secondaire { padding: 5px 10px; font-size: .85rem; }
.puce { padding: 2px 9px; font-size: .75rem; }
.coffre { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.jeton { padding: 7px 10px; border-radius: 8px; }
.jeton small { font-size: .68rem; }
.jeton b { font-size: 1.15rem; }
.piece { width: 12px; height: 12px; }
.ligne, .cartes { gap: 8px; }
.poste { padding: 10px 8px; border-radius: 10px; background: var(--plaque-2); }
.poste .medaillon { width: 34px; height: 34px; margin-bottom: 4px; }
.poste .medaillon svg { width: 18px; height: 18px; }
.carte-joueur { padding: 9px 11px; gap: 4px; border-radius: 10px; background: var(--plaque-2); }
.carte-joueur:hover { transform: none; }
.carte-joueur .nom { font-size: 1rem; }
.carte-joueur .ligne-info { font-size: .8rem; }
th, td { padding: 5px 8px; }
th { font-size: .66rem; }
.note { padding: 7px 12px; border-radius: 8px; font-size: .9rem; }
.appel { padding: 10px 14px; border-radius: 10px; background: var(--plaque); }
.appel .titre { font-size: .95rem; letter-spacing: 1px; }
.barre { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 10px 10px 0 0; }
.filtres { gap: 5px; margin-bottom: 8px; }
.filtres button { padding: 4px 10px; }
.affiche { padding: 9px 12px; border-radius: 10px; }
.affiche.grand .score { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.bandeau-resultat { font-size: 1.05rem; letter-spacing: 3px; }
.une { padding-block: 24px 8px; gap: 10px; }
.une h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
.une p { font-size: 1rem; }
.atouts { gap: 10px; }
.mode-emploi { margin: -2px 0 10px; gap: 2px; font-size: .9rem; }
.roles-couverts { gap: 6px; } .role-pastille { padding: 3px 9px; font-size: .82rem; }
.statuts { margin-top: 10px; }
.fiches { gap: 6px; } .fiche { padding: 8px 12px; gap: 4px; border-radius: 10px; }
.duels { gap: 6px; } .duel { gap: 6px; }
.jd { padding: 8px 10px; gap: 4px; border-radius: 10px; }
.jd:not(.gagne) { opacity: .85; }
.jd.gagne { background: linear-gradient(160deg, rgba(233, 180, 76, .12), var(--plaque-2) 60%); }
.medaillon-duel { width: 34px; height: 34px; } .medaillon-duel svg { width: 18px; height: 18px; }
.overlay { border-radius: 10px; }
.ov-equipe { padding: 9px 12px; gap: 6px; }
.ov-centre { padding: 8px 14px; }
.deux-recit { gap: 14px; }
.game { gap: 12px; }
.liste-attente { margin-top: 10px; gap: 6px; } .liste-attente li { padding: 6px 10px; }
.sablier { width: 30px; height: 30px; }
#fiche-contenu { padding: 14px 16px; }
.fiche-joueur { gap: 10px; }
.fj-cles, .fj-tuiles { gap: 6px; }
.fj-tuile { padding: 6px 10px; border-radius: 8px; }
.fj-tuile b { font-size: 1.1rem; }
.fj-sous { margin: 8px 0 4px; }
.cmp-filtres { gap: 8px 12px; }
.regles { gap: 12px; }
.lexique { gap: 6px 14px; }
.hero .sur { font-size: .68rem; }
@media (max-width: 640px) {
  .hero { grid-template-columns: auto 1fr auto; gap: 10px; }
  .hero .rang { grid-column: auto; text-align: center; font-size: 1.3rem; }
  .hero .rang small { font-size: .55rem; letter-spacing: 1px; }
  .barre { grid-template-columns: 1fr auto; }
  .barre .actions button { flex: none; }
  main { gap: 10px; }
}
.onglets { gap: 4px; margin: 0; }
.onglets [role=tab] { padding: 6px 12px; font-size: .78rem; letter-spacing: .8px; border-radius: 8px; }
.champ label, .champ .etiquette { font-size: .68rem; }
@media (max-width: 640px) {
  .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .onglets [role=tab] { flex: none; }
  .cmp-filtres { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp-filtres .champ.large { grid-column: 1 / -1; }
}

/* ===================================================================== comptes, ligues, amis, chat */
input[type=email], input[type=password] { background: var(--fond); border: 1px solid var(--trait); border-radius: 8px;
  padding: 8px 10px; width: 100%; }
input[type=email]:focus, input[type=password]:focus, input[type=text]:focus { border-color: var(--hextech); outline: none; }
.compte { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.compte a { color: var(--discret); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.compte a:hover, .compte a.actif { color: var(--hextech); }
.compte a.bouton { color: var(--texte); }
.compte form { margin: 0; }
.nav + .compte { border-left: 1px solid var(--trait); padding-left: 12px; }
.pastille-n { font-style: normal; font-size: .68rem; font-weight: 700; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: var(--or); color: #1a1406; display: inline-grid; place-items: center; }
button.lien-btn, .lien-btn { background: none; border: 0; padding: 0; color: var(--discret); font-size: .88rem;
  letter-spacing: 0; text-transform: none; cursor: pointer; }
button.lien-btn:hover { color: var(--texte); filter: none; }
.lien-btn.perdu { color: var(--defaite); }
.tete-page { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tete-page h1 { margin: 0; }
.compte-form { max-width: 420px; width: 100%; margin-inline: auto; }
.compte-form h1 { margin: 0 0 10px; font-size: 1.4rem; }
.compte-form form { display: grid; gap: 10px; }
.compte-form form button { justify-self: start; }
.liste-lignes { list-style: none; margin: 0; padding: 0; display: grid; }
.liste-lignes li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--trait); flex-wrap: wrap; }
.liste-lignes li:first-child { border-top: 0; }
.liste-lignes .actions-ligne { margin-left: auto; }
.lien-ligne { color: var(--texte); text-decoration: none; }
.lien-ligne:hover b { color: var(--hextech); }
.actions-ligne { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.actions-ligne form { margin: 0; }
.salon { align-items: start; }
.salon-col { display: grid; gap: 12px; }
.chat { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 0; }
.chat h2 { margin: 0; }
.chat-fil { height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; }
.chat-fil .chat-vide { margin: auto; }
.msg { max-width: 85%; align-self: flex-start; background: var(--plaque-2); border: 1px solid var(--trait);
  border-radius: 10px 10px 10px 2px; padding: 5px 9px; display: grid; gap: 1px; overflow-wrap: anywhere; }
.msg b { font-size: .75rem; color: var(--hextech); }
.msg small { font-size: .65rem; color: var(--discret); justify-self: end; }
.msg.moi { align-self: flex-end; border-radius: 10px 10px 2px 10px; background: var(--hextech-sombre); border-color: rgba(63, 208, 196, .35); }
.msg.moi b { display: none; }
.msg.systeme { align-self: center; background: none; border-style: dashed; color: var(--or); font-size: .85rem; text-align: center; }
.chat-saisie { display: flex; gap: 6px; }
.chat-saisie input { flex: 1; min-width: 0; }
.messagerie { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; }
.contacts { display: grid; gap: 2px; }
.contacts h2 { margin-bottom: 6px; }
.contacts a { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px;
  color: var(--discret); text-decoration: none; }
.contacts a:hover { color: var(--texte); background: var(--plaque-2); }
.contacts a[aria-current] { color: var(--hextech); background: var(--hextech-sombre); }
@media (max-width: 640px) {
  .messagerie { grid-template-columns: 1fr; }
  .contacts { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  .contacts h2 { display: none; }
  .chat-fil { height: 55vh; }
  .compte { width: 100%; justify-content: flex-end; }
  .nav + .compte { border-left: 0; padding-left: 0; }
}
.liste-lignes li > .lien-ligne, .liste-lignes li > span:not(.puce):not(.actions-ligne) { flex: 1 1 0; min-width: 0; }
.liste-lignes li > .blason, .liste-lignes li > svg { flex: none; }
.salon { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 12px; align-items: start; }
.options-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.mini-titre { margin: 0 0 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--discret); }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
@media (max-width: 760px) { .salon, .options-grille { grid-template-columns: 1fr; } }

.tag-titu { font-size: .6rem; font-weight: 700; letter-spacing: .5px; color: var(--hextech); border: 1px solid rgba(63, 208, 196, .45); border-radius: 4px; padding: 0 3px; }

.saison i.exempt { background: repeating-linear-gradient(45deg, var(--trait) 0 2px, transparent 2px 4px); }
.nav { flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; gap: 5px; }
.nav-off { color: var(--discret); opacity: .4; cursor: default; }
.outils-test { margin: 0 0 6px; }
.outils-test a { color: var(--discret); font-size: .75rem; border: 1px dashed var(--trait); border-radius: 6px; padding: 2px 8px; text-decoration: none; }
.outils-test a:hover { color: var(--or); border-color: var(--or); }
.choix-ligue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.choix-ligue select { min-width: 220px; }
.choix-ligue .bouton { margin-left: auto; }
.note.invitation { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--texte); border-color: rgba(233, 180, 76, .45); background: var(--or-sombre); }
.note.invitation .actions-ligne { margin-left: auto; }
.contacts .mini-titre { margin: 10px 0 2px; }
.contacts .lien button { padding: 5px 10px; }
.demande { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
.demande b { flex: 1; }
.demande button { padding: 3px 9px; }
.conv { display: grid; gap: 6px; }
.messagerie { grid-template-columns: 240px 1fr; }
@media (max-width: 760px) {
  .messagerie { grid-template-columns: minmax(0, 1fr); }
  .contacts { display: grid; overflow: visible; }
  .conv { min-width: 0; }
}
/* tableau de bord */
.cartes-ligues { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.carte-ligue { display: grid; gap: 8px; align-content: start; }
.carte-ligue.a-faire { border-color: rgba(233, 180, 76, .55); }
.cl-tete { display: flex; align-items: center; gap: 10px; }
.cl-statut { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.carte-ligue.a-faire .cl-statut { color: var(--or); }
.point-action { width: 8px; height: 8px; border-radius: 50%; background: var(--or); flex: none; }
.raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.raccourci { display: grid; gap: 2px; text-decoration: none; color: var(--texte); }
.raccourci:hover { border-color: var(--hextech); color: var(--texte); }
.raccourci b { font-family: var(--f-titre); letter-spacing: .5px; }
.raccourci span { color: var(--discret); font-size: .82rem; }
@media (max-width: 640px) {
  .barre .budget-txt > span:first-child { white-space: nowrap; }
  .barre .actions button { padding: 8px 10px; font-size: .78rem; }
}

.alerte-roles { margin: 0; font-size: .82rem; color: var(--or); }
tr.double-role td:first-child { box-shadow: inset 3px 0 0 var(--or); }

/* clubs, profil */
.tag-club { display: inline-block; font-family: var(--f-mono, monospace); font-size: .68rem; font-weight: 700; letter-spacing: .5px;
  color: var(--or); border: 1px solid rgba(233, 180, 76, .5); border-radius: 4px; padding: 0 4px; line-height: 1.5; vertical-align: middle; }
.tag-club.grand { font-size: .9rem; padding: 1px 6px; }
.msg b .tag-club { font-size: .58rem; }
.compte .aide { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--trait); justify-content: center; font-weight: 700; font-size: .8rem; }
.compte .moi-lien { color: var(--texte); gap: 6px; }
.club-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.niveau { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.niveau b { font-family: var(--f-titre); color: var(--hextech); }
.rail-xp { width: 160px; height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; }
.rail-xp i { display: block; height: 100%; background: var(--hextech); }
.choix-membres { display: grid; gap: 4px; }
.choix-membre { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.choix-membre:hover { background: var(--plaque-2); }
.rang-pal { min-width: 34px; text-align: center; font-family: var(--f-titre); font-weight: 700; }
@media (max-width: 760px) { .club-grille { grid-template-columns: 1fr; } }
/* calendrier et arbres de tournoi */
.filtres .bouton.choisi { border-color: var(--hextech); color: var(--hextech); background: var(--hextech-sombre); }
.evenements li { flex-wrap: nowrap; }
.evenements .ev-dates { min-width: 110px; color: var(--discret); font-size: .82rem; }
.evenements li.inter .lien-ligne b { color: var(--or); }
.arbre { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 6px; }
.arbre-ronde { display: flex; flex-direction: column; min-width: 190px; flex: none; }
.arbre-titre { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--discret); }
.arbre-matchs { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; flex: 1; }
.arbre-match { position: relative; border: 1px solid var(--trait); border-radius: 8px; background: var(--plaque-2); overflow: visible; }
.arbre.bracket .arbre-ronde:not(:last-child) .arbre-match::after { content: ""; position: absolute; right: -12px; top: 50%;
  width: 11px; border-top: 1px solid var(--trait); }
.arbre.bracket .arbre-ronde:not(:first-child) .arbre-match::before { content: ""; position: absolute; left: -12px; top: 50%;
  width: 11px; border-top: 1px solid var(--trait); }
.am-equipe { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: .84rem; }
.am-equipe + .am-equipe { border-top: 1px solid var(--trait); }
.am-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-equipe b { min-width: 14px; text-align: right; }
.am-equipe.gagne { color: var(--texte); font-weight: 600; }
.am-equipe.gagne b { color: var(--victoire); }
.am-equipe.perd { color: var(--discret); }
.am-bilan { font-size: .66rem; color: var(--discret); border: 1px solid var(--trait); border-radius: 4px; padding: 0 3px; }
.arbre-match:not(.joue) .am-nom { color: var(--discret); }
.classement-mini { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: .85rem; }
.cm-ligne b { color: var(--hextech); }
/* mode tournoi */
.compo-tournoi select, .remplacant-ligne select { width: 100%; min-width: 0; max-width: 100%; }
.remplacant-ligne { display: grid; grid-template-columns: auto minmax(0, 140px) minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 10px; }
.remplacant-ligne small { grid-column: 1 / -1; }
.ronde-res { border-top: 1px solid var(--trait); padding: 6px 0; }
.ronde-res summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .remplacant-ligne { grid-template-columns: 1fr 1fr; } .remplacant-ligne .mini-titre { grid-column: 1 / -1; } }

.affiches-ronde { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-bottom: 14px; }
.affiche-t { border: 1px solid var(--trait); border-radius: 8px; background: var(--plaque-2); padding: 8px 10px; display: grid; gap: 6px; }
.at-tete { display: grid; grid-template-columns: 1fr auto auto auto 1fr; gap: 8px; align-items: center; font-size: .88rem; }
.at-tete b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--discret); }
.at-tete b.at-fav { color: var(--texte); }
.at-pct { font-size: .8rem; }
.at-bo { font-size: .7rem; }
.at-barre { height: 5px; border-radius: 3px; background: #b8577e; overflow: hidden; }
.at-barre i { display: block; height: 100%; background: var(--hextech); }
.at-joueurs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2px 6px; align-items: center; font-size: .8rem; }
.at-joueurs .role { justify-self: center; }
.at-joueurs .role svg { width: 14px; height: 14px; }
button.pick { background: none; border: 0; padding: 1px 4px; border-radius: 4px; color: var(--texte); font-size: .8rem;
  letter-spacing: 0; text-transform: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.pick.droite { text-align: right; }
button.pick:hover:not(:disabled) { background: var(--hextech-sombre); color: var(--hextech); filter: none; }
button.pick:disabled { opacity: 1; cursor: default; }

table.modes th[scope], table.modes tbody th { text-align: left; color: var(--discret); font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
table.modes td { min-width: 0; font-size: .86rem; vertical-align: top; }
@media (max-width: 640px) { table.modes tbody th { white-space: normal; font-size: .62rem; } }
table.modes { width: 100%; table-layout: fixed; }
table.modes td { white-space: normal; overflow-wrap: anywhere; }
table.modes thead th:first-child, table.modes tbody th { width: 24%; }

.outils-test.simu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--or);
  border-radius: 8px; color: var(--or); font-size: .85rem; }
.outils-test.simu form { margin: 0; }

/* affiches : mise en lumiere proportionnelle a l'ecart (--i de 0 a 1) */
.at-tete { grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); gap: 10px; }
.at-equipe { font-size: .98rem; font-family: var(--f-titre); letter-spacing: .3px; }
.at-equipe.droite { text-align: right; }
.at-tete .at-pct { font-size: 1.12rem; font-weight: 700; }
.at-tete .fav { color: color-mix(in srgb, var(--or) calc(var(--i) * 100%), var(--texte)); }
.at-tete .faible { color: color-mix(in srgb, var(--discret) calc(var(--i) * 100%), var(--texte)); }
.at-tete b.at-equipe.fav { color: color-mix(in srgb, var(--or) calc(var(--i) * 100%), var(--texte)); }
.at-joueurs { grid-template-columns: minmax(0, 1fr) 44px auto 44px minmax(0, 1fr); gap: 3px 6px; }
.at-forme { font-size: .8rem; text-align: right; color: var(--discret); }
.at-forme.droite { text-align: left; }
.at-forme.fav { color: color-mix(in srgb, var(--victoire) calc(var(--i) * 100%), var(--texte)); font-weight: 700; }
.at-forme.faible { color: color-mix(in srgb, var(--discret) calc(var(--i) * 100%), var(--texte)); }
/* remplacant tactique : choix du role par icones */
.roles-remp { display: flex; gap: 4px; flex-wrap: wrap; }
.role-radio { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 8px;
  cursor: pointer; font-size: .8rem; color: var(--discret); }
.role-radio input { position: absolute; opacity: 0; pointer-events: none; }
.role-radio:has(input:checked) { border-color: var(--rc, var(--hextech)); color: var(--texte); background: var(--plaque-2); }
.role-radio:has(input:focus-visible) { outline: 2px solid var(--hextech); }
.remplacant-ligne { grid-template-columns: auto minmax(0, 1fr); }
.remplacant-ligne #r-joueur { grid-column: 1 / -1; }
.affiches-ronde { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

/* badges */
.badges-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.badge-carte { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--trait);
  border-radius: 8px; background: var(--plaque-2); font-size: .88rem; }
.badge-carte.a-moi { border-color: var(--or); background: var(--or-sombre); }
.badge-emoji { font-size: 1.6rem; line-height: 1; }
.stats-tournoi td { font-size: .85rem; }

/* choix du mode d'une ligue tournoi */
.choix-mode { gap: 6px; }
.mode-carte { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--trait); border-radius: 10px; cursor: pointer; }
.mode-carte input { position: absolute; opacity: 0; pointer-events: none; }
.mode-carte:has(input:checked) { border-color: var(--or); background: var(--or-sombre); }
.ic-mode { width: 34px; height: 34px; flex: none; color: var(--or); --accent: #fff1c2; }

/* ===================================================================== mode Pronos */
:root { --violet: #a98bf5; --rose: #f2709a; --orange: #f59a4a; }
.pr-grille { display: grid; gap: 12px; min-width: 0; }
.pr-grille > * { min-width: 0; }
.tete-pronos { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tete-pronos h1 { margin: 0; }
.ic { width: 28px; height: 28px; flex: none; } .ic.g { width: 40px; height: 40px; } .ic.s { width: 18px; height: 18px; } .ic.xs { width: 14px; height: 14px; vertical-align: -2px; }
.puce.feu { color: var(--orange); border-color: rgba(245,154,74,.5); --accent: #ffd27a; }
.puce.or { --accent: #fff1c2; }
.aide { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .82rem; font-family: Barlow, sans-serif; color: var(--discret); }
.etape { font-family: var(--f-titre); width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--hextech); color: #062321; font-size: .8rem; }
.etape.or { background: var(--or); color: #1a1406; } .etape.rose { background: var(--rose); color: #2a0712; }
section h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logo-eq { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 .66rem var(--f-titre); }
.mini { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 .45rem var(--f-titre); flex: none; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 .66rem var(--f-titre); }
.a-logo { background: #0b1516 !important; border: 2px solid; overflow: hidden; }
.a-logo img { width: 78%; height: 78%; object-fit: contain; display: block; }
.matchs-pr { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr)); gap: 8px; margin-top: 10px; }
.match-pr { border: 1px solid var(--trait); border-radius: 12px; background: var(--plaque-2); padding: 8px; display: grid; gap: 6px; }
.m-haut { display: flex; justify-content: space-between; font-size: .72rem; color: var(--discret); }
.m-ligne { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; }
button.equipe-pr { appearance: none; border: 2px solid var(--trait); background: var(--fond); color: var(--texte); border-radius: 10px; padding: 6px 8px;
  display: flex; align-items: center; gap: 8px; font: inherit; text-align: left; min-width: 0; letter-spacing: 0; text-transform: none; transition: transform .1s, border-color .1s; }
button.equipe-pr.d { flex-direction: row-reverse; text-align: right; }
button.equipe-pr:hover { transform: translateY(-1px); border-color: var(--hextech); filter: none; }
button.equipe-pr.choisi { border-color: var(--hextech); background: rgba(63,208,196,.14); box-shadow: 0 0 0 3px rgba(63,208,196,.15); }
.e-txt { display: grid; min-width: 0; }
.e-txt b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-txt span { font-size: .72rem; color: var(--discret); } .e-txt .gain { color: var(--or); font-weight: 700; }
button.jeton-pr { appearance: none; border: 1px dashed var(--trait); background: none; color: var(--discret); border-radius: 10px; padding: 2px 4px;
  display: grid; justify-items: center; align-content: center; font-size: .6rem; font-weight: 600; letter-spacing: 0; --accent: var(--or); }
button.jeton-pr .ic { width: 20px; height: 20px; }
button.jeton-pr.actif { color: var(--or); border: 1px solid var(--or); background: rgba(233,180,76,.12); }
.match-pr .cote { height: 4px; border-radius: 2px; background: #b8577e; overflow: hidden; }
.match-pr .cote i { display: block; height: 100%; background: var(--hextech); }
.cartes-pr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
button.carte-pr { appearance: none; border: 2px solid var(--trait); background: var(--plaque-2); border-radius: 12px; padding: 10px; text-align: left;
  font: inherit; display: grid; gap: 4px; position: relative; color: var(--or); --accent: #fff1c2; letter-spacing: 0; text-transform: none; transition: transform .1s, opacity .1s; }
button.carte-pr:hover { transform: translateY(-2px); filter: none; }
button.carte-pr b { color: var(--texte); font-size: .9rem; } button.carte-pr small { color: var(--discret); font-size: .74rem; }
button.carte-pr .pts { position: absolute; top: 8px; right: 10px; font: 700 .8rem var(--f-titre); }
button.carte-pr .choix-fait { color: var(--or); font-weight: 600; }
button.carte-pr.choisi { border-color: var(--or); background: rgba(233,180,76,.12); }
button.carte-pr.grise, button.carte-pr.ferme { opacity: .35; }
button.carte-pr.ferme { pointer-events: none; }
.choix-zone { margin-top: 8px; padding: 10px; border: 1px solid var(--or); border-radius: 12px; background: rgba(233,180,76,.06); }
.choix-zone h3 { margin: 0 0 8px; font: 700 .88rem var(--f-titre); color: var(--or); display: flex; align-items: center; gap: 6px; --accent: #fff1c2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
button.chip { appearance: none; border: 1px solid var(--trait); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .8rem; color: var(--texte);
  background: var(--fond); display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; text-transform: none; }
button.chip:hover { border-color: var(--or); filter: none; }
button.chip.ok { border-color: var(--or); background: rgba(233,180,76,.15); color: var(--or); }
button.chip small { color: var(--discret); }
.multikill-pr { color: var(--rose); --accent: #ffd0df; }
.multikill-pr h2 { color: var(--texte); }
.filtres-roles { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.filtres-roles button { appearance: none; border: 1px solid var(--trait); background: none; color: var(--discret); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .78rem; letter-spacing: 0; text-transform: none; }
.filtres-roles button.ok { border-color: var(--rose); color: var(--rose); }
.joueurs-pr { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; }
button.joueur-pr { appearance: none; border: 2px solid var(--trait); background: var(--plaque-2); color: var(--texte); border-radius: 12px; padding: 8px;
  min-width: 82px; display: grid; justify-items: center; gap: 2px; font: inherit; letter-spacing: 0; text-transform: none; }
button.joueur-pr b { font-size: .78rem; } button.joueur-pr small { font-size: .68rem; color: var(--discret); }
button.joueur-pr.choisi { border-color: var(--rose); background: rgba(242,112,154,.12); }
.paris-pr { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 10px; }
.pari-pr { border: 1px solid rgba(169,139,245,.35); background: linear-gradient(160deg, rgba(169,139,245,.12), var(--plaque-2) 60%); border-radius: 12px;
  padding: 10px; display: grid; gap: 6px; color: var(--violet); --accent: #e3d8ff; }
.pari-tete { display: flex; gap: 8px; align-items: center; } .pari-tete b { color: var(--texte); }
.pari-pr select { width: 100%; }
.pot { display: flex; align-items: center; gap: 6px; color: var(--or); font: 700 .9rem var(--f-titre); --accent: #fff1c2; flex-wrap: wrap; }
.pot small { font-weight: 500; font-size: .72rem; font-family: Barlow, sans-serif; color: var(--discret); }
.barre-pr { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: rgba(16,32,31,.97); border: 1px solid var(--or); border-radius: 10px 10px 0 0; padding: 8px 12px; }
.allin-pr { display: flex; align-items: center; gap: 6px; color: var(--rose); font-size: .82rem; font-weight: 600; --accent: #ffd0df; }
.allin-pr.off { opacity: .5; }
.allin-pr select { max-width: 200px; }
.res-matchs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: .82rem; }
.res-match { display: inline-flex; align-items: center; gap: 5px; color: var(--discret); }
.res-match.joue { color: var(--texte); }
.mes-items { display: flex; flex-wrap: wrap; gap: 6px; }
.item { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--trait); border-radius: 999px; padding: 3px 10px; font-size: .8rem; }
.item.ok { border-color: rgba(95,211,138,.5); color: var(--victoire); } .item.ko { border-color: rgba(240,103,122,.4); color: var(--defaite); }
.item.attente { color: var(--discret); } .item.combo { border-color: rgba(245,154,74,.6); color: var(--orange); }
.item b { color: var(--texte); }
.tag-mult { font-style: normal; font-size: .66rem; font-weight: 700; padding: 0 4px; border-radius: 4px; border: 1px solid currentColor; }
.tag-mult.rose { color: var(--rose); } .tag-mult.or { color: var(--or); }
.res-autres { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .78rem; color: var(--discret); }
.res-autres b { color: var(--texte); }
@media (max-width: 520px) { .e-txt b { font-size: .8rem; } .logo-eq { width: 28px; height: 28px; } button.equipe-pr { padding: 5px 6px; gap: 6px; } #resume { display: none; } }
@media (max-width: 520px) { .barre-pr { flex-wrap: nowrap; padding: 6px 8px; } .allin-pr select { max-width: 110px; } .barre-pr button { padding: 8px 12px; font-size: .78rem; } }

.filtre-joueurs { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 8px; }
.filtre-joueurs .filtres-roles { margin: 0; }
.filtre-joueurs .filtre-equipe { max-width: 220px; font-size: .82rem; padding: 3px 6px; }
.choix-zone .filtre-joueurs .filtres-roles button.ok { border-color: var(--or); color: var(--or); }

/* bonus : logos et pourcentages ; All-in explicite */
.moy-eq { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 .5rem var(--f-titre); flex: none; }
button.chip .pct { font-weight: 700; color: var(--discret); }
button.chip .pct.fav { color: var(--or); }
button.chip .vs-pr { font-style: normal; font-size: .68rem; color: var(--discret); }
button.chip .score-pr { font-family: var(--f-titre); font-size: .95rem; padding: 0 2px; }
.allin-pr { display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: center; }
.allin-pr label { display: inline-flex; align-items: center; gap: 6px; color: var(--rose); --accent: #ffd0df; }
.allin-pr small { grid-column: 1 / -1; color: var(--discret); font-weight: 500; font-size: .74rem; max-width: 340px; }
@media (max-width: 520px) { .allin-pr small { display: none; } }

/* pronos : journees ouvertes */
.journees-pr { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.journees-pr > * { display: grid; gap: 1px; min-width: 150px; padding: 8px 12px; border: 1px solid var(--trait); border-radius: 10px; text-decoration: none; color: var(--texte); background: rgba(255,255,255,.02); }
.journees-pr small { color: var(--discret); font-size: .74rem; }
.journees-pr i { font-style: normal; font-size: .72rem; color: var(--orange); }
.journees-pr .faite i { color: var(--victoire); }
.journees-pr a.actif { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.journees-pr .a-venir { opacity: .55; border-style: dashed; }
.journees-pr .a-venir i { color: var(--discret); }
/* pronos : resultats en tableau */
.res-jour h3.titre-bonus { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font-size: .9rem; }
.tab-res, .tab-bonus { border-collapse: separate; border-spacing: 6px 4px; width: 100%; }
.tab-res th[scope=row], .tab-bonus th[scope=row] { text-align: left; font-size: .85rem; white-space: nowrap; padding-right: 6px; }
.tab-res tr.moi th[scope=row], .tab-bonus tr.moi th[scope=row] { color: var(--or); }
.tab-res .coin { text-align: left; font-size: .72rem; color: var(--discret); font-weight: 600; vertical-align: bottom; }
.tab-res td { text-align: center; padding: 4px 2px; border-radius: 8px; background: rgba(255,255,255,.025); }
.tab-res .total-j { font-weight: 800; background: none; }
.boite-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; min-width: 120px; padding: 8px 6px 6px; border: 1px solid var(--trait); border-radius: 10px; background: rgba(255,255,255,.03); }
.boite-match.joue { border-color: rgba(201,168,76,.35); }
.bm-eq { display: grid; justify-items: center; gap: 2px; font-size: .78rem; }
.bm-eq.gagne b { color: var(--victoire); }
.bm-eq.perd { opacity: .5; }
.bm-score { font-size: 1.3rem; font-weight: 800; }
.bm-score i { font-style: normal; color: var(--discret); padding: 0 2px; }
.bm-cote { grid-column: 1 / -1; color: var(--discret); font-size: .66rem; font-weight: 500; }
.prono { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; }
.prono.ok b { color: var(--victoire); } .prono.ko { opacity: .8; } .prono.ko b { color: var(--defaite); }
.prono.attente b { color: var(--discret); }
.tab-bonus td { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.tab-bonus tr.reponses th, .tab-bonus tr.reponses .item { color: var(--or); }
.tab-bonus tr.reponses .item { border-style: dashed; }
.tab-bonus .item .mini { margin: 0 -1px; }

/* notifications */
.notifs-carte { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }