/* ========================================================================== Dyslexiques de France — Jetons de design -------------------------------------------------------------------------- Toute couleur du site vient d'ici. Le mode « fond clair » du widget d'accessibilité se contente de redéfinir ces variables sur : aucun besoin de filtre ni de sélecteur sur les styles en ligne. ========================================================================== */ :root { /* --- Marque ---------------------------------------------------------- */ --violet: #7d47de; /* couleur principale */ --violet-fonce: #6432c6; --violet-clair: #8f5ce8; --violet-accent: #8b5cf6; --violet-lien: #a678f2; --violet-lien-hover: #b18aff; --violet-pale: #b493ec; --violet-tres-pale: #c9b0f5; /* --- Fonds ----------------------------------------------------------- */ --fond-page: #0b0a12; --fond-admin: #0e0c16; /* l'administration a son propre fond */ --fond-barre: #07060c; --fond-carte: #161320; --fond-carte-2: #131120; /* champs, sous-cartes */ --fond-carte-3: #12101c; /* bouton « Aa » de la barre utilitaire */ --fond-bouton: #0e0c16; /* boutons secondaires de la barre utilitaire */ --fond-doux: #191627; --fond-violet: #251f3d; --fond-violet-2: #201b30; --fond-panneau: #2a2145; /* footer, encarts violets */ --fond-sombre: #241b3a; /* barres qui restent sombres */ --fond-hero: #1a1530; /* --- Bordures -------------------------------------------------------- */ --bord: #262138; --bord-doux: #221f33; --bord-carte: #272238; --bord-champ: #2e2846; --bord-violet: #453a6b; --bord-violet-2: #342c52; --bord-clair: #6f5bb0; --bord-ligne: #1c1830; --bord-barre: #322b4e; /* contour des boutons de la barre utilitaire */ --fond-survol: #1c1830; /* survol des entrées de navigation */ --fond-actif: #2a2347; /* entrée de navigation courante */ /* --- Textes ---------------------------------------------------------- */ --texte: #f2effc; --texte-fort: #ffffff; --texte-doux: #cfc8e6; --texte-2: #b3aacf; --texte-3: #9c93bd; --texte-4: #8d81bd; /* --- États ----------------------------------------------------------- */ --succes: #7fd99a; --succes-fond: #12271a; --succes-bord: #2a4a35; --succes-plein: #0f2015; /* fond des boutons de validation */ --alerte: #e6b45c; --alerte-fond: #2b2113; --alerte-bord: #4a3b1c; --alerte-badge: #d97706; /* pastilles de compteur */ --requis: #b45309; /* astérisque des champs obligatoires */ --danger: #f08a8a; --danger-fond: #2b1517; --danger-bord: #5a2e2e; --danger-bouton: #b13a3a; --danger-hover: #962e2e; /* --- Typographie ----------------------------------------------------- */ --police-titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --police-texte: 'Atkinson Hyperlegible', Verdana, system-ui, sans-serif; --police-dys: 'Lexend', 'Atkinson Hyperlegible', Verdana, sans-serif; --police-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; /* --- Rayons ---------------------------------------------------------- Six crans, un seul par usage. Toute valeur d'arrondi du site passe par l'un d'eux : deux surfaces de même nature ont ainsi le même galbe. */ --r-mini: 4px; /* traits et barres : une forme, pas une surface */ --r-xs: 8px; /* étiquettes, extraits de code, pastilles */ --r-sm: 12px; /* champs, petits boutons, encarts discrets */ --r-md: 16px; /* boutons, encarts, en-têtes */ --r-lg: 22px; /* cartes */ --r-xl: 30px; /* grands panneaux, médias */ --r-pill: 999px; /* pilules et boutons ronds */ /* --- Espacements ----------------------------------------------------- */ --gap-blocs: 64px; /* rythme vertical entre blocs de contenu */ --largeur-max: 1240px; --largeur-texte: 820px; --largeur-large: 1140px; /* --- Ombres ---------------------------------------------------------- */ --ombre-carte: 0 14px 30px -14px rgba(74, 37, 150, .25); --ombre-modale: 0 40px 80px -30px rgba(0, 0, 0, .5); --ombre-menu: 0 24px 50px -16px rgba(0, 0, 0, .7); --ombre-bouton: 0 10px 24px -10px rgba(125, 71, 222, .55); /* --- Transitions ----------------------------------------------------- */ --t-rapide: 120ms cubic-bezier(.4, 0, .2, 1); --t-base: 180ms cubic-bezier(.4, 0, .2, 1); color-scheme: dark; } /* ========================================================================== MODE FOND CLAIR Activé par le widget d'accessibilité : . Les correspondances reprennent celles du prototype, à l'identique. ========================================================================== */ html[data-theme="clair"] { --violet-lien: #6432c6; --violet-lien-hover: #4a2596; --violet-pale: #6f5bb0; --violet-tres-pale: #4a2596; --fond-page: #faf9fd; --fond-admin: #f3f1f9; --fond-barre: #ffffff; --fond-carte: #ffffff; --fond-carte-2: #faf8fe; --fond-carte-3: #fcfbfe; --fond-bouton: #f3f1f9; --fond-doux: #f6f1fd; --fond-violet: #f0e8fc; --fond-violet-2: #f3edfc; --fond-hero: #efe7fc; --bord: #e5def4; --bord-doux: #eee9f9; --bord-carte: #e9e0fa; --bord-champ: #e2d6f6; --bord-violet: #d5c6f2; --bord-violet-2: #ddd0f5; --bord-clair: #c7b2ef; --bord-ligne: #f0ecf9; --bord-barre: #d5c6f2; --fond-survol: #f0ecf9; --fond-actif: #f0e8fc; --texte: #241b3a; --texte-fort: #241b3a; --texte-doux: #3a3158; --texte-2: #544a75; --texte-3: #6d6490; --texte-4: #6d6490; --succes: #14532d; --succes-fond: #e9f6ee; --succes-bord: #c9e6d4; --succes-plein: #f2fbf4; --alerte: #8a5310; --alerte-fond: #fdf3e3; --alerte-bord: #eeddb9; --requis: #b45309; --danger: #a13030; --danger-fond: #fbeeee; --danger-bord: #ecc8c8; --ombre-carte: 0 14px 30px -16px rgba(74, 37, 150, .18); --ombre-menu: 0 24px 50px -18px rgba(74, 37, 150, .22); color-scheme: light; } /* Certaines surfaces restent violet sombre même en mode clair — la maquette fait de même : ce sont des respirations dans la page, pas des cartes. Sur celles-ci les jetons reprennent donc leurs valeurs sombres, sinon le texte basculerait au foncé sur un fond resté foncé. */ html[data-theme="clair"] [data-toujours-sombre], html[data-theme="clair"] .pied, html[data-theme="clair"] .admin-side, html[data-theme="clair"] .b-stats, html[data-theme="clair"] .b-sectionsteaser__inner, html[data-theme="clair"] .b-video__frame, html[data-theme="clair"] .b-video__placeholder, html[data-theme="clair"] .compte-identite, html[data-theme="clair"] .contact-aside__violet, html[data-theme="clair"] .chat__tete { --fond-page: #241b3a; --fond-carte: #2a2145; --fond-carte-2: #241b3a; --fond-carte-3: #2f2551; --fond-bouton: #322754; --fond-doux: #2f2551; --fond-violet: #362a5c; --fond-violet-2:#2f2551; --fond-survol: #362a5c; --fond-actif: #3d2f68; --bord: #3a2f5e; --bord-doux: #33294f; --bord-carte: #3a2f5e; --bord-champ: #443666; --bord-ligne: #362a5c; --bord-barre: #453a6b; --bord-violet: #56488a; --bord-violet-2:#453a6b; --texte: #f2effc; --texte-fort: #ffffff; --texte-doux: #d9d2f0; --texte-2: #c5bce6; --texte-3: #9d92c7; --texte-4: #8d81bd; --violet-lien: #d9d2f0; --violet-lien-hover: #b18aff; --violet-pale: #b493ec; --violet-tres-pale: #c9b0f5; --succes: #7fd99a; --alerte: #e6b45c; --danger: #f08a8a; color-scheme: dark; } /* ========================================================================== PRÉFÉRENCES DE CONFORT DE LECTURE Pilotées par le widget d'accessibilité (attributs sur ). ========================================================================== */ /* Le logo est un PNG blanc : sur fond clair il faut l'inverser, sauf dans les zones qui restent volontairement sombres (pied de page, barre d'admin). */ html[data-theme="clair"] img[src*="logo-white"] { filter: invert(1) hue-rotate(180deg); } html[data-theme="clair"] [data-toujours-sombre] img[src*="logo-white"] { filter: none; } html[data-dys="1"] body, html[data-dys="1"] body * { font-family: var(--police-dys) !important; } html[data-espacement="1"] body { letter-spacing: .06em; word-spacing: .18em; } html[data-interligne="1"] body p, html[data-interligne="1"] body li, html[data-interligne="1"] body dd { line-height: 2; } html[data-souligner="1"] a { text-decoration: underline; text-underline-offset: 3px; }