/* =====================================================================
   FEUILLE UNIQUE

   Toutes les pages partagent la même ossature :

       bandeau (pleine largeur, collant)
       main.page (colonne centrée, 680 px)
         header.entete   — titre + une ligne de contexte
         section.bloc    — un titre discret, puis des bandes

   Une seule feuille pour les quatre pages : c'est ce qui garantit
   qu'elles ne divergent pas. Les deux exceptions (grille de saisie,
   pages de connexion) ajoutent leur propre feuille par-dessus.
   ===================================================================== */

/* =====================================================================
   JETONS — « SCOVILLE HEAT »

   Un seul endroit pour toutes les couleurs. Le reste de la feuille ne
   contient aucune valeur en dur : changer d'ambiance, c'est changer ce
   bloc, rien d'autre.

   L'équilibre visé, et il est délibéré :

       70 % noir profond   ·   20 % rouge-orange   ·   10 % vert néon

   Le vert n'est JAMAIS une couleur de remplissage. Il souligne, il
   borde, il accentue — au-delà, on bascule dans le RGB de gamer, et
   c'est exactement ce qu'on veut éviter.
   ===================================================================== */

/* =====================================================================
   CYBERPUNK SCOVILLE — les jetons

   Une seule source pour toute la direction artistique. Aucune valeur en
   dur ailleurs : changer d'ambiance, c'est changer ce bloc.

   Ratio tenu : 70 % noir · 12 % vert · 12 % rouge · 6 % orange.
   Le vert et le rouge ne jouent JAMAIS le même rôle — vert pour ce qui
   réussit et ce qui est actif, rouge pour ce qui est chaud, clos ou
   raté, orange pour le choix du joueur.
   ===================================================================== */

:root{
  /* ---- fonds ---- */
  --bg-void:#050706;
  --bg-main:#080A09;
  --bg-secondary:#0C0F0D;
  --bg-elevated:#101310;
  --bg-panel:rgba(10,13,11,.88);
  --bg-panel-soft:rgba(13,16,14,.72);

  /* ---- texte ---- */
  --text-primary:#F4F6F3;
  --text-secondary:#A5AAA5;
  --text-muted:#6F746F;
  --text-disabled:#4A4E4A;

  /* ---- piment / Scoville ---- */
  --chili-green:#A6FF00;
  --chili-green-soft:#7EDC00;
  --chili-green-dark:#355E00;
  --heat-red:#FF2A1A;
  --heat-red-soft:#E84232;
  --heat-red-dark:#5C0E08;
  --heat-orange:#FF7A00;
  --heat-yellow:#FFD23F;

  /* ---- bordures ---- */
  --border-soft:rgba(255,255,255,.07);
  --border-medium:rgba(255,255,255,.10);
  --border-green:rgba(166,255,0,.55);
  --border-red:rgba(255,42,26,.55);

  /* ---- lueurs ---- */
  /* LES LUEURS, montées d'un cran.

     Le cahier des charges déconseillait « trop de glow » ; la maquette
     de référence, elle, vibre. C'est la maquette qui tranche. On garde
     malgré tout deux règles : jamais de lueur sur un long texte, et
     jamais au point de faire tomber le contraste sous le seuil de
     lisibilité — c'est mesuré plus bas. */
  --glow-green:0 0 8px rgba(166,255,0,.42), 0 0 24px rgba(166,255,0,.22),
               0 0 48px rgba(166,255,0,.10);
  --glow-red:0 0 8px rgba(255,42,26,.42), 0 0 24px rgba(255,42,26,.22),
             0 0 48px rgba(255,42,26,.10);
  --glow-orange:0 0 8px rgba(255,122,0,.40), 0 0 24px rgba(255,122,0,.20);

  /* Les lueurs de TEXTE sont plus serrées : au-delà, les lettres se
     empâtent et deviennent moins lisibles, pas plus. */
  --neon-vert:0 0 6px rgba(166,255,0,.55), 0 0 18px rgba(166,255,0,.28);
  --neon-rouge:0 0 6px rgba(255,42,26,.55), 0 0 18px rgba(255,42,26,.28);
  --neon-orange:0 0 6px rgba(255,122,0,.55), 0 0 18px rgba(255,122,0,.28);

  /* ---- typographie ----
     Trois rôles, trois familles.

     ORBITRON pour les titres : géométrique, large, anguleuse. C'est la
     police qui dit « jeu » en trois lettres. Illisible en petit, elle
     est donc réservée aux titres et à la marque.

     RAJDHANI pour l'interface : semi-condensée, angles carrés, conçue
     pour les tableaux de bord. Elle reste lisible à onze pixels, et sa
     condensation fait gagner de la place sur téléphone.

     SHARE TECH MONO pour les chiffres : une chasse fixe de terminal.
     Les nombres restent alignés d'une ligne à l'autre. */
  /* Une variable CSS ne peut PAS se référencer elle-même : la
     déclaration devient invalide et la police de secours du navigateur
     s'applique partout, silencieusement. C'était le cas depuis
     l'introduction de ces trois familles — les titres et les chiffres
     n'ont jamais utilisé Orbitron ni Share Tech Mono. */
  --police:"Rajdhani", "Inter Tight", system-ui, sans-serif;
  --police-titre:"Orbitron", "Rajdhani", "Inter Tight", sans-serif;
  --police-mono:"Share Tech Mono", "DM Mono", ui-monospace, monospace;

  /* ---- transitions ---- */
  --transition-fast:160ms ease;
  --transition-base:220ms ease;

  /* ---- alias vers les noms déjà employés dans la feuille ----
     Le reste du fichier continue de parler d'encre, de trait et
     d'états ; ces alias évitent de réécrire trois cents règles pour
     changer de vocabulaire. */
  --bg:var(--bg-main);
  --ink:var(--text-primary);
  --muted:var(--text-secondary);
  --done:var(--text-muted);
  --line:var(--border-soft);
  --line-marquee:var(--border-medium);
  --contraste:var(--bg-void);
  /* Alias hérités : le reste de la feuille les nomme encore ainsi. */
  --bg-carte:var(--bg-panel);
  --bg-carte-plate:var(--bg-panel-soft);
  --bg-secondaire:var(--bg-secondary);
  --heat-amber:var(--heat-yellow);
  --line-soft:var(--border-soft);
  --page:680px;

  /* ---- états d'une grille ---- */
  --ouverte:var(--chili-green);
  --encours:var(--heat-orange);
  --finie:var(--text-muted);
  /* Fenêtre de jeu pas encore ouverte : la grille existe, se regarde,
     mais ne se remplit pas — liseré éteint, comme une promesse. */
  --avenir:var(--text-muted);
  --stamp:var(--heat-red);

  /* ---- échelle de Scoville ---- */
  --sc-bell:var(--chili-green);
  --sc-jalapeno:#C6FF00;
  --sc-cayenne:var(--heat-yellow);
  --sc-habanero:var(--heat-orange);
  --sc-ghost:var(--heat-red-soft);
  --sc-reaper:var(--heat-red);
  --sc-pepperx:#B90D00;

  /* La montée en chaleur, réutilisable partout. */
  --echelle-heat:linear-gradient(90deg,
    #A6FF00 0%, #C6FF00 18%, #FFD23F 38%,
    #FF7A00 62%, #FF2A1A 82%, #B90D00 100%);

  /* ---- panneau ---- */
  --carte-rayon:14px;
  --carte-ombre:0 14px 40px rgba(0,0,0,.28);
  --transition:var(--transition-base);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Le fond du DOCUMENT, pas seulement du corps : au-delà des limites du
   défilement — l'élastique d'iOS, la sur-course d'Android — c'est html
   qui s'affiche. Sans cette règle, on voit le blanc du navigateur en
   tirant vers le haut ou vers le bas. */
html{
  -webkit-text-size-adjust:100%;
  background:var(--bg-void);
  min-height:100%;
}
/* =====================================================================
   3. FOND GLOBAL

   Deux lueurs très basses — vert en haut à gauche, rouge en bas à
   droite — sur un dégradé du noir absolu vers le noir principal.
   Par-dessus, une trame HUD à 2,5 % : grille technique et lignes
   électroniques. À cette opacité on ne la voit pas, on la sent, et
   elle ne gêne jamais la lecture.
   ===================================================================== */
body{
  color:var(--text-primary);
  font-family:var(--police);
  font-size:17px;line-height:1.4;
  background:
    radial-gradient(circle at 12% 15%, rgba(166,255,0,.035), transparent 28%),
    radial-gradient(circle at 88% 85%, rgba(255,42,26,.05), transparent 32%),
    linear-gradient(180deg, #050706 0%, #080A09 100%);
  background-attachment:fixed;
  /* Le corps couvre au moins la fenêtre, y compris quand la page est
     courte : sinon le fond s'arrête au dernier bloc. */
  min-height:100vh;
}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.025;
  background-image:
    /* grille technique */
    linear-gradient(90deg, rgba(166,255,0,.9) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.7) 1px, transparent 1px),
    /* lignes électroniques, plus espacées */
    linear-gradient(90deg, rgba(255,42,26,.8) 1px, transparent 1px);
  background-size:48px 48px, 48px 48px, 240px 240px;
}

.page, .bandeau{position:relative;z-index:1}

/* ---------- bandeau ---------- */
.bandeau{
  background:var(--bg);
  position:sticky;top:0;z-index:30;
}
/* Deux étages, quelle que soit la largeur : le compte en haut, la
   navigation en dessous. Chaque bandeau respire, et chacun pourra
   s'étoffer sans écraser l'autre. */
.bandeau-in{
  max-width:var(--page);margin:0 auto;padding:0 16px;
  display:flex;align-items:center;flex-wrap:wrap;
}
.onglets{display:flex;align-items:center;gap:2px;min-width:0;width:100%}
/* Trois zones de largeurs indépendantes : les compteurs à gauche, le
   joueur au CENTRE — vraiment au centre, quelle que soit la largeur des
   deux autres —, les actions à droite. Une grille, pas un flex : avec
   flex, le milieu se décale dès qu'un compteur gagne un chiffre. */
/* Trois zones de largeurs indépendantes : les compteurs à gauche,
   l'identité au CENTRE — vraiment au centre, quelle que soit la largeur
   des deux autres —, les actions à droite. Une grille, pas un flex :
   avec flex, le milieu se décale dès qu'un compteur gagne un chiffre. */
/* DEUX ÉTAGES : la marque seule au-dessus, puis les trois zones.
   Tant qu'elle partageait la ligne, la marque disputait sa largeur aux
   compteurs et au bouton — et les deux écarts qui l'encadraient ne
   pouvaient s'égaliser qu'en déformant l'un ou l'autre. Seule sur son
   étage, elle est centrée sans rien contraindre. */
.bandeau .droite{
  width:100%;order:-1;margin-left:0;
  padding:8px 0 10px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:7px 10px;
}
.bandeau .droite > .marque-bandeau{grid-column:1 / -1;justify-self:center}
/* L'ÉTAGE DU BAS retrouve sa disposition d'origine : les compteurs à
   gauche, le joueur au CENTRE — vraiment au centre, quelle que soit la
   largeur des deux autres —, les actions à droite. */
.bandeau .droite > .compte{justify-self:start}
.bandeau .droite > .identite{justify-self:center;min-width:0;align-items:center}
.bandeau .droite > .actions{
  justify-self:end;display:flex;align-items:center;gap:8px;min-width:0;
}

/* PORTÉE DOUBLE, ET C'EST NÉCESSAIRE : `.bandeau a` — les onglets de
   navigation — pèse une classe ET un élément, donc plus qu'une classe
   seule. La marque héritait de leur taille de 14,5 px sans que la
   déclaration d'ici n'ait jamais eu d'effet. */
.bandeau .marque-bandeau{
  display:block;text-decoration:none;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
  /* Une moitié plus grande qu'à l'origine (13/3,4/20). */
  font:900 clamp(19.5px, 5.1vw, 30px)/1 var(--police-titre);
  letter-spacing:.02em;text-transform:uppercase;color:var(--text-primary);
  padding:0;margin-bottom:0;border-bottom:0;
}
.bandeau .marque-bandeau span{color:var(--heat-red)}
@media (hover:hover){
  .bandeau .marque-bandeau:hover{color:var(--text-primary)}
}
.bandeau a{
  color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:14px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;transition:color var(--transition);
}
@media (hover:hover){ .bandeau a:hover{color:var(--ink)} }
/* L'onglet actif : texte blanc, soulignement vert, halo à peine posé.
   Le vert marque la position — c'est son emploi le plus utile. */
/* =====================================================================
   8. NAVIGATION — interface tactique

   L'onglet actif ne se souligne pas d'un trait plein : un dégradé qui
   naît et s'éteint dans le vide, avec une lueur courte. C'est ce qui
   distingue un repère HUD d'un simple soulignement.
   ===================================================================== */
.bandeau a{position:relative;border-bottom:0}
.bandeau a.actif{color:#fff;font-weight:600}
.bandeau a.actif::after{
  content:"";position:absolute;left:15%;right:15%;bottom:-1px;height:2px;
  background:linear-gradient(90deg, transparent, var(--chili-green), transparent);
  box-shadow:0 0 12px rgba(166,255,0,.4);
}
/* Variante rouge pour les sections « chaudes ». */
.bandeau a.actif.hot::after{
  background:linear-gradient(90deg, transparent, var(--heat-red), transparent);
  box-shadow:0 0 12px rgba(255,42,26,.4);
}
/* LA PASTILLE DES CONCOURS NEUFS.
   Rouge plein, seule de son espèce dans le bandeau : c'est ce qui la
   fait voir sans qu'elle ait besoin d'être grande. Elle se pose DANS
   l'onglet, sur son coin haut-droit, et ne déborde pas — `.onglets`
   défile horizontalement sur téléphone (`overflow-x:auto`), et tout ce
   qui sort de la boîte y serait rogné.
   Le lien porte déjà `position:relative` (le soulignement de l'onglet
   actif s'y accroche) : rien à ajouter de ce côté.

   ELLE NE S'APPELLE PAS `pastille`, ET C'EST DÉLIBÉRÉ : cette classe-là
   est déjà prise par les ronds d'état des cartes, qui imposent
   `width:38px`. MESURÉ AU NAVIGATEUR : 44 px de large pour un chiffre,
   au lieu de 14. Deux classes valent plus qu'une, mais seulement pour
   les propriétés qu'on écrit — la largeur, jamais déclarée ici,
   arrivait de l'autre règle. Même piège que `.ligne` des bandes. */
.bandeau .pastille-neuf{
  position:absolute;top:6px;right:2px;
  display:grid;place-items:center;
  min-width:14px;height:14px;padding:0 3px;
  border-radius:7px;background:var(--heat-red);
  font:700 9px/1 var(--police-mono);color:#fff;letter-spacing:0;
  box-shadow:0 0 8px rgba(255,42,26,.45);
  pointer-events:none;
}
@media (max-width:900px){ .bandeau .pastille-neuf{top:4px} }
@media (max-width:520px){ .bandeau .pastille-neuf{top:2px;right:0} }

.bandeau .qui{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.bandeau form{display:flex}

/* Le score du joueur, toujours visible : c'est ce qu'il vient chercher.
   Les deux mesures s'empilent, libellé à gauche et nombre juste après :
   les deux colonnes s'alignent, l'œil descend au lieu de serpenter. */
/* Les compteurs prennent la hauteur libre du bandeau : la colonne de
   gauche ne portait rien d'autre, autant que les chiffres soient
   lisibles d'un coup d'œil. */
.compte{
  display:inline-grid;gap:3px;
  border:1px solid var(--line);border-radius:10px;padding:5px 11px;
}
.ligne-compte{
  display:grid;grid-template-columns:22px auto;align-items:center;gap:12px;
  font:500 14px/1.2 var(--police-mono);color:var(--ink);
}
.ligne-compte .etiquette{
  color:var(--muted);font-size:12px;text-align:center;
}
.ligne-compte .etiquette.chilli{font-size:16px}
/* LES DEUX NOMBRES S'ALIGNENT SUR LEUR BORD DROIT. Ils partageaient
   leur bord GAUCHE : les points, plus courts, restaient collés à la
   gauche de la colonne pendant que les chillies s'étiraient vers la
   droite — 38 px d'écart entre les deux fins de nombre, mesurés à
   15 300 chillies. Deux nombres empilés se lisent par les unités, pas
   par les milliers. `tabular-nums` ne suffisait pas : il égalise la
   largeur des CHIFFRES, pas celle des nombres. */
.ligne-compte b{
  font-weight:700;font-variant-numeric:tabular-nums;font-size:16px;
  text-align:right;
}

/* L'identité : le pseudo, et sous lui la marche vers le palier suivant.
   Elle vit à droite, contre le bouton de déconnexion, depuis que la
   marque tient le centre. */
.identite{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.identite .qui{padding:0;font-size:14.5px;line-height:1.2}
/* LA JAUGE EST LA PIÈCE QUI CÈDE. Largeur souhaitée, pas imposée : sur
   un écran étroit, le trio identité + bouton dépassait sa colonne et
   passait sous la marque. C'est le rail qui se resserre — le pseudo et
   le bouton, eux, gardent leur taille. */
.progression{
  display:flex;align-items:center;gap:6px;text-decoration:none;
  width:170px;max-width:100%;min-width:0;
}
/* PORTÉE DOUBLE, LE MÊME PIÈGE QUE LA MARQUE : `.bandeau a` pèse une
   classe ET un élément, donc plus que `.progression` seule — le
   `padding:0` écrit ici n'a jamais rien fait. MESURÉ AU NAVIGATEUR :
   la jauge occupait 41 px de haut pour 13 px de contenu, soit 14 px de
   vide entre le pseudo et elle, qu'aucun `gap` de 2 px ne pouvait
   rattraper. Seule la VERTICALE est reprise : l'horizontale cadre la
   jauge dans sa colonne et a été réglée au pixel près sur iPhone. */
.bandeau .progression{padding-top:0;padding-bottom:0}
.progression .drapeau{margin:0;flex:none;width:15px;height:10.3px}
.progression .glyphe{font-size:13px;line-height:1;flex:none}
.progression .rail{
  /* Elle se resserre jusqu'à 24 px et pas moins : en deçà, la jauge ne
     dit plus rien. */
  flex:1 1 auto;min-width:24px;height:8px;border-radius:4px;overflow:hidden;
  background:color-mix(in srgb, var(--line) 80%, transparent);
  border:1px solid var(--line);
}
.progression .rail i{
  display:block;height:100%;border-radius:4px;
  background:var(--echelle-heat);
  transition:width var(--transition);
}
.progression:hover .rail{background:var(--line)}

/* Sans taille explicite, un SVG prend sa boîte par défaut et se pose de
   travers dans un bouton carré. On la fixe, et on centre. */
.bouton-rond{
  background:none;border:1px solid var(--line);border-radius:10px;
  width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--muted);padding:0;
  line-height:0;transition:border-color var(--transition-fast),
                           color var(--transition-fast);
}
.bouton-rond svg{width:15px;height:15px;display:block}
.bandeau form{display:flex;align-items:center}
.bouton-rond:hover{border-color:var(--ink);color:var(--ink)}
.bandeau button{
  background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font:500 12px/1 var(--police);
  padding:7px 9px;cursor:pointer;
}
.bandeau button:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- colonne de page ---------- */
.page{max-width:var(--page);margin:0 auto;padding:0 16px 72px}

.entete{padding:22px 0 5px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
/* Orbitron est large : à taille égale elle occupe un tiers de plus que
   la précédente. On descend donc d'un cran et l'on resserre. */
/* Orbitron est LARGE : à taille égale, elle occupe près d'un tiers de
   plus que la précédente. « Administration » ou « Calendrier » en
   capitales dépasseraient sur un écran de 360 px.

   La taille suit donc la largeur de l'écran, entre 17 et 24 px, et le
   titre peut se couper plutôt que déborder. Je n'ai pas pu le vérifier
   à l'œil — mon environnement n'atteint pas le service de polices —
   d'où cette prudence. */
.entete h1{
  font:800 clamp(17px, 5.4vw, 24px)/1.12 var(--police-titre);
  letter-spacing:.01em;color:var(--ink);text-transform:uppercase;
  overflow-wrap:anywhere;
}

/* « Titres : blanc, éventuellement mot clé en orange/rouge ou vert ».
   Un seul mot prend la chaleur, le reste reste blanc. */
.entete h1 .mot-chaud{
  background:linear-gradient(96deg, var(--heat-amber), var(--heat-red));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--heat-orange);
}
/* L'accroche passe SOUS le titre : l'en-tête est un flex, sans cette
   largeur pleine elle se pose à côté. */
.accroche{color:var(--muted);font-size:15px;margin-top:4px;width:100%}

/* ---------- en-tête « ligne » : le titre à gauche, le reste à droite ----------

   Libère l'axe vertical : slogan, compteur ou boutons rejoignent la
   ligne du titre, alignés à droite et centrés sur sa hauteur. Le
   flex-wrap hérité reste le filet : si l'écran est vraiment trop
   étroit, le bloc de droite descend d'une ligne au lieu de déborder. */
.entete.en-ligne{align-items:center}
/* MÊME HAUTEUR DE TITRE SUR TOUTES LES PAGES. La rangée mesure la
   hauteur de son bloc de droite : avec des boutons (36 px) le titre
   se centre plus bas qu'avec du texte — Hot Ones et Concours flottaient
   4 px au-dessus du Classement. Le bloc de droite réserve donc TOUJOURS
   la hauteur d'un bouton, texte compris. */
.entete.en-ligne .accroche,
.entete.en-ligne .sous.droite{
  min-height:36px;display:inline-flex;align-items:center;
}
/* Le titre ne se coupe JAMAIS en morceaux : l'« anywhere » hérité
   tronçonnait « CLASSEMENT » dès que les boutons manquaient de place.
   C'est le bloc de droite qui descend d'une ligne, pas le titre qui
   se mutile. */
.entete.en-ligne h1{overflow-wrap:normal;white-space:nowrap;flex-shrink:0}
.entete.en-ligne .outils{margin-left:auto;justify-content:flex-end}
.entete.en-ligne .accroche{width:auto;margin:0 0 0 auto;text-align:right}
.entete.en-ligne .sous.droite{width:auto;margin-left:auto;padding-bottom:0}
@media (max-width:520px){
  /* Compacter la droite pour tenir sur la ligne du titre : boutons
     resserrés, accroche réduite, et la période de la semaine disparaît
     du bouton — elle reste lisible dans le menu déroulant. */
  .entete.en-ligne .btn{min-width:32px;height:32px;padding:0 8px;font-size:12px}
  .entete.en-ligne .accroche,
  .entete.en-ligne .sous.droite{min-height:32px}
  .entete.en-ligne .saut-semaine summary .discret{display:none}
  .entete.en-ligne .accroche{font-size:12px;max-width:180px}
}
.sous{
  width:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:14px;color:var(--muted);padding-bottom:5px;
}
.sous .fort{font-weight:500;color:var(--ink)}
.sous .compteur{
  font-weight:600;color:var(--ink);
  background:var(--line-soft);border-radius:999px;padding:4px 10px;
}

/* ---------- navigation secondaire (semaines, portées) ---------- */
.outils{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-grid;place-items:center;text-decoration:none;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  min-width:36px;height:36px;padding:0 12px;
  color:var(--muted);font:500 13px/1 var(--police);cursor:pointer;
}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.actif{background:var(--ink);border-color:var(--ink);color:var(--contraste)}
/* NE PAS RENOMMER EN « icone ».
   C'est le nom qu'ils portaient, et `.icone` — plus bas, pour les icônes
   dessinées — impose `display:block`. À spécificité égale, la règle la
   plus tardive gagnait : les chevrons perdaient le `place-items:center`
   de `.btn` et se collaient en haut à gauche de leur cadre. */
.btn.fleche{padding:0;font-size:17px}

/* ---------- section ---------- */
/* Les barres grises de séparation ont disparu : l'espacement seul
   délimite les sections — plus sobre, et l'axe vertical respire. */
.bloc{padding-top:2px}
/* Convention : sous l'en-tête, 5 px de rembourrage puis 5 px d'espace.
   Le premier titre de section prend la marge qui complète les 2 px de
   rembourrage du bloc — même règle aux deux largeurs d'écran. */
.bloc:first-of-type .titre-bloc{margin-top:3px}
.titre-bloc{
  font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:14px 4px 8px;
}
.titre-bloc .discret{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.aujourdhui::after{
  content:"aujourd'hui";margin-left:8px;font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--heat-orange);
}
.none{font-size:14.5px;color:var(--muted);padding:2px 4px 14px}
.none a{color:var(--chili-green);font-weight:600}
.avis{
  background:var(--line-soft);border-radius:10px;padding:10px 12px;
  font-size:14.5px;margin:8px 0;
}

/* ---------- la bande : brique commune à toutes les pages ---------- */
/* Flex plutôt que grid : selon la page, la bande contient trois ou
   quatre éléments. Une grille à colonnes fixes plaçait le bouton dans
   la colonne souple, qui l'étirait sur toute la largeur restante. */
/* =====================================================================
   4. PANNEAUX

   Un seul modèle, appliqué aux composants qui existent déjà — bandes,
   cartes, blocs d'administration. Pas de seconde couche d'interface.
   ===================================================================== */
.band, .carte-heat{
  position:relative;
  background:linear-gradient(180deg, rgba(16,19,16,.92), rgba(8,10,9,.90));
  border:1px solid rgba(255,255,255,.065);
  border-radius:var(--carte-rayon);
  backdrop-filter:blur(12px);
  box-shadow:var(--carte-ombre);
}

.band{
  --sport:var(--muted);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  transition:border-color var(--transition), transform var(--transition);
  /* Le liseré de gauche porte l'état de la grille — c'est le seul
     endroit où la couleur d'état apparaît en aplat. */
  border-left:3px solid var(--sport);
  padding:11px 13px;margin-bottom:8px;
}
@media (hover:hover){
  .band:hover{border-color:color-mix(in srgb, var(--sport) 40%, var(--line))}
}
.band:last-child{margin-bottom:0}
/* Hot Ones : l'écart ENTRE sections est réduit de moitié — MESURÉ à
   16→8 px après une liste de bandes, 28→14 après une carte, 32→16 sur
   mobile. La première section est exclue : l'espace sous l'en-tête de
   page ne bouge pas, et l'écart titre→contenu non plus. */
.accueil .bloc:not(:first-of-type) .titre-bloc{padding-top:6px}
.accueil .carte-heat{margin-bottom:6px}
.band.settled{
  --sport:var(--done);
  background:var(--line-soft);border-color:var(--line);border-left-color:var(--done);
}
.band.settled .comp{color:var(--muted)}

/* L'emblème se lit avant le texte : c'est lui qui dit le sport en un
   coup d'œil, la couleur ne fait que confirmer. */
.embleme{
  font-size:18px;line-height:1;flex:none;
  width:19px;text-align:center;
}

/* Le nom seul se tronque. Sans ça, le drapeau et le numéro de journée
   disparaissaient sous les points de suspension. */
.comp{display:flex;align-items:center;min-width:0}
.nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.drapeau{
  width:15px;height:10.3px;flex:none;margin-left:6px;
  border-radius:1.5px;box-shadow:0 0 0 .5px rgba(0,0,0,.22);
}
.manche{color:var(--muted);font-weight:500;flex:none;white-space:nowrap}
.manche::before{content:"\00a0·\00a0"}
.manche-meta{color:var(--ink);font-weight:500;flex:none}
.status{width:19px;height:19px;flex:none;display:block}
.puce{width:10px;height:10px;border-radius:50%;background:var(--sport);display:block;flex:none}
.band.settled .puce{background:none;border:1.5px solid var(--done)}

/* Base zéro, pas « auto » : avec une base automatique, un nom un peu
   long faisait grossir le bloc au-delà de la largeur disponible, et
   l'emblème partait sur sa propre ligne — d'où des bandes à deux ou
   trois lignes selon le nom de la compétition. */
.info{flex:1 1 0;min-width:0}

/* Deux lignes, deux colonnes. La colonne de droite a une largeur
   minimale commune : le nombre de joueurs et le décompte tombent l'un
   sous l'autre au lieu de flotter. */
/* Deux colonnes fixes, comme au classement : en flex, le montant et
   l'échéance se repliaient dès que le nom était un peu long, et la
   bande passait sur trois étages. */
.ligne{
  display:grid;grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;gap:10px;
}
.ligne .gauche{
  display:flex;align-items:center;gap:6px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ligne .gauche .pot{flex:none}
.cote{
  text-align:right;white-space:nowrap;
  font:400 11.5px/1.4 var(--police-mono);color:var(--muted);
}
.cote.joueurs{white-space:nowrap}
.band > .cta,
.band > .gains,
.band > .attente{flex:0 0 auto;margin-left:auto}
/* Une bande qui porte un bloc de gains à droite doit réserver la place
   du nom : sans largeur minimale, le concours et le nombre de joueurs
   se chevauchent dès que la ligne est serrée. */
/* `flex:1 1 100%` poussait l'emblème du sport sur sa propre ligne :
   la base réclamait toute la largeur. `auto` laisse la place à
   l'emblème et prend le reste. */
.band.settled .info, .band.encours .info{flex:1 1 auto;min-width:0}
.band.settled .ligne, .band.encours .ligne{grid-template-columns:minmax(0,1fr) auto}
.band.settled .nom, .band.encours .nom{min-width:0}

/* Points et chillies côte à côte sur la bande de résultat : ce sont les
   deux gains d'une grille soldée, et ils se lisent ensemble. */
.bilan{display:inline-flex;align-items:baseline;gap:10px;flex:none}
/* LA VOIX UNIQUE DES MONTANTS. La référence est le compteur du
   bandeau : Share Tech Mono, gras, encre claire. Tout ce qui affiche
   des points ou des chillies la suit — plus de vert, plus de rouge,
   plus de néon selon la page. */
.gain-vif{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  line-height:1;
  font:700 14px/1 var(--police-mono);color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}

/* Les points, en haut à droite : c'est l'information qu'on vient
   chercher, elle ne doit pas se trouver en troisième ligne. */
/* La seconde ligne écarte ses deux informations aux extrémités. */
.band.encours .ligne.meta, .band.settled .ligne.meta{
  display:flex;justify-content:space-between;gap:10px;
}
.band.encours .ligne.meta .droite,
.band.settled .ligne.meta .droite{color:var(--text-muted)}

.points-vif{
  flex:none;white-space:nowrap;
  font:700 14px/1 var(--police-mono);color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}

/* Une bande cliquable reste une bande : ni soulignement, ni couleur de
   lien. C'est la carte entière qui mène au coupon. */
a.band{text-decoration:none;color:inherit}
a.band .nom{color:var(--text-primary)}
@media (hover:hover){
  a.band:hover{border-color:var(--border-medium)}
}
.comp{font-size:15.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
/* Alignement au centre, pas sur la ligne de base : la pièce est un
   dessin inline-flex, et sa base ne coïncide pas avec celle du texte
   voisin — d'où un décalage vertical d'un ou deux pixels. */
.meta{
  font:400 11.5px/1.4 var(--police-mono);color:var(--muted);margin-top:2px;
  display:flex;gap:6px;align-items:center;
}
.meta .pot{
  color:var(--text-primary);font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
}
.meta .echeance{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.meta .reste{display:inline-flex;align-items:center;gap:4px}
/* L'attribut hidden doit l'emporter sur la règle d'affichage ci-dessus,
   sinon le mot « Reste » reste seul, sans décompte derrière. */
.meta .reste[hidden]{display:none}
.meta .reste b{font-weight:400;font-variant-numeric:tabular-nums}
/* Le décompte est la seule chose rouge de la bande : c'est ce qui le
   fait remarquer. `.cote` impose la couleur grise à toute la colonne,
   il faut donc la reprendre explicitement ici. */
.echeance.urgent,
.echeance.urgent .reste{color:var(--stamp)}
/* Le rouge suffit à faire remarquer le décompte : le gras en plus
   l'alourdit sans rien ajouter. */
.echeance.urgent .reste b{font-weight:400;color:var(--stamp)}

/* =====================================================================
   21. BOUTONS
   ===================================================================== */
.cta{
  display:inline-grid;place-items:center;text-decoration:none;color:#fff;
  background:linear-gradient(180deg, rgba(255,42,26,.18), rgba(255,42,26,.08));
  border:1px solid rgba(255,42,26,.65);
  border-radius:8px;
  font:600 12px/1 var(--police);padding:9px 13px;cursor:pointer;
  white-space:nowrap;min-width:92px;
  transition:border-color var(--transition-fast),
             box-shadow var(--transition-fast), color var(--transition-fast);
}
@media (hover:hover){
  .cta:hover{border-color:var(--heat-red);box-shadow:var(--glow-red)}
}

/* TERMINÉ : un ÉTAT, pas un bouton — 14/09/2026, sur « lorsqu'un
   concours est terminé, remplace le bouton Suivi par Terminé avec un
   dégradé de rouge ».

   Le dégradé est PLEIN là où `.cta` n'en pose qu'un voile (18 % → 8 %
   d'opacité) : c'est ce qui le distingue à l'œil d'un bouton qu'on
   peut presser, et la demande dit bien « un dégradé de rouge », pas
   « un peu plus de rouge ». Les deux teintes sortent de la palette —
   `--heat-red` et `--heat-red-dark` — plutôt que d'être écrites à la
   main : une quatrième nuance de rouge dans la feuille finirait par
   dériver des trois autres.

   LE CURSEUR REDEVIENT UNE FLÈCHE : `.cta` pose `cursor:pointer`, et
   le garder promettrait un clic qui n'existe pas — le relais est un
   `<span>`, rien ne se passerait, et c'est précisément ce qui agace.

   AUCUNE RÈGLE DE SURVOL, ET C'EST MESURÉ PLUTÔT QUE SUPPOSÉ. On
   pourrait croire qu'il en faut une pour éteindre l'effet de `.cta`,
   mais `.cta:hover` ne pose que `border-color:var(--heat-red)` et
   `box-shadow:var(--glow-red)` — exactement ce que ce badge porte
   DÉJÀ au repos (le halo vient de `.cta{box-shadow:var(--glow-red)}`,
   plus bas dans la feuille). Survoler ne change donc rien. Écrire un
   `:hover{box-shadow:none}` aurait fait l'inverse du but : le halo
   aurait DISPARU sous le curseur. */
.cta.termine{
  background:linear-gradient(180deg, var(--heat-red), var(--heat-red-dark));
  border-color:var(--heat-red);
  color:#fff;cursor:default;
}

/* Secondaire : bordure verte, texte vert, fond presque noir. */
.cta.ghost{
  background:var(--bg-void);color:var(--chili-green);
  border-color:var(--border-green);
}
@media (hover:hover){
  .cta.ghost:hover{
    border-color:var(--chili-green);box-shadow:var(--glow-green);
  }
}
/* Les montants sont alignés à droite et séparés d'un filet vertical :
   d'une ligne à l'autre, les chiffres tombent les uns sous les autres,
   ce qui rend la comparaison immédiate. */
.gains{display:flex;align-items:center;white-space:nowrap}
.gain{
  font:700 13px/1 var(--police-mono);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;
  min-width:62px;
}
.gains .gain + .gain{
  border-left:1px solid var(--line);
  margin-left:11px;padding-left:11px;min-width:76px;
}

.chilli{
  display:inline-flex;align-items:center;flex:none;
  font-size:16px;line-height:1;
}
/* La règle unique des piments vit plus bas, avec les autres glyphes de
   l'échelle : trois `.piment` se succédaient dans ce fichier, et seule
   la dernière comptait. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- classement ---------- */
.band .rang{
  font:600 13px/1 var(--police-mono);color:var(--muted);
  min-width:26px;text-align:right;
}
.band.moi{border-left-color:var(--ink);background:var(--line-soft)}
.band.moi .rang,.band.moi .comp{color:var(--ink)}
.band.podium .rang{color:var(--ink);font-size:16px}

button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}


/* ---------- concours : nouveauté et attente ---------- */
:root{ --stamp:#c2321e; }

/* Le badge est encadré de rouge et rien d'autre sur la page ne l'est :
   il attire l'œil parce qu'il est seul de son espèce. */
.neuf{
  display:inline-block;vertical-align:1px;margin-left:8px;
  font:700 9.5px/1 var(--police);letter-spacing:.1em;
  color:var(--stamp);border:1.5px solid var(--stamp);border-radius:5px;
  padding:3px 5px;
}
.attente{
  display:inline-grid;place-items:center;min-width:120px;
  font:500 11.5px/1 var(--police);color:var(--muted);
  border:1px dashed var(--line);border-radius:9px;padding:8px 12px;
  white-space:nowrap;
}
/* « En projet » est plus lointain qu'« ouverture prochaine » : le trait
   plus discret le dit sans avoir à le lire. */
.attente.projet{opacity:.6;border-style:dotted}

/* ---------- pseudo cliquable ---------- */
a.qui{text-decoration:none;padding:6px 8px;border-radius:8px}
a.qui:hover{background:var(--line-soft)}
a.qui.actif{background:var(--line-soft);color:var(--ink)}

/* ---------- page Mon compte ---------- */
/* LA CONSOLE D'ADMINISTRATION — une porte par section.
   Tout tenait sur une page qu'il fallait dérouler entièrement pour
   atteindre le dernier bouton. Les portes se rangent en grille : deux
   colonnes sur téléphone, autant que la place le permet ensuite. */
/* DEUX COLONNES, TROIS AU LARGE — un compte fixe, pas un `auto-fit` :
   laissé libre, il découpait neuf colonnes étroites sur un écran de
   bureau et les titres passaient sous leur propre compteur. */
.console{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;padding-bottom:14px;
}
@media (min-width:760px){
  .console{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.porte{
  position:relative;display:block;text-decoration:none;
  border:1px solid var(--line);border-radius:11px;padding:12px 13px;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Titre et compteur sur la même ligne, le compteur poussé au bord :
   dans le flux, il ne peut plus se faire recouvrir. */
.porte-tete{display:flex;align-items:center;gap:6px}
.porte b{
  /* Le titre CÈDE avant le compteur : un mot trop long pour la porte
     déborde de sa boîte et vient peindre par-dessus le chiffre. Il se
     tronque donc — l'indicateur, lui, ne se tronque jamais. */
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 15px/1.2 var(--police);color:var(--text-primary);
}
/* La description porte SON nom : visée par `.porte span`, elle
   l'emportait aussi sur la ligne de titre — un sélecteur à un élément
   pèse plus lourd qu'une classe seule, et le compteur retombait sous
   le titre au lieu de se ranger à côté. */
.porte-detail{
  display:block;margin-top:4px;font-size:12.5px;line-height:1.35;
  color:var(--muted);
}
@media (hover:hover){
  .porte:hover{border-color:var(--border-green);box-shadow:var(--glow-green)}
}
/* Ce qui attend une main humaine, compté SUR la porte : sans lui, il
   faudrait ouvrir chaque section pour savoir qu'il n'y a rien à y
   faire. Rouge quand c'est un défaut, vert quand c'est du travail. */
.porte .attente{
  flex:none;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--police-mono);font-style:normal;
  background:rgba(166,255,0,.12);color:var(--chili-green);
  border:1px solid var(--border-green);
}
.porte .attente.alerte{
  background:rgba(255,42,26,.10);color:var(--heat-red);
  border-color:var(--border-red);
}

.chiffres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;
  padding-bottom:14px;
}
.chiffres div{
  border:1px solid var(--line);border-radius:11px;padding:11px 12px;
}
.chiffres b{
  display:flex;align-items:center;gap:6px;
  font:700 20px/1.1 var(--police-mono);letter-spacing:-.02em;
}
.chiffres b .chilli{font-size:16px}
.chiffres span{
  display:block;margin-top:4px;font-size:13px;color:var(--muted);
}
.reglage{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;padding-bottom:14px}
.reglage.colonne{flex-direction:column;align-items:stretch;max-width:340px}
.reglage label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
.reglage input{
  font:400 16px/1.2 var(--police);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:180px;
}
.reglage input:focus{outline:2px solid var(--chili-green);outline-offset:1px}
.avis.alerte{
  background:color-mix(in srgb,var(--stamp) 12%,var(--bg));
  color:var(--stamp);font-weight:500;
}

/* ---------- classement : colonne de tri mise en avant ---------- */


/* ---------- lien de réinitialisation, à copier ---------- */
.lien{
  display:inline-block;margin-top:6px;word-break:break-all;
  font:400 12px/1.4 var(--police-mono);color:var(--ink);
}

/* ---------- globe des compétitions internationales ---------- */
.globe{font-size:13px;line-height:1;margin-left:6px;flex:none}
a.qui{display:inline-flex;align-items:center;gap:0}
a.qui .drapeau,a.qui .globe{margin-left:6px}
.entete h1 .drapeau{width:20px;height:13.7px;margin-left:9px;vertical-align:-1px}

/* ---------- listes déroulantes des réglages ---------- */
.reglage select{
  font:400 16px/1.2 var(--police);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;
  min-width:180px;-webkit-appearance:none;appearance:none;
}

/* La page Mon compte réutilise les trois menus de la date de naissance. */
.reglage .naissance{border:0;padding:0;margin:0;flex:1 1 260px}
.reglage .naissance legend{font-size:14px;font-weight:600;padding:0;margin-bottom:5px}
.reglage .trio{display:flex;gap:8px}
.reglage .trio select{flex:1 1 0;min-width:0}
.reglage .aide{font-weight:400;font-size:13px;color:var(--muted)}
.reglage select:focus{outline:2px solid var(--chili-green);outline-offset:1px}

/* ---------- échéance ---------- */


/* ---------- deux actions sur une même bande ---------- */
.duo-boutons{display:flex;gap:6px;margin-left:auto;flex:0 0 auto}

/* ---------- indice social ---------- */
.joueurs{color:var(--muted)}


/* ---------- choix du concours ---------- */
/* Ce qui se pousse au bord droit d'une ligne .sous — le compteur de
   membres du classement, quelle que soit la vue. */
.sous .pousse-droite{margin-left:auto}
/* Le sélecteur de semaine du Race — flèches et menu déroulant — se cale
   au bord GAUCHE de la ligne, comme le menu déroulant du concours. Sans
   cette règle, le bouton se centrait dans sa case : `.entete.en-ligne
   .outils` pousse À DROITE (margin-left:auto) tous les blocs `.outils`
   du bandeau (les onglets Race/Mois/Concours), donc aussi celui-ci qui
   les partage — l'espace se répartissait alors des deux côtés et le
   bouton finissait AU MILIEU. La spécificité (0,3,1) l'emporte
   franchement sur le sélecteur parent (0,2,1). */
.entete.en-ligne .sous .outils-race{margin-left:0;margin-right:auto}
/* Dans la ligne .sous, le choix du concours occupe la place de la
   période : ni pleine largeur ni coussin haut — il partage la ligne
   avec les boutons Tous/Pals. */
.sous .choix-concours{width:auto;padding-top:0;flex:0 1 auto;min-width:0}
/* HAUTEUR FIXE, PAS UN REMBOURRAGE : chaque navigateur rend un <select>
   à sa façon, et la ligne du concours dépassait celle de Race/Mois sur
   téléphone — le tableau partait plus bas. À hauteur imposée, la ligne
   mesure pareil sur les trois vues, sur tous les appareils, et le menu
   se centre de lui-même sur la rangée. */
.sous .choix-concours select{height:32px;padding-top:0;padding-bottom:0}
/* La ligne elle-même ne descend jamais sous la hauteur d'un bouton :
   les trois vues partagent le même gabarit vertical. */
.entete.en-ligne .sous{min-height:36px}
@media (max-width:520px){
  .entete.en-ligne .sous{min-height:32px}
}
.choix-concours{width:100%;padding-top:10px;display:flex;gap:8px}
.choix-concours select{
  font:500 14px/1.2 var(--police);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:10px 34px 10px 12px;
  cursor:pointer;width:100%;max-width:320px;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
}
.choix-concours select:focus{outline:2px solid var(--ink);outline-offset:1px}

/* ---------- en-tête du tableau de classement ---------- */
/* L'en-tête du tableau n'est PAS une carte : il hérite de .band pour
   aligner ses colonnes, mais il doit en perdre tous les attributs de
   surface — sinon la ligne de titres flotte comme une ligne de données. */
.band.tete{
  background:none;border:0;
  box-shadow:none;backdrop-filter:none;
  border-radius:0;padding:4px 12px 8px;margin-bottom:6px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.band.tete .nom{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.band.tete .rang{font-size:12px}
.band.tete .gain{
  font:600 11px/1 var(--police);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
}
.band.tete .gain:hover{color:var(--ink)}
.band.tete .gain.tri{color:var(--ink)}
.band.tete .gains .gain + .gain{border-left:0}

/* Un joueur hors classement reste visible, mais visiblement en retrait. */
.band.settled .rang{color:var(--done)}


/* Une grille close ne se remplit plus : son bouton n'a plus à appeler
   l'action, il indique simplement où aller voir. */
/* Grille close : le bouton n'appelle plus l'action, il indique. */
/* Flèche de calendrier neutralisée : la fenêtre de jeu s'arrête là. */
.btn.fleche.passif{opacity:.35;pointer-events:none}

/* Le nom d'un concours est un lien vers ses manches : même encre que
   le texte — le liseré et le bouton disent déjà ce qui est cliquable —
   mais un soulignement au survol pour l'affordance. */
.lien-manches{color:inherit;text-decoration:none}
.lien-manches:hover{text-decoration:underline}

/* ---------- My Pepper Pals ---------- */
/* Les pals s'affichent ligne à ligne (bande une-ligne), points de la
   Race et chillies globaux à droite du pseudo — les puces rondes
   d'avant ne portaient aucun chiffre. */
/* DES COLONNES FIXES, pas un flex libre : « 8 pts » et « 12 pts »
   n'ont pas la même largeur, et les icônes dansaient d'une ligne à
   l'autre. Les points s'alignent à droite de leur colonne (le « pts »
   tombe au même pixel partout). Le PIMENT vit à DROITE du montant, au
   bord droit fixe de sa colonne — c'est lui qui fait la colonne — et
   le montant le précède à 3 px. Entre points et chillies : 60 px, à
   la demande. */
.pal-stats{display:flex;align-items:center}
.pal-stats .points-vif{width:58px;text-align:right}
.pal-stats .gain-vif{
  width:60px;margin-left:60px;
  display:inline-flex;justify-content:flex-end;align-items:center;gap:3px;
}
.pal-stats form{display:inline-flex;margin-left:8px}
.retirer{
  border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;border-radius:999px;
}
.retirer:hover{color:var(--ink)}
/* Le bouton-lien des lignes d'admin : un POST qui doit se LIRE comme
   les liens « annuler » voisins — même corps que la ligne, souligné
   comme un lien, pas un pictogramme de 15 px dans une ligne de 13. */
.lien-retirer{
  font:inherit;padding:0;text-decoration:underline;
  text-underline-offset:2px;
}
/* La liste qui se filtre au fil de la frappe, posée SOUS la boîte :
   position absolue pour ne pas pousser le reste de la page. */
.pals-boite{position:relative}
.pals-liste{
  position:absolute;top:calc(100% + 4px);left:0;min-width:220px;z-index:30;
  margin:0;padding:4px;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  max-height:230px;overflow:auto;box-shadow:var(--carte-ombre);
}
.pals-liste li{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:14px}
.pals-liste li:hover{background:var(--line-soft)}
.cta.passif{
  background:transparent;border-color:var(--line);color:var(--muted);
  box-shadow:none;
}
@media (hover:hover){
  .cta.passif:hover{border-color:var(--muted);color:var(--ink);box-shadow:none}
}

.chilli{font-size:12px;line-height:1;flex:none}

/* Deux piments doivent se lire comme un seul signe : côte à côte et
   serrés. Sans cela, l'emoji retombe à la ligne et le palier « Spicy »
   devient deux fois plus haut que « Mild ». */
/* Deux piments doivent se lire comme un seul signe. Le resserrement
   laisse une chasse vide à droite du dernier glyphe : la marge négative
   la reprend, sans quoi le groupe paraît décalé vers la gauche. */


/* ---------- chaleur d'une grille ---------- */
/* Le liseré de gauche existe déjà pour l'état ; l'urgence ajoute une
   chaleur en fond, très basse, qui ne masque rien. */
.band.brulant{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--heat-red) 12%, var(--bg-carte)), var(--bg-carte));
  border-color:color-mix(in srgb, var(--heat-red) 30%, transparent);
}
.band.chaud .feu{opacity:.85}

/* ---------- échelle de Scoville ---------- */

.echelle .palier-actuel{display:flex;align-items:center;gap:14px;padding:4px 12px 14px}
.echelle .palier.gros{font-size:35px;line-height:1}
.echelle .palier-actuel b{display:block;font-size:20px;letter-spacing:-.01em}
.echelle .total{
  font:700 11.5px/1.4 var(--police-mono);color:var(--text-primary);
  display:inline-flex;align-items:center;gap:4px;
}
.marches{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 4px}
.marche{
  flex:1 1 96px;border:1px solid var(--line);border-radius:11px;
  padding:9px 8px;text-align:center;opacity:.45;
}
.marche .g{display:block;font-size:18px;line-height:1.2}
.marche .n{display:block;font-size:13px;font-weight:600;margin-top:3px}
.marche .s{
  display:block;font:700 10px/1.3 var(--police-mono);color:var(--text-primary);
}
.marche.atteinte{opacity:1}
.marche.courante{
  border-color:color-mix(in srgb, var(--heat-orange) 55%, transparent);
  background:color-mix(in srgb, var(--heat-orange) 12%, transparent);
}

/* ---------- badges ---------- */
.band.badge{align-items:center}
.ecusson{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;font-size:19px;
  border:1px solid var(--line);opacity:.4;
}
.band.badge.acquis .ecusson{
  opacity:1;
  border-color:color-mix(in srgb, var(--heat-orange) 55%, transparent);
  background:color-mix(in srgb, var(--heat-orange) 12%, transparent);
}
.band.badge.acquis .nom{color:var(--ink)}
.band.badge:not(.acquis) .nom{color:var(--muted)}



/* Le palier de Scoville dans les classements : après le drapeau, avant
   les chiffres. Un glyphe suffit — le nom du palier alourdirait chaque
   ligne pour une information que la page Badges donne déjà. */
.hotness{font-size:12px;line-height:1;margin-left:6px;flex:none}

/* =====================================================================
   TÉLÉPHONE — un seul bloc, et c'est délibéré.

   Ces règles étaient dispersées en cinq blocs identiques, chacun ajouté
   au fil des correctifs. L'un d'eux annulait silencieusement une
   réduction faite plus haut : le bandeau restait haut sur téléphone
   alors qu'il maigrissait sur ordinateur, et rien ne le laissait voir en
   lisant le fichier. Un seul bloc, ordonné, supprime toute cette classe
   de bug.
   ===================================================================== */
@media (max-width:540px){
  /* Le bloc Heat en trois zones ne tient pas sur un écran étroit : le
     cadran et les chiffres restent côte à côte, l'écusson passe dessous
     et s'aligne à droite plutôt que d'occuper toute la largeur. */

  .progression{width:132px;gap:5px}
  /* Sur téléphone, tout ne tient pas sur une ligne. Plutôt que de
     laisser déborder — les boutons finissaient hors de l'écran — le
     bandeau passe sur deux étages : les compteurs et les actions en
     haut, les onglets en dessous. */
  .bandeau-in{padding:0 10px}
  /* Cette règle annulait toutes les réductions de hauteur faites plus
     haut : elle est postérieure ET plus spécifique, elle gagnait donc
     systématiquement — et seulement sur téléphone, ce qui rendait le
     défaut invisible en test sur ordinateur. */
  .bandeau .droite{padding:3px 0 4px}
  .onglets{overflow-x:auto;scrollbar-width:none;justify-content:space-between}
  .onglets::-webkit-scrollbar{display:none}
  .bandeau a{padding:11px 6px;font-size:14px}
  .ligne-compte{font-size:11.5px;gap:10px}
  .compte{padding:3px 8px}
  .identite .qui{font-size:14px}
  .entete h1{font-size:23px}
  .band{row-gap:6px;padding:9px 11px}
  .comp{font-size:14.5px}
  .meta{font-size:12px}
  .cote{font-size:12px}
  .gain{min-width:56px}
  .gains .gain + .gain{min-width:68px}
  /* Le bouton passe sur sa propre ligne quand la bande se replie :
     collé à droite, il paraissait décalé. Il occupe donc toute la
     largeur, son libellé se retrouve centré. */
  .band > .cta,
  .band > .attente,
  .duo-boutons{margin-left:0;width:100%}
  .duo-boutons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .band > .gains{margin-left:0;justify-content:flex-start}
}
/* Tout mouvement s'arrête si le système le demande. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .band.brulant{animation:none}
}

/* =====================================================================
   ÉCHELLE DE SCOVILLE — les teintes

   Une classe par palier, posée sur le glyphe, la marche et le badge. La
   couleur DOUBLE le nom du palier, elle ne le remplace jamais : un
   daltonien lit « Habanero » comme tout le monde.
   ===================================================================== */
.sc-bell    {color:var(--sc-bell)}
.sc-jalapeno{color:var(--sc-jalapeno)}
.sc-cayenne {color:var(--sc-cayenne)}
.sc-habanero{color:var(--sc-habanero)}
.sc-ghost   {color:var(--sc-ghost)}
.sc-reaper  {color:var(--sc-reaper)}
.sc-pepperx {color:var(--sc-pepperx)}

.marche.sc-bell.courante    {border-color:var(--sc-bell)}
.marche.sc-jalapeno.courante{border-color:var(--sc-jalapeno)}
.marche.sc-cayenne.courante {border-color:var(--sc-cayenne)}
.marche.sc-habanero.courante{border-color:var(--sc-habanero)}
.marche.sc-ghost.courante   {border-color:var(--sc-ghost)}
.marche.sc-reaper.courante  {border-color:var(--sc-reaper)}
.marche.sc-pepperx.courante {border-color:var(--sc-pepperx)}
.marche.courante{
  background:color-mix(in srgb, currentColor 10%, transparent);
}
.marche .n{color:var(--ink)}
.marche.atteinte .g{filter:none}

/* La jauge de progression suit la montée en chaleur : vert, jaune,
   orange, rouge. C'est la même échelle que les paliers, en continu. */
.progression .rail i{background:var(--echelle-heat)}

/* =====================================================================
   MICRO-ANIMATIONS

   Une seule, et volontairement lente : la respiration de la chaleur sur
   les éléments urgents. Tout le reste se contente d'une transition.
   ===================================================================== */
/* « Petite respiration sur la heat » : une variation d'opacité du
   liseré, pas un halo qui pulse. Sur une grille brûlante seulement. */
@keyframes respiration{
  0%,100%{opacity:1}
  50%    {opacity:.72}
}
.band.brulant{border-left-color:var(--heat-red)}
.band.brulant::before{
  content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;
  background:var(--heat-red);animation:respiration 4.5s ease-in-out infinite;
}
.band.brulant{position:relative}

/* Accessibilité : le focus reste toujours visible, et il est vert —
   la seule couleur qui ne sert à rien d'autre au clavier. */
:focus-visible{
  outline:2px solid var(--chili-green);outline-offset:2px;border-radius:6px;
}

/* =====================================================================
   HOT ONES — la page d'accueil

   Trois blocs propres à cette page : le cadran de chaleur, le Chilito
   du jour, le podium des carrières. Ils réutilisent les jetons et le
   modèle de carte du reste du site — aucune seconde couche d'interface.
   ===================================================================== */


/* ---------- cartes d'état, à pastille ronde ---------- */
.band.etat{align-items:center;gap:14px}
.pastille{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:20px;
  border:1px solid var(--line);
}
.pastille.vert{
  border-color:color-mix(in srgb, var(--chili-green) 45%, transparent);
  background:color-mix(in srgb, var(--chili-green) 9%, transparent);
}
.pastille.rouge{
  border-color:color-mix(in srgb, var(--heat-red) 45%, transparent);
  background:color-mix(in srgb, var(--heat-red) 9%, transparent);
}
/* Le titre reste BLANC : le vert est réservé aux titres de section et
   aux valeurs. En le mettant sur le titre, on perdait la hiérarchie. */
.band.etat .nom{font-size:16.5px;color:var(--ink)}
.band.etat .meta{color:var(--muted)}

/* ---------- la carte, version pleine largeur ---------- */
/* LE FOND DE VILLE sur « Hot or Not ? », le panneau signature de l'accueil.

   Même traitement que sur le coupon : l'image sous les dégradés, un
   voile sombre par-dessus. Elle est réservée aux DEUX panneaux qui
   parlent de progression — l'étendre à toutes les cartes ferait du
   bruit et rendrait les listes illisibles. */
.carte-heat.ville{
  background:
    linear-gradient(135deg, rgba(11,14,12,.72), rgba(5,7,6,.82)),
    url("/static/da/fond-progression.webp") center / cover no-repeat,
    var(--bg-carte-plate);
}
.carte-heat{
  background:var(--bg-carte-plate);
  border:1px solid var(--line);
  border-radius:var(--carte-rayon);
  box-shadow:var(--carte-ombre);
  backdrop-filter:blur(12px);
  padding:14px 16px 16px;margin-bottom:12px;
}

/* ---------- le cadran ----------
   Un anneau en dégradé conique : la part parcourue prend la couleur du
   palier, le reste s'éteint. Le trou central porte le chiffre. */
/* Trois parties, et elles ne se replient jamais : la jauge à gauche, le
   palier au centre, l'écusson de niveau à droite. Un flex avec repli
   renvoyait l'écusson sur sa propre ligne dès que la place manquait, et
   il débordait de la carte. Une grille tient les trois colonnes. */
.heat-corps{
  display:grid;grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;gap:14px;
}
/* L'anneau parcourt TOUTE l'échelle de chaleur — vert, ambre, rouge —
   et pas la seule couleur du palier atteint : c'est une montée en
   température, elle doit se voir comme telle. La portion non parcourue
   s'éteint en gris.

   Le masque conique découpe l'arc ; le dégradé, lui, reste linéaire sur
   la couronne. Deux dégradés superposés, l'un pour la couleur, l'autre
   pour la découpe. */
.cadran{
  flex:none;width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:conic-gradient(from 0deg,
    color-mix(in srgb, var(--line) 85%, transparent) 0deg 360deg);
}
/* Le point zéro de l'arc est à MIDI (`from 0deg`) : à -90deg, la
   jauge partait de neuf heures, comme une montre couchée. */
.cadran::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    var(--sc-bell) 0deg, var(--sc-jalapeno) 60deg, var(--sc-cayenne) 150deg,
    var(--sc-habanero) 240deg, var(--sc-reaper) 340deg);
  mask-image:conic-gradient(from 0deg,
    #000 0deg calc(var(--part) * 3.6deg), transparent calc(var(--part) * 3.6deg));
  -webkit-mask-image:conic-gradient(from 0deg,
    #000 0deg calc(var(--part) * 3.6deg), transparent calc(var(--part) * 3.6deg));
}
.cadran-fond{
  position:relative;z-index:1;
  width:94px;height:94px;border-radius:50%;
  background:var(--bg-secondaire);
  display:grid;place-items:center;align-content:center;gap:1px;
  box-shadow:inset 0 0 26px color-mix(in srgb, currentColor 14%, transparent);
}
/* LE NOMBRE TIENT LE CENTRE DE LA ROUE, et rien ne l'en écarte.
   Empilé avec son unité, le groupe était centré — donc le nombre
   lui-même se retrouvait une demi-ligne au-dessus du centre. L'unité
   se pose désormais SOUS lui sans peser dans le calcul : son décalage
   vaut la moitié de la hauteur du nombre, soit sa taille de police. */
.cadran-valeur{
  grid-area:1 / 1;
  font:700 21px/1 var(--police-mono);color:var(--text-primary);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.cadran-unite{
  position:absolute;left:0;right:0;text-align:center;
  top:calc(50% + 12px);
  font:400 9.5px/1 var(--police-mono);color:var(--muted);
}

/* Le bloc central est CENTRÉ. Aligné à gauche, il partait du bord du
   cadran et laissait un vide à droite jusqu'à l'écusson : l'ensemble
   penchait. Centré, les trois éléments — cadran, texte, écusson —
   trouvent leur équilibre. */
.heat-details{min-width:0;text-align:center}
.heat-nom{
  font:800 clamp(12px, 3.6vw, 16px)/1.2 var(--police-titre);letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:9px;
}
/* Étiquette au-dessus, valeur en dessous : c'est la disposition qui
   permet de comparer deux mesures d'un seul regard. */
.heat-mesure{margin-bottom:7px}
.heat-etiquette{
  display:block;font:400 11px/1.3 var(--police);color:var(--muted);
}
.heat-mesure b{
  display:block;font:700 19px/1.15 var(--police);
  font-variant-numeric:tabular-nums;
}
.heat-mesure .sur{font:400 12px/1 var(--police-mono);color:var(--done);margin-left:3px}
.heat-reste{font:700 10.5px/1.4 var(--police-mono);color:var(--text-primary);margin-top:2px}
.vert{color:var(--chili-green)}

/* L'ÉCUSSON DE NIVEAU — le dessin fourni par la direction artistique.

   Il remplace l'hexagone taillé au clip-path : celui-ci ne savait que
   découper une forme pleine, là où le dessin porte son cadre en dégradé
   de chaleur et sa trame alvéolée.

   Une seule règle sert tous les écrans : Hot Ones, coupon, badges. */
.ecu-niveau{width:70px;text-align:center}
.ecu-glyphe{
  display:grid;place-items:center;width:62px;aspect-ratio:1;margin:0 auto 5px;
  font-size:19px;letter-spacing:-.16em;
  background:url("/static/da/hexagone-niveau.svg") center / contain no-repeat;
  border:0;
}
.ecu-ruban{
  display:inline-block;font:600 9.5px/1 var(--police);
  text-transform:uppercase;letter-spacing:.08em;
  padding:5px 8px;border-radius:6px;
  border:1px solid color-mix(in srgb, var(--chili-green) 45%, transparent);
  color:var(--chili-green);
}

/* ---------- le Chilito du jour ----------
   Une BANDE de grille comme les autres : seul le badge ×2 la
   distingue, à la place de l'heure de clôture. */
/* Toujours rouge : le Chilito est l'enjeu du jour, pas un palier. Le
   teinter selon le joueur donnait un encadré vert sur une action
   « brûlante », ce qui dit exactement le contraire. */
.multiplicateur{
  display:grid;justify-items:center;gap:1px;color:var(--heat-red);
  padding:8px 14px;border-radius:11px;
  border:1px solid color-mix(in srgb, var(--heat-red) 50%, transparent);
  background:color-mix(in srgb, var(--heat-red) 8%, transparent);
}
.multiplicateur em{
  font:600 8.5px/1 var(--police);font-style:normal;
  text-transform:uppercase;letter-spacing:.09em;color:currentColor;opacity:.85;
}
.multiplicateur b{
  font:700 22px/1.1 var(--police);color:currentColor;
}
/* Le badge compact, à la taille d'une ligne de bande. La colonne qui
   le porte s'ouvre : les 95 px à découpe fermée sont faits pour du
   texte, pas pour un encadré. */
.band.deux-lignes .etat-manche:has(.multiplicateur){
  overflow:visible;width:auto;min-width:95px;flex-basis:auto;
  display:inline-flex;justify-content:center;
}
/* « ×2 » SEUL, le plus gros possible dans les 40 px de haut et les
   95 px du bouton au-dessus : la colonne de droite ne fait qu'une. */
.multiplicateur.mini{
  width:95px;height:40px;
  display:grid;place-items:center;
  padding:0 9px;border-radius:8px;
}
.multiplicateur.mini b{font-size:32px;line-height:1}
/* Le match s'affiche EN ENTIER, une équipe par ligne et sans tiret —
   les deux lignes que la hauteur du badge offre. `flex-start` est
   posé ICI, sur le sélecteur le plus fort : le `align-items:center`
   générique de `.ligne .gauche` centrait les équipes en colonne. Les
   deux noms partent du même bord gauche que la compétition. */
.chilito-bande .ligne.meta .gauche{
  white-space:normal;overflow:visible;line-height:1.35;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
}

/* ---------- le podium ---------- */
/* Trois colonnes et un chevron : le podium se lit comme un podium. */
.podium{
  list-style:none;display:grid;grid-template-columns:repeat(3, 1fr) auto;
  align-items:center;gap:6px;
}
/* Le jeton rond a disparu : la hotness, à côté du pseudo, dit déjà le
   palier — et sur trois colonnes, chaque pixel de largeur compte. */
.podium li{
  display:grid;grid-template-columns:auto minmax(0, 1fr);
  grid-template-rows:auto auto;align-items:center;gap:0 7px;min-width:0;
}
.place-podium{
  grid-row:1 / 3;
  font:600 11px/1 var(--police-mono);color:var(--muted);
}
/* Pseudo, drapeau, hotness — comme une ligne de classement. Seul le
   PSEUDO se tronque quand la place manque : une icône coupée en deux
   ne dit plus rien. */
.podium-nom{
  font:600 12px/1.2 var(--police);color:var(--ink);
  display:inline-flex;align-items:center;min-width:0;
}
.podium-nom .pseudo-podium{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.podium-nom .drapeau, .podium-nom .hotness{flex:none}
.podium-nom .hotness{margin-left:4px}
/* Le piment SUIT le montant, collé à lui — même ordre que la liste
   des pals : un nombre de chillies sans son icône se lisait comme un
   score quelconque. */
.podium-valeur{
  font:700 11px/1.2 var(--police-mono);color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-flex;align-items:center;gap:3px;
}
.lien-podium{
  text-decoration:none;color:var(--chili-green);
  font:400 20px/1 var(--police);padding:0 2px;
}
/* Les deux sous-sections du bloc — « Général », « My Pepper Pals » —
   dans une seule carte : une étiquette discrète au-dessus de chaque
   podium, un espace entre les deux groupes. */
.podium-sous{
  font:600 10.5px/1 var(--police);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px;
}
.podium-groupe + .podium-groupe{margin-top:12px}

/* =====================================================================
   CLASSEMENTS

   Une GRILLE à trois colonnes, pas un flex : le flex laissait les
   éléments se replier dès que la largeur manquait, et une ligne de
   classement se retrouvait sur trois étages, rang à droite, nom au
   milieu, chiffres en dessous. Une grille ne se replie jamais.

   L'en-tête et les lignes partagent exactement les mêmes colonnes :
   c'est ce qui garantit que « POINTS » tombe au-dessus des points.
   ===================================================================== */
.rangee-classement{
  display:grid;
  grid-template-columns:26px minmax(0, 1fr) auto;
  align-items:center;gap:10px;
  padding:7px 12px;margin-bottom:4px;
  box-shadow:none;backdrop-filter:none;
  background:color-mix(in srgb, var(--bg-secondaire) 72%, transparent);
}
.rangee-classement .info{min-width:0}
/* LA BARRE DE SÉPARATION SE POSAIT SUR LE MONTANT, pas sur la colonne.
   Les deux pistes étaient bien fixes, mais `justify-items:end` réduisait
   chaque cellule à son contenu : la barre, portée par la cellule des
   chillies, suivait donc la largeur du nombre. MESURÉ sur trois lignes
   du même tableau — 0, 1 284, 96 540 chillies — elle tombait à 324,2,
   292,9 puis 285 px. Trente-neuf pixels d'écart, sur ce qui doit être
   un trait de colonne.

   Les cellules occupent désormais TOUTE leur piste : la barre se pose
   sur la frontière entre les deux, au même pixel pour tout le monde.
   Le texte, lui, reste calé à droite dans sa cellule.

   Les points s'écartent de vingt pixels de cette barre. Sans cela ils
   la touchaient, et dans l'en-tête « POINTS » et « CHILLIES » se
   chevauchaient franchement — les deux mots débordent de pistes taillées
   pour des nombres. */
.rangee-classement .gains{
  display:grid;grid-template-columns:78px 82px;
  align-items:center;justify-items:stretch;gap:0;
}
.rangee-classement .gain{min-width:0;justify-content:flex-end}
.rangee-classement .gains > .gain:first-child{padding-right:20px}
.rangee-classement .gains .gain + .gain{
  border-left:1px solid var(--line);margin-left:0;padding-left:10px;
  padding-right:0;min-width:0;
}

/* L'en-tête n'est pas une ligne de données : il perd toute surface —
   et sa barre grise avec, comme partout ailleurs. */
.band.tete.rangee-classement{
  background:none;box-shadow:none;border:0;border-radius:0;
  padding:2px 12px 7px;margin-bottom:6px;
}

/* Ma ligne : liseré vert et fond à peine relevé. Seul repère utile pour
   se retrouver au milieu de cent lignes. */
.rangee-classement.moi{
  background:color-mix(in srgb, var(--chili-green) 8%, transparent);
  border-color:color-mix(in srgb, var(--chili-green) 28%, transparent);
}
.rangee-classement.podium{border-left-color:var(--heat-orange)}
.rangee-classement .rang{font:600 13px/1 var(--police-mono)}
.rangee-classement .comp{gap:0}

@media (max-width:540px){
  /* Les trois colonnes restent, elles rétrécissent. C'est ce qui
     empêche l'écusson de déborder de la carte. */
  .heat-corps{gap:10px}
  .cadran{width:90px;height:90px}
  .cadran-fond{width:76px;height:76px}
  .cadran-valeur{font-size:16px}
  .cadran-unite{font-size:9.5px;top:calc(50% + 10px)}
  .heat-nom{font-size:15px;margin-bottom:5px}
  .ecu-niveau{width:56px}
  .ecu-glyphe{width:54px;font-size:17px}
  .ecu-ruban{font-size:9px;padding:4px 5px;letter-spacing:.04em}
  .multiplicateur{font-size:18px;padding:8px 10px}
  .rangee-classement{grid-template-columns:22px minmax(0, 1fr) auto;gap:8px;padding:6px 10px}
  .rangee-classement .gains{grid-template-columns:46px 70px}
  .rangee-classement .gain{font-size:13px}
}

/* =====================================================================
   LES PIMENTS DESSINÉS

   Ils prennent la couleur de leur palier par currentColor, donc une
   seule règle suffit pour les sept. Le halo est dans le SVG lui-même —
   il suit le tracé, ce qu'une ombre CSS ne saurait pas faire.
   ===================================================================== */
.hotness{display:inline-flex;align-items:center;margin-left:6px}
.progression .glyphe{display:inline-flex}
.ecu-glyphe .piment{display:block}

/* =====================================================================
   LE BLOOM

   Réservé à ce qui porte la chaleur : le cadran, les nombres de rang,
   le multiplicateur, l'onglet actif. Partout ailleurs, il brouillerait
   la lecture — c'est ce que voulait dire « éviter trop de glow ».
   ===================================================================== */
/* Le glow, dosé. « Trop de glow » figure dans la liste des choses à ne
   surtout pas faire ; « glow très léger » dans celle des animations
   permises. Il ne subsiste donc que sur trois éléments, et à moitié de
   l'intensité précédente : le cadran, sa valeur, et le multiplicateur —
   les seuls qui représentent littéralement de la chaleur. */
.cadran{
  box-shadow:0 0 22px -10px color-mix(in srgb, currentColor 34%, transparent);
}
.multiplicateur{
  box-shadow:0 0 14px -8px color-mix(in srgb, var(--heat-red) 32%, transparent);
}
/* `box-shadow` dessinerait un halo carré autour d'une image
   hexagonale : `drop-shadow` suit la silhouette réelle. */
.ecu-glyphe{
  filter:drop-shadow(0 0 6px color-mix(in srgb, currentColor 28%, transparent));
}

/* ---------- page de règlement ---------- */
.regle{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:10px}
.regle b{color:var(--ink);font-weight:600}
.regle.petite{font-size:13px;color:var(--done)}

/* ---------- icônes dessinées ---------- */
.icone{display:block;flex:none;overflow:visible}
.pastille .icone{
  filter:drop-shadow(0 0 6px color-mix(in srgb, currentColor 28%, transparent));
}
.pastille.rouge{color:var(--heat-red)}
.pastille.vert{color:var(--chili-green)}
/* UN PALIER TIENT SUR UNE SEULE LIGNE.

   Cayenne pèse deux piments, Habanero trois, le Reaper deux flammes :
   dans un écusson étroit, la suite se coupait et le palier s'affichait
   sur deux lignes — deux piments au-dessus d'un troisième. C'est un
   seul signe, il ne se coupe pas. `flex:none` va avec : pressé entre
   un pseudo et un montant, le glyphe cédait sa largeur avant le texte,
   ce qui revenait au même. */
.piment{
  display:inline-flex;align-items:center;line-height:1;
  white-space:nowrap;flex:none;
  font-size:var(--piment-taille, 1em);
}

/* =====================================================================
   HOT ONES — TENIR SUR UN ÉCRAN

   La page doit se lire d'un seul coup d'œil sur téléphone : c'est là
   qu'on décide de jouer ou pas. Tout est resserré d'un cran, sans
   descendre sous les tailles de texte lisibles — « éviter les textes
   trop petits » reste la consigne.
   ===================================================================== */
@media (max-width:540px){
  .page{padding-bottom:6px}
  /* Une section sans contenu ne doit pas peser : elle garde sa marge
     alors qu'elle est vide. */
  .bloc:empty{display:none;margin:0}
  /* Convention d'espacement sous l'en-tête : rembourrage 5 px, puis
     5 px d'espace avant le premier contenu (2 px de marge + 1 px de
     bordure + 2 px de rembourrage du bloc). Les sections SUIVANTES
     gardent leur marge de 8 px — la convention ne vaut qu'au contact
     du titre de page. */
  .entete{padding:10px 0 5px}
  .entete h1{font-size:22px}
  .accroche{font-size:13px;margin-top:1px}
  .bloc{margin-bottom:8px}
  .titre-bloc{margin:8px 0 4px;font-size:11.5px}
  /* 2 px et non 3 : la boîte de ligne du titre arrondit un pixel de
     plus à cette taille — MESURÉ, pas calculé. */
  .bloc:first-of-type .titre-bloc{margin-top:2px}

  .carte-heat{padding:9px 12px 10px;margin-bottom:7px}

  .heat-corps{gap:10px}
  .cadran{width:78px;height:78px}
  .cadran-fond{width:66px;height:66px}
  .cadran-valeur{font-size:15px}
  .cadran-unite{font-size:9px;top:calc(50% + 9px)}
  .heat-nom{font-size:14.5px;margin-bottom:4px}
  .heat-mesure{margin-bottom:4px}
  .heat-etiquette{font-size:11px}
  .heat-mesure b{font-size:17px}
  .heat-reste{font-size:10.5px}
  .ecu-niveau{width:52px}
  .ecu-glyphe{width:50px;font-size:16px;margin-bottom:3px}
  .ecu-ruban{font-size:8.5px;padding:3px 4px}

  .multiplicateur{padding:6px 10px}
  .multiplicateur b{font-size:19px}
  .multiplicateur em{font-size:8.5px}

  .podium li{gap:0 5px}
  .podium-nom{font-size:12px}
  .podium-valeur{font-size:11px}

  .band{padding:7px 10px;margin-bottom:5px}
  /* Hot Ones : la moitié de 32 px — la marge du titre disparaît, le
     rembourrage de 6 px du grand écran fait le reste (8+2+6=16). */
  .accueil .bloc:not(:first-of-type) .titre-bloc{margin-top:0;padding-top:6px}
  /* Le bandeau perd un cran de plus : c'est le seul élément présent sur
     toutes les pages, chaque pixel gagné profite partout. */
  .bandeau a{padding:9px 6px;font-size:13.5px}
  .bandeau .droite{gap:8px}
  .compte{padding:4px 10px;gap:2px}
  .ligne-compte{font-size:14.5px;gap:10px;grid-template-columns:20px auto}
  .ligne-compte b{font-size:15px}
  .bouton-rond{width:38px;height:38px}
  .bouton-rond svg{width:14px;height:14px}
  .progression{width:120px}
  .progression .rail{height:7px}
  .band.etat{gap:11px}
  .pastille{width:38px;height:38px}
  .cta{padding:8px 12px;font-size:12.5px}
}

/* =====================================================================
   5. ANGLES — le décroché cyberpunk

   Réservé aux panneaux importants : progression, classement, grille
   fermée, profil, badges. Sur chaque mini-carte, il deviendrait un tic.
   ===================================================================== */
.cyber-cut{
  clip-path:polygon(
    0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

/* =====================================================================
   7. TYPOGRAPHIE — micro-labels HUD
   ===================================================================== */
.hud-label, .titre-bloc, .heat-etiquette, .band.tete .nom, .band.tete .gain{
  font-family:var(--police);font-weight:600;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}
.hud-label.vert{color:var(--chili-green)}
.hud-label.rouge{color:var(--heat-red)}

/* =====================================================================
   19. DÉTAILS HUD — points et traits interrompus
   ===================================================================== */
.hud-point{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--chili-green);box-shadow:var(--glow-green);
}

/* =====================================================================
   20. MICRO-ANIMATIONS — discrètes, 160 à 350 ms
   ===================================================================== */
@keyframes heatPulse{
  0%,100%{box-shadow:0 0 6px rgba(166,255,0,.12)}
  50%    {box-shadow:0 0 14px rgba(166,255,0,.22)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Les panneaux importants seuls portent le décroché et l'accent : le
   classement, les badges, l'échelle, le profil. Pas les mini-cartes. */
.carte-heat, .echelle, .band.badge{}
.carte-heat{
  clip-path:polygon(
    0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

/* Ratio 70-12-12-6 : le vert souligne l'actif et le positif, le rouge
   la chaleur et l'échec, l'orange le choix personnel. Aucun des deux
   néons ne s'étale sur des surfaces. */
.compteur.chaud{
  background:rgba(255,42,26,.08);color:var(--heat-red);
  border:1px solid var(--border-red);
}
.pastille.vert{border-color:var(--border-green);background:rgba(166,255,0,.06)}
.pastille.rouge{border-color:var(--border-red);background:rgba(255,42,26,.06)}
.multiplicateur{
  color:var(--heat-red);border-color:var(--border-red);
  background:rgba(255,42,26,.07);box-shadow:none;
}
.rangee-classement.moi{
  background:rgba(166,255,0,.05);border-color:var(--border-green);
}
.rangee-classement.podium{border-left-color:var(--heat-red)}
.cadran{box-shadow:none}
.cadran-valeur{text-shadow:none}

/* Les onglets « Concours » et « Classement » sont des sections chaudes :
   variante rouge du repère de navigation, comme le brief l'autorise. */

/* Le monospace des chiffres reste, mais les micro-labels du classement
   passent en HUD. */
.entete h1{color:var(--text-primary)}
.entete h1 .mot-chaud{
  background:linear-gradient(96deg, var(--heat-orange), var(--heat-red));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Le sélecteur de vue : chips HUD plutôt que pastilles blanches
   pleines, qui juraient sur un fond noir. */
.outils .btn{
  border:1px solid var(--border-soft);background:var(--bg-void);
  color:var(--text-secondary);border-radius:8px;
  transition:border-color var(--transition-fast), color var(--transition-fast);
}
.outils .btn.actif{
  background:rgba(166,255,0,.06);border-color:var(--border-green);
  color:var(--chili-green);box-shadow:var(--glow-green);
}
@media (hover:hover){
  .outils .btn:hover{border-color:var(--border-medium);color:var(--text-primary)}
  .outils .btn.actif:hover{color:var(--chili-green)}
}

/* 23. RESPONSIVE — le HUD ne doit pas densifier sur téléphone. */
@media (max-width:540px){
  .hud-label, .titre-bloc{font-size:11px;letter-spacing:.12em}
  .cyber-cut{clip-path:polygon(
    0 7px, 7px 0, calc(100% - 7px) 0, 100% 7px,
    100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px))}
  body::before{background-size:32px 32px, 32px 32px, 160px 160px}
}

/* =====================================================================
   L'AMBIANCE HUD SUR TOUTES LES PAGES

   Mêmes composants, mêmes classes : on ne crée rien, on restyle. Les
   titres de section reçoivent un tick de départ, les blocs importants
   le décroché angulaire, les chips le vocabulaire HUD.
   ===================================================================== */

/* Le titre de section porte un repère, comme un label d'instrument.
   La pastille vit DANS la ligne de texte (inline-block), pas en
   absolu centré sur la boîte : les rembourrages des titres varient
   d'une page à l'autre (14/8, 6/8, mobile…), et le centrage sur la
   boîte décalait la pastille du texte de −2,8 à +1,2 px MESURÉS. */
.titre-bloc{position:relative;padding-left:0}
.titre-bloc::before{
  content:"";display:inline-block;vertical-align:middle;
  width:4px;height:4px;margin:-1px 8px 0 0;
  background:var(--chili-green);
  box-shadow:var(--glow-green);
}
.entete .titre-bloc::before{display:none}

/* Les chips de la page Concours et du calendrier. */
.attente{
  border:1px solid var(--border-soft);border-radius:8px;
  background:var(--bg-void);color:var(--text-muted);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.attente.prochaine{border-color:var(--border-green);color:var(--chili-green)}

/* Les compteurs de tête de page. */
.compteur{
  border:1px solid var(--border-soft);background:var(--bg-void);
  color:var(--text-secondary);border-radius:8px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}

/* Le fond de ville sur l'échelle de Scoville : c'est le troisième
   panneau qui parle de progression, et le seul de la page Badges. */
.echelle{
  background:
    linear-gradient(135deg, rgba(11,14,12,.76), rgba(5,7,6,.86)),
    url("/static/da/fond-progression.webp") center / cover no-repeat,
    var(--bg-void);
}

/* Les panneaux importants du site : échelle, badges acquis, podium. */
.echelle, .carte-heat, .band.badge.acquis{
  clip-path:polygon(
    0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

/* Les marches de l'échelle deviennent des cellules HUD. */
.marche{
  border-color:var(--border-soft);background:var(--bg-void);
  border-radius:8px;
}
.marche.courante{box-shadow:var(--glow-green)}

/* L'écusson de niveau, partout où il apparaît. */
/* Ce contour intérieur redessinait un CARRÉ autour de l'image
   hexagonale. Le dessin porte déjà son propre cadre. */
.ecu-ruban{border-color:var(--border-green);color:var(--chili-green)}

/* La pastille d'état d'une grille : cercle HUD plutôt que rond plein. */
.pastille{border-width:1px}

/* =====================================================================
   LES DERNIÈRES PAGES

   Compte, administration, badges : mêmes composants, vocabulaire HUD.
   ===================================================================== */

/* Le libellé des badges débordait de sa carte : la ligne était en
   nowrap, héritée des bandes de grille où le texte est court. */
.band.badge .meta,
.band.badge .meta .gauche{white-space:normal;overflow:visible}
.band.badge .ligne{grid-template-columns:minmax(0,1fr) auto}
.band.badge .info{min-width:0}

/* Les cartes de chiffres — Mon compte, Administration — deviennent des
   cellules d'instrument : étiquette en label HUD, valeur en chaleur. */
.chiffres > *{
  background:var(--bg-void);border:1px solid var(--border-soft);
  border-radius:10px;position:relative;
}
.chiffres b{
  font:700 24px/1 var(--police-mono);letter-spacing:-.02em;
  color:var(--text-primary);
}
.chiffres span{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);
}
/* Un tick vert en coin, comme sur les cellules du HUD. */
.chiffres > *::before{
  content:"";position:absolute;left:8px;top:8px;width:3px;height:3px;
  background:var(--chili-green);opacity:.7;
}

/* Le titre de page : le second mot prend la chaleur, partout. */
.entete h1{letter-spacing:-.01em}

/* Le sélecteur de semaine du calendrier et les onglets d'administration
   partagent la charte des chips. */
.outils a{border-radius:8px}

/* Les séparateurs de jour du calendrier. */
.jour{border-color:var(--border-soft)}

.regle .rouge{color:var(--heat-red)}

/* Un joueur non classé : gris, pas vert. Le vert dit la réussite. */
/* Mesuré à 4:1 sur le fond de ville : sous le seuil de 4,5:1. Le gris
   sourd convient sur un aplat, pas sur une image. On monte d'un cran
   dans la palette — c'est toujours du gris, mais lisible. */
.heat-mesure b.pas-classe{
  font-size:16px;color:var(--text-secondary);letter-spacing:-.01em;
}

/* =====================================================================
   LA COUCHE NÉON

   Ce qui manquait n'était pas la couleur mais la LUMIÈRE : les valeurs
   fortes doivent rayonner, les cadres importants doivent être allumés.

   Elle est posée en fin de feuille, après tout le reste, pour être
   lisible d'un bloc et retirable d'un bloc.
   ===================================================================== */

/* ---- les titres ---- */
.entete h1 .mot-chaud{filter:drop-shadow(0 0 12px rgba(255,42,26,.45))}
.titre-bloc{text-shadow:var(--neon-vert)}
.titre-bloc::before{box-shadow:var(--glow-green)}

/* ---- les valeurs fortes ---- */
.heat-nom{text-shadow:0 0 8px currentColor, 0 0 22px currentColor}
.heat-mesure b.vert{text-shadow:var(--neon-vert)}
.multiplicateur b{text-shadow:var(--neon-rouge)}
.level-nom{text-shadow:var(--neon-vert)}
.mot-chaud{text-shadow:0 0 14px rgba(255,122,0,.35)}

/* ---- les cadres allumés ---- */
.cadran{box-shadow:var(--glow-green)}
.pastille.vert{box-shadow:var(--glow-green)}
.pastille.rouge{box-shadow:var(--glow-red)}
.multiplicateur{box-shadow:var(--glow-red)}
.stamp{box-shadow:var(--glow-red)}
.ecu-ruban{box-shadow:var(--glow-green)}
.cta{box-shadow:var(--glow-red)}
.cta.ghost{box-shadow:var(--glow-green)}
.onglet.actif{box-shadow:var(--glow-green)}
.outils .btn.actif{box-shadow:var(--glow-green)}
.band.encours{box-shadow:var(--carte-ombre), var(--glow-orange)}
.rangee-classement.moi{box-shadow:var(--carte-ombre), var(--glow-green)}
.rangee-classement.podium{box-shadow:var(--carte-ombre), var(--glow-red)}

/* ---- la barre de navigation ---- */
.bandeau a.actif::after{
  height:3px;box-shadow:0 0 14px rgba(166,255,0,.75), 0 0 30px rgba(166,255,0,.4);
}

/* ---- la jauge de palier du bandeau ---- */
.progression .rail i{box-shadow:0 0 10px rgba(255,122,0,.55)}

/* ---- une respiration lente sur la carte signature ---- */
@keyframes veille{
  0%,100%{box-shadow:var(--carte-ombre), 0 0 20px -8px rgba(166,255,0,.20)}
  50%    {box-shadow:var(--carte-ombre), 0 0 34px -8px rgba(166,255,0,.34)}
}
.carte-heat.ville{animation:veille 5s ease-in-out infinite}

/* Le mouvement se coupe pour qui le demande. */
@media (prefers-reduced-motion:reduce){
  .carte-heat.ville{animation:none}
}

/* Un concours qu'on peut suivre mais pas encore jouer. */

/* ---------- le bandeau du calendrier, en deux lignes ---------- */
/* Le bouton descend sur la LIGNE DU BAS, à côté de l'enjeu, au lieu
   d'occuper toute la hauteur à droite. Il n'a plus besoin d'être large :
   trois mots suffisent, et la place gagnée revient au nom du concours. */
/* L'emblème et la coche restent À GAUCHE, sur toute la hauteur.

   `flex:1 1 100%` sur le bloc d'information lui faisait réclamer toute
   la largeur : les deux pictogrammes étaient renvoyés sur une ligne à
   eux, et le bandeau retombait à trois lignes. `auto` lui fait prendre
   ce qui reste, à droite d'eux. */
.band.deux-lignes{align-items:center;flex-wrap:nowrap}
.band.deux-lignes .info{flex:1 1 auto;min-width:0}
/* `flex-wrap:wrap` renvoyait le bouton sur une troisième ligne : c'est
   exactement ce qu'on cherchait à supprimer. La ligne ne se coupe plus,
   et c'est l'enjeu qui se tronque au besoin. */
.band.deux-lignes .ligne.meta{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
}
.band.deux-lignes .ligne.meta .gauche{min-width:0;overflow:hidden}
/* `flex:none` est indispensable : sans lui, le bouton hérite de la
   largeur de son conteneur et occupe toute la ligne — mesuré à 334 px
   sur un écran de 390. */
/* Le bouton ferme la ligne du bas, à droite, sous le classement. */
/* LARGEUR FIXE. « Pronostiquer » et « En cours » ne font pas la même
   longueur : à largeur libre, le bouton sautait d'un bandeau à l'autre
   et la colonne de droite ondulait. */
/* Le rembourrage vertical passe de 6 à 3,5 px de chaque côté : cinq
   pixels de moins en hauteur, sans toucher au texte. `min-width` du
   bouton commun vaut 92 px et l'emporterait sur les 85 demandés — on
   le remet à zéro. */
.band.deux-lignes .cta.menu{
  /* 95 px — cinq de moins, à la demande — et la police redescend d'un
     demi-point pour que « Pronostiquer » tienne encore : MESURÉ, le
     mot réclame 92 px de contenu à 12 px. Toujours calé à droite. */
  order:9;margin-left:auto;flex:0 0 95px;width:95px;min-width:0;
  padding:3.5px 2px;font-size:12px;white-space:nowrap;text-align:center;
}
/* LA DROITE EST INVERSÉE : le bouton vit sur la ligne du HAUT (la
   colonne auto de la grille), l'heure — ou le bilan — sur la ligne du
   BAS, poussée au bord droit et centrée sur la largeur du bouton
   au-dessus : les deux colonnes de droite ne font qu'une. */
.band.deux-lignes .ligne.meta .etat-manche{margin-left:auto}
/* Le drapeau collait au libellé de la journée. */
.band.deux-lignes .ligne .manche-meta{color:var(--text-secondary)}
/* LA JOURNÉE CÈDE AVANT LE NOM DU CONCOURS.

   « Primeira Liga » se tronquait en « Primeira … » pendant que
   « 1ère journée » gardait toute sa place. Le nom identifie la grille ;
   la journée n'est qu'un complément. C'est donc elle qui rétrécit, et
   le nombre de joueurs qui disparaît en premier sur un écran étroit. */
/* `flex:1 1 auto` faisait S'ÉTIRER le nom sur toute la place libre et
   repoussait la manche à l'autre bout de la ligne. Il ne prend plus que
   ce qu'il lui faut, et cède seulement quand la place manque. */
/* LE NOM NE SE TRONQUE QU'EN DERNIER RECOURS.

   À `flex:0 1 auto`, le nom et la manche rétrécissaient ensemble et
   l'on obtenait « Tour de Fr… · Étape 1 - … » : deux informations
   mutilées au lieu d'une. Le nom ne cède plus ; c'est la manche qui
   absorbe le manque de place. */
.band.deux-lignes .ligne .nom{flex:0 0 auto;min-width:0;max-width:60%}
/* Les 42 px mesurés entre le nom et la manche venaient du DRAPEAU
   intercalé, qui porte sa propre marge de 6 px, plus l'écart de la
   ligne. On mesure ce qu'on voit : le drapeau est un caractère de
   plus, pas un blanc. */
.band.deux-lignes .sep-manche{flex:none;margin:0 5px;color:var(--text-muted)}
.band.deux-lignes .comp .drapeau{margin-left:5px}
/* La marge de 6 px héritée de l'ancienne disposition s'ajoutait à
   celle du séparateur : c'est elle qui donnait les 11 px mesurés. */
.band.deux-lignes .ligne .manche-meta{
  flex:0 1 auto;min-width:0;margin-left:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* La colonne de droite portait un simple décompte, qu'on masquait au
   plus étroit. Elle porte maintenant le CLASSEMENT une fois la grille
   close — une information qu'on vient chercher. Elle reste donc
   visible, et c'est la journée qui cède si la place manque. */
/* Sur les écrans les plus étroits, la journée passe sous le nom plutôt
   que de le rogner : mieux vaut deux lignes de titre qu'un concours
   qu'on ne reconnaît plus. La hauteur ne bouge pas — la place existe,
   le bouton n'occupe que la ligne du bas. */
@media (max-width:340px){
  .band.deux-lignes .ligne .comp{flex-wrap:wrap;row-gap:0}
  .band.deux-lignes .ligne .manche-meta{
    flex:1 0 100%;margin-left:0;font-size:12.5px;
  }
  /* SOUS 340 px, LA MARQUE NE PEUT PAS GRANDIR. Les deux blocs de bord
     — pseudo à gauche, compteurs et déconnexion à droite — réclament à
     eux seuls presque toute la largeur ; agrandie de moitié comme
     ailleurs, elle passait sous les compteurs. Elle reprend donc sa
     taille d'origine sur ces écrans-là, plutôt que de recouvrir. */
  .bandeau .marque-bandeau{font-size:13px}
  /* Et la jauge se resserre du même geste : à 320 px, agrandie comme
     ailleurs, elle mordait d'un cheveu sur la marque. */
  .progression{width:100px}
}

/* L'ÉTAT DE LA MANCHE SE CENTRE SUR LE BOUTON.

   Les deux occupent le même bord droit mais sur deux lignes : sans
   largeur commune, « Terminée » et « Clôture à 20:00 » flottaient
   chacun de leur côté au-dessus d'un bouton fixe à 85 px. On leur
   donne la même largeur et le même centrage — l'œil suit une colonne,
   pas deux. 95 px : la largeur du bouton, depuis qu'il l'est. */
.band.deux-lignes .etat-manche{
  flex:0 0 95px;width:95px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Le BILAN d'une grille soldée (points + chillies) remplace le mot
   « Terminée » : plus large que l'heure, il garde le centrage sur la
   colonne du bouton mais peut déborder vers la gauche plutôt que de
   se tronquer. */
.band.deux-lignes .etat-manche.bilan-manche,
.band.deux-lignes .ligne > .etat-manche.bilan-manche{
  width:auto;min-width:95px;flex-basis:auto;
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  overflow:visible;
}
.bilan-manche .points-vif, .bilan-manche .gain-vif{font-size:12px}

/* UNE MANCHE ANNULÉE DIT « Annulée » là où les autres disent leur
   bilan. Ce n'est pas un montant : ni Share Tech Mono ni encre claire —
   la charte réserve cette voix aux points et aux chillies, et une
   manche annulée n'en a plus. Encre discrète, comme l'heure qu'elle
   remplace. */
.annulee-manche{
  font-size:12px;color:var(--text-muted);white-space:nowrap;
}

/* Le DÉCOMPTE remplace l'heure dans les 24 dernières heures : plus
   large qu'elle, il garde le centrage sur la colonne du bouton mais
   déborde vers la gauche plutôt que de se tronquer — même règle que le
   bilan d'une grille soldée. */
.band.deux-lignes .etat-manche.urgent{
  width:auto;min-width:95px;flex-basis:auto;overflow:visible;
}

/* L'exposant d'un rang — « 1er », « 3e ».
   Sans style, le navigateur l'espace du chiffre et l'on lit « 1 er ».
   `margin-left:0` recolle, la taille réduite garde la hiérarchie. */
.gain-ligne sup{font-size:.7em;margin-left:0;line-height:0}

/* Une ligne de gain : plus sobre qu'une bande de grille, elle se lit
   en liste. Le montant suit la voix unique des montants — la règle
   locale qui le passait au vert écrasait la commune, plus haut dans
   le fichier. */
.gain-ligne{padding:9px 12px}

/* Le rapport de diagnostic : du texte brut, à copier d'un bloc.
   Chasse fixe pour que les colonnes s'alignent, défilement horizontal
   plutôt que retour à la ligne — une ligne coupée devient illisible
   une fois collée. */
.rapport-diag{
  font:400 11px/1.45 var(--police-mono);
  white-space:pre;overflow-x:auto;
  padding:12px;margin:0;
  background:var(--bg-void);border:1px solid var(--border-soft);
  border-radius:8px;color:var(--text-secondary);
}

/* Le sélecteur de type de grille : assez large pour lire le libellé
   entier sans le tronquer, sinon on choisit à l'aveugle. */
.champ-regle{
  flex:1 1 auto;min-width:0;max-width:280px;
  font:500 12px/1 var(--police);
  padding:7px 9px;border-radius:7px;
  background:var(--bg-void);color:var(--ink);
  border:1px solid var(--border-soft);
}

/* ---------------------------------------------------------------------
   LE MENU DE SAUT DU CALENDRIER

   Posé en toute fin de feuille, DÉLIBÉRÉMENT : `.outils .btn` et la
   couche néon, plus haut, redéfinissent déjà les chips. Écrire ce bloc
   avant elles l'aurait fait écraser sans bruit — c'est arrivé assez de
   fois pour qu'on s'en garde ici.
   --------------------------------------------------------------------- */
.saut-semaine{position:relative}

/* Le triangle natif ne suit pas la charte : on le remplace par un
   chevron à nous, qui pivote quand le menu s'ouvre. */
.saut-semaine > summary{list-style:none;gap:6px;grid-auto-flow:column}
.saut-semaine > summary::-webkit-details-marker{display:none}

/* Le numéro est ce qu'on lit en premier, la période le précise : elle
   s'efface d'un cran. `.discret` n'existe que porté par un parent —
   sans cette règle, le libellé sortirait au même poids que le numéro. */
.saut-semaine > summary .discret{
  font-weight:400;color:var(--text-secondary);opacity:.7;white-space:nowrap;
}
.saut-semaine > summary::after{
  content:"";width:0;height:0;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px);
  transition:transform var(--transition-fast);
}
.saut-semaine[open] > summary::after{transform:translateY(-2px) rotate(180deg)}

.menu-semaines{
  position:absolute;z-index:40;top:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  min-width:220px;max-height:min(60vh, 380px);overflow-y:auto;
  margin:0;padding:4px;list-style:none;
  background:var(--bg-void);border:1px solid var(--border-medium);
  border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.55);
}
.menu-semaines li{margin:0}
.menu-semaines a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px;text-decoration:none;
  font:500 13px/1.2 var(--police);color:var(--text-secondary);
}
@media (hover:hover){
  .menu-semaines a:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}
}
.menu-semaines a:focus-visible{
  outline:1px solid var(--border-green);outline-offset:-1px;
}
/* La semaine affichée : le vert souligne, il ne remplit pas. */
.menu-semaines a.vue{color:var(--chili-green);box-shadow:inset 2px 0 0 var(--chili-green)}
.menu-semaines .quand-semaine{display:flex;align-items:baseline;gap:6px}
.menu-semaines em{
  font:500 10px/1 var(--police);font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);
  opacity:.75;
}
/* Ce qui reste à remplir se voit de loin ; le simple décompte de
   grilles reste discret — il informe, il n'appelle pas. */
.menu-semaines .pastille-menu{
  min-width:18px;padding:0 5px;border-radius:9px;
  font:600 11px/18px var(--police-mono);text-align:center;
  background:rgba(166,255,0,.12);color:var(--chili-green);
  font-variant-numeric:tabular-nums;
}
.menu-semaines .discret{
  font:400 11px/1 var(--police-mono);color:var(--text-secondary);opacity:.6;
  font-variant-numeric:tabular-nums;
}

@media (max-width:540px){
  .menu-semaines{left:auto;right:0;transform:none;min-width:200px}
}

/* =====================================================================
   LE BANDEAU SUR TÉLÉPHONE — la jauge prend ce qui reste, rien de plus

   Les deux colonnes de bord sont égales : c'est ce qui met la marque au
   centre VRAI du bandeau. Mais la droite porte trois pièces (pseudo,
   jauge, déconnexion) contre un seul compteur à gauche : à largeur
   égale, elle débordait de sa colonne et passait sous la marque.

   L'identité prend donc exactement la place que sa colonne lui laisse —
   `flex:1` — et la jauge la suit en pourcentage. Aucune largeur magique
   à retoucher au prochain écran : c'est la colonne qui commande.
   ===================================================================== */
/* Le bloc du joueur se serre autour de sa jauge — largeur fixe depuis
   qu'elle a maigri d'un tiers. L'étirer sur toute la colonne, comme
   il le faisait, éloignerait le pseudo du centre de sa propre ligne. */

/* =====================================================================
   LE RECALCUL D'UNE MANCHE — qui gagne, qui perd
   =====================================================================
   Classes PROPRES, sans réemploi de `.rows`/`.row`, qui vivent dans
   grille.css : les pages d'administration ne chargent pas cette
   feuille, et la table est sortie sans style au premier essai. Les
   réemployer aurait imposé de charger tout le coupon sur une page
   d'administration, avec les collisions que ça suppose.

   En-tête et lignes partagent la MÊME déclaration de grille : deux
   grilles écrites séparément se décalent au premier changement de
   largeur, défaut déjà mesuré sur le compte rendu du top 6. */
.recalc-tete,
.recalc-ligne{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px 54px 54px 56px;
  align-items:center;gap:8px;
}
.recalc-tete{
  padding:10px 0 6px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);
}
.recalc-tete .col-d{text-align:right}
.recalc-ligne{padding:5px 0}
.recalc-ligne .qui{
  font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.recalc-ligne .bot{
  font:600 10px/1 var(--police-mono);color:var(--text-muted);
  font-style:normal;margin-left:5px;text-transform:uppercase;
}
/* Les montants d'une seule voix : mono, gras, encre claire — jamais de
   couleur sur un nombre, la charte est explicite. */
.recalc-ligne .pts{
  font:700 14px/1 var(--police-mono);color:var(--text-primary);text-align:right;
}
/* L'ÉCART EST LA SEULE COLONNE COLORÉE, et c'est justifié : il dit un
   SENS — ce joueur monte, celui-là descend —, pas un montant. */
.recalc-ligne .ecart{color:var(--text-muted)}
.recalc-ligne .ecart.hausse{color:var(--chili-green)}
.recalc-ligne .ecart.baisse{color:var(--heat-red)}
@media (max-width:520px){
  .recalc-tete,
  .recalc-ligne{
    grid-template-columns:minmax(0,1fr) 32px 46px 46px 48px;gap:5px}
  .recalc-ligne .qui{font-size:13px}
  .recalc-ligne .pts{font-size:13px}
}
/* Le bouton porte un halo coloré : sans cet air, le lien de retour
   passe dessous et paraît barré. Mesuré — 2 px les séparaient. */
.recalc-agir{margin:16px 0 10px}

/* L'INTERTITRE DE CONCOURS des grilles futures. Pas de barre de
   séparation — c'est l'espacement qui délimite, comme partout ailleurs.
   Le compte se lit en retrait, à l'encre discrète : il situe sans
   disputer la place au nom. */
.titre-groupe{
  margin:14px 0 4px;font:600 13px/1.2 var(--police-mono);
  color:var(--text-primary);text-transform:uppercase;letter-spacing:.04em;
}
.titre-groupe:first-of-type{margin-top:8px}
.titre-groupe .discret{font-weight:400;letter-spacing:0}