/* ========================================================================== MA COMMUNE LIVE - Moteur de génération de sites communaux tokens.css : variables de design -------------------------------------------------------------------------- Vague 0 - fondation du theming. Ce fichier est LE seul point de variation entre deux communes. Tout le reste du CSS ne référence que des variables déclarées ici. Deux zones : A. THÉMÉ PAR COMMUNE -> injecté par le moteur Symfony à la génération B. SOCLE COMMUN -> identique sur tous les sites, ne pas surcharger ========================================================================== */ /* ========================================================================== A. ZONE THÉMÉE - injectée par le moteur -------------------------------------------------------------------------- Le back-office ne stocke QU'UNE SEULE couleur par commune (couleur de base). Le moteur en dérive les 8 valeurs ci-dessous par calcul déterministe. Algorithme complet et justifications : docs/vague-0-theming.md Résumé de la dérivation (base = couleur saisie par la commune) : --primary = base --primary-dark = base mélangée à 15 % de noir --primary-deep = base mélangée à 35 % de noir --primary-light = base mélangée à 78 % de blanc --primary-soft = base mélangée à 93 % de blanc --texte-sur-primaire = blanc ou marine, celui qui contraste le mieux --primary-ui = base assombrie jusqu'à 3:1 sur --surface --primary-ink = base assombrie jusqu'à 4.5:1 sur --surface ET sur --primary-light Les valeurs ci-dessous sont le thème de référence (vert Ma Commune Live). ========================================================================== */ :root { /* --- Couleur de base et nuances d'aplat ------------------------------- */ /* Couleur principale de la commune. Aplats : boutons, bandeaux, puces. */ --primary: #2ECC71; /* Survol d'un élément déjà coloré. */ --primary-dark: #27AE60; /* Survol appuyé, état actif, pression. */ --primary-deep: #1E8449; /* Fonds de badge, fonds d'icône, pastilles de catégorie. */ /* Note : la formule donne #D1F4E0, le brief fixe #D4EFDF (écart invisible). */ --primary-light: #D4EFDF; /* Fonds de section très pâles, alternance de blocs. */ /* Note : la formule donne #F0FBF5, le brief fixe #F4FBF7 (écart invisible). */ --primary-soft: #F4FBF7; /* --- Nuances calculées pour garantir le contraste --------------------- */ /* Ces trois variables sont ce qui rend le theming sûr quelle que soit la couleur communale. Voir §4.5 du brief. Ne jamais les figer à la main. */ /* Texte et icônes POSÉS SUR --primary (libellé de bouton, bandeau coloré). Vaut #FFFFFF sur une couleur foncée, #002147 sur une couleur claire. Ici la couleur de référence est claire -> marine. */ --texte-sur-primaire: #002147; /* Couleur de la marque utilisable pour un ÉLÉMENT D'INTERFACE sur fond clair : bordure de carte au survol, trait de soulignement, icône, filet actif. Garantie >= 3:1 sur --surface (RGAA 3.3, éléments d'interface). */ --primary-ui: #25A35A; /* Couleur de la marque utilisable pour du TEXTE sur fond clair : lien dans un paragraphe, libellé de badge, intitulé de rubrique. Garantie >= 4.5:1 sur --surface ET sur --primary-light (RGAA 3.2). */ --primary-ink: #19703E; /* --- Identité non chromatique ----------------------------------------- */ /* Logo / blason de la commune : chemin injecté par le moteur. */ --logo-commune: url('../img/logo-commune.svg'); } /* ========================================================================== B. SOCLE COMMUN - identique sur tous les sites ========================================================================== */ :root { /* --- Neutres : beige chaud (papier) -> blanc -> marine profond --------- */ --bg: #F7F5EF; /* fond général de page */ --bg-warm: #EFECE2; /* fond de section alterné, neutre */ --surface: #FFFFFF; /* fond de carte, de formulaire, de tableau */ --surface-dark: #002147; /* pied de page, encart d'appel à l'action */ /* --- Texte ------------------------------------------------------------ */ --text: #002147; /* titres et texte courant */ --text-mid: #556661; /* paragraphes, texte secondaire - 5.6:1 sur --bg */ --text-light: #667873; /* mentions, métadonnées, légendes - 4.7:1 sur blanc */ /* ATTENTION : --text-light valait #8A9A94 dans le brief, soit 2.95:1 sur blanc. Cette valeur échoue au niveau AA et même au seuil 3:1 des textes larges. Elle est corrigée ici en #667873. Voir docs/vague-0-theming.md. */ /* --- Bordures --------------------------------------------------------- */ --border: #E5E0D6; /* filet discret, séparateur, contour de carte */ --border-strong: #D3CCBE; /* contour de champ de formulaire, tableau */ /* --- Accents de rubrique ---------------------------------------------- Indépendants de la couleur communale : ils identifient les rubriques (actualités, agenda, travaux, annuaire...) de façon stable d'un site à l'autre. Chaque rubrique dispose de TROIS valeurs, sur le même principe que la couleur communale (voir --primary-ui / --primary-ink) : --accent-X aplat, pastille, icône, filet. >= 3:1 sur blanc -> conforme RGAA 3.3 (interface). NE JAMAIS l'utiliser pour du texte. --accent-X-soft fond pâle de badge et d'encart. --accent-X-ink texte : libellé de badge, intitulé de rubrique. >= 5:1 sur --accent-X-soft ET sur blanc, soit une marge confortable au-dessus du seuil AA de 4.5:1 (RGAA 3.2). Un badge de rubrique fait 12px en gras : ce n'est PAS du « texte large » au sens WCAG, il lui faut donc 4.5:1 et non 3:1. C'est l'erreur que le J-Lab (laboratoire de theming) a mise au jour : quatre des couleurs pleines échouaient une fois posées en texte sur leur propre fond pâle. --------------------------------------------------------------------- */ --accent-blue: #2563EB; --accent-blue-soft: #DBEAFE; --accent-blue-ink: #2159D4; --accent-violet: #7C3AED; --accent-violet-soft: #EDE9FE; --accent-violet-ink: #7738E4; --accent-green: #059669; --accent-green-soft: #D1FAE5; --accent-green-ink: #047552; --accent-orange: #EA580C; --accent-orange-soft: #FED7AA; --accent-orange-ink: #9A3A08; --accent-amber: #D97706; --accent-amber-soft: #FEF3C7; --accent-amber-ink: #9C5604; --accent-rose: #E11D48; --accent-rose-soft: #FFE4E6; --accent-rose-ink: #BD183C; /* --- Niveaux de gravité des alertes ------------------------------------ Jamais porteurs d'information à eux seuls : toujours accompagnés d'un libellé texte et d'une icône (RGAA 3.1). */ --alerte-info: var(--accent-blue); --alerte-vigil: var(--accent-amber); --alerte-grave: var(--accent-rose); /* --- Anneau de focus --------------------------------------------------- Volontairement NON thémé : une couleur communale claire (ocre, jaune) donnerait un focus invisible. Le marine garantit le contraste partout sur fond clair ; --focus-inverse prend le relais sur fond sombre. */ --focus: #002147; --focus-inverse: #FFFFFF; --focus-width: 3px; --focus-offset: 2px; /* --- Typographie ------------------------------------------------------- Polices self-hostées obligatoirement (RGPD + performance). Déclarations @font-face : voir assets/css/fonts.css Fichiers à déposer : voir assets/fonts/README.md */ --font-titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-texte: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; --taille-texte: 17px; --interligne: 1.55; /* --- Échelle de titres -------------------------------------------------- ARBITRÉ EN VAGUE 0 : échelle « institutionnelle » retenue. L'échelle ample du brief d'origine (h1 jusqu'à 64px) est écartée : sur un service public, elle occupe presque tout le premier écran en mobile et repousse l'information utile sous la ligne de flottaison. Le brief est mis à jour en conséquence (§4.2). */ --h1: clamp(32px, 4.5vw, 48px); --h2: clamp(26px, 3.2vw, 36px); --h3: clamp(20px, 2vw, 24px); --h4: 19px; /* --- Rythme vertical ---------------------------------------------------- ARBITRÉ EN VAGUE 0 : 64px. Les 100px du brief d'origine allongeaient démesurément une page d'accueil qui empile douze blocs. --section-y-lg sert aux respirations exceptionnelles (hero, pied de page). */ --section-y: 64px; --section-y-lg: 88px; /* Largeur réelle du moteur de mini-sites : 960px (cf. CLAUDE.md §2bis). Rupture mobile principale à 560px. Vitrine resserrée, priorité mobile. */ --container: 960px; --gouttiere: 24px; /* --- Espacements -------------------------------------------------------- */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; /* --- Rayons -------------------------------------------------------------- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --radius-pill: 50px; /* --- Ombres -------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 33, 71, 0.06); --shadow-md: 0 4px 12px rgba(0, 33, 71, 0.06), 0 2px 4px rgba(0, 33, 71, 0.04); --shadow-lg: 0 20px 40px rgba(0, 33, 71, 0.08), 0 8px 16px rgba(0, 33, 71, 0.04); /* --- Transitions --------------------------------------------------------- Toutes les durées passent par ces variables : une seule règle prefers-reduced-motion suffit alors à tout neutraliser. */ --duree-courte: .15s; --duree: .2s; --duree-longue: .35s; } /* -------------------------------------------------------------------------- Respect de prefers-reduced-motion (RGAA 13.8 / WCAG 2.3.3) Neutralise animations et déplacements pour les personnes sensibles au mouvement, sans casser les changements d'état (couleurs, contours). -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --duree-courte: 0s; --duree: 0s; --duree-longue: 0s; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }