Palette NAV V2 — Sobre institutionnel (validée 2026-04-14)

Direction : A — Sobre institutionnel, avec atténuation du bleu nuit à 60% d'opacité partout.

Tokens CSS

:root {
  /* Fonds */
  --nav-bg:          #f8f6f1;  /* fond principal, crème cassé */
  --nav-bg-alt:      #eee9df;  /* fond carte, chips inactifs */
  --nav-surface:     #ffffff;  /* cards, sidebar, header */

  /* Bleu nuit — couleur primaire, utilisée avec opacité 60% */
  --nav-primary-raw: 26, 34, 56;              /* #1a2238 en RGB */
  --nav-primary:     rgba(26, 34, 56, 0.6);   /* usage standard partout */
  --nav-primary-solid: #1a2238;                /* uniquement texte sur fond clair si lisibilité l'exige */

  /* Accent — safran */
  --nav-accent:      #f5b342;
  --nav-accent-soft: rgba(245, 179, 66, 0.85);

  /* Texte */
  --nav-text:        #1a2238;  /* texte principal : plein pour lisibilité */
  --nav-text-muted:  rgba(26, 34, 56, 0.55);
  --nav-text-on-primary: #f8f6f1;  /* texte sur fond bleu 60% */
}

Règle — application du bleu à 60%

Le bleu nuit est toujours utilisé à 60% d'opacité sur les éléments visuels :

Élément	Couleur	Note
Bandeau bas (fond)	`--nav-primary`	rgba(26,34,56,0.6)
Pins carte	`--nav-primary`	border white 2px
Chips actifs (fond)	`--nav-primary`	texte safran dessus
Surlignages / hover	`--nav-primary`	transition douce
Header (si coloré)	`--nav-primary`	sinon blanc
Titres h1/h2	`--nav-text` (plein)	lisibilité > esthétique
Texte courant	`--nav-text` (plein)	lisibilité > esthétique

Exception lisibilité : texte, titres, et labels restent en bleu plein (#1a2238). Le 60% s'applique aux surfaces colorées, pas au texte. Si un texte doit apparaître sur fond bleu 60%, utiliser --nav-text-on-primary (crème).

Swatches de référence

#f8f6f1   crème (fond)
#eee9df   sable (fond alt)
#1a2238   bleu nuit (plein — texte/titres uniquement)
60% opa   bleu nuit 60% (tout le reste : bandeau, pins, chips, surlignages)
#f5b342   safran (accent : CTA, pins prioritaires, liens actifs)

Typographie

System font stack (pas de Google Fonts externe, cf. G règles)
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
Titres : font-weight: 700
Courant : font-weight: 400

États interactifs

Hover : augmenter l'opacité du bleu à 0.75
Active/selected : bleu plein en fond + texte safran
Disabled : opacité 0.3

Accessibilité

Contraste texte plein bleu nuit sur crème : ratio > 10:1 (AAA)
Bleu 60% sur crème : éviter d'y mettre du texte lisible — usage décoratif ou élément UI uniquement
Safran sur bleu plein : ratio ~6:1 (AA)
Focus ring : outline safran 2px, offset 2px

Usage par composant

Header          fond: --nav-surface (blanc)
                logo: --nav-text plein
                nav-links: --nav-text-muted

Sidebar         fond: --nav-surface
                titres filtres: --nav-text-muted UPPERCASE
                chips inactifs: fond --nav-bg-alt, texte --nav-text
                chips actifs: fond --nav-primary (60%), texte --nav-accent

Carte           fond: --nav-bg-alt
                pins standard: fond --nav-primary (60%), border white
                pins prioritaires: fond --nav-accent, border --nav-primary

Bandeau bas     fond: --nav-primary (60%)
                texte: --nav-text-on-primary
                CTA "Soutenir": fond --nav-accent, texte --nav-text plein

Fiche détail    fond: --nav-surface
                header fiche: bandeau --nav-primary (60%) avec crème dessus
                tags fonction: chips --nav-bg-alt
                bouton retour: --nav-primary (60%) hover --nav-accent

4.0 KiB Raw Blame History