/* Identité visuelle de Novastar — un seul endroit où elle est décidée. * * L'application était sombre (fond #060814, color-scheme: dark). La * spécification UX v2 demande l'inverse : blanc / gris métal, cartes presque * blanches, texte anthracite, violet lilas en accent. Les valeurs ci-dessous * reprennent celles de la maquette de référence — c'est l'identité choisie * par le produit, pas une proposition de plus. * * Tout passe par ces variables. Une couleur écrite en dur dans un composant * est un endroit que le prochain changement d'identité oubliera. */ :root { color-scheme: light; /* --- Texte ------------------------------------------------------------ * * Les valeurs viennent du brief « Public / Connecté / Admin » (octobre * 2026), qui fixe la palette validée. Elles remplacent les teintes * précédentes, choisies avant que la direction artistique soit arrêtée. */ --ink: #151922; /* anthracite, le texte courant */ --ink-2: #344054; /* texte long secondaire, pleinement lisible */ --muted: #667085; /* texte secondaire du brief : 5,0:1 sur blanc */ --muted-2: #667085; /* rien de plus clair : en dessous, illisible */ /* Le texte secondaire posé sur le gris métal du brief : #667085 sur #eef0f3 ne donne que 4,36:1, sous le seuil AA de 4,5. Assombri de 10 %, il monte à 5,1:1 sur métal et reste à 5,9:1 sur blanc. */ --muted-sur-metal: #5c6578; /* --- Fonds ------------------------------------------------------------ */ --paper: #fbfbfd; /* le fond de la page, presque blanc */ --metal: #eef0f3; /* gris métal des surfaces creuses */ --card: #ffffff; /* les cartes */ --card-2: #fcfcfe; /* dégradé bas de carte, à peine perceptible */ --line: rgba(21, 25, 34, .09); --line-strong: rgba(21, 25, 34, .16); /* --- Accent : le violet porte les actions et les sélections ------------ */ --violet: #7c3aed; /* violet principal : 5,7:1 sur blanc */ --violet-2: #9b6df1; /* violet clair : décor seulement, 3,6:1 */ --violet-dark: #5530a3; /* prune : texte violet sur fond clair, 9:1 */ --lilac: #c4a4ff; /* lilas */ --lilac-soft: #eee5ff; /* lilas très clair */ --lilac-softer: #f7f2ff; /* --- Les surfaces, qui sont l'identité du tennis --------------------- * * Ocre de la terre battue, vert du gazon, bleu du dur. Ce sont les seules * couleurs que ce sport possède en propre, et personne d'autre ne peut * les revendiquer. Elles ne servaient qu'au décor du fond ; elles entrent * maintenant dans l'interface, là où une surface est en jeu. */ --terre: #c0632f; --terre-doux: #fcefe7; --gazon: #2f7a44; --gazon-doux: #e8f5ea; --dur: #2567b5; --dur-doux: #e7f0fa; /* --- Sens ------------------------------------------------------------- */ /* Le vert et le rouge ne servent QU'aux évolutions. Une erreur ou une alerte se reconnaît à son texte, son icône et sa présentation, jamais à la seule couleur. */ --up: #16845b; /* évolution positive : 4,7:1 sur blanc */ --up-soft: #e6f4ee; --down: #d92d20; /* évolution négative : 4,8:1 sur blanc */ --down-soft: #fdecea; /* Les mêmes teintes, pour le TEXTE. Les deux valeurs ci-dessus sont celles du brief, et elles ne bougent pas : elles servent aux traits, aux bordures et aux courbes, où le seuil de contraste est de 3:1. Mais Novastar n'écrit jamais une évolution sur du blanc pur — elle est posée sur le gris métal #eef0f3 ou sur sa propre pastille. Mesuré sur le rendu : 4,10:1 et 4,23:1, sous le seuil AA de 4,5 pour du texte de 12,5 px. Les teintes ci-dessous sont les mêmes, assombries de 15 % : 5,3:1 sur le gris métal, 5,4:1 sur la pastille et 6,1:1 sur blanc. La famille de teinte, donc la direction artistique, est conservée. */ --up-texte: #13704d; --down-texte: #b8261b; /* Les messages d'erreur et d'alerte (pas des évolutions). */ --alerte: #b42318; --alerte-soft: #fef3f2; --info-soft: #f2f4f7; /* Accent stars : la monnaie fictive, et rien d'autre. */ --gold: #996b00; /* 4,7:1 sur blanc */ /* Et sur sa propre pastille pâle : 4,37:1, donc sous le seuil. */ --gold-texte: #8a6000; --gold-bright: #e8b33a; /* l'étoile elle-même, décorative */ --gold-soft: #fff6dd; /* --- Graphique -------------------------------------------------------- */ --gridline: #e6e3ec; --baseline: #b9b3c6; /* Quatre couleurs pour la comparaison, dans cet ordre, jamais réassignées. Choisies pour tenir sur fond CLAIR : les anciennes avaient été réglées pour un fond noir et pâlissaient ici. Elles restent distinguables en deutéranopie, le cas le plus fréquent. */ --cmp-1: #2563c7; /* bleu */ --cmp-2: #c2410c; /* orange brûlé */ --cmp-3: #0f766e; /* sarcelle */ --cmp-4: #a21caf; /* magenta */ /* --- Ombres ----------------------------------------------------------- */ --ombre: 0 18px 48px rgba(67, 51, 98, .10), 0 2px 6px rgba(48, 39, 66, .04); --ombre-haute: 0 24px 64px rgba(88, 61, 140, .15), 0 4px 12px rgba(48, 39, 66, .06); /* --- Rythme ----------------------------------------------------------- */ --rayon: 18px; --rayon-petit: 12px; --gouttiere: 16px; /* --- Décor du court (renseigné par le JavaScript) --------------------- */ --court-surface: #cfe0f2; --court-pourtour: #e8eef6; --court-lignes: rgba(255, 255, 255, .9); /* --- Typographie ------------------------------------------------------- * * Deux familles, deux rôles. Archivo — une grotesque légèrement étroite, * hébergée ici même — porte les titres et les grands chiffres : c'est elle * qui fait la différence entre « un projet » et « un produit ». Le texte * courant reste en police système, qui est déjà excellente et ne coûte * aucun téléchargement. * * `tabular-nums` partout où des chiffres s'alignent : un Elo qui change de * largeur en passant de 1 899 à 1 900 fait sautiller la colonne. */ --police-titre: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --police-texte: system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif; /* --- Encoche et barre d'accueil de l'iPhone --------------------------- */ /* * Avec `viewport-fit=cover` dans la balise viewport, la page s'étend sous * l'encoche et sous la barre d'accueil au lieu de s'arrêter à des bandes * noires. C'est ce qu'il faut pour une application installée sur l'écran * d'accueil — mais sans ces marges, le titre passerait SOUS l'encoche et * le bas de page sous la barre d'accueil. * * `env()` vaut zéro partout ailleurs (ordinateur, Android sans découpe, * navigateur ouvert normalement), et le second argument couvre les * navigateurs qui ne connaissent pas `env()` du tout. * * Passer par des variables plutôt que d'écrire `env()` à chaque endroit a * deux avantages : un seul point de réglage, et surtout on peut les * redéfinir depuis la console pour voir le résultat sur une machine qui * n'a pas d'encoche — c'est ainsi que cette mise en page a été vérifiée. */ --encoche-haut: env(safe-area-inset-top, 0px); --encoche-bas: env(safe-area-inset-bottom, 0px); --encoche-gauche: env(safe-area-inset-left, 0px); --encoche-droite: env(safe-area-inset-right, 0px); } /* Hébergées localement, jamais depuis un CDN tiers : voir web/fonts/README.md. `font-display: swap` — le texte s'affiche tout de suite dans la police système et bascule quand Archivo arrive, plutôt que de laisser un blanc. */ @font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../fonts/Archivo-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* Le produit assume un seul monde visuel, clair, comme la spécification le * demande. Pas de thème sombre à moitié fait : il vaut mieux une identité * tenue qu'un second thème dont personne ne vérifie les contrastes. * * On neutralise donc explicitement la préférence système plutôt que de la * laisser agir sur les contrôles de formulaire, qui basculeraient seuls et * dépareilleraient le reste de la page. */ @media (prefers-color-scheme: dark) { :root { color-scheme: light; } }