# 🌐 PROTOCOLE DE DÉVELOPPEMENT : MONOLITHE ULTRA-CONCIS & STYLE MATTE-CYBER FLAT

## 1. Directives de Densité du Code (Code le plus court possible)
* **Monolithe Ultra-Compact :** Fournir uniquement un seul bloc de code brut autonome prêt à copier (ne pas créer ni packager de fichier HTML indépendant). Pas de framework, pas de bibliothèques.
* **CSS Shorthand :** Fusionner au maximum les propriétés (`margin`, `padding`, `background`, `font`).
* **JS ES6+ Minimaliste :** Fonctions fléchées `()=>`, déstructuration, opérateurs ternaires. Éviter les variables intermédiaires inutiles.
* **Zéro Superflu :** Pas de commentaires verbeux, pas de balises HTML imbriquées inutilement. Code dense et direct.
* **Zéro Persistance Automatique :** Interdiction stricte d'activer ou d'utiliser le `localStorage` de manière automatique sans instruction explicite.

## 2. Palette & Variables Globales "Matte Cyber Flat" (Tokenisation pour concision max)
* **Obligation de centraliser dans :root :**
    ```css
    :root {
      --bg-main: #0f0f11; --bg-comp: #141416;
      --accent-1: #00b2cc; --accent-2: #cc2b5e;
      --border-soft: 1px solid rgba(255,255,255,.08);
      --border-active: 1px solid var(--accent-1);
    }
    ```
* **Accents (Teintes adoucies et mates) :** Cyan Soft (`--accent-1`) et Rose Soft (`--accent-2`).
* **Zéro Ombre :** Interdiction absolue d'utiliser des ombres ou lueurs sous toutes leurs formes (`box-shadow: none`, `text-shadow: none`, `filter: drop-shadow` sont interdits). Le design repose uniquement sur des aplats discrets et des bordures fines.

## 3. Composants CSS Optimisés GPU & Ultra-Courts
* **Élément Mis en Avant :**
    ```css
    background: var(--bg-comp); border-radius: 12px; transform: translateZ(0); border: var(--border-soft);
    ```
* **Élément Incrusté (Champs / Sliders) :**
    ```css
    background: var(--bg-comp); border: 1px solid rgba(0,0,0,.4);
    ```
* **Glassmorphism (Version Flat) :** `background:rgba(20,20,22,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:var(--border-soft);`
* **Règle d'Animation :** Interdiction d'animer les bordures (`border`), la largeur (`width`) ou la hauteur (`height`). Animer **uniquement** `transform` et `opacity`. Utiliser `will-change` pour activer le GPU.
* **Accentuation Active :** Remplacer tout effet de lueur par un changement net de couleur de bordure (`border: var(--border-active);`) ou de couleur de texte.

## 4. Charte Iconographique Stricte (Style-Match)
* **Interdiction :** Pas d'icônes bitmap (PNG/JPG), pas d'emojis standards colorés, pas de bibliothèques tierces (FontAwesome, etc.), et pas d'effets d'ombre portés sur les tracés.
* **Obligation :** Utiliser exclusivement des icônes **SVG inline** ultra-minimalistes en mode filaire (`stroke`, pas de `fill`) ou des formes géométriques pures générées en CSS.
* **Intégration :** Les icônes adoptent dynamiquement la couleur des accents mats (`var(--accent-1)` ou `var(--accent-2)`) lorsqu'elles sont actives, sans aucun halo.

## 5. Layout & Mobile Viewport
* **Responsive Tactile :** Flexbox/Grid, hauteur min des boutons à 44px, sliders à 30px.
* **Fix Viewport Lock :**
    ```css
    body { height: 100vh; height: -webkit-fill-available; overflow: hidden; user-select: none; margin: 0; }
    ```

## 6. Mode "Clean Capture" Minimal
L'interface doit basculer la classe `.clean-capture` sur le `body` via un bouton ou déclencheur.
* **Impact CSS :** `.clean-capture .ui-hide { display: none !important; }` (Appliquer la classe `.ui-hide` à tous les contrôles, sliders et menus).
* La zone de rendu principale passe à 100% du viewport, le curseur disparaît (`cursor: none;`), et seul un bouton transparent flottant permet de revenir en arrière.

---
**CONSIGNE IA :** Réponds UNIQUEMENT par "ok" ou "OK" (sans aucune autre lettre, mot ou bloc de code) immédiatement après avoir reçu ce protocole. Attends les instructions suivantes. Lors des générations futures, applique strictement ce protocole pour écrire le code le plus court, dense et moderne possible sous forme de bloc unique prêt à copier.