/* ============================================================ SpiLi — Jetons de design Identité « Le Filet » · validée août 2026 ------------------------------------------------------------ REMPLACE css/tokens.css À L'IDENTIQUE. Les noms de variables sont ceux de votre fichier de juillet 2026 : aucun code existant (frise, quiz, fiches, atlas.js) n'a besoin d'être touché pour que la bascule ait lieu. Deux blocs suivent les jetons : — les jetons du régime Atlas (.spili-atlas) ; — un bloc de corrections système, qui retire les points de l'ancienne charte incompatibles avec la nouvelle (couleur porteuse d'information, angles arrondis, filet d'accent à gauche des blocs). ============================================================ */ :root { /* --- Fonds --------------------------------------------------- Régime clair : tout ce qui se lit. Site, fiches, frise, quiz, dossiers, papeterie. */ --spili-fond: #F5F4F1; --spili-fond-eleve: #FFFFFF; --spili-fond-carte: #EAE9E4; /* --- Texte --------------------------------------------------- Contrastes sur --spili-fond : texte 17,9:1 AAA · doux 11,4:1 AAA · faible 5,4:1 AA */ --spili-texte: #101012; --spili-texte-doux: #33333A; --spili-texte-faible: #5E5E64; /* --- Accent -------------------------------------------------- Vert-bleu de carte marine. STRICTEMENT FONCTIONNEL : lien, état actif, focus, sélection sur la carte. Ne code jamais une catégorie, un terroir ni une maison. Toujours à plat : ni dégradé, ni métallisé, ni sur image. Contraste 7,0:1 AAA sur --spili-fond. */ --spili-accent: #1D5B63; --spili-accent-fort: #12454C; /* survol 9,6:1 */ --spili-accent-doux: rgba(29, 91, 99, 0.45); --spili-accent-voile: rgba(29, 91, 99, 0.10); --spili-accent-trace: rgba(29, 91, 99, 0.05); /* --- Traits -------------------------------------------------- */ --spili-trait: #DEDDD8; --spili-trait-faible: #EDECE7; /* --- Degré de certitude -------------------------------------- L'information n'est PLUS portée par la couleur : elle est portée par la trame du filet (plein / tireté / pointillé). Conformité WCAG sans alternative à ajouter, lisibilité en monochrome, en gravure et en photocopie. Les trois jetons restent déclarés pour compatibilité. */ --spili-atteste: #101012; --spili-probable: #101012; --spili-tradition: #101012; --spili-trame-atteste: #101012; --spili-trame-probable: repeating-linear-gradient(90deg, #101012 0 10px, transparent 10px 17px); --spili-trame-rapporte: repeating-linear-gradient(90deg, #101012 0 3px, transparent 3px 9px); /* --- États d'interface --------------------------------------- Réservés au retour utilisateur (quiz, formulaires). JAMAIS employés en communication ni en éditorial. */ --spili-juste: #1D5B63; --spili-alerte: #9E2B14; /* --- Typographie --------------------------------------------- IBM Plex Sans + IBM Plex Mono, SIL OFL, à héberger en local. Compagnons officiels IBM Plex Sans JP / SC / KR. */ --spili-titre: "IBM Plex Sans", system-ui, sans-serif; --spili-courant: "IBM Plex Sans", system-ui, sans-serif; --spili-data: "IBM Plex Mono", ui-monospace, monospace; /* --- Constantes du système ----------------------------------- */ --spili-filet: 2px; /* épaisseur de la césure du logotype */ --spili-notation: 3px; /* épaisseur des trois états */ --spili-trame: 15px; /* pas du graticule */ /* --- Rythme --------------------------------------------------- Angle vif partout : le système n'a pas de coin arrondi. */ --spili-rayon: 0px; --spili-rayon-lg: 0px; --spili-pas: 8px; /* --- Ossature ------------------------------------------------- Hauteur de l'en-tête, qui est collant (`position: sticky`). Tout autre élément collant doit s'en écarter d'autant, sinon il se range DERRIÈRE lui et son haut devient invisible — c'est ce qui arrivait au cartouche de l'inventaire, masqué sur 65 px. La valeur suit les ruptures de l'en-tête, dont la navigation se replie sur plusieurs lignes à mesure que la fenêtre rétrécit. */ --spili-entete: 87px; /* --- Mouvement ------------------------------------------------ */ --spili-transition: 160ms ease; } /* ============================================================ Régime Atlas et scénographie Mêmes noms, valeurs inversées. Réservé à l'INSTRUMENT : la carte, la constellation, l'habillage d'exposition. Tout ce qui se lit longuement reste en régime clair. Usage :
autour de la scène. ============================================================ */ .spili-atlas { --spili-fond: #0E0E10; --spili-fond-eleve: #17171A; --spili-fond-carte: #17171A; --spili-texte: #F2F2EF; --spili-texte-doux: #C3C3C8; --spili-texte-faible: #9A9AA0; --spili-trait: #2A2A2E; --spili-trait-faible: #1C1C20; --spili-accent: #4E9AA3; /* 6,0:1 AA */ --spili-accent-fort: #7BBFC7; --spili-accent-doux: rgba(78, 154, 163, 0.45); --spili-accent-voile: rgba(78, 154, 163, 0.12); --spili-accent-trace: rgba(78, 154, 163, 0.06); --spili-atteste: #F2F2EF; --spili-probable: #F2F2EF; --spili-tradition: #F2F2EF; --spili-trame-atteste: #F2F2EF; --spili-trame-probable: repeating-linear-gradient(90deg, #F2F2EF 0 10px, transparent 10px 17px); --spili-trame-rapporte: repeating-linear-gradient(90deg, #F2F2EF 0 3px, transparent 3px 9px); } /* ============================================================ Primitives du système — le filet, trois fonctions ============================================================ */ /* Vertical : la césure. Sépare deux unités de sens. */ .spili-cesure { display: inline-block; width: var(--spili-filet); background: var(--spili-texte); align-self: stretch; } /* Horizontal : le degré de preuve. */ .spili-preuve { height: var(--spili-notation); border: 0; } .spili-preuve--atteste { background: var(--spili-trame-atteste); } .spili-preuve--probable { background: var(--spili-trame-probable); } .spili-preuve--rapporte { background: var(--spili-trame-rapporte); } /* Répété : le graticule. */ .spili-trame { background-image: linear-gradient(var(--spili-trait) 1px, transparent 1px), linear-gradient(90deg, var(--spili-trait) 1px, transparent 1px); background-size: var(--spili-trame) var(--spili-trame); } /* ============================================================ Corrections de système À conserver tant que frise.css / quiz.css / fiche.css n'ont pas été régénérés sur la nouvelle grille. ============================================================ */ /* 1. Le degré de certitude n'est plus chromatique. frise.css : le filet de gauche change de TRAME, pas de couleur. Le jalon attesté perdait aussi son sens en filet d'accent — l'accent ne code jamais un contenu. */ .frise-jalon { border-left-color: var(--spili-texte); border-left-style: solid; } .frise-jalon[data-certitude="probable"] { border-left-color: var(--spili-texte); border-left-style: dashed; } .frise-jalon[data-certitude="tradition"] { border-left-color: var(--spili-texte); border-left-style: dotted; } /* la sélection, elle, est bien un état : elle garde l'accent. */ .frise-jalon:hover, .frise-jalon[aria-current="true"] { border-left-color: var(--spili-accent); } /* 1 bis. fiche.css — .fiche-statut n'a pas d'attribut de certitude : son filet d'accent à gauche et son fond teinté sont un pur effet de style. Ils sortent du système. */ .fiche-statut { border-left: 0; border-top: var(--spili-notation) solid var(--spili-texte); background: transparent; } .fiche-statut b { color: var(--spili-texte); } /* 2. La pastille de certitude devient un filet, pas un point de couleur : l'information reste lisible en monochrome. */ .pastille::before { width: 22px; height: var(--spili-notation); border-radius: 0; background: var(--spili-trame-atteste); } .pastille[data-certitude="probable"]::before { background: var(--spili-trame-probable); } .pastille[data-certitude="tradition"]::before { background: var(--spili-trame-rapporte); } /* 3. quiz.css détournait les jetons de certitude pour dire juste et faux. Ce sont deux sémantiques différentes : le jour où « probable » change de valeur, « faux » change avec lui. Sélecteurs relevés dans quiz.css (l. 155-201). La couleur seule ne porte jamais l'information : la forme du témoin distingue juste (disque) et faux (carré). */ .quiz-option.est-juste { border-color: var(--spili-juste); } .quiz-option.est-faux { border-color: var(--spili-alerte); } .quiz-verdict { color: var(--spili-juste); } .quiz-verdict::before { background: var(--spili-juste); border-radius: 50%; } .quiz-verdict[data-juste="false"] { color: var(--spili-alerte); } .quiz-verdict[data-juste="false"]::before { background: var(--spili-alerte); border-radius: 0; } /* 4. Liens et focus. */ a { color: var(--spili-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--spili-accent-fort); } :focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 2px; } /* 5. Préférences système d'accessibilité. */ @media (prefers-reduced-motion: reduce) { :root { --spili-transition: 0ms; } } /* L'en-tête grandit quand sa navigation se replie. Valeurs relevées dans une vraie fenêtre — une mesure en iframe donne des ruptures fausses, la navigation ne s'y repliant pas au même endroit : ≥ 930 px → 87 820–900 → 132 500–700 → 175 ≤ 420 → 217 Si la navigation change, ces trois seuils se remesurent. Aucun élément collant ne doit écrire sa propre valeur : c'est le sens de la variable. */ @media (max-width: 920px) { :root { --spili-entete: 132px; } } @media (max-width: 780px) { :root { --spili-entete: 175px; } } @media (max-width: 420px) { :root { --spili-entete: 217px; } }