# DESIGN.md — Design system de la VITRINE publique du socle

> **Lisez ce fichier AVANT de toucher au front public.** Il fige le design system
> de l'ancien site statique « fait main » (`/public_html/`), porté tel quel dans la
> couche dynamique au **Prompt 18**.
>
> ⚠️ **Ce fichier prime sur les tokens de la charte admin (Filament/Tailwind) pour
> tout ce qui est public.** La vitrine n'utilise **PAS** le thème Filament ni la
> palette `brand/cream` de l'admin. Source de vérité visuelle :
> `resources/css/site/main.css` (copie intégrale de l'ancien `assets/css/main.css`).

## Règle d'or

Le rendu de la vitrine doit rester **indiscernable** de l'ancien `public_html/index.html`.
On ne change que : (1) le contenu devient éditable via le CMS, (2) l'arabe/RTL,
(3) le multi-pages. **Aucune réinterprétation du design.** En cas de doute, copier
le markup/CSS existant tel quel — ne pas « améliorer ».

## Stack front vitrine

- **CSS** : `resources/css/site/main.css` (plain CSS, design system complet, ~1160 lignes).
  Pas de Tailwind, pas de tokens admin. Servi via `@vite`.
- **JS** : `resources/js/site/main.js` (vanilla, zéro dépendance). Servi via `@vite`.
- **Polices** : `Plus Jakarta Sans` (FR/LTR), `IBM Plex Sans Arabic` (AR/RTL).
- **Images** : `public/images/site/`.

## Palette (variables `--site-*`, ne pas inventer d'autres couleurs)

| Token | Valeur | Usage |
|---|---|---|
| `--site-navy` | `#0A1B33` | Texte, fonds sombres, titres |
| `--site-navy-deep` | `#05101F` | Dégradés, footer |
| `--site-navy-soft` | `#122A4D` | Surfaces sombres |
| `--site-blue` | `#0C60D8` | **Accent principal** (le « swoosh » du logo) |
| `--site-blue-bright` | `#1E7BFF` | Dégradés, lueurs, hover |
| `--site-blue-soft` | `#4D94FF` | Bleu clair lisible sur navy (AA ≥ 4.5) |
| `--site-blue-50` | `#E8F1FF` | Fonds d'icônes, tags, eyebrow |
| `--color-bg` | `#F8FAFC` | Fond clair par défaut |
| `--color-surface` | `#FFFFFF` | Cartes |
| `--color-text` | `#0A1B33` | Texte principal |
| `--color-text-muted` | `#4E5B79` | Paragraphes |
| `--color-border` | `#E3E8F4` | Bordures |
| `--color-error` | `#B3261E` / `--color-success` | `#1B7A3E` | États formulaire |

### Dégradés
- `--gradient-primary` : `linear-gradient(135deg,#0C60D8,#0A3E9E)`
- `--gradient-accent` : `linear-gradient(135deg,#0C60D8,#1E7BFF)`
- `--gradient-hero` : `linear-gradient(135deg,#05101F,#0A1B33 45%,#0C3E96)`
- `--gradient-glow` : `radial-gradient(circle at 50% 50%,rgba(30,123,255,.35),transparent 70%)`
- `--gradient-ph` : fond des cadres image (placeholder) = même que hero.

### Ombres
`--shadow-sm` → `--shadow-xl` (douces, teintées navy `rgba(10,27,51,…)`).
`--shadow-glow` : `0 10px 40px rgba(12,96,216,.35)` (lueur bleue, hover premium).

### Rayons / Layout
`--radius-sm:10px` `--radius-md:16px` `--radius-lg:24px` `--radius-xl:32px` `--radius-pill:999px`.
`--container:1200px` · `--header-h:76px`.

## Typographie

- Famille FR : `'Plus Jakarta Sans', system-ui, …` — poids 400→800.
- Famille AR : `'IBM Plex Sans Arabic'` (appliquée via `[dir="rtl"]`).
- Titres `h1-h4` : `font-weight:800`, `line-height:1.15`, `letter-spacing:-.015em`, couleur `--site-navy`.
- Échelle **fluide** (clamp) : `--fs-xs` … `--fs-3xl`, plus `--fs-display` pour le h1 du hero.
  Ne pas écrire de tailles en `px` en dur : utiliser les tokens `--fs-*`.
- `.eyebrow` : pilule majuscule, `letter-spacing:.12em`, pastille bleue `::before`.
  Variante `.eyebrow.on-dark` sur fonds sombres.

## Espacement

- Sections : `padding-block: clamp(64px, 9vw, 120px)`.
- Conteneur : `padding-inline: clamp(20px, 4vw, 40px)`.
- Toujours préférer les **propriétés logiques** (`margin-inline`, `padding-inline`,
  `inset-inline`) pour rester compatible RTL.

## Fonds de section (alternance)

- `.section-light` : `--color-bg`.
- `.section-soft` : dégradé clair `#F1F5F9 → #F8FAFC`.
- `.section-dark` : `--gradient-hero`, texte blanc (titres blancs, p à `rgba(255,255,255,.82)`).

## Conventions d'animation (toutes respectent `prefers-reduced-motion`)

- **Reveal au scroll** : ajouter la classe `.reveal` (+ `.reveal-delay-1/2`) ; un parent
  `[data-stagger]` cadence ses enfants `.reveal`. L'IntersectionObserver ajoute `.in`.
- **Hover cartes** : `translateY(-6px)` + `--shadow-lg/glow` + liseré accent en haut.
- **Compteurs** : `<span data-counter="360">0</span>` — animé à l'entrée du viewport.
- **Boutons** : `[data-magnetic]` (suivi curseur léger), ripple au clic, `.btn-arrow`
  qui glisse `translateX(4px)` au hover.
- **Cartes services** : `[data-tilt]` (tilt 3D desktop).
- **Hero** : orbes en parallaxe souris (`data-depth`), h1 révélé mot par mot
  (`data-split-words`), barre de progression de lecture.
- **Process / méthode 360°** : `[data-process]`, trait qui se remplit au scroll,
  jalons qui s'allument (`.lit`).
- **Témoignages** : slider auto `[data-testi]` (pause au survol).
- **Marquee partenaires** : `.marquee-track` dupliqué en JS pour boucle continue.
- Easings : `--ease-out: cubic-bezier(.22,.61,.36,1)`, `--ease-in-out: cubic-bezier(.65,0,.35,1)`.
  Durées : `--t-fast:.18s` `--t-base:.28s` `--t-slow:.55s`.

## Cadres image & placeholders

- `.ph-frame[data-ph="fichier"]` : cadre au dégradé de marque ; si l'image manque, le JS
  ajoute `.ph-missing` (affiche le dégradé). Ratios : `.ph-ratio-45` (4:5), `.ph-logo`.
- Le logo blanc du footer retombe sur le logo standard si absent.

## Do / Don't

- ✅ Réutiliser les classes existantes (`.hero`, `.service-card`, `.process`, `.testi-*`,
  `.faq-item`, `.btn`, `.eyebrow`, `.section-*`).
- ✅ Brancher le contenu CMS dans le markup d'origine sans changer les classes.
- ✅ Utiliser les tokens `--site-*` / `--fs-*` / `--radius-*` / `--shadow-*`.
- ❌ Ne pas introduire Tailwind ni les couleurs admin (`brand`, `cream`, `Alexandria`) sur la vitrine.
- ❌ Ne pas réécrire le CSS « pour faire mieux » : `main.css` est la référence.
- ❌ Ne pas coder de tailles/espacements arbitraires en dur hors tokens.

## Hero — média de fond (image CMS ou vidéo cinématique)

Empilement du fond du hero (bas → haut) :
1. **Dégradé navy** `--gradient-hero` — toujours présent, repli ultime (jamais d'écran vide).
2. **`.hero-bg-poster`** — image de fond plein cadre : soit l'image CMS `hero.media_image`
   (`page_sections`, **prioritaire**), soit le poster de la vidéo (`public/media/hero-poster.jpg`).
   C'est aussi le visuel affiché sur **mobile (≤768px)** et **prefers-reduced-motion**.
3. **`.hero-bg-video`** — vidéo `public/media/hero.webm` + `hero.mp4` (autoplay/muted/loop/
   playsinline), **injectée par `main.js` uniquement sur desktop hors reduced-motion** :
   jamais téléchargée sur mobile/RM (perf + batterie). Apparaît en fondu (`.is-ready`).
4. **Voile navy** `.hero.has-media::after` (~50–62 %) pour garder le texte lisible (AA).

Priorité : si une image média est définie dans le CMS, elle **prime** sur la vidéo.
Sinon la vidéo `public/media/hero.*` est utilisée. Sans aucun média : dégradé seul.
Rester sobre/institutionnel.