# markiV2/specs/mockups

Maquettes HTML statiques de markiV2, dérivées de `frontend2/` (Alpine + Parse).
Servies sur `https://v2.adti.marki.stedzstudio.com/specs/mockups/a-valider/`.

- Galerie de validation : `a-valider/index.html`
- Arborescence, rôles des écrans, jeu de données : `../sitemap.md`
- Une maquette = un fichier : `a-valider/<écran>.mockup.html`
- Autonome : Tailwind CDN + Font Awesome CDN, aucun back-end, aucun appel réseau
  métier, données écrites en dur.

## Style — celui de `pppt2/specs`

Les maquettes reprennent le langage visuel de `/home/ubuntu/pppt2/specs/*/specs/index.mockup.html`.
Seule différence : **l'accent est `sky`**, là où pppt2 porte du `pink`. Tout le reste
est identique — surfaces, bordures, textes, tailles, recettes de composants.

| Rôle | pppt2 | markiV2 |
|---|---|---|
| Accent (bouton plein, entrée active, valeur d'onglet) | `pink-600` / `pink-700` | `sky-600` / `sky-700` |
| Accent très clair (pastille, monogramme, bandeau) | `pink-100` / `pink-50` | `sky-100` / `sky-50` |
| Neutres | `slate-50 … slate-900` | idem |
| Succès / avertissement / erreur | `emerald`, `amber`, `red` | idem |

Recettes, copiées à l'identique :

- **Corps** : `bg-slate-50 text-slate-800 font-sans antialiased`.
- **Coquille** : deux rails fixes — 64 px d'applications (`bg-slate-50`) puis
  220 px de navigation (`bg-white`), bordés de `border-slate-200` ; le contenu
  se décale de 284 px (`ml-0 md:ml-[284px]`). Le rail 1 porte le logo, quatre
  raccourcis, l'engrenage, l'avatar (`bg-sky-100 text-sky-600`) et la sortie ;
  le rail 2 porte le titre de l'app et des sections en capitales
  (`text-xs font-semibold uppercase tracking-wider text-slate-400`).
  Une entrée active est un aplat plein `bg-sky-600 text-white shadow-sm` ;
  une icône active est `bg-white text-sky-600 shadow-sm ring-1 ring-slate-200`.
- **En-tête de page** : `h-14`, `border-b border-slate-200`, `bg-white px-6`,
  filet de section en `text-[11px] uppercase text-slate-400`, titre
  `text-lg font-semibold text-slate-900`, sous-titre `text-xs text-slate-500`
  (masqué sous 1536 px), actions à droite.
- **Barre d'outils** : `min-h-12`, même bordure, sélecteurs et bascules de vue
  (`inline-flex rounded-lg border border-slate-300 overflow-hidden`, onglet actif
  en `bg-sky-600 text-white`).
- **Carte** : `bg-white rounded-xl shadow-sm border border-slate-200`, padding
  `p-4` (indicateur) ou `p-5`/`p-6` (contenu).
- **Indicateur** : libellé `text-xs font-medium uppercase tracking-wider
  text-slate-400` + icône à droite, valeur `mt-2 text-2xl font-semibold`
  (colorée quand elle porte un sens : `red-600`, `amber-600`, `emerald-600`),
  légende `mt-1 text-xs text-slate-500`.
- **Tableau** : `thead` en `bg-slate-50 border-b border-slate-200`, `th` en
  `px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-500`,
  `td` en `px-5 py-4`, lignes `border-b border-slate-200 hover:bg-slate-50`.
  La hauteur de ligne est fixée dans `mockup.css` : **68 px**
  (`.mockup-table tbody tr { height: 4.25rem }`), pour que toutes les pages
  aient la même assise quelle que soit la densité des cellules. Les lignes
  d'en-tête de groupe portent `data-groupe` et échappent à cette hauteur.
- **Pied de tableau / pagination** : `rounded-xl border-t border-slate-200
  bg-slate-50 px-6 py-4`, pages en `rounded-lg` (courante `bg-sky-600 text-white`).
- **Pastille d'état** : `inline-flex items-center rounded px-1.5 py-0.5
  text-[10px] font-bold uppercase tracking-wide bg-<teinte>-100
  text-<teinte>-700 border border-<teinte>-300`.
- **Bouton principal** : `rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium
  text-white hover:bg-sky-700`.
- **Bouton secondaire** : `rounded-lg border border-slate-300 bg-white px-3 py-2
  text-sm font-medium text-slate-600 shadow-sm hover:bg-slate-100`.
- **Champ** : `rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm
  text-slate-700 focus:ring-2 focus:ring-sky-500 focus:border-sky-500`.
- **Modale** : voile `bg-slate-900/50`, panneau `rounded-xl bg-white shadow-xl`,
  en-tête `border-b border-slate-200 px-5 py-3`, pied
  `border-t border-slate-200 px-5 py-3` aligné à droite.

`rounded-md` n'est jamais utilisé : `rounded` pour les pastilles, `rounded-lg`
pour les contrôles, `rounded-xl` pour les surfaces, `rounded-full` pour les
pilules et les avatars — comme dans pppt2.

## Contenu du dossier

```
mockups/
├── assets/
│   ├── mockup.css        # socle typographique + étiquette « maquette »
│   ├── mockup-nav.js     # <mockup-sidebar active="…"> : deux rails + dock mobile
│   └── marki-logo.png
└── a-valider/            # 20 écrans + index.html (galerie)
    ├── index.html
    ├── login.mockup.html
    ├── dashboard.mockup.html
    ├── impayes.mockup.html
    ├── impayes-detail.mockup.html
    └── …
```

## Conventions

- `<mockup-sidebar active="impayes"></mockup-sidebar>` puis le conteneur
  `class="ml-0 md:ml-[284px] min-h-screen flex flex-col pb-16 md:pb-0"`, puis
  l'en-tête `h-14`, la barre d'outils éventuelle, puis
  `<main class="flex-1 p-6"><div class="max-w-7xl mx-auto space-y-6">`.
- Assets référencés en `../assets/…` ; `mockup-nav.js` résout sa propre URL pour
  le logo, donc le dossier de maquettes reste déplaçable.
- Les `id="btn-…"` de `frontend2` sont conservés (contrat pour la mise en code).
  Les actions secondaires trop larges pour un écran mobile passent en
  `hidden md:inline-flex` : l'id reste dans le DOM.
- Le fichier dessine l'état **plein** ; les états secondaires (modale, volet,
  sélection, erreur, état vide) sont écrits en bas du même fichier, commentés et
  préfixés par `<!-- État : … -->`.
- Les portails (`portail-client`, `portail-mission`) sont des pages publiques
  pleine largeur : pas de coquille, en-tête propre de 56 px, étiquette ajoutée
  à la main. `login` est une carte centrée sur `bg-slate-100`.
- Le dossier vit hors de `pb_public/` : PocketBase ne l'indexe ni ne le copie,
  c'est Caddy qui le sert (`file_server browse`).

## Ajouter une maquette

1. Déclarer l'écran dans `../sitemap.md` (groupe, URL cible, rôle).
2. Créer `a-valider/<écran>.mockup.html` à partir du `index.html` de `frontend2/<écran>/`.
3. Ajouter la carte dans `a-valider/index.html` et la ligne d'avancement du sitemap.
4. Vérifier : `curl -o /dev/null -w '%{http_code}' https://v2.adti.marki.stedzstudio.com/specs/mockups/a-valider/<écran>.mockup.html`.