01 · CouleursPalette verrouillée
Dix jetons de couleur seulement. Toute couleur utilisée dans le site doit provenir de cette palette. Les couleurs sont définies dans :root et référencées via var(--nom).
Couleurs spécifiques aux urgences — Deux jetons supplémentaires sont réservés à la page « Prendre soin de soi » : --urg-mag (#A8236B) et --urg-bg (#FFF5F9). Ils ne doivent pas être utilisés ailleurs.
02 · TypographieRoboto Slab & Open Sans
Deux polices seulement. Roboto Slab pour les titres, chiffres et éléments d'accroche. Open Sans pour les paragraphes, listes et textes courants.
Hiérarchie des titres
- h1 (hero) — Roboto Slab 900, clamp 2.5→4.5rem, uppercase.
- h2 (section) — Roboto Slab 800, clamp 1.8→2.8rem.
- h3 (carte) — Roboto Slab 700, 1.2rem.
- h4 (carte ressource) — Roboto Slab 800, 17.5px.
Corps de texte
- Paragraphe — Open Sans 400, 17px, line-height 1.65.
- Intro — Open Sans 400, 1.15rem, max-width 68ch.
- Meta / notes — Open Sans 400, 0.9rem, color --text-mid.
- Labels / kickers — Roboto Slab 700, 0.75rem, uppercase, letter-spacing .08em.
03 · ComposantsBoutons, badges, cartes
Les composants sont définis une seule fois et réutilisés partout. Ne pas recréer de variantes ad hoc : utiliser les classes existantes.
Boutons
Border-radius 40px · min-height 46px · padding 12px 28px · Open Sans 700 · transition 0.2s.
Badges
Border-radius 40px · padding 3px 9px · Roboto Slab 700 · 11.5px · uppercase · letter-spacing .03em.
Cartes
Carte standard
Fond --card, bordure 1.5px --border, rayon 16px, ombre au survol.
Carte accent
Filet vert à gauche (6px) pour les contenus importants.
Carte marine
Filet marine à gauche (6px) pour les contenus complémentaires.
Rayons
Ombres
04 · EspacementsRythme vertical et horizontal
Les espacements sont contrôlés par deux variables : --pad (padding horizontal) et --sec (padding vertical de section). Ne pas coder d'espacements en dur.
| Variable | Valeur | Usage |
|---|---|---|
| --pad | clamp(20px, 4vw, 56px) | Padding horizontal des conteneurs et sections. |
| --sec | clamp(56px, 7vw, 88px) | Padding vertical des sections. |
| gap (grilles) | 20px | Espace entre les cartes dans une grille. |
| margin-bottom (accordéons) | 24px | Espace entre chaque bloc accordéon. |
Règle — Toujours utiliser var(--pad) et var(--sec) plutôt que des valeurs fixes. Cela garantit un rendu fluide entre 320px et 1440px.
05 · AccessibilitéContrastes, focus, mouvement
Le site doit être utilisable au clavier, au lecteur d'écran, et respecter les préférences de mouvement réduit.
Focus visible
Contour vert 3px, offset 3px, sur tous les éléments interactifs via :focus-visible.
Contrastes
Texte sur fond clair : ratio ≥ 4.5. Texte sur fond marine : utiliser --border ou --off, jamais --text-mid.
Mouvement réduit
Respect de prefers-reduced-motion : toutes les transitions et animations sont neutralisées.
Attributs ARIA — Chaque accordéon utilise aria-expanded, chaque filtre aria-pressed, chaque zone dynamique aria-live. Ne jamais retirer ces attributs.
06 · Règles d'usageÀ faire / à ne pas faire
À faire
- Utiliser les variables CSS (
var(--navy),var(--green-dark), etc.). - Réutiliser les classes existantes (
.card,.btn,.badge). - Tester sur mobile, tablette et desktop.
- Vérifier le rendu avec
prefers-reduced-motionactivé. - Valider les contrastes avant de publier.
À ne pas faire
- Introduire une nouvelle couleur hors palette.
- Changer les polices (Roboto Slab / Open Sans uniquement).
- Coder des espacements en dur (
padding: 30px). - Créer une variante de bouton non documentée.
- Supprimer les attributs ARIA ou les styles de focus.
Mise à jour — Toute évolution de la charte doit être reportée dans ce document avant d'être déployée sur les pages. Version actuelle : v1.0 · novembre 2026.