:root {
  /* Page claire : c'est elle qui donne le ton accueillant. */
  --bg: #f4f6fc;
  --page-text: #2b3252;
  --page-text-dim: #626d92;
  --page-accent: #4c5fd7;

  /* Encarts : plus fonces que la page pour rester lisibles, mais tres
     adoucis par rapport au bleu nuit d'origine. */
  --bg-panel: #454f76;
  --bg-panel-clair: #4f5a85;
  --bg-input: #39426a;
  --border: rgba(255, 255, 255, 0.16);

  /* Accents : bleu ciel et lavande, au lieu du cyan et du magenta criards. */
  --neon: #7dd3fc;
  --neon-alt: #c4b5fd;
  --accent: #8b95f0;

  /* Textes poses sur les encarts. */
  --text: #eef1fb;
  --text-dim: #b6bfdd;

  --ok: #4ade80;
  --err: #fca5a5;
}

/* ================================================================
   Direction A — Le Championnat de France
   Couche de presentation : les identifiants et contrats JS restent intacts.
   ================================================================ */
:root {
  --ink: #07111a;
  --ink-soft: #0d1b26;
  --ink-card: #102330;
  --ivory: #f4e6c9;
  --ivory-dim: #cbb992;
  --gold: #c99a52;
  --gold-light: #eed097;
  --red: #8d201c;
  --red-bright: #b8382d;
  --line-gold: rgba(201, 154, 82, .55);
  --bg: var(--ink);
  --page-text: var(--ivory);
  --page-text-dim: var(--ivory-dim);
  --page-accent: var(--gold-light);
  --bg-panel: #0c1c27;
  --bg-panel-clair: #132b38;
  --bg-input: #07141d;
  --border: rgba(201, 154, 82, .34);
  --neon: var(--gold-light);
  --neon-alt: #d58a63;
  --accent: var(--gold);
  --text: var(--ivory);
  --text-dim: #c8b997;
  --ok: #8cb78a;
  --err: #dd776c;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 50% -25%, rgba(139, 32, 28, .28), transparent 45rem),
    radial-gradient(ellipse at 10% 45%, rgba(201, 154, 82, .08), transparent 35rem),
    var(--ink);
  color: var(--ivory);
  font-family: Georgia, 'Times New Roman', serif;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
  background-image: radial-gradient(rgba(244,230,201,.32) .5px, transparent .8px);
  background-size: 5px 5px;
  mask-image: linear-gradient(#000, transparent 75%);
}

.ruban { height: 3px; background: linear-gradient(90deg, #173d70 0 33.333%, #e9ddc5 33.333% 66.666%, #8b211d 66.666%); }
.site-header {
  min-height: 84px; padding: .72rem clamp(1rem, 4vw, 3.5rem); gap: 1rem 2rem;
  background: rgba(3, 9, 14, .96); border-bottom: 1px solid rgba(201,154,82,.3);
  box-shadow: 0 8px 28px rgba(0,0,0,.38); position: relative; z-index: 5;
}
header::before { display: none; }
.brand { gap: .65rem; color: var(--ivory); }
.brand-mark {
  width: 45px; height: 56px; display: grid; place-items: center; position: relative;
  color: var(--gold-light); font-size: 1.35rem; background: linear-gradient(145deg, #152e3b, #071018);
  clip-path: polygon(50% 0, 94% 13%, 88% 73%, 50% 100%, 12% 73%, 6% 13%);
  filter: drop-shadow(0 2px 4px #000);
}
.brand-mark::before { content:''; position:absolute; inset:2px; border:1px solid var(--gold); clip-path: inherit; }
.brand-mark span { position: relative; }
h1 { color: var(--ivory); background: none; -webkit-text-fill-color: currentColor; font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; line-height: .95; letter-spacing: .09em; text-transform: uppercase; }
.brand-subtitle { display:block; margin-top:.32rem; font-family: system-ui,sans-serif; font-size:.5rem; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; }
.site-nav { display:flex; align-items:center; gap:clamp(.55rem,1.6vw,1.7rem); margin-left:auto; }
.site-nav a { color:var(--ivory-dim); font: .67rem/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:.7rem 0; border-bottom:2px solid transparent; }
.site-nav a:hover,.site-nav a.active { color:var(--gold-light); border-color:var(--red-bright); }
.identity { font-family:system-ui,sans-serif; font-size:.77rem; color:var(--ivory-dim); }

.hero { max-width:none; min-height: 510px; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem 4.5rem; display:grid; place-items:center; text-align:center; position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line-gold); }
.hero::before { content:''; position:absolute; inset:0; z-index:-2; background: linear-gradient(90deg, rgba(4,12,18,.3), rgba(4,12,18,.04) 35%, rgba(4,12,18,.04) 65%, rgba(4,12,18,.3)), url('/img/brand/hero-clochers.webp') center/cover; }
.hero::after { content:''; position:absolute; inset:auto 0 0; height:40%; z-index:-1; background:linear-gradient(transparent, var(--ink)); }
.hero-inner { max-width:760px; text-shadow: 0 3px 10px #000; }
.hero-kicker { margin:0 0 .65rem; color:var(--gold-light); font:700 .68rem/1.4 system-ui,sans-serif; letter-spacing:.2em; }
.hero-title { margin:0; color:var(--ivory); background:none; -webkit-text-fill-color:currentColor; font-family:Georgia,'Times New Roman',serif; font-size:clamp(3.2rem,8vw,6.6rem); line-height:.76; text-transform:uppercase; letter-spacing:.035em; text-shadow:0 2px 0 #604524, 0 5px 20px #000; }
.hero-title span { font-size:.7em; }
.hero-ribbon { display:inline-block; margin:1.5rem 0 .85rem; padding:.45rem 1.25rem; color:var(--ivory); background:linear-gradient(90deg,transparent,#7a1a18 9%,#8d201c 91%,transparent); border-top:1px solid rgba(235,183,110,.4); border-bottom:1px solid rgba(0,0,0,.7); font-size:clamp(.8rem,1.8vw,1.1rem); letter-spacing:.08em; text-transform:uppercase; }
.saison { display:block; width:max-content; max-width:100%; margin:0 auto 1rem; padding:.28rem .65rem; color:var(--ivory-dim); border-color:rgba(238,208,151,.4); background:rgba(6,15,21,.68); font-family:system-ui,sans-serif; font-size:.72rem; }
.saison strong { color:var(--gold-light); }
.hero-sub { max-width:550px; color:#f1dfbf; font-family:system-ui,sans-serif; font-size:.92rem; line-height:1.6; }
.hero-cta { display:inline-flex; align-items:center; gap:.8rem; margin-top:1.5rem; padding:.8rem 1.35rem; color:#1a1209; background:linear-gradient(135deg,#f0d39b,#ba813d); border:1px solid #f5dba6; box-shadow: inset 0 0 0 2px rgba(70,40,10,.35), 0 3px 12px #000; font-weight:bold; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }
.hero-cta:hover { filter:brightness(1.13); }

.tete { max-width:1100px; margin:-1.3rem auto 0; padding:1rem 1.5rem; color:var(--ivory); background:linear-gradient(90deg,rgba(8,23,32,.94),rgba(102,28,24,.95),rgba(8,23,32,.94)); border:1px solid var(--line-gold); box-shadow:0 12px 25px rgba(0,0,0,.3); text-align:center; position:relative; z-index:2; }
.tete::before { display:none; }.tete-label{color:var(--gold-light);font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.13em}.tete-nom{color:var(--ivory);font-family:Georgia,serif}.tete-code{color:var(--gold-light)}.tete-points{color:var(--gold-light)}.tete-meta{color:var(--ivory-dim)}

main { max-width:1200px; display:flex; flex-direction:column; gap:1.4rem; padding:2rem clamp(1rem,3vw,2.2rem) 3.5rem; }
.panel,.super { background:linear-gradient(145deg,rgba(17,40,52,.97),rgba(6,18,27,.98)); border:1px solid var(--line-gold); border-radius:2px; box-shadow:inset 0 0 0 3px rgba(201,154,82,.06), 0 10px 24px rgba(0,0,0,.25); position:relative; }
.panel::before,.super::before { content:''; position:absolute; inset:7px; border:1px solid rgba(201,154,82,.15); pointer-events:none; }
.panel h2,.super-titre { color:var(--gold-light); font-family:Georgia,'Times New Roman',serif; font-size:1.18rem; letter-spacing:.08em; text-transform:uppercase; }
.panel h2::after,.super-titre::after { content:''; display:block; width:42px; margin:.45rem auto 0; border-bottom:1px solid var(--gold); }
.panel h2 { text-align:center; }.hint,label { color:var(--ivory-dim); font-family:system-ui,sans-serif; }.tabs { border-bottom:1px solid var(--border); padding-bottom:.7rem; }.tab { border-radius:0; color:var(--ivory-dim); font-family:system-ui,sans-serif; }.tab.active { color:var(--gold-light); background:rgba(201,154,82,.12); border-color:var(--gold); }
input,select { background:#07141d; border-color:rgba(201,154,82,.38); color:var(--ivory); font-family:system-ui,sans-serif; } input:focus,select:focus { border-color:var(--gold-light); box-shadow:0 0 0 3px rgba(201,154,82,.15); }
button[type='submit'],.btn { border-radius:2px; color:#201506; background:linear-gradient(135deg,#f0d39b,#bd813d); border:1px solid #f1d498; font-family:Georgia,serif; box-shadow:inset 0 0 0 1px rgba(63,35,6,.45); }.btn-ghost { color:var(--gold-light); border-color:rgba(201,154,82,.7); border-radius:2px; font-family:system-ui,sans-serif; }.btn-ghost:hover { color:var(--ivory); border-color:var(--gold-light); background:rgba(201,154,82,.12); }

#duel-panel { order:1; }.super { order:2; margin:0; padding:1.4rem; }.map-panel { order:4; }.deux-colonnes { order:5; }.super-primes { order:3; }.historique-panel { order:6; }
.jeux-bande { align-items:stretch; }.jeux-piste { padding:.2rem; }.jeu-carte { background:linear-gradient(160deg,#142d3b,#07131c); border-color:rgba(201,154,82,.65); border-radius:1px; box-shadow:inset 0 0 0 3px rgba(201,154,82,.07); }.jeu-image { border-bottom-color:rgba(201,154,82,.5); }.jeu-corps h3 { color:var(--ivory); font-family:Georgia,serif; text-transform:uppercase; }.jeu-mention.maintenant { color:#e3c58b; border-color:rgba(201,154,82,.55); background:rgba(141,32,28,.35); }.jeu-mention.recemment { color:#aec4ce; border-color:rgba(133,172,187,.4); background:rgba(25,67,82,.5); }.jeu-boutons .btn-ghost { color:var(--gold-light); border-color:rgba(201,154,82,.65); background:transparent; }.jeux-fleche { color:var(--gold-light); background:#091720; border-color:var(--line-gold); border-radius:1px; }.jeux-fleche:hover { background:#172d38; }.jeux-reperes { color:var(--ivory-dim); }

.super-titre { text-align:center; }.super-titre .ico { color:var(--gold); }.super-sous { color:var(--ivory-dim); font-family:system-ui,sans-serif; text-align:center; }.stats { gap:.75rem; }.stat-card { background:rgba(3,12,18,.42); border:1px solid rgba(201,154,82,.28); border-radius:1px; }.stat-label { color:var(--gold-light); font-family:Georgia,serif; }.stat-value { color:var(--ivory); }.stat-meta,.regle { color:var(--ivory-dim); }.rang.medaille { background:var(--gold); color:#251708; }.jauge { background:#06121a; }.jauge span { background:linear-gradient(90deg,#7e251f,var(--gold-light)); }

.map-panel { background:radial-gradient(ellipse at center,rgba(108,40,30,.24),transparent 55%),linear-gradient(145deg,rgba(17,40,52,.97),rgba(6,18,27,.98)); }.france-svg { max-width:630px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.4)); }.france-svg .dept { stroke:#d2ae70; stroke-width:.85; }.france-svg .dept:hover { stroke:var(--ivory); filter:brightness(1.25) drop-shadow(0 0 6px var(--gold)); }.map-legend,.om-label,.om-pts { color:var(--ivory-dim); }.om-tile { color:var(--ivory); border-color:var(--line-gold); }

.deux-colonnes { display:grid; grid-template-columns:1.2fr .8fr; gap:1.4rem; }.leaderboard { max-height:470px; } th { color:var(--gold-light); background:#0b1c27; } td { border-bottom-color:rgba(201,154,82,.2); } tbody tr:hover { background:rgba(201,154,82,.09); }.code { color:var(--gold-light); }.records li,.parties li { border-bottom-color:rgba(201,154,82,.24); }.bilan { background:rgba(141,32,28,.15); border-color:rgba(201,154,82,.35); }

.versus { color:var(--ivory); }.vs-mid { color:#241607; background:var(--gold-light); }.spinner { border-color:rgba(201,154,82,.2); border-top-color:var(--gold-light); } #game-frame { border-color:var(--line-gold); }
.pied { color:var(--ivory-dim); background:#040b10; border-top:1px solid var(--line-gold); font-family:system-ui,sans-serif; }.pied a { color:var(--gold-light); }

@media (max-width: 850px) {
  .site-header { justify-content:center; padding: .8rem 1rem; }.site-nav { order:3; width:100%; justify-content:center; gap:.9rem; overflow-x:auto; padding-bottom:.15rem; }.site-nav a { font-size:.58rem; white-space:nowrap; }.identity { margin-left:auto; }.hero { min-height:490px; padding-top:4rem; background-position:center; }.hero::before { background-position:center; }.hero-title { font-size:clamp(3.15rem,13vw,5rem); }.hero-ribbon { font-size:.72rem; }.hero-sub { font-size:.84rem; }.tete { margin:0 .8rem; }.deux-colonnes { grid-template-columns:minmax(0,1fr); }.super-corps { grid-template-columns:minmax(0,1fr); }.super-corps .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .brand-subtitle { display:none; }.site-header { min-height:0; }.identity { width:100%; justify-content:center; order:4; }.site-nav { justify-content:flex-start; }.hero { min-height:465px; padding:3.2rem 1rem 3.4rem; }.hero-title { font-size:3.3rem; }.hero-ribbon { padding:.38rem .7rem; }.saison { font-size:.64rem; }.hero-cta { margin-top:1rem; }.panel,.super { padding:1.1rem; }.super-corps .stats { grid-template-columns:minmax(0,1fr); }.map-panel { padding-left:.55rem; padding-right:.55rem; }.map-panel h2,.map-panel .hint { padding-left:.55rem; padding-right:.55rem; }.tete { padding:.9rem .8rem; }.tete-points { font-size:1.75rem; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Voiles de couleur tres pales : de la chaleur sans assombrir la page. */
  background:
    radial-gradient(ellipse at 15% 0%, rgba(139, 149, 240, 0.16), transparent 55%),
    radial-gradient(ellipse at 88% 10%, rgba(125, 211, 252, 0.16), transparent 50%),
    var(--bg);
  color: var(--page-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  /* Un mot trop long — un pseudonyme, une adresse e-mail, un nom de departement
     compose — s'etire sinon sans jamais se couper, et lui seul rend la page plus
     large que l'ecran. Herite par toute la page. */
  overflow-wrap: break-word;
}

/* Dernier filet, et non la solution : les vraies causes sont corrigees une par
   une plus bas (minimums de colonnes plafonnes, colonnes de texte autorisees a
   se reduire). Celui-ci n'existe que pour qu'un debordement imprevu ne rende
   jamais la page glissante lateralement sur un telephone, ou l'on s'en apercoit
   au moindre geste. Si quelque chose disparait sur les bords, c'est ici qu'il
   faut venir voir : le masquage cache le symptome, il ne le guerit pas. */
html,
body {
  overflow-x: hidden;
}

:root {
  --bleu: #0055a4;
  --blanc: #f4f6ff;
  --rouge: #ef4135;
}

header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(43, 50, 82, 0.1);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
}

/* Bandeau tricolore en haut de page. */
header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--bleu) 0 33.33%,
    var(--blanc) 33.33% 66.66%,
    var(--rouge) 66.66% 100%
  );
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.flag {
  flex: none;
  width: 34px;
  height: 23px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(43, 50, 82, 0.14), 0 2px 6px rgba(43, 50, 82, 0.16);
  background: linear-gradient(
    90deg,
    var(--bleu) 0 33.33%,
    var(--blanc) 33.33% 66.66%,
    var(--rouge) 66.66% 100%
  );
}

h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  /* Sur fond clair, les degrades doivent etre fonces pour rester lisibles. */
  background: linear-gradient(90deg, #2f5fd0, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 1.5rem;
  text-align: center;
}

.hero-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--page-accent);
}

.saison {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(76, 95, 215, 0.25);
  background: rgba(76, 95, 215, 0.09);
  font-size: 0.78rem;
  color: var(--page-text-dim);
}

.saison strong {
  color: var(--page-accent);
}

.hero-title {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #2f5fd0 5%, #7c6cf0 50%, #c26bd8 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--page-text-dim);
}

/* ---- Pages legales ---- */

.page-legale {
  display: block;
  max-width: 780px;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem;
  color: var(--page-text);
  line-height: 1.65;
}

.page-legale h2 {
  margin: 0 0 0.2rem;
  font-size: 1.6rem;
}

.page-legale h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.05rem;
  color: var(--page-accent);
}

.page-legale .maj {
  margin: 0 0 1.6rem;
  font-size: 0.8rem;
  color: var(--page-text-dim);
}

/* Le resume en tete : ce que la plupart des gens liront vraiment. */
.page-legale .chapeau {
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--page-accent);
  border-radius: 0 10px 10px 0;
  background: rgba(76, 95, 215, 0.07);
  font-size: 0.95rem;
}

.page-legale ul {
  padding-left: 1.2rem;
}

.page-legale li {
  margin-bottom: 0.4rem;
}

.tableau-legal {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0 1.2rem;
  font-size: 0.88rem;
}

.tableau-legal th,
.tableau-legal td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.tableau-legal th {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--page-text-dim);
}

/* Ce qui reste a renseigner saute aux yeux : personne ne doit publier le
   site en laissant ces mentions en place. */
.a-completer {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.22);
  color: #92400e;
  font-weight: 600;
}

.liens-legaux {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}

/* ---- Pied de page ---- */

.pied {
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding: 1.2rem 2rem 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--page-text-dim);
}

.pied a {
  color: var(--page-accent);
}

/* ---- Ruban tricolore ---- */

.ruban {
  height: 4px;
  background: linear-gradient(
    90deg,
    #0055a4 0 33.33%,
    #ffffff 33.33% 66.66%,
    #ef4135 66.66% 100%
  );
}

/* ---- Pictogrammes ---- */

/* Dessines en SVG dans le code : ils prennent la couleur du texte qui les
   entoure, et restent nets a toute taille. */
.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.16em;
  margin-right: 0.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.super-titre {
  display: flex;
  align-items: center;
}

.super-titre .ico {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 2.1;
}

/* Les libelles de sous-encarts sont ecrits tres petit (0,68 rem) : une icone
   dimensionnee en `em` y tombait a 11 px, illisible. On la fixe en pixels et
   on lui donne sa propre couleur, plus soutenue que le texte gris. */
.stat-label .ico {
  width: 17px;
  height: 17px;
  margin-right: 0.5rem;
  stroke-width: 2;
  color: var(--neon);
}

.ico-courbe {
  color: #2f8f5b;
}

/* La flèche est une forme pleine, pas un tracé : on annule le contour hérité
   de `.ico` et on la remplit du dégradé. Un peu plus grande aussi, sa base
   effilée ayant besoin de place pour se lire.
   Selecteur double : `.super-titre .ico` est plus specifique qu'une classe
   seule et ecraserait la taille. */
.super-titre .ico-fleche {
  width: 2em;
  height: 2em;
  margin-right: 0.3em;
  fill: url(#degradeFleche);
  stroke: none;
}

/* La coupe de l'encart de tete : doree et pleine, pas au trait. */
.ico-coupe {
  width: 1.15em;
  height: 1.15em;
  color: #d97706;
  fill: rgba(217, 119, 6, 0.16);
  stroke-width: 1.7;
}

/* ---- L'encart de tete ---- */

/* Le departement en tete est l'information pour laquelle on vient. Il n'a pas
   besoin de toute la largeur pour cela : centre et resserre, il attire l'oeil
   bien mieux qu'une bande etiree d'un bord a l'autre.
   Rouge pastel : la seule tache chaude d'une page bleue et blanche. */
.tete {
  max-width: 620px;
  margin: 0 auto 1.6rem;
  padding: 1.5rem 2rem 1.6rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(214, 106, 96, 0.4);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffe6e1, #ffc7be);
  box-shadow: 0 12px 30px rgba(180, 70, 60, 0.2);
}

.tete::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #fca5a5, #ef4444, #fca5a5);
}

.tete-label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a4453b;
}

.tete-nom {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  color: #7f1d1d;
}

.tete-code {
  display: inline-block;
  margin-right: 0.55rem;
  padding: 0.08em 0.45em;
  border-radius: 10px;
  background: rgba(185, 28, 28, 0.14);
  color: #b91c1c;
  font-variant-numeric: tabular-nums;
}

.tete-points {
  margin: 0.45rem 0 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #b91c1c;
  font-variant-numeric: tabular-nums;
}

.tete-points span {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #a4453b;
}

.tete-meta {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: #8f4a43;
}

.tete-meta strong {
  color: #7f1d1d;
}

.tete-vide {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #8f4a43;
}

/* ---- Super-encarts : un titre, et des sous-encarts dessous ---- */

.super {
  max-width: 1100px;
  margin: 0 auto 1.6rem;
  padding: 1.2rem 2rem 1.4rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
}

.super-titre {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--page-text);
}

.super-sous {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--page-text-dim);
  max-width: 52rem;
}

.super-corps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.9rem;
}

/* Dans un super-encart, les grilles n'ont plus a se centrer ni a s'ecarter :
   c'est le super-encart qui porte la marge. */
.super-corps .stats {
  max-width: none;
  margin: 0;
  padding: 0;
}

.super-primes {
  background: rgba(255, 247, 232, 0.75);
  border-color: rgba(245, 158, 11, 0.35);
}

.stats {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  gap: 1rem;
  /* Meme precaution que pour « Mes parties » : le minimum ne doit jamais
     depasser la place reellement disponible. */
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg-panel-clair), var(--bg-panel));
  box-shadow: 0 6px 18px rgba(43, 50, 82, 0.14);
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--neon), var(--neon-alt));
}

.stat-label {
  display: flex;
  align-items: center;
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stat-value {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

.stat-value.empty {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
}

.stat-meta {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}

/* Deuxieme ligne : les palmares, plus larges que les indicateurs simples. */
.stats-listes {
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.palmares {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.palmares li {
  display: grid;
  grid-template-columns: 1.3rem 1fr auto;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.88rem;
}

.palmares .rang {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-align: right;
}

/* Medailles sur les trois premieres places. La pastille porte le rang :
   pas besoin d'une image, la couleur suffit a le dire. */
.palmares .medaille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  color: #3b2a06;
  text-align: center;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25);
}

.palmares .m1 {
  background: linear-gradient(160deg, #fde68a, #d4a017);
}

.palmares .m2 {
  background: linear-gradient(160deg, #f1f5f9, #b6c0cc);
}

.palmares .m3 {
  background: linear-gradient(160deg, #f5c9a3, #b4713a);
}

.palmares .nom {
  font-weight: 600;
  min-width: 0;
}

.palmares .sous {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-dim);
}

/* ---- Primes exceptionnelles ---- */

.stat-card.prime::before {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.jauge {
  height: 8px;
  margin: 0.55rem 0 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.jauge span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: width 0.4s ease;
}

.regle {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.palmares .valeur {
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  white-space: nowrap;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.2fr);
}

@media (max-width: 860px) {
  main {
    /* « minmax(0, 1fr) » et non « 1fr » : une piste de grille declaree 1fr
       refuse de descendre sous la largeur naturelle de son contenu. Le plus
       large des encarts imposait donc sa taille a la colonne entiere, qui
       depassait alors le bord de l'ecran — marge a gauche, contenu coupe a
       droite. Autoriser la piste a se reduire suffit : les encarts suivent. */
    grid-template-columns: minmax(0, 1fr);
  }
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(43, 50, 82, 0.16);
}

.panel h2 {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon);
}

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.tab {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.tab:hover {
  color: var(--text);
  border-color: var(--neon);
}

.tab.active {
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.22), rgba(196, 181, 253, 0.18));
  border-color: var(--neon);
  color: var(--text);
}

form {
  display: grid;
  gap: 0.85rem;
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

input,
select {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.22);
}

button[type='submit'],
.btn {
  padding: 0.75rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #7dd3fc, #a5b4fc);
  color: #1e2748;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

button[type='submit']:hover,
.btn:hover {
  filter: brightness(1.15);
}

button[type='submit']:active,
.btn:active {
  transform: translateY(1px);
}

.msg {
  min-height: 1.2rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.msg.error {
  color: var(--err);
}

.msg.ok {
  color: var(--ok);
}

.identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.badge {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge.registered {
  background: rgba(34, 197, 94, 0.15);
  color: var(--ok);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge.guest {
  background: rgba(255, 45, 149, 0.14);
  color: var(--neon-alt);
  border: 1px solid rgba(255, 45, 149, 0.35);
}

.btn-ghost {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--neon-alt);
}

/* L'en-tete est sur fond clair : les elements pensés pour les encarts
   sombres y seraient illisibles. On les fonce ici. */
header .btn-ghost {
  border-color: rgba(43, 50, 82, 0.22);
  color: var(--page-text-dim);
}

header .btn-ghost:hover {
  color: var(--page-text);
  border-color: var(--page-accent);
  background: rgba(76, 95, 215, 0.07);
}

header .badge.registered {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.32);
}

header .badge.guest {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.3);
}

.leaderboard {
  max-height: 560px;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th {
  position: sticky;
  top: 0;
  padding: 0.5rem;
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.07);
}

.rank {
  width: 3rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.code {
  width: 3.5rem;
  color: var(--neon);
  font-weight: 600;
}

.pts {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pts.pos {
  color: var(--ok);
}

.pts.neg {
  color: var(--err);
}

.hint {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Utilitaire de masquage : le `!important` le rend insensible a l'ordre des
   regles. Sans lui, toute mise en page definie plus bas (ex. `.duel-state`)
   l'emporterait a specificite egale et l'element resterait visible. */
.hidden {
  display: none !important;
}

/* ---- Carte de France ---- */

.map-panel {
  grid-column: 1 / -1;
}

.map-wrap {
  display: flex;
  justify-content: center;
}

.france-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
}

.france-svg .dept {
  stroke: #3b436b;
  stroke-width: 1.2;
  cursor: pointer;
  transition: filter 0.12s;
}

.france-svg .dept:hover {
  filter: brightness(1.35) drop-shadow(0 0 6px rgba(125, 211, 252, 0.7));
  stroke: var(--neon);
}

.om-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.om-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.om-tile {
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: filter 0.12s, border-color 0.12s;
}

.om-tile:hover {
  filter: brightness(1.4);
  border-color: var(--neon);
}

.om-code {
  font-size: 0.72rem;
  font-weight: 700;
}

.om-pts {
  font-size: 0.68rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

.swatch.neg {
  background: rgb(239, 68, 68);
}

.swatch.zero {
  background: #5b6590;
}

.swatch.pos {
  background: rgb(34, 197, 94);
}

/* ---- Arène / duel ---- */

.duel-state {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--neon);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.duel-status {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.versus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.vs-side {
  font-weight: 600;
}

.vs-mid {
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--neon), var(--neon-alt));
  color: #1e2748;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.panel.playing {
  grid-column: 1 / -1;
}

/* ---- Sous-encarts de l'arene ---- */

#duel-setup {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sous-encart {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.sous-encart h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* Les rubriques encore a venir : presentes, mais visiblement en retrait, pour
   qu'on ne cherche pas a cliquer dessus. */
.sous-encart.bientot {
  opacity: 0.72;
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
}

.sous-encart .statut {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(251, 191, 36, 0.22);
}

.sous-encart p:last-child {
  margin-bottom: 0;
}

/* Les trois indicateurs simples tiennent sur une seule ligne tant que la
   place le permet. */
#stats-zone {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  #stats-zone {
    grid-template-columns: 1fr;
  }
}

/* Pendant la partie, on efface tout ce qui distrait autour du plateau.
   Les super-encarts s'effacent d'un bloc : viser leurs grilles interieures
   laisserait les titres orphelins a l'ecran. */
body.en-partie #leaderboard-panel,
body.en-partie #historique-panel,
body.en-partie .map-panel,
body.en-partie .hero,
body.en-partie .tete,
body.en-partie .super {
  display: none;
}

#game-frame {
  width: 100%;
  height: 560px;
  max-height: 80vh;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
}

/* Avertissement reserve aux ecrans tactiles. Sur ordinateur, la coupure reseau
   est assez rare pour que le conseil soit hors de propos — et il pousserait a
   aller jouer la ou l'on est deja. */
.avertissement-tactile {
  display: none;
}

@media (pointer: coarse) {
  .avertissement-tactile {
    display: block;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--neon-alt);
    border-radius: 8px;
    background: var(--bg-input);
  }
}

/* Affluence du jeu choisi. Deux renseignements de nature differente, donc deux
   couleurs : le bleu dit l'instant present — combien de joueurs cherchent un
   adversaire maintenant —, le lavande dit les trois dernieres heures. Toutes
   deux viennent de la palette du site, pour ne pas y introduire de teinte
   etrangere.

   Ces couleurs ne peuvent pas vivre dans la liste deroulante : le navigateur la
   dessine lui-meme et n'y accepte qu'un texte d'une seule couleur par ligne. */
.affluence {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Vide, le paragraphe ne doit rien occuper : sans cela un blanc resterait sous
   la liste quand il n'y a rien a annoncer. */
.affluence:empty {
  display: none;
}

.affluence span {
  padding: 0.2rem 0.55rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Maintenant : ce qui appelle a agir tout de suite. */
.affluence .attente {
  color: var(--neon);
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(125, 211, 252, 0.14);
}

/* Les trois dernieres heures : une indication de fond, plus calme. */
.affluence .popularite {
  color: var(--neon-alt);
  border-color: rgba(196, 181, 253, 0.45);
  background: rgba(196, 181, 253, 0.14);
}

/* ---------------------------------------------------------------
   « Records du mois » : ce qu'il faut battre, jeu par jeu. En pleine largeur
   sous le classement, et sur autant de colonnes que la place en permet — la
   liste est courte au debut, elle grandira jusqu'a treize lignes.
   --------------------------------------------------------------- */

#records-panel {
  grid-column: 1 / -1;
}

.records {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Meme precaution qu'ailleurs : le minimum ne depasse jamais la place
     disponible, sinon la page deborde sur un telephone. */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 6px 10px;
}

.records li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--neon-alt);
  border-radius: 8px;
  background: var(--bg-input);
}

.record-jeu {
  font-weight: 700;
  color: var(--text);
}

.record-score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--neon);
  text-align: right;
}

/* Le detenteur passe a la ligne : c'est le score qu'on vient lire, pas le nom. */
.record-qui {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* La proposition de jouer seul, dans l'ecran d'attente. Encadree pour se
   detacher du message de recherche, mais sans crier : elle arrive comme une
   consolation, pas comme l'offre principale. */
.offre-solo {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--neon);
  border-radius: 10px;
  background: var(--bg-input);
}

/* Deux classes valent mieux qu'une : « .hidden » seul aurait la meme force que
   « .offre-solo » et perdrait selon l'ordre des regles. */
.offre-solo.hidden {
  display: none;
}

/* Quitter la partie. Discret par defaut — ce n'est pas ce qu'on vient chercher
   — mais assez grand pour un pouce : on le cherche parfois dans l'urgence, et
   se tromper de cible coute la partie. Il rougit quand il demande
   confirmation. */
.btn-forfait {
  justify-self: center;
  min-height: 44px;
  padding-inline: 1.1rem;
}

.btn-forfait.confirme {
  color: var(--err);
  border-color: var(--err);
  font-weight: 700;
}

.btn-forfait:disabled {
  opacity: 0.55;
  cursor: default;
}

.result-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
}

.result-title.win {
  color: var(--ok);
}

.result-title.loss {
  color: var(--err);
}

.result-points {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.result-points.win {
  color: var(--ok);
}

.result-points.loss {
  color: var(--err);
}

.duel-state .hint {
  margin: 0;
}

/* ---------------------------------------------------------------
   « Mes parties » : le bilan personnel, en pleine largeur sous l'arène
   et le classement. Format paysage : le bilan en bandeau, les parties
   reparties sur autant de colonnes que la largeur en permet.
   --------------------------------------------------------------- */

#historique-panel {
  grid-column: 1 / -1;
}

.bilan {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bilan-case {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 120px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel-clair);
  font-size: 0.82rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bilan-case b {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.bilan-case.pos b {
  color: var(--ok);
}

.bilan-case.neg b {
  color: var(--err);
}

.bilan-case.serie b {
  color: var(--neon);
}

/* Deux colonnes des que la place le permet : dix parties tiennent alors sur
   cinq rangs, et l'encart reste large plutot que haut. */
.parties {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  /* Le « min() » n'est pas un ornement : sans lui, une colonne garde ses 330 px
     meme quand l'encart n'en a que 310 sur un telephone, et la page devient
     legerement plus large que l'ecran. Plafonner le minimum a la largeur
     disponible l'interdit. */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 6px 10px;
}

.parties li {
  display: grid;
  /* L'issue et les points ont une largeur fixe : les colonnes s'alignent
     d'une ligne a l'autre, le nom du jeu prend ce qui reste.
     « minmax(0, 1fr) » plutot que « 1fr » : sans cela la colonne du milieu
     refuse de descendre sous la longueur de son texte, et un nom de jeu suivi
     d'un long nom de departement pousse la ligne au-dela de l'ecran. */
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  /* Le liseré de gauche dit l'issue avant même la lecture. */
  border-left: 4px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}

.parties li.gagne {
  border-left-color: var(--ok);
}

.parties li.perdu {
  border-left-color: var(--err);
}

.parties .issue {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}

.parties .forfait {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.parties .contre {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.parties .pts {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.parties li.gagne .pts {
  color: var(--ok);
}

.parties li.perdu .pts {
  color: var(--err);
}

/* Sur ecran etroit, le nom du jeu passe a la ligne. Les trois cases sont
   placees explicitement : sans cela, `.contre` etale sur toute la largeur
   repousse les points a la ligne suivante au lieu de les laisser face a
   l'issue. */
@media (max-width: 560px) {
  /* Deux rem de chaque cote prennent le sixieme d'un ecran de telephone, et
     chaque encart ajoute les siennes par-dessus. On les reduit de moitie : la
     place revient au contenu, qui cesse de se serrer contre les bords. */
  header,
  .hero,
  .tete,
  .super,
  .stats,
  .page-legale,
  main,
  .pied {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .parties li {
    /* Comme plus haut : « minmax(0, 1fr) » pour que la colonne de texte accepte
       de se reduire. C'est justement sur un petit ecran que cela compte. */
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .parties .issue {
    grid-column: 1;
    grid-row: 1;
  }

  .parties .pts {
    grid-column: 2;
    grid-row: 1;
  }

  .parties .contre {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Direction A override: declared last so it intentionally supersedes the legacy theme. */
:root { --bg:#07111a; --page-text:#f4e6c9; --page-text-dim:#cbb992; --page-accent:#eed097; --bg-panel:#0c1c27; --bg-panel-clair:#132b38; --bg-input:#07141d; --border:rgba(201,154,82,.34); --neon:#eed097; --neon-alt:#d58a63; --accent:#c99a52; --text:#f4e6c9; --text-dim:#c8b997; --ok:#8cb78a; --err:#dd776c; }
body { background:radial-gradient(ellipse at 50% -25%,rgba(139,32,28,.28),transparent 45rem),#07111a; color:#f4e6c9; font-family:Georgia,'Times New Roman',serif; }
.ruban{height:3px;background:linear-gradient(90deg,#173d70 0 33.333%,#e9ddc5 33.333% 66.666%,#8b211d 66.666%)}
.site-header{min-height:84px;padding:.72rem clamp(1rem,4vw,3.5rem);gap:1rem 2rem;background:rgba(3,9,14,.96);border-bottom:1px solid rgba(201,154,82,.3);box-shadow:0 8px 28px rgba(0,0,0,.38);z-index:5}.site-header::before{display:none}.brand{gap:.65rem;color:#f4e6c9}.brand-mark{width:45px;height:56px;display:grid;place-items:center;position:relative;color:#eed097;font-size:1.35rem;background:linear-gradient(145deg,#152e3b,#071018);clip-path:polygon(50% 0,94% 13%,88% 73%,50% 100%,12% 73%,6% 13%);filter:drop-shadow(0 2px 4px #000)}.brand-mark::before{content:'';position:absolute;inset:2px;border:1px solid #c99a52;clip-path:inherit}.brand-mark span{position:relative}h1{color:#f4e6c9;background:none;-webkit-text-fill-color:currentColor;font-family:Georgia,'Times New Roman',serif;font-size:1.1rem;line-height:.95;letter-spacing:.09em;text-transform:uppercase}.brand-subtitle{display:block;margin-top:.32rem;font-family:system-ui,sans-serif;font-size:.5rem;color:#c99a52;text-transform:uppercase;letter-spacing:.14em}.site-nav{display:flex;align-items:center;gap:clamp(.55rem,1.6vw,1.7rem);margin-left:auto}.site-nav a{color:#cbb992;font:.67rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:.7rem 0;border-bottom:2px solid transparent}.site-nav a:hover,.site-nav a.active{color:#eed097;border-color:#b8382d}.identity{font-family:system-ui,sans-serif;font-size:.77rem;color:#cbb992}
.hero{max-width:none;min-height:510px;padding:clamp(3.5rem,8vw,6rem) 1.5rem 4.5rem;display:grid;place-items:center;text-align:center;position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid rgba(201,154,82,.55)}.hero::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(4,12,18,.3),rgba(4,12,18,.04) 35%,rgba(4,12,18,.04) 65%,rgba(4,12,18,.3)),url('/img/brand/hero-clochers.webp') center/cover}.hero::after{content:'';position:absolute;inset:auto 0 0;height:40%;z-index:-1;background:linear-gradient(transparent,#07111a)}.hero-inner{max-width:760px;text-shadow:0 3px 10px #000}.hero-kicker{margin:0 0 .65rem;color:#eed097;font:700 .68rem/1.4 system-ui,sans-serif;letter-spacing:.2em}.hero-title{margin:0;color:#f4e6c9;background:none;-webkit-text-fill-color:currentColor;font-family:Georgia,'Times New Roman',serif;font-size:clamp(3.2rem,8vw,6.6rem);line-height:.76;text-transform:uppercase;letter-spacing:.035em;text-shadow:0 2px 0 #604524,0 5px 20px #000}.hero-title span{font-size:.7em}.hero-ribbon{display:inline-block;margin:1.5rem 0 .85rem;padding:.45rem 1.25rem;color:#f4e6c9;background:linear-gradient(90deg,transparent,#7a1a18 9%,#8d201c 91%,transparent);border-top:1px solid rgba(235,183,110,.4);font-size:clamp(.8rem,1.8vw,1.1rem);letter-spacing:.08em;text-transform:uppercase}.saison{display:block;width:max-content;max-width:100%;margin:0 auto 1rem;padding:.28rem .65rem;color:#cbb992;border-color:rgba(238,208,151,.4);background:rgba(6,15,21,.68);font-family:system-ui,sans-serif;font-size:.72rem}.saison strong{color:#eed097}.hero-sub{max-width:550px;color:#f1dfbf;font-family:system-ui,sans-serif;font-size:.92rem;line-height:1.6}.hero-cta{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.5rem;padding:.8rem 1.35rem;color:#1a1209;background:linear-gradient(135deg,#f0d39b,#ba813d);border:1px solid #f5dba6;box-shadow:inset 0 0 0 2px rgba(70,40,10,.35),0 3px 12px #000;font-weight:bold;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.tete{max-width:1100px;margin:-1.3rem auto 0;padding:1rem 1.5rem;color:#f4e6c9;background:linear-gradient(90deg,rgba(8,23,32,.94),rgba(102,28,24,.95),rgba(8,23,32,.94));border:1px solid rgba(201,154,82,.55);box-shadow:0 12px 25px rgba(0,0,0,.3);text-align:center;position:relative;z-index:2}.tete::before{display:none}.tete-label,.tete-code,.tete-points{color:#eed097}.tete-label{font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.13em}.tete-nom{color:#f4e6c9;font-family:Georgia,serif}.tete-meta{color:#cbb992}
main{max-width:1200px;display:flex;flex-direction:column;gap:1.4rem;padding:2rem clamp(1rem,3vw,2.2rem) 3.5rem}.panel,.super{background:linear-gradient(145deg,rgba(17,40,52,.97),rgba(6,18,27,.98));border:1px solid rgba(201,154,82,.55);border-radius:2px;box-shadow:inset 0 0 0 3px rgba(201,154,82,.06),0 10px 24px rgba(0,0,0,.25);position:relative}.panel::before,.super::before{content:'';position:absolute;inset:7px;border:1px solid rgba(201,154,82,.15);pointer-events:none}.panel h2,.super-titre{color:#eed097;font-family:Georgia,'Times New Roman',serif;font-size:1.18rem;letter-spacing:.08em;text-transform:uppercase}.panel h2::after,.super-titre::after{content:'';display:block;width:42px;margin:.45rem auto 0;border-bottom:1px solid #c99a52}.panel h2{text-align:center}.hint,label{color:#cbb992;font-family:system-ui,sans-serif}input,select{background:#07141d;border-color:rgba(201,154,82,.38);color:#f4e6c9;font-family:system-ui,sans-serif}button[type='submit'],.btn{border-radius:2px;color:#201506;background:linear-gradient(135deg,#f0d39b,#bd813d);border:1px solid #f1d498;font-family:Georgia,serif}.btn-ghost{color:#eed097;border-color:rgba(201,154,82,.7);border-radius:2px;font-family:system-ui,sans-serif}
#duel-panel{order:1}.super{order:2;margin:0;padding:1.4rem}.map-panel{order:4}.deux-colonnes{order:5}.super-primes{order:3}.historique-panel{order:6}.jeu-carte{background:linear-gradient(160deg,#142d3b,#07131c);border-color:rgba(201,154,82,.65);border-radius:1px;box-shadow:inset 0 0 0 3px rgba(201,154,82,.07)}.jeu-image{border-bottom-color:rgba(201,154,82,.5)}.jeu-corps h3{color:#f4e6c9;font-family:Georgia,serif;text-transform:uppercase}.jeu-mention.maintenant{color:#e3c58b;border-color:rgba(201,154,82,.55);background:rgba(141,32,28,.35)}.jeu-mention.recemment{color:#aec4ce;border-color:rgba(133,172,187,.4);background:rgba(25,67,82,.5)}.jeu-boutons .btn-ghost{color:#eed097;border-color:rgba(201,154,82,.65);background:transparent}.jeux-fleche{color:#eed097;background:#091720;border-color:rgba(201,154,82,.55);border-radius:1px}.jeux-fleche:hover{background:#172d38}.jeux-reperes{color:#cbb992}
.super-titre{text-align:center}.super-titre .ico{color:#c99a52}.super-sous{color:#cbb992;font-family:system-ui,sans-serif;text-align:center}.stat-card{background:rgba(3,12,18,.42);border:1px solid rgba(201,154,82,.28);border-radius:1px}.stat-label{color:#eed097;font-family:Georgia,serif}.stat-value{color:#f4e6c9}.stat-meta,.regle{color:#cbb992}.rang.medaille{background:#c99a52;color:#251708}.jauge{background:#06121a}.jauge span{background:linear-gradient(90deg,#7e251f,#eed097)}.map-panel{background:radial-gradient(ellipse at center,rgba(108,40,30,.24),transparent 55%),linear-gradient(145deg,rgba(17,40,52,.97),rgba(6,18,27,.98))}.france-svg{max-width:630px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}.france-svg .dept{stroke:#d2ae70;stroke-width:.85}.france-svg .dept:hover{stroke:#f4e6c9;filter:brightness(1.25) drop-shadow(0 0 6px #c99a52)}.deux-colonnes{display:grid;grid-template-columns:1.2fr .8fr;gap:1.4rem}th{color:#eed097;background:#0b1c27}td{border-bottom-color:rgba(201,154,82,.2)}tbody tr:hover{background:rgba(201,154,82,.09)}.code{color:#eed097}.pied{color:#cbb992;background:#040b10;border-top:1px solid rgba(201,154,82,.55);font-family:system-ui,sans-serif}.pied a{color:#eed097}
@media(max-width:850px){.site-header{justify-content:center;padding:.8rem 1rem}.site-nav{order:3;width:100%;justify-content:center;gap:.9rem;overflow-x:auto}.site-nav a{font-size:.58rem;white-space:nowrap}.identity{margin-left:auto}.hero{min-height:490px;padding-top:4rem}.hero-title{font-size:clamp(3.15rem,13vw,5rem)}.hero-ribbon{font-size:.72rem}.hero-sub{font-size:.84rem}.tete{margin:0 .8rem}.deux-colonnes{grid-template-columns:minmax(0,1fr)}.super-corps{grid-template-columns:minmax(0,1fr)}.super-corps .stats{grid-template-columns:repeat(2,minmax(0,1fr)}}@media(max-width:540px){.brand-subtitle{display:none}.site-header{min-height:0}.identity{width:100%;justify-content:center;order:4}.site-nav{justify-content:flex-start}.hero{min-height:465px;padding:3.2rem 1rem 3.4rem}.hero-title{font-size:2.7rem;line-height:.82;letter-spacing:.015em}.hero-ribbon{width:100%;padding:.38rem .4rem;font-size:.61rem;letter-spacing:.045em}.saison{font-size:.64rem}.panel,.super{padding:1.1rem}.super-corps .stats{grid-template-columns:minmax(0,1fr)}.map-panel{padding-left:.55rem;padding-right:.55rem}.tete{padding:.9rem .8rem}.tete-points{font-size:1.75rem}}

/* Troisieme passe — composition desktop en tableau de championnat. */
.tete { margin-top:-.8rem; padding:.68rem 1rem; }.tete-label{margin:.05rem 0}.tete-nom{margin:.15rem 0}.tete-points{margin:.05rem 0;font-size:1.55rem}.tete-meta{margin:.1rem 0}
main { gap:.75rem; padding-top:.8rem; }
.championship-grid { order:0; display:grid; grid-template-columns:minmax(190px,.78fr) minmax(390px,1.5fr) minmax(220px,.92fr); align-items:stretch; gap:.75rem; }
.championship-grid .panel { min-width:0; padding:.7rem .75rem; }.championship-grid .panel::before { inset:5px; }.championship-grid h2 { margin:.05rem 0 .35rem; font-size:.88rem; }.championship-grid h2::after { width:28px; margin:.25rem auto 0; }
.last-duel-panel { background:linear-gradient(150deg,rgba(77,25,24,.86),rgba(7,21,30,.98) 68%); }.last-duel-panel .duel-last { min-height:calc(100% - 1.7rem); border:0; box-shadow:none; background:transparent; padding:.15rem; }.last-duel-panel .duel-last .stat-label { margin-top:.05rem; }.last-duel-panel .duel-scoreboard { grid-template-columns:1fr; gap:.28rem; }.last-duel-panel .duel-team { padding:.35rem; background:rgba(3,12,18,.38); border:1px solid rgba(201,154,82,.25); }.last-duel-panel .duel-team.winner { border-color:rgba(201,154,82,.72); }.last-duel-panel .duel-versus { justify-self:center; margin:-.08rem 0; }.last-duel-panel .stat-value { text-align:center; font-size:.84rem; }.duel-team-code { font-size:1.65rem; }.duel-team-name { font-size:.68rem; }.duel-team-player { font-size:.59rem; }
.championship-grid .map-panel { padding:.58rem .65rem .45rem; }.championship-grid .map-panel .hint { display:none; }.championship-grid .map-wrap { height:230px; max-height:230px; align-items:center; }.championship-grid .france-svg { width:auto; max-width:100%; max-height:230px; }.championship-grid .om-row { margin-top:.05rem; gap:.25rem; }.championship-grid .om-tile { padding:.18rem .3rem; }.championship-grid .map-legend { margin-top:.15rem; padding:.16rem; font-size:.56rem; gap:.26rem; }.championship-grid .swatch { width:8px; height:8px; }
.championship-grid #leaderboard-panel { display:flex; flex-direction:column; background:linear-gradient(160deg,rgba(16,39,51,.98),rgba(7,17,24,.98)); }.championship-grid #leaderboard-periode { display:none; }.championship-grid .leaderboard { flex:1; max-height:280px; overflow-y:auto; }.championship-grid table { font-size:.72rem; }.championship-grid th { padding:.3rem .22rem; font-size:.56rem; }.championship-grid td { padding:.34rem .22rem; }.championship-grid .rank { width:1.45rem; }.championship-grid .code { width:1.75rem; }.championship-grid .pts { white-space:nowrap; }.championship-grid tbody tr:nth-child(-n+3) td { font-weight:bold; }

#auth-panel { order:1; max-width:720px; width:100%; margin:0 auto; }.duel-panel { order:2; }
#duel-panel { padding:.8rem; }.duel-setup > .hint:first-child { margin-bottom:.25rem; }
.super { padding:.7rem .85rem; }.super-titre { margin:0 0 .45rem; font-size:.88rem; }.super-corps { gap:.45rem; }.stat-card { padding:.5rem .6rem; }.stat-label { font-size:.68rem; }.stat-value { font-size:.88rem; }.stat-meta { font-size:.64rem; }
#stats-zone { grid-template-columns:repeat(2,minmax(0,1fr)); }.stats-listes { grid-template-columns:repeat(2,minmax(0,1fr)); }.palmares li { min-height:1.45rem; font-size:.65rem; }.palmares .sous { font-size:.55rem; }
.super-primes { padding:.7rem 1rem; }.super-primes .super-sous { display:none; }.super-primes .super-corps { margin-top:.1rem; }.super-primes .stats { grid-template-columns:1fr 1fr; gap:.5rem; }.super-primes .stat-card { min-height:72px; padding:.42rem .55rem .42rem 2.75rem; }.super-primes .stat-card::before { left:.7rem; font-size:1.3rem; }.super-primes .stat-label { margin-bottom:.2rem; }.super-primes .stat-value { font-size:.8rem; }.super-primes .regle { margin:.18rem 0 0; font-size:.57rem; line-height:1.25; }.super-primes .stat-meta { font-size:.58rem; }

.deux-colonnes { order:6; grid-template-columns:minmax(0,1fr); max-width:760px; width:100%; margin:0 auto; }.deux-colonnes .panel { padding:.7rem; }.deux-colonnes #records-liste { max-height:280px; }.records { grid-template-columns:repeat(2,minmax(0,1fr)); }.records li { padding:.4rem .5rem; }.record-jeu { font-size:.8rem; }.record-score { font-size:.75rem; }.record-qui { font-size:.6rem; }
#historique-panel { order:7; max-width:760px; width:100%; margin:0 auto; }

@media (min-width: 1000px) {
  #duel-panel .jeux-piste { --ecart:.6rem; }
  #duel-panel .jeu-carte { flex:0 0 calc((100% - 4 * var(--ecart)) / 5); min-height:10.8rem; }
  #duel-panel .jeu-image { flex-basis:6.2rem; }
  #duel-panel .jeu-corps { padding:.42rem .48rem .5rem; gap:.18rem; }
  #duel-panel .jeu-corps h3 { font-size:.76rem; }
  #duel-panel .jeu-mentions { min-height:.85rem; }
  #duel-panel .jeu-mention { font-size:.55rem; padding:.06rem .25rem; }
  #duel-panel .jeu-boutons .btn,#duel-panel .jeu-boutons .btn-ghost { padding:.3rem .18rem; font-size:.6rem; }
}
@media (max-width: 900px) { .championship-grid { grid-template-columns:1fr 1fr; }.championship-grid .map-panel { grid-column:1/-1; order:-1; }.championship-grid .map-wrap { height:270px; max-height:270px; }.championship-grid .france-svg { max-height:270px; }.records { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 620px) { .championship-grid { grid-template-columns:minmax(0,1fr); }.championship-grid .map-panel { grid-column:auto; }.championship-grid .map-wrap { height:250px; max-height:250px; }.championship-grid .france-svg { max-height:250px; }.last-duel-panel .duel-scoreboard { grid-template-columns:1fr auto 1fr; }.last-duel-panel .duel-versus { margin:0; }.super-primes .stats,#stats-zone,.stats-listes { grid-template-columns:minmax(0,1fr); }.records { grid-template-columns:minmax(0,1fr); } }

/* Seconde passe — tableau de championnat compact. */
main { gap: .9rem; padding-top: 1.2rem; padding-bottom: 2.2rem; }
.panel { padding: 1.15rem; }.super { padding: 1rem; }
#duel-panel { background: linear-gradient(135deg, rgba(47,25,25,.94), rgba(7,20,29,.98) 38%, rgba(14,36,47,.98)); }
#duel-panel > h2 { margin-bottom: .7rem; }
.apercu-cible { margin-bottom: .55rem; }.jeux-reperes { margin-top: 0; }

.super { overflow:hidden; }
.super::after { content:'✦'; position:absolute; right:1rem; top:.25rem; color:rgba(201,154,82,.22); font-size:3.4rem; pointer-events:none; }
.super-titre { margin:0 0 .7rem; font-size:1rem; }.super-titre::after { display:none; }
.super-sous { margin: -.25rem 0 .75rem; font-size: .78rem; }
.super-corps { gap:.7rem; }.stats { gap:.55rem; }
.stat-card { padding:.7rem .8rem; min-height:0; box-shadow:inset 3px 0 0 rgba(201,154,82,.48); }
.stat-label { margin:0 0 .38rem; font-size:.78rem; letter-spacing:.055em; }.stat-value { margin:0; font-size:1rem; }.stat-meta { margin:.25rem 0 0; font-size:.72rem; }
#stats-zone { display:grid; grid-template-columns:.72fr 1.45fr .72fr; align-items:stretch; }
#stats-zone .stat-card { display:flex; flex-direction:column; justify-content:center; }
.duel-last { box-shadow:inset 0 3px 0 rgba(201,154,82,.75), inset 3px 0 0 rgba(141,32,28,.7); background:linear-gradient(110deg,rgba(62,20,22,.75),rgba(7,24,34,.7)); }
.duel-last .stat-label { display:flex; align-items:center; justify-content:center; gap:.25rem; color:#eed097; text-align:center; }
.duel-forfait { margin-left:.35rem; padding:.12rem .35rem; border:1px solid rgba(221,119,108,.65); color:#e7a092; font:600 .56rem system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.duel-scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.55rem; text-align:center; }
.duel-team { min-width:0; display:grid; gap:.06rem; padding:.18rem .25rem; }.duel-team.winner { border-bottom:2px solid #c99a52; }
.duel-team-code { color:#eed097; font:bold 1.35rem Georgia,serif; }.duel-team-name { color:#f4e6c9; font:.76rem Georgia,serif; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.duel-team-player { color:#cbb992; font:.64rem system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.duel-versus { color:#2c1b09; background:#c99a52; border-radius:50%; width:1.8rem; height:1.8rem; display:grid; place-items:center; font:bold .58rem Georgia,serif; }
#stats-listes { display:grid; grid-template-columns:1fr 1fr; }.palmares { margin:.15rem 0 0; }.palmares li { min-height:1.8rem; padding:.2rem 0; font-size:.72rem; border-bottom-color:rgba(201,154,82,.16); }.palmares .rang { color:#eed097; }.palmares .valeur { color:#eed097; }

.super-primes { background:linear-gradient(105deg,rgba(60,24,23,.92),rgba(11,31,42,.98)); }.super-primes .super-corps { display:block; }.super-primes .stats { display:grid; grid-template-columns:1fr 1fr; }.super-primes .stat-card { position:relative; padding-left:3.6rem; background:rgba(4,15,22,.45); }.super-primes .stat-card::before { content:'✦'; position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#c99a52; font-size:1.7rem; }.super-primes .regle { font-size:.68rem; }.super-primes .jauge { height:.4rem; }

.map-panel { padding:.85rem 1rem .7rem; background:radial-gradient(ellipse at 50% 20%,rgba(130,38,29,.38),transparent 46%),linear-gradient(145deg,#122d38,#07141d); }.map-panel h2 { margin-bottom:.35rem; }.map-panel .hint { margin-bottom:.25rem; text-align:center; }.france-svg { max-width:475px; max-height:360px; }.map-wrap { max-height:365px; overflow:hidden; }.om-row { margin-top:.35rem; }.map-legend { margin-top:.45rem; padding:.3rem .5rem; background:rgba(3,12,18,.42); border-top:1px solid rgba(201,154,82,.22); font-size:.67rem; }

.deux-colonnes { gap:.85rem; }.deux-colonnes .panel { padding:.9rem; }.leaderboard { max-height:390px; }.leaderboard tbody tr:nth-child(-n+3) { background:linear-gradient(90deg,rgba(201,154,82,.16),transparent); }.leaderboard tbody tr:nth-child(1) .rank,.leaderboard tbody tr:nth-child(1) .pts { color:#f3d58f; font-size:1.08em; }.leaderboard tbody tr:nth-child(2) .rank,.leaderboard tbody tr:nth-child(2) .pts { color:#d5d5cf; }.leaderboard tbody tr:nth-child(3) .rank,.leaderboard tbody tr:nth-child(3) .pts { color:#cf9562; }.rank { font-family:Georgia,serif; font-size:1rem; }.code { font-family:Georgia,serif; font-size:.98rem; }.pts { color:#eed097; }
.records { gap:.45rem; }.records li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .55rem; padding:.55rem .65rem; border:1px solid rgba(201,154,82,.3); background:linear-gradient(105deg,rgba(75,28,24,.32),rgba(5,18,26,.42)); }.record-jeu { color:#eed097; font-family:Georgia,serif; }.record-score { color:#f4e6c9; font-weight:bold; }.record-qui { grid-column:1/-1; color:#cbb992; font-size:.7rem; }
#historique-panel { padding:.9rem; }.bilan-case { padding:.55rem .7rem; border-radius:1px; background:rgba(5,18,26,.55); }.parties { margin-top:.6rem; }.parties li { padding:.45rem .6rem; border-radius:1px; }

@media (max-width: 760px) { #stats-zone,#stats-listes,.super-primes .stats { grid-template-columns:minmax(0,1fr); }.duel-last { min-height:7.5rem; }.map-wrap { max-height:300px; }.france-svg { max-height:295px; }.super-primes .stat-card { padding-left:3.25rem; }.deux-colonnes { gap:.7rem; } }

/* Composition finale, declaree en dernier pour prendre le pas sur les
   feuilles historiques de la page. */
.tete{margin-top:-.8rem;padding:.68rem 1rem}.tete-points{font-size:1.55rem}main{gap:.75rem;padding-top:.8rem}
.championship-grid{order:0;display:grid;grid-template-columns:minmax(190px,.78fr) minmax(390px,1.5fr) minmax(220px,.92fr);align-items:stretch;gap:.75rem}.championship-grid .panel{min-width:0;padding:.7rem .75rem}.championship-grid .panel::before{inset:5px}.championship-grid h2{margin:.05rem 0 .35rem;font-size:.88rem}.championship-grid h2::after{width:28px;margin:.25rem auto 0}.last-duel-panel{background:linear-gradient(150deg,rgba(77,25,24,.86),rgba(7,21,30,.98) 68%)}.last-duel-panel .duel-last{min-height:calc(100% - 1.7rem);border:0;box-shadow:none;background:transparent;padding:.15rem}.last-duel-panel .duel-scoreboard{grid-template-columns:1fr;gap:.28rem}.last-duel-panel .duel-team{padding:.35rem;background:rgba(3,12,18,.38);border:1px solid rgba(201,154,82,.25)}.last-duel-panel .duel-team.winner{border-color:rgba(201,154,82,.72)}.last-duel-panel .duel-versus{justify-self:center;margin:-.08rem 0}.championship-grid .map-panel{grid-column:auto!important;padding:.58rem .65rem .45rem}.championship-grid .map-panel .hint{display:none}.championship-grid .map-wrap{height:230px!important;max-height:230px!important;align-items:center}.championship-grid .france-svg{width:auto;max-width:100%;max-height:230px!important}.championship-grid .om-row{margin-top:.05rem;gap:.25rem}.championship-grid .om-tile{padding:.18rem .3rem}.championship-grid .map-legend{margin-top:.15rem;padding:.16rem;font-size:.56rem;gap:.26rem}.championship-grid .swatch{width:8px;height:8px}.championship-grid #leaderboard-panel{display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(16,39,51,.98),rgba(7,17,24,.98))}.championship-grid #leaderboard-periode{display:none}.championship-grid .leaderboard{flex:1;max-height:280px!important;overflow-y:auto}.championship-grid table{font-size:.72rem}.championship-grid th{padding:.3rem .22rem;font-size:.56rem}.championship-grid td{padding:.34rem .22rem}.championship-grid .rank{width:1.45rem}.championship-grid .code{width:1.75rem}.championship-grid .pts{white-space:nowrap}.championship-grid tbody tr:nth-child(-n+3) td{font-weight:bold}
#auth-panel{order:1;max-width:720px;width:100%;margin:0 auto}#duel-panel{order:2;padding:.8rem}.super{padding:.7rem .85rem}.super-titre{margin:0 0 .45rem;font-size:.88rem}#stats-zone{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-listes{grid-template-columns:repeat(2,minmax(0,1fr))}.super-primes{padding:.7rem 1rem}.super-primes .super-sous{display:none}.super-primes .stats{grid-template-columns:1fr 1fr;gap:.5rem}.super-primes .stat-card{min-height:72px;padding:.42rem .55rem .42rem 2.75rem}.super-primes .stat-card::before{left:.7rem;font-size:1.3rem}.super-primes .regle{font-size:.57rem;line-height:1.25}.deux-colonnes{order:6;grid-template-columns:minmax(0,1fr);max-width:760px;width:100%;margin:0 auto}.deux-colonnes #records-liste{max-height:280px}.records{grid-template-columns:repeat(2,minmax(0,1fr))}#historique-panel{order:7;max-width:760px;width:100%;margin:0 auto}
@media(min-width:1000px){#duel-panel .jeux-piste{--ecart:.6rem}#duel-panel .jeu-carte{flex:0 0 calc((100% - 4 * var(--ecart)) / 5);min-height:10.8rem}#duel-panel .jeu-image{flex-basis:6.2rem}#duel-panel .jeu-corps{padding:.42rem .48rem .5rem;gap:.18rem}#duel-panel .jeu-corps h3{font-size:.76rem}#duel-panel .jeu-mention{font-size:.55rem;padding:.06rem .25rem}#duel-panel .jeu-boutons .btn,#duel-panel .jeu-boutons .btn-ghost{padding:.3rem .18rem;font-size:.6rem}}
@media(max-width:900px){.championship-grid{grid-template-columns:1fr 1fr}.championship-grid .map-panel{grid-column:1/-1!important;order:-1}.championship-grid .map-wrap{height:270px!important;max-height:270px!important}.championship-grid .france-svg{max-height:270px!important}.records{grid-template-columns:minmax(0,1fr)}}@media(max-width:620px){.championship-grid{grid-template-columns:minmax(0,1fr)}.championship-grid .map-panel{grid-column:auto!important}.championship-grid .map-wrap{height:250px!important;max-height:250px!important}.championship-grid .france-svg{max-height:250px!important}.last-duel-panel .duel-scoreboard{grid-template-columns:1fr auto 1fr}.last-duel-panel .duel-versus{margin:0}.super-primes .stats,#stats-zone,.stats-listes{grid-template-columns:minmax(0,1fr)}.records{grid-template-columns:minmax(0,1fr)}}