# PROMPT — Claude Code · Intégration WordPress LYAMAMATAYN > À copier-coller dans Claude Code, **en joignant le fichier de référence** `lyamamatayn_nouvelle_identite.html` (la maquette d'accueil validée) et le logo (`clairePNG.png` / `sombrePNG.png`). Ce fichier HTML est la **source de vérité du design** : tout doit en être dérivé. --- ## 1. Rôle & mission Tu es **Senior Front-End Developer + intégrateur WordPress**. Tu intègres le site de l'école en ligne **LYAMAMATAYN** à partir d'une maquette HTML/CSS déjà validée par la cliente. **Règle d'or : ne réinvente rien.** Reprends fidèlement le design, les couleurs, la typographie, les formes et les animations de `lyamamatayn_nouvelle_identite.html`. Tu étends ce design system aux autres pages, sans dériver. Livrable final : un **thème WordPress** propre (ou un set de templates Elementor/Gutenberg — voir §9), responsive, accessible, prêt à recevoir le contenu via l'admin. --- ## 2. Concept de marque (à respecter sur tout le site) - Nom **LYAMAMATAYN / اليمامتين** = « les deux colombes ». Slogan : **« Apprendre, voler plus loin »**. - Concept : **donner des ailes aux enfants**. Identité subtile et premium, jamais enfantine ni cartoon. - Système d'identité « Yamamah » en 3 piliers : 1. **Colombe-signature** (silhouette de colombe) en petits détails : footer, fin de trajectoires, bloc « signification ». 2. **Forme d'aile des blocs** : toutes les cartes/blocs ont des coins opposés arrondis en diagonale (variable CSS `--wing`). 3. **Trajectoire de vol** : fines lignes pointillées terminées par une colombe (hero, footer). - **Interdits absolus** : ailes géantes / watermark, cercles ou blobs décoratifs, dégradés agressifs, illustrations enfantines, gros blocs bleu nuit dans le corps. --- ## 3. Palette (tokens CSS — déjà dans la maquette) ```css --blue:#3B89BF; --blue-strong:#2F7DB1; --blue-deep:#1F6595; --blue-light:#C1DCED; --blue-soft:#EAF5FC; --blue-wash:#F4FAFE; --coral:#D5604A; --coral-soft:#FBEDE9; --yellow:#FFBD59; --yellow-deep:#E9A02F; --cream:#FFF8EC; --navy:#102A43; /* FOOTER UNIQUEMENT */ --ink:#1A2A3D; --text:#25364A; --muted:#5E7488; --line:#E2EDF4; ``` Règles : `#102A43` réservé **au footer uniquement** (jamais en fond de section). Alternance des sections : blanc → bleu très clair (`--blue-wash`/`--blue-soft`) → crème. CTA toujours **jaune** (`--yellow`). --- ## 4. Typographie - Titres : **Poppins** 700 (h1 `clamp(36px,4.8vw,60px)`, h2 `clamp(30px,3.6vw,46px)`, h3 23px). - Sous-titres / eyebrows : Poppins 500/600. - Corps : **Nunito** 400/600/700/800, base **18px desktop / 16px mobile**, line-height ~1.68. - Chargées via Google Fonts (déjà dans la maquette). --- ## 5. Forme d'aile des blocs (signature visuelle) Tous les blocs/cartes utilisent la forme d'aile via variables : ```css --wing:24px 66px 24px 66px; /* cartes (border-radius) */ --wing-row:16px 42px 16px 42px; /* lignes courtes (news, FAQ) */ /* mobile (<=620px) : --wing:18px 44px 18px 44px; --wing-row:14px 32px 14px 32px; */ ``` - CTA principal : coin en pointe d'aile `border-radius:14px 14px 14px 22px`. - Footer : **bord supérieur en forme d'aile** (SVG courbe navy qui se découpe dans la section au-dessus). --- ## 6. Colombe Yamamah (SVG réutilisable) ```html ``` Usages : footer (3 colombes blanche/jaune/bleue le long d'une trajectoire pointillée), bout de la trajectoire du hero, bloc « signification », et **animation au scroll** (voir §8). --- ## 7. Logo - Utiliser le **vrai logo** fourni (`clairePNG.png`). Le détourer (fond transparent) pour qu'il fonctionne sur fond clair (header) **et** sur le footer bleu nuit. - Dans WordPress : déposer en média (SVG idéalement, sinon PNG ≥ retina), et le câbler au Customizer (logo du site). Header : logo agrandi + slogan « Apprendre, voler plus loin » en dessous. --- ## 8. Animations (vanilla JS, zéro librairie) - **Scroll-reveal** via `IntersectionObserver` : chaque bloc apparaît en fondu + légère montée. Bascule **symétrique** : se rejoue quand le bloc entre à l'écran, dans les **deux sens** (scroll bas ET haut). Réglages : `threshold:0`, `rootMargin:"0px 0px -10% 0px"`. - **Colombe qui « amène » le bloc** : une colombe Yamamah vole et se pose au-dessus de chaque `.s-head` (titre de section) quand elle entre à l'écran. - **`prefers-reduced-motion`** : tout s'affiche sans animation. Fallback si `IntersectionObserver` indisponible (tout révélé). - Ne pas ajouter de librairie d'animation (AOS, GSAP…) : réutiliser le script de la maquette. --- ## 9. WordPress — stratégie d'intégration Choisir **une** approche et la documenter dans le README : **Option A — Thème custom (recommandé pour la fidélité)** - Thème enfant léger ou thème sur mesure. CSS = repris de la maquette (variables `:root`). Composants en blocs réutilisables. - ACF Pro pour les champs des sections (hero, programmes, témoignages, FAQ, blog…). **Option B — Astra/Blocksy + Elementor (ou Bricks)** - Recréer chaque section comme template/section Elementor en respectant strictement les tokens. Injecter le CSS des variables + la forme d'aile + le script d'animation via un snippet global. Stack cible (à installer/configurer) : - **Builder/thème** : Astra ou Blocksy + Elementor **ou** Bricks ; **ACF Pro**. - **Multilingue FR / EN / AR** : Polylang (ou WPML). Gérer le **RTL** pour l'arabe. - **Formulaires** : WPForms ou Gravity Forms → **Inscription**, **Recrutement** (upload CV PDF), **Contact**. - **SEO** : Rank Math. **Perf** : WP Rocket + Cloudflare. **Sécurité/Sauvegarde** : Wordfence + UpdraftPlus. - E-learning hébergé séparément sur le sous-domaine **app.lyamamatayn.com** (le bouton « Espace Élève » pointe vers ce sous-domaine). --- ## 10. Pages à produire 1. **Accueil** — déjà conçue : reprendre `lyamamatayn_nouvelle_identite.html` à l'identique. Sections, dans l'ordre : `Header · Hero · Stats de confiance · Nos programmes · Qui sommes-nous · Signification · Nos valeurs · Mot de la directrice · Pourquoi nous choisir · Nouveautés · Plateforme & application (3 écrans) · FAQ · Blog (aperçu) · Témoignages · Inscription (formulaire) · Recrutement (formulaire) · Contact · Footer (aile + colombes).` 2. **Cursus Tunisien** — détail du programme par niveaux (primaire → lycée). 3. **Arabe & Coran** — méthodes, niveaux, non-arabophones. 4. **Ateliers & Clubs** — activités, stages, concours. 5. **Tarifs** — grille (mensuel/trimestriel/annuel, dégressif), table en forme d'aile, CTA inscription. 6. **Blog** — liste + article (gabarit single). 7. **Contact** — formulaire + coordonnées. Toutes les pages réutilisent header, footer, eyebrows, forme d'aile, animations et tokens. Menu desktop : `Accueil · Cursus Tunisien · Arabe & Coran · Ateliers & Clubs · Tarifs · Blog · Contact` + CTA **Je m'inscris** & **Espace Élève**. --- ## 11. Qualité & contraintes - **Mobile-first**, responsive parfait desktop / tablette / mobile (breakpoints de la maquette : 1024 / 620). - Accessibilité : focus visible, `aria-label` sur icônes, contrastes AA, `prefers-reduced-motion` respecté. - Pas de JS inutile ni de librairie superflue. HTML sémantique, CSS via variables. - Header compact qui tient sur une ligne en desktop, menu burger ≤ 1024px. - Formulaires : validation côté client + intégration plugin de formulaires. ## 12. Livrables attendus de Claude Code 1. Thème WordPress (ou templates Elementor) installable. 2. CSS du design system (tokens + composants + forme d'aile + footer-aile). 3. Script d'animation (scroll-reveal + colombe) réutilisable. 4. Les 7 pages ci-dessus + gabarits blog. 5. Champs ACF / réglages des sections éditables en admin. 6. README : installation, plugins, configuration multilingue/RTL, where-is-what. 7. Capture(s) de contrôle desktop + mobile de chaque page. **Rappel final** : avant chaque écran, vérifie que le rendu correspond à `lyamamatayn_nouvelle_identite.html` (couleurs, typo, forme d'aile, colombe, footer-aile, animations). En cas de doute, la maquette fait foi.