/* ========================================================================= Mariline - Jetons du système ========================================================================= Une seule source de vérité. Tout composant lit ces variables, aucune valeur en dur ailleurs : c'est ce qui permet de changer la marque en un seul endroit. L'IDENTITÉ. Mariline n'est pas un logiciel, c'est quelqu'un qui tient votre carnet. Le système traduit cette idée : une base sobre et fiable (l'ardoise), et par-dessus des gestes de la main, comme sur un vrai carnet de chantier. Le stabilo, le trait de feutre, la note manuscrite, l'ombre portée d'un papier posé de travers. Rien n'est parfaitement droit, parce que rien ne l'est jamais sur un carnet. Les contrastes annoncés sont MESURÉS, pas estimés. Un jeton de texte ne descend jamais sous 4,5:1 sur les surfaces où il s'écrit : notre public est souvent âgé et lit sur un téléphone, dehors. ========================================================================= */ :root { /* --- Couleur : surfaces ------------------------------------------------ Le fond porte une pointe de chaleur (une seule unité de rouge et de vert), pas assez pour virer au crème, qui est le réflexe par défaut de 2026 et que le PRODUCT.md bannit. */ --surface: #FFFFFF; /* le fond d'une zone de contenu */ --fond: #FBFAF7; /* le fond de page */ --fond-2: #F2F4F6; /* seconde couche : barres, pieds de page */ --pointille: #E4E2DA; /* les pois de la texture de fond */ --filet: #E3E1DA; /* séparateur, bordure au repos */ --filet-fort: #C7C4BA; /* bordure d'un élément interactif */ /* --- Couleur : texte --------------------------------------------------- Quatre niveaux, pas plus. Au-delà on ne hiérarchise plus, on brouille. */ --encre: #161616; /* 17,3:1 - titres, texte principal */ --encre-2: #3F3D3A; /* 10,4:1 - texte courant long */ --gris: #55524C; /* 7,4:1 - texte secondaire, légendes */ --gris-doux: #6B675F; /* 5,4:1 - le plus clair ADMIS pour du texte */ /* --- Couleur : l'ancre ------------------------------------------------- L'ardoise vient du système d'origine. Elle porte les actions et la sélection : c'est la partie sérieuse de Mariline, celle qui ne se trompe pas. */ --ardoise: #2F4D63; /* 8,5:1 sur le fond */ --ardoise-clair: #35566F; --ardoise-fonce: #274257; --ardoise-pale: #EDF1F5; /* --- Couleur : les stabilos -------------------------------------------- C'est la main de Mariline. Ils SURLIGNENT, ils ne remplissent pas des aplats. L'encre passe au-dessus de chacun (9,5:1 au minimum), c'est ce qui les rend utilisables sur du vrai texte plutôt que décoratifs. */ --stabilo-ambre: #F7C948; /* 11,6:1 - le principal, ce qui compte */ --stabilo-menthe: #7CE8B5; /* 12,1:1 - ce qui est réglé */ --stabilo-ciel: #8FC9FF; /* 10,3:1 - l'information */ --stabilo-rose: #FF9ED2; /* 9,5:1 - l'accent rare */ /* --- Couleur : le feutre ----------------------------------------------- L'annotation manuscrite, celle que Mariline ajoute dans la marge. Deux valeurs : la vive pour les gros mots, la sombre pour le petit texte, qui doit rester lisible. */ --feutre: #E85D1F; /* grand texte seulement (>= 19px) */ --feutre-lisible: #B93D0B; /* 5,4:1 - lisible à toute taille */ /* --- Couleur : états --------------------------------------------------- Sémantique, jamais décorative. */ --succes: #2E6B47; --succes-pale: #E9F5EE; --alerte: #A2371F; --alerte-pale: #FBEEEB; --alerte-fonce: #8A2E1A; /* survol d'une action destructrice */ --sur-alerte: #FFFDF6; /* texte pose SUR un aplat d'alerte */ /* --- Typographie ------------------------------------------------------- TROIS voix, une par registre. Fraunces porte les titres (elle a du caractère, elle n'est pas neutre), Archivo le texte courant (elle est déjà dans le projet), et Caveat la main de Mariline : ses annotations, ses commentaires dans la marge. L'échelle est FIXE en rem, jamais fluide : l'utilisateur lit toujours à la même distance, un titre qui rétrécit dans un panneau est un défaut. */ --titre: Fraunces, Georgia, serif; --police: Archivo, system-ui, -apple-system, sans-serif; --main: Caveat, "Bradley Hand", cursive; --chiffre: "JetBrains Mono", ui-monospace, monospace; --taille-xs: 0.8125rem; /* 13px - horodatage, mention */ --taille-sm: 0.875rem; /* 14px - légende, libellé */ --taille-md: 1rem; /* 16px - PLANCHER du texte courant */ --taille-lg: 1.125rem; /* 18px - sous-titre */ --taille-xl: 1.25rem; /* 20px - titre de bloc */ --taille-2xl: 1.5rem; /* 24px - titre de section */ --taille-3xl: 1.75rem; /* 28px - titre de page */ --taille-main: 1.3125rem; /* 21px - la main de Mariline */ --graisse-normale: 400; --graisse-moyenne: 500; --graisse-demi: 600; --graisse-grasse: 700; --graisse-titre: 900; /* Fraunces à son maximum, pour les titres */ --interligne-serre: 1.12; --interligne-normal: 1.55; --chasse-titre: -0.015em; /* --- Espacement -------------------------------------------------------- Échelle de 4px. Le rythme se fait en VARIANT ces valeurs. */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.25rem; --esp-6: 1.5rem; --esp-8: 2rem; --esp-10: 2.5rem; --esp-12: 3rem; /* Largeur maximale d'une zone de contenu sur une page publique. Elle vivait dans le :root recopie d'accueil.css et a failli disparaitre avec lui. */ --maxw: 1180px; /* --- Formes ------------------------------------------------------------ LE GESTE DE LA MAIN. Quatre rayons différents, avec des ratios : le tracé n'est jamais régulier, comme un trait fait au feutre. C'est l'inverse exact du border-radius uniforme qui signe une interface générée. */ --trace: 10px 16px 12px 18px / 16px 10px 18px 12px; --trace-doux: 0.6em 0.3em 0.7em 0.25em / 0.4em 0.7em 0.3em 0.6em; --trace-surl: 0.5em 0.25em 0.6em 0.2em / 0.35em 0.6em 0.25em 0.55em; --rond: 999px; /* --- Rotations --------------------------------------------------------- Rien n'est parfaitement droit sur un carnet. Des valeurs faibles : au-delà de 2 degrés on ne lit plus, on décore. */ --penche: -0.6deg; --penche-plus: -1.4deg; --penche-main: -2deg; /* --- Relief ------------------------------------------------------------ Des ombres PLEINES et décalées, comme une feuille posée sur une autre. Jamais de flou : le flou fait logiciel, le décalage net fait papier. */ --ombre-papier: 4px 5px 0 var(--filet); --ombre-ambre: 4px 5px 0 var(--stabilo-ambre); --ombre-menthe: 4px 5px 0 var(--stabilo-menthe); --ombre-portee: 0 8px 24px rgba(34, 57, 79, 0.14); /* menus et modales seulement */ /* --- Dégradés ---------------------------------------------------------- UN SEUL usage : le remplissage progressif d'un surlignage. Aucun aplat dégradé de fond, aucun texte en dégradé. */ --degrade-action: linear-gradient(180deg, var(--ardoise-clair) 0%, var(--ardoise-fonce) 100%); /* --- Mouvement --------------------------------------------------------- 150 à 250 ms : l'utilisateur est dans sa tâche. Courbe sortante, jamais de rebond. */ --duree-courte: 120ms; --duree: 200ms; --courbe: cubic-bezier(0.16, 1, 0.3, 1); /* --- Empilement -------------------------------------------------------- Une échelle nommée. Jamais de z-index arbitraire. */ --z-base: 1; --z-menu: 100; --z-barre: 200; --z-voile: 300; --z-modale: 400; --z-notif: 500; --z-infobulle: 600; /* --- Cible tactile ----------------------------------------------------- 44px minimum : un artisan clique avec les mains sales et froides. */ --cible: 44px; } @media (prefers-reduced-motion: reduce) { :root { --duree-courte: 0.01ms; --duree: 0.01ms; --penche: 0deg; --penche-plus: 0deg; --penche-main: 0deg; } }