/* =========================================================================
   site-chrome.css — en-tête, menu mobile, pied de page, tapbar et boutons.
   Chargée par TOUTES les pages du site, après style.css sur celles qui
   l'utilisent encore : les quelques règles de « neutralisation » en fin de
   fichier annulent ce que style.css fait fuir dans le chrome (header fixe de
   60px, .btn dans <header>, images arrondies, décalage body top:50px…).

   Ne contient aucune règle de mise en page de contenu : elle peut donc être
   posée sur une page existante sans en modifier le corps.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Figtree:wght@300..900&family=Zen+Dots&display=swap');

@property --ring-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --void: #04050C;
  --panel: #0A0D1B;
  --panel-2: #10142A;
  --line: rgba(140, 160, 255, .13);
  --line-soft: rgba(140, 160, 255, .07);
  --text: #E8ECFF;
  --muted: #8E97C2;
  --dim: #5F6892;
  --cyan: #2AB5FF;
  --violet: #7E6BFF;
  --magenta: #F535FF;
  --score: #89FF70;
  --gold: #FFC96B;
  --shell: 1240px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  /* Ancien dégradé de marque, sans consommateur depuis le passage au cyan.
     Conservé parce que le site se déploie fichier par fichier : une feuille de
     page encore ancienne le référencerait, et un fond absent sous un texte en
     text-fill-color: transparent rend le mot invisible. */
  --brand: linear-gradient(90deg, var(--cyan) 0%, var(--violet) 52%, var(--magenta) 100%);
  /* Cyan vers blanc, repris du halo du logo. Habille les boutons, les états
     actifs et le mot accentué du hero. */
  --prime: linear-gradient(100deg, #17C8FF 0%, #6FE6FF 42%, #FFFFFF 100%);
  --header-h: 68px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- type -- */

.display {
  /* padding:0 neutralise `article, h2 { padding: 0 20px }` de style.css,
     qui s'applique sous 1200px et décalerait tous les titres de section. */
  padding: 0;
  font-family: 'Archivo', 'Arial Black', sans-serif;
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.005em;
  text-wrap: balance;
  margin: 0;
}

.kicker {
  font-family: 'Zen Dots', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

.num { font-variant-numeric: tabular-nums; }

.shell { width: min(var(--shell), calc(100% - 56px)); margin-inline: auto; }

/* ------------------------------------------------------------- boutons -- */
/* Trois couches : cadre dégradé animé (::before, masqué pour ne peindre que
   le liseré), fond verre, puis balayage spéculaire (::after) au survol.
   Tout reste dans la boîte : le bouton peut donc garder overflow:hidden. */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  color: var(--text);
  background: linear-gradient(180deg, rgba(26, 33, 68, .92), rgba(9, 12, 30, .96));
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 8px 24px -14px rgba(0, 0, 0, .9);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, color .22s;
}

.btn > * { position: relative; z-index: 2; }

/* Balayage spéculaire : traverse le bouton une fois par survol. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg,
      transparent 34%, rgba(255, 255, 255, .32) 48%, transparent 62%);
  transform: translateX(-150%);
  transition: transform .85s cubic-bezier(.2, .8, .2, 1);
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(140, 160, 255, .3),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 16px 40px -16px rgba(126, 107, 255, .75),
    0 0 44px -18px rgba(42, 181, 255, .6);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(150%); }
.btn:active { transform: translateY(0); }

/* Le cadre dégradé n'existe que si le masque est gerable : sinon le liseré
   `inset box-shadow` ci-dessus fait seul le travail, sans rectangle coloré. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: conic-gradient(from var(--ring-angle),
        rgba(23, 200, 255, .95), rgba(255, 255, 255, 1), rgba(111, 230, 255, .9),
        rgba(255, 255, 255, .75), rgba(23, 200, 255, .95));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .32s;
  }
  .btn:hover::before, .btn:focus-visible::before {
    opacity: 1;
    animation: ringSpin 4.5s linear infinite;
  }
  .btn-prime::before { opacity: .85; }
}

@keyframes ringSpin { to { --ring-angle: 360deg; } }

/* Prestige : le dégradé de marque devient le fond, adouci par un voile verre
   et un liseré interne clair, pour éviter l'aplat plat. */
.btn-prime {
  color: #05060F;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 56%),
    var(--prime);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 10px 30px -14px rgba(23, 200, 255, .85),
    0 0 34px -20px rgba(150, 238, 255, .8);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-prime:hover, .btn-prime:focus-visible {
  color: #05060F;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 20px 48px -14px rgba(23, 200, 255, .95),
    0 0 66px -16px rgba(180, 245, 255, .75);
}

/* Discret : cadre filaire sur fond verre, sans anneau au repos. */
.btn-ghost {
  background: rgba(140, 160, 255, .045);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgba(140, 200, 255, .34),
    0 14px 34px -18px rgba(23, 200, 255, .7),
    0 0 40px -20px rgba(150, 238, 255, .55);
}

.btn-lg { height: 56px; padding: 0 30px; font-size: 14px; border-radius: 14px; }
.btn-sm { height: 36px; padding: 0 15px; font-size: 11.5px; border-radius: 9px; }

/* Nappes colorées du fond des bandeaux.
   Elles ne sont volontairement PAS animées : trois éléments de ~300 000 px²
   en filter: blur(95px) qui dérivaient en boucle infinie repeignaient sans
   arrêt, ce qui restait gratuit sur un GPU de bureau mais rendait l'accueil
   très lent sur mobile. Le rayon est aussi réduit : à cette échelle l'oeil ne
   fait pas la différence, le GPU si. */
.aurora { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .4; }
.aurora.a1 { width: 620px; height: 520px; left: -9%; top: -16%; background: radial-gradient(circle, #1E6BFF, transparent 66%); }
.aurora.a2 { width: 540px; height: 500px; right: 4%; top: -18%; background: radial-gradient(circle, #8A2BE2, transparent 66%); }
.aurora.a3 { width: 520px; height: 400px; left: 38%; top: 36%; background: radial-gradient(circle, #00D8B0, transparent 68%); opacity: .18; }

/* -------------------------------------------------------------- header -- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}

.hdr.is-stuck {
  background: rgba(4, 5, 12, .78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line-soft);
}

.hdr::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(149, 241, 255, .55), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.hdr.is-stuck::after { opacity: 1; }

.hdr-in { display: flex; align-items: center; gap: 30px; height: var(--header-h); }
.hdr-logo img { height: 20px; width: auto; }
.hdr-nav { display: flex; gap: 26px; margin-right: auto; }

.hdr-nav a {
  position: relative;
  padding: 7px 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .18s;
}
.hdr-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--prime);
  transition: right .3s cubic-bezier(.2, .8, .2, 1);
}
.hdr-nav a:hover { color: var(--text); }
.hdr-nav a:hover::after { right: 0; }
.hdr-nav a[aria-current="page"] { color: var(--text); }
.hdr-nav a[aria-current="page"]::after { right: 0; }

.hdr-right { display: flex; align-items: center; gap: 10px; }

/* Pastille « joueurs connectés » : le seul signal temps réel du header. */
.hdr-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(140, 160, 255, .04);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: border-color .25s, color .25s;
}
.hdr-live:hover { border-color: rgba(137, 255, 112, .35); color: var(--text); }
.hdr-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim); font-style: normal; flex: none;
}
.hdr-live.is-live i {
  background: var(--score);
  box-shadow: 0 0 10px var(--score);
  animation: blip 2.4s ease-in-out infinite;
}
.hdr-live b { color: var(--text); font-weight: 900; }

@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .34; } }

.hdr-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 13px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(140, 160, 255, .04);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  transition: border-color .25s, background .25s;
}
.hdr-user:hover { border-color: rgba(140, 160, 255, .3); background: rgba(140, 160, 255, .08); }
.hdr-user img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }

.hdr-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(140, 160, 255, .04);
  color: var(--muted);
  transition: color .25s, border-color .25s, background .25s;
}
.hdr-icon:hover { color: var(--text); border-color: rgba(140, 160, 255, .3); background: rgba(140, 160, 255, .08); }
.hdr-icon svg { width: 16px; height: 16px; }
.hdr-icon.has-unread::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 2px var(--void), 0 0 10px var(--magenta);
}

.menu-toggle {
  /* Disposition posée explicitement : style.css cible aussi .menu-toggle avec
     un flex column + gap: 6px. Sans ces valeurs, les trois barres se plaçaient
     différemment selon que la page charge style.css ou non. */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(140, 160, 255, .04);
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  margin: 0;
  border-radius: 2px;
  background: var(--text);
}
.menu-toggle.has-unread-dot::after {
  content: "";
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 2px var(--void);
}


/* --------------------------------------------------------- menu mobile -- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background: rgba(4, 5, 12, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mobile-menu.active { display: block; }
body.menu-open { overflow: hidden; }

.mobile-menu-inner {
  height: 100%;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.mobile-close {
  align-self: flex-end;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}
.mobile-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; }
.mobile-nav a {
  font-family: 'Archivo', sans-serif;
  font-stretch: 118%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  transition: color .2s, padding-left .25s;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--text); padding-left: 8px; }
.mobile-nav a.has-unread { color: var(--text); }
.mobile-nav a.has-unread::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 9px;
  border-radius: 50%;
  background: var(--magenta);
  vertical-align: middle;
}
.mobile-menu-cta { margin-top: auto; display: grid; gap: 10px; }
.mobile-menu-cta .btn { width: 100%; }


/* --------------------------------------------------------------- footer -- */

.ftr {
  position: relative;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(10, 13, 27, .7), var(--void));
  padding: 60px 0 34px;
  overflow: hidden;
}

/* Filigrane typographique : la signature de la marque, en très basse
   intensité, qui donne du fond au bloc sans rien encombrer. */
.ftr-watermark {
  position: absolute;
  left: 50%;
  bottom: -.22em;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(5rem, 19vw, 17rem);
  line-height: .8;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(180deg, rgba(140, 160, 255, .055), rgba(140, 160, 255, 0) 62%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ftr-inner { position: relative; z-index: 1; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 32px; }
.ftr-logo { display: inline-block; }
.ftr-brand img { height: 21px; width: auto; margin-bottom: 16px; }
.ftr-brand p { color: var(--dim); font-size: .87rem; margin: 0 0 18px; line-height: 1.7; }
.ftr-brand .btn { margin-top: 2px; }

.ftr-col h4 { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 15px; font-weight: 800; }
.ftr-col > a:not(.btn):not(.ftr-logo) { display: block; color: var(--dim); font-size: .87rem; padding: 5px 0; transition: color .2s, transform .2s; }
.ftr-col > a:not(.btn):not(.ftr-logo):hover { color: var(--text); transform: translateX(3px); }

.ftr-online b { display: flex; align-items: center; gap: 10px; font-family: 'Archivo', sans-serif; font-stretch: 118%; font-weight: 800; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ftr-online b i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); font-style: normal; }
.ftr-online.is-live b i { background: var(--score); box-shadow: 0 0 10px var(--score); animation: blip 2.4s ease-in-out infinite; }
.ftr-online small { display: block; margin-top: 8px; color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.ftr-online ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ftr-col.ftr-online li a {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(137, 255, 112, .05);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  transition: color .2s, border-color .2s;
}
.ftr-col.ftr-online li a:hover { color: var(--text); border-color: rgba(137, 255, 112, .35); transform: none; }

.ftr-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--dim); letter-spacing: .06em; }
.ftr-legal a { color: var(--dim); }
.ftr-legal a:hover { color: var(--muted); }


/* ------------------------------------------------------ tapbar mobile --- */

.tapbar {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 80;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px;
  background: rgba(10, 13, 27, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.tapbar a { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 11px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tapbar a.active { background: var(--prime); color: #05060F; }


/* ------------------------------------------------------- streak modal --- */

.streak-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 6, 18, .78); backdrop-filter: blur(10px); }
.streak-modal.active { display: flex; }
.streak-card { max-width: 420px; width: 100%; text-align: center; border-radius: 24px; padding: 30px; background: linear-gradient(145deg, rgba(15, 23, 48, .98), rgba(40, 22, 72, .96)); border: 1px solid rgba(255, 184, 77, .35); box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 42px rgba(255, 122, 0, .18); }
.streak-flame { font-size: 58px; filter: drop-shadow(0 0 18px rgba(255, 122, 0, .7)); animation: streakPulse 1.1s ease-in-out infinite alternate; }
.streak-card .kicker { color: #FFCF78; margin: 8px 0 0; }
.streak-card h2 { margin: 10px 0; font-size: clamp(1.5rem, 5vw, 2rem); }
.streak-card strong { display: inline-flex; margin: 6px 0 12px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 122, 0, .14); border: 1px solid rgba(255, 184, 77, .35); color: #FFD993; font-size: 1.1rem; }
.streak-card p { color: #C9D1EE; line-height: 1.5; margin: 0 0 20px; }
@keyframes streakPulse { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.08) rotate(2deg); } }


/* Le chrome suppose border-box. Portée limitée à ses propres conteneurs pour
   ne rien changer au corps des pages qui n'en tiennent pas compte. */
.hdr, .mobile-menu, .ftr, .tapbar, .streak-modal { color: var(--text); }

.hdr, .hdr *, .hdr *::before, .hdr *::after,
.mobile-menu, .mobile-menu *, .mobile-menu *::before, .mobile-menu *::after,
.ftr, .ftr *, .ftr *::before, .ftr *::after,
.tapbar, .tapbar *, .streak-modal, .streak-modal * { box-sizing: border-box; }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .hdr.is-stuck { background: rgba(4, 5, 12, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tapbar { background: rgba(10, 13, 27, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 860px) {
  .hdr-nav, .hdr-live { display: none; }
  .hdr-right .btn, .hdr-user, .hdr-icon { display: none; }
  .menu-toggle { display: flex; }
  .hdr-logo { margin-right: auto; }
}

@media (max-width: 760px) {
  .sec-head { flex-wrap: wrap; gap: 12px; }
  .sec-head > div { flex: 1 1 100%; }
  .sec-line { display: none; }
  .sec-link { margin-bottom: 0; }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 32px); }
  .ftr { padding-bottom: 26px; }
  /* Marque et joueurs en ligne sur toute la largeur, les deux colonnes de
     liens côte à côte : le pied de page tient en trois rangées au lieu de
     quatre blocs empilés. */
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .ftr-brand, .ftr-online { grid-column: 1 / -1; }
  .ftr-col { min-width: 0; }
  .ftr-legal { margin-top: 32px; }
  body { padding-bottom: 78px; }
  .tapbar { display: grid; }
}

/* ------------------------------------------------ primitives partagées --
   Bandes de section et panneaux de liste, utilisés par l'accueil comme par
   les pages de scores. Ils vivent ici pour n'exister qu'en un exemplaire. */

/* ------------------------------------------------------------ sections -- */

.band { padding: 74px 0; }
.band-rule { border-top: 1px solid var(--line-soft); }

.sec-head { display: flex; align-items: flex-end; gap: 26px; margin-bottom: 32px; }
.sec-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.sec-head .kicker { margin-bottom: 10px; }
.sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); margin-bottom: 11px; }
.sec-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s, gap .2s;
}
.sec-link:hover { color: var(--text); gap: 12px; }

.pane {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(16, 20, 42, .72), rgba(10, 13, 27, .4));
  padding: 22px 22px 13px;
}
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.pane-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 118%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0;
}
.pane-head a { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; transition: color .2s; }
.pane-head a:hover { color: var(--text); }
.pane-empty { color: var(--dim); font-size: .88rem; margin: 0 0 12px; }

.fresh { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--score); box-shadow: 0 0 8px var(--score); animation: blip 2s ease-in-out infinite; }

.lb { list-style: none; margin: 0; padding: 0; }
.lb li { display: grid; grid-template-columns: 26px auto 1fr auto; align-items: center; gap: 13px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.lb li:first-child { border-top: 0; }
.lb-rank { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.lb li:nth-child(1) .lb-rank { color: var(--gold); }
.lb li:nth-child(2) .lb-rank { color: #CFD8FF; }
.lb li:nth-child(3) .lb-rank { color: #D69A5C; }
.lb-av { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.lb-name { font-weight: 700; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-val b { color: var(--text); font-weight: 800; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 13px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.feed li:first-child {
  border-top: 0;
  padding-left: 12px;
  box-shadow: inset 2px 0 0 var(--score);
  background: linear-gradient(90deg, rgba(137, 255, 112, .07), transparent 62%);
  border-radius: 0 8px 8px 0;
}
.feed.is-plain li:first-child {
  padding-left: 0;
  box-shadow: none;
  background: none;
  border-radius: 0;
}

.feed-ico { width: 36px; height: 36px; }
.feed-ico img { width: 100%; height: 100%; object-fit: contain; }
.feed-main { min-width: 0; }
.feed-main strong { display: block; font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-main span { display: block; font-size: 11px; color: var(--dim); letter-spacing: .03em; }
.feed-score { text-align: right; white-space: nowrap; }
.feed-score b { display: block; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: .98rem; color: var(--score); font-variant-numeric: tabular-nums; line-height: 1.1; }
.feed-score span { font-size: 10px; color: var(--dim); letter-spacing: .06em; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .pane { padding: 18px 16px 11px; }
  .pane-head h3 { font-size: .9rem; }
}

/* ----------------------------------------- tableaux et cartes partagés --
   Utilisés par les pages de scores, le profil et la fiche joueur. Le préfixe
   `sc-` est historique (il vient de scores.css) : il est conservé pour ne pas
   avoir à retoucher le balisage déjà en place. */

/* --------------------------------------------------------------- tables -- */

.sc-table-wrap { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sc-table th {
  text-align: left;
  padding: 0 12px 11px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sc-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.sc-table tbody tr { transition: background .2s; }
.sc-table tbody tr:hover { background: rgba(140, 160, 255, .04); }
.sc-table th:first-child, .sc-table td:first-child { padding-left: 4px; width: 48px; }
.sc-table th:last-child, .sc-table td:last-child { padding-right: 4px; text-align: right; }

.sc-rank { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 12px; color: var(--dim); }
.sc-player { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.sc-player img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex: none; }
.sc-player > span { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-player:hover > span { color: #fff; }
.sc-score { font-weight: 800; color: var(--score); font-size: .98rem; }
.sc-date { color: var(--dim); font-size: .8rem; white-space: nowrap; }
.sc-online {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--score);
  box-shadow: 0 0 8px var(--score);
  vertical-align: middle;
}
.sc-gname { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .86rem; min-width: 0; }
.sc-gname img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.sc-gname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-gname:hover { color: #fff; }

.sc-empty { color: var(--dim); margin: 0; padding: 26px 4px; text-align: center; font-size: .9rem; }

/* Carte englobante réutilisée par les deux pages. */
.sc-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(16, 20, 42, .6), rgba(10, 13, 27, .35));
  padding: 20px 20px 8px;
}
.sc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.sc-card-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 118%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: .98rem;
  margin: 0;
}
.sc-card-head h3 img { width: 26px; height: 26px; object-fit: contain; }
.sc-card-head p { margin: 0; font-size: 11px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }


@media (max-width: 620px) {
  .sc-table.has-rank th:first-child, .sc-table.has-rank td:first-child { display: none; }
  .sc-table th, .sc-table td { padding: 9px 5px; }
  .sc-table th { font-size: 9px; letter-spacing: .08em; }
  .sc-gname { font-size: .8rem; gap: 7px; }
  .sc-gname span { max-width: 62px; }
  .sc-gname img { width: 22px; height: 22px; }
  .sc-player { gap: 7px; }
  .sc-player > span { max-width: 70px; }
  .sc-date { font-size: .72rem; }
  .sc-score { font-size: .9rem; }
  .sc .xp-level-badge { min-width: 22px; height: 18px; min-height: 18px; padding: 0 6px; font-size: 9px; }
  .sc-card-head h3 { font-size: .88rem; }
  .sc-card-head p { font-size: 10px; }
}

/* ------------------------------------------ champs et bandeaux partagés --
   Utilisés par les pages d'authentification et par l'espace personnel. */


.field { display: flex; flex-direction: column; gap: 7px; }
.field > label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--r-sm);
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: rgba(4, 5, 12, .62);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .22s, background .22s;
}
/* ------------------------------------------------------- drapeaux de pays --
   Windows n'embarque pas les glyphes de drapeaux dans sa police emoji : les
   indicateurs régionaux y sortent en deux lettres au lieu du drapeau. Un
   <option> ne pouvant contenir ni image ni SVG, fournir une police est la seule
   façon d'afficher un drapeau dans une liste déroulante native.

   `unicode-range` limite la police aux seuls indicateurs régionaux : le
   fichier n'est téléchargé que par les pages qui en affichent — inscription et
   profil — et reste ignoré partout ailleurs. Les noms de pays continuent d'être
   rendus par Figtree, la police ne contient que des drapeaux.

   Twemoji Country Flags — artwork Twemoji, CC BY 4.0
   https://creativecommons.org/licenses/by/4.0/
   Licence complète : assets/fonts/TwemojiCountryFlags-LICENSE.md */
@font-face {
  font-family: 'Twemoji Country Flags';
  src: url('/assets/fonts/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}

/* Les listes déroulantes reprennent l'habillage des champs texte. L'apparence
   native est retirée (elle impose un fond clair sur macOS et Windows) et
   remplacée par un chevron dessiné en dégradés, sans fichier image. */
.field select {
  width: 100%;
  height: 50px;
  padding: 0 40px 0 15px;
  border: 0;
  border-radius: var(--r-sm);
  /* La police des drapeaux passe en tête : son unicode-range la limite aux
     indicateurs régionaux, tout le reste retombe sur Figtree. */
  font-family: 'Twemoji Country Flags', 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background-color: rgba(4, 5, 12, .62);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .22s, background-color .22s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.field select:hover { box-shadow: inset 0 0 0 1px rgba(140, 160, 255, .26); }
.field select:focus {
  outline: none;
  background-color: rgba(4, 5, 12, .8);
  box-shadow: inset 0 0 0 1px rgba(111, 230, 255, .5), 0 0 0 3px rgba(23, 200, 255, .12);
}
/* Le menu déroulant est dessiné par le système : sans couleurs explicites,
   plusieurs navigateurs y posent du texte clair sur fond clair. */
.field select option { background: #0F1428; color: #E8ECFF; font-family: 'Twemoji Country Flags', 'Figtree', sans-serif; }

.field input::placeholder { color: var(--dim); font-weight: 500; }
.field input:hover { box-shadow: inset 0 0 0 1px rgba(140, 160, 255, .26); }
.field input:focus {
  outline: none;
  background: rgba(4, 5, 12, .82);
  box-shadow:
    inset 0 0 0 1px rgba(42, 181, 255, .75),
    0 0 0 3px rgba(42, 181, 255, .16),
    0 0 30px -14px rgba(42, 181, 255, .8);
}
/* Autofill : Chrome peint un fond blanc via un style interne que
   `background-color` ne peut pas surcharger. Le seul levier est une ombre
   interne à très grand étalement, qui recouvre ce fond — on en profite pour
   redessiner le liseré au passage. La transition de 9999s empêche le flash
   jaune à la validation. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow:
    inset 0 0 0 100px rgba(4, 5, 12, .92),
    inset 0 0 0 1px var(--line);
  transition: background-color 9999s ease-in-out 0s;
}

.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow:
    inset 0 0 0 100px rgba(4, 5, 12, .96),
    inset 0 0 0 1px rgba(42, 181, 255, .75),
    0 0 0 3px rgba(42, 181, 255, .16);
}

/* Firefox : sélecteur standard, séparé pour qu'un navigateur qui ignore l'un
   des deux n'invalide pas l'autre. */
.field input:autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  background-color: rgba(4, 5, 12, .92);
  background-image: none;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.field-hint { font-size: 11.5px; color: var(--dim); margin: 0; line-height: 1.5; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 22px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: .89rem;
  line-height: 1.5;
}
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.alert-error { color: #FFC2C2; background: rgba(255, 74, 74, .09); box-shadow: inset 0 0 0 1px rgba(255, 100, 100, .3); }
.alert-ok { color: #C6FFB8; background: rgba(137, 255, 112, .08); box-shadow: inset 0 0 0 1px rgba(137, 255, 112, .3); }

/* ------------------------------------------------- carte de jeu partagée --
   Vignette d'un jeu : visuel (jaquette, image de mise en avant ou icône
   transparente), nom, description et barre de statistiques. Utilisée par
   l'accueil et par le catalogue ; les grilles qui la disposent restent
   propres à chaque page. */

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), border-color .32s, box-shadow .32s;
}
.gcard:hover { transform: translateY(-5px); border-color: rgba(140, 160, 255, .3); box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .95); }

.gcard-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: inset(0);
  background-color: var(--panel);
}
.gcard-art.is-focus { aspect-ratio: 4 / 3; }
.gcard-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.gcard:hover .gcard-art img { transform: scale(1.07); }
.gcard-art::after {
  content: "";
  position: absolute;
  inset: -1px -1px -1px -1px;
  background: linear-gradient(180deg,
      rgba(4, 5, 12, .16) 0%,
      rgba(4, 5, 12, 0) 38%,
      rgba(10, 13, 27, .88) 84%,
      var(--panel) 97%,
      var(--panel) 100%);
}

/* Mode icône : PNG transparent, contenu sans recadrage, aucun aplat de
   couleur derrière — juste une lueur douce héritée du fond de la page. */
.gcard-art.is-icon { aspect-ratio: 1; background: none; }
.gcard-art.is-icon::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 107, 255, .2), transparent 70%);
  opacity: 0;
  transition: opacity .35s;
}
.gcard:hover .gcard-art.is-icon::before { opacity: 1; }
.gcard-art.is-icon::after { background: none; }
.gcard-art.is-icon img { object-fit: contain; padding: 6%; }

.gcard-art.is-empty-art {
  aspect-ratio: 1;
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
}
.gcard-art.is-empty-art::after { background: none; }

.rank {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(4, 5, 12, .66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rank.is-top { color: var(--gold); border-color: rgba(255, 201, 107, .4); background: rgba(38, 26, 4, .62); }

.play-pill {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #05060F;
  background: var(--prime);
  box-shadow: 0 8px 26px -10px rgba(23, 200, 255, .9);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .3s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.gcard:hover .play-pill, .gcard:focus-visible .play-pill { opacity: 1; transform: translateY(0); }

.gcard-body { display: flex; flex-direction: column; flex: 1; padding: 15px 16px 16px; }
.gcard-body h3 {
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.02rem;
  margin: 0 0 6px;
}
.gcard-body p {
  margin: 0 0 14px;
  color: var(--dim);
  font-size: .83rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gstats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
}
.gstats span { color: var(--dim); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.gstats b { color: var(--score); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 800; }
.gstats b.is-empty { color: var(--dim); }

.gcard.is-mini .gcard-body { padding: 13px 14px 14px; }
.gcard.is-mini .gcard-body h3 { font-size: .9rem; margin-bottom: 0; }
.gcard.is-mini .gcard-body p { display: none; }
.gcard.is-mini .gstats { padding-top: 11px; }

/* Étiquette de période, alignée sur home_settings.popular_period. */
.period-chip {
  font-family: 'Figtree', sans-serif;
  font-stretch: normal;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(140, 160, 255, .04);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 12px;
  vertical-align: middle;
}

/* Piste non retenue : `content-visibility: auto` sur .band / .live / .ftr,
   pour éviter de peindre les ~4 000 px situés sous la ligne de flottaison.
   L'interaction avec loading="lazy" est connue pour être délicate (dans un
   sous-arbre non rendu, l'image peut ne jamais intersecter l'écran), et elle
   n'a pas pu être évaluée ici : le navigateur d'automatisation ne déclenche
   pas le lazy load du tout, ce qui rend toute mesure ininterprétable.
   À tester sur un vrai téléphone avant de l'adopter. */

/* ------------------------------------------- neutralisation de style.css --
   style.css cible `header` et `body` par leur élément, et `header .btn` avec
   une spécificité supérieure à `.btn`. Sans ces règles, le nouveau chrome
   hérite d'une hauteur de 60px, d'un décalage de 50px sous l'en-tête, de
   boutons re-paddés et d'un logo aux angles arrondis. */

header.hdr { height: auto; width: auto; left: auto; right: auto; }

/* style.css cible `header` par son élément (position:fixed, 60px de haut,
   fond flouté). Tout <header> sémantique dans le corps d'une page — celui
   d'un article, par exemple — se retrouvait épinglé en haut de l'écran. */
header:not(.hdr) {
  position: static;
  height: auto;
  width: auto;
  top: auto;
  left: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body { top: auto; }

/* style.css ne remet jamais la marge par défaut du navigateur à zéro : seules
   les pages chargeant home-new.css y échappaient, les autres gardaient une
   gouttière de 8px tout autour. Le fond est posé sur <html> par la même
   occasion, sinon cette gouttière laisse voir le blanc du navigateur. */
/* `:where()` met ces deux règles à zéro de spécificité : elles comblent un
   manque là où personne ne dit rien, et s'effacent devant les feuilles de jeu,
   dont plusieurs posent leur propre `html, body { background: ... }` alors
   qu'elles sont chargées AVANT celle-ci. */
:where(html) { background: var(--void); }
:where(body) { margin: 0; }

/* `article a { text-decoration: underline }` de style.css (0,0,2) visait les
   corps de billet, mais atteint tout lien place dans un <article> : la carte
   « jeu de la semaine » de games.php, les liens de navigation de article.php,
   et les liens du corps qui se retrouvaient soulignés EN PLUS de leur bordure.
   Le corps de billet garde sa bordure basse, qui suffit à les signaler. */
article a { text-decoration: none; }

.hdr .btn, .mobile-menu .btn, .ftr .btn, .streak-card .btn {
  padding: 0 22px;
  border-radius: 12px;
  font-size: 13px;
  text-decoration: none;
}
.hdr .btn-sm, .ftr .btn-sm { padding: 0 15px; border-radius: 9px; font-size: 11.5px; }
.hdr .btn-lg, .mobile-menu .btn-lg, .streak-card .btn-lg { padding: 0 30px; border-radius: 14px; font-size: 14px; }

.hdr img, .mobile-menu img, .ftr img, .tapbar img { border-radius: 0; }
.hdr-user img { border-radius: 50%; }

/* `.has-unread` de style.css force sa couleur en !important. */
.hdr-icon.has-unread { color: var(--muted) !important; border-color: var(--line-soft) !important; }
.hdr-icon.has-unread:hover { color: var(--text) !important; }
.mobile-nav a.has-unread { color: var(--text) !important; border-color: transparent !important; }

/* `.mobile-menu` de style.css la garde à opacity:0 / pointer-events:none. */
.mobile-menu { opacity: 1; pointer-events: auto; }
.mobile-menu-inner { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .hdr *, .mobile-menu *, .ftr *, .tapbar *, .streak-modal * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn::after { display: none; }
}