/* ========================================================================= TOKENS — Thomas Ploton / Reliance au cheval SOURCE DE VÉRITÉ UNIQUE. Ce fichier est normatif. Règle de revue, opposable en merge : aucune couleur, taille de police, graisse, rayon, durée ni courbe d'easing ne peut apparaître en dur ailleurs que dans ce fichier. `node site/charte-check.mjs` fait échouer la build si la règle est violée. Parti pris CONTRE-JOUR : un seul soleil, bas, hors-champ à gauche, 8°. Contrastes : mesurés WCAG 2.1, pas estimés. Voir CHARTE-GRAPHIQUE.md §2. ========================================================================= */ :root { /* ----------------------------------------------------------------------- 1. CANAUX RVB Toute transparence du site passe par ces canaux : rgb(var(--rgb-x) / .N). Écrire rgba(33, 29, 25, .04) au lieu de rgb(var(--rgb-ink) / .04) est un motif de rejet — c'est une couleur en dur déguisée. -------------------------------------------------------------------- */ --rgb-night: 23 18 15; --rgb-ink: 33 29 25; --rgb-brand: 179 96 58; --rgb-paper: 247 242 234; /* ----------------------------------------------------------------------- 2. SURFACES — quatre, deux claires et deux sombres. L'écart paper/paper-2 est de 1,18:1 : assez pour détacher une surface, trop peu pour lire comme une seconde couleur. C'est voulu. -------------------------------------------------------------------- */ --c-paper: #f7f2ea; /* surface claire principale */ --c-paper-2: #eadfcd; /* surface claire secondaire — 1,18:1 / paper */ --c-night: #17120f; /* surface sombre principale */ --c-night-2: #2b2622; /* champs de formulaire sur nuit — 1,24:1 / night */ /* ----------------------------------------------------------------------- 3. ENCRES — trois sur clair, deux sur sombre. Pas une de plus. FUSION (2026-07-20) : --c-on-night (#f5efe6) et --c-on-accent (#fdf8f2) sont supprimés. Mesurés à ΔE < 3 de --c-paper, ils rendaient trois quasi-blancs pour un seul blanc perçu. Le texte sur nuit et le texte sur accent utilisent désormais --c-paper. -------------------------------------------------------------------- */ --c-ink: #211d19; /* 15,02:1 /paper — corps de texte, titres */ --c-ink-soft: #4a423b; /* 8,83:1 /paper — méta, nav, labels */ --c-ink-mute: #6b6157; /* 5,43:1 /paper — ornements, numéros */ --c-on-night-mute: #cabfae; /* 10,24:1 /night — méta sur sombre */ /* TOKENS SÉMANTIQUES — ils pointent sur --c-paper, et c'est voulu. Ce ne sont PAS des alias de dette : nommer « le texte posé sur nuit » indépendamment de « la surface claire » permet de changer l'un sans l'autre plus tard. La fusion porte sur la VALEUR, pas sur le rôle. */ --c-on-night: var(--c-paper); --c-on-accent: var(--c-paper); /* ----------------------------------------------------------------------- 4. FILETS --c-line est à 1,81:1 sur paper : visible comme structure, jamais comme trait. Il ne porte JAMAIS de texte (1,81:1 échoue tout seuil). -------------------------------------------------------------------- */ --c-line: #c6b49a; --c-line-soft: rgb(var(--rgb-ink) / 0.10); --c-line-night: rgb(var(--rgb-paper) / 0.14); /* ----------------------------------------------------------------------- 5. ACCENT TERRACOTTA — QUATRE TOKENS, QUATRE RÔLES. FUSION (2026-07-20) : --c-accent (#a8562f) et --c-accent-ink (#9c4e28) étaient à ΔE ≈ 4 — deux tokens pour une seule couleur perçue. Fusionnés sur #9c4e28, qui passe AA en texte ET en fond de bouton. CORRECTION : --c-accent-deep passe de #90492a à #7d3d20. L'ancienne valeur n'était qu'à 1,06:1 de --c-accent : un survol invisible. La nouvelle est à 1,38:1 — un survol qui se voit. SUPPRESSION : --c-accent-tint (#ecdccb) était à ΔE ≈ 1,5 de --c-paper-2. Les annotations utilisent --c-paper-2 + un filet --c-line. -------------------------------------------------------------------- */ --c-brand: #b3603a; /* IDENTITÉ SEULE : logo, focus, marques. 4,05:1 sur paper — NE PORTE JAMAIS DE TEXTE. */ --c-accent: #9c4e28; /* 5,33 /paper · 4,51 /paper-2 · 5,33 en fond de bouton avec --c-paper. Texte ET fond. */ --c-accent-deep: #7d3d20; /* survol de bouton — 7,36:1 avec --c-paper */ --c-accent-night: #d3865a; /* accent sur --c-night UNIQUEMENT — 6,49:1 */ /* LIENS — le token qui manquait. `a { color: inherit }` rendait les liens des pages légales strictement indistinguables du corps de texte, ce qui échoue WCAG 1.4.1. Un lien porte une couleur ET un soulignement. */ --c-link: var(--c-accent); --c-link-night: var(--c-accent-night); /* ----------------------------------------------------------------------- 6. ÉTATS --c-error passe de #b0402f à #9b2226. L'ancienne valeur était à 1,03:1 de --c-accent : un message d'erreur rendait dans la couleur exacte du bouton primaire. La nouvelle bascule vers le rouge franc. RÈGLE : la couleur ne porte JAMAIS seule l'information d'état. Tout message d'erreur porte un pictogramme ou un préfixe textuel (WCAG 1.4.1). -------------------------------------------------------------------- */ --c-ok: #3f6b4f; /* 5,50:1 /paper */ --c-error: #9b2226; /* 7,11:1 /paper · 6,01:1 /paper-2 */ --c-error-night: #e0796d; /* 6,31:1 /night — n'existait pas */ /* ----------------------------------------------------------------------- 7. MARQUE TIERCE — hors charte, non modifiable. Les couleurs Google sont imposées par leurs conditions d'usage. Elles sont tokenisées pour qu'elles cessent d'être écrites en dur 3 fois dans le HTML, PAS pour entrer dans la palette. Ne jamais les réemployer. -------------------------------------------------------------------- */ --c-google-blue: #4285f4; --c-google-green: #34a853; --c-google-yellow: #fbbc05; --c-google-red: #ea4335; /* ----------------------------------------------------------------------- 8. LUMIÈRE — les tokens du parti pris. Un seul angle pour tout le site. Le changer change le site entier. -------------------------------------------------------------------- */ --sun-angle: 105deg; --sun-warm: rgb(var(--rgb-brand) / 0.14); /* Voile de lecture sur photo. Arrêts 31 % / 93 %, jamais un noir uni. */ --scrim-read: linear-gradient(to top, rgb(var(--rgb-night) / 0.88) 0%, rgb(var(--rgb-night) / 0.62) 31%, rgb(var(--rgb-night) / 0) 93%); /* Chaleur directionnelle sur les surfaces nuit. */ --wash-sun: linear-gradient(var(--sun-angle), var(--sun-warm) 0%, rgb(var(--rgb-brand) / 0) 58%); /* Filet « ligne d'horizon » : rasant, s'éteint vers la droite. */ --rule-horizon: linear-gradient(90deg, var(--c-line) 0%, var(--c-line) 62%, rgb(var(--rgb-ink) / 0) 100%); --rule-horizon-night: linear-gradient(90deg, var(--c-line-night) 0%, var(--c-line-night) 62%, rgb(var(--rgb-paper) / 0) 100%); /* ----------------------------------------------------------------------- 9. TYPOGRAPHIE — 8 paliers, 2 sous-échelles, un trou assumé. TITRES, ancrés à 24px, ratios alternés 1,333 / 1,5 : 24 32 48 [64] 96. Le palier 64 EST dans l'échelle et n'est JAMAIS utilisé. C'est le trou. Il crée l'écart 2:1 entre titre de section et display. Ne le comblez pas. CORPS, ancré à 17px, ratio 1,125 : 13 15 17 19. Titres et corps ne partagent PAS la même échelle. C'est volontaire. -------------------------------------------------------------------- */ --t-display: clamp(2.75rem, 1.821rem + 4.643vw, 6rem); /* 44 -> 96 */ --t-title: clamp(1.875rem, 1.554rem + 1.607vw, 3rem); /* 30 -> 48 */ --t-title-s: clamp(1.5rem, 1.357rem + 0.714vw, 2rem); /* 24 -> 32 */ --t-card: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem); /* 20 -> 24 */ --t-lede: clamp(1.0625rem, 1.027rem + 0.179vw, 1.1875rem); /* 17 -> 19 */ --t-body: clamp(1rem, 0.982rem + 0.089vw, 1.0625rem); /* 16 -> 17 */ /* Les deux derniers pas portent un PLANCHER ABSOLU, en px et non en rem. Le garde-fou ultrawide plus bas réduit la racine (0.86em à partir de 21/9, 0.72em à partir de 32/9) : en 3440x1440 la racine tombe à 13,76px et ces deux valeurs, purement relatives, passaient sous le seuil de lisibilité (--t-micro à 11,2px). Le plancher est en px parce qu'il doit précisément ÉCHAPPER à la réduction de la racine — c'est tout son objet. L'intention de design est conservée : l'échelle continue de se réduire en ultra-large, mais elle s'arrête là où le texte cesserait d'être lisible. */ --t-small: max(0.9375rem, 13.5px); /* 15 */ --t-micro: max(0.8125rem, 12.5px); /* 13 */ /* LETTRINE — seule taille légitimement exprimée en `em`. Une lettrine se définit par rapport à son paragraphe (elle doit couvrir un nombre entier de lignes), pas par rapport à l'échelle des titres. Elle est déclarée ici pour rester dans la source de vérité, pas pour entrer dans l'échelle. */ --t-dropcap: 3.6em; /* GRAISSES — cinq. La graisse BAISSE quand la taille monte. --w-onmedia (700) est la seule dérogation : un label posé sur photo. Elle existe en token précisément pour cesser d'être écrite en dur. */ --w-display: 380; --w-body: 400; --w-title: 500; --w-label: 600; --w-onmedia: 700; /* INTERLIGNAGE — échelle inverse : il descend quand la taille monte. --lh-flush (1) sert au centrage d'un glyphe isolé (numéro, icône). */ --lh-display: 0.92; --lh-title: 1.00; --lh-card: 1.20; --lh-lede: 1.50; --lh-body: 1.62; --lh-micro: 1.40; --lh-flush: 1; /* APPROCHE — négative en display, nulle en corps, positive en micro. UNE seule valeur micro pour tout le site. */ --ls-display: -0.035em; --ls-title: -0.025em; --ls-card: -0.010em; --ls-body: 0; --ls-micro: 0.14em; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ----------------------------------------------------------------------- 10. ESPACEMENT — base 8px, marches 8/16/24/32/48/64/96/128. --sp-05 (4px) est ajouté pour absorber le continuum 0,3-0,45rem qui s'était installé hors échelle. C'est la marche la plus fine autorisée. -------------------------------------------------------------------- */ --sp-05: 0.25rem; /* 4 */ --sp-1: 0.5rem; /* 8 */ --sp-2: 1rem; /* 16 */ --sp-3: 1.5rem; /* 24 */ --sp-4: 2rem; /* 32 */ --sp-5: 3rem; /* 48 */ --sp-6: 4rem; /* 64 */ --sp-7: 6rem; /* 96 */ --sp-8: 8rem; /* 128 */ /* PADDING DE SECTION — trois valeurs, à faire ALTERNER. Séquence imposée page d'accueil : sm, md, md, lg, lg, sm, md, sm, sm. Deux sections consécutives au même padding ne sont acceptées que si leurs fonds diffèrent. */ --pad-lg: clamp(4rem, 3.143rem + 4.286vw, 7rem); /* 64 -> 112 */ --pad-md: clamp(3rem, 2.429rem + 2.857vw, 5rem); /* 48 -> 80 */ --pad-sm: clamp(2.25rem, 1.893rem + 1.786vw, 3.5rem); /* 36 -> 56 */ /* ----------------------------------------------------------------------- 11. GRILLE ET CONTENEURS — colonne calculée, conteneur dérivé. --wrap n'est pas rond : 12 x 96 + 11 x 24 = 1404. Un max-width: 1200px est la valeur la plus reconnaissable du web. -------------------------------------------------------------------- */ --grid-cols: 12; --grid-gap: 1.5rem; --grid-col: calc((100% - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols)); --gutter: 1.25rem; --wrap: 87.75rem; /* 1404 */ --wrap-prose: 43rem; /* 688 : plafond ABSOLU de la prose. Les 46rem et 52rem trouvés dans la feuille sont des dettes. */ --wrap-full: 108rem; /* 1728 */ --measure: 64ch; /* ----------------------------------------------------------------------- 12. RAYONS — BINAIRES. Zéro rayon entre 3px et 998px. --r-card (24px) est une DETTE CONNUE, pas un token de charte : il porte les seules cartes de prestation. Le sous-système --rdv-r-* de la page rendez-vous (28/20/13,6/11,2px) est une échelle parallèle à supprimer. -------------------------------------------------------------------- */ --r-0: 0; /* images, cartes, blocs, champs : TOUT */ --r-hair: 2px; /* puces et pastilles */ --r-pill: 999px; /* boutons et tags uniquement */ --r-card: 1.5rem; /* DETTE — à résorber, voir CHARTE §7 */ /* ----------------------------------------------------------------------- 13. OMBRES — décalées en X positif. La lumière vient de gauche. Aucune ombre teintée. Un `0 Npx` est un motif de rejet. --shadow-focus remplace les 3 anneaux terracotta écrits en dur. -------------------------------------------------------------------- */ --shadow-lift: 3px 2px 6px -4px rgb(var(--rgb-ink) / 0.10), 14px 18px 40px -24px rgb(var(--rgb-ink) / 0.30); --shadow-media: 24px 30px 70px -40px rgb(var(--rgb-ink) / 0.50); --shadow-night: 18px 22px 60px -34px rgb(var(--rgb-night) / 0.85); --shadow-focus: 0 0 0 3px rgb(var(--rgb-brand) / 0.18); /* ----------------------------------------------------------------------- 14. MOUVEMENT — une courbe par INTENTION, jamais une courbe pour tout. L'asymétrie entrée/sortie est ce qui rend le mouvement crédible : on entre en easeOut lentement, on sort en easeIn vite. Une transition SANS easing retombe sur `ease` : motif de rejet. -------------------------------------------------------------------- */ --e-enter: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint — entrées */ --e-hover: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic — survols */ --e-exit: cubic-bezier(0.32, 0, 0.67, 0); /* easeInCubic — sorties */ --e-panel: cubic-bezier(0.70, 0, 0.20, 1); /* modales, accordéon */ /* DURÉES — distribution bimodale. Rien entre 0,7s et 1,1s : zone morte, ni réactive ni cinématique. Quatre valeurs, pas une de plus. */ --d-micro: 0.2s; /* état au survol / focus */ --d-ui: 0.4s; /* interface : menu, panneau, onglet */ --d-block: 0.6s; /* révélation d'un bloc au scroll */ --d-hero: 1.2s; /* séquence d'ouverture, une fois par page */ /* DISTANCE DE RÉVÉLATION — en em, jamais en px : un gros titre doit bouger plus qu'un paragraphe. X négatif : le contenu entre du côté du soleil. */ --rise-y: 0.9em; --rise-x: -0.35em; --stag-block: 0.09s; /* cascade entre deux blocs, plafonnée à 5 enfants */ --stag-word: 0.05s; /* cascade entre deux mots d'un titre */ --focus: 3px solid var(--c-brand); --focus-offset: 3px; } /* GOUTTIÈRES PROGRESSIVES — pattern max() : la marge respire en proportion mais ne passe jamais sous un plancher pixel. BREAKPOINTS DE CHARTE — il n'en existe que trois : 48rem, 64rem, 88rem. Tout autre seuil (34, 47.99, 77.99, 100, 101rem) est une dette. */ @media (min-width: 48rem) { :root { --gutter: 1.5625rem; } } @media (min-width: 64rem) { :root { --gutter: max(5vw, 2.5rem); } } @media (min-width: 88rem) { :root { --gutter: max(6vw, 3.75rem); } } /* GARDE-FOU ULTRAWIDE — la racine réagit au RATIO, pas qu'à la largeur. */ @media (min-aspect-ratio: 21/9) { html { font-size: 0.86em; } } @media (min-aspect-ratio: 32/9) { html { font-size: 0.72em; } } /* ========================================================================= ALIAS DE MIGRATION — ZONE DE DETTE, À VIDER. Ces noms sont encore employés par styles.css et par des styles inline. Ils POINTENT sur le système ci-dessus : aucune valeur nouvelle ici. Chaque ligne supprimée est une ligne de dette remboursée. charte-check.mjs compte ces usages et les affiche à chaque passage. Le compteur doit décroître, jamais croître. ========================================================================= */ :root { /* Fusions de couleur — pointent sur leur cible après fusion. */ --c-accent-ink: var(--c-accent); /* était #9c4e28, fusionné */ --c-accent-tint: var(--c-paper-2); /* était #ecdccb, fusionné */ --c-night-soft: var(--c-night-2); --c-paper-3: var(--c-paper-2); --c-accent-btn: var(--c-accent); --c-accent-warm: var(--c-accent-night); --c-accent-onnight: var(--c-accent-night); /* Échelle typographique historique. --step-1 est employé en style inline dans legal/politique-confidentialite.html : à retirer du HTML d'abord. */ --step--1: var(--t-small); --step-0: var(--t-body); --step-1: var(--t-lede); --step-2: var(--t-card); --step-3: var(--t-title-s); --step-4: var(--t-title); --step-5: var(--t-title); --display: var(--t-display); --display-2: var(--t-title); --lh-tight: var(--lh-display); --lh-snug: var(--lh-title); --wrap-wide: var(--wrap-full); --wrap-narrow: var(--wrap-prose); --radius: var(--r-hair); --radius-lg: var(--r-0); --radius-pill: var(--r-pill); --dur: var(--d-block); --ease: var(--e-hover); --ease-out: var(--e-enter); --shadow-1: var(--shadow-lift); --shadow-2: var(--shadow-lift); }