/* SMASH — feuille de style « Le Club » (Plan 3.0, P2-3).
   Servie en cache d'abord par le service worker : changer le ?v= de
   index.html à CHAQUE modification de ce fichier. */
/* ══ IDENTITÉ « LE CLUB » (Plan 3.0, phase 2) ═══════════════════════════
   L'app est le tableau d'affichage du club : craie, encre, bâche, terre.
   Terre = la SEULE couleur d'action. Balle = « à toi », rare (< 3 %).
   Polices auto-hébergées (OFL, preview/fonts) : plus de Google Fonts.
   Les anciens jetons (--volt, --bg-*, --fg-*) restent comme alias le
   temps de la migration écran par écran. */
/* Le mot-symbole SMASH, celui du logo (site smash-league.fr, design
   system « italic wordmark ») : Archivo Black Italic, réduite aux seules
   lettres A H M S (1 Ko, OFL). Pour écrire autre chose avec, régénérer :
   fonts.googleapis.com/css2?family=Archivo:ital,wght@1,900&text=… */
@font-face { font-family: 'Smash Wordmark'; font-style: italic; font-weight: 900; font-display: block;
  src: url(fonts/archivo-smash-italic.woff2) format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url(fonts/big-shoulders-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url(fonts/big-shoulders-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url(fonts/schibsted-grotesk-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url(fonts/schibsted-grotesk-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Craie — le thème par défaut (extérieur, plein jour). Contrastes AA
   vérifiés : texte secondaire 5,4:1 sur craie, blanc sur terre 4,55:1. */
:root {
  color-scheme: light;
  /* La matière */
  --craie: #f2f3ee; --papier: #fbfbf8; --encre: #141a16; --trait: #d8dcd3;
  --bache: #123b2d; --bache-2: #1b4e3c; --bache-3: #2a6650;
  --terre: #c4532b; --terre-ink: #a8431f; --terre-wash: #f3e3da;
  --balle: #d8f13a; --balle-ink: #556500; --ligne: #ffffff;
  /* Les rôles */
  --bg-0: var(--craie); --bg-1: var(--papier); --bg-2: #ffffff; --bg-3: #e6e9e1; --bg-inset: #eceee7;
  --line-1: var(--trait); --line-2: #c3c9bf; --line-3: #9aa297;
  --fg-1: var(--encre); --fg-2: #48524b; --fg-3: #5c655f; --fg-4: #8b938d;
  --surface-club: var(--bache); --on-club: #ffffff; --etat-on: var(--bache); --bulle-moi: var(--bache); --surligne: rgba(216, 241, 58, 0.45);
  /* Alias de l'ancienne palette : l'action passe du volt à la terre. */
  --volt: var(--terre); --volt-bright: #d0613a; --volt-wash: var(--terre-wash); --on-volt: #ffffff; --volt-ink: var(--terre-ink);
  --attack: #b3261e; --attack-wash: #f6dfdc; --attack-ink: #a8251c;
  --contest: #c98a12; --contest-wash: #f6ead2; --contest-ink: #8a5a00;
  --info: var(--bache-3); --info-wash: #dfeae4; --info-ink: var(--bache-2);
  --win: #1d7a3e; --win-wash: #dcefe2; --win-ink: #1a6e38;
  --t-bronze: #9a6236; --t-argent: #8e959c; --t-or: #b88a1b; --t-platine: #1f7f6e; --t-diamant: #2f5fbf; --t-smash: var(--balle-ink);
  --t-platine-ink: #0f7a68; --t-diamant-ink: #2f5fbf;
  /* Typographie : 6 tailles. Display = tableau d'affichage, body = lecture. */
  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Schibsted Grotesk', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --mono: var(--display);
  --fs-1: 11px; --fs-2: 13px; --fs-3: 15px; --fs-4: 18px; --fs-5: 24px; --fs-6: 34px;
  /* 3 rayons, 2 ombres. */
  --r-1: 2px; --r-2: 4px; --r-3: 8px;
  --ombre-1: 0 1px 2px rgba(20, 26, 22, 0.06);
  --ombre-2: 0 18px 40px -16px rgba(18, 59, 45, 0.38);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --app-bg: var(--craie); --card-shadow: var(--ombre-1); --nav-bg: var(--papier); --auth-glow: var(--craie);
}
/* Bâche de nuit — le thème sombre : le vert du court sous les projecteurs. */
[data-theme='dark'] {
  color-scheme: dark;
  --bg-0: #0b1d16; --bg-1: #0f261c; --bg-2: #133024; --bg-3: #1c3d2f; --bg-inset: #0a1a13;
  --line-1: #224537; --line-2: #2d5545; --line-3: #3f6b59;
  --fg-1: #eef1ea; --fg-2: #b6c2b9; --fg-3: #93a198; --fg-4: #66756c;
  --trait: var(--line-1); --papier: var(--bg-1);
  --surface-club: #0a1712; --on-club: #eef1ea; --etat-on: var(--balle); --bulle-moi: var(--bache-3); --surligne: rgba(216, 241, 58, 0.16);
  --terre-ink: #f08a62; --terre-wash: rgba(196, 83, 43, 0.18); --balle-ink: var(--balle);
  --volt-ink: var(--terre-ink); --volt-wash: var(--terre-wash);
  --attack: #e5534b; --attack-wash: rgba(229, 83, 75, 0.16); --attack-ink: #ff8a7a;
  --contest: #f2bd55; --contest-wash: rgba(242, 189, 85, 0.14); --contest-ink: #f2bd55;
  --info: #8fd0b3; --info-wash: rgba(143, 208, 179, 0.14); --info-ink: #8fd0b3;
  --win: #5fd08b; --win-wash: rgba(95, 208, 139, 0.14); --win-ink: #5fd08b;
  --t-bronze: #c99263; --t-argent: #c8cdd6; --t-or: #e8b84b; --t-platine: #5fe0c7; --t-diamant: #8fb6ff; --t-smash: var(--balle);
  --t-platine-ink: #5fe0c7; --t-diamant-ink: #8fb6ff;
  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ombre-2: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  --app-bg: var(--bg-0); --nav-bg: var(--bg-1); --auth-glow: var(--bg-0);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--body);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  color: var(--fg-1); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 12px;
}
.phone {
  position: relative; width: 390px; height: 844px; background: var(--bg-0);
  border-radius: 46px; border: 1px solid var(--line-2);
  box-shadow: var(--ombre-2), inset 0 0 0 8px #000; overflow: hidden; display: flex; flex-direction: column;
}
.notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 130px; height: 28px; background: #000; border-radius: 16px; z-index: 60; }
.phone { --screen-pt: 56px; }
.screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--screen-pt) 16px 24px; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: block; }
.screen:not(.active) { display: none; }

/* Le display est la voix du tableau d'affichage : droit, serré, en capitales. */
.display { font-family: var(--display); font-weight: 800; font-style: normal; letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.95; }
.h1 { font-family: var(--display); font-weight: 800; font-size: var(--fs-6); letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.95; }
.h2 { font-family: var(--display); font-weight: 800; font-size: var(--fs-5); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.h3 { font-weight: 700; font-size: var(--fs-4); line-height: 1.2; }
.title { font-weight: 700; font-size: var(--fs-3); }
.sm { font-size: var(--fs-2); color: var(--fg-2); }
.xs { font-size: var(--fs-1); color: var(--fg-3); }
.eyebrow { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
/* Titre de SECTION (premier niveau d'un écran) — à ne pas confondre avec
   .eyebrow, qui étiquette l'intérieur d'une carte. On reprend la police
   du mot-marque et des chiffres héros : chaque section devient un jalon
   du parcours au lieu d'une étiquette pâle. */
.section { font-family: var(--display); font-weight: 800; font-size: var(--fs-4); letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-1); line-height: 1; }
.section-link { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.stat { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.muted { color: var(--fg-3); }

.card { background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-3); box-shadow: var(--ombre-1); }
.accent-top { border-top: 2px solid var(--fg-1); }
.row { display: flex; align-items: center; }
/* Boutons : capitales du tableau d'affichage. Terre = l'action ; le reste s'efface. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-2); padding: 12px 18px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; border: 1.5px solid transparent; cursor: pointer; min-height: 46px; width: 100%; transition: transform 0.12s var(--ease), background 0.12s; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--terre); color: #fff; }
.btn-secondary { background: transparent; border-color: var(--fg-1); color: var(--fg-1); }
.btn-dark { background: var(--fg-1); color: var(--bg-0); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--fg-2); }
.btn-attack { background: var(--attack); color: #fff; }
.btn-sm { padding: 8px 12px; font-size: 14px; min-height: 36px; width: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--r-2); background: var(--bg-2); border: 1px solid var(--line-2); font-size: var(--fs-2); font-weight: 600; color: var(--fg-2); cursor: pointer; white-space: nowrap; }
.chip.active { background: var(--fg-1); border-color: var(--fg-1); color: var(--bg-0); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: var(--r-1); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.b-volt { background: var(--volt-wash); color:var(--volt-ink); }
.b-info { background: var(--info-wash); color: var(--info-ink); }
.b-attack { background: var(--attack-wash); color: var(--attack-ink); }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.b-win { background: var(--win-wash); color:var(--win-ink); }
.b-contest { background: var(--contest-wash); color:var(--contest-ink); }
.tier { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: var(--r-1); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.avatar { border-radius: 50%; object-fit: cover; background: var(--bg-3); }
.ring { border-radius: 50%; padding: 2px; display: inline-flex; }
.crest { border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; color: var(--on-volt); }
.gear { width: 40px; height: 40px; border-radius: var(--r-2); background: transparent; border: 0; color: var(--fg-1); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icbox { width: 52px; height: 52px; border-radius: var(--r-3); display: flex; align-items: center; justify-content: center; }
i[data-lucide] { width: 20px; height: 20px; display: inline-block; }
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; flex: none; overflow: visible; }

/* Barre de navigation : une ligne d'encre, pas de verre. L'onglet actif
   porte un trait de terre au-dessus de son icône. */
.nav { flex: none; min-height: 78px; z-index: 50; background: var(--nav-bg); border-top: 2px solid var(--fg-1); display: flex; padding: 9px 4px 20px; }
.nav button { flex: 1; background: none; border: none; color: var(--fg-3); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; position: relative; }
.nav button.active { color: var(--fg-1); }
.nav button.active::before { content: ''; position: absolute; top: -9px; width: 20px; height: 3px; background: var(--terre); }
.nav button i, .nav button svg { width: 24px; height: 24px; }

.progress-track { height: 6px; border-radius: var(--r-1); background: var(--bg-3); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--r-1); background: var(--etat-on); }
.news-img { width: 100%; height: 128px; object-fit: cover; }
.stack { display: flex; }
.stack .ring { margin-left: -10px; box-shadow: 0 0 0 2px var(--bg-2); }
.stack .ring:first-child { margin-left: 0; }

/* Achievement medallions (illustrated badges) */
.medal { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.medal::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.45); }
.medal.noring::after { display: none; }
.chk.on { background: var(--terre) !important; border-color: var(--terre) !important; }
.chk.on::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; }
/* Plein écran sur vrai téléphone (lien partagé / ajout à l'écran d'accueil) */
@media (max-width: 480px) {
  body { padding: 0; background: var(--bg-0); }
  .phone { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: none; box-shadow: none; }
  .notch { display: none; }
  .phone { --screen-pt: max(18px, env(safe-area-inset-top)); }
  .nav { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
.medal i { color: #fff; width: 24px; height: 24px; }
.medal-wrap { width: 76px; text-align: center; }
.medal-label { font-size: 10px; color: var(--fg-2); margin-top: 6px; line-height: 1.25; font-weight: 600; }
.medal-sm { width: 30px; height: 30px; }
/* Écusson typographique : remplace les illustrations de vrais joueurs
   (Federer, Monfils, Nadal, McEnroe, Paire) et les logos de marques
   retirés le 2026-10-02 — droit à l'image + aperçu de l'identité 3.0. */
.medal .mot { position: relative; z-index: 1; font-family: var(--display); font-weight: 900; font-size: 11px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--balle); text-align: center; padding: 0 5px; }
.medal-sm .mot { font-size: 5.5px; padding: 0 2px; }
.medal-sm i { width: 15px; height: 15px; }

/* Metric emblem (small) */
.metric { text-align: center; flex: 1; }
.metric .emb { width: 30px; height: 30px; border-radius: var(--r-2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.metric .emb i { width: 16px; height: 16px; }

/* Team emblem (gamified crest) */
.emblem { position: relative; width: 56px; height: 62px; }
.emblem .shield { width: 56px; height: 62px; clip-path: polygon(50% 0, 100% 18%, 100% 70%, 50% 100%, 0 70%, 0 18%); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 22px; color: #fff; }
.emblem .star { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--bg-1); border: 1.5px solid var(--fg-1); display: flex; align-items: center; justify-content: center; }
.emblem .star i { width: 11px; height: 11px; color:var(--volt-ink); }

/* Match VS card */
.match { padding: 14px 16px; }
.match-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
/* Tableau de score (une ligne par camp, sets en colonnes) */
.sb { display: flex; flex-direction: column; }
.sb-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 0; color: var(--fg-2); }
.sb-row + .sb-row { border-top: 1px solid var(--line-1); }
.sb-row .ring { flex: none; }
.sb-winner { color: var(--fg-1); }
.sb-flag { flex: none; width: 22px; font-size: 18px; line-height: 1; text-align: center; }
.sb-noflag { display: inline-block; width: 16px; height: 12px; border-radius: 2px; background: var(--bg-3); vertical-align: middle; }
.sb-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-winner .sb-name { font-weight: 800; }
.sb-sets { display: flex; gap: 2px; flex: none; }
.sb-set { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; width: 24px; text-align: center; color: var(--fg-3); }
.sb-set.w { color: var(--fg-1); font-weight: 800; }
.sb-winner .sb-set.w { color: var(--fg-1); }
.sb-mark { flex: none; width: 12px; font-size: 10px; color: var(--terre-ink); text-align: center; }
.sb-moi .sb-name { color: var(--fg-1); text-decoration: underline; text-decoration-color: var(--balle); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.vs-row { display: flex; align-items: center; }
.side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.side .faces { display: flex; }
.side .faces .ring { margin-left: -12px; box-shadow: 0 0 0 2px var(--bg-2); }
.side .faces .ring:first-child { margin-left: 0; }
.center { width: 78px; text-align: center; }
.score { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.mini-crest { width: 18px; height: 18px; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; font-family: var(--display); color: var(--on-volt); }

/* List rows (settings) */
.list { background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-3); overflow: hidden; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line-1); cursor: pointer; }
.lrow:last-child { border-bottom: none; }
.lrow .li { width: 30px; height: 30px; border-radius: var(--r-2); background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.lrow .li i { width: 17px; height: 17px; color: var(--fg-2); }
.lrow .lt { flex: 1; font-size: 15px; font-weight: 500; }
.lrow .lv { font-size: 14px; color: var(--fg-3); }
.lrow.danger .lt { color: var(--attack-ink); }
.toggle { width: 46px; height: 28px; border-radius: 999px; background: var(--line-2); position: relative; transition: background 0.15s; flex: none; }
.toggle.on { background: var(--etat-on); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.toggle.on::after { left: 21px; }

/* Thread */
.bubble { max-width: 80%; padding: 10px 13px; border-radius: var(--r-3); font-size: 14px; line-height: 1.4; margin-bottom: 8px; position: relative;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.them { background: var(--bg-2); border: 1px solid var(--line-1); align-self: flex-start; border-bottom-left-radius: var(--r-1); }
.bubble.me { background: var(--bulle-moi); color: #fff; align-self: flex-end; border-bottom-right-radius: var(--r-1); }

.overlay { position: absolute; inset: 0; z-index: 80; background: rgba(11, 22, 17, 0.5); display: none; align-items: flex-end; }
.overlay.open { display: flex; }
.sheet { width: 100%; max-height: 94%; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-1); border-radius: var(--r-3) var(--r-3) 0 0; border-top: 2px solid var(--fg-1); padding: 14px 16px 28px; box-shadow: var(--ombre-2); scrollbar-width: none; position: relative; }
.sheet::-webkit-scrollbar { display: none; }
/* Full-screen sheets must clear the status bar / notch (safe-area top) */
.sheet.full { max-height: 100%; height: 100%; border-radius: 0; padding-top: calc(14px + env(safe-area-inset-top)); }
/* Chat thread: header fixed, messages scroll, input pinned to the very bottom */
#sheet-thread .sheet { padding: 0; overflow: hidden; }
#thread-body { display: flex; flex-direction: column; height: 100%; }
.thread-head { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line-1); flex: none; }
.thread-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 16px; scrollbar-width: none; }
.thread-scroll::-webkit-scrollbar { display: none; }
.thread-input { flex: none; display: flex; gap: 8px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-1); background: var(--bg-1); }
/* Squelette de chargement. « Mes ligues » affichait « Aucune ligue pour
   l'instant » AVANT que loadLeagues() ait répondu : l'app affirmait le
   contraire de la vérité pendant deux à trois secondes, puis se
   contredisait. Le squelette occupe exactement la place de la vraie
   carte — aucun saut de mise en page au remplacement. */
/* Assez contrasté pour se voir sur les DEUX fonds de bulle — le gris
   clair de « them » et le volt de « me » — et détaché par une ombre,
   sinon il se confond avec le coin de la bulle. */
.reac-add { position:absolute;bottom:-9px;right:-8px;width:26px;height:26px;border-radius:50%;
  background:var(--bg-1);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--fg-2);box-shadow:0 1px 4px rgba(0,0,0,.14);
  transition:color .12s,transform .12s;z-index:2 }
.reac-add:hover { color:var(--volt-ink);transform:scale(1.08) }
.reac-add:active { transform:scale(.92) }
.bubble.me .reac-add { right:auto;left:-8px }
.msg-emojis { display:flex;justify-content:space-around;gap:4px;padding:6px 2px 2px }
.msg-emojis span { font-size:29px;cursor:pointer;padding:6px;border-radius:12px;transition:transform .1s,background .12s }
.msg-emojis span:active { transform:scale(1.3) }
.msg-emojis span.choisi { background:var(--bg-3);box-shadow:inset 0 0 0 2px var(--fg-1) }
.msg-apercu { margin-top:10px;padding:10px 12px;background:var(--bg-2);border-radius:var(--r-2);font-size:13px;
  color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical }
.rep-bandeau { display:flex;gap:10px;align-items:center;padding:8px 12px;background:var(--bg-2);
  border-top:1px solid var(--line-1) }
.rep-trait { width:3px;align-self:stretch;background:var(--fg-1);border-radius:var(--r-1);flex:none }
.cite { border-left:3px solid currentColor;opacity:.62;padding:2px 0 2px 8px;margin-bottom:5px;
  font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.reac-row { display:flex;gap:4px;margin:-4px 0 8px;flex-wrap:wrap }
.bubble.me + .reac-row, .reac-row.moi { justify-content:flex-end }
.reac { background:var(--bg-2);border:1px solid var(--line-1);border-radius:999px;padding:2px 8px;
  font-size:13px;line-height:1.5;cursor:pointer;user-select:none }
.reac.mienne { border-color:var(--fg-1);background:var(--bg-3) }
.reac-pick { display:flex;gap:2px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:999px;
  padding:5px 8px;box-shadow:0 6px 20px rgba(0,0,0,.18);width:max-content;margin:0 0 4px;z-index:5;position:relative }
.reac-pick span { font-size:21px;cursor:pointer;padding:2px 4px;border-radius:8px;transition:transform .1s }
.reac-pick span:active { transform:scale(1.35) }
.mat-row { display:flex;align-items:center;gap:12px;padding:10px 2px }
.mat-row + .mat-row { border-top:1px solid var(--line-1) }
.mat-row .mat-chip { width:15px;height:15px;border-radius:50%;flex:none;margin-left:9px;background:var(--mf);
  box-shadow:inset 0 0 0 2px var(--mb) }
.mat-row.courante .mat-chip { box-shadow:inset 0 0 0 4px var(--mb), 0 0 9px var(--mb) }
.pill-mini { font-size:9px;letter-spacing:1px;font-weight:800;color:var(--fg-1);
  background:var(--balle);border-radius:var(--r-1);padding:3px 7px }
.mis-row { display:flex;align-items:center;gap:11px;padding:10px 2px }
.mis-row + .mis-row { border-top:1px solid var(--line-1) }
.mis-coche { width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--line-2);color:var(--fg-3);
  font-size:10px;font-weight:800;font-family:var(--body) }
.mis-row.faite .mis-coche { background:var(--etat-on);border-color:var(--etat-on);color:var(--bg-0) }
.mis-xp { font-family:var(--display);font-size:14px;font-weight:800;color:var(--fg-3);flex:none }
.mis-row.faite .mis-xp { color:var(--fg-1) }
/* Un <input> ne peut PAS contenir de retour à la ligne : la touche
   Entrée n'y a qu'un sens, « valider ». D'où le message parti tout seul
   dès qu'on voulait aller à la ligne. Un <textarea> qui grandit résout
   les deux à la fois. */
.champ-msg { resize:none; overflow-y:auto; max-height:112px; line-height:1.35;
  padding-top:11px; padding-bottom:11px; font-family:inherit; flex:1 }
.btn-photo { width:38px;height:38px;border-radius:var(--r-2);background:var(--bg-3);border:1px solid var(--line-1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;color:var(--fg-2);transition:background .15s }
.btn-photo:hover { background:var(--bg-4,var(--bg-3)) }
.btn-photo i { width:18px;height:18px }
.sk { background: var(--bg-3); border-radius: 6px; animation: skp 1.1s ease-in-out infinite; }
/* La carte joueur est sombre quel que soit le thème : son squelette aussi. */
.sk-c { background: rgba(255,255,255,.10); border-radius: 6px; animation: skp 1.1s ease-in-out infinite; }
@keyframes skp { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.28; } }
.grabber { width: 36px; height: 3px; border-radius: var(--r-1); background: var(--line-3); margin: 0 auto 14px; }
.close-x { position: absolute; top: 16px; right: 16px; cursor: pointer; color: var(--fg-3); z-index: 5; }
.seg { display: flex; gap: 8px; }
.seg .chip { flex: 1; justify-content: center; }
.opt { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--line-2); background: var(--bg-2); border-radius: var(--r-2); padding: 14px 16px; cursor: pointer; }
.opt.active { border-color: var(--fg-1); background: var(--bg-2); color: var(--fg-1); box-shadow: inset 4px 0 0 var(--terre); }
.caption { text-align: center; color: var(--fg-4); font-size: 11px; margin-top: 14px; }
.pstat { text-align: center; flex: 1; }
.field, .ta { width: 100%; background: var(--bg-2); border: 1.5px solid var(--line-2); border-radius: var(--r-2); padding: 13px 16px; color: var(--fg-1); font-family: var(--body); font-size: 16px; outline: none; } /* 16px: évite le zoom auto iOS au focus */
.field:focus, .ta:focus { border-color: var(--fg-1); }
select.field { -webkit-appearance: none; appearance: none; text-align: center; text-align-last: center; cursor: pointer; }
.pw-wrap { position: relative; }
.pw-eye { position: absolute; top: 0; bottom: 0; right: 0; width: 46px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--fg-3); cursor: pointer; padding: 0; }
.pw-eye svg { width: 20px; height: 20px; }
.ta { min-height: 90px; resize: none; }
/* Auth / onboarding */
.authwrap { position: absolute; inset: 0; z-index: 120; background: var(--bg-0); display: flex; flex-direction: column; justify-content: center; padding: 34px 24px; overflow-y: auto; }
.authwrap .display { font-size: 48px; margin-bottom: 26px; }
/* Le mot-symbole de l'écran de connexion : le même que dans l'app, en grand. */
.authwrap .wm-auth { font-size: min(44px, 11vw); margin-bottom: 26px; gap: 9px; }
/* Toast : une bande d'encre, comme un message sur le tableau du club. */
.toast { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--fg-1); color: var(--bg-0); padding: 11px 16px; border-radius: var(--r-2); font-size: 13px; font-weight: 600; max-width: calc(100% - 32px); width: max-content; text-align: center; box-shadow: var(--ombre-2); opacity: 0; transition: opacity 0.2s; z-index: 200; pointer-events: none; }
.au-err { font-size: 13px; color: var(--attack-ink); margin: 4px 2px; min-height: 17px; }
.otp { letter-spacing: 10px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 30px; padding-left: 10px; }
.avgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 18px; }
.avopt { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; cursor: pointer; object-fit: cover; background: var(--bg-3); }
.avopt.sel { border-color: var(--terre); }
.avupload { display: flex; align-items: center; justify-content: center; background: var(--bg-3); border: 2px dashed var(--line-3) !important; color: var(--fg-2); cursor: pointer; }
.avupload i { width: 22px; height: 22px; }
.au-link { text-align: center; margin-top: 16px; color: var(--fg-3); font-size: 13px; cursor: pointer; }
.au-link b { color:var(--volt-ink); }
.au-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 22px; }
.au-dots span { width: 7px; height: 7px; border-radius: var(--r-1); background: var(--line-2); }
.au-dots span.on { background: var(--terre); width: 18px; }
.rememberme { display: flex; align-items: center; gap: 9px; color: var(--fg-2); font-size: 13px; margin: 2px 2px 14px; cursor: pointer; }
.rememberme input { width: 17px; height: 17px; accent-color: var(--terre); cursor: pointer; }

/* ── Rythme vertical de l'accueil ──
   12 = même groupe · 20 = frontière de groupe sans titre · 28 = frontière
   annoncée par un titre de section.
   L'écart appartient au bloc qui ARRIVE, jamais à celui qui part : sur cet
   écran cinq blocs sur onze se vident tout seuls, et un bloc qui peut
   disparaître ne doit pas emporter l'écart qui le suit. C'était la cause
   du contact franc sous la rangée « Inviter des amis ».
   Une div vide sans padding ni bordure se replie et sa marge fusionne avec
   celle du voisin : ces deux règles couvrent les quatre combinaisons sans
   sélecteur conditionnel. NE PAS ajouter padding/border/overflow/flex ici,
   la fusion s'arrêterait et un blanc mort apparaîtrait. */
#home-todo { margin-top: 0; }   /* premier bloc de l'accueil depuis P1-6 */
#home-level { margin-top: 12px; }

/* ══ COMPOSANTS SIGNATURE « LE CLUB » (Plan 3.0, P2-5 / P2-6) ═════════
   Repris des maquettes de l'audit, à l'échelle du téléphone réel (×1,25). */
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wm { font-family: 'Smash Wordmark', var(--display); font-weight: 900; font-style: italic; font-synthesis: none; font-size: 28px; letter-spacing: -0.02em; line-height: 1; display: flex; align-items: center; gap: 7px; }
.pip { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--terre); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; pointer-events: none; }
.meta { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-top: 5px; }
.retour { display: flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--fg-2); cursor: pointer; margin: -4px 0 12px; }
/* Ligne de fond de court, avec sa marque centrale : le séparateur de section. */
.baseline { position: relative; height: 2px; background: var(--line-1); margin: 24px 0 14px; }
.baseline::after { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 8px; background: var(--line-1); }
.h-sec { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.h-sec small { font-family: var(--body); font-size: 12px; letter-spacing: 0.01em; text-transform: none; font-weight: 500; color: var(--fg-3); }
.h-sec .lien { font-family: var(--body); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--terre-ink); cursor: pointer; white-space: nowrap; }
/* « À toi » : la seule zone en balle. Une action, un verbe. */
.todo { background: var(--balle); color: #141a16; border-radius: var(--r-2); padding: 13px 14px; display: flex; gap: 12px; align-items: center; cursor: pointer; }
.todo .t0 { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: #3c4512; margin-bottom: 3px; }
.todo .t1 { font-weight: 700; font-size: 15px; line-height: 1.25; }
.todo .t2 { font-size: 13px; color: #3c4512; margin-top: 2px; line-height: 1.3; }
.todo .go { margin-left: auto; flex: none; background: #141a16; color: var(--balle); font-family: var(--display); font-weight: 800; letter-spacing: 0.05em; font-size: 16px; padding: 9px 12px; border-radius: var(--r-1); text-transform: uppercase; white-space: nowrap; }
.todo.calme { background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--line-1); }
.todo.calme .t0, .todo.calme .t2 { color: var(--fg-3); }
.todo.calme .go { background: transparent; color: var(--fg-1); border: 1.5px solid var(--fg-1); }
/* Convocation : le panneau de score du prochain match. */
.board { background: var(--surface-club); color: #fff; border-radius: var(--r-3); position: relative; overflow: hidden; margin-top: 12px; cursor: pointer; }
.board::before { content: ''; position: absolute; inset: 7px; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: var(--r-1); pointer-events: none; }
.board-head { display: flex; justify-content: space-between; padding: 15px 17px 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.board-time { display: flex; align-items: flex-end; gap: 12px; padding: 5px 17px 0; }
.board .digits { font-family: var(--display); font-weight: 800; font-size: 62px; line-height: 0.9; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.board-time .when { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 5px; }
.board-place { padding: 7px 17px 12px; font-size: 13px; color: rgba(255, 255, 255, 0.82); }
.board-vs { display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1.5px solid rgba(255, 255, 255, 0.55); margin: 0 7px 7px; }
.board-vs > div { padding: 11px 10px; min-width: 0; }
.board-vs .nm { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-vs .sub { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }
.board-vs .mid { border-left: 1.5px solid rgba(255, 255, 255, 0.55); border-right: 1.5px solid rgba(255, 255, 255, 0.55); text-align: center; display: grid; place-items: center; padding: 8px 12px; }
.board-vs .mid b { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--balle); display: block; line-height: 1; }
.board-vs .mid em { display: block; font-style: normal; font-size: 10px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.62); text-transform: uppercase; margin-top: 3px; }
.board-vs .r { text-align: right; }
.board-vide { padding: 18px 17px 17px; position: relative; }
.board-vide .titre { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.02em; }
.board-vide p { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin: 8px 0 14px; line-height: 1.4; max-width: 30ch; }
/* Créneaux : une ligne par créneau, l'heure en chiffres de tableau. */
.slot { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-1); }
.slot:last-child { border-bottom: 0; }
.slot .d { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 0.95; text-transform: uppercase; color: var(--fg-2); }
.slot .d b { display: block; font-size: 26px; font-weight: 800; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.slot .w { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .x { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border: 1px solid var(--fg-3); border-radius: var(--r-1); color: var(--fg-2); margin-right: 5px; }
.take { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--terre-ink); border: 1.5px solid var(--terre); border-radius: var(--r-1); padding: 7px 10px; cursor: pointer; background: transparent; white-space: nowrap; }
.take.neutre { color: var(--fg-2); border-color: var(--line-3); }
.ligne-action { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); cursor: pointer; font-weight: 700; font-size: 15px; margin-top: 12px; }
.ligne-action .ic { width: 22px; height: 22px; }
/* Compteurs « Mes matchs » : trois cases de tableau. */
.compteurs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--fg-1); border-radius: var(--r-2); overflow: hidden; }
.compteurs > div { padding: 10px 12px; border-right: 1.5px solid var(--fg-1); cursor: pointer; }
.compteurs > div:last-child { border-right: 0; }
.compteurs b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.compteurs span { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; }
.compteurs .chaud b { color: var(--terre-ink); }
.sport-pill { padding: 6px 10px; font-size: 12px; font-weight: 700; gap: 5px; }
.sport-pill .ic { width: 15px; height: 15px; }
.forme { flex: none; width: 30px; height: 30px; border-radius: var(--r-1); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 16px; }
.forme.v { background: var(--bache); color: #fff; }
[data-theme='dark'] .forme.v { background: var(--bache-3); }
.forme.d { border: 1.5px solid var(--line-3); color: var(--fg-3); }
.forme.der { outline: 2px solid var(--fg-1); outline-offset: 2px; }
/* La bande de licence : trois chiffres, trois cases. */
.bande-lic { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--fg-1); border-radius: var(--r-2); overflow: hidden; cursor: pointer; }
.bande-lic > div { padding: 9px 11px; border-right: 1.5px solid var(--fg-1); }
.bande-lic > div:last-child { border-right: 0; }
.bande-lic b { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.bande-lic span { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; }
.bande-lic .up { color: var(--win-ink); } .bande-lic .dn { color: var(--attack-ink); }
.avis { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg-2); margin-top: 14px; }
/* Écusson : un blason découpé, les initiales en capitales de tableau. */
.ecusson { flex: none; background: var(--bache); color: var(--balle); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); display: flex; justify-content: center; padding-top: 18%; font-family: var(--display); font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
[data-theme='dark'] .ecusson { background: var(--bache-3); }
/* Licence de jeu : papier, encre, bâche — un objet, quel que soit le thème. */
.lic { background: #fbfbf8; color: #141a16; border: 1.5px solid #141a16; border-radius: var(--r-3); overflow: hidden; width: 100%; }
.lic-top { background: #123b2d; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 11px; letter-spacing: 0.16em; font-weight: 700; text-transform: uppercase; }
.lic-top b { font-family: var(--display); font-size: 18px; letter-spacing: 0.08em; font-weight: 900; }
.lic-body { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 12px; }
.lic .photo { aspect-ratio: 3 / 4; border-radius: var(--r-1); background: #123b2d; overflow: hidden; display: grid; place-items: center; color: #d8f13a; font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: 0.03em; }
.lic .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.lic-name { font-family: var(--display); font-weight: 900; font-size: 28px; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.lic-h { font-size: 12px; color: #5c655f; margin-top: 4px; }
.lic .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin-top: 10px; font-size: 12.5px; }
.lic .kv dt { color: #5c655f; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 700; padding-top: 2px; }
.lic .kv dd { font-weight: 700; margin: 0; }
.lic-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid #141a16; }
.lic-strip > div { padding: 9px 10px; border-right: 1.5px solid #141a16; }
.lic-strip > div:last-child { border-right: 0; }
.lic-strip b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.lic-strip b small { font-size: 16px; }
.lic-strip span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5c655f; font-weight: 700; }
.lic .sk { background: #e6e9e1; }
.lic-sm .lic-name { font-size: 24px; } .lic-sm .lic-body { grid-template-columns: 90px 1fr; }
/* Palmarès : des écussons de texte, pleins une fois gagnés. */
.palmares { display: flex; flex-wrap: wrap; gap: 8px; }
.ecu { position: relative; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; border: 1.5px solid var(--fg-1); background: var(--fg-1); color: var(--balle); border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
[data-theme='dark'] .ecu { background: var(--bache-3); border-color: var(--bache-3); }
.ecu.lock { background: transparent; border-style: dashed; border-color: var(--line-3); color: var(--fg-3); }
.ecu.sm { font-size: 11px; padding: 4px 8px; }
.ecu .nouveau { position: absolute; top: -3px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--terre); box-shadow: 0 0 0 2px var(--bg-0); }
/* Feuille de match : papier ligné, grille des sets, deux visas. */
.feuille { background: #fbfbf8; color: #141a16; border: 1px solid #d8dcd3; border-radius: var(--r-1); padding: 14px 14px 12px; position: relative;
  background-image: repeating-linear-gradient(0deg, transparent 0 25px, rgba(18, 59, 45, 0.06) 25px 26px); }
.feuille-h { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #141a16; padding-bottom: 8px; }
.feuille-h b { font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.feuille-h .n { font-size: 11.5px; color: #5c655f; text-align: right; line-height: 1.4; }
.grille { width: 100%; border-collapse: collapse; margin-top: 10px; }
.grille th { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #5c655f; font-weight: 700; text-align: center; padding-bottom: 4px; }
.grille th:first-child { text-align: left; }
.grille td { border: 1.5px solid #141a16; height: 44px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; }
.grille td:first-child { text-align: left; padding: 0 9px; font-size: 18px; text-transform: uppercase; letter-spacing: 0.03em; width: 52%; line-height: 1.05; }
.grille td.w { background: #123b2d; color: #fff; }
.grille td:first-child small { display: block; font-family: var(--body); font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 500; color: #5c655f; margin-top: 1px; }
.visas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.visa { border: 1.5px dashed #7b847d; border-radius: var(--r-1); height: 88px; position: relative; padding: 7px 8px; }
.visa .lb { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #5c655f; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visa .att { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 12px; color: #7b847d; font-weight: 600; }
.stamp { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-7deg); border: 2px solid #c4532b; color: #c4532b; border-radius: var(--r-2); padding: 4px 9px 3px; text-align: center; font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.stamp small { display: block; font-family: var(--body); font-size: 9px; letter-spacing: 0.06em; font-weight: 700; margin-top: 3px; }
.visa.sign { border: 2px solid #c4532b; background: #f3e3da; display: grid; place-items: center; cursor: pointer; }
.visa.sign .go { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: 0.08em; color: #a8431f; text-transform: uppercase; text-align: center; line-height: 1; }
.visa.sign .go small { display: block; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #48524b; margin-top: 5px; }
.feuille-f { font-size: 12px; color: #5c655f; margin-top: 10px; line-height: 1.4; }
.feuille-f u { cursor: pointer; color: #a8431f; font-weight: 700; }
.gain { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.gain .pts { font-family: var(--display); font-weight: 900; font-size: 54px; line-height: 0.85; color: var(--fg-1); }
.gain .pts.neg { color: var(--attack-ink); }
.gain .pts small { display: block; font-size: 12px; letter-spacing: 0.14em; font-weight: 800; color: var(--fg-3); text-transform: uppercase; }
.gain p { font-size: 13px; color: var(--fg-2); line-height: 1.4; margin: 2px 0; }
.gain p b { color: var(--fg-1); }
/* Palier : un nom en capitales sur un filet de sa couleur. */
.palier { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 3px 6px 3px 7px; border-radius: var(--r-1); border: 1px solid var(--line-2); box-shadow: inset 3px 0 0 var(--pc, var(--fg-3)); color: var(--fg-1); white-space: nowrap; }
.p-bronze { --pc: var(--t-bronze); } .p-argent { --pc: var(--t-argent); } .p-or { --pc: var(--t-or); }
.p-platine { --pc: var(--t-platine); } .p-diamant { --pc: var(--t-diamant); } .p-smash { --pc: var(--balle); background: var(--fg-1); color: var(--balle); border-color: var(--fg-1); }
/* Échelle : le tableau du club, en plaques. */
.ech-head { background: var(--surface-club); color: #fff; margin: calc(-1 * var(--screen-pt)) -16px 0; padding: calc(var(--screen-pt) + 2px) 16px 14px; }
.ech-head .meta { color: rgba(255, 255, 255, 0.7); }
.ech-head h2 { font-family: var(--display); font-weight: 900; font-size: 42px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.9; margin: 14px 0 6px; }
.ech-head p { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.tabs-mini { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.tabs-mini span { cursor: pointer; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.tabs-mini .on { color: #fff; border-bottom-color: var(--balle); }
.rack { background: var(--bache-2); margin: 0 -16px; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
[data-theme='dark'] .rack { background: #0f2a1f; }
.plate { display: grid; grid-template-columns: 40px 1fr auto; align-items: stretch; background: #f5f4ec; color: #141a16; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 #fff; overflow: hidden; cursor: pointer; }
.plate .rk { background: #141a16; color: #fff; font-family: var(--display); font-weight: 800; font-size: 21px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.plate .nm { padding: 8px 10px; font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.05; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate .nm small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: #5c655f; overflow: hidden; text-overflow: ellipsis; }
.plate .el { padding: 8px 11px; text-align: right; font-family: var(--display); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; justify-content: center; }
.plate .el small { font-family: var(--body); font-size: 11px; font-weight: 700; min-height: 13px; }
.plate .up { color: #1d7a3e; } .plate .dn { color: #a8431f; }
.plate.cible { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px var(--terre); }
.plate.cible .nm small { color: #a8431f; font-weight: 700; }
.plate.moi { background: var(--balle); }
.plate.moi .nm small { color: #3c4512; }
.plate.dim { opacity: 0.62; }
.rack .ellipse { text-align: center; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.4em; font-weight: 800; line-height: 1; }
.rule { font-size: 13px; color: var(--fg-2); margin-top: 12px; line-height: 1.45; }
.rival { margin-top: 12px; border: 1.5px solid var(--fg-1); border-radius: var(--r-2); padding: 11px 12px; display: flex; align-items: center; gap: 12px; }
.rival .sc { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.rival .sc span { color: var(--fg-3); margin: 0 2px; }

/* Utilitaires (P2-3) : ce que les style="…" répétaient mot pour mot. */
.f1 { flex:1; }
.fn { flex:none; }
.f1m { flex:1; min-width:0; }
.cp { cursor:pointer; }
.c1 { color:var(--fg-1); }
.c2 { color:var(--fg-2); }
.c3 { color:var(--fg-3); }
.ct { color:var(--volt-ink); }
.w14 { width:14px; }
.w16 { width:16px; }
.w18 { width:18px; }
.fs15 { font-size:15px; }
.mb2 { margin-bottom:2px; }
.mt2 { margin-top:2px; }
.mb4 { margin-bottom:4px; }
.mt4 { margin-top:4px; }
.mb6 { margin-bottom:6px; }
.mt6 { margin-top:6px; }
.mb8 { margin-bottom:8px; }
.mt8 { margin-top:8px; }
.mb10 { margin-bottom:10px; }
.mt10 { margin-top:10px; }
.mb12 { margin-bottom:12px; }
.mt12 { margin-top:12px; }
.mb14 { margin-bottom:14px; }
.mt14 { margin-top:14px; }
.mb16 { margin-bottom:16px; }
.mt16 { margin-top:16px; }
.mb18 { margin-bottom:18px; }
.mt18 { margin-top:18px; }
.mb20 { margin-bottom:20px; }
.mt20 { margin-top:20px; }

/* Jour + heure d'un créneau, côte à côte. Safari iOS donne aux champs date
   et heure une largeur propre incompressible et les laisse VIDES sans
   valeur (ni jj/mm/aaaa, ni --:--) : ils débordaient l'un sur l'autre et
   sur « Ajouter », sans dire ce qu'ils attendaient. D'où l'apparence
   neutralisée, la largeur forcée et une étiquette au-dessus de chacun. */
.champs-creneau { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; margin-bottom: 8px; }
.champs-creneau label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
input.field[type=date], input.field[type=time] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 48px; text-align: left; }
input.field[type=date]::-webkit-date-and-time-value, input.field[type=time]::-webkit-date-and-time-value { text-align: left; }