/* ASHA Solution — Design tokens Source of truth: design-system/asha-solution/MASTER.md Direction: Hybrid Cyberpunk Heroes + B2B Trust & Authority */ :root { /* ── Surfaces ───────────────────────────────────────────────────────────── PASSAGE AU NOIR — 2026-08-12. Arbitrage de Gabriel : le navy ne va pas, il veut « le noir et le gris » de paloaltonetworks.com. Mesuré sur sa capture du 12/08 à 15:51 : la référence n'a que DEUX sols, #000000 et #141414, et leur frontière ne vaut que 1,140:1 tout en restant parfaitement visible. C'est la deuxième fois que la mesure d'une de ses références descend le seuil de bande que je croyais tenir (1,31 puis 1,14) : le ratio WCAG ne juge PAS un bord entre deux grandes surfaces. L'échelle entière est passée en neutre à luminance conservée, sauf le sol qui descend au noir pur. Conséquence favorable et vérifiée : un sol plus sombre AUGMENTE tous les ratios de texte. Quatre couleurs persona sur six passent maintenant en texte sur les trois sols, contre deux avant. Le navy est conservé en token mort ci-dessous : quatre médias ont ce fond cuit dedans (le bandeau du hero, l'affiche du CTA final, les deux MP4 de repli Safari), et il faut pouvoir raisonner dessus. Mesuré : chacun est à moins de 1,11:1 du noir pur, donc invisible comme écart de CLARTÉ. Ce qui reste est un très léger voile froid, pas un rectangle. */ --color-bg: #000000; --color-surface: #2B2B2B; --color-bg-light: #F8FAFC; --color-surface-light: #FFFFFF; /* Le navy d'origine, plus utilisé comme surface. Gardé nommé parce que quatre médias le portent en dur : shield-circuit.jpg (#010822), final-cta-league.webp (#0A0D27) et les deux capitana-*-navy-v1.mp4 (rgb 9,14,39). Ne pas le remettre comme fond de section. */ --color-navy-legacy: #0A0E27; /* Plateau d'illustration : le fond des blocs qui portent une image ou un personnage dans une carte. Il valait #05070D, plus sombre que le navy. Rien n'est plus sombre que le noir pur : il passe donc AU noir, et sur une section au sol-0 l'illustration saigne dans le sol au lieu d'être encadrée. C'est exactement ce que fait la référence de la fiche 09 (« prévoir un fond d'image qui aille jusqu'au bord »). Sur sol-1 il vaut 1,140:1 et sur sol-2 1,304:1, donc il redevient un encadrement là où il y en a besoin. Trois familles l'utilisent : .pillar__media (les 3 piliers de la home), .practice__hero (les 6 heros de la home) et .persona-deep__media (les 6 personas de metodologia). */ --color-plate: #000000; /* ── Text ─────────────────────────────────────────── */ --color-fg: #F8FAFC; /* L'encre de fond clair suit le passage au neutre : même clarté que le navy qu'elle remplace (écart 1,001:1), donc 18,19:1 sur --sol-clair. */ --color-fg-light: #101010; --color-muted: #94A3B8; --color-muted-light:#475569; /* ── Borders ──────────────────────────────────────── */ --color-border: rgba(255,255,255,0.08); --color-border-strong:rgba(255,255,255,0.18); --color-border-light: #E2E8F0; /* ── Persona / brand colors ──────────────────────── */ --color-primary: #DC2626; /* ASHA Red */ --color-primary-hover: #B91C1C; --color-csirt: #06B6D4; /* Cyan */ --color-zerotrust: #A855F7; /* Purple */ --color-ctem: #F97316; /* Orange */ --color-grc: #22C55E; /* Green */ --color-ngsoc: #E2E8F0; /* Silver */ /* ══════════════════════════════════════════════════════════════════════ LE BLEU EDITORIAL — 2026-09-04 ══════════════════════════════════════════════════════════════════════ Gabriel : « il y avait une erreur concernant le bleu qu'on a utilise, voila le bon bleu : #3773c2 ». CE QUI ETAIT L'ERREUR, ET ELLE ETAIT DE STRUCTURE. Depuis le 15/08, le « bleu » des sections editoriales (Foco en industrias claves, le CTA final de nosotros, Por que preferirnos, la devise d'esencia, INTEGRARLO TODO) n'etait pas un bleu : c'etait --color-csirt #06B6D4, la couleur de la PERSONA CSIRT, empruntee faute de bleu au systeme. Le design system interdit pourtant explicitement cet emprunt (« les six couleurs de persona sont reservees a leur persona »), et le commentaire de .industries le reconnaissait deja en 2026-08-11. Le bleu a donc son propre token, et la persona CSIRT garde son cyan : arbitrage de Gabriel du 2026-09-04. TEINTE. #3773c2 est a 214,1 deg, le cyan a 188,7 : ce n'est pas un ajustement, c'est un autre bleu. Les deux variantes ci-dessous sont donc calees sur 214 et non sur la famille du cyan. ── CE QUE LA MESURE IMPOSE, ET C'EST UN RENVERSEMENT ──────────────────── Le cyan etait une couleur CLAIRE (L 0,558), ce bleu est une couleur MOYENNE (L 0,179). Trois consequences, toutes mesurees, toutes opposees a ce que le cyan permettait : 1. EN TEXTE SUR FOND SOMBRE, IL ECHOUE PARTOUT — sol-0 4,39:1, sol-1 3,85, sol-2 3,37, pour un seuil de 4,5. Le cyan passait sur les trois (8,65 / 7,59 / 6,63). Tout texte bleu sur fond sombre doit donc passer par --color-azul-soft. Ce n'est pas une precaution : c'est la seule façon de garder ces textes lisibles. 2. EN APLAT, IL PORTE DU BLANC ET REFUSE L'ENCRE SOMBRE — blanc 4,78:1, --color-fg 4,57, encre #101010 3,98 ✗. Le cyan faisait l'inverse (encre 7,84, blanc 2,32). Le bouton du CTA de nosotros a donc du basculer du noir au blanc le jour de ce changement. Comme le rouge de marque a 4,62, ce blanc est conforme SANS MARGE : ne pas descendre le libelle sous 16 px. 3. SUR SOL CLAIR il passe, mais juste (4,57:1). Pour du petit texte sur fond clair, prendre --color-azul-ink, qui rend 5,79. */ --color-azul: #3773c2; /* le bleu de Gabriel. Aplat, filet, pastille. */ /* Variante CLAIRE, pour le TEXTE sur les trois sols sombres : 8,26 / 7,25 / 6,33:1. C'est blue-400, meme famille Tailwind que --color-primary-soft (red-400) et --color-zerotrust-soft (purple-400), et sa teinte est a 213,1 deg, soit 1 degre du ton plein : aucune derive visible. */ --color-azul-soft: #60A5FA; /* Variante ENCRE, pour le PETIT texte sur --sol-clair : 5,79:1 contre 4,57 pour le ton plein. C'est litteralement #3773c2 assombri, teinte 213,9 deg — blue-600 et blue-700 de Tailwind derivent a 221 et 224 et ne se lisent plus comme le meme bleu. */ --color-azul-ink: #2E63A8; /* ── State colors ─────────────────────────────────── */ --color-destructive: #EF4444; --color-ring: #DC2626; --color-success: #22C55E; --color-danger-soft: #FCA5A5; /* red-300 — danger glyphs on dark surfaces */ --color-csirt-soft: #67E8F9; /* cyan-300 — CSIRT cyan, brighter variant */ /* Ajoute le 2026-08-14 avec l'alignement de metodologia sur l'echelle noire. Le violet de marque #A855F7 ne vaut que 4,07:1 sur sol-2 pour un seuil de 4,5 a 11,5 px : la ligne de role de ZeroTrust echouait des que sa bande a quitte le fond blanc. purple-400 rend 6,37. Les cinq autres personas passaient deja (5,58 a 17,03), seul le violet etait en cause. */ --color-zerotrust-soft: #C084FC; --color-grc-soft: #4ADE80; /* green-400 — meme famille que les autres -soft : red-400, blue-400, purple-400, orange-400. Sert au survol des aplats verts. */ /* purple-400 — ZeroTrust sur fond sombre */ /* ── Typography ───────────────────────────────────── */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 56px; --text-6xl: 72px; --leading-tight: 1.2; --leading-snug: 1.35; --leading-body: 1.6; /* ── Spacing (4/8 rhythm) ─────────────────────────── */ /* Aligned with MASTER.md spacing tokens */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* New v2 aliases matching MASTER.md naming */ --space-xxs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base:16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-section: 128px; /* ── Radii ────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ── Shadows ──────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --shadow-md: 0 4px 12px rgba(0,0,0,0.25); --shadow-lg: 0 12px 32px rgba(0,0,0,0.35); /* ── Persona glows ────────────────────────────────── */ --glow-primary: 0 0 24px rgba(220, 38, 38, 0.45); --glow-csirt: 0 0 24px rgba( 6,182,212, 0.45); --glow-zerotrust: 0 0 24px rgba(168, 85,247, 0.45); --glow-ctem: 0 0 24px rgba(249,115, 22, 0.45); --glow-grc: 0 0 24px rgba( 34,197, 94, 0.45); --glow-ngsoc: 0 0 24px rgba(226,232,240, 0.20); /* ── Motion ───────────────────────────────────────── */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; /* ── Layout ───────────────────────────────────────── */ /* Elargi le 2026-08-11 sur la reference paloaltonetworks.fr, dont le contenu demarre a 152 px sur un viewport de 1900, soit 8 %, et occupe 92 % de la largeur. Le plafond etait a 1280 px, donc le contenu restait GELE a 1232 px quelle que soit la taille de l'ecran : mesure a 1920, les marges faisaient 344 px (17,9 %) et le contenu n'occupait que 64 % de la largeur. Le site etait pince au milieu des grands ecrans. Le plafond monte a 1760 px et la gouttiere devient proportionnelle, ce qui donne un contenu a 92 % de 1280 a 1760 px, puis 144 px de marge a 1920, soit 7,5 %, a huit pixels de la reference. La gouttiere reste bornee a 24 px en bas pour les petits ecrans, et le bloc media max-width 768px la ramene a 20 px. Attention, ce token sert aussi au padding du menu mobile. */ --container-max: 1760px; --container-px: clamp(24px, 4vw, 64px); --header-h: 88px; /* 72 -> 88 le 2026-08-14, demande de Gabriel. Le token suffit : .subnav se cale dessus par top: var(--header-h), et home-nav.js lit header.offsetHeight. Rien d'autre a toucher. */ --z-header: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; --z-base: 0; --z-raised: 10; --z-sticky: 20; /* ── v2 — Glass / scrim ─────────────────────────────────── */ /* Passés au neutre le 2026-08-12 avec le reste de l'échelle : un voile navy posé sur une page noire se voit comme un panneau bleu, et le header en verre est l'élément le plus visible du site. Même alpha, même clarté. */ --color-scrim: rgba(0, 0, 0, 0.85); --color-glass-bg: rgba(23, 23, 23, 0.6); --color-glass-border: rgba(255, 255, 255, 0.12); /* ── v2 — Persona color shorthand ───────────────────────── */ --color-persona-asha: var(--color-primary); --color-persona-csirt: var(--color-csirt); --color-persona-zerotrust: var(--color-zerotrust); --color-persona-ctem: var(--color-ctem); --color-persona-grc: var(--color-grc); --color-persona-ngsoc: var(--color-ngsoc); /* ── v2 — Surface elev ────────────────────────────────────────────────── Passé au neutre le 2026-08-12. Il valait #1E293B, qui était devenu la valeur de --sol-1 : une carte surélevée posée sur ce sol y aurait été invisible. Il monte donc d'un cran au-dessus de --color-surface, et se détache sur les trois sols (1,791 / 1,571 / 1,373:1). */ --color-surface-elev: #383838; /* Persona INK variants — ajout 2026-08-12. Mesure : la palette persona est une palette de MODE SOMBRE. Sur le fond clair #F8FAFC, cinq des six couleurs tombent sous 4,5:1 en texte (argent 1,18 · vert 2,18 · cyan 2,32 · orange 2,68 · violet 3,78), et seul le rouge passe (4,62). Symetriquement, le rouge est la seule qui ECHOUE sur le navy (3,94) la ou les cinq autres passent (4,80 a 15,42). D'ou deux familles de variantes, teinte et saturation conservees : *-ink = version assombrie, lisible en TEXTE sur fond clair (>= 4,5:1) *-lift = version eclaircie, lisible en TEXTE sur navy (>= 4,5:1) La couleur pure reste la couleur d'APLAT et de filet ; ces variantes ne servent qu'au texte. Ratios : design-system/asha-solution/CONTRASTE.md Aucune valeur existante n'est modifiee ici, ce sont uniquement des ajouts. */ --color-primary-ink: #DC2626; /* rouge : deja conforme sur fond clair, 4,62:1 */ --color-primary-lift: #EF4444; /* rouge eclairci pour le texte sur navy, 5,05:1 */ /* --color-primary-soft — ajout 2026-08-12, apres le passage au noir. Mesure : en PETIT corps (< 24 px), --color-primary-lift #EF4444 passe sur sol-0 (5,58) et sol-1 (4,90) mais echoue des sol-2 (4,28), sur --color-surface (3,76) et sur --color-surface-elev (3,12). Il manquait donc un cran pour les libelles de 12 a 16 px poses sur les sols clairs de la gamme sombre. Valeur = red-400 de la meme famille Tailwind que les deux autres, donc aucune derive de teinte : 7,59 / 6,66 / 5,82 / 5,12 / 4,24. Le seul endroit ou il ne passe pas est --color-surface-elev, qui ne porte pas de libelle rouge aujourd'hui. */ --color-primary-soft: #F87171; /* --color-ctem-soft — ajoute le 2026-09-04 avec la zone de reponse du formulaire de contact. La famille des variantes CLAIRES avait le rouge (red-400), le violet (purple-400) et depuis ce jour le bleu (blue-400) ; l'orange manquait, et il a manque des qu'un libelle orange a du se poser sur un fond a 12 % d'orange : --color-ctem #F97316 n'y rend que 4,26:1. orange-400 rend 5,27 pour 2,4 degres d'ecart de teinte (27,0 contre 24,6). orange-300 rendait 7,08 mais derivait de 6 degres. */ --color-ctem-soft: #FB923C; /* Le rouge des FONDS CLAIRS — ajoute le 2026-08-14 avec le header et le pied de page blancs. Le systeme avait deja deux eclaircies pour les fonds sombres (-lift, -soft) et rien dans l'autre sens : #DC2626 ne vaut que 3,87:1 sur le gris du header et 3,35 sur la pastille active, pour un seuil de 4,5 a 14 px. A 80 % vers le noir il rend 5,51 · 4,78 · 6,58 sur les trois fonds clairs du site. Meme teinte, plus profonde : ce n'est pas un deuxieme rouge de marque, c'est le meme sur un autre sol. */ --color-primary-deep: #B01E1E; --color-ctem-ink: #C05105; /* orange assombri, 4,54:1 sur #F8FAFC */ --color-csirt-ink: #047E93; /* cyan assombri, 4,55:1 */ --color-zerotrust-ink: #9C3EF6; /* violet assombri, 4,53:1 */ --color-grc-ink: #17843F; /* vert assombri, 4,55:1 */ --color-ngsoc-ink: #5475A2; /* argent assombri, 4,52:1 — derive tres loin de l'argent (il devient ardoise) : NGSOC n'a pas de vraie encre de fond clair, sa section reste donc sombre. */ /* Hauteur du menu secondaire de page (metodologia) : sert au sticky empile sous le header et au scroll-margin des ancres. */ --subnav-h: 60px; /* ── v2 — Easing curves ─────────────────────────────────── */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-cyber: cubic-bezier(0.83, 0, 0.17, 1); /* ══════════════════════════════════════════════════════════════════════ ÉCHELLE DE SOLS — 2026-08-12, seconde version (passage au noir) ══════════════════════════════════════════════════════════════════════ Première version : trois navys, #0A0E27 / #1E293B / #2D3A52. Gabriel l'a écartée après l'avoir vue en place, et a désigné la référence exacte qu'il voulait : paloaltonetworks.com, capture du 12/08 à 15:51. MESURÉ SUR CETTE CAPTURE, et c'est court : la référence n'a que DEUX sols, #000000 et #141414. Ses cartes sont à #161616 et #1C1716, donc PLUS CLAIRES que leur sol. Frontière entre les deux bandes : 1,140:1, et elle se voit. LE SEUIL DE BANDE, TROISIÈME RÉVISION. Il était à 1,25 hier, calibré sur une autre capture du même site à 1,31:1. Il descend à 1,140. C'est la deuxième fois qu'une référence de Gabriel le fait baisser : le ratio WCAG est calibré pour la LISIBILITÉ D'UN TEXTE, pas pour la détection d'un bord entre deux grandes surfaces uniformes. Ne plus jamais opposer un ratio WCAG à une frontière de bande observée. · seuil de BANDE : 1,14:1 entre deux sols voisins. · seuil de TEXTE : 4,5:1 (3:1 si ≥ 24 px, ou ≥ 18,66 px en gras). LE NOIR PUR EST LE PLANCHER, et il l'est vraiment. La remarque de la première version (« le navy est un plancher ») était vraie mais mal placée : le navy est à 1,11:1 du noir pur, il n'était donc pas un plancher mais un noir déguisé. Le vrai plancher est #000000, et --color-plate y descend avec lui. TROIS SOLS ET NON DEUX, ET POURQUOI. La référence en a deux ; la page en a quatorze bandes, et la séquence porte un sens (les sols les plus sombres sont les quatre moments où les personnages apparaissent). Le troisième sol est donc l'intervalle de la référence appliqué UNE FOIS DE PLUS : 1,140, puis 1,144. Rien d'inventé, le même pas répété. */ --sol-0: #000000; /* = --color-bg. Noir pur, plancher, sol de marque */ --sol-1: #141414; /* 1,140:1 contre sol-0 — valeur de la référence */ --sol-2: #212121; /* 1,144:1 contre sol-1, 1,304:1 contre sol-0 */ --sol-clair: #F8FAFC; /* = --color-bg-light. Réservé, une ou deux sections tout au plus */ /* Blanc --color-fg sur chaque sol : 20,07 / 17,61 / 15,39:1. La gamme entière est plus contrastée que la précédente (19,00 / 14,63 / 11,42). */ /* ── DOCTRINE DES DEUX RÉGIMES — RÉVISÉE PAR LA MESURE ──────────────────── Le passage au noir change la conclusion, et dans le bon sens : un sol plus sombre AUGMENTE le contraste d'un texte coloré. Ratios remesurés, couleur persona en TEXTE sur chaque sol : sol-0 sol-1 sol-2 (avant, sur navy) argent NGSOC 17,03 14,94 13,06 15,42 / — / — vert GRC 9,22 8,08 7,07 8,34 / 6,42 / 5,01 cyan CSIRT 8,65 7,59 6,63 7,83 / 6,03 / 4,70 orange CTEM 7,49 6,57 5,74 6,78 / 5,22 / 4,07 ✗ rouge lift 5,58 4,90 4,28 ✗ 5,05 / 3,89 ✗ violet ZeroTrust 5,31 4,66 4,07 ✗ 4,80 / 3,70 ✗ rouge #DC2626 4,35 ✗ 3,81 ✗ 3,33 ✗ 3,94 ✗ QUATRE couleurs sur six parlent maintenant en texte sur les TROIS sols, contre deux avant. Le régime texte n'est plus réservé au seul sol-0. RÉGIME TEXTE — argent, vert, cyan, orange : partout. Violet et rouge lift : sur sol-0 et sol-1 seulement. Le rouge #DC2626 reste exclu du petit corps sur TOUS les sols (4,35:1 au mieux, il a gagné 0,41 en passant au noir mais pas les 0,15 qui manquaient) : passer par --color-primary-lift, ou par l'aplat. RÉGIME APLAT — la couleur devient un fond de carte, un filet, une pastille. C'est le seul emploi sûr du rouge de marque, et le plus fort visuellement. Les aplats ne changent pas de valeur, donc la table ci-dessous est inchangée SAUF sa dernière colonne, l'encre sombre passant du navy à #101010 : --color-fg #FFFFFF encre #101010 verdict rouge #DC2626 4,62 4,83 3,94 BLANC violet #A855F7 3,78 3,96 4,81 ENCRE orange #F97316 2,68 2,80 6,79 ENCRE cyan #06B6D4 2,32 2,43 7,84 ENCRE vert #22C55E 2,18 2,28 8,35 ENCRE argent #E2E8F0 1,18 1,23 15,44 ENCRE CINQ des six aplats persona portent du texte SOMBRE. Le rouge ASHA est le seul à porter du BLANC, et c'est ce qui fait de lui l'aplat de marque. Le violet reste un faux ami : il paraît sombre et ne l'est pas assez. Corollaire inchangé : un libellé sur aplat rouge est à 4,62:1 pour un seuil de 4,5, conforme SANS marge. Ne pas le descendre sous 16 px, ne pas éclaircir le rouge (#EF4444 en aplat ne porte plus le blanc, 3,60:1). ── VISIBILITÉ D'UN APLAT CONTRE SON SOL ────────────────────────────────── Le rouge est le plus faible des six contre sol-2 (3,33:1), mais on parle ici d'une frontière de surface, pas de texte : le seuil est 1,14. Les six aplats sont donc très largement visibles sur les trois sols. */ /* --color-muted-lift : devenu FACULTATIF, gardé actif. Il avait été ajouté parce que --color-muted #94A3B8 tombait à 4,45:1 sur l'ancien sol-2 navy. Sur la gamme noire il vaut 8,19 / 7,18 / 6,28:1, donc il passe partout et le lift n'est plus requis. Je le garde en place : plusieurs règles l'utilisent déjà et il reste conforme (9,33 / 8,18 / 7,15:1). Le retirer serait un chantier sans gain. */ --color-muted-lift: #A0AEC2; } /* ══ L'ECHELLE TYPOGRAPHIQUE DU TELEPHONE 2026-09-07 ══════════════ Gabriel : « en general reduis la taille de tous les textes de la version telephone ». ELLE SE REGLE ICI, SUR LES TOKENS, ET NULLE PART AILLEURS. Le site ecrit ses tailles avec --text-* : les baisser a la source fait descendre toute la page d'un coup, en gardant les rapports entre les niveaux. Retoucher les regles une par une aurait demande des dizaines d'exceptions et casse la hierarchie au premier oubli. LA REDUCTION EST PROGRESSIVE, ET C'EST VOULU. Les grands corps perdent le plus (−22 % sur 3xl et 4xl), les petits presque rien (−8 % sur xs et sm). Un titre de 40 px sur un ecran de 390 px de large mange l'ecran ; une mention de 12 px ne gagne rien a devenir 10 px, elle devient juste illisible. Le plancher est donc a 11 px, et il n'est atteint que par --text-xs, qui ne sert qu'aux etiquettes. LES CHAMPS DE FORMULAIRE SONT L'EXCEPTION, ET ELLE N'EST PAS ESTHETIQUE : Safari iOS ZOOME automatiquement sur un champ dont la police est inferieure a 16 px, et ne dezoome jamais tout seul. La page se retrouve de travers des qu'on touche un champ. Ils restent donc a 16 px, quoi qu'il arrive. */ @media (max-width: 768px) { :root { /* L'ECHELLE EST ANCREE SUR LA HERO, VALIDEE A L'ECRAN LE 2026-09-07. Gabriel : « maintenant on a une bonne taille de texte et de titre, tu peux repandre pour que tout le site soit aligne a cela ». Les deux valeurs de reference sont le TITRE de la hero a 30 px et son TEXTE a 14 px. Tout le reste s'y accroche : 30 le sommet, le titre de la hero (pose en dur, voir redesign.css) 24 les titres de section — « un peu plus petit que le titre de la hero », demande explicite. Six points d'ecart, un cran franc. 14 le corps de lecture, la taille validee sur le texte de la hero 12 les boutons, deja valides sur ceux de la hero 10 les etiquettes, deja validees sur la ligne ISO Le rapport entre deux crans voisins reste proche de 1,17 : c'est ce qui fait qu'une page lue de haut en bas ne donne pas l'impression de sauts. */ --text-xs: 10px; /* etiquettes — la ligne ISO de la hero */ --text-sm: 12px; /* les boutons */ --text-base: 14px; /* LE CORPS — le texte de la hero */ --text-lg: 15px; --text-xl: 17px; --text-2xl: 20px; --text-3xl: 24px; /* LES TITRES DE SECTION */ --text-4xl: 27px; --text-5xl: 30px; /* le sommet, la hauteur du titre de la hero */ --text-6xl: 34px; --container-px: 20px; --header-h: 76px; --subnav-h: 54px; } /* Le zoom force de Safari iOS, explique plus haut. */ input, select, textarea { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-normal: 1ms; --duration-slow: 1ms; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }