# 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

```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
```