ltbxd-actorle/designs/sunrise-charte.md

# Charte graphique — Sunrise

Thème lumineux, éditorial, chaleureux. Inspiré des tons ambrés du petit matin.
Sobre sans être froid, accessible sans être infantile.

---

## Couleurs

### Palette principale

| Token         | Hex       | Usage                                      |
|---------------|-----------|--------------------------------------------|
| `--bg`        | `#fef6ee` | Fond de page — crème orangé très doux      |
| `--surface`   | `#ffffff` | Cartes, navbar, modals                     |
| `--surface-warm` | `#fff7ed` | Fond de champ input, surfaces secondaires |
| `--surface-tint` | `#ffedd5` | Hover sur items de dropdown, fond actif  |

### Orange

| Token            | Hex       | Usage                                           |
|------------------|-----------|-------------------------------------------------|
| `--orange`       | `#ea580c` | Couleur principale — boutons, liens, logo       |
| `--orange-mid`   | `#f97316` | Hover sur boutons primaires                     |
| `--orange-light` | `#fed7aa` | Fond cellule surlignée (grille de jeu)          |
| `--orange-pale`  | `#fff7ed` | Fond très pâle — identique à `--surface-warm`   |

> La couleur d'accentuation unique est l'orange `#ea580c` (orange-600 Tailwind).
> Ne pas introduire de seconde couleur d'accentuation.

### Texte

| Token           | Hex       | Usage                                     |
|-----------------|-----------|-------------------------------------------|
| `--text`        | `#1c1917` | Corps de texte, labels, titres            |
| `--text-muted`  | `#78716c` | Texte secondaire, descriptions            |
| `--text-faint`  | `#a8a29e` | Placeholders, métadonnées, separateurs    |

### Bordures et ombres

| Token            | Valeur                          | Usage                             |
|------------------|---------------------------------|-----------------------------------|
| `--border`       | `#e8d5c0`                       | Bordures standard — chaudes       |
| `--border-warm`  | `#fdba74`                       | Bordure cellule active (grille)   |
| `--shadow-warm`  | `rgba(180, 100, 30, 0.08)`      | Ombre douce sur cartes et navbar  |

---

## Typographie

### Polices

| Rôle          | Famille          | Google Fonts                        |
|---------------|------------------|-------------------------------------|
| Titres / Logo | **Fraunces**     | Sérif optique, poids 400 et 700     |
| Corps         | **Inter**        | Sans-serif, poids 400, 500, 600, 700 |

```html
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

### Hiérarchie

| Niveau     | Police     | Taille | Poids | Utilisation                          |
|------------|------------|--------|-------|--------------------------------------|
| H1 page    | Fraunces   | 26px   | 700   | Titre de page (login, register)      |
| H2 modal   | Inter      | 18px   | 700   | Titres de modals                     |
| Logo       | Fraunces   | 22px   | 700   | Navbar brand                         |
| Corps      | Inter      | 15px   | 400   | Texte courant, inputs                |
| Label      | Inter      | 13px   | 600   | Labels de formulaire                 |
| Secondaire | Inter      | 14px   | 400   | Items dropdown, descriptions         |
| Micro      | Inter      | 11–12px| 600   | Badges, headers dropdown, métadonnées|

### Règles typographiques

- Titres Fraunces : `letter-spacing: -0.3px` pour un rendu serré et élégant
- Pas de `text-transform: uppercase` sauf pour des labels discrets (taille ≤ 12px, spacing ≥ 0.5px)
- Interlignage corps : `1.5` minimum
- Taille minimale affichée : `11px`

---

## Rayons (Border radius)

| Token         | Valeur | Usage                                        |
|---------------|--------|----------------------------------------------|
| `--radius-sm` | `6px`  | Inputs, cellules grille, petits éléments     |
| `--radius-md` | `10px` | Dropdowns, popovers, tooltips                |
| `--radius-lg` | `18px` | Cartes auth, modals                          |
| Pilule        | `100px`| Bouton primaire, bouton submit               |

> Le bouton primaire utilise systématiquement `border-radius: 100px` (forme pilule).
> Les champs de saisie utilisent `--radius-sm` (6px), jamais la pilule.

---

## Composants

### Bouton primaire

```css
background: #ea580c;
color: #ffffff;
border-radius: 100px;
padding: 9px 20px;
font-size: 14px;
font-weight: 600;
```

**Hover :** `background: #f97316` + `transform: translateY(-1px)` + `box-shadow: 0 4px 16px rgba(234,88,12,0.25)`

### Navbar

- Hauteur : `64px`
- Fond : `#ffffff`
- Bordure basse : `1px solid #e8d5c0`
- Ombre : `0 2px 12px rgba(180,100,30,0.08)`
- Padding horizontal : `40px`
- Logo (Fraunces, 22px, `#ea580c`) à gauche
- Actions à droite — icônes rondes (`border-radius: 50%`), hover sur fond `--surface-tint`

### Champ de formulaire

```css
background: #fff7ed;
border: 1.5px solid #e8d5c0;
border-radius: 6px;
padding: 11px 14px;
font-size: 15px;
```

**Focus :** `border-color: #ea580c` + `box-shadow: 0 0 0 3px rgba(234,88,12,0.12)`

### Cellule de grille (lettre)

- Taille : `38 × 38px`
- Fond normal : `#ffffff`, bordure `#e8d5c0`
- Fond rempli : `#fff7ed`, bordure `#fdba74`
- **Surlignée** (lettre cible) : fond `#fed7aa`, bordure `#ea580c`, texte `#ea580c`
- Focus : bordure `#ea580c` + ring `rgba(234,88,12,0.15)`
- Espacement entre cellules (`border-spacing`) : `5px`

### Dropdown

- Fond : `#ffffff`
- Bordure : `1px solid #e8d5c0`
- Rayon : `10px`
- Ombre : `0 8px 32px rgba(180,100,30,0.08), 0 2px 8px rgba(0,0,0,0.06)`
- Item hover : fond `#ffedd5`, couleur `#ea580c`
- Header : `11px`, uppercase, `#a8a29e`, séparateur bas

### Badge notification

```css
background: #ea580c;
color: #ffffff;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
```

### Modal

- Fond : `#ffffff`
- Rayon : `12px` (légèrement plus petit que `--radius-lg` pour la hiérarchie visuelle)
- Ombre : `0 8px 24px rgba(0,0,0,0.12)`
- Overlay : `rgba(0,0,0,0.4)`

---

## Ombres

Toutes les ombres sont **chaudes** (teinte orange-brun), jamais neutres grises.

| Niveau       | Valeur CSS                                                       |
|--------------|------------------------------------------------------------------|
| Légère       | `0 1px 3px rgba(180,100,30,0.08)`                                |
| Navbar       | `0 2px 12px rgba(180,100,30,0.08)`                               |
| Carte        | `0 4px 32px rgba(180,100,30,0.08)`                               |
| Dropdown     | `0 8px 32px rgba(180,100,30,0.08), 0 2px 8px rgba(0,0,0,0.06)`  |
| Bouton hover | `0 4px 16px rgba(234,88,12,0.25)`                                |

---

## Règles d'usage

1. **Orange réservé à l'accentuation.** Ne pas l'utiliser pour du texte courant de longue lecture.
2. **Fond de page ≠ blanc.** Toujours `#fef6ee` pour le fond, `#ffffff` pour les surfaces élevées (cartes, navbar).
3. **Ombres chaudes uniquement.** Aucune ombre `rgba(0,0,0,X)` seule sur des surfaces visibles — toujours teintée.
4. **Bouton primaire = pilule.** Boutons destructifs ou secondaires peuvent utiliser `--radius-sm`.
5. **Fraunces uniquement pour les titres de page et le logo.** Pas dans le corps, pas dans les labels.
6. **Pas de couleur rouge** pour les erreurs — utiliser `#b45309` (ambre foncé) ou `#dc2626` uniquement pour les messages d'erreur critiques, jamais comme couleur d'interface.