# Composants d'adalan.css

Catalogue des classes de [`assets/adalan.css`](../assets/adalan.css). Chaque composant suit les règles de la charte : diagonale, deux voix, filets en ombre interne.

## Typographie

| Classe | Rôle |
|---|---|
| `.hero` | Titre d'accueil, un seul par page. 820, chasse 114 % |
| `.display` | Grande réplique qui ouvre ou ferme une section. 780, chasse 112 %, 18 caractères de large au plus |
| `.h2` | Titre de section. 750, chasse 110 % |
| `.title` | Titre de carte ou de bloc. 720, chasse 108 % |
| `.lead` | Chapeau sous un titre, en text-2 |
| `.body` | Texte courant limité à 62 caractères |
| `.label` | Libellé 600 |
| `.kicker` | Sur-titre Monaspace en capitales avec son carré en diagonale |
| `.mono`, `.meta` | Voix machine : codes, dates, compteurs, métadonnées |
| `<em>` dans un titre | Mot accentué en pêche (peach-600 sur clair, pêche sur encre) |
| `<mark>` | Surlignage en bande pêche sous le mot |

## Boutons et liens

| Classe | Usage |
|---|---|
| `.btn` | Action principale, encre |
| `.btn.btn--peach` | Action chaleureuse : prendre rendez-vous, rejoindre, confier un projet |
| `.btn.btn--ghost` | Action secondaire, filet interne |
| `.btn.btn--light` | Action sur fond encre ou photo |
| `.link-arrow` | Lien de suite, la flèche glisse au survol |

Deux boutons au plus côte à côte : un plein, un fantôme. Survol : montée de 1 px et ombre ; appui : `scale(0.98)` ; désactivé : opacité 0,5.

## Pastilles et étiquettes

| Classe | Usage |
|---|---|
| `.chip` | Choix ou suggestion ; `.is-chosen` ou `aria-pressed="true"` la passe en pêche, soulevée |
| `.tag` | Étiquette technique en Monaspace (type, statut, version) |
| `.tag.tag--peach` | Étiquette mise en avant |

## Surfaces

| Classe | Usage |
|---|---|
| `.card` | Carte papier, le ton par défaut |
| `.card.card--ink` | Carte stratégique sur encre, avec courbes de niveau ; une par écran |
| `.card.card--peach` | Carte humaine : recrutement, communauté, rejoindre |
| `.card.card--inner` | Carte dans une carte, ink-50 |
| `.icon-badge` | Pastille d'icône en diagonale (peach-100 / peach-700 ; s'adapte au ton) |
| `.note` | Encadré encre pour la phrase à retenir ; `.note--peach` en pêche claire |
| `.band` | Section avec l'air vertical de la charte ; `.band--paper` blanche, `.band--ink` encre avec courbes de niveau |
| `.photo` | Section ou bloc photo plein cadre, voile encre à gauche ; `.photo--full` voile uniforme ; `.credit` en bas à droite |
| `.topo` | Ajoute les courbes de niveau lavande à n'importe quel bloc encre ; `.topo.topo--clair` pour un fond clair |
| `.on-ink` | Applique les couleurs de texte sur encre à un bloc personnalisé |

Les tons redéfinissent localement `--text`, `--text-2`, `--text-3`, `--line`, `--line-2` et `--kicker`. Le contenu d'une surface n'emploie que ces variables : il s'adapte ainsi seul au fond.

## Formulaires

| Classe | Usage |
|---|---|
| `.field` | Libellé + champ ; `.is-error` passe le champ en erreur |
| `.input` | Champ texte, courriel, zone de texte |
| `.field__error` | Message d'erreur peach-700 |

## Mise en page

| Classe | Usage |
|---|---|
| `.container` | Colonne large (66 rem) centrée avec gouttière |
| `.container--text` | Colonne de lecture (46 rem) |
| `.stack` | Espace régulier entre les enfants (`--stack`, 1,1 rem par défaut) |

## Icônes

Icônes [Lucide](https://lucide.dev), en SVG inline, trait de 1,75, `currentColor`, 20 px par défaut (1,1 em dans un bouton). Pas d'icône remplie, pas d'emoji, pas d'autre famille d'icônes. Dans un bouton ou une pastille, l'icône est en peach-700 sur fond clair et en encre sur fond pêche.

## Ombres et filets

- `--shadow-1` (pose) : cartes, bulles, survol des boutons et pastilles.
- `--shadow-2` (flotte) : compositeur, plaques encre, feuilles.
- `--shadow-peach` (chaleur) : éléments pêche et états choisis.
- Les bordures s'écrivent `box-shadow: inset 0 0 0 1px var(--line)`, jamais `border` sur un composant.