/* ============================================================================ ORKESTROR — LES JETONS (tokens) LA source unique de toutes les valeurs visuelles de l'application. ============================================================================ A QUOI CA SERT, CONCRETEMENT : changer la couleur de l'application, la hauteur des boutons ou les arrondis se fait ICI, sur UNE ligne. Toutes les pages suivent, sans en ouvrir une seule. LA REGLE, ET ELLE EST STRICTE : aucun fichier de composant, aucune page ne doit ecrire une couleur ou une taille EN DUR. Tout passe par un jeton : correct : color: var(--ork-bleu); INTERDIT : color: #0096d6; Pourquoi si strict : une couleur ecrite en dur est invisible depuis ce fichier. Le jour ou l'on change le bleu, elle reste — et personne ne sait pourquoi un bouton est reste de l'ancienne couleur. C'est exactement ce qui est arrive a l'ancien `commun/buttons/buttons-canon.css` : 8 couleurs en dur, impossibles a faire evoluer ensemble. Le script `commun/controle-canon.ps1` verifie cette regle mecaniquement. D'OU VIENNENT CES VALEURS : du theme SSA valide par Leck en 7 iterations (captures a l'appui, cf. `.ressources\Maquettes_Theme_SSA\`). Elles ne sont pas re-decidees ici, elles sont RASSEMBLEES ici. ============================================================================ */ :root { /* ── COULEURS : un seul accent, le bleu (regle 2 du canon SSA) ─────────── */ --ork-bleu: #0096d6; /* accent : liens, lisere de selection, filets */ /* POURQUOI #00658f et non #007dba : sur le bleu pale des boutons secondaires, #007dba ne donnait que 3,59 de contraste -- SOUS le seuil AA de 4,5 exige pour du texte normal. #00658f monte a 5,12 sur ce meme fond (et 6,45 sur blanc) sans changer de famille de couleur. */ --ork-bleu-texte: #00658f; /* texte sur fond pale — lisible (AA) */ --ork-bleu-pale: #cceaf7; /* fond des boutons secondaires et de la selection */ --ork-bleu-clair: #bfe5f5; /* fond du bouton au repos */ /* ── FONDS DES BOUTONS PLEINS — jetons DEDIES, et voici pourquoi ──────── Un bouton plein porte du texte BLANC. Le seuil AA d'un texte normal est de 4,5. Or l'accent --ork-bleu (#0096d6) ne donne que 3,32 avec du blanc, et --ork-erreur (#dc442f) que 4,28 : les deux boutons les plus cliques de l'application etaient sous le seuil. On NE TOUCHE PAS a l'accent lui-meme : il sert aussi de filet, de lisere de selection et de couleur de lien, ou il n'a pas a etre assombri. On declare donc un jeton SEPARE pour le FOND des boutons pleins -- une intention, un jeton. #0079ad sur blanc = 4,84 (etait 3,32) #c93a26 sur blanc = 5,10 (etait 4,28) */ --ork-bleu-fond-actif: #0079ad; /* fond d'un bouton principal (texte blanc) */ --ork-erreur-fond-actif: #c93a26; /* fond d'un bouton destructeur (texte blanc) */ /* ── NEUTRES DE STRUCTURE ──────────────────────────────────────────────── */ --ork-fond-app: #dddddd; /* le fond gris qui separe les blocs (regle 1) */ --ork-blanc: #ffffff; /* panneaux, rail, champs */ --ork-gris-clair: #f3f3f3; /* bandeau, en-tete de panneau, en-tete de tableau */ --ork-gris-moyen: #e6e6e6; /* survol de navigation, separateurs */ --ork-gris-pied: #d9d9d9; /* pied de panneau, bordure des champs */ --ork-bordure: #d2d2d2; /* bordure des panneaux, filets de tableau */ /* ── TEXTES : quatre niveaux, pas un de plus ───────────────────────────── */ --ork-texte: #333333; /* texte principal et titres */ --ork-valeur: #000000; /* valeurs de donnees (cellules, fiches) */ --ork-label: #666666; /* libelles secondaires */ /* POURQUOI #6e6e6e — et pourquoi le commentaire precedent etait FAUX : il annoncait « 4,0 sur #f3f3f3 » comme une reussite. 4,0 n'est pas une reussite : le seuil AA d'un TEXTE NORMAL est 4,5, pas 4,0 (le 3,0 ne vaut que pour les elements non textuels et le texte de grande taille). #767676 donnait 4,54 sur blanc mais 4,09 sur le gris #f3f3f3 et 3,64 sur le gris des bandeaux #e6e6e6 : deux fonds sur trois etaient hors norme. #6e6e6e passe les TROIS : 5,10 sur blanc, 4,60 sur #f3f3f3, 4,09 sur #e6e6e6 -- et garde l'effet « texte tertiaire » (il reste plus clair que --ork-label #666666). Le dernier point (4,09 sur #e6e6e6) reste sous le seuil : on n'ecrit donc PAS de texte faible sur un bandeau gris. */ --ork-faible: #6e6e6e; /* descriptions, placeholders */ /* ── ETATS : uniquement pour DIRE quelque chose, jamais pour decorer ───── */ --ork-ok: #42a425; --ork-avertissement: #f4b51e; /* PASTILLE seulement — illisible en fond de texte */ --ork-erreur: #dc442f; /* action destructrice assumee (regle 27) */ /* ── GEOMETRIE : SSA est CARRE (regle 8) ───────────────────────────────── */ --ork-rayon: 0; /* par defaut : angles droits */ --ork-rayon-panneau: 5px; /* seul arrondi tolere : haut/bas des panneaux */ /* ── HAUTEURS : DECLAREES, jamais calculees (regle 28) ─────────────────── */ /* Le probleme resolu par ces trois lignes : tant que la hauteur d'un bouton etait le RESULTAT d'un calcul (padding + taille du texte), elle changeait des qu'un des deux bougeait — d'ou des boutons de hauteurs differentes dans une meme barre. Declaree, elle ne peut plus deriver. */ --ork-h-btn: 28px; /* TOUS les boutons ordinaires */ --ork-h-btn-lg: 38px; /* exception declaree : bouton pleine largeur */ --ork-h-entete-bloc: 40px; /* les 3 en-tetes de bloc, a la meme hauteur */ /* ── BANDEAU D'EN-TETE DE BLOC — CANON GRAPHIQUE (Leck, 26/07/2026) ── La reference retenue est le bandeau des ecrans de tableaux (« Gerer les eleves », « Gerer les dossiers d'inscription »), releve a l'ecran : fond #e6e6e6, texte #333333, filet du bas #d2d2d2. Elle s'applique DESORMAIS AUX TROIS BLOCS -- Menu, Liste, Principal -- pour que l'identite visuelle soit la meme sur tous les ecrans. POURQUOI DES JETONS DEDIES alors que les teintes existent deja plus haut : `--ork-gris-moyen` porte la meme valeur, mais son ROLE declare est « survol de navigation, separateurs ». S'en servir pour les bandeaux lierait deux usages qui n'ont aucune raison d'evoluer ensemble -- changer la couleur de survol repeindrait tous les bandeaux. Un jeton par intention. */ --ork-entete-bloc-fond: #e6e6e6; --ork-entete-bloc-texte: #333333; --ork-entete-bloc-filet: #d2d2d2; --ork-h-bandeau: 60px; /* bandeau du haut */ --ork-rail-largeur: 285px; /* rail deploye */ --ork-rail-plie: 76px; /* rail replie */ /* ── ESPACEMENTS ───────────────────────────────────────────────────────── */ /* CANON OFFICIEL (Leck, 26/07/2026) : 8 px sur TOUT le perimetre des ecrans -- haut, bas, gauche, droite ET entre les blocs. Une seule valeur commande les cinq. Elle valait 5 px ici alors que theme-ssa.css en utilisait 8 : les deux referentiels divergeaient en silence, et c'est theme-ssa qui gagnait. */ --ork-gouttiere: 8px; --ork-espace-boutons: 5px; /* entre deux boutons d'une meme barre */ /* ── TYPOGRAPHIE ───────────────────────────────────────────────────────── */ --ork-police: "Segoe UI", system-ui, -apple-system, sans-serif; /* 12 px, et c'est la VRAIE valeur de l'ecran. Ce jeton disait 13 px alors que `theme-ssa.css` ecrivait `font-size: 12px` EN DUR sur le corps de la page : le jeton etait mort -- on pouvait le changer sans que rien ne bouge. C'est le pire etat possible pour un jeton, car il fait croire a une commande qui n'en est pas une. theme-ssa.css lit desormais ce jeton, et la valeur qui y figure est celle que Leck a validee : 12 px, la cle de la densite « console » du canon SSA. */ --ork-taille-base: 12px; --ork-taille-btn: 12px; --ork-graisse-btn: 700; /* ── TABLEAUX : densite forte « console » (regle 6 du canon SSA) ────────── */ /* La densite est LA signature d'une grille SSA : ~26 px par ligne, la ou une grille Bootstrap en fait ~40. Declaree ICI, elle se regle en UN point pour toutes les pages — au lieu d'etre le RESULTAT d'un padding plus une taille de police eparpilles dans le theme, qui derivait des qu'un des deux bougeait (meme piege que la hauteur des boutons, cf. --ork-h-btn). */ --ork-h-ligne-tableau: 26px; /* hauteur d'UNE ligne (th comme td) */ --ork-taille-tableau: 12px; /* texte des cellules du corps */ --ork-taille-entete-tableau: 11px; /* texte des en-tetes (th) — un cran plus petit */ /* PAS de `--ork-h-toolbar` ici, et c'est VOLONTAIRE (26/07/2026). Il valait 38 px pendant que `--ork-h-entete-bloc` valait 40 px : deux jetons pour UN SEUL objet -- le bandeau gris qui ouvre un bloc. La barre d'outils d'un tableau EST un bandeau d'en-tete de bloc (canon 3), elle n'a aucune raison d'avoir sa propre hauteur. Resultat mesure a l'ecran : 39 px sur 23 pages au lieu de 40. C'est la RECIDIVE EXACTE du piege `--ork-gouttiere` 5 px contre `--ssa-gouttiere` 8 px : deux referentiels pour une meme intention divergent toujours, et en silence. UN SEUL JETON PAR INTENTION. `commun/tableaux.css` lit desormais `--ork-h-entete-bloc`. */ /* ── TAGS D'ETAT : le FOND ARRONDI colore des valeurs de liste ──────────── */ /* A QUOI CA SERT : une colonne qui ne porte qu'un CHOIX FERME (Sexe, Mention, Statut...) se lit mieux avec une petite etiquette a fond colore, facon SharePoint, qu'avec du texte brut. Ces jetons sont la PALETTE de ces etiquettes ; le dessin (forme, taille) vit dans `commun/etats-tags.css`. REGLE DE LECTURE : chaque famille = un FOND doux (pastel) + un TEXTE fonce assorti, choisi pour rester lisible sur ce fond (contraste >= 4,5). Le fond dit la COULEUR, le texte porte le SENS. */ --ork-tag-rayon: 8px; /* « legerement arrondi » : ni carre, ni pilule pleine */ /* Sexe : deux teintes DOUCES et neutres (surtout pas rouge = « erreur ») */ --ork-tag-rose-fond: #fbe7f2; /* Fille : fond rose pale */ --ork-tag-rose-texte: #b03a76; /* Fille : texte magenta fonce */ --ork-tag-bleu-fond: #dbeafe; /* Garcon : fond bleu pale */ --ork-tag-bleu-texte: #1d4ed8; /* Garcon : texte bleu fonce */ /* Mention : un DEGRADE lisible du VERT (haut) au ROUGE (bas), 6 crans */ --ork-tag-vertfonce-fond: #cdeccf; /* Excellent : vert profond */ --ork-tag-vertfonce-texte: #0b6a1e; --ork-tag-vert-fond: #dff6dd; /* Tres Bien / Actif : vert */ --ork-tag-vert-texte: #0f7a12; --ork-tag-lime-fond: #e7f2cf; /* Bien : vert-tilleul */ --ork-tag-lime-texte: #5a7710; --ork-tag-ambre-fond: #fdf1c9; /* Assez Bien : ambre */ --ork-tag-ambre-texte: #8a6a00; --ork-tag-orange-fond: #fde3cf; /* Passable : orange */ --ork-tag-orange-texte: #9a4d16; --ork-tag-rouge-fond: #fbe0e2; /* Insuffisant : rouge */ --ork-tag-rouge-texte: #a4262c; /* Neutre : pour les valeurs « sans couleur » (Archive, inconnu...) */ --ork-tag-gris-fond: #eeeeee; --ork-tag-gris-texte: #5f5f5f; /* ── TUILES KPI : la PASTILLE D'ICONE des cartes de comptage ──────────── A QUOI CA SERT : les cartes du haut d'ecran (« 312 Eleves », « 8 Alertes ») portent un petit carre colore avec une icone dedans. Ces couleurs etaient RECOPIEES A LA MAIN dans 254 attributs `style="background:#...;color:#..."` repartis sur 24 pages -- toujours les MEMES 5 duos. Une couleur ecrite la est invisible depuis ce fichier : le jour ou la charte bouge, elle reste. Le dessin des tuiles vit dans `commun/tuiles.css`. POURQUOI DES JETONS DEDIES alors que `--ork-tag-bleu-fond` porte deja exactement #dbeafe : ce sont DEUX INTENTIONS differentes. Un tag d'etat dit « ce dossier est Actif » ; une pastille de tuile dit « voici la famille de ce compteur ». Les lier ferait qu'en repeignant les tags on repeindrait les tableaux de bord. Meme raisonnement que --ork-gris-moyen contre --ork-entete-bloc-fond, plus haut : UN JETON PAR INTENTION, meme si la valeur est identique aujourd'hui. */ --ork-tuile-vert-fond: #dcfce7; /* reussite, effectifs, presence */ --ork-tuile-vert-texte: #15803d; --ork-tuile-bleu-fond: #dbeafe; /* information, volumes, comptages */ --ork-tuile-bleu-texte: #1d4ed8; --ork-tuile-ambre-fond: #fff3cd; /* en attente, rappel, echeance */ --ork-tuile-ambre-texte: #D4860A; --ork-tuile-rouge-fond: #fee2e2; /* alerte, retard, impaye */ --ork-tuile-rouge-texte: #dc2626; --ork-tuile-violet-fond: #e9d5ff; /* categorie a part (RH, achats) */ --ork-tuile-violet-texte: #7c3aed; /* ── COULEURS DE MARQUE (heritees, anterieures au theme SSA) ──────────── Ces deux teintes sont l'identite historique d'Orkestror : le marine du logo et l'or du sigle. Le theme SSA ne les utilise plus a l'ecran (il n'a qu'un accent, le bleu), mais elles restent la SOURCE des variables heritees du pont ci-dessous et du favicon. Les nommer ici les rend visibles et modifiables en un point -- au lieu d'etre recopiees dans 56 pages sous forme d'URL encodee (`%230A4A7A`), ou aucun controle ne les voyait. */ --ork-marine: #0A4A7A; /* marine du logo Orkestror */ --ork-or: #D4860A; /* or du sigle « Orke »stror */ /* ══════════════════════════════════════════════════════════════════════ AJOUTS DU 26/07/2026 — LES 273 DERNIERES COULEURS DES PAGES ══════════════════════════════════════════════════════════════════════ D'OU VIENNENT CES JETONS : d'une passe qui a vide les blocs `