/* Jetons visuels — source unique de toute valeur visuelle du site. ============================================================================ Ce fichier est le SEUL endroit du projet où une couleur, une taille de caractère, un rayon, une ombre ou une largeur maximale est écrite en clair. Partout ailleurs — base.css, components.css, gabarits — on ne lit que des variables déclarées ici. Une couleur en dur dans un autre fichier est une régression, et un test la refuse. Les valeurs sont reprises une à une de l'en-tête de DESIGN.md (_bmad-output/planning-artifacts/ux-designs/…/DESIGN.md), qui en est la source. Ne pas les modifier ici sans les modifier là-bas : le test IdentiteVisuelleTest compare les deux fichiers et échoue au premier écart. Variables CSS natives, et non préprocesseur : le projet n'a pas de chaîne de compilation d'actifs et n'en veut pas. Une variable CSS se lit dans le navigateur, se surcharge par media query, et ne demande aucun outil. */ /* ========================================================================== Nunito, auto-hébergée ========================================================================== Aucun appel à un service tiers : le site traite des données de mineurs, et une requête vers un hébergeur de polices transmettrait l'adresse IP de chaque visiteur à ce tiers. La fonte distribuée est VARIABLE : un seul fichier par sous-ensemble couvre les trois graisses employées (400, 700, 800), d'où le `font-weight` donné en intervalle plutôt qu'en valeur. Deux sous-ensembles suffisent à un site francophone, `latin` et `latin-ext` ; les sous-ensembles cyrillique et vietnamien servis par Google sont écartés. Licence SIL Open Font License 1.1, texte joint dans ../fonts/OFL.txt. `font-display: swap` : si le fichier tarde ou manque, le texte s'affiche immédiatement dans la pile de repli et la page ne reste jamais vide. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/nunito-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/nunito-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; } :root { /* ======================================================================== Couleurs ======================================================================== Emploi unique de chaque couleur, et cette règle prime sur le goût : bleu pour agir, vert pour réussir, rouge pour l'erreur et rien d'autre, jaune et or pour l'attente, vert anis décoratif sans jamais porter de sens. Les six `brand-*` sont mesurés sur le fichier de logo. Ils sont saturés pour l'impression et NE PASSENT PAS les seuils de contraste : jamais en texte, jamais en fond de bouton. Ils servent le logo, les filets et les liserés. Les jetons applicatifs — primary, success, warning, error — en sont les versions assombries, faites pour porter du texte blanc. */ /* Surfaces et texte */ --color-background: #ffffff; --color-surface: #ffffff; --color-surface-container: #f6f7f9; --color-surface-container-high: #eef0f3; --color-on-surface: #1c1f23; --color-on-surface-variant: #565d66; --color-outline: #c6ccd4; --color-outline-variant: #e3e7ec; /* Bleu — agir : boutons principaux, liens, focus */ --color-primary: #00609e; --color-on-primary: #ffffff; --color-primary-container: #dceaf6; --color-on-primary-container: #00304f; /* Vert — réussir : inscription enregistrée, place confirmée */ --color-success: #2f7d2b; --color-on-success: #ffffff; --color-success-container: #e2f2df; --color-on-success-container: #1a4718; /* Jaune et or — attendre : liste d'attente, tournoi complet */ --color-warning: #8a6100; --color-on-warning: #ffffff; --color-warning-container: #fdf0cf; --color-on-warning-container: #4a3300; /* Rouge — l'erreur, et rien d'autre */ --color-error: #b3261e; --color-on-error: #ffffff; --color-error-container: #fbe3e1; --color-on-error-container: #601410; /* Couleurs du logo — décor seulement : filets et liserés, jamais de texte ni de fond de bouton, leur contraste ne passant aucun seuil. Un test refuse toute déclaration de couleur, de fond ou de bordure qui les référence hors de ce fichier. RÉSERVÉS : aucune feuille ne les emploie aujourd'hui, et c'est normal — le socle n'a pas de filet décoratif. Ce ne sont pas des orphelins. */ --color-brand-red: #ec1c24; --color-brand-blue: #0271bc; --color-brand-yellow: #febe16; --color-brand-lime: #bbd632; --color-brand-green: #20b80f; --color-brand-gold: #fec907; /* Accent de l'espace organisateur (13 septembre 2026) — distinct du bleu primary des pages publiques, pour signaler visuellement le contexte. Dérivés de la teinte du vert anis (HSL 70°, S 67 %, L 52 %), jamais le jeton brand-lime lui-même : un test interdit tout jeton brand-* en fond, y compris décoratif. Même geste que primary/primary-container : une version assombrie (usage décoratif uniquement, jamais mesurée pour du texte) et une version très diluée (fond de dégradé, contraste vérifié 14,8:1 avec on-surface). */ --color-organisateur-accent: #738613; --color-organisateur-accent-container: #f1f5dd; /* ======================================================================== Typographie ======================================================================== Une seule famille, différenciée par la graisse : 800 pour les titres, 700 pour les libellés de champs et les intertitres, 400 pour le texte courant. La pile de repli est volontairement composée de fontes présentes sur les systèmes courants : si le fichier de Nunito manque ou échoue, le texte reste lisible et la mise en page ne casse pas. */ --font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --text-display-lg-size: 40px; --text-display-lg-weight: 800; --text-display-lg-leading: 1.1; --text-display-lg-tracking: -0.02em; /* Variante du plus grand titre sous le point de bascule téléphone. */ --text-display-lg-mobile-size: 34px; --text-display-lg-mobile-weight: 800; --text-display-lg-mobile-leading: 1.15; --text-display-lg-mobile-tracking: -0.025em; --text-headline-md-size: 30px; --text-headline-md-weight: 700; --text-headline-md-leading: 1.25; --text-headline-sm-size: 23px; --text-headline-sm-weight: 700; --text-headline-sm-leading: 1.3; --text-body-lg-size: 18px; --text-body-lg-weight: 400; --text-body-lg-leading: 1.6; --text-body-md-size: 16px; --text-body-md-weight: 400; --text-body-md-leading: 1.6; --text-label-field-size: 15px; --text-label-field-weight: 700; --text-label-field-leading: 1.4; --text-label-caps-size: 12px; --text-label-caps-weight: 700; --text-label-caps-leading: 1.4; --text-label-caps-tracking: 0.1em; --text-caption-size: 13px; --text-caption-weight: 400; --text-caption-leading: 1.45; /* ======================================================================== Formes ======================================================================== Rondeurs affirmées (revu le 13 septembre 2026, était « modérées ») : nettement plus visibles qu'à l'origine, tout en restant cohérentes avec le logo plutôt que ludiques au point de perdre le sérieux nécessaire à l'espace organisateur. La pilule est réservée aux badges d'état, où elle signale un statut. */ --radius-sm: 0.375rem; --radius-default: 0.625rem; --radius-md: 0.875rem; --radius-lg: 1.125rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* ======================================================================== Rythme d'espacement ======================================================================== Tout espacement est un multiple de l'unité. Les quatre valeurs nommées viennent de DESIGN.md ; l'échelle numérotée en est dérivée par calcul, pour qu'aucun multiple ne puisse dériver de l'unité. */ --space-unit: 8px; --space-gutter: 24px; --space-margin-mobile: 16px; --space-margin-desktop: 40px; --space-section-gap: 56px; --space-1: var(--space-unit); --space-2: calc(2 * var(--space-unit)); --space-3: calc(3 * var(--space-unit)); --space-4: calc(4 * var(--space-unit)); --space-5: calc(5 * var(--space-unit)); --space-6: calc(6 * var(--space-unit)); --space-7: calc(7 * var(--space-unit)); /* Demi-unité : seul écart toléré au rythme, pour l'intérieur des petits composants — pilule d'un badge, doublure d'un champ. */ --space-half: calc(0.5 * var(--space-unit)); /* ======================================================================== Dimensions de composants et largeurs de colonne ======================================================================== */ --field-height: 50px; --button-height-primary: 54px; --content-max-width: 720px; --admin-max-width: 1200px; /* Le logo, et son médaillon (13 septembre 2026 — trop discret sinon) : le médaillon est le disque en relief qui porte le logo ; --logo-height/ -mobile ne dimensionnent que le fichier lui-même, plus petit que son médaillon pour laisser un anneau clair tout autour. Depuis le détourage du fichier (13 septembre 2026, même jour), le dessin peut occuper une plus large part du disque : ses angles ne sont plus un pavé blanc qui dépassait du cercle. */ --logo-medallion: 104px; --logo-medallion-mobile: 84px; --logo-height: 78px; --logo-height-mobile: 62px; /* Anneau de focus et cible tactile minimale : deux exigences d'accessibilité tenues par une variable plutôt que par la vigilance. */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --touch-target-min: 44px; /* ======================================================================== Profondeur ======================================================================== Deux niveaux, pas trois. Ombres larges et très peu opaques : elles doivent se sentir sans se voir. Aucune ombre dure ni décalée. */ --shadow-card: 0 2px 8px rgba(28, 31, 35, 0.06), 0 8px 24px rgba(28, 31, 35, 0.05); --shadow-raised: 0 4px 14px rgba(28, 31, 35, 0.10); --shadow-deep: 0 2px 8px rgba(28, 31, 35, 0.05), 0 24px 48px -20px rgba(28, 31, 35, 0.28); /* ======================================================================== Voile de l'affiche ======================================================================== Les deux dégradés radiaux de la maquette retenue — bleu de marque au coin haut-gauche, jaune de marque au coin haut-droit — que l'implémen- tation du 13 septembre n'avait pas repris : l'affiche s'était contentée du seul dégradé linéaire de la carte principale, et paraissait plate. Écrits ici en valeurs explicites, comme les ombres, et pour la même raison : ce sont des couleurs, et une couleur ne s'écrit que dans ce fichier. Elles reprennent exactement --color-brand-blue (#0271bc) et --color-brand-yellow (#febe16), dont DESIGN.md réserve l'emploi au décor — jamais à du texte ni à un fond de bouton, ce qu'un voile à 10 % d'opacité n'est pas. */ --voile-affiche: radial-gradient(140% 90% at 15% -10%, rgba(2, 113, 188, 0.10), transparent 55%), radial-gradient(120% 80% at 100% 0%, rgba(254, 190, 22, 0.14), transparent 50%); /* ======================================================================== Mouvement ======================================================================== Une seule durée et une seule courbe, pour que rien ne puisse diverger d'un composant à l'autre. 120 ms : assez pour qu'un changement d'état se perçoive, trop court pour qu'on l'attende. La courbe décélère vite puis s'installe — jamais de rebond, jamais de retour en arrière. Ces deux jetons ne dispensent pas de `prefers-reduced-motion`, honoré une fois pour toutes en fin de base.css : la préférence y ramène toute durée à zéro, quelle que soit la valeur écrite ici. */ --motion-quick: 120ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1); /* ======================================================================== Points de bascule ======================================================================== Déclarés pour être lus, non pour être employés : une variable CSS ne peut pas figurer dans la condition d'une media query. L'arrimage est donc tenu par un test : tout littéral écrit dans une media query de base.css ou de components.css doit se retrouver ici, et un point de bascule inventé sur place fait rougir la construction. --breakpoint-md est le point de bascule général. --breakpoint-lg est RÉSERVÉ à l'espace organisateur des récits 1.5 et 2.1, qui bascule à cette largeur ; aucune media query ne l'emploie encore. --breakpoint-xl (13 septembre 2026) est celui à partir duquel un tableau peut déborder la colonne de lecture sans sortir de l'écran : 1040 px de tableau plus ses deux marges de 40 px. */ --breakpoint-md: 640px; --breakpoint-lg: 1024px; --breakpoint-xl: 1120px; /* ======================================================================== Jetons déclarés et pas encore employés ======================================================================== Les voici nommés, pour qu'on distingue une réserve d'un orphelin. Tous viennent de DESIGN.md ou de son échelle, et aucun n'est à supprimer : --color-brand-* filets et liserés décoratifs (voir plus haut) --text-body-lg-weight le texte courant agrandi reste en 400, la déclaration explicite servira dès qu'un écran l'emploiera sur autre chose qu'un paragraphe --breakpoint-* lus par les tests, jamais par le navigateur Y figuraient jusqu'au 13 septembre 2026 --radius-md, --space-gutter, --space-4 et --space-6 : la refonte « affiche » les emploie désormais (respectivement la fiche de faits, la gouttière de l'affiche en deux colonnes, le rythme intérieur des groupes de formulaire). */ }