/* ========================================================================== FREEMAN RH PRO, tokens de design Version 2, 12 septembre 2026. Direction artistique refondue sur le logo. Source : _site_docs/BRIEF_FREEMAN.md, section Identité visuelle, et le logo fourni par le client (bleu nuit #12314F, turquoise #4FB3A5, blanc du F évidé). La palette PORTEO héritée (bleu ardoise #14395C, vert bouteille #14523F, ocre laiton #A85F14) est abandonnée. Note de DA complète : _site_docs/DA_FREEMAN.md. Aucune règle de composant dans ce fichier. Importer avant tout autre CSS : @import url("tokens.css"); Aucune police distante, aucune dépendance externe. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COULEURS DE MARQUE Source unique : le logo FREEMAN RH PRO. Deux couleurs, pas trois. Bleu nuit #12314F (tuile, mot FREEMAN), turquoise #4FB3A5 (barre médiane du F, mention RH PRO), blanc du F évidé dans la tuile. Tous les ratios ci dessous sont CALCULÉS par la formule WCAG 2.1 (luminance relative, seuil de linéarisation 0.04045), jamais estimés. Colonne "blanc" : contraste sur #FFFFFF. Colonne "sombre" : contraste sur le fond du thème sombre #12171C. Seuils retenus : 4.5 pour du texte, 3 pour du texte large ou un élément d'interface (bord, rail, soulignement, silhouette). ------------------------------------------------------------------ */ /* Bleu nuit du logo, couleur principale. blanc 13.31 | sombre 1.35 */ --color-primary: #12314F; /* Variante foncée, survol du bouton primaire. blanc 15.82 | sombre 1.14 */ --color-primary-dark: #0C2439; /* Variante claire. Aplats et tuile du logo en thème sombre. Tient 3 sur le fond sombre et porte du blanc à 5.70. blanc 5.70 | sombre 3.16 */ --color-primary-light: #2A69A8; /* Variante douce, texte et liens en thème sombre. blanc 2.18 | sombre 8.28 */ --color-primary-soft: #8FB4D4; /* TURQUOISE, seconde couleur de marque. La valeur exacte du client, #4FB3A5, ne vaut que 2.52 sur blanc : elle ne peut porter ni texte ni élément d'interface sur fond clair. La famille est donc déclinée en trois degrés et la valeur du client est conservée intacte au degré où elle est réellement lisible, sur fond sombre. */ /* Turquoise profond, porte du texte sur blanc. blanc 7.33 | sombre 2.46 */ --color-secondary: #0F6156; /* TURQUOISE DU LOGO, valeur client intacte. Texte accent et éléments de marque en thème sombre. blanc 2.52 | sombre 7.14 */ --color-secondary-light: #4FB3A5; /* Turquoise pâle, texte sur surface sombre. blanc 1.55 | sombre 11.64 */ --color-secondary-soft: #9BDCD2; /* L'OCRE LAITON #A85F14 HÉRITÉ DE PORTEO EST SUPPRIMÉ de la palette de marque. Décision de DA : le logo ne porte que deux couleurs, une troisième couleur de marque aurait occupé le même rôle d'accent que le turquoise et brouillé la lecture. L'ocre ne survit que comme couleur de SIGNAL, dans --color-warning et --color-warning-bg (section 3), que la classe todo consomme pour les placeholders. L'accent de marque est donc remappé sur une déclinaison du turquoise. */ /* Accent : chiffres, échéances, liens de service, rail du héros, soulignement de la page courante, anneau de focus. Alias de la famille turquoise, un seul accent sur tout le site. blanc 7.33 | sombre 2.46 */ --color-accent: var(--color-secondary); /* Variante claire, accent en thème sombre. blanc 2.52 | sombre 7.14 */ --color-accent-light: var(--color-secondary-light); /* Variante pâle, surtitre sur surface inversée. blanc 1.55 | sombre 11.64 */ --color-accent-soft: var(--color-secondary-soft); /* ------------------------------------------------------------------ 2. NEUTRES Gamme froide de 50 à 900. Le 500 passe AA de justesse (4.53). Pour un paragraphe gris, utiliser le 600. ------------------------------------------------------------------ */ --color-neutral-50: #F7F8F9; /* blanc 1.06 | sombre 16.95 */ --color-neutral-100: #EEF1F4; /* blanc 1.13 | sombre 15.90 */ --color-neutral-200: #DDE3E8; /* blanc 1.29 | sombre 13.93 */ --color-neutral-300: #C3CCD4; /* blanc 1.63 | sombre 11.08 */ --color-neutral-400: #97A3AE; /* blanc 2.57 | sombre 7.01 */ --color-neutral-500: #6B7883; /* blanc 4.53 | sombre 3.98 */ --color-neutral-600: #4E5A65; /* blanc 7.06 | sombre 2.55 */ --color-neutral-700: #3A444D; /* blanc 9.93 | sombre 1.81 */ --color-neutral-800: #262E35; /* blanc 13.77 | sombre 1.31 */ --color-neutral-900: #12171C; /* blanc 18.03 | sombre 1.00 */ --color-white: #FFFFFF; --color-black: #000000; /* ------------------------------------------------------------------ 3. COULEURS SÉMANTIQUES Deux jeux : le jeu de base pour fond clair, le jeu "on-dark" pour le texte posé sur surface sombre. ------------------------------------------------------------------ */ /* Le vert de conformité est poussé vers le vert franc, teinte 144 degrés, pour garder 28 degrés d'écart avec le turquoise de marque, teinte 172. Sans cet écart, un état "conforme" se lirait comme une couleur de marque. */ --color-success: #1D6B3C; /* sur blanc 6.52, AA corps de texte */ --color-success-on-dark: #77C48D; /* sur #12171C 8.64, AA corps de texte */ --color-success-bg: #E9F4EB; /* fond teinté, décoratif seul. success dessus 5.78, texte dessus 15.97 */ --color-warning: #8A5A00; /* sur blanc 5.93, AA corps de texte */ --color-warning-on-dark: #E8A33D; /* sur #12171C 8.36, AA corps de texte */ --color-warning-bg: #FBF1DF; /* fond teinté, décoratif seul */ --color-danger: #B3261E; /* sur blanc 6.54, AA corps de texte */ --color-danger-on-dark: #FF8B82; /* sur #12171C 7.95, AA corps de texte */ --color-danger-bg: #FBEAE8; /* fond teinté, décoratif seul */ --color-info: #1D5B94; /* sur blanc 7.06, AA corps de texte */ --color-info-on-dark: #8FBEE8; /* sur #12171C 9.18, AA corps de texte */ --color-info-bg: #E7F0F8; /* fond teinté, décoratif seul */ /* ------------------------------------------------------------------ 4. RÔLES D'INTERFACE, THÈME CLAIR PAR DÉFAUT Ce sont ces tokens que les composants consomment, jamais les couleurs brutes ci dessus. ------------------------------------------------------------------ */ --surface-1: #FFFFFF; /* fond de page */ --surface-2: var(--color-neutral-50); /* section alternée */ --surface-3: var(--color-neutral-100); /* carte discrète, en tête de tableau */ --surface-inverse: var(--color-neutral-900); --color-text: var(--color-neutral-900); /* corps, 18.03 sur blanc */ --color-text-muted: var(--color-neutral-600); /* secondaire, 7.06 sur blanc */ --color-text-faint: var(--color-neutral-600); /* mentions courtes, 7.06 sur blanc, 6.64 sur surface-2 */ --color-text-inverse: #FFFFFF; --color-text-on-primary: #FFFFFF; /* 13.31 sur le primaire */ --color-text-on-primary-hover: #FFFFFF; /* 15.82 sur le primaire foncé */ --color-text-on-accent: #FFFFFF; /* 7.33 sur l'accent turquoise profond */ --color-link: var(--color-primary); /* 13.31 sur blanc */ --color-link-hover: var(--color-primary-dark); --color-link-visited: #5B3C7A; /* 8.85 sur blanc */ --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-border-brand: var(--color-primary); /* Anneau de focus : turquoise de marque dans les deux thèmes, jamais l'ambre. 7.33 sur blanc, 6.89 sur surface-2, 6.47 sur surface-3. Seuil 3 tenu. */ --color-focus: var(--color-accent); --color-focus-inverse: #FFFFFF; /* Anneau de focus sur une surface de marque, toujours foncée. Blanc dans les deux thèmes. */ --color-focus-on-brand: #FFFFFF; /* Bord des champs de saisie. Composant d'interface, seuil WCAG 1.4.11 de 3:1. Le neutre 500 vaut 4.53 sur blanc, il passe. */ --color-border-field: var(--color-neutral-500); /* Accent employé en TEXTE. Distinct de --color-accent, qui reste la couleur de marque et peut servir en décoratif. Le rôle texte doit passer AA dans les deux thèmes. Porte le surtitre (13.3px gras), les chiffres de statistique et les échéances. Thème clair : 7.33 sur blanc, 6.89 sur surface-2, 6.47 sur surface-3. */ --color-accent-text: var(--color-accent); --color-selection-bg: #D9E4EF; /* texte dessus 13.99 */ --color-selection-text: var(--color-neutral-900); /* ------------------------------------------------------------------ 4 bis. LOGO, DEUX JEUX DE VALEURS Le markup inline des 18 pages, logo.svg et logo-mark.svg consomment cinq variables : --logo-tile (la tuile arrondie), --logo-glyph (le F évidé), --logo-accent (la barre médiane du F), --logo-word (le mot FREEMAN) et --logo-sub (la mention RH PRO). Le markup n'est jamais dupliqué : tout se règle ici et dans le scope .site-footer. Trois contextes, deux jeux de valeurs seulement, parce que le pied de page s'inverse avec le thème (.site-footer utilise --surface-inverse) : en tête thème clair, fond #FFFFFF, jeu FOND CLAIR pied thème clair, fond #12171C, jeu FOND SOMBRE en tête thème sombre, fond #12171C, jeu FOND SOMBRE pied thème sombre, fond #FFFFFF, jeu FOND CLAIR Les deux jeux sont écrits en hexadécimal littéral et NON par var() sur un token de marque. Raison : le thème sombre remappe --color-primary, et une variable personnalisée se résout au point d'usage. Un jeu construit sur var(--color-primary) changerait donc de valeur dans le pied de page en thème sombre, exactement là où il doit rester bleu nuit. ------------------------------------------------------------------ */ /* Jeu FOND CLAIR. Le logo du client tel quel, à une exception près. tuile #12314F, primaire. 13.31 sur blanc, silhouette nette glyphe #FFFFFF, F évidé. 13.31 sur la tuile barre #4FB3A5, turquoise client. 5.28 sur la tuile mot #12314F. 13.31 sur blanc sous #0F6156, turquoise profond. 7.33 sur blanc Le turquoise brut du client ne vaut que 2.52 sur blanc. Comme RH PRO est du TEXTE, la mention passe sur la déclinaison profonde. Le turquoise exact reste sur la barre médiane, où il est posé sur la tuile bleu nuit. */ --logo-clair-tile: #12314F; --logo-clair-glyph: #FFFFFF; --logo-clair-accent: #4FB3A5; --logo-clair-word: #12314F; --logo-clair-sub: #0F6156; /* Jeu FOND SOMBRE. La marque n'est pas inversée, elle est transposée dans un registre plus clair. La structure reste lisible : tuile bleue, F blanc, barre turquoise. Inverser en tuile blanche à F bleu nuit aurait échangé la figure et le fond, donc changé le dessin de la marque. tuile #2A69A8, primaire clair. 3.16 sur #12171C, seuil 3 tenu glyphe #FFFFFF. 5.70 sur la tuile barre #9BDCD2, turquoise pâle. 3.68 sur la tuile Le turquoise brut ne vaudrait que 2.31 sur la tuile éclairée, il est donc remonté au degré pâle de la même famille. mot #FFFFFF. 18.03 sur #12171C sous #4FB3A5, turquoise client. 7.14 sur #12171C, valeur exacte du logo restituée, c'est sur fond sombre qu'elle est lisible. */ --logo-sombre-tile: #2A69A8; --logo-sombre-glyph: #FFFFFF; --logo-sombre-accent: #9BDCD2; --logo-sombre-word: #FFFFFF; --logo-sombre-sub: #4FB3A5; /* Les cinq variables réellement consommées par le markup. Par défaut, thème clair et en tête : jeu fond clair. */ --logo-tile: var(--logo-clair-tile); --logo-glyph: var(--logo-clair-glyph); --logo-accent: var(--logo-clair-accent); --logo-word: var(--logo-clair-word); --logo-sub: var(--logo-clair-sub); /* ------------------------------------------------------------------ 5. TYPOGRAPHIE, PILES SYSTÈME UNIQUEMENT Titres en sérif système, corps en sans sérif système, chiffres en monospace système pour aligner les montants. ------------------------------------------------------------------ */ --font-titres: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", Times, serif; --font-corps: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-chiffres: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ------------------------------------------------------------------ 6. ÉCHELLE TYPOGRAPHIQUE Ratio assumé 1.200 (tierce mineure). Base 1rem égale 16px. ------------------------------------------------------------------ */ --fs-100: 0.83rem; /* 13.3px, mentions légales, étiquettes */ --fs-200: 1rem; /* 16px, corps de texte */ --fs-300: 1.2rem; /* 19.2px, chapô, question de FAQ */ --fs-400: 1.44rem; /* 23px, titre de niveau 3 */ --fs-500: 1.73rem; /* 27.7px, titre de niveau 2 */ --fs-600: 2.07rem; /* 33.1px, titre de niveau 1 sur mobile */ --fs-700: 2.49rem; /* 39.8px, titre de niveau 1 large, montant */ /* Graisses réellement disponibles dans les piles système */ --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; /* Hauteurs de ligne */ --lh-display: 1.15; /* fs-700 */ --lh-titre: 1.25; /* fs-500 et fs-600 */ --lh-sous-titre: 1.35;/* fs-400 */ --lh-chapo: 1.5; /* fs-300 */ --lh-corps: 1.6; /* fs-200 */ --lh-compact: 1.45; /* fs-100, cellules de tableau */ /* Interlettrage */ --ls-titre: -0.01em; --ls-normal: 0; --ls-etiquette: 0.08em; /* petites capitales */ /* Longueur de ligne cible, environ 62 caractères */ --measure: 34rem; /* ------------------------------------------------------------------ 7. ESPACEMENT, base 4px, valeurs en rem ------------------------------------------------------------------ */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* Mise en page */ --container: 72rem; /* largeur maximale de contenu */ --gutter: var(--space-lg); /* gouttière de grille */ --section-y: var(--space-2xl); --touch-target: 48px; /* cible tactile minimale */ /* ------------------------------------------------------------------ 8. RAYONS, volontairement courts ------------------------------------------------------------------ */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* rayon maximal du site */ --radius-pill: 999px; /* puces d'étape et badges uniquement */ /* ------------------------------------------------------------------ 9. OMBRES, grises et discrètes, jamais colorées ------------------------------------------------------------------ */ --shadow-none: none; --shadow-1: 0 1px 2px rgba(18, 23, 28, .06), 0 1px 1px rgba(18, 23, 28, .04); --shadow-2: 0 2px 6px rgba(18, 23, 28, .08), 0 4px 12px rgba(18, 23, 28, .06); --shadow-3: 0 8px 24px rgba(18, 23, 28, .12); /* ------------------------------------------------------------------ 10. BORDS ET ANNEAU DE FOCUS ------------------------------------------------------------------ */ --border-hairline: 1px; --border-strong: 2px; --border-rail: 4px; --focus-width: 3px; --focus-offset: 2px; /* ------------------------------------------------------------------ 11. MOUVEMENT, minimal et utilitaire ------------------------------------------------------------------ */ --duree-rapide: 120ms; --duree-normale: 180ms; --easing: cubic-bezier(.2, 0, .2, 1); /* ------------------------------------------------------------------ 12. PLANS DE SUPERPOSITION ------------------------------------------------------------------ */ --z-base: 0; --z-entete: 100; --z-menu: 200; --z-bandeau: 300; } /* ========================================================================== THÈME SOMBRE AUTOMATIQUE Ne s'applique pas si l'utilisateur a explicitement choisi le thème clair. Seuls les rôles changent, les couleurs de base restent définies sur :root nu. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Surfaces */ --surface-1: #12171C; --surface-2: #1A2128; --surface-3: #232B33; --surface-inverse: #FFFFFF; /* Texte */ --color-text: #E8ECEF; /* 15.17 sur #12171C */ --color-text-muted: var(--color-neutral-400); /* 7.01 sur #12171C */ --color-text-faint: var(--color-neutral-400); /* 7.01 sur #12171C, 6.32 sur surface-2 */ --color-text-inverse: #12171C; --color-text-on-primary: #FFFFFF; /* 5.70 sur --color-primary-light */ --color-text-on-accent: #12171C; /* 7.14 sous l'accent turquoise */ /* Liens et marque */ --color-link: var(--color-primary-soft); /* 8.28 sur #12171C */ --color-link-hover: #A8C4DC; --color-link-visited: #B9A7D4; /* 8.19 sur #12171C */ --color-border-brand: var(--color-primary-light); /* CORRECTION D'AUDIT, conservée. Le bleu nuit vaut 1.35 sur le fond sombre : boutons, icônes, rails, chevrons et pastilles disparaissaient. On remonte le rôle primaire sur la variante claire, qui tient 3.16 en aplat. */ --color-primary: var(--color-primary-light); /* 3.16 sur le fond sombre, seuil 3 tenu */ --color-primary-dark: #4585BE; /* 4.59 sur le fond sombre, survol plus clair */ --color-text-on-primary: #FFFFFF; /* 5.70 sur le primaire sombre */ --color-text-on-primary-hover: #12171C; /* 4.59 sur le primaire de survol */ /* ACCENT EN THÈME SOMBRE. Le turquoise profond tombe à 2.46 sur #12171C : il ne tiendrait ni le texte (4.5) ni le soulignement de page courante (3). Toute la famille accent remonte donc d'un degré, sur le turquoise exact du logo. */ --color-accent: var(--color-accent-light); /* 7.14 sur #12171C, 6.44 sur surface-2 */ --color-accent-text: var(--color-accent-light); /* 7.14 sur #12171C, 5.68 sur surface-3 */ /* CORRECTION. --color-accent-soft porte le surtitre de .section--inverse. En thème sombre --surface-inverse devient BLANC : le degré pâle n'y vaudrait que 1.55. On redescend donc sur le turquoise profond, 7.33 sur blanc. */ --color-accent-soft: var(--color-secondary); /* 7.33 sur blanc */ /* Bord des champs, le neutre 500 tombe à 3.98, le 400 vaut 7.01 */ --color-border-field: var(--color-neutral-400); /* Bords */ --color-border: #2C353D; --color-border-strong: #3D4852; /* Focus, turquoise de marque comme en thème clair, jamais l'ambre. 7.14 sur #12171C, 6.44 sur surface-2, 5.68 sur surface-3. */ --color-focus: var(--color-accent-light); --color-focus-inverse: #12171C; /* Sélection */ --color-selection-bg: #23415C; /* texte blanc dessus 10.59 */ --color-selection-text: #FFFFFF; /* LOGO. En tête en thème sombre : jeu fond sombre. Le pied de page repasse au jeu fond clair, voir freeman.css section 15. */ --logo-tile: var(--logo-sombre-tile); --logo-glyph: var(--logo-sombre-glyph); --logo-accent: var(--logo-sombre-accent); --logo-word: var(--logo-sombre-word); --logo-sub: var(--logo-sombre-sub); /* Sémantique, on bascule sur le jeu lisible en sombre */ --color-success: var(--color-success-on-dark); --color-warning: var(--color-warning-on-dark); --color-danger: var(--color-danger-on-dark); --color-info: var(--color-info-on-dark); --color-success-bg: #16302A; --color-warning-bg: #33280F; --color-danger-bg: #3A1E1C; --color-info-bg: #172B3D; /* Les ombres ne se voient pas sur fond sombre, on les neutralise et la hiérarchie passe par les surfaces et les bords. */ --shadow-1: none; --shadow-2: none; --shadow-3: 0 8px 24px rgba(0, 0, 0, .5); } } /* ========================================================================== THÈME SOMBRE FORCÉ Appliqué quand l'utilisateur choisit explicitement le thème sombre, quel que soit le réglage du système. Contenu identique au bloc ci dessus. ========================================================================== */ :root[data-theme="dark"] { /* Surfaces */ --surface-1: #12171C; --surface-2: #1A2128; --surface-3: #232B33; --surface-inverse: #FFFFFF; /* Texte */ --color-text: #E8ECEF; /* 15.17 sur #12171C */ --color-text-muted: var(--color-neutral-400); /* 7.01 sur #12171C */ --color-text-faint: var(--color-neutral-400); /* 7.01 sur #12171C, 6.32 sur surface-2 */ --color-text-inverse: #12171C; --color-text-on-primary: #FFFFFF; /* 5.70 sur --color-primary-light */ --color-text-on-accent: #12171C; /* 7.14 sous l'accent turquoise */ /* Liens et marque */ --color-link: var(--color-primary-soft); /* 8.28 sur #12171C */ --color-link-hover: #A8C4DC; --color-link-visited: #B9A7D4; /* 8.19 sur #12171C */ --color-border-brand: var(--color-primary-light); /* CORRECTION D'AUDIT. Identique au bloc automatique ci dessus : le bleu nuit vaut 1.35 sur le fond sombre, boutons et icônes disparaissaient. */ --color-primary: var(--color-primary-light); /* 3.16 sur le fond sombre */ --color-primary-dark: #4585BE; /* 4.59 sur le fond sombre */ --color-text-on-primary: #FFFFFF; /* 5.70 sur le primaire sombre */ --color-text-on-primary-hover: #12171C; /* 4.59 sur le primaire de survol */ /* Accent en thème sombre, identique au bloc automatique */ --color-accent: var(--color-accent-light); /* 7.14 sur #12171C */ --color-accent-text: var(--color-accent-light); /* 7.14 sur #12171C */ --color-accent-soft: var(--color-secondary); /* 7.33 sur blanc, surface inversée */ --color-border-field: var(--color-neutral-400); /* Bords */ --color-border: #2C353D; --color-border-strong: #3D4852; /* Focus, turquoise de marque, identique au bloc automatique */ --color-focus: var(--color-accent-light); /* 7.14 sur #12171C */ --color-focus-inverse: #12171C; /* Sélection */ --color-selection-bg: #23415C; /* texte blanc dessus 10.59 */ --color-selection-text: #FFFFFF; /* LOGO, identique au bloc automatique. En tête : jeu fond sombre. Le pied de page repasse au jeu fond clair, voir freeman.css section 15. */ --logo-tile: var(--logo-sombre-tile); --logo-glyph: var(--logo-sombre-glyph); --logo-accent: var(--logo-sombre-accent); --logo-word: var(--logo-sombre-word); --logo-sub: var(--logo-sombre-sub); /* Sémantique, on bascule sur le jeu lisible en sombre */ --color-success: var(--color-success-on-dark); --color-warning: var(--color-warning-on-dark); --color-danger: var(--color-danger-on-dark); --color-info: var(--color-info-on-dark); --color-success-bg: #16302A; --color-warning-bg: #33280F; --color-danger-bg: #3A1E1C; --color-info-bg: #172B3D; /* Ombres neutralisées, hiérarchie par surfaces et bords */ --shadow-1: none; --shadow-2: none; --shadow-3: 0 8px 24px rgba(0, 0, 0, .5); } /* ========================================================================== AJUSTEMENTS DE TOKENS SELON LA LARGEUR Aucune règle de composant, uniquement des valeurs de tokens. ========================================================================== */ @media (min-width: 48rem) { :root { --section-y: var(--space-3xl); --gutter: var(--space-xl); } } /* Préférence de mouvement réduit : on coupe les durées à la source. */ @media (prefers-reduced-motion: reduce) { :root { --duree-rapide: 1ms; --duree-normale: 1ms; } } /* Contraste renforcé : bords plus visibles, focus plus épais. */ @media (prefers-contrast: more) { :root { --color-border: var(--color-neutral-400); --color-border-strong: var(--color-neutral-600); --focus-width: 4px; } }