/* ═══════════════════════════════════════════════════════════════════════════ CHARTE · arretee le 27/08/2026 Une seule tension. Six jetons de couleur, une police, un angle. La contrainte fait l'unite : un projet tenu a six couleurs ressemble aux autres sans effort. Le portfolio en comptait 140 avant ce cadre. ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Couleurs · six jetons, pas un de plus ─────────────────────────────── */ --fond: #faf8f5; /* jamais blanc pur : le fond a peine chaud fait respirer la page sans qu'on sache pourquoi */ --panneau: #f1eee8; /* encarts, zones secondaires */ --trait: #e0dbd2; /* bordures · on separe par un trait, jamais par une ombre */ --doux: #6e6862; /* texte secondaire, libelles */ --texte: #1f1d1b; /* texte courant */ --accent: #1f5c4c; /* LE SEUL ENDROIT OU UNE COULEUR APPARAIT : boutons, liens, chiffres d'impact, mascotte, et UN bandeau pleine largeur par page. Jamais un titre courant, jamais une decoration. Le bandeau est un plein, pas une teinte : le vert porte le fond, le creme porte le texte. Un seul par page, sinon il ne veut plus rien dire. */ /* etats · derives de l'accent, pas des couleurs nouvelles */ --ok: #1f5c4c; --alerte: #b4432f; /* ── Typographie ───────────────────────────────────────────────────────── */ --titre: 700 1em/1.08 Figtree, system-ui, sans-serif; --courant: 400 1em/1.62 Figtree, system-ui, sans-serif; --tech: 500 1em "JetBrains Mono", Menlo, monospace; --interlettre: -.036em; /* relatif : un tracking en px vaut cinq reglages differents selon la taille */ /* ── Formes ────────────────────────────────────────────────────────────── */ --r: 8px; /* un seul rayon, partout */ /* ── Espacements · une echelle, jamais de valeur intermediaire ─────────── */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; } /* ── Base ─────────────────────────────────────────────────────────────────── */ body { margin: 0; background: var(--fond); color: var(--texte); font: var(--courant); font-size: 16px; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font: var(--titre); letter-spacing: var(--interlettre); margin: 0; } h1 { font-size: 38px; } h2 { font-size: 26px; } h3 { font-size: 20px; } /* Le point apres le nom du produit. Un caractere, et la marque existe. */ .marque::after { content: "."; color: var(--accent); } /* Les libelles techniques et les chiffres : chasse fixe, pour que les colonnes s'alignent et que le zero ne se confonde pas avec un O. */ .libelle { font: var(--tech); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--doux); } .nombre { font: var(--tech); font-variant-numeric: tabular-nums; } /* Les temps. Mois et annee, jamais le jour ni l'heure. Une page qui affiche « 27 aout 2026 a 14h12 » se date elle-meme et parait perimee le lendemain ; « aout 2026 » reste juste pendant un mois. */ .temps { font: var(--tech); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--doux); } /* ═══ LES FAMILLES ═══════════════════════════════════════════════════════════ Six familles, pas une de plus. Chaque element d'une page appartient a l'une d'elles ; s'il n'entre nulle part, c'est qu'il ne devrait pas exister. LES TITRES h1 h2 h3 · une seule police, une seule graisse, chasse serree. Jamais en accent : un titre se distingue par sa taille, pas par sa couleur. LES TEXTES .courant pour le corps, --doux pour le secondaire, .libelle pour les capitales de section. LES TEMPS .temps · chasse fixe et chiffres tabulaires. Mois et annee, jamais le jour ni l'heure : une date au jour pres vieillit la page des le lendemain. LES BOUTONS .bouton plein pour l'action principale, .bouton--creux pour la secondaire. Un seul plein par ecran. LES BANNIERES .bandeau · un aplat d'accent pleine largeur, un par page. LES CARTES .carte · voir plus bas, l'affordance est au repos. LES DONNEES .zone-* · voir plus bas. La SEULE derogation a l'accent unique, et elle est etroite. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Composants ───────────────────────────────────────────────────────────── */ .bouton { padding: var(--e3) var(--e5); background: var(--accent); color: var(--fond); border: none; border-radius: var(--r); font: 600 15px Figtree, sans-serif; cursor: pointer; } .bouton--creux { background: none; color: var(--texte); border: 1px solid var(--trait); } .encart { background: var(--panneau); border-left: 2px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: var(--e4) var(--e5); color: var(--doux); } /* Une grille de chiffres : separee par des traits d'un pixel, jamais par des cartes flottantes avec ombre. */ .chiffres { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; } .chiffres > * { background: var(--fond); padding: var(--e5); } /* ── Les couleurs de donnees ─────────────────────────────────────────────── La seule derogation a « une seule couleur par page ». Elle vaut quand une couleur porte une information que le lecteur doit distinguer : des zones d'effort, des categories, un classement. Ce n'est plus de la decoration, c'est du contenu, et l'appauvrir appauvrit l'application. Trois conditions, toutes obligatoires : 1. La couleur ne dit JAMAIS quelque chose toute seule. Un libelle l'accompagne toujours. Un daltonien represente un homme sur douze, et une capture d'ecran en noir et blanc arrive tous les jours. 2. Elles se declarent une seule fois, en tete de feuille, nommees par ce qu'elles designent et non par leur teinte. --zone-atteinte, pas --vert : le jour ou le vert devient bleu, le nom reste juste. 3. Quatre au maximum. Au-dela, l'oeil ne fait plus la difference et il faut passer a autre chose qu'une couleur. Tout le reste de la page reste sur les six jetons. Ces couleurs-la ne servent jamais a un bouton, un titre, un fond de section ou un lien. */ .zone { display: inline-flex; align-items: center; gap: var(--e2); } .zone i { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* ── Les cartes ──────────────────────────────────────────────────────────── Une carte qui se clique doit le dire AU REPOS. Le survol ne repond pas a la question, parce qu'il faut deja avoir decide de bouger la souris pour le declencher, et parce qu'au doigt il n'existe pas. L'affordance est donc un lien ecrit en bas de carte, en accent, avec sa fleche. Le survol confirme, il n'annonce pas. Corollaire : une carte SANS destination ne prend jamais cette apparence. Elle affiche son etat en gris. Une carte qui a l'air cliquable et ne mene nulle part coute plus cher qu'une carte qui n'en a pas l'air. */ .cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; } .carte { display: flex; flex-direction: column; gap: var(--e3); background: var(--fond); padding: var(--e6); color: var(--texte); text-decoration: none; } .carte p { margin: 0; color: var(--doux); } a.carte { cursor: pointer; transition: background .15s; } a.carte:hover { background: var(--panneau); } a.carte:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .carte .aller { margin-top: auto; color: var(--accent); font-weight: 600; font-size: 15px; } .carte .aller::after { content: " \2197"; display: inline-block; transition: transform .15s; } a.carte:hover .aller::after { transform: translate(2px, -2px); } .carte .etat { margin-top: auto; color: var(--doux); font-size: 14px; } /* Bandeau · le seul aplat de couleur autorise. Le contraste creme sur vert vaut 7,3:1, donc il tient aussi pour du texte courant. */ .bandeau { background: var(--accent); color: var(--fond); } .bandeau .libelle { color: var(--fond); opacity: .75; } .bandeau a { color: var(--fond); } /* ── Mascotte ────────────────────────────────────────────────────────────── Deux yeux, pas de bouche. C'est la contrainte qui fait l'expressivite : quand la bouche ne peut rien dire, tout passe par la forme des yeux, et chaque humeur doit se distinguer des autres au premier coup d'oeil. Le rayon est donne par coin, pas globalement : coin interieur haut pointu se lit fache, bas plat et haut bombe se lit ravi. Le cadre est en paysage, l'ensemble fait 20 de large pour 14 de haut. ELLE EST FINE, PARTOUT. C'est une marque, jamais une illustration : · accompagnee d'un texte 16 px, la hauteur d'un x · 24 px au plus · seule, en guise de logo 48 px au plus Au-dela elle pese autant que ce qu'elle accompagne, et cesse d'etre un signe. Sur un portfolio, cent seize pixels au-dessus du nom la faisaient passer avant le nom et avant les chiffres. SES REACTIONS SONT FINES AUSSI. Elle ne rebondit pas, ne grossit pas, ne tourne pas. Tout se joue sous dix pour cent du cadre : sursaut de joie 10 % soit 1,6 px quand elle en fait 16 frisson 7 % soit 1,1 px regard 20 % soit 3,2 px, et seuls les yeux bougent Une mascotte qui s'agite attire l'oeil au mauvais moment : on regarde la mascotte au lieu de regarder ce qu'on est en train de faire. Le moteur est dans mascotte.js et ne contient aucune couleur. node planche.js regenere la planche de controle et echoue tout seul si deux humeurs finissent avec le meme regard. */ .mascotte { display: block; overflow: visible; } .m-oeil { fill: var(--accent); } .m-bouche { fill: var(--texte); opacity: .82; } .m-z { fill: var(--doux); font: var(--tech); font-size: 11px; } .m-z2 { font-size: 8px; opacity: .6; } .m-zzz { transition: opacity .3s; } /* Sortie de secours pour les animations. prefers-reduced-motion n'est pas suivi d'office : certaines sessions distantes l'annoncent a tort. */ body.sobre * { animation: none !important; transition: none !important; } /* ═══ CE QU'ON NE FAIT PAS ═══════════════════════════════════════════════════ Pas de degrade, pas de verre depoli, pas d'emoji en guise d'icone, pas d'ombre portee diffuse, pas de texte en degrade, pas d'arrondi different selon les elements. Ce sont les huit signatures du site genere. ═══════════════════════════════════════════════════════════════════════════ */