/* Site Danubia : DA « Massif » (noir chaud, or, relief plein à 45° comme le logo, coins coupés). Couleurs : tokens.css (design/generer.py). */
@font-face { font-family: "Anybody"; font-weight: 500 900; font-stretch: 50% 150%; font-display: swap; src: url(fonts/anybody-latin-variable.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin-variable.woff2) format("woff2"); }

:root {
  /* rouge des graphiques un peu plus sombre que --rouge (bande de luminosité, validé contre --panneau) */
  --rouge-graphe: #F04A4A;
  --bleu-clair: #9DBEFF;
  --rouge-clair: #FF9C9C;
  --f-titre: "Anybody", "Arial Narrow", sans-serif;
  --f-texte: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  /* relief : ombre pleine vers le bas à droite, comme l'extrusion du logo */
  --ombre-relief: var(--relief) var(--relief) 0 var(--ombre);
  --ombre-or: 4px 4px 0 var(--or-ext);
  --pan: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --f-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fond); }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.5 var(--f-texte); min-height: 100vh; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.gris { color: var(--gris); }
.sombre { color: var(--sombre); }
.c-bleu { color: var(--bleu); }
.c-rouge { color: var(--rouge); }
.c-vert { color: var(--vert); }
.c-or { color: var(--or); }

/* ---------- barre du haut ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; align-items: center; gap: 20px; height: var(--barre-haut); padding: 0 20px; background: var(--panneau); border-bottom: 1px solid var(--trait); }
.nav .logo { display: flex; align-items: center; gap: 10px; font: 800 18px var(--f-titre); letter-spacing: .14em; color: var(--or); text-decoration: none; flex: none; }
.nav .logo img { width: 22px; height: 22px; }
.nav .liens { display: flex; align-items: center; gap: 4px; }
.nav .lien { color: var(--gris); font: 600 14px var(--f-texte); text-decoration: none; background: none; border: 0; padding: 6px 10px; cursor: pointer; border-radius: var(--rayon); }
.nav .lien:hover { color: var(--texte); background: var(--survol); }
.nav .lien.on { color: var(--texte); box-shadow: inset 0 -2px 0 var(--or); border-radius: 0; }
.nav .vide { flex: 1; }
.menu-jeux { position: relative; }
.liste-jeux { position: absolute; top: calc(100% + 8px); left: 0; width: 320px; background: var(--panneau); border: 1px solid var(--trait); box-shadow: 0 12px 32px rgba(0,0,0,.5); padding: 6px; display: grid; gap: 2px; }
.liste-jeux a { display: flex; align-items: center; gap: 12px; padding: 8px; text-decoration: none; color: var(--texte); border-radius: var(--rayon); }
.liste-jeux a:hover, .liste-jeux a.on { background: var(--survol); }
.liste-jeux a > span { display: grid; }
.liste-jeux a span span { font-size: 12px; color: var(--gris); }
.recherche { position: relative; width: 240px; }
.recherche input { width: 100%; background: var(--fond); border: 1px solid var(--trait); color: var(--texte); font: 14px var(--f-texte); padding: 7px 10px 7px 30px; border-radius: var(--rayon);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%238A8F98' stroke-width='1.6'/%3E%3Cpath d='M9.5 9.5L13 13' stroke='%238A8F98' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 9px center; }
.recherche input:focus { outline: none; border-color: var(--or); }
.propositions { position: absolute; top: calc(100% + 6px); right: 0; left: 0; background: var(--panneau); border: 1px solid var(--trait); box-shadow: 0 12px 32px rgba(0,0,0,.5); padding: 4px; }
.propositions a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; color: var(--texte); text-decoration: none; font-size: 14px; }
.propositions a span:not(.pastille-rang) { flex: 1; }
.propositions a:hover { background: var(--survol); }
.propositions .aucun { padding: 8px; color: var(--gris); font-size: 13px; }
.pixel { image-rendering: pixelated; flex: none; }

.conteneur { max-width: 1280px; margin: 0 auto; padding-inline: 20px; }

/* ---------- tête de partie ---------- */
.score { background: var(--panneau); border-bottom: 1px solid var(--trait); }
.score .conteneur { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 24px; }
.eq { display: flex; align-items: center; gap: 14px; min-width: 0; }
.eq.droite { flex-direction: row-reverse; text-align: right; }
.blason { flex: none; width: 64px; height: 64px; display: grid; place-items: center; font: 800 20px var(--f-titre); color: var(--fond); }
.blason .blason-img { width: 64px; height: 64px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.eq .nom { font: 700 26px/1 var(--f-titre); text-transform: uppercase; letter-spacing: .01em; }
.eq .sous { font-size: 13px; color: var(--gris); margin-top: 4px; }
.eq .etiquette { display: inline-block; font: 800 10px var(--f-texte); letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; margin-bottom: 6px; }
.etiquette.gagne { background: var(--or); color: var(--fond); }
.etiquette.perd { background: var(--survol); color: var(--gris); }
.centre { text-align: center; display: grid; gap: 4px; }
.centre .res { font: 800 12px var(--f-texte); letter-spacing: .16em; color: var(--or); text-transform: uppercase; }
.centre .gros { font: 800 52px/1 var(--f-titre); }
.centre .gros span { color: var(--sombre); padding: 0 10px; }
.centre .meta { font-size: 13px; color: var(--gris); }

/* ---------- onglets ---------- */
.onglets { border-bottom: 1px solid var(--trait); background: var(--fond); }
.onglets .conteneur { display: flex; overflow-x: auto; }
.onglets button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--gris); font: 600 14px var(--f-texte); padding: 13px 16px; cursor: pointer; white-space: nowrap; }
.onglets button:hover { color: var(--texte); }
.onglets button[aria-selected="true"] { color: var(--texte); border-color: var(--or); }
.onglets button:focus-visible, button:focus-visible, a:focus-visible { outline: 1px solid var(--or); outline-offset: 2px; }

.corps { padding-block: 20px 48px; display: grid; gap: 20px; }
.grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

/* ---------- blocs ---------- */
.bloc { background: var(--panneau); border: 1px solid var(--trait); min-width: 0; }
.bloc > h2 { margin: 0; padding: 10px 14px; font: 700 12px var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--trait); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bloc > h2 .leg { font-weight: 600; letter-spacing: .04em; text-transform: none; font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.leg i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: 0; }
.bloc .pad { padding: 12px 14px; }
.defile { overflow-x: auto; }

/* ---------- tableau ---------- */
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab th { text-align: right; font: 600 11px var(--f-texte); color: var(--gris); text-transform: uppercase; letter-spacing: .06em; padding: 9px 8px; border-bottom: 1px solid var(--trait); white-space: nowrap; user-select: none; }
.tab th[data-cle] { cursor: pointer; }
.tab th[data-cle]:hover { color: var(--texte); }
.tab th.tri { color: var(--or); }
.tab th:first-child, .tab td:first-child { text-align: left; padding-left: 14px; }
.tab th:last-child, .tab td:last-child { padding-right: 14px; }
.tab td { text-align: right; padding: 8px 8px; border-bottom: 1px solid var(--trait); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab tr.equipe td { background: var(--survol); font: 700 11px var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); text-align: left; padding-block: 7px; }
.tab tbody tr:not(.equipe):hover td { background: var(--survol); }
.tab tr:last-child td { border-bottom: 0; }
.joueur { display: flex; align-items: center; gap: 8px; }
.joueur .barre-eq { width: 3px; height: 18px; flex: none; }
.joueur img { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.mvp { font: 800 10px var(--f-texte); color: var(--fond); background: var(--or); padding: 1px 5px; letter-spacing: .06em; }
.fort { color: var(--texte); font-weight: 700; }
.faible { color: var(--gris); }
.jauge { display: inline-block; height: 4px; background: var(--trait); vertical-align: middle; margin-left: 6px; width: 40px; position: relative; }
.jauge b { position: absolute; inset: 0 auto 0 0; background: var(--or); }

/* ---------- chiffres clés ---------- */
.kpis { display: grid; grid-template-columns: 1fr 1fr; }
.kpi { padding: 12px 14px; border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); min-width: 0; }
.kpi:nth-child(2n) { border-right: 0; }
.kpis .kpi:nth-last-child(-n+2) { border-bottom: 0; }
.kpi .v { font: 700 24px/1.1 var(--f-titre); }
.kpi .l { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.kpi .d { font-size: 12px; color: var(--gris); }

/* ---------- graphes ---------- */
.graphe { padding: 8px 8px 4px; }
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphe text { font: 11px var(--f-mono); fill: var(--gris); }
.tip { position: fixed; pointer-events: none; z-index: 20; background: var(--fond); border: 1px solid var(--trait); padding: 8px 10px; font: 13px/1.45 var(--f-texte); color: var(--texte); min-width: 160px; max-width: 280px; }
.tip .t { color: var(--gris); font: 12px var(--f-mono); margin-bottom: 4px; }
.tip .l { display: flex; justify-content: space-between; gap: 16px; }
.tip .k { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }

/* barres comparées (combat, contrôle) */
.lignes { display: grid; gap: 10px; padding: 12px 14px; }
.ligne { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 13px; }
.ligne .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .v { text-align: right; font-variant-numeric: tabular-nums; }
.piste { height: 8px; background: var(--fond); display: flex; gap: 2px; }
.piste b { display: block; height: 100%; }
.piste b:first-child { border-radius: 0; }

/* matrice qui a tué qui */
.matrice { border-collapse: collapse; font-size: 12px; margin: 12px 14px 14px; }
.matrice th { font-weight: 600; color: var(--gris); padding: 4px 6px; white-space: nowrap; }
.matrice th.v { writing-mode: vertical-rl; transform: rotate(180deg); height: 84px; text-align: left; vertical-align: bottom; }
.matrice td { min-width: 40px; height: 30px; text-align: center; font-variant-numeric: tabular-nums; border: 2px solid var(--panneau); color: var(--texte); }

.role { font-size: 12px; color: var(--gris); border: 1px solid var(--trait); padding: 1px 6px; border-radius: var(--rayon); }
.pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.pips i { width: 6px; height: 10px; display: inline-block; }

/* têtes de skin et blasons */
.tete { display: inline-block; flex: none; width: calc(var(--s) * 8); height: calc(var(--s) * 8); vertical-align: middle;
  background-repeat: no-repeat; background-size: calc(var(--s) * 64) auto;
  background-position: calc(var(--s) * -40) calc(var(--s) * -8), calc(var(--s) * -8) calc(var(--s) * -8);
  image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.tete.vide { width: var(--t); height: var(--t); display: inline-grid; place-items: center; color: var(--fond); font: 800 calc(var(--t) * .55)/1 var(--f-titre); }
.blason-img { image-rendering: pixelated; vertical-align: middle; flex: none; }
.blason-vide { display: inline-grid; place-items: center; color: var(--fond); font-family: var(--f-titre); font-weight: 800; vertical-align: middle; }
.nomj { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }

/* chronologie */
.chrono { list-style: none; margin: 0; padding: 4px 0; font-size: 13px; }
.chrono li { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 14px; border-bottom: 1px solid var(--trait); }
.chrono li:last-child { border-bottom: 0; }
.chrono .t { font: 12px var(--f-mono); color: var(--gris); }
.chrono .ic { text-align: center; }
.chrono li.secondaire { color: var(--gris); padding-block: 3px; font-size: 12px; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres button { background: var(--fond); border: 1px solid var(--trait); color: var(--gris); font: 600 12px var(--f-texte); padding: 4px 10px; cursor: pointer; border-radius: var(--rayon); }
.filtres button[aria-pressed="true"] { border-color: var(--or); color: var(--or); }

/* carte */
.plan { position: relative; margin: 12px 14px 14px; border: 1px solid var(--trait); background: var(--fond); }
.plan img { display: block; width: 100%; height: auto; }
.plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-vide { padding: 40px 14px; text-align: center; color: var(--gris); }

/* liste des parties */
.parties { display: grid; gap: 8px; }
.partie { display: grid; grid-template-columns: 6px 130px auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px 12px 0; background: var(--panneau); border: 1px solid var(--trait); text-decoration: none; }
.partie:hover { background: var(--survol); }
.partie .bande { align-self: stretch; }
.partie .carte { font: 700 18px var(--f-titre); text-transform: uppercase; }
.partie .duel { display: flex; align-items: center; gap: 10px; }
.partie .duel b { font: 800 22px var(--f-titre); }
.partie .qui { font-size: 13px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partie .droite { text-align: right; font-size: 13px; color: var(--gris); }

.etat { padding: 80px 20px; text-align: center; color: var(--gris); }
.etat h1 { font: 800 32px var(--f-titre); color: var(--texte); text-transform: uppercase; margin: 0 0 8px; }
.pied { padding: 24px 20px 40px; text-align: center; color: var(--sombre); font-size: 12px; }

/* ---------- éléments communs ---------- */
.petit { font-size: 12px; }
.texte { color: var(--texte); }
.sur { font: 700 12px var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
code { font: 13px var(--f-mono); color: var(--texte); background: var(--survol); padding: 1px 5px; border-radius: var(--rayon); }
.bouton { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--f-texte); padding: 11px 18px; border: 1px solid var(--trait); background: var(--survol); color: var(--texte); text-decoration: none; cursor: pointer; border-radius: var(--rayon); }
.bouton:hover { border-color: var(--gris); }
.bouton.or { background: var(--or); border-color: var(--or); color: var(--fond); }
.bouton.or:hover { background: var(--or-fonce); }
.lien-discret { color: var(--gris); text-decoration: none; font: 600 13px var(--f-texte); background: none; border: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.lien-discret:hover { color: var(--or); }
.lien-joueur { display: inline-flex; align-items: center; gap: 8px; color: var(--texte); text-decoration: none; font-weight: 600; }
.lien-joueur:hover span { color: var(--or); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--f-texte); color: var(--gris); border: 1px solid var(--trait); padding: 3px 8px; border-radius: var(--rayon); background: var(--fond); }
.chip.or { color: var(--fond); background: var(--or); border-color: var(--or); }
.point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sombre); flex: none; }
.point.vert { background: var(--vert); box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); }
.pastille-rang { display: inline-block; font: 700 12px var(--f-texte); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); padding: 2px 8px; border-radius: var(--rayon); white-space: nowrap; }
.pastille-rang.petit { font-size: 11px; padding: 1px 6px; }
.select { background: var(--fond); color: var(--texte); border: 1px solid var(--trait); padding: 4px 8px; font: 13px var(--f-texte); border-radius: var(--rayon); }
.titre-page { display: grid; gap: 6px; padding-top: 12px; }
.titre-page h1 { font: 800 40px/1 var(--f-titre); text-transform: uppercase; margin: 0; }
.titre-page p { margin: 0; max-width: 70ch; }
.section { display: grid; gap: 12px; }
.titre-section { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titre-section h2, .h-section { font: 800 24px/1.1 var(--f-titre); text-transform: uppercase; margin: 0; letter-spacing: .02em; }
.barre-filtres { align-items: center; }
.fil { font-size: 13px; color: var(--gris); }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--or); }
.fil span:last-child { color: var(--texte); }
.fil-bande { background: var(--fond); border-bottom: 1px solid var(--trait); padding-block: 8px; }
.pied { border-top: 1px solid var(--trait); margin-top: 24px; }
.pied-grille { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-align: left; color: var(--gris); }
.cliquable { cursor: pointer; }
.resultat { font: 700 11px var(--f-texte); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--rayon); }
.resultat.v { color: var(--fond); background: var(--vert); }
.resultat.d { color: var(--texte); background: color-mix(in srgb, var(--rouge) 35%, var(--panneau)); }
.resultat.nul { color: var(--gris); background: var(--survol); }
.partie.sans-lien:hover { background: var(--panneau); }
.liste-parties .partie { border: 0; border-bottom: 1px solid var(--trait); }
.liste-parties .partie:last-child { border-bottom: 0; }
.notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--gris); }
.notes li::marker { color: var(--or); }

/* ---------- accueil ---------- */
.hero { position: relative; min-height: 520px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--trait); background: var(--fond); }
.hero-fond { position: absolute; inset: 0; }
.hero-fond img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; image-rendering: pixelated; }
.hero-fond img.on { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fond) 0%, rgba(21,18,14,.9) 35%, rgba(21,18,14,.25) 70%, rgba(21,18,14,.1) 100%), linear-gradient(0deg, var(--fond) 0%, transparent 35%); pointer-events: none; }
.hero-contenu { position: relative; z-index: 1; width: 100%; padding-block: 56px 72px; }
.hero-texte { max-width: 560px; display: grid; gap: 14px; }
.hero h1 { font: 800 96px/.85 var(--f-titre); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.devise { font: 700 22px/1.25 var(--f-titre); margin: 0; color: var(--texte); text-wrap: balance; }
.hero-desc { margin: 0; color: var(--gris); max-width: 52ch; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.statut { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris); }
.statut b { color: var(--texte); }
.hero-legende { position: absolute; z-index: 1; right: 0; left: 0; bottom: 18px; display: flex; justify-content: flex-end; }
.hero-carte { text-align: right; font-size: 13px; color: var(--texte); text-decoration: none; text-shadow: 0 1px 2px #000; }
.hero-carte span { color: var(--gris); }
.chiffres-bande { background: var(--panneau); border-bottom: 1px solid var(--trait); }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres > div { display: grid; padding: 18px 20px; border-right: 1px solid var(--trait); }
.chiffres > div:last-child { border-right: 0; }
.chiffres b { font: 800 34px/1 var(--f-titre); }
.chiffres span { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.chiffres.petits { background: var(--panneau); border: 1px solid var(--trait); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.chiffres.petits b { font-size: 28px; }
.jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.jeu { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--panneau); border: 1px solid var(--trait); text-decoration: none; color: var(--texte); border-top: 3px solid var(--jeu); }
.jeu:hover { background: var(--survol); border-color: var(--jeu); }
.jeu-tete { display: flex; justify-content: space-between; align-items: flex-start; }
.jeu-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris); }
.jeu h3 { font: 800 26px/1 var(--f-titre); text-transform: uppercase; margin: 6px 0 0; }
.jeu .accroche { margin: 0; color: var(--gris); font-size: 14px; }
.jeu-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--trait); }
.jeu-pied .commande { margin-left: auto; }
.tetes { display: inline-flex; }
.tetes .tete + .tete, .tetes .tete.vide + .tete { margin-left: -4px; }
.bande-cartes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.carte-mini { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border: 1px solid var(--trait); display: block; color: var(--texte); text-decoration: none; }
.carte-mini img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .3s; }
.carte-mini:hover img { transform: scale(1.04); }
.carte-mini > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); display: flex; justify-content: space-between; align-items: baseline; }
.carte-mini b { font: 800 18px var(--f-titre); text-transform: uppercase; }
.carte-mini span span { font-size: 12px; color: var(--gris); }
.nouveautes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.nouveaute { background: var(--panneau); border: 1px solid var(--trait); padding: 14px; display: grid; gap: 4px; align-content: start; }
.nouveaute time { font: 600 12px var(--f-texte); color: var(--or); text-transform: uppercase; letter-spacing: .08em; }
.nouveaute h3 { margin: 0; font: 700 18px var(--f-titre); }
.nouveaute p { margin: 0; color: var(--gris); font-size: 14px; }

.badge-bientot { display: inline-block; font: 800 11px var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--fond); background: var(--jeu, var(--or)); padding: 3px 8px; border-radius: var(--rayon); }
.badge-bientot.petit { font-size: 9px; padding: 1px 5px; vertical-align: 2px; background: #FF7A1A; }
.jeu.bientot { border-top-style: dashed; background: linear-gradient(160deg, color-mix(in srgb, var(--jeu) 12%, var(--panneau)) 0%, var(--panneau) 60%); }
.annonce { display: flex; gap: 28px; align-items: center; padding: 28px; text-decoration: none; color: var(--texte);
  background: linear-gradient(110deg, color-mix(in srgb, var(--jeu) 22%, var(--panneau)) 0%, var(--panneau) 55%, color-mix(in srgb, var(--bleu) 14%, var(--panneau)) 100%);
  border: 1px solid color-mix(in srgb, var(--jeu) 45%, var(--trait)); }
a.annonce:hover { border-color: var(--jeu); }
.annonce img { width: 120px; height: 120px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.annonce h2 { font: 800 44px/1 var(--f-titre); text-transform: uppercase; margin: 10px 0 8px; }
.annonce p { margin: 0 0 10px; color: var(--gris); max-width: 62ch; }

.groupe-jeux { font: 700 11px var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--sombre); padding: 8px 8px 2px; }
.annonce-jeu { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 300px; overflow: hidden; text-decoration: none; color: var(--texte);
  border: 1px solid color-mix(in srgb, var(--jeu) 45%, var(--trait)); background: #0B1430; }
a.annonce-jeu:hover { border-color: var(--jeu); }
.annonce-scene { grid-column: 2; grid-row: 1; width: 100%; height: 100%; object-fit: cover; max-width: 100%; }
.annonce-texte { grid-column: 1; grid-row: 1; display: grid; align-content: center; gap: 10px; padding: 32px; background: linear-gradient(90deg, #0B1430 70%, transparent); position: relative; z-index: 1; margin-right: -80px; }
.annonce-texte h2 { font: 800 52px/1 var(--f-titre); text-transform: uppercase; margin: 0; }
.annonce-texte p { margin: 0; color: #C3C8D0; max-width: 56ch; }
.annonce-texte .chip { background: rgba(0,0,0,.3); color: #C3C8D0; }

.vainqueur { display: flex; align-items: center; gap: 14px; justify-content: center; text-align: left; }
.vainqueur .gros { font-size: 44px; }
.tetes-duel { display: flex; gap: 4px; flex-wrap: wrap; }
.eq .nom a { color: inherit; text-decoration: none; }
.eq .nom a:hover { color: var(--or); }

/* ---------- page d'un jeu ---------- */
.jeu-entete { background: linear-gradient(180deg, color-mix(in srgb, var(--jeu) 14%, var(--panneau)) 0%, var(--panneau) 100%); border-bottom: 1px solid var(--trait); }
.jeu-entete > .conteneur { padding-block: 16px 20px; display: grid; gap: 14px; }
.jeu-entete-grille { display: flex; gap: 20px; align-items: center; }
.jeu-entete h1 { font: 800 48px/1 var(--f-titre); text-transform: uppercase; margin: 0; }
.jeu-entete .accroche { margin: 4px 0 10px; color: var(--gris); font-size: 16px; }
.jeu-entete .onglets { background: none; border: 0; }
.onglet { color: var(--gris); font: 600 14px var(--f-texte); padding: 12px 16px; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.onglet:hover { color: var(--texte); }
.onglet.on, .onglet[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--or); }
.jeu-apercu { display: grid; gap: 16px; }
.jeu-apercu .description { margin: 0; font-size: 16px; max-width: 75ch; color: var(--texte); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.podium:empty { display: none; }
.marche { display: grid; justify-items: center; gap: 6px; padding: 16px 12px; background: var(--panneau); border: 1px solid var(--trait); text-decoration: none; color: var(--texte); position: relative; }
.marche:hover { background: var(--survol); }
.marche.m1 { order: 2; border-top: 3px solid #FFB400; padding-top: 24px; }
.marche.m2 { order: 1; border-top: 3px solid #C0C7D0; }
.marche.m3 { order: 3; border-top: 3px solid #CD7F32; }
.marche .place { position: absolute; top: 8px; left: 10px; font: 800 20px var(--f-titre); color: var(--sombre); }
.marche b { font: 700 18px var(--f-titre); }
.marche .elo { font: 800 28px/1 var(--f-titre); }
.classement td.place { width: 36px; font: 800 16px var(--f-titre); color: var(--gris); text-align: center; }
.classement td.place.p1 { color: #FFB400; }
.classement td.place.p2 { color: #C0C7D0; }
.classement td.place.p3 { color: #CD7F32; }
.classement td:nth-child(2) { text-align: left; }
.cartes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.carte-tuile { position: relative; display: grid; padding: 0; text-align: left; background: var(--panneau); border: 1px solid var(--trait); color: var(--texte); cursor: pointer; font: inherit; overflow: hidden; }
.carte-tuile:hover { border-color: var(--or); }
.carte-tuile > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; display: block; max-width: 100%; }
.carte-tuile-texte { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; display: grid; align-content: end; justify-items: start; gap: 2px; padding: 12px; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent 60%); }
.carte-tuile-texte b { font: 800 26px/1 var(--f-titre); text-transform: uppercase; }
.carte-tuile-texte > span:last-child { font-size: 12px; color: var(--gris); }
.carte-tuile-pied { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 13px; }
.carte-tuile-pied .vide { flex: 1; }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.duel-equipes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 18px var(--f-titre); }

/* ---------- profil ---------- */
.profil-tete { background: var(--panneau); border-bottom: 1px solid var(--trait); }
.profil-grille { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 24px; }
.profil-tete-g { display: flex; align-items: center; gap: 18px; }
.profil-tete h1 { font: 800 44px/1 var(--f-titre); margin: 2px 0 4px; }
.profil-formats { display: flex; gap: 10px; flex-wrap: wrap; }
.profil-format { display: grid; justify-items: start; gap: 2px; padding: 10px 14px; border: 1px solid var(--trait); background: var(--fond); min-width: 130px; text-decoration: none; color: var(--texte); }
.profil-format:hover { border-color: var(--or); }
.profil-format b { font: 800 28px/1 var(--f-titre); }
.profil-format .gris { display: flex; align-items: center; gap: 5px; }
.profil-tete .onglets { background: none; border-top: 1px solid var(--trait); border-bottom: 0; }
.kpis-large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-large .kpi { border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.kpis-large .kpi:nth-child(4n) { border-right: 0; }
.kpis-large .kpi:nth-last-child(-n+4) { border-bottom: 0; }
.classements-joueur { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.classement-carte { display: grid; gap: 3px; padding: 12px 14px; text-decoration: none; color: var(--texte); justify-items: start; }
.classement-carte:hover { border-color: var(--or); }
.classement-carte b { font: 800 30px/1 var(--f-titre); }

/* ---------- jouer ---------- */
.telechargement-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: center; padding: 22px; }
.serveur-carte { display: grid; gap: 6px; padding: 16px; background: var(--fond); border: 1px solid var(--trait); }
.ip { font: 800 30px/1 var(--f-titre); color: var(--or); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; letter-spacing: .02em; }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.etape { background: var(--panneau); border: 1px solid var(--trait); padding: 16px; display: grid; gap: 6px; align-content: start; }
.etape .numero { font: 800 34px/1 var(--f-titre); color: var(--or); }
.etape h3 { margin: 0; font: 700 20px var(--f-titre); text-transform: uppercase; }
.etape p { margin: 0; color: var(--gris); font-size: 14px; }
.commandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.commande-jeu { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--panneau); border: 1px solid var(--trait); border-left: 3px solid var(--jeu); text-decoration: none; color: var(--texte); }
.commande-jeu:hover { background: var(--survol); }
.commande-jeu > span { display: grid; flex: 1; }

/* ================================================================ Massif
   Réglages de la DA posés après les règles de base (même spécificité, l'ordre l'emporte). */
/* ---------- barre du haut ---------- */
.nav { background: var(--fond); border-bottom: 2px solid var(--trait); }
.nav .logo { font: 900 19px var(--f-titre); font-stretch: 140%; letter-spacing: .03em; color: var(--texte); }
.nav .logo img { width: 30px; height: 30px; }
.nav .lien { font-weight: 600; }
.nav .lien.on { color: var(--fond); background: var(--or); box-shadow: var(--ombre-or); }
.recherche input { border-width: 2px; }

/* ---------- tête de partie ---------- */
.fil-bande { border-bottom: 0; }
.score { background: var(--fond); border-bottom: 0; position: relative; }
.score::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 180, 0, .035) 22px 24px); }
.score .conteneur { position: relative; padding-block: 28px 34px; }
.eq .nom { font: 900 34px/.95 var(--f-titre); font-stretch: 80%; letter-spacing: 0; }
.eq .sous { font-weight: 500; }
.eq .etiquette { font: 900 12px var(--f-titre); font-stretch: 130%; letter-spacing: .08em; padding: 4px 9px; margin-bottom: 8px; }
.etiquette.gagne { box-shadow: var(--ombre-or); }
.etiquette.perd { background: transparent; color: var(--sombre); box-shadow: inset 0 0 0 2px var(--trait); }
.blason .blason-img { filter: drop-shadow(4px 4px 0 var(--ombre)); }
.centre .res { font: 900 13px var(--f-titre); font-stretch: 140%; letter-spacing: .12em; }
.centre .gros { font: 900 88px/.9 var(--f-titre); font-stretch: 60%; color: var(--or);
  text-shadow: 1px 1px 0 var(--or-ext), 2px 2px 0 var(--or-ext), 3px 3px 0 var(--or-ext), 4px 4px 0 var(--or-ext), 5px 5px 0 var(--or-ext), 6px 6px 0 var(--ombre); }
.centre .gros span { color: var(--sombre); text-shadow: none; }
.centre .meta { font-weight: 500; }

/* ---------- onglets ---------- */
.onglets { background: var(--fond); border-bottom: 2px solid var(--trait); }
.onglets .conteneur { gap: 6px; padding-block: 0 10px; }
.onglets button, .onglet { font: 800 14px var(--f-titre); font-stretch: 125%; letter-spacing: .04em; text-transform: uppercase; border: 2px solid var(--trait); padding: 9px 16px; color: var(--gris); }
.onglets button:hover, .onglet:hover { border-color: var(--sombre); color: var(--texte); }
.onglets button[aria-selected="true"], .onglet.on, .onglet[aria-selected="true"] { background: var(--or); border-color: var(--or); color: var(--fond); box-shadow: var(--ombre-or); }

/* ---------- blocs ---------- */
.corps { gap: 26px; padding-block: 26px 56px; }
.grille, .deux { gap: 26px; }
.bloc { border: 2px solid var(--trait); box-shadow: var(--ombre-relief); }
.bloc > h2 { font: 900 14px var(--f-titre); font-stretch: 125%; letter-spacing: .05em; color: var(--texte); border-bottom: 2px solid var(--trait); padding: 12px 14px; }
.bloc > h2 .leg { font-family: var(--f-texte); font-weight: 600; color: var(--gris); }

/* ---------- tableau ---------- */
.tab th { font: 800 11px var(--f-titre); font-stretch: 120%; letter-spacing: .05em; }
.tab tr.equipe td { background: var(--fond); font: 900 12px var(--f-titre); font-stretch: 130%; letter-spacing: .06em; color: var(--texte); }
.joueur .barre-eq { width: 4px; height: 20px; }
.mvp { font: 900 10px var(--f-titre); font-stretch: 130%; padding: 2px 6px; box-shadow: 2px 2px 0 var(--or-ext); }
.jauge { height: 5px; }

/* ---------- chiffres clés ---------- */
.kpi { border-color: var(--trait); }
.kpi .v { font: 900 30px/1 var(--f-titre); font-stretch: 62%; white-space: nowrap; }
.kpi .l { font: 700 11px var(--f-titre); font-stretch: 120%; letter-spacing: .05em; }

/* ---------- éléments communs ---------- */
.bouton { font: 900 14px var(--f-titre); font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em; border-width: 2px; box-shadow: var(--ombre-relief); }
.bouton.or { box-shadow: var(--ombre-or); }
.bouton:active, .bouton.or:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ombre); }
.filtres button { border-width: 2px; font-weight: 700; }
.filtres button[aria-pressed="true"] { background: var(--or); color: var(--fond); border-color: var(--or); }
.chip { border-width: 2px; }
.role { border-width: 2px; font-weight: 600; }
.tip { background: var(--fond); border: 2px solid var(--trait); box-shadow: var(--ombre-relief); }
.plan { border-width: 2px; }
.pied { border-top: 2px solid var(--trait); }
.titre-section h2, .h-section, .titre-page h1 { font-family: var(--f-titre); font-weight: 900; font-stretch: 80%; }



/* ---------- fin de partie : résultat, cartes des joueurs, replay ---------- */
.ban { display: inline-block; background: var(--or); color: var(--fond); font: 900 12px var(--f-titre); font-stretch: 130%; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; box-shadow: var(--ombre-or); }
.ban.neutre { background: var(--survol); color: var(--gris); box-shadow: none; }
.resultat-partie { background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 180, 0, .03) 22px 24px); }
.rp-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 22px 18px; }
.rp-res { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.rp-nom { display: flex; align-items: center; gap: 12px; font: 900 46px/.9 var(--f-titre); font-stretch: 70%; text-transform: uppercase; min-width: 0; }
.rp-nom .blason-img { filter: drop-shadow(3px 3px 0 var(--ombre)); }
.rp-score { font: 900 84px/.9 var(--f-titre); font-stretch: 60%; display: flex; gap: 10px; }
.rp-score span { text-shadow: 4px 4px 0 var(--ombre); }
.rp-score i { font-style: normal; color: var(--sombre); }
.rp-meta { display: grid; gap: 2px; justify-items: end; text-align: right; font-size: 14px; }
.rp-meta b { font-weight: 700; }

.equipes-cartes { display: grid; gap: 16px; padding-block: 10px 6px; }
.eq-rangee { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.eq-lab { writing-mode: vertical-rl; transform: rotate(180deg); font: 900 13px var(--f-titre); font-stretch: 130%; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--fond); padding: 8px 0; overflow: hidden; white-space: nowrap; }
.cartes-j { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 220px)); gap: 14px; align-items: end; }
.carte-j { position: relative; display: grid; gap: 5px; justify-items: start; text-align: left; padding: 12px; font: inherit; color: var(--texte); cursor: pointer;
  background: var(--panneau); border: 2px solid var(--trait); border-top: 4px solid var(--eq); box-shadow: var(--ombre-relief); transition: transform var(--anim-rapide); }
.carte-j:hover { transform: translate(-2px, -2px); }
.eq-rangee.perd .carte-j { background: #1A1612; }
.eq-rangee.perd .carte-j:not(.acteur):not([aria-pressed="true"]) { opacity: .85; }
.carte-j.mvp { border-color: var(--or); border-top-color: var(--or); box-shadow: var(--ombre-or); background: linear-gradient(160deg, #3A2A08, var(--panneau) 60%); }
.carte-j.acteur { outline: 2px solid var(--or); outline-offset: 3px; }
.carte-j[aria-pressed="true"] { outline: 3px solid var(--or); outline-offset: 3px; transform: translate(-2px, -2px); }
.cj-mvp, .cj-moment { position: absolute; top: -12px; right: 10px; font: 900 11px var(--f-titre); font-stretch: 130%; padding: 1px 7px; }
.cj-mvp { background: var(--or); color: var(--fond); box-shadow: 2px 2px 0 var(--or-ext); }
.cj-moment { background: var(--fond); color: var(--or); border: 2px solid var(--or); }
.carte-j.mvp .cj-moment { right: auto; left: 10px; }
.cj-nom { font: 900 22px/1 var(--f-titre); font-stretch: 90%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-j .role { font-size: 11px; }
.cj-kda { font: 900 30px/1 var(--f-titre); font-stretch: 62%; margin-top: 2px; }
.cj-kda i { font-style: normal; color: var(--sombre); padding: 0 2px; }
.cj-l { display: flex; justify-content: space-between; gap: 8px; width: 100%; font-size: 13px; color: var(--gris); }
.cj-l b { color: var(--texte); }
.cj-barre { width: 100%; height: 5px; background: var(--fond); }
.cj-barre i { display: block; height: 100%; background: var(--or); }

.replay { display: grid; gap: 14px; padding-block: 22px 8px; }
.replay-titre { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.replay-titre .gris { font-size: 13px; }
.h-bloc { margin: 0; font: 900 14px var(--f-titre); font-stretch: 125%; letter-spacing: .05em; text-transform: uppercase; }
.replay-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.replay-plan { display: grid; gap: 10px; min-width: 0; }
.replay .plan { margin: 0; border: 2px solid var(--trait); box-shadow: var(--ombre-relief); }
.replay .plan img { image-rendering: pixelated; filter: brightness(.6) saturate(.8); }
.plan-etat { position: absolute; left: 10px; bottom: 10px; background: var(--fond); border: 2px solid var(--trait); padding: 4px 10px; font-size: 13px; }
.replay-recit { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.replay-recit h3 { margin: 0; font: 900 30px/1 var(--f-titre); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.replay-recit p { margin: 0; color: var(--gris); font-size: 14px; }
.moments { display: grid; gap: 5px; margin-top: 4px; }
.moments button { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px; text-align: left; padding: 7px 10px; font: 13px var(--f-texte); color: var(--texte); background: var(--panneau); border: 2px solid var(--trait); cursor: pointer; }
.moments button:hover { border-color: var(--sombre); }
.moments button b { color: var(--or); }
.moments button.decisif span::after { content: " ◆"; color: var(--or); }
.moments button.on { border-color: var(--or); box-shadow: var(--ombre-or); }
.frise { padding: 10px 12px 12px; display: grid; gap: 6px; }
.frise-tete { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.frise-tete .leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 600; }
.frise .graphe { padding: 0; touch-action: none; }
.frise-commande { display: grid; grid-template-columns: auto minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
.frise-commande input { width: 100%; accent-color: var(--or); }
.bouton.petit { padding: 6px 12px; font-size: 13px; box-shadow: var(--ombre-or); background: var(--or); color: var(--fond); border-color: var(--or); }
.replay .plan-vide { padding: 60px 14px; }
@media (max-width: 980px) {
  .replay-grille { grid-template-columns: minmax(0, 1fr); }
  .cartes-j { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .rp-grille { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .rp-meta { justify-items: start; text-align: left; }
  .rp-nom { font-size: 34px; }
  .rp-score { font-size: 64px; }
  .eq-rangee { grid-template-columns: minmax(0, 1fr); }
  .eq-lab { writing-mode: horizontal-tb; transform: none; padding: 4px 10px; justify-self: start; }
}

@media (max-width: 980px) {
  .grille, .deux, .fiche-grille, .telechargement-grille { grid-template-columns: minmax(0, 1fr); }
  .kpis-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-large .kpi:nth-child(4n) { border-right: 1px solid var(--trait); }
  .kpis-large .kpi:nth-child(2n) { border-right: 0; }
  .kpis-large .kpi:nth-last-child(-n+4) { border-bottom: 1px solid var(--trait); }
  .kpis-large .kpi:nth-last-child(-n+2) { border-bottom: 0; }
  .recherche { width: 180px; }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres > div:nth-child(2n) { border-right: 0; }
  .chiffres > div:nth-child(-n+2) { border-bottom: 1px solid var(--trait); }
}
@media (max-width: 640px) {
  .conteneur { padding-inline: 16px; }
  .score .conteneur { grid-template-columns: 1fr 1fr; }
  .centre { grid-column: 1 / -1; grid-row: 1; }
  .eq .nom { font-size: 20px; }
  .blason, .blason .blason-img { width: 44px; height: 44px; font-size: 16px; }
  .centre .gros { font-size: 40px; }
  .nav { gap: 10px; padding: 0 12px; }
  .nav .logo { font-size: 0; gap: 0; }
  .nav .lien { padding: 6px 7px; font-size: 13px; }
  .recherche { width: auto; flex: 1; min-width: 0; }
  .recherche input { padding-left: 28px; }
  .liste-jeux { position: fixed; left: 12px; right: 12px; width: auto; top: calc(var(--barre-haut) + 4px); }
  .propositions { position: fixed; left: 12px; right: 12px; top: calc(var(--barre-haut) + 4px); }
  .partie { grid-template-columns: 6px minmax(0, 1fr) auto auto; gap: 10px; }
  .partie .qui { display: none; }
  .hero { min-height: 0; }
  .hero h1 { font-size: 64px; }
  .hero-contenu { padding-block: 40px 64px; }
  .jeu-entete h1, .titre-page h1 { font-size: 34px; }
  .jeu-entete-grille img { width: 56px; height: 56px; }
  .profil-tete h1 { font-size: 32px; }
  .profil-tete-g .tete { --s: 7px !important; }
  .podium { grid-template-columns: minmax(0, 1fr); }
  .annonce { flex-direction: column; align-items: flex-start; padding: 20px; gap: 14px; }
  .annonce-jeu { grid-template-columns: minmax(0, 1fr); }
  .annonce-scene { grid-column: 1; grid-row: 1; height: 180px; }
  .annonce-texte { grid-column: 1; grid-row: 2; margin-right: 0; padding: 20px; background: #0B1430; }
  .annonce-texte h2 { font-size: 36px; }
  .annonce img { width: 72px; height: 72px; }
  .annonce h2 { font-size: 32px; }
  .marche { order: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }