/* ═══ Thèmes ══════════════════════════════════════════════ Le thème sombre est la valeur par défaut de :root. Le thème clair est appliqué soit explicitement (), soit en suivant la préférence du navigateur quand aucun choix explicite n'a été fait (pas d'attribut data-theme). Les deux sélecteurs ci-dessous doivent donc rester synchronisés. ══════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces (du plus profond au plus élevé) — palette « broadcast » de la maquette Claude Design. Le thème SOMBRE est désormais celui de la maquette ; le thème clair (bloc plus bas) est inchangé. */ --bg-page: #06090f; --bg-surface: #0b1220; --bg-input: #0d1522; --bg-inset: #070c15; --bg-panel: #0b1220; --bg-elevated: #16202f; --surface-2: #16202f; --bg-hover: #131c29; --bg-chip: #16324f; /* Lignes & bordures */ --line-soft: #131c29; --line-strong: #2b3849; --border: #1b2431; --border-input: #2b4a75; --border-hover: #2b4a75; /* Canal des voiles (hover, séparateurs) : clair sur fond sombre, sombre sur fond clair */ --overlay-rgb: 255,255,255; --bg-surface-hover: rgba(var(--overlay-rgb),0.06); --bg-muted: rgba(var(--overlay-rgb),0.08); --shadow-strong: rgba(0,0,0,0.5); --scrim: rgba(0,0,0,0.5); /* Landing hero (Home) : artwork dédié par thème (déclinaisons sombre/claire du même visuel) + dégradés par zone (nav/centre/CTA). */ --hero-img: url('home-hero.jpg'); --hero-img-filter: none; --hero-ink: #ffffff; --hero-ink-soft: #c7d6f0; /* Fond de marque GLOBAL (login + zone de contenu des pages connectées, via body::before) : même artwork que le hero, mais voilé pour rester une ambiance derrière le contenu. Ellipse centrale = fond le logo géant de l'artwork (leçon de la PR #516 revertée). */ --app-backdrop-overlay: radial-gradient(26% 30% at 50% 45%, rgba(10,13,19,0.8) 30%, rgba(10,13,19,0.45) 62%, rgba(10,13,19,0) 100%), linear-gradient(rgba(10,13,19,0.1), rgba(10,13,19,0.1)); /* Texte */ --text-primary: #f4f7fc; --text-secondary: #a7b3c6; /* Mesuré le 2026-08-10 : à #5a6879 ce token ne sortait qu'à 3,50:1 sur le fond de page et 2,88:1 sur --bg-elevated, pour du texte de .74rem (« saisie par … » de la page de match) — sous les 4,5:1 du seuil AA. Remonté au MINIMUM de la rampe qui tient 4,5:1 sur toutes les surfaces neutres opaques (pire cas 4,59:1 sur --bg-elevated) : un token « discret » doit rester le plus discret que l'accessibilité autorise, pas plus. Reste à 1,69:1 du corps de texte (--text-body) : la hiérarchie tient. Le contrat est verrouillé par ThemeCssTests.Le_texte_discret_reste_lisible_… ⚠️ LES QUATRE tokens « mention discrète » partagent UNE valeur par thème, et c'est contraint, pas négligé. Il n'existe qu'UN plancher WCAG par thème, et tout token qui porte du texte de taille normale doit s'y tenir : #7a899b en sombre (juste en dessous, #748496 ne mesure que 4,28:1 sur --bg-elevated), #5b6a7f en clair (au-dessus, #607085 tombe à 4,47:1 sur --bg-inset). Une mention « plus discrète que discrète » sort du seuil des DEUX côtés : la nuance et la conformité se disputent le même cran. On garde la conformité. Conséquence à connaître : là où deux de ces tokens se côtoyaient pour hiérarchiser (l'heure et le camp d'une déclaration, par exemple), ils sont désormais identiques. Rendre l'un des deux plus sourd n'est pas la réponse — c'est ce qui l'avait mis à 2,35:1. Reste --text-ghost, volontairement SOUS le seuil : il n'habille que des états inactifs et de la décoration (étoiles éteintes, jours hors mois, séparateurs), que WCAG 1.4.3 exclut. */ --text-muted: #7a899b; --text-hint: #7a899b; --text-bright: #f4f7fc; --text-body: #a7b3c6; --text-soft: #8b98ad; --text-dim: #7a899b; --text-faint: #7a899b; --text-ghost: #2b3849; /* Accent */ --accent: #3fb6ff; --accent-hover: #1465ff; --accent-subtle: rgba(20,101,255,0.14); --accent-light: #8cc6ff; --accent-gradient: linear-gradient(135deg,#1465ff,#3fb6ff); --on-accent: #06090f; /* texte posé sur l'accent */ --on-bright: #0d0e12; /* texte posé sur un aplat vif (or, vert) : sombre dans les 2 thèmes */ --avatar-bg: linear-gradient(135deg,#3B82F6,#22D3EE); --avatar-color: #fff; --avatar-flat: #3B82F6; /* Le logo est un PNG dont le lettrage est blanc : il doit être inversé en thème clair (invert + hue-rotate conserve la teinte bleue des brackets). */ --logo-filter: none; /* Textes de statut (la teinte est assombrie en thème clair pour rester lisible) — teintes maquette. */ --gold-fg: #f3c256; /* Bronze de la 3e place (maquette 7a). Assombri en thème clair pour rester lisible sur blanc, comme le doré — la teinte broadcast n'y mesure que 2,4 pour 1. (Ne pas écrire « --token » suivi de deux-points dans un commentaire de ce bloc : ThemeCssTests lit les déclarations à la regex et y verrait un token déclaré deux fois.) */ --bronze-fg: #c98d5a; --lime-fg: #37d99a; --lime2-fg: #37d99a; --green-fg: #37d99a; --red-fg: #ff425c; --red2-fg: #ff425c; --red-soft-fg: #ff8a95; --indigo-fg: #a5b4fc; --sky-fg: #3fb6ff; --beige-fg: #a7b3c6; --color-danger: #ff425c; /* Aplats de statut (badges, encarts) */ --tint-lime-bg: #1d2a14; --tint-blue-bg: #111d2e; --tint-red-bg: #241016; --tint-red-bg-2: #1a0808; --tint-gold-bg: #1a1200; --tint-gold-bg-2: #33280a; /* Doré LISIBLE sur --tint-gold-bg-2. En sombre c'est le doré habituel (6,67:1) ; en clair il doit être assombri, --gold-fg n'y mesurant que 4,41:1 — sous le seuil AA de 4,5. */ --gold-on-tint: #f3c256; --tint-orange-bg: #241a0c; /* Orange de marquage, distinct du doré : les deux repères d'équipe du tirage se lisaient pareil tant qu'ils partageaient la teinte dorée (cf .bhtl-team--strong / --strongest). */ --orange-fg: #f9a03f; --tint-orange-border: #8a4f12; --tint-green-bg: #0a1f12; --tint-green-border:#166534; --tint-red-border: #7f1d1d; --tint-gold-border: #7c5310; /* Bleu Discord lisible : la teinte de marque #5865F2 ne donne que 3,8:1 sur nos fonds (mesuré), sous le seuil AA de 4,5:1. On l'éclaircit sur sombre et on l'assombrit sur clair pour le TEXTE. L'icône et le liseré gardent la teinte de marque exacte : décoratifs, 3:1 leur suffit. */ --discord-link: #8cc6ff; /* Largeur utile maximale d'un écran de lecture. Au-delà, une grande résolution n'ajoute pas d'information : elle étire les cartes, écarte les colonnes d'un tableau jusqu'à ce que l'œil ne fasse plus le lien entre une ligne et son statut, et éloigne le contenu du regard. Les écrans de la refonte la portaient déjà, chacun avec son propre 1180px en dur — la valeur vit désormais ICI seulement, comme --shell-pad. Invariante par thème : déclarée dans ce bloc uniquement, donc hors du champ de ThemeCssTests (qui ne compare que les deux blocs clairs entre eux), comme les polices ci-dessous. */ --page-max: 1180px; /* Colonne propre à la CONSOLE D'ADMINISTRATION, plus étroite que celle des écrans publics. Ses écrans ne sont pas de la lecture mais du pilotage : listes filtrées, tableaux de six à sept colonnes, tiroirs. Étalés sur 1180px, l'identité d'une ligne et son statut finissent trop loin l'un de l'autre pour que l'œil fasse le lien — c'est le même défaut qui avait fait borner la console (elle n'a plus de sidebar pour la cadrer), en moins visible. 1040px = le point de bascule mobile de la console, plus bas dans ce fichier : au-delà de cette largeur la console est « au bureau », en deçà sa sous-nav se replie en menu. Une seule largeur de référence pour les deux, plutôt qu'un nombre de plus. ⚠️ Toute règle de la console qui pose un PLANCHER (min-width d'un tableau) doit rester sous la piste que cette colonne lui laisse, sinon le tableau défile dès le bureau — cf. .bhadm-org-table. Invariante par thème, déclarée ICI seulement (comme --page-max). */ --console-max: 1040px; /* Bande pleine largeur à CONTENU borné : le fond et la bordure traversent la fenêtre, le contenu ne dépasse pas --page-max. Sert aux écrans plein cadre, où poser un max-width sur la bande elle-même laisserait le fond de page apparaître de chaque côté. Le 100% se résout sur l'élément qui applique la variable (substitution textuelle), et le max() garantit le padding normal tant que la fenêtre est plus étroite que la colonne. Invariante par thème, déclarée ICI seulement (comme --page-max, cf. ThemeCssTests). */ --band-pad-inline: max(16px, calc((100% - var(--page-max)) / 2)); /* Hauteur des TROIS barres de navigation : le shell en session (.appnav), l'accueil public (.bh-topbar) et la console d'administration (.bhcon-head). C'est la même marque au même endroit de l'écran, elle ne doit pas sauter d'un contexte à l'autre. Six règles en dépendent : les trois barres, les deux menus mobiles qui se posent juste dessous, et la hauteur du cockpit de tirage. Elle était recopiée en dur partout, et trois valeurs avaient DÉJÀ divergé : .pp-screen retranchait 56px d'une barre qui en mesurait 60, l'accueil public en faisait 64 et la console aussi. Comme --shell-pad et --page-max, elle ne vit qu'ICI. 80px = logo de 64px + 8px de respiration de part et d'autre. Invariante par thème, déclarée ICI seulement (cf. ThemeCssTests). */ --appnav-h: 80px; /* Polices de la refonte « broadcast e-sport » de l'accueil public (Home.razor). Invariantes par thème : déclarées ici seulement, jamais dans les blocs clairs — donc hors du champ de ThemeCssTests, qui ne compare que les deux blocs clairs entre eux. */ --font-display: 'Barlow Condensed', 'Space Grotesk', system-ui, sans-serif; --font-alt: 'Archivo', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Plaque sombre des emblèmes clairs (argent, platine) : les PNG de rang sont dessinés pour un fond sombre et se délavent sur le blanc du thème clair. Cette plaque reste SOMBRE dans les deux thèmes (donc pas un token de surface thémé) — déclarée ici seulement, comme les polices, elle échappe à ThemeCssTests et garde sa valeur en clair. */ --emblem-plaque: linear-gradient(135deg, #1a1d27, #0b0e14); } /* Thème clair explicite */ :root[data-theme="light"] { color-scheme: light; --bg-page: #f3f5f9; --bg-surface: #ffffff; --bg-input: #ffffff; --bg-inset: #eef1f6; --bg-panel: #ffffff; --bg-elevated: #f6f8fb; --surface-2: #f6f8fb; --bg-hover: #eef2f8; --bg-chip: #e9edf4; --line-soft: #e4e8ef; --line-strong: #d5dbe5; --border: rgba(15,23,42,0.10); --border-input: rgba(15,23,42,0.16); --border-hover: rgba(15,23,42,0.28); --overlay-rgb: 15,23,42; --shadow-strong: rgba(15,23,42,0.16); --scrim: rgba(15,23,42,0.45); --hero-img: url('home-hero-light.jpg'); --hero-img-filter: none; --hero-ink: #0a1020; --hero-ink-soft: #41506b; --app-backdrop-overlay: linear-gradient(rgba(243,245,249,0.62), rgba(243,245,249,0.62)); --text-primary: #0f172a; --text-secondary: #475569; /* Même défaut qu'en sombre, mesuré le 2026-08-10 : à #64748b ce token ne sortait qu'à 4,36:1 sur le fond de page et 4,05:1 sur les puces, pour du texte de 11 à 13 px — sous les 4,5:1 du seuil AA. Même principe de correction : le minimum de la rampe qui tient 4,5:1 sur toutes les surfaces neutres (pire cas 4,69:1). Reste à 1,88:1 du corps de texte. Les trois autres tokens discrets le rejoignent, pour la raison expliquée dans le bloc sombre : mesuré, le clair n'a pas plus de place que lui. Le plus clair qui tienne encore 4,5:1 sur --bg-inset est #5e6d82 (4,65), à 1,04:1 d'ici — un écart invisible à l'œil. ⚠️ À REPORTER À L'IDENTIQUE dans le bloc « Système » plus bas, sinon ThemeCssTests rougit. */ --text-muted: #5b6a7f; --text-hint: #5b6a7f; --text-bright: #0f172a; --text-body: #334155; --text-soft: #5a6b80; --text-dim: #5b6a7f; --text-faint: #5b6a7f; --text-ghost: #b8c1cd; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-subtle: rgba(37,99,235,0.10); --accent-light: #1d63d1; --on-accent: #ffffff; --logo-filter: invert(1) hue-rotate(180deg); --gold-fg: #9a6205; --bronze-fg: #8a5230; --lime-fg: #4f7a22; --lime2-fg: #4a7d1c; --green-fg: #15803d; --red-fg: #c22d2c; --red2-fg: #d02525; --red-soft-fg: #b04141; --indigo-fg: #4f46e5; --sky-fg: #0284c7; --beige-fg: #78685a; --tint-lime-bg: #eaf4dc; --tint-blue-bg: #e4edfb; --tint-red-bg: #fbe7e7; --tint-red-bg-2: #fdecec; --tint-gold-bg: #fdf3de; --tint-gold-bg-2: #fbeec8; --gold-on-tint: #7a4d04; --tint-orange-bg: #fdeedd; --orange-fg: #b45309; --tint-orange-border: #dda06a; --tint-green-bg: #e7f7ed; --tint-green-border:#9ad6b1; --tint-red-border: #f0a9a9; --tint-gold-border: #e2bd7a; --discord-link: #4752C4; } /* Aucun choix explicite (thème « Système ») : on suit la préférence du navigateur. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg-page: #f3f5f9; --bg-surface: #ffffff; --bg-input: #ffffff; --bg-inset: #eef1f6; --bg-panel: #ffffff; --bg-elevated: #f6f8fb; --surface-2: #f6f8fb; --bg-hover: #eef2f8; --bg-chip: #e9edf4; --line-soft: #e4e8ef; --line-strong: #d5dbe5; --border: rgba(15,23,42,0.10); --border-input: rgba(15,23,42,0.16); --border-hover: rgba(15,23,42,0.28); --overlay-rgb: 15,23,42; --shadow-strong: rgba(15,23,42,0.16); --scrim: rgba(15,23,42,0.45); --hero-img: url('home-hero-light.jpg'); --hero-img-filter: none; --hero-ink: #0a1020; --hero-ink-soft: #41506b; --app-backdrop-overlay: linear-gradient(rgba(243,245,249,0.62), rgba(243,245,249,0.62)); --text-primary: #0f172a; --text-secondary: #475569; /* Report à l'identique du bloc « clair explicite » plus haut (cf. sa note : 4,36:1 sur le fond de page et 4,05:1 sur les puces, sous le seuil AA, pour du texte de 11 à 13 px). */ --text-muted: #5b6a7f; --text-hint: #5b6a7f; --text-bright: #0f172a; --text-body: #334155; --text-soft: #5a6b80; --text-dim: #5b6a7f; --text-faint: #5b6a7f; --text-ghost: #b8c1cd; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-subtle: rgba(37,99,235,0.10); --accent-light: #1d63d1; --on-accent: #ffffff; --logo-filter: invert(1) hue-rotate(180deg); --gold-fg: #9a6205; --bronze-fg: #8a5230; --lime-fg: #4f7a22; --lime2-fg: #4a7d1c; --green-fg: #15803d; --red-fg: #c22d2c; --red2-fg: #d02525; --red-soft-fg: #b04141; --indigo-fg: #4f46e5; --sky-fg: #0284c7; --beige-fg: #78685a; --tint-lime-bg: #eaf4dc; --tint-blue-bg: #e4edfb; --tint-red-bg: #fbe7e7; --tint-red-bg-2: #fdecec; --tint-gold-bg: #fdf3de; --tint-gold-bg-2: #fbeec8; --gold-on-tint: #7a4d04; --tint-orange-bg: #fdeedd; --orange-fg: #b45309; --tint-orange-border: #dda06a; --tint-green-bg: #e7f7ed; --tint-green-border:#9ad6b1; --tint-red-border: #f0a9a9; --tint-gold-border: #e2bd7a; --discord-link: #4752C4; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [tabindex="-1"] { outline: none; } html, body { height: 100%; overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--text-primary); background: var(--bg-page); } /* ─── Police des contrôles de formulaire ──────────────────── Un