/* ========================================================================== MAP+ — socle de jetons Fichier unique. Aucune couleur, aucune taille, aucun rayon ne doit être écrit en dur ailleurs que dans ce fichier. RÈGLE FONDATRICE : une couleur d'IDENTITÉ n'exprime jamais une valeur. Les quatre couleurs de domaine servent à reconnaître un domaine (pastille, sommet du radar, remplissage d'une jauge). Elles ne colorent jamais un texte, jamais un chiffre, jamais un état. Les couleurs d'ÉTAT sont rares : elles ne disent que Oui, Non, ou non renseigné. ========================================================================== */ /* Inter, auto-hebergee. Aucun appel vers l'exterieur. Version variable sous-ensemblee aux caracteres de l'outil : 406 glyphes, 63,5 Ko, axe de graisse 100-900 conserve. SIL Open Font License 1.1 — voir inter-LICENSE.txt DEPLACEE A LA RACINE LE 04/09/2026, ET ELLE N'AVAIT JAMAIS CHARGE. Le fichier vivait dans map-2847/, ou il avait ete pose avant que ce fichier de jetons n'existe. Or l'URL ci-dessous est RELATIVE A LA FEUILLE DE STYLE, pas a la page : depuis /jetons.css elle designait /inter.woff2, qui n'existait pas. Toutes les pages du site, l'outil compris, rendaient donc 404 sur la police et tombaient sur le repli. PERSONNE NE L'A VU PENDANT DIX JOURS parce que le repli est propre : SF Pro sur Mac, Segoe UI sur Windows. Un defaut qui ressemble a une intention ne se signale pas tout seul — il a fallu ecouter les requetes en echec d'un navigateur pilote pour l'entendre. */ @font-face{ font-family:"Inter"; src:url("inter.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } :root{ /* --- Police ----------------------------------------------------------- */ /* Inter est auto-hébergé (lot 0.5). Aucun appel externe. */ --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* --- Échelle typographique -------------------------------------------- */ /* Six niveaux. Toute taille absente de cette liste est un défaut. */ --t-micro: 13px; /* mentions, libellés d'axes du radar */ --t-petit: 15px; /* étiquettes de champ, légendes, pied de page */ --t-base: 17px; /* corps : questions, boutons, expériences */ --t-moyen: 20px; /* titres de bloc, titres de carte */ --t-grand: 25px; /* titre de page, marque, en-tête d'impression */ --t-titre: 30px; /* titre de la page EXPÉRIENCES */ /* --- Échelle d'impression ---------------------------------------------- */ /* Le papier n'est pas l'écran : trois niveaux suffisent, et ils sont en */ /* points, pas en pixels. Toute taille d'impression écrite en dur ailleurs */ /* est un défaut, au même titre que sur l'échelle d'écran. */ --p-titre: 11pt; /* en-tête du document, titre de la page 2 */ --p-base: 9.5pt; /* questions, expériences, réponses */ --p-petit: 8pt; /* mentions, libellés de jauge, état d'une expérience */ /* --- Rayons ------------------------------------------------------------ */ --r-petit: 4px; /* pastilles carrées, puces */ --r-moyen: 8px; /* champs, boutons */ --r-carte: 14px; /* cartes, blocs, panneaux */ --r-pilule: 999px; /* jauges, badges, compteur */ /* --- Taille de petit controle ------------------------------------------- */ --taille-badge: 18px; /* AJOUT 28/08/2026 — case a cocher, puce d'erreur. Ces deux valeurs vivaient en dur dans socle.css malgre sa propre regle ("jamais une valeur ecrite en dur hors de jetons.css") — dette notee le 27/08 en ajoutant la case a cocher, fermee ici. Un seul jeton pour les deux : meme taille, meme role (petit indicateur carre ou rond). */ /* --- Surfaces ---------------------------------------------------------- */ --fond: #F6F8FC; /* fond de page */ --carte: #FFFFFF; /* fond de carte, en-tête, barre d'action */ --filet: #E6E9F0; /* bordure de carte, de champ */ --filet-doux: #F1F3F8; /* séparateur entre deux lignes */ --filet-carte: #B8C2D6; /* AJOUT 28/08/2026 — bordure des cartes principales uniquement (.carte, blocs de l'outil), jamais des separateurs fins entre lignes. Mesure : 1,79:1 contre blanc, 1,68:1 contre --fond — contre 1,22:1/1,14:1 pour --filet, quasiment invisible sur un ecran. Pas une exigence WCAG (une bordure decorative n'est pas un texte), mais un ecart mesure, pas suppose. */ --jauge: #EEF2F8; /* fond d'une jauge non remplie */ --grille-radar: #EAEDF4; /* toile du radar */ --bouton-neutre: #EDF0F6; /* fond des boutons secondaires */ --filet-action: #7D8797; /* AJOUT 28/08/2026 — contour des boutons secondaires. MESURE : 3,63:1 sur --carte, 3,41:1 sur --fond, au-dessus du seuil WCAG de 3:1 pour le contour d'un composant. Motif : --bouton-neutre seul donne 1,14:1 contre une carte — le bouton ne se lisait pas comme un bouton mais comme une ligne de texte, constate a l'usage le 28/08. MEME VALEUR QUE --etat-neutre, ET IL NE FAUT PAS LES FUSIONNER : l'un est une couleur d'etat, qui bougera si la palette d'etats bouge ; l'autre est un contour dont la seule contrainte est de rester au-dessus de 3:1. Deux raisons de changer differentes, donc deux jetons. */ /* --- Texte ------------------------------------------------------------- */ /* Deux niveaux seulement. Un troisième gris plus clair a été supprimé : */ /* il ne pouvait pas atteindre WCAG AA (2,47:1 sur blanc). */ --texte: #1B2233; /* 14,3:1 sur --fond */ --texte-inverse: #FFFFFF; /* texte pose sur --marque ou sur un etat */ --texte-attenue: #616B7D; /* 5,1:1 sur --fond — conforme AA */ /* AJOUT 01/09/2026 — LES BANDES SOMBRES DE LA LANDING. La refonte de la landing alterne des bandes claires et des bandes sombres. La bande sombre ne prend PAS un noir nouveau : elle reprend --texte (#1B2233), deja dans la palette, et le texte blanc y mesure 15,87:1. Le gris attenue qui l'accompagne est mesure a 8,47:1 sur ce meme fond. A NE PAS FAIRE, ET C'EST MESURE : poser --marque (#4338CA) comme fond de bouton sur cette bande. Le bouton ne se detache pas — 2,01:1 entre les deux aplats. Sur fond sombre, le bouton primaire s'inverse : fond blanc, texte --texte. */ --fond-inverse: #1B2233; /* bande sombre — blanc dessus 15,87:1 */ --texte-attenue-inverse: #B4BECF; /* 8,47:1 sur --fond-inverse */ /* --- Identité : les quatre domaines ------------------------------------ */ /* Reconnaître, jamais mesurer. Ne jamais utiliser en couleur de texte : */ /* trois d'entre elles échouent au contraste sur blanc. */ --domaine-1: #4338CA; /* Se connaître */ --domaine-2: #0EA5A5; /* Explorer les métiers */ --domaine-3: #F59E0B; /* Définition du projet et faisabilité */ --domaine-4: #EC4899; /* Exploration des possibilités de mise en œuvre */ /* --- Marque ------------------------------------------------------------ */ /* Valeurs identiques à --domaine-1 et --domaine-3 aujourd'hui, mais */ /* séparées pour que la marque puisse évoluer sans repeindre les domaines. */ --marque: #4338CA; /* MAP, boutons primaires, liens */ --marque-accent: #F59E0B; /* le « + » */ --marque-voile: #EEF0FE; /* fond du compteur */ /* --- État : rare ------------------------------------------------------- */ --etat-oui: #15803D; /* blanc dessus 5,02:1 — AA */ --etat-oui-fond: #EAF7EE; --etat-oui-texte: #166534; /* 6,5:1 sur --etat-oui-fond */ --etat-non: #DC2626; --etat-non-fond: #FBECEC; --etat-non-texte: #8A1C1C; /* 8,1:1 sur --etat-non-fond */ --etat-neutre: #7D8797; /* pastille uniquement — jamais du texte */ --etat-neutre-fond: #F1F3F8; --etat-neutre-texte: #1B2233; /* 14,3:1 sur --etat-neutre-fond */ /* --- Vigilance : le bandeau des deux FOCUS ----------------------------- */ --vigilance-fond: #FFFDF5; --vigilance-filet: #EAD9A6; --vigilance-filet-doux: #F0E6C8; --vigilance-texte: #8A6D1F; /* 4,8:1 sur --vigilance-fond */ /* --- Radar -------------------------------------------------------------- */ --radar-remplissage: rgba(67,56,202,.15); --radar-trait: #4338CA; /* --- Ombre -------------------------------------------------------------- */ --ombre-carte: 0 6px 20px rgba(20,30,60,.06); /* ======================================================================== */ /* AJOUT DU 26/08/2026 — JALON J0. Strictement ADDITIF : aucune valeur */ /* ci-dessus n'a été touchée, donc l'outil de passation ne peut pas changer */ /* d'apparence. Vérifiable : voir la commande de contrôle du J0. */ /* */ /* Ces trois familles manquaient pour qu'un formulaire s'écrive. Ce sont des */ /* JETONS, pas des motifs : les motifs vivent dans socle.css, qui charge ce */ /* fichier et ne redéfinit jamais une variable d'ici. */ /* ======================================================================== */ /* --- Échelle d'espacement ---------------------------------------------- */ /* Six niveaux, même discipline que la typographie : tout espacement absent */ /* de cette liste est un défaut. Il n'y en avait aucune — l'outil écrit ses */ /* marges en dur sur une dizaine de valeurs sans règle (22, 18, 16, 14, 11, */ /* 10, 8, 6). Un motif de formulaire est fait d'espacements avant d'être */ /* fait de couleurs. */ --e-1: 4px; /* interligne d'une étiquette et de son champ */ --e-2: 8px; /* aide sous un champ, écart entre deux boutons */ --e-3: 14px; /* padding intérieur d'un champ, écart entre deux champs */ --e-4: 22px; /* écart entre deux blocs d'une carte */ --e-5: 34px; /* padding d'une carte, marge sous un titre */ --e-6: 52px; /* respiration de page, marge au-dessus d'un pied */ /* --- Anneau de focus ---------------------------------------------------- */ /* Les champs de l'outil n'ont AUCUN état de focus visible. Sur cinq écrans */ /* où un CIP tape au clavier, c'est un défaut d'accessibilité, pas une */ /* finition. Un anneau et non une bordure : une bordure qui change */ /* d'épaisseur au focus décale la mise en page d'un pixel. */ --anneau-focus: 0 0 0 3px rgba(67,56,202,.30); --anneau-focus-erreur: 0 0 0 3px rgba(220,38,38,.24); /* --- État désactivé ------------------------------------------------------ */ /* Le bouton d'un formulaire en cours d'envoi doit pouvoir se désactiver */ /* sans qu'on invente un gris au moment de l'écrire. */ /* MESURÉ : 3,18:1. WCAG exempte les contrôles désactivés du seuil AA — ce */ /* n'est donc pas une conformité, c'est une exemption. Écrit ici pour que */ /* personne ne croie plus tard que cette paire est conforme. */ --inactif-fond: #E9ECF3; --inactif-texte: #7B8496; }