/** * Variables du front public (F1, étape 4) : couleurs, polices, espacements, * rayons. * * POURQUOI un fichier séparé plutôt qu'un bloc en tête de front.css : la * charte graphique de PromoSport n'est pas encore arrêtée. Le jour où elle * arrive, on doit pouvoir changer CES valeurs et rien d'autre — et surtout * pouvoir le VÉRIFIER, ce qu'un bloc noyé dans une feuille de 400 lignes ne * permet pas. Un fichier dont le diff entier est la charte se relit ; un bloc * se contourne. * * POURQUOI des variables CSS natives plutôt qu'un préprocesseur : elles se * résolvent dans le navigateur, donc `getComputedStyle()` rend la valeur * FINALE — mesurable sur la page réelle (règle anti-mutations 10). Une * variable Sass disparaît à la compilation et ne se mesure plus. * * ⚠️ Ce fichier ne contient AUCUNE règle de mise en page. Il ne déclare que * des variables sur :root. Y ajouter un sélecteur ferait de lui une seconde * feuille de style, et la garantie « seules ces valeurs changent » serait * perdue sans que rien ne le signale. * * ------------------------------------------------------------------ * TROISIÈME PALETTE (T5.49) * ------------------------------------------------------------------ * Le plugin livre deux palettes — `claire` (défaut) et `sombre`, via * l'attribut `palette` des shortcodes. Une TROISIÈME se compose sans toucher * au plugin : redéclarer les variables ci-dessous dans le CSS additionnel du * thème, sur `.pst-palette` ou sur `:root`. Aucun sélecteur du plugin n'a * besoin d'être réécrit, et `!important` n'est jamais nécessaire — toutes les * règles de `front.css` lisent ces variables et aucune ne code une couleur en * dur. * * ⚠️ CE QUI N'EST PAS RETOUCHABLE PAR VARIABLE : LES POINTS DE RUPTURE. * Une condition de `@media` n'accepte pas `var()` — c'est une limite du CSS, * pas un oubli. `@media (max-width: var(--pst-rupture))` ne s'évalue jamais et * la requête est ignorée EN SILENCE : la règle ne s'applique pas, et rien ne * le signale. Les deux paliers du front (430 px et 768 px, repris de la charte * du designer) sont donc écrits en clair dans `front.css`. Un intégrateur qui * veut d'autres paliers doit écrire ses propres `@media` ; il n'existe pas de * moyen de le lui offrir par variable, et prétendre le contraire aurait été * un réglage sans effet. */ :root { /* Couleurs — provisoires, reprises des gabarits de visuel existants. */ --pst-couleur-primaire: #006030; --pst-couleur-primaire-claire: #107040; --pst-couleur-accent: #d4af37; --pst-couleur-texte: #1d2327; --pst-couleur-texte-attenue: #50575e; --pst-couleur-fond: #ffffff; --pst-couleur-fond-attenue: #f6f7f7; --pst-couleur-bordure: #dcdcde; --pst-couleur-annule: #d0021b; /* ------------------------------------------------------------------ * Couleurs DE RÔLE (T5.49). * * POURQUOI elles existent alors que leurs valeurs par défaut renvoient aux * couleurs ci-dessus : une palette sombre a besoin de les DISSOCIER. Le * texte du bouton valait `--pst-couleur-fond` — juste tant que le fond est * blanc, faux dès qu'il ne l'est plus. Nommer le rôle plutôt que la * ressemblance permet à la palette sombre de les séparer sans réécrire une * seule règle de `front.css`. * * ⚠️ AUCUNE DE CES VALEURS PAR DÉFAUT NE CHANGE LE RENDU CLAIR. Chacune * reprend la valeur MESURÉE sur la page réelle avant ce ticket — fond * d'en-tête #f6f7f7, texte d'en-tête #006030, champs #ffffff sur * rgb(29,35,39), bordure de champ #dcdcde, bouton #006030 sur blanc. * ------------------------------------------------------------------ */ /* Surfaces */ --pst-couleur-fond-entete: var( --pst-couleur-fond-attenue ); --pst-couleur-fond-survol: var( --pst-couleur-fond-attenue ); --pst-couleur-fond-champ: var( --pst-couleur-fond ); --pst-couleur-fond-bouton: var( --pst-couleur-primaire ); /* Survol d'une ligne cliquable. En clair, le même aplat qu'avant ; la palette sombre y met le lavis de la maquette. */ --pst-couleur-fond-survol-lien: var( --pst-couleur-fond-attenue ); /* Textes */ --pst-couleur-texte-entete: var( --pst-couleur-primaire ); --pst-couleur-texte-champ: var( --pst-couleur-texte ); /* POURQUOI ce rôle est distinct de --pst-couleur-fond, dont il reprenait la valeur : c'était une COÏNCIDENCE (texte blanc sur bouton vert, fond de page blanc). En sombre les deux divergent, et l'ancienne écriture aurait donné un texte sombre sur un bouton sombre. */ --pst-couleur-texte-bouton: var( --pst-couleur-fond ); /* État « valeur non renseignée » — idiome `dd.empty` de la maquette. */ --pst-couleur-texte-vide: var( --pst-couleur-texte-attenue ); /* Liens */ --pst-couleur-lien: var( --pst-couleur-primaire ); --pst-couleur-lien-survol: var( --pst-couleur-primaire-claire ); /* Bordures */ --pst-couleur-bordure-champ: var( --pst-couleur-bordure ); /* Filet appuyé sous l'en-tête d'un tableau. */ --pst-couleur-bordure-forte: var( --pst-couleur-bordure ); /* Filet entre deux lignes — idiome de la maquette : un filet bas de 1 px, jamais de zébrure. */ --pst-couleur-bordure-attenuee: var( --pst-couleur-bordure ); /* Polices — Cairo est déjà embarquée localement (assets/fonts), jamais chargée depuis un domaine tiers (R18, gate [6/7] du packaging). */ --pst-police: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; --pst-taille-base: 16px; --pst-taille-titre: 24px; --pst-taille-petite: 14px; /* Espacements */ --pst-espace-xs: 4px; --pst-espace-s: 8px; --pst-espace-m: 16px; --pst-espace-l: 24px; --pst-espace-xl: 32px; /* Rayons */ --pst-rayon-s: 4px; --pst-rayon-m: 8px; /* Tableaux (F9) — voir les POURQUOI de front.css. */ --pst-largeur-min-tableau: 520px; --pst-largeur-colonne-etroite: 3.5em; --pst-epaisseur-bordure: 1px; /* Listes de définitions (F9) : l'écart entre un libellé et sa valeur. */ --pst-largeur-libelle: 12em; /* Indicateur de focus clavier (F9.1.b) — voir le POURQUOI de front.css. * * ⚠️ L'ÉPAISSEUR RESTE À 2 px (arbitrage T5.49). La maquette du designer * déclare `outline: 1px solid #F2D27A; outline-offset: 3px`, et seuls * l'offset et la couleur en sont repris : passer de 2 px à 1 px aurait * RÉDUIT un repère d'accessibilité pour se conformer à une maquette qui ne * porte ni tableau ni formulaire, donc qui n'a jamais eu à rendre ce * repère lisible sur une grille de treize lignes. * * Le décalage passe de 2 px à 3 px : c'est la seule valeur par défaut * modifiée par ce ticket, et elle l'est par arbitrage explicite. */ --pst-epaisseur-focus: 2px; --pst-decalage-focus: 3px; /* Couleur du contour de focus, reprise de la maquette (arbitrage T5.49). * Elle remplace `--pst-couleur-accent` (#d4af37), qui la portait jusqu'ici. */ --pst-couleur-focus: #f2d27a; /* Hauteur minimale d'une cible tactile. La maquette la garantit sur tous ses liens (`min-height:44px`) ; le front n'en avait aucune, et 18 à 20 cibles mesuraient moins de 44 px sur les écrans de liste. */ --pst-hauteur-cible: 44px; /* Icônes en ligne (F11.d). Une SEULE dimension : une icône carrée n'a pas besoin de deux valeurs, et deux variables se désaccorderaient. */ --pst-taille-icone: 18px; }