# Charte graphique — style « Azira »

Référence visuelle : https://preview.sprukomarket.com/html/bootstrap/azira/dist/html/index.html
(template commercial Spruko — on reproduit *l'esprit* : couleurs, typo, formes, layout. Les fichiers CSS/JS du template ne sont pas copiés ; utiliser `theme.css` fourni ici par-dessus Bootstrap 5.)

## 1. Palette

| Rôle | Hex | RGB | Usage |
|---|---|---|---|
| **Primary** | `#3858F9` | 56, 88, 249 | Boutons, liens, menu actif, focus |
| Secondary | `#7987A1` | 121, 135, 161 | Texte secondaire, icônes neutres |
| Success | `#0BA360` | 11, 163, 96 | États validés |
| Info | `#17A2B8` | 23, 162, 184 | Informations |
| Warning | `#E8B210` | 232, 178, 16 | Avertissements |
| Danger | `#F53C5B` | 245, 60, 91 | Erreurs, suppressions |
| Pink | `#E791BC` | 231, 145, 188 | Accent |
| Purple | `#B14BD5` | 177, 75, 213 | Accent |
| Teal | `#12C2C2` | 18, 194, 194 | Accent |
| Orange | `#FFA505` | 255, 165, 5 | Accent |

**Dégradé signature** : `linear-gradient(45deg, #F33057, #3858F9)` — rose → bleu, à 45°.
Utilisé sur le header et l'item de menu actif. Variante douce : `#F54266 → #3858F9`.

### Neutres

| Token | Hex | Usage |
|---|---|---|
| Fond de page | `#E9E7F7` | lavande très clair |
| Surface (cartes, sidebar) | `#FFFFFF` | |
| Surface alt | `#F2F4F7` | boutons light, zones secondaires |
| Bordure | `#EDEDF5` | séparateurs tables/listes |
| Bordure carte | `#F3F3F3` | très discrète |
| Bordure input | `#E4E9F4` | |
| Hover liste | `#F5F6F7` | |
| **Texte principal** | `#031B4E` | bleu nuit (pas noir) |
| Texte menu | `#2D3144` | |
| Texte atténué | `#818995` | |
| Gris 1→9 | `#F9FAFB` `#F2F4F5` `#E6EAEB` `#DBDFE1` `#949EB7` `#7987A1` `#4D5875` `#383853` `#323251` | |

## 2. Typographie

- **Police** : Roboto (Google Fonts), fallback `system-ui, "Segoe UI", sans-serif`.
  ```html
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
  ```
- Taille de base : **14px**, interligne 1.5.
- Menu latéral : 12.5px · Boutons : 13.6px · Titres de carte : 14px **bold uppercase**.
- Titres : poids 500 (h5 = 18px, titre de page = 20px). Les titres ne sont jamais en gras lourd sauf `.card-title`.
- Badges : 10.5px, poids 600.

## 3. Formes & espacements

- Rayon standard : **6px** (cartes, boutons, inputs). Petit : 4px. Large : 8px (icônes KPI). Badges : pilule.
- Cartes : bordure 1px `#F3F3F3`, **aucune ombre**, padding 24px, espacement vertical 24px entre cartes.
- Menu actif : rayon `0 100px 100px 0` (arrondi uniquement à droite), ombre `0 6px 14px 2px rgba(0,0,0,.1)`.
- Avatars : rayon 6.4px (carré arrondi) ou rond via `.avatar-rounded`.

## 4. Layout

```
┌─────────┬──────────────────────────────────────┐
│ Sidebar │ Header 64px — dégradé rose→bleu       │
│ 240px   ├──────────────────────────────────────┤
│ blanche │ Contenu, fond #E9E7F7, padding 24px   │
│         │  ┌────────┐ ┌────────┐               │
│         │  │ KPI    │ │ KPI    │  cartes 24px   │
│         │  └────────┘ └────────┘               │
└─────────┴──────────────────────────────────────┘
```

- **Header** : 64px, dégradé, icônes blanches dans des ronds translucides (`rgba(255,255,255,.12)`), avatar utilisateur à droite.
- **Sidebar** : 240px, fond blanc, bordure droite `#F3F3F3`, logo en haut (64px), profil utilisateur optionnel, puis menu avec libellés de groupe en uppercase 11px.
- **Page header** : titre 20px à gauche + fil d'Ariane (séparateur `›`) — placé sur fond dégradé quand le header est en mode « gradient ».
- **Grille** : Bootstrap 5 (`row g-4`), KPI en `col-xl-3 col-md-6`.
- Mobile < 992px : sidebar en overlay (classe `.open`), contenu pleine largeur.

## 5. Composants clés

| Composant | Règle |
|---|---|
| Bouton primaire | fond `#3858F9`, texte blanc, rayon 6px, pas d'ombre |
| Bouton gradient | `.btn-gradient` pour l'action principale d'une page |
| Input | bordure `#E4E9F4`, focus bleu + halo `rgba(56,88,249,.2)` |
| Table | en-têtes 13.6px poids 600, lignes séparées par `#EDEDF5`, hover `#F5F6F7` |
| Badge statut | version « transparent » : fond couleur à 10 %, texte couleur pleine |
| Tuile KPI | icône 48×48 colorée (rayon 8px) + titre + 2 lignes libellé/valeur |
| Dropdown | bordure `#F3F3F3`, ombre douce `0 8px 24px rgba(3,27,78,.08)` |

## 6. Icônes

Le template utilise des icônes *line* fines (style Remix/Tabler). Recommandation libre : **Remix Icon** ou **Bootstrap Icons**, taille 18px dans le menu, 22px dans les tuiles KPI.

## 7. Intégration

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/theme.css">
```

Structure minimale :

```html
<aside class="app-sidebar">
  <div class="sidebar-brand">Logo</div>
  <ul class="side-menu">
    <li class="side-menu__label-group">Main</li>
    <li><a class="side-menu__item active" href="#"><i class="side-menu__icon ri-dashboard-line"></i> Dashboard</a></li>
  </ul>
</aside>
<header class="app-header">…</header>
<main class="app-content">
  <div class="page-header"><h1 class="page-title">Titre</h1><nav class="breadcrumb">…</nav></div>
  <div class="row g-4">…</div>
</main>
```

Voir `demo.html` pour une page complète.