# Aubui — API figée (contrat)

> **Ne pas inventer de classes hors de cette liste.**  
> Besoin nouveau → ajouter ici + CSS + page catalogue, **puis** utiliser.

Point d’entrée CSS : `https://ui.aubota.xyz/aubui.css`  
JS recommandé (tout-en-un) : `https://ui.aubota.xyz/js/aubui.js`  
(ou scripts individuels : `theme.js`, `accent.js`, `actions.js`, `notifications.js`)

---

## Surfaces & texte

| Classe | Rôle |
|--------|------|
| (body + tokens) | `--aub-bg`, `--aub-fg`, etc. via `data-theme` / `data-accent` |
| `.aub-muted` | texte secondaire |
| `.aub-text-sm` `.aub-text-xs` | tailles |
| `.aub-text-accent` | couleur accent |
| `.aub-link` | lien accent |
| `.aub-code` | code inline |
| `.aub-pre` | bloc code |

## Boutons — `.aub-btn`

| Modificateur | Rôle |
|--------------|------|
| `--primary` | action principale |
| `--ghost` | discret |
| `--danger` | destructif |
| `--success` | validation |
| `--sm` `--lg` | taille |
| `--block` | pleine largeur |

## Champs — `.aub-field` + `.aub-label` + `.aub-input`

| Classe | Rôle |
|--------|------|
| `.aub-field` | groupe label + contrôle |
| `.aub-label` | label |
| `.aub-input` | input / select / textarea |
| `.aub-input--block` | largeur 100% |
| `.aub-hint` | aide sous le champ |
| `.aub-check` | checkbox / radio + label |
| `.aub-check-group` | pile de checks |
| `.aub-check-group--row` | en ligne |
| `.aub-fieldset` | groupe / catégorie |
| `.aub-password-wrap` | input + bouton œil (auth) |

## Cartes & alertes

| Classe | Rôle |
|--------|------|
| `.aub-card` | carte |
| `.aub-card--pad` | padding |
| `.aub-card__title` | titre |
| `.aub-card__body` | corps |
| `.aub-alert` | alerte |
| `.aub-alert--info\|success\|warning\|danger` | variante |
| `.aub-badge` | badge |
| `.aub-badge--…` | variantes statut |

## Navbar — `.aub-nav`

Structure standard (à copier dans chaque module) :

```html
<nav class="aub-nav">
  <a class="aub-nav__brand" href="/">Module</a>
  <div class="aub-nav__links">
    <a class="aub-nav__link aub-nav__link--active" href="…">Lien</a>
  </div>
  <div class="aub-nav__spacer"></div>
  <div class="aub-nav__actions">
    <!-- cloche + thème + connexion -->
  </div>
</nav>
```

| Classe | Rôle |
|--------|------|
| `.aub-nav` | barre sticky |
| `.aub-nav__brand` | logo / nom du module |
| `.aub-nav__links` | liens principaux |
| `.aub-nav__link` | lien |
| `.aub-nav__link--active` | lien actif |
| `.aub-nav__spacer` | pousse les actions à droite |
| `.aub-nav__actions` | zone droite (cloche, thème, user…) |

## Notifications — `.aub-notif`

| Classe | Rôle |
|--------|------|
| `.aub-notif` | conteneur cloche |
| `.aub-notif__btn` | bouton cloche |
| `.aub-notif__badge` | compteur (+ `.is-visible`) |
| `.aub-notif__dropdown` | panneau (+ `.is-open`) |
| `.aub-notif__header` | titre du panneau |
| `.aub-notif__list` | liste des items |
| `.aub-notif__item` | une notification |
| `.aub-notif__item--unread` | non lue |
| `.aub-notif__empty` | état vide |
| `.aub-notif__footer` | lien « tout voir » |

API JS : `AubotaNotif.setCount(n)` · `AubotaNotif.render([{title, body, time, unread, href}])`

## Layout utilitaires (mince)

`.aub-flex` `.aub-grid` `.aub-flex-col` `.aub-items-center` `.aub-justify-between`  
`.aub-gap-2` … `.aub-gap-6`  
`.aub-mt-*` `.aub-mb-*` `.aub-p-*`  
`.aub-stack` `.aub-stack-lg`  
`.aub-max-w-md`

## Comportements `data-aub-*`

| Attribut | Effet |
|----------|--------|
| `data-aub-action="toggle"` + `data-aub-target` | affiche/masque |
| `data-aub-action="show\|hide"` + target | force |
| `data-aub-action="copy"` + `data-aub-copy` ou `data-aub-copy-from` | presse-papiers |
| `data-aub-action="dismiss"` | masque `[data-aub-dismissible]` parent |
| `data-aub-theme-toggle` | dark/light |
| `data-accent-set="blue\|…"` | accent |

## Pages layout (minces)

`/css/aubui/pages/home.css` `auth.css` `share.css` `social.css` — **structure seulement**, pas de nouveaux boutons.

### Social — classes page (`social.css`)

| Classe | Rôle |
|--------|------|
| `.aub-social` | shell page |
| `.aub-social-main` `.aub-social-main--narrow` | conteneur contenu |
| `.aub-social-search` + `__results` `__item` `__empty` | recherche live |
| `.aub-feed` + `__loading` `__empty` | grille feed |
| `.aub-media-card` + `__media` `__body` `__title` `__meta` `__desc` | carte post / voiture |
| `.aub-garage` + `__add` | grille garage |
| `.aub-specs` | liste specs fiche |
| `.aub-profile-head` + `__name` `__actions` | en-tête profil |
| `.aub-settings-row` + `__label` `__value` | ligne paramètres |

## Règle d’or

**Toute nouvelle UI = une ligne dans ce fichier + entrée au catalogue + doc.**

### Feedback — classes page (`feedback.css`)

| Classe | Rôle |
|--------|------|
| `.aub-feedback` | shell body |
| `.aub-feedback-main` | conteneur principal |
| `.aub-feedback-admin-layout` | grille admin (users + liste) |
| `.aub-feedback-user-list` | colonne utilisateurs sticky |
| `.aub-feedback-list` | colonne tickets |
| `.aub-feedback-ticket` | carte ticket |
| `.aub-feedback-images` | galerie captures |
| `.aub-feedback-reply` | bulle réponse |
| `.aub-feedback-admin-form` | zone actions admin |

### Erreurs — classes page (`error.css`)

| Classe | Rôle |
|--------|------|
| `.aub-error` | page plein écran centrée |
| `.aub-error--embed` | variante dans un layout existant |
| `.aub-error__inner` | conteneur max-width |
| `.aub-error__code` | code HTTP discret (403, 404…) |
| `.aub-error__icon` | icône / emoji |
| `.aub-error__title` | titre |
| `.aub-error__message` | texte secondaire |
| `.aub-error__actions` | boutons CTA (`.aub-btn`) |

Doc interactive : `/pages/errors.php`