/* ========================================================================== tokens.css : les valeurs de base du design -------------------------------------------------------------------------- C'est le SEUL fichier à modifier pour changer l'apparence globale du site. Aucune couleur ni aucune taille ne doit être écrite en dur ailleurs. Voir docs/01-DIRECTION-ARTISTIQUE.md pour le raisonnement. ========================================================================== */ :root { /* --- Le papier et l'encre -------------------------------------------- */ --paper: #FFFFFF; /* fond, décision de l'utilisateur : blanc pur */ --ink: #1A1A1A; /* traits, texte 17.4:1 sur blanc OK */ --ink-soft: #5A5A5A; /* texte secondaire 7.0:1 sur blanc OK */ --ink-faint: #C9C9C9; /* filets, séparateurs, décoratif seulement */ /* --- La palette sémantique ------------------------------------------- Une couleur = un concept, tenue du début à la fin, jamais réattribuée. Base Okabe-Ito, le standard scientifique du daltonisme. ATTENTION : chaque concept a DEUX valeurs, et ce n'est pas un détail : --c-X la couleur graphique (aplats, traits épais, icônes) --c-X-text la variante assombrie, seule utilisable pour du TEXTE Raison : sur fond blanc, trois des quatre couleurs Okabe-Ito n'atteignent pas le rapport de 4.5:1 exigé pour du texte. Les ratios mesurés sont indiqués ci-dessous. Ne jamais utiliser --c-X pour un mot lisible. --------------------------------------------------------------------- */ /* L'impulsion et le sodium, ce qui déclenche. Une seule couleur pour les deux : l'entrée de Na+ EST l'impulsion. */ --c-impulse: #0072B2; /* 5.1:1 OK même pour du texte */ --c-impulse-text: #0072B2; /* identique, pas besoin d'assombrir */ /* Le potassium, le retour au repos. */ --c-potassium: #D55E00; /* 3.9:1 graphiques seulement */ --c-potassium-text: #A34700; /* 6.0:1 OK pour du texte */ /* La myéline, ce qui accélère. Couleur suggérée par l'utilisateur. */ --c-myelin: #009E73; /* 3.4:1 graphiques seulement */ --c-myelin-text: #007054; /* 6.0:1 OK pour du texte */ /* Les neurotransmetteurs, ce qui franchit la synapse. */ --c-neuro: #A64D79; /* 5.2:1 assombri dès le graphique, car la valeur Okabe-Ito d'origine (#CC79A7) tombe à 3.0:1, trop juste même pour un trait */ --c-neuro-text: #A64D79; /* identique */ /* La couleur de surbrillance, quand on désigne une partie d'un schéma. Isolée dans son propre token pour pouvoir l'essayer facilement : remplacer par --c-potassium, --c-myelin ou --c-neuro pour comparer. */ /* Passée au magenta de la palette fluo : « regarde ici ». Le bleu qu'elle empruntait est réservé au signal, et un signal ne désigne pas une partie. La surbrillance épaissit aussi le trait, donc elle reste lisible en noir et blanc, et elle est momentanée. */ --c-surbrillance: var(--accent); /* Retour visuel du quiz. Jamais seuls : toujours doublés d'un mot et d'une icône, car « vert = bon, rouge = faux » est précisément le couple que ne distinguent pas les daltonismes rouge-vert. */ --c-ok: #007054; --c-nope: #A34700; /* --- La palette fluo, celle de docs/01-DIRECTION-ARTISTIQUE.md --------- LA REGLE : le texte est NOIR, toujours. La couleur passe DERRIERE, en surligneur. Dans le dessin, les traits sont a l'encre et la couleur s'emploie en aplats cernes. Ce n'est pas un gout, c'est une mesure. Une couleur fluo est lumineuse, donc elle contraste tres bien avec du noir et tres mal avec du blanc : couleur en fond sous du noir en trait fin sur blanc magenta 7,3:1 2,4:1 vert 12,0:1 1,5:1 orange 6,7:1 2,6:1 bleu electrique 3,6:1 4,8:1 Seul le bleu electrique tient en trait pur, et c'est pour cela que c'est lui qui porte le signal. Ces quatre tokens cohabitent pour l'instant avec l'ancienne palette ci-dessus, encore utilisee par le reste du site. L'ancienne disparaitra quand tout le contenu sera passe a la nouvelle. */ /* Le signal electrique. SEULE couleur autorisee en trait pur. C'est le fil du recit : le visiteur doit pouvoir la suivre des yeux du premier ecran au dernier. Ne jamais l'employer pour autre chose, et surtout pas pour un titre : le bleu designe une chose qui SE DEPLACE. */ --signal: #0066FF; /* « Regarde ici ». Ne designe aucune notion scientifique. Toujours en FOND derriere du texte noir, jamais en couleur de texte. */ --accent: #FF6EF5; /* La myeline. Une BANDE cernee d'encre, jamais un trait. */ --myeline: #00F58A; /* Les messagers chimiques, a la synapse. Des aplats cernes d'encre. */ --messagers: #FF7A29; /* --- Typographie ------------------------------------------------------ Corps à 21px, repris de la référence infrastructures-terrestres.com. C'est nettement au-dessus de l'usage courant, et c'est voulu : ça se lit beaucoup mieux sur un téléphone. */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-body: 21px; --fs-small: 17px; --fs-caption: 15px; /* Volontairement mesuré. À 4,5rem, le titre occupait six lignes dans la colonne de texte et débordait par le haut de la scène collée, sa première ligne coupée. Un titre reste un titre à 2,4rem ; un titre tronqué n'est plus un titre. */ --fs-h1: clamp(1.5rem, 3.6vw, 2.4rem); --fs-h2: clamp(1.75rem, 6vw, 2.75rem); --fs-h3: clamp(1.25rem, 3.5vw, 1.5rem); --lh-body: 1.55; --lh-tight: 1.1; --measure: 34rem; /* largeur de lecture confortable, ~62 caractères */ /* --- Espacements ------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2.5rem; --sp-6: 4rem; --sp-7: 6rem; --stroke: 1.5px; /* épaisseur de trait par défaut des schémas */ --stroke-bold: 3px; /* --- Mouvement -------------------------------------------------------- Ces durées sont mises à 0.01ms par js/a11y.js quand le visiteur demande moins d'animation, ou quand l'appareil est trop lent. Ne jamais écrire une durée en dur dans une transition CSS : toujours passer par ces variables, sinon le mode réduit ne les atteindra pas. */ --dur-fast: 200ms; --dur-base: 450ms; --dur-slow: 900ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* --- Divers ----------------------------------------------------------- */ /* Hauteur reservee a la barre de reglage, qui est FIXE et ne defile donc jamais. Sans cette reserve, le premier titre passe dessous et se retrouve coupe. C'est aussi l'exigence WCAG 2.4.11 « Focus Not Obscured » : un element qui recoit le focus ne doit jamais se retrouver sous un element fixe. */ --hauteur-barre: 4.75rem; --tap-min: 44px; /* taille tactile minimale, exigence d'accessibilité */ --radius: 6px; }