/* ========================================================================== tokens.css — Centre Dentaire Kandil Design system source of truth. Task 3.1.1. Direction : « Marine et blanc » (D-040, 2026-09-21), qui remplace « Bleu clair ». Reprise du cabinet Ibn Sina (Agadir), un autre site du même auteur, dont la cliente change de direction et dont le Dr Kandil a demandé l'allure. Agadir est à 500 km : aucune requête, aucun patient, aucun résultat de recherche en commun avec Mohammedia. La règle 4 vise cliniquelabeldent.ma, qui est dans la même ville — elle ne vise pas celui-ci. Le principe : fond presque blanc, cartes blanches posées dessus, beaucoup d'air, et UN SEUL marine employé quatre ou cinq fois par page. La retenue fait le design. ⚠️ Le fond reste TEINTÉ, et ce n'est pas une demi-mesure. Deux choses en dépendent, pas une : · les cartes — 51 emplois de --color-surface, qui sont tous « du blanc posé sur ce qui ne l'est pas ». Un fond passé à #FFFFFF franc les dissout d'un coup et oblige à redessiner chacune avec un bord ; · le rythme vertical — `.section--alt` est une bande BLANCHE pleine largeur, et c'est l'alternance fond / blanc / fond qui découpe la page quand on la descend. Sur un fond blanc, l'alternance disparaît et la page devient un seul bloc de 4 000 px. #EDF3FB a été retenu après mesure : 1,116:1 contre une carte blanche, entre l'ancien #E9EDF9 (1,170) et le blanc franc. Assez clair pour lire « blanc et marine », assez teinté pour que les cartes et les bandes tiennent encore. Contraste : toute valeur portant du texte est >= 4.5:1 (WCAG AA), tout contour de contrôle >= 3:1 (WCAG 1.4.11). Les ratios ci-dessous sont CALCULÉS, pas estimés, et les deux valeurs qui échouaient de peu au premier jet ont été corrigées : #2E6BE6 tombait à 4,48:1 sur le fond de page, il est donc redescendu à #1B4DB3 (7,09:1) pour tout ce qui est du texte, et #2E6BE6 ne sert plus que de décor. Cible de mesure : Android en plein soleil, patient de 55 ans. ========================================================================== */ :root { /* ---- Marine de marque ----------------------------------------------- 800 est le marine d'Ibn Sina (#0B1E5B) : boutons, bandes sombres, pied de page, sur-titres. 15,54:1 sous du blanc, il ne pose aucune question. 500 est le bleu vif : décor seulement — icônes, filets, puces. 4,48:1 sur le fond de page, donc JAMAIS sous du texte, exactement comme l'ancien #5B7CFA ne passait jamais sous du blanc. 600 est le bleu de lien : 7,61:1 sur blanc, 7,09:1 sur le fond. */ --color-navy-50: #F1F5FC; --color-navy-100: #E2EAF7; --color-navy-200: #C4D4ED; --color-navy-300: #9FC0F0; /* sur fond marine — 8,34:1 */ --color-navy-400: #5B82C9; --color-navy-500: #2E6BE6; /* décor seul — 4,48:1 sur le fond */ --color-navy-600: #1B4DB3; /* 7,61:1 — liens */ --color-navy-700: #12306F; /* 12,51:1 — survol */ --color-navy-800: #0B1E5B; /* 15,54:1 — boutons, bandes, pied de page */ --color-navy-900: #081748; /* 17,12:1 — survol de bouton */ /* Les anciens noms, gardés en alias le temps que plus rien ne les appelle. Les supprimer d'un coup casserait en silence ce qui les nomme encore. */ --color-blue-50: var(--color-navy-50); --color-blue-100: var(--color-navy-100); --color-blue-200: var(--color-navy-200); --color-blue-300: var(--color-navy-300); --color-blue-400: var(--color-navy-400); --color-blue-500: var(--color-navy-500); --color-blue-600: var(--color-navy-600); --color-blue-700: var(--color-navy-700); --color-blue-800: var(--color-navy-800); /* ---- Neutres --------------------------------------------------------- Ils ne sont pas gris : chacun porte une pointe du marine de la marque, à clarté constante. Les contrastes sont donc inchangés, mais la page a une seule température de couleur au lieu de deux. */ --color-ground: #EDF3FB; /* le fond de page : plus clair et plus bleu */ --color-surface: #FFFFFF; /* les cartes, et les bandes .section--alt */ --color-surface-2: #E6EEFA; /* en-têtes de tableau, zones creuses */ --color-surface-3: #DEE9F8; /* aplat bleu très pâle */ --color-border: #D5E0F0; /* bords de cartes : décoratifs, aucun seuil */ /* Le contour d'un bouton n'est pas décoratif : c'est lui qui dit où finit la zone cliquable. WCAG 1.4.11 demande 3:1 pour ça, et --color-border plafonne à 1,06:1 sur le fond. D'où un second bord, réservé aux contrôles. Inchangé par le passage au marine : recalculé sur le nouveau fond, il donne 3,33:1 (fond), 3,58:1 (blanc), 3,20:1 (bande claire). Il passait, il passe. */ --color-border-strong: #7C87A6; /* 3,33:1 sur le fond · 3,58:1 sur blanc */ --color-ink: #141A2E; /* titres, prix, chiffres — 16,07:1 sur le fond */ --color-ink-soft: #505876; /* texte secondaire — 6,52:1 sur le fond */ --color-dark: #0B1E5B; /* bandes sombres, pied de page : le marine */ --color-on-dark: #9FC0F0; /* le bleu clair, sur fond marine — 8,34:1 */ --color-muted-on-dark: #A7B4D4; /* texte atténué sur marine — 7,49:1 */ /* ---- Signaux --------------------------------------------------------- */ /* Ce que le bleu ne peut pas dire : remboursé, entente préalable, urgence. Désaturés volontairement — ils désignent un état, pas une deuxième marque. */ --color-ok: #0A7C3E; --color-warn: #B45309; --color-danger: #C0261A; /* ---- Rôles ----------------------------------------------------------- L'appel à l'action passe au marine plein : c'est lui qui porte la structure. Le lien reste un bleu plus clair que le bouton — sinon un lien au fil du texte devient indiscernable d'un mot en gras. L'accent ne porte jamais de texte, uniquement des filets, des puces et des icônes. */ --color-cta: var(--color-navy-800); --color-cta-hover: var(--color-navy-900); --color-link: var(--color-navy-600); --color-accent: var(--color-navy-500); /* ---- Typographie ------------------------------------------------------ Deux fontes, deux métiers (D-040). Plus Jakarta Sans — approuvée 2026-08-18 (D-016). Elle garde TOUT le corps de texte. Géométrique adoucie : des « a » et « g » qui restent ouverts en petit corps, ce qui la rend tenable sur des pages de 2 000 mots lues sur un Android en plein soleil. Source Serif 4 — titrage seul, h1 et h2, en graisse 400 (D-040). C'est le geste repris d'Ibn Sina, et c'est lui qui fait le calme : un titre en serif 400 pose la page là où une sans en 800 la pousse. La serif ne descend jamais dans le texte courant, où elle fatiguerait. ⚠️ Interdits, et la raison n'a pas changé : Inter et Fraunces, le couple de cliniquelabeldent.ma, qui est dans la même ville. Ibn Sina emploie Inter — c'est précisément la part de sa typographie qu'on NE reprend PAS. Garder Plus Jakarta en texte courant est ce qui empêche les deux sites de se confondre, et ce qui tient la règle 4. Les deux sont auto-hébergées en woff2 (3.1.3) : aucune requête externe, et les paliers de vitesse se mesurent sur mobile. Voir fonts.css pour le piège des 126 Ko de la variable. */ --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-tabular: "tnum" 1, "lnum" 1; /* colonnes de prix alignées */ /* ---- L'échelle ------------------------------------------------------- Sept rôles, pas trente tailles. On écrit « titre de section », jamais « 2,25rem ». Les valeurs sont fluides : elles glissent de 375 à 1440 px sans palier, ce qui supprime les réglages en double dans les paliers. */ /* ⚠️ h1 et h2 ont grandi d'un cran avec le passage à la serif 400 (D-040). Ce n'est pas un goût : une serif en 400 pèse moins à l'écran qu'une sans en 800 au même corps, et au corps d'avant les titres s'effaçaient devant leur propre chapô. 28→40 est devenu 30→44, 24→34 est devenu 25→36. */ --text-display: clamp(1.875rem, 1.2rem + 2.9vw, 2.75rem); /* 30 → 44 · h1 */ --text-title: clamp(1.5625rem, 1.17rem + 1.7vw, 2.25rem); /* 25 → 36 · h2 */ --text-heading: clamp(1.19rem, 1.12rem + 0.3vw, 1.31rem); /* 19 → 21 · h3 fort */ --text-lead: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 → 18 · chapô */ --text-strong: 1.0625rem; /* 17 · titre de carte */ --text-body: 1rem; /* 16 · texte courant */ --text-small: 0.875rem; /* 14 · secondaire */ --text-micro: 0.75rem; /* 12 · libellés, sur-titres */ /* ---- Les graisses ---------------------------------------------------- Quatre, et chacune a un métier. Entre 600 et 650, personne ne voit la différence mais le navigateur interpole une graisse de plus. */ --w-regular: 400; /* texte courant */ --w-medium: 600; /* libellés, boutons, titres de cartes */ --w-bold: 700; /* titres de section */ --w-display: 800; /* h1 et grands chiffres, rien d'autre */ /* ---- Interlignes, liés à la taille ---------------------------------- */ --lh-display: 1.06; --lh-title: 1.18; --lh-heading: 1.35; --lh-lead: 1.6; --lh-body: 1.65; --lh-small: 1.5; /* ---- Approches, liées à la taille ----------------------------------- Un grand titre a besoin d'être resserré, un petit texte ne le supporte pas. Les capitales, elles, ont besoin d'air. */ /* ⚠️ Les deux premières ont été DESSERRÉES pour la serif (D-040). Une géométrique en 800 a besoin qu'on la resserre, une serif en 400 a des empattements qui font déjà la liaison : au même -0,032em les lettres se touchaient, surtout sur « ff » et « Ti ». */ --track-display: -0.02em; --track-title: -0.015em; --track-heading: -0.016em; --track-body: 0em; --track-label: 0.14em; /* ---- Mesures : au-delà, l'œil perd le début de la ligne suivante ----- ⚠️ Le ch ment ici. Il vaut la largeur du zéro, et le zéro de Plus Jakarta Sans fait 0,73 em, soit 1,8 fois le caractère moyen d'une phrase française. 68ch n'achetait donc pas 68 caractères mais 110. Les valeurs ci-dessous sont posées sur des lignes réellement rendues et comptées, pas déduites : 46ch donne 74 caractères à 16 px. Cible 75, plafond 85. Vérifiable : node scripts/measure.js --probe … 🔴 2026-09-21, D-040 : le piège s'est REFERMÉ une deuxième fois, et pour la raison exacte que ce commentaire décrit. Passer les h1 et h2 à Source Serif 4 change la valeur du `ch` SOUS EUX, parce que le zéro n'a plus la même largeur : Plus Jakarta Sans zéro = 0,7320 em Source Serif 4 zéro = 0,5291 em (mesuré, pas déduit) Le même `22ch` achetait donc 38 % de largeur en moins, et le titre de l'accueil est passé de deux lignes à quatre sans que rien ne le signale : aucun débordement, aucun contrôle au rouge, juste un titre cassé. Les valeurs des h1 et h2 sont multipliées par 0,7320 / 0,5291 = 1,3835. --measure-lead et --measure-body ne bougent PAS : ils ne s'appliquent qu'à des éléments restés en sans. Les trois autres largeurs en `ch` posées sur un h2 sont corrigées du même facteur dans components.css : .section-head--center, .cta-band, .split-dark. */ --measure-display: 30ch; /* était 22ch en sans — même largeur réelle */ --measure-lead: 52ch; /* ~72 caractères au maximum du bloc (sans) */ --measure-body: 46ch; /* ~74 caractères, était 68ch = 110 (sans) */ /* ---- Espacement — base 4px ------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --gutter: var(--space-4); --container: 1180px; /* ---- Rayons ----------------------------------------------------------- Ouverts d'un cran (D-040) : c'est la moitié du « calme » qu'on est venu chercher, l'autre moitié étant les ombres ci-dessous. Les boutons, eux, ne passent pas par --radius-md : ils deviennent des pilules pleines, voir .btn dans components.css. */ --radius-sm: 6px; --radius-md: 12px; /* champs, petites tuiles */ --radius-lg: 18px; /* cartes */ --radius-xl: 28px; /* panneaux, grandes cartes */ --radius-full: 999px; /* pastilles, puces, boutons */ /* ---- Ombres ----------------------------------------------------------- La planche pose les cartes sur le fond, elle ne les fait pas léviter. Très basse opacité, très courte diffusion. ⚠️ Elles travaillent plus qu'avant, et c'est forcé : sur l'ancien fond #E9EDF9 une carte blanche se détachait toute seule. Sur #F4F7FC elle ne se détache plus (1,06:1). Ce sont désormais le bord et l'ombre qui disent où la carte commence. Diffusion allongée, opacité toujours basse, teinte marine. */ --shadow-card: 0 1px 2px rgba(11, 30, 91, 0.04), 0 4px 14px rgba(11, 30, 91, 0.06); --shadow-lift: 0 2px 8px rgba(11, 30, 91, 0.06), 0 16px 36px rgba(11, 30, 91, 0.10); --shadow-deep: 0 4px 12px rgba(11, 30, 91, 0.07), 0 28px 68px rgba(11, 30, 91, 0.14); --shadow-focus: 0 0 0 3px rgba(46, 107, 230, 0.38); /* ---- Mouvement -------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-enter: 700ms; /* ---- Empilement -------------------------------------------------------- */ --z-sticky: 100; --z-nav: 200; --z-modal: 300; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }