Le livre noir

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme bigmammagroup.com, la vitrine de Septime à Paris ou dishoom.com. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site vitrine du restaurant Le Wakilaré, cuisine guinéenne moderne, quartier Kaloum, Conakry. Ouvert 7j/7 de 11h à 23h, livraison Kaloum et Almamya en 30 minutes. Cible : employés de bureau le midi, familles le soir, téléphone Android, connexion instable.

SECTIONS, dans cet ordre exact :
1) navigation collante : nom, ancres Carte, Salle, Avis, Contact, bouton Commander
2) hero plein écran sur photo, titre "Le riz gras du midi, prêt en 20 minutes", sous-titre une ligne, deux boutons : Commander sur WhatsApp et Voir la carte
3) bandeau de réassurance : livraison 30 min, plats du jour, salle climatisée
4) la carte : 6 plats en cartes avec photo, nom, description d'une ligne, prix en GNF, filtre Midi / Soir / Grillades
5) la salle : deux photos et un paragraphe d'ambiance
6) avis : 3 témoignages avec prénom et quartier
7) horaires, adresse, repères d'accès en texte, téléphone cliquable
8) pied de page : rappel WhatsApp, réseaux, mention légère

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Riz gras au poulet fumé, bouillon corsé, 60 000 GNF
- Poulet braisé entier, attiéké et sauce claire, 120 000 GNF
- Sauce d'arachide au bœuf, riz blanc parfumé, 55 000 GNF
- Poisson capitaine grillé, alloco et piment vert, 95 000 GNF
- Fouti aux feuilles de patate, 45 000 GNF
- Jus de gingembre ou bissap maison, 15 000 GNF

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1600&q=80 avec alt="salle du restaurant Le Wakilaré à Kaloum"
- carte plat 1 : https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=900&q=80 avec alt="riz gras au poulet fumé vu de dessus"
- carte plat 2 : https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=900&q=80 avec alt="bol de plat africain généreux"
- carte plat 3 : https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=900&q=80 avec alt="poisson grillé et accompagnements"
- section salle photo 1 : https://images.unsplash.com/photo-1552566626-52f8b828add9?w=900&q=80 avec alt="intérieur chaleureux du restaurant"
- section salle photo 2 : https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=900&q=80 avec alt="table dressée pour le dîner"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond crème #FBF7F0, encre #1E1B18, action terre cuite #C0562F, accent vert feuille #4A6B3A. Typographies Google Fonts : Fraunces (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre de la carte sans rechargement (boutons Midi / Soir / Grillades qui masquent les cartes). Compteur discret de plats affichés.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000001 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme pharmacie-lafayette.com et goodrx.com pour la clarté rassurante. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la Pharmacie Kipé Santé, avenue de la Corniche, Kipé, Conakry. De garde un week-end sur trois. Cible : familles du quartier qui veulent vérifier la garde, les horaires et commander une ordonnance en photo par WhatsApp.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Services, Garde, Rayons, Équipe, Contact, bouton Ordonnance WhatsApp
2) hero sobre : photo, badge vert "Ouverte aujourd'hui jusqu'à 22h", titre "Votre pharmacie de quartier, sept jours sur sept", bouton Envoyer mon ordonnance
3) bloc garde très visible : calendrier simple des trois prochains week-ends de garde avec dates
4) services : ordonnance par WhatsApp, tension et glycémie sur place, conseil pédiatrique, livraison Kipé et Ratoma en cartes avec icônes SVG inline
5) rayons : 4 cartes photo (parapharmacie, bébé, dermo-cosmétique, matériel médical)
6) équipe : la pharmacienne titulaire et deux préparateurs, photo et une ligne chacun
7) contact : carte d'accès en texte, téléphone cliquable, horaires détaillés
8) pied de page avec numéro d'urgence

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Envoi d'ordonnance : photographiez votre ordonnance, envoyez-la sur WhatsApp, on vous rappelle en 10 minutes
- Tension artérielle sur place, 10 000 GNF
- Glycémie capillaire, 15 000 GNF
- Livraison Kipé et Ratoma, 20 000 GNF, gratuite au-delà de 300 000 GNF
- Dr Mariame Camara, pharmacienne titulaire, 12 ans d'expérience
- Garde : affiche les dates réelles des trois prochains week-ends à partir d'aujourd'hui

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=1600&q=80 avec alt="comptoir lumineux de la pharmacie Kipé Santé"
- rayon parapharmacie : https://images.unsplash.com/photo-1631549916768-4119b2e5f926?w=900&q=80 avec alt="rayon de produits de parapharmacie"
- rayon bébé : https://images.unsplash.com/photo-1579684385127-1ef15d508118?w=900&q=80 avec alt="produits de soin pour bébé"
- rayon dermo-cosmétique : https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=900&q=80 avec alt="produits cosmétiques en rayon"
- équipe : https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=900&q=80 avec alt="pharmacienne en blouse au comptoir"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #14231C, action vert pharmacie #1E7A46, accent menthe #DCF2E6. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Le badge Ouvert / Fermé se calcule réellement en JS selon l'heure locale et les horaires. Bouton copier le numéro.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000002 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme la précision visuelle de gc-salon.com et la chaleur de gliss.fr. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du salon Reine Fatou Coiffure, marché Taouyah, Conakry. Spécialiste tresses, tissages et soins. Sur rendez-vous WhatsApp, photos avant après. Cible : femmes actives 20 à 45 ans qui choisissent sur photo et réservent au créneau.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Styles, Tarifs, Avant après, Avis, Réserver
2) hero : photo pleine largeur, titre "Des tresses qui durent, un salon qui vous écoute", bouton Réserver mon créneau
3) styles : galerie 6 cartes photo avec nom du style et durée
4) tarifs : tableau propre 8 lignes, style, durée, prix GNF
5) avant après : 2 paires de photos côte à côte avec légende
6) avis clientes : 3 cartes prénom et quartier
7) réservation : les créneaux du jour en boutons (9h, 11h, 14h, 16h) qui ouvrent WhatsApp avec le créneau pré-rempli
8) adresse, horaires, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Tresses collées simples, 3 heures, 150 000 GNF
- Box braids mi-longues, 5 heures, 350 000 GNF
- Tissage fermé, 2 heures 30, 250 000 GNF
- Crochet braids, 3 heures, 200 000 GNF
- Soin profond + brushing, 1 heure 30, 120 000 GNF
- Chignon événement, 2 heures, 300 000 GNF
- Awa, Taouyah : "Trois semaines après, mes box braids sont impeccables"
- Kadiatou, Lambanyi : "Prise à l'heure, servie avec le sourire"

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1600&q=80 avec alt="cliente souriante en cours de coiffure au salon"
- style 1 : https://images.unsplash.com/photo-1522337660859-02fbefca4702?w=900&q=80 avec alt="tresses africaines détaillées"
- style 2 : https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=900&q=80 avec alt="coiffure protectrice élégante"
- style 3 : https://images.unsplash.com/photo-1562322140-8baeececf3df?w=900&q=80 avec alt="soin capillaire en salon"
- avant après : https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=900&q=80 avec alt="résultat de coiffure en gros plan"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond noir doux #16120F, encre claire #F5EFE8, action cuivre #C77B3F, accent rose thé #E8C4B0. Typographies Google Fonts : Playfair Display (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Galerie filtrable (Tresses / Tissages / Soins). Les boutons créneaux passent à l'état choisi avant d'ouvrir WhatsApp.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000003 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme midas.fr pour la réassurance et feuvert.fr pour la lisibilité des forfaits. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du garage Mécanique Plus, route Le Prince, Cosa, Conakry. Diagnostic électronique, entretien et dépannage sur route 24h/24. Cible : propriétaires de berlines et 4x4 qui veulent un prix clair avant de venir et un dépannage joignable en un geste.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Forfaits, Dépannage, Atelier, Avis, Contact, bouton Dépannage 24h
2) hero photo atelier, titre "Un diagnostic honnête, un prix annoncé avant la clé", double bouton : Prendre rendez-vous et Dépannage immédiat
3) bandeau urgence : numéro 24h cliquable sur fond rouge sombre
4) forfaits : 6 cartes avec prix GNF et ce qui est inclus
5) l'atelier : 3 photos et 3 équipements clés
6) étapes : Comment ça se passe en 4 étapes numérotées
7) avis : 3 témoignages courts
8) contact, horaires, plan d'accès en texte, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Vidange complète huile + filtre, 350 000 GNF
- Diagnostic électronique toutes marques, 200 000 GNF
- Plaquettes avant fournies et posées, à partir de 450 000 GNF
- Climatisation : recharge et contrôle, 400 000 GNF
- Révision avant long trajet, 34 points, 500 000 GNF
- Dépannage sur route Conakry, à partir de 300 000 GNF
- Étapes : vous décrivez la panne sur WhatsApp, on confirme le prix, vous déposez le véhicule, vous récupérez le jour dit

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=1600&q=80 avec alt="mécanicien au travail dans l'atelier"
- forfait vidange : https://images.unsplash.com/photo-1487754180451-c456f719a1fc?w=900&q=80 avec alt="moteur en cours d'entretien"
- atelier 1 : https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=900&q=80 avec alt="pont élévateur du garage"
- atelier 2 : https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?w=900&q=80 avec alt="outillage professionnel du garage"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond gris ardoise #14171C, encre claire #EEF1F5, action jaune sécurité #F2B705, accent bleu acier #3D6A9E. Typographies Google Fonts : Archivo (titres, graisse 800) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Le bandeau dépannage reste visible en bas sur mobile. Accordéon sur les forfaits pour le détail de ce qui est inclus.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000004 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme la mise en valeur produit de merci-merci.com et soeur.fr. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la boutique Tissus Hadja Bintou, marché Madina, allée des tissus, Conakry. Bazin riche, wax hollandais, dentelle et broderie. Vente au détail et en gros, expédition vers l'intérieur du pays. Cible : femmes qui préparent mariages et baptêmes, revendeuses de l'intérieur.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Collections, Gros, Sur mesure, Livraison, Contact
2) hero : photo textile plein cadre, titre "Le bazin qui fait retourner les têtes", bouton Voir les collections
3) collections : 6 cartes photo, nom, prix au mètre ou au coupon en GNF, badge Nouveauté sur deux cartes
4) achat en gros : bloc dédié avec paliers de remise et bouton Devis WhatsApp
5) sur mesure : couturières partenaires, délais, 3 étapes
6) livraison : Conakry le jour même, Kindia Mamou Labé sous 3 jours, tarifs
7) avis de clientes fidèles : 3 cartes
8) adresse au marché avec repère précis, horaires, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Bazin riche getzner authentique, coupon 5 mètres, 1 200 000 GNF
- Wax hollandais véritable, 6 yards, 450 000 GNF
- Dentelle française brodée, le mètre, 250 000 GNF
- Broderie suisse premium, coupon, 800 000 GNF
- Kente tissé main, la pièce, 600 000 GNF
- Super wax édition limitée, 6 yards, 550 000 GNF
- Gros : à partir de 10 coupons moins 8%, à partir de 30 coupons moins 15%
- Livraison Conakry 30 000 GNF le jour même, intérieur du pays via taxi-brousse de confiance

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=1600&q=80 avec alt="rouleaux de tissus colorés de la boutique"
- collection 1 : https://images.unsplash.com/photo-1537832816519-689ad163238b?w=900&q=80 avec alt="bazin riche plié en présentation"
- collection 2 : https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=900&q=80 avec alt="motifs de wax éclatants"
- collection 3 : https://images.unsplash.com/photo-1534126511673-b6899657816a?w=900&q=80 avec alt="dentelle fine en gros plan"
- sur mesure : https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=900&q=80 avec alt="couturière au travail sur machine"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond ivoire #FAF6EE, encre #241A10, action indigo profond #2B3A8F, accent or #C9A227. Typographies Google Fonts : Fraunces (titres) et Work Sans (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre des collections par type (Bazin / Wax / Dentelle / Broderie). Zoom doux au survol des cartes produit.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000005 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme freshfields.com et le cabinet gide.com pour l'autorité sobre. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du Cabinet Maître Diallo & Associés, immeuble Kassa, Kaloum, Conakry. Droit des affaires, droit minier, contentieux et arbitrage OHADA. Cible : directions juridiques, PME structurées et investisseurs étrangers qui jaugent la crédibilité en dix secondes.

SECTIONS, dans cet ordre exact :
1) navigation discrète : nom du cabinet, ancres Expertises, Équipe, Approche, Distinctions, Contact
2) hero très sobre : grande typographie serif sur fond sombre, sans photo de gavel, phrase "La rigueur au service de vos décisions", bouton Prendre attache
3) expertises : 4 blocs texte numérotés (affaires, minier, contentieux, arbitrage OHADA) avec 3 lignes chacun
4) équipe : 3 associés en cartes photo noir et blanc, nom, barreau, langues
5) approche : 3 engagements (réponse sous 24h ouvrées, honoraires annoncés par écrit, confidentialité absolue)
6) distinctions et affiliations : barreau de Guinée, OHADA, chambre d'arbitrage, en logos texte sobres
7) contact : formulaire nom, société, objet, message + coordonnées directes
8) pied de page juridique complet

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Droit des affaires : constitution, pactes d'associés, conformité et contrats commerciaux
- Droit minier : titres, conventions, contenu local et contentieux administratif
- Contentieux : recouvrement structuré, référés, exécution des décisions
- Arbitrage OHADA : clauses, procédure CCJA, exécution des sentences
- Me Amadou Diallo, associé gérant, barreau de Guinée, français et anglais
- Me Fatoumata Sow, associée contentieux, 14 ans de barre
- Me Jean Kolié, associé minier, ancien juriste de société minière

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero en arrière-plan très assombri : https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1600&q=80 avec alt="bibliothèque juridique du cabinet"
- équipe 1 : https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=900&q=80 avec alt="portrait professionnel d'un associé"
- équipe 2 : https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=900&q=80 avec alt="portrait professionnel d'une associée"
- section approche : https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80 avec alt="salle de réunion du cabinet"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond nuit #101418, encre claire #E9E5DC, action bronze #9A7B4F, filet discret #2A3138. Typographies Google Fonts : Cormorant Garamond (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Aucune animation tapageuse : apparitions lentes et courtes uniquement. Le formulaire valide les champs en direct.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000006 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme in-extenso.fr et compta-online.com pour la pédagogie chiffrée. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du Cabinet SECCA, expertise comptable et fiscalité, Almamya, Conakry. Tenue comptable, paie, déclarations fiscales et création d'entreprise à l'APIP. Cible : gérants de PME et commerçants formels qui redoutent les pénalités fiscales et veulent un forfait mensuel clair.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Forfaits, Services, Échéances, Équipe, Contact
2) hero : titre "Vos chiffres en règle, votre esprit tranquille", sous-titre sur les pénalités évitées, bouton Obtenir mon forfait
3) 3 forfaits mensuels en cartes comparées avec liste de ce qui est inclus, celui du milieu mis en avant
4) services à l'acte : 4 cartes (création APIP, audit ponctuel, déclaration annuelle, régularisation)
5) échéances fiscales guinéennes : liste des 5 prochaines dates avec ce qu'il faut déposer
6) méthode : 3 étapes, vous envoyez vos pièces sur WhatsApp, on saisit et on déclare, vous recevez le reçu
7) équipe et agréments, 2 cartes
8) contact et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Forfait Commerçant, 1 500 000 GNF par mois : tenue, TVA mensuelle, une paie
- Forfait PME, 3 500 000 GNF par mois : tenue complète, paies jusqu'à 10 salariés, toutes déclarations, tableau de bord trimestriel
- Forfait Croissance, 6 000 000 GNF par mois : tout PME plus prévisionnel, accompagnement bancaire et audit annuel
- Création d'entreprise à l'APIP, dossier complet, 2 500 000 GNF
- Échéances : TVA le 15 de chaque mois, BIC avant le 30 avril, CNSS le 15, taxe d'apprentissage le 31 janvier, patente le 31 mars

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1600&q=80 avec alt="bureau comptable ordonné avec documents"
- services : https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900&q=80 avec alt="calcul et vérification de chiffres"
- méthode : https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=900&q=80 avec alt="réunion de travail autour des comptes"
- équipe : https://images.unsplash.com/photo-1553729459-efe14ef6055d?w=900&q=80 avec alt="expert-comptable à son poste"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc cassé #F8F9FB, encre #16233B, action bleu confiance #1F5FD6, accent réussite #199A63. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Interrupteur mensuel / annuel sur les forfaits avec recalcul des prix (moins 10% en annuel). Accordéon sur ce qui est inclus.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000007 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme orpi.com pour la recherche et sothebysrealty.com pour la photo. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'agence Conakry Habitat, Lambanyi, Conakry. Vente et location de villas, appartements et terrains titrés. Cible : cadres, diaspora qui achète à distance et expatriés en recherche de location sécurisée.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Acheter, Louer, Terrains, Diaspora, Estimer, Contact
2) hero : photo de villa, titre "Trouvez le bien, on vérifie les papiers", barre de recherche factice à 3 champs (type, quartier, budget) qui filtre les annonces plus bas
3) annonces : 6 cartes photo avec badge Vente ou Location, quartier, surface, 3 caractéristiques, prix GNF
4) bloc diaspora : achat à distance en 4 étapes sécurisées avec visio et notaire partenaire
5) vérification : ce que l'agence contrôle avant de proposer un bien (titre foncier, litiges, bornage)
6) estimation gratuite : formulaire court quartier + type + WhatsApp
7) témoignages : 2 clients dont un de la diaspora
8) contact et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Villa 4 chambres à Kipé, piscine, titre foncier, 2 500 000 000 GNF
- Appartement 3 pièces meublé à Camayenne, vue mer, 15 000 000 GNF par mois
- Terrain titré 600 m2 à Sonfonia, bornage récent, 450 000 000 GNF
- Villa jumelée à Nongo, 3 chambres, 1 200 000 000 GNF
- Studio moderne à Taouyah, idéal jeune cadre, 6 500 000 GNF par mois
- Duplex neuf à Lambanyi, 5 chambres, 3 200 000 000 GNF
- Mohamed, Paris : "Acheté depuis la France, visites en visio, papiers vérifiés, aucune mauvaise surprise"

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1600&q=80 avec alt="villa moderne avec piscine au coucher du soleil"
- annonce 1 : https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=900&q=80 avec alt="façade de villa contemporaine"
- annonce 2 : https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=900&q=80 avec alt="salon lumineux d'appartement meublé"
- annonce 3 : https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=900&q=80 avec alt="terrain plat prêt à construire"
- annonce 4 : https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=900&q=80 avec alt="résidence récente vue de la rue"
- bloc diaspora : https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=900&q=80 avec alt="remise de clés entre agent et client"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond sable clair #F7F4EF, encre #1C1F26, action vert forêt #1F6B4A, accent laiton #B98A3C. Typographies Google Fonts : DM Serif Display (titres) et DM Sans (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). La barre de recherche filtre réellement les 6 cartes (type et quartier). Bouton favori cœur purement visuel sur les cartes.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000008 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme michaelpage.fr et welcometothejungle.com pour l'énergie. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du cabinet Talents Guinée, recrutement et intérim cadre, Camayenne, Conakry. Deux publics distincts : entreprises qui recrutent et candidats qui déposent leur CV. Cible : DRH de banques, mines et télécoms, et jeunes diplômés.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Entreprises, Candidats, Offres, Méthode, Contact
2) hero divisé en deux moitiés cliquables : Je recrute et Je cherche un poste, chacune avec photo et bouton
3) chiffres clés animés : 300 placements, 15 jours de délai moyen, 92% de confirmation après période d'essai
4) pour les entreprises : 3 services en cartes (recrutement cadre, intérim, chasse de tête) avec démarche
5) offres du moment : 4 cartes poste, secteur, lieu, type, bouton Postuler WhatsApp
6) pour les candidats : déposer son CV en 2 étapes, conseils d'entretien en 3 points
7) méthode en 4 étapes avec délais annoncés
8) logos clients en texte sobre, contact, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Responsable administratif et financier, secteur minier, Boké, CDI
- Chargée de clientèle banque, Conakry, CDI
- Superviseur HSE, industrie, Kamsar, CDD 12 mois
- Développeur mobile money, télécom, Conakry, CDI
- Méthode : brief sous 48h, présélection en 10 jours, 3 candidats présentés, suivi 3 mois
- Déposer son CV : envoyez CV PDF sur WhatsApp avec le poste visé en objet, accusé sous 24h

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero côté entreprises : https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&q=80 avec alt="réunion d'équipe dynamique en entreprise"
- hero côté candidats : https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=1600&q=80 avec alt="jeune candidat souriant en entretien"
- méthode : https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&q=80 avec alt="poignée de main de confirmation d'embauche"
- candidats : https://images.unsplash.com/photo-1560250097-0b93528c311a?w=900&q=80 avec alt="préparation d'un entretien sur ordinateur"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #101B33, action corail #E85D3D, accent bleu nuit #14264A. Typographies Google Fonts : Space Grotesk (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Compteurs animés au premier passage. Les deux moitiés du hero réagissent au survol en s'agrandissant légèrement.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000009 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme arcadis.com et setec.fr pour la crédibilité d'ingénierie. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du bureau d'études GéoBat Ingénierie, Matam, Conakry. Études de structure, VRD, suivi de chantier et contrôle technique. Cible : promoteurs immobiliers, ONG constructrices et administrations qui exigent des références vérifiables.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Expertises, Références, Processus, Agréments, Équipe, Contact
2) hero : photo de chantier au lever du jour, titre "Des ouvrages qui tiennent, des budgets qui tiennent aussi", bouton Discuter d'un projet
3) expertises : 4 cartes (structure béton, VRD et assainissement, suivi de chantier, contrôle technique) avec livrables précis
4) références : 3 projets en cartes photo, maître d'ouvrage, mission, année, montant des travaux
5) processus : frise en 5 étapes de l'esquisse à la réception
6) agréments et assurances en bloc rassurant
7) équipe : 3 ingénieurs en cartes
8) contact avec formulaire projet et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Immeuble R+5 à Kipé : étude de structure complète et suivi, maître d'ouvrage privé, 2024
- Réhabilitation d'un centre de santé à Coyah pour une ONG internationale, contrôle technique, 2023
- Lotissement 40 parcelles à Dubréka : VRD, voirie et drainage, 2025
- Livrables structure : plans de coffrage et ferraillage, notes de calcul, quantitatifs
- Ing. Sékou Condé, structures, 15 ans dont 6 en entreprise générale
- Processus : visite et esquisse sous 7 jours, avant-projet chiffré, dossier d'exécution, suivi hebdomadaire avec compte rendu photo, réception

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=80 avec alt="chantier de construction au lever du jour"
- référence 1 : https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=900&q=80 avec alt="structure en béton en cours d'élévation"
- référence 2 : https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=900&q=80 avec alt="ingénieur consultant les plans sur site"
- référence 3 : https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=900&q=80 avec alt="casques et coordination de chantier"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond gris clair #F2F4F6, encre #171C22, action orange chantier #D9601A, accent bleu plan #2C5F8A. Typographies Google Fonts : Archivo (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). La frise du processus se remplit au défilement. Les cartes références s'ouvrent en accordéon pour le détail de mission.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000010 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme paris.fr et le portail service-public.fr pour l'accessibilité. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la Commune de Ratoma, Conakry. Informer les administrés : services d'état civil, horaires, tarifs des actes, projets de la commune et annonces officielles. Cible : habitants de tous âges, souvent sur téléphone bas de gamme, qui veulent éviter un déplacement inutile.

SECTIONS, dans cet ordre exact :
1) navigation claire : nom de la commune, ancres Démarches, Actes et tarifs, Annonces, Projets, La commune, Contact
2) hero institutionnel sobre : photo, titre "La commune à votre service", trois boutons directs : Extrait de naissance, Certificat de résidence, Prendre rendez-vous
3) démarches les plus demandées : 4 cartes avec pièces à fournir, délai et tarif exact
4) annonces officielles : liste datée de 4 communiqués avec badge Nouveau sur le premier
5) projets en cours : 3 cartes photo avec avancement en pourcentage
6) la commune : mot du maire court, jours de réception du public
7) horaires détaillés et numéros utiles par service
8) pied de page institutionnel avec mentions

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Extrait de naissance : volet numéro 3 ou jugement supplétif, 50 000 GNF, prêt sous 48h
- Certificat de résidence : carte d'identité et facture EDG ou SEG, 30 000 GNF, le jour même
- Légalisation de documents : original plus copie, 10 000 GNF par page, immédiat
- Célébration de mariage : dossier complet 15 jours avant, 250 000 GNF
- Annonce : campagne de recensement des activités commerciales du 1er au 30 du mois prochain
- Projet : pavage de la voirie de Nongo, avancement 65%
- Réception du public : lundi à jeudi 8h30 à 15h, vendredi 8h30 à 12h30

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1555848962-6e79363ec58f?w=1600&q=80 avec alt="bâtiment administratif de la commune"
- projet 1 : https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=900&q=80 avec alt="travaux de voirie en cours"
- projet 2 : https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=900&q=80 avec alt="nouveau marché communal en construction"
- la commune : https://images.unsplash.com/photo-1562774053-701939374585?w=900&q=80 avec alt="salle de réunion du conseil communal"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #1A2330, action rouge drapeau #C8102E, accents vert #007A33 et jaune #FCD116 en filets fins. Typographies Google Fonts : Public Sans (titres et texte, graisses contrastées) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Recherche instantanée dans les démarches. Impression propre : une feuille de style print qui garde l'essentiel.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000011 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme sorbonne-universite.fr et uct.ac.za pour le prestige académique. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'Université Nongo Espoir, campus de Sonfonia, Conakry. Trois facultés, licences et masters accrédités. Cible : bacheliers et leurs parents qui comparent les frais, les débouchés et la crédibilité avant de s'inscrire.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Formations, Admissions, Campus, Recherche, Vie étudiante, Contact
2) hero : photo campus, titre "Former ceux qui construiront la Guinée", bouton S'inscrire pour la rentrée et date limite affichée
3) chiffres animés : 2 800 étudiants, 3 facultés, 85% d'insertion à 12 mois, 40 enseignants permanents
4) formations : 6 cartes par filière avec niveau, durée, frais annuels GNF et débouchés
5) admissions : conditions, calendrier en 4 dates, pièces du dossier
6) campus et vie étudiante : 3 photos avec légendes
7) partenariats et accréditations en texte sobre
8) contact par service et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Licence Informatique de gestion, 3 ans, 8 500 000 GNF par an, débouchés banque et télécom
- Licence Droit des affaires, 3 ans, 7 500 000 GNF par an
- Licence Génie civil, 3 ans, 9 500 000 GNF par an
- Master Finance et audit, 2 ans, 12 000 000 GNF par an
- Master Management de projets, 2 ans, 11 000 000 GNF par an
- Licence Communication digitale, 3 ans, 8 000 000 GNF par an
- Calendrier : dépôt des dossiers jusqu'au 30 septembre, tests le 10 octobre, résultats le 17, rentrée le 3 novembre

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1600&q=80 avec alt="étudiants sur le campus universitaire"
- formations : https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=900&q=80 avec alt="amphithéâtre pendant un cours"
- campus 1 : https://images.unsplash.com/photo-1543269865-cbf427effbad?w=900&q=80 avec alt="bibliothèque universitaire studieuse"
- campus 2 : https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=900&q=80 avec alt="travail de groupe d'étudiants"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc cassé #FAFAF7, encre #14213D, action bleu académique #1D3F8F, accent or discret #C9A227. Typographies Google Fonts : Libre Baskerville (titres) et Source Sans 3 (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre des formations par niveau Licence / Master. Compteurs animés à l'apparition.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000012 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme chu-rouen.fr et clevelandclinic.org pour l'orientation patient. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'Hôpital régional Amitié, Donka, Conakry. Orienter vite : urgences, services, horaires de visite, documents pour l'admission. Cible : familles en situation de stress qui doivent trouver le bon service et le bon numéro en quelques secondes.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Urgences, Services, Admissions, Visites, Trouver, Contact
2) bandeau urgences permanent en haut : numéro cliquable sur fond rouge, visible aussi en bas sur mobile
3) hero calme : photo, titre "Vous accueillir, vous soigner, vous rassurer", deux boutons : Urgences et Trouver un service
4) services : 8 cartes en grille (maternité, pédiatrie, chirurgie, cardiologie, radiologie, laboratoire, consultations, pharmacie hospitalière) avec étage et horaires
5) admissions : pièces nécessaires, caisse et tarifs des consultations courantes
6) horaires de visite par service en tableau clair
7) plan d'orientation en texte : entrée principale, pavillons A B C
8) numéros utiles par service et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Urgences 24h/24 : composez le numéro affiché, pavillon A, entrée dédiée
- Consultation générale, 50 000 GNF, lundi à samedi 8h à 16h
- Consultation spécialisée, 100 000 GNF, sur rendez-vous
- Échographie, 150 000 GNF, pavillon B, 8h à 14h
- Admission : carte d'identité du patient, carnet si disponible, un accompagnant maximum
- Visites : 12h à 13h et 17h à 18h30, deux visiteurs par patient

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1638202993928-7267aad84c31?w=1600&q=80 avec alt="personnel soignant attentif à l'hôpital"
- service maternité : https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?w=900&q=80 avec alt="service de maternité accueillant"
- service consultation : https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=900&q=80 avec alt="médecin en consultation avec un patient"
- admissions : https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=900&q=80 avec alt="accueil administratif de l'hôpital"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #12263A, action bleu médical #0E6BA8, urgence #C22F2F réservé au bandeau. Typographies Google Fonts : Source Sans 3 partout, graisses 400 à 700, taille généreuse pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Recherche de service instantanée. Le bandeau urgences reste fixe. Contraste renforcé et cibles tactiles de 48px minimum.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000013 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme arcep.fr et bceao.int pour la rigueur réglementaire. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'Autorité Guinéenne de Régulation des Communications, Kaloum, Conakry. Publier décisions, consultations publiques et données du secteur ; recevoir les plaintes des consommateurs. Cible : opérateurs, journalistes, juristes et consommateurs.

SECTIONS, dans cet ordre exact :
1) navigation : sigle et nom complet, ancres Décisions, Consultations, Données, Plaintes, L'Autorité, Contact
2) hero institutionnel : titre "Réguler pour protéger, publier pour éclairer", trois accès directs : Dernières décisions, Déposer une plainte, Chiffres du secteur
3) décisions récentes : liste datée de 5 décisions avec numéro, objet et badge par type
4) consultation publique en cours : encadré avec dates d'ouverture et de clôture et modalités de contribution
5) données du secteur : 4 grands chiffres animés (abonnés mobiles, pénétration internet, opérateurs licenciés, plaintes traitées)
6) plaintes consommateurs : procédure en 3 étapes et délai de réponse engagé
7) l'Autorité : missions en 4 points, gouvernance
8) contact officiel et pied de page avec textes de référence

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Décision 2026-041 : tarifs de terminaison d'appel, applicable au 1er du mois prochain
- Décision 2026-038 : sanction d'un opérateur pour couverture insuffisante en zone rurale
- Consultation ouverte : attribution de la bande 3,5 GHz, contributions jusqu'à la fin du mois
- Chiffres : 14,2 millions d'abonnés mobiles, 42% de pénétration internet, 4 opérateurs licenciés, 1 250 plaintes traitées l'an dernier
- Plainte : saisir d'abord son opérateur, puis l'Autorité après 30 jours sans réponse, décision sous 60 jours

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero très assombri : https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=1600&q=80 avec alt="immeuble institutionnel moderne"
- données du secteur : https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=900&q=80 avec alt="antenne de télécommunications"
- l'Autorité : https://images.unsplash.com/photo-1509062522246-3755977927d7?w=900&q=80 avec alt="séance de travail officielle"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond gris institutionnel #F4F5F7, encre #101826, action bleu République #12418F, filets #D8DDE4. Typographies Google Fonts : Public Sans (titres et texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtres des décisions par type. Les chiffres s'animent une seule fois. Fil d'Ariane décoratif sous le hero.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000014 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme visitrwanda.com, la référence absolue du tourisme africain, et visitportugal.com. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'Office du Tourisme de Guinée, destination nature. Faire rêver et organiser : Fouta-Djalon, îles de Loos, Basse-Côte, culture et gastronomie. Cible : diaspora en vacances, expatriés d'Afrique de l'Ouest, voyageurs curieux.

SECTIONS, dans cet ordre exact :
1) navigation transparente sur le hero puis teintée : logo Destination Guinée, ancres Régions, Expériences, Itinéraires, Infos pratiques, Contact
2) hero plein écran spectaculaire : photo de paysage, titre "La Guinée, l'Afrique à l'état pur", bouton Explorer les régions
3) régions : 3 grandes cartes immersives (Fouta-Djalon, îles de Loos, Guinée forestière) avec photo pleine carte et texte au survol
4) expériences : 6 vignettes (randonnée aux chutes, plages, marchés, gastronomie, musique, artisanat)
5) itinéraires prêts : 2 circuits détaillés jour par jour (week-end aux îles, 5 jours au Fouta) avec budget indicatif GNF
6) infos pratiques : meilleure saison, se déplacer, où dormir, en 4 blocs courts
7) galerie photo en mosaïque de 6 images
8) contact et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Fouta-Djalon : chutes de la Sala, cascades de Kambadaga, randonnées entre Dalaba et Doucki
- Îles de Loos : Room et Kassa à 45 minutes de pirogue motorisée du port de Boulbinet
- Circuit week-end îles de Loos : départ samedi 8h, plage et poisson braisé, retour dimanche 17h, à partir de 900 000 GNF par personne
- Circuit Fouta 5 jours : Mamou, Dalaba, Pita, chutes et villages peuls, à partir de 4 500 000 GNF par personne
- Meilleure saison : novembre à avril, saison sèche

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1600&q=80 avec alt="paysage spectaculaire de montagnes verdoyantes"
- région Fouta : https://images.unsplash.com/photo-1503220317375-aaad61436b1b?w=900&q=80 avec alt="cascade dans la nature du Fouta-Djalon"
- région îles : https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=900&q=80 avec alt="plage tropicale aux eaux claires"
- région forestière : https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=900&q=80 avec alt="forêt tropicale dense et brumeuse"
- expérience gastronomie : https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=900&q=80 avec alt="plat traditionnel savoureux"
- galerie : https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=900&q=80 avec alt="voyageur contemplant le panorama"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #14281E, action vert Guinée #0E7A3C, accent soleil #F0A500. Typographies Google Fonts : Fraunces (titres, italiques autorisées) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Les cartes régions révèlent leur texte au survol, au toucher elles s'ouvrent en accordéon. Galerie avec lightbox simple.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000015 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme msf.fr et care.org pour l'urgence digne et les preuves. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'ONG Santé Pour Tous Guinée, Ratoma, Conakry. Cliniques mobiles en zone rurale, santé maternelle et vaccination. Convaincre bailleurs et donateurs individuels avec des preuves et un don simple par mobile money. Cible : bailleurs institutionnels et diaspora donatrice.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Missions, Impact, Terrain, Rapports, Donner, badge bouton Faire un don
2) hero digne, jamais misérabiliste : photo de soignante en action, titre "Soigner là où aucune route ne va", bouton Soutenir une clinique mobile
3) notre mission en 3 cartes : cliniques mobiles, santé maternelle, vaccination
4) impact chiffré animé : 23 000 consultations, 41 villages couverts, 6 200 enfants vaccinés, 98 accouchements assistés
5) sur le terrain : récit d'une journée type avec 2 photos et une citation de sage-femme
6) transparence : répartition d'un don de 100 000 GNF en barres (78% terrain, 14% logistique, 8% fonctionnement), rapports annuels listés
7) faire un don : 3 montants suggérés avec équivalence concrète, numéros Orange Money et MoMo copiables en un bouton
8) partenaires en texte, contact, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Don de 50 000 GNF : une consultation prénatale complète pour une future maman
- Don de 150 000 GNF : un kit d'accouchement stérile
- Don de 500 000 GNF : une journée de clinique mobile pour un village entier
- Citation : "Quand la moto s'arrête au village, les mamans savent que la santé est arrivée", Hadja Fanta, sage-femme
- Orange Money : 622 00 00 16 au nom de Santé Pour Tous, reçu envoyé sur demande WhatsApp

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&q=80 avec alt="soignante en consultation dans un village"
- mission cliniques : https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?w=900&q=80 avec alt="équipe médicale mobile en déplacement"
- mission maternelle : https://images.unsplash.com/photo-1593113598332-cd288d649433?w=900&q=80 avec alt="suivi de santé d'une mère et son bébé"
- terrain photo 1 : https://images.unsplash.com/photo-1509099836639-18ba1795216d?w=900&q=80 avec alt="file d'attente ordonnée devant la clinique mobile"
- terrain photo 2 : https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?w=900&q=80 avec alt="vaccination d'un enfant par une infirmière"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc chaud #FDFBF7, encre #21272E, action bleu santé #1467B3, accent espoir #E2A93B. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Boutons copier sur les numéros mobile money avec confirmation Copié. Compteurs d'impact animés. Barres de transparence qui se remplissent au défilement.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000016 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme fairtrade.net et la coopérative alterego pour l'authenticité. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la Coopérative Agricole Wontanara, Kindia. 340 producteurs d'ananas pain de sucre, mangues et piment. Vendre en gros aux acheteurs de Conakry et exportateurs, recruter de nouveaux membres producteurs. Cible : grossistes, hôtels restaurants, exportateurs régionaux.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Produits, Producteurs, Acheter en gros, Devenir membre, Contact
2) hero : photo de récolte, titre "340 familles, une terre généreuse, des prix justes", bouton Commander en gros
3) produits : 3 grandes cartes saisonnières avec calendrier de disponibilité, conditionnement et prix indicatif gros
4) nos producteurs : portrait de 2 membres avec citation courte et photo
5) acheter en gros : paliers, logistique vers Conakry deux fois par semaine, engagement qualité, bouton devis WhatsApp
6) devenir membre : conditions, cotisation, avantages (intrants groupés, prix garanti, formation)
7) chiffres : 340 membres, 180 hectares, 12 ans d'existence, 2 camions
8) contact, siège à Kindia, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Ananas pain de sucre, disponible de décembre à mai, carton de 12, à partir de 180 000 GNF le carton en gros
- Mangue Kent, avril à juillet, caisse de 20 kg, à partir de 250 000 GNF
- Piment fort séché, toute l'année, sac de 25 kg, 800 000 GNF
- Citation : "Seul je vendais au premier venu, ensemble nous choisissons notre prix", Ibrahima, producteur à Friguiagbé
- Livraison Conakry : départs mardi et vendredi, arrivée marché Madina avant 6h

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1500937386664-56d1dfef3854?w=1600&q=80 avec alt="récolte dans les champs de la coopérative"
- produit ananas : https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=900&q=80 avec alt="ananas fraîchement récoltés"
- produit mangues : https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=900&q=80 avec alt="mangues mûres en caisses"
- producteur : https://images.unsplash.com/photo-1592982537447-7440770cbfc9?w=900&q=80 avec alt="producteur fier dans sa parcelle"
- gros : https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=900&q=80 avec alt="chargement des caisses pour le marché"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond crème #FBF8F1, encre #1F2A1D, action vert récolte #3E7C2F, accent ananas #E8B430. Typographies Google Fonts : Fraunces (titres) et Work Sans (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Calendrier de disponibilité visuel par mois (barres colorées). Boutons copier sur le numéro de commande.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000017 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme gofundme.com pour la mécanique du don et helloasso.com pour la confiance. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : plateforme de dons Solidarité Guinée, cagnottes vérifiées pour urgences médicales, scolarité et reconstruction. Trois cagnottes actives affichées. Cible : diaspora et classe moyenne de Conakry, paiement par Orange Money et MoMo. La confiance est l'unique enjeu : chaque franc doit être traçable.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Cagnottes, Comment ça marche, Vérification, Transparence, Lancer une cagnotte
2) hero : titre "Donner ici, voir le résultat là-bas", sous-titre sur la vérification, bouton Voir les cagnottes
3) cagnottes actives : 3 grandes cartes photo avec barre de progression animée, montant collecté sur objectif GNF, nombre de donateurs, jours restants, bouton Donner
4) comment ça marche : 4 étapes du don au reçu
5) vérification : ce qu'on contrôle avant publication (identité, devis médical ou scolaire, contact direct du bénéficiaire)
6) transparence : journal public des reversements avec dates et preuves, commission de 5% affichée sans détour
7) témoignage d'un bénéficiaire et d'un donateur
8) lancer une cagnotte : conditions et bouton WhatsApp, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Opération du petit Alseny, 7 ans : 38 500 000 GNF collectés sur 60 000 000, 214 donateurs, 12 jours restants
- Scolarité de 30 orphelines de Kankan : 12 800 000 GNF sur 45 000 000, 89 donateurs
- Reconstruction du marché incendié de Faranah : 156 000 000 GNF sur 400 000 000, 512 donateurs
- Reversement du 12 du mois : 25 000 000 GNF remis à la famille d'Alseny, reçu de la clinique publié
- Don par Orange Money au 622 00 00 18, mention du nom de la cagnotte, reçu WhatsApp sous 24h

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1524069290683-0457abfe42c3?w=1600&q=80 avec alt="mains solidaires réunies"
- cagnotte 1 : https://images.unsplash.com/photo-1587854692152-cbe660dbde88?w=900&q=80 avec alt="enfant hospitalisé entouré de soins"
- cagnotte 2 : https://images.unsplash.com/photo-1497633762265-9d179a990aa6?w=900&q=80 avec alt="écolières en classe attentives"
- cagnotte 3 : https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=900&q=80 avec alt="reconstruction d'un bâtiment communautaire"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #1B2430, action vert don #189A5A, accent chaleureux #F2994A. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Barres de progression animées à l'apparition. Bouton Donner ouvre un panneau avec les numéros copiables et les 3 montants suggérés.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000018 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme teachforall.org et bibliothequessansfrontieres.org pour l'énergie éducative. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'association Lire Pour Grandir, bibliothèques de quartier et soutien scolaire gratuit à Conakry. 4 centres, 60 bénévoles. Recruter des bénévoles, collecter des livres et des dons. Cible : jeunes diplômés bénévoles, entreprises mécènes, parents.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Centres, Programmes, Devenir bénévole, Donner des livres, Impact, Contact
2) hero : photo d'enfants lisant, titre "Un enfant qui lit sera un adulte qui choisit", deux boutons : Devenir bénévole et Donner des livres
3) programmes : 3 cartes (bibliothèques ouvertes, soutien scolaire du soir, club de lecture du samedi) avec horaires
4) nos 4 centres : cartes par quartier avec adresse et jours d'ouverture
5) impact animé : 1 200 enfants inscrits, 8 500 livres, 60 bénévoles, 4 quartiers
6) devenir bénévole : 3 engagements possibles (2h par semaine, un samedi par mois, à distance), formulaire WhatsApp
7) donner : livres acceptés et points de dépôt, dons financiers mobile money
8) témoignage d'une maman et d'un bénévole, partenaires, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Centre Ratoma : rue RO 250, mardi à samedi 14h à 18h
- Centre Matam : près du marché, mercredi et samedi
- Soutien scolaire : CM1 à la 10e année, français et maths, gratuit sur inscription
- Livres recherchés : manuels scolaires guinéens, dictionnaires, albums jeunesse en bon état
- Témoignage : "Ma fille a gagné deux places en classe depuis le soutien du soir", Mme Baldé, Ratoma
- Bénévole : "Deux heures par semaine qui donnent du sens à mon diplôme", Ousmane, 24 ans

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=1600&q=80 avec alt="enfants concentrés sur leurs livres"
- programme bibliothèque : https://images.unsplash.com/photo-1531913764164-f85c52e6e654?w=900&q=80 avec alt="rayonnages de livres accueillants"
- programme soutien : https://images.unsplash.com/photo-1543269865-cbf427effbad?w=900&q=80 avec alt="séance de soutien scolaire en petit groupe"
- bénévoles : https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=900&q=80 avec alt="jeune bénévole souriant avec les enfants"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond papier #FDF9F0, encre #232018, action bleu encre #2456A6, accent crayon #E8563F. Typographies Google Fonts : Fraunces (titres) et Work Sans (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Compteurs animés. Les cartes centres se déplient pour montrer le responsable et le numéro.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000019 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme harmonie-mutuelle.fr et alan.com pour la simplicité des garanties. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la Mutuelle Santé Solidaire des Commerçants, marché Madina, Conakry. Cotisation mensuelle, prise en charge dans 12 structures partenaires. Expliquer simplement qui peut adhérer, combien ça coûte, ce qui est couvert. Cible : commerçants et artisans du secteur informel, souvent méfiants.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Garanties, Cotisations, Structures partenaires, Adhérer, Questions, Contact
2) hero rassurant : photo, titre "Se soigner sans vendre son stock", bouton Adhérer en 10 minutes
3) ce qui est couvert : 6 cartes très concrètes avec taux de prise en charge
4) cotisations : 3 formules en tableau (individuelle, famille 4, famille 6 et plus) avec prix mensuel GNF
5) les 12 structures partenaires : liste par quartier avec type
6) adhérer : 4 étapes avec pièces et lieu du bureau au marché
7) questions fréquentes : 5 en accordéon (délai de carence, maternité, médicaments, exclusions, retard de cotisation)
8) témoignage de deux adhérents, contact, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Consultation générale prise en charge à 80% chez les partenaires
- Hospitalisation jusqu'à 5 000 000 GNF par an à 70%
- Accouchement simple couvert à 100% après 10 mois d'adhésion
- Médicaments essentiels à 50% dans les pharmacies partenaires
- Cotisation individuelle 35 000 GNF par mois, famille de 4 : 100 000 GNF, famille 6 et plus : 140 000 GNF
- Délai de carence : 3 mois pour les soins courants, 10 mois pour la maternité
- Témoignage : "Ma césarienne aurait englouti deux ans d'économies, la mutuelle a payé", Aïssatou, vendeuse de pagnes

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=1600&q=80 avec alt="commerçante sereine à son étal"
- garanties : https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=900&q=80 avec alt="consultation médicale bienveillante"
- structures : https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=900&q=80 avec alt="pharmacie partenaire du réseau"
- adhérer : https://images.unsplash.com/photo-1562774053-701939374585?w=900&q=80 avec alt="bureau d'accueil de la mutuelle"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc chaud #FEFCF8, encre #1E2A26, action vert mutuelle #1D7A54, accent solidarité #E9A13B. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Accordéon des questions. Simulateur simple : je choisis ma formule, le prix annuel s'affiche avec la petite économie annuelle.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000020 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme les portfolios de vincentmoustache.com et jeremy-cortial.fr, sobriété au service des images. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : portfolio du photographe Alseny Visuals, Conakry. Mariages, portraits studio et couverture d'entreprise. Le site doit s'effacer devant les photos et convertir en réservation de date. Cible : futurs mariés, familles, directions de communication.

SECTIONS, dans cet ordre exact :
1) navigation minimale : nom, ancres Galeries, Formules, Avis, Réserver ma date
2) hero : une seule photo plein écran remarquable, nom en typographie fine, phrase "Vos moments, traités comme des œuvres"
3) galeries : 3 onglets (Mariages, Portraits, Entreprise) affichant chacun 4 photos en mosaïque
4) formules : 3 cartes avec durée, livrables précis, délai de livraison et prix GNF
5) process : 4 étapes de la réservation à la galerie privée
6) avis : 3 clients dont un marié et une entreprise
7) réserver : vérification de date par WhatsApp avec date pré-remplie dans le message
8) pied de page minimal avec réseaux

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Formule Mariage Essentiel : 6 heures, 250 photos retouchées, galerie privée sous 14 jours, 4 500 000 GNF
- Formule Mariage Prestige : 2 photographes, cérémonie et réception, 500 photos plus album imprimé, 9 000 000 GNF
- Portrait studio : 1 heure, 15 photos retouchées, sous 5 jours, 800 000 GNF
- Entreprise : couverture d'événement demi-journée, 120 photos, 2 500 000 GNF
- Avis : "Il a saisi des larmes que nous n'avions pas vues", Mariama et Ibrahima, mariés à Nongo

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1554048612-b6a482bc67e5?w=1600&q=80 avec alt="photographie de mariage saisissante"
- galerie mariage : https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=900&q=80 avec alt="cérémonie de mariage élégante"
- galerie portrait : https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=900&q=80 avec alt="portrait studio à l'éclairage maîtrisé"
- galerie entreprise : https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=900&q=80 avec alt="reportage photo en entreprise"
- process : https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=900&q=80 avec alt="photographe en action avec son boîtier"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond noir vrai #0B0B0C, encre claire #F2F0EC, action blanc pur #FFFFFF sur boutons inversés, accent discret #B99A5B. Typographies Google Fonts : Cormorant Garamond (titres légers) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Onglets de galerie sans rechargement, lightbox plein écran au clic, préchargement de la photo suivante.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000021 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme abbeyroad.com pour l'aura et redbullstudios.com pour l'énergie. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du studio d'enregistrement La Fabrique Sonore, Taouyah, Conakry. Enregistrement, mixage, mastering et clips. Cible : artistes urbains guinéens, chorales et marques qui veulent des jingles. Vendre la qualité d'écoute et le sérieux des délais.

SECTIONS, dans cet ordre exact :
1) navigation sombre : logo, ancres Le studio, Tarifs, Réalisations, Matériel, Réserver
2) hero immersif : photo console, titre "Le son que ta voix mérite", bouton Réserver une session
3) le studio : 3 espaces en cartes photo (cabine voix, régie, salle live)
4) tarifs en cartes claires : à l'heure, à la journée, au projet
5) réalisations : 6 projets en vignettes avec artiste et type
6) matériel : liste sobre du parc en 2 colonnes
7) comment se passe une session : 4 étapes de la réservation au master livré
8) avis de 2 artistes, réservation WhatsApp avec date et heure pré-remplies, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Session enregistrement, ingénieur inclus, 400 000 GNF l'heure
- Journée complète 8 heures, 2 500 000 GNF
- Mixage d'un titre, 2 allers-retours inclus, 800 000 GNF
- Mastering prêt pour les plateformes, 400 000 GNF le titre
- Pack single complet : enregistrement, mix, master, 1 500 000 GNF
- Avis : "Mon single est passé en radio sans une seule retouche", MC Fodé

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=1600&q=80 avec alt="console de mixage du studio dans la pénombre"
- cabine voix : https://images.unsplash.com/photo-1519508234439-4f23643125c1?w=900&q=80 avec alt="micro de studio prêt pour la prise"
- régie : https://images.unsplash.com/photo-1571330735066-03aaa9429d89?w=900&q=80 avec alt="ingénieur du son au travail en régie"
- salle live : https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=900&q=80 avec alt="instruments installés en salle de prise"
- réalisations : https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=900&q=80 avec alt="artiste au chant derrière le micro"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond noir studio #0E0D12, encre claire #EFECF4, action violet néon #8B5CF6, accent signal #F43F5E. Typographies Google Fonts : Space Grotesk (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Légère lueur animée derrière le hero. Les cartes tarifs se soulèvent au survol. Fond qui fonce encore au défilement.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000022 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme gagosian.com et perrotin.com, le blanc au service des œuvres. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la Galerie Nimba, Kaloum, Conakry. Art contemporain guinéen et ouest-africain, expositions et vente d'œuvres. Cible : collectionneurs locaux et internationaux, institutions, curieux fortunés. Sobriété muséale exigée.

SECTIONS, dans cet ordre exact :
1) navigation épurée : nom, ancres Exposition, Artistes, Œuvres, Visite, Contact
2) hero blanc généreux : une œuvre en grand, nom de l'exposition en cours, dates, bouton Préparer ma visite
3) exposition en cours : texte de présentation court et 3 œuvres phares avec cartels complets
4) artistes : 4 cartes portrait avec démarche en 2 lignes
5) œuvres disponibles : grille de 6 avec cartel (artiste, titre, technique, dimensions, prix sur demande ou GNF)
6) visite : horaires, adresse, visite commentée du samedi sur inscription
7) acquisition : comment acheter, certificat d'authenticité, expédition internationale
8) pied de page discret

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Exposition en cours : Mémoires du Nimba, huit artistes autour du masque et de l'héritage, jusqu'à la fin du mois prochain
- Cartel : Sans titre III, acrylique et pigments sur toile, 120 x 100 cm, 25 000 000 GNF
- Cartel : Fleuve, technique mixte sur bois, 80 x 80 cm, prix sur demande
- Visite commentée gratuite chaque samedi 11h sur inscription WhatsApp
- Chaque œuvre part avec son certificat d'authenticité signé de l'artiste

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1561214115-f2f134cc4912?w=1600&q=80 avec alt="œuvre d'art contemporain exposée en galerie"
- exposition : https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=900&q=80 avec alt="accrochage d'œuvres sur cimaise blanche"
- artiste : https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=900&q=80 avec alt="artiste dans son atelier de peinture"
- visite : https://images.unsplash.com/photo-1531913764164-f85c52e6e654?w=900&q=80 avec alt="visiteurs contemplant une exposition"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc galerie #FFFFFF, encre #17171A, action noir #17171A boutons pleins, filet gris #E6E6E9, aucun autre accent. Typographies Google Fonts : Cormorant Garamond (titres) et Inter (texte étroit) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Zoom très doux des œuvres au survol. Lightbox avec cartel affiché. Presque aucune animation : le calme est le luxe.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000023 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme wearedustyfeet.com et lescharrues.fr pour la fièvre du festival. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du Festival Kindia Vibes, 3 jours de musique, danse et artisanat à Kindia. Programmation, billetterie par mobile money, infos pratiques. Cible : 18 à 35 ans de Conakry et Kindia, énergie visuelle maximale sans sacrifier la lisibilité.

SECTIONS, dans cet ordre exact :
1) navigation vive : logo, ancres Programmation, Billets, Infos, Village, badge compte à rebours
2) hero électrique : photo de foule, dates énormes, compte à rebours animé jusqu'au jour J, bouton Prendre mon pass
3) programmation : 3 onglets par jour, chaque jour 4 artistes avec heure et scène
4) billets : 3 pass en cartes (1 jour, 3 jours, VIP) avec avantages et prix GNF, achat par mobile money expliqué en 3 étapes
5) le village : artisanat, cuisine locale, espace enfants en 3 vignettes
6) infos pratiques : venir de Conakry, hébergements partenaires, objets interdits, accordéon
7) aftermovie de l'an dernier en photo cliquable, partenaires, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Pass 1 jour : 150 000 GNF
- Pass 3 jours : 350 000 GNF
- Pass VIP 3 jours, accès scène et parking : 800 000 GNF
- Achat : envoyez le montant par Orange Money au 622 00 00 24, recevez votre code pass par WhatsApp, présentez-le à l'entrée
- Programmation samedi : Soul Bang's 21h grande scène, Instinct Killers 19h, troupe Wassa Wassa 17h, DJ Kefran 23h
- Navettes depuis Conakry : départ gare Madina 8h et 12h, 100 000 GNF aller-retour

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=1600&q=80 avec alt="foule en liesse au concert de nuit"
- programmation : https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=900&q=80 avec alt="artiste sur scène sous les projecteurs"
- billets : https://images.unsplash.com/photo-1519741497674-611481863552?w=900&q=80 avec alt="ambiance festive du public"
- village : https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=900&q=80 avec alt="stands d'artisanat du village festival"
- aftermovie : https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=900&q=80 avec alt="scène illuminée devant la foule"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond nuit #14101E, encre claire #F4EFFA, action jaune électrique #FFD23F, accent magenta #E5399E. Typographies Google Fonts : Archivo Black (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Compte à rebours en temps réel. Onglets de programmation. Le bouton pass pulse doucement. Marquee lent des partenaires.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000024 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme jacquemus.com pour l'audace et imane-ayissi.com pour la haute couture africaine. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la styliste Kadija Couture, atelier à Camayenne, Conakry. Robes de mariée sur mesure, tenues de cérémonie en bazin et dentelle, collection prêt-à-porter. Cible : mariées, invitées de cérémonie, clientèle premium.

SECTIONS, dans cet ordre exact :
1) navigation fine : nom, ancres Collections, Sur mesure, Mariées, Presse, Rendez-vous
2) hero éditorial : photo mode plein cadre, nom en très grand, phrase "La couture qui raconte qui vous êtes"
3) collections : 6 silhouettes en grille éditoriale asymétrique avec nom de pièce
4) l'atelier sur mesure : processus en 4 rendez-vous du croquis à la retouche finale, délais annoncés
5) espace mariées : 3 créations avec récit court, délai de commande conseillé de 3 mois
6) presse et podiums : 3 mentions sobres
7) rendez-vous d'essayage sur WhatsApp avec type de tenue pré-rempli
8) pied de page avec Instagram mis en avant

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Robe de mariée sur mesure, à partir de 8 000 000 GNF, 3 mois de délai conseillé
- Tenue de cérémonie bazin brodé main, à partir de 3 500 000 GNF
- Ensemble prêt-à-porter Kadija, de 1 200 000 à 2 500 000 GNF
- Processus : rendez-vous croquis et mesures, choix des étoffes, essayage à mi-parcours, retouche et livraison
- Presse : défilé à la semaine de la mode de Dakar, tenue portée à la cérémonie des Awards de la musique guinéenne

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1445205170230-053b83016050?w=1600&q=80 avec alt="création de haute couture portée en studio"
- collection 1 : https://images.unsplash.com/photo-1537832816519-689ad163238b?w=900&q=80 avec alt="détail de broderie sur étoffe précieuse"
- collection 2 : https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=900&q=80 avec alt="silhouette élégante en tissu wax"
- atelier : https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=900&q=80 avec alt="mains de couturière à l'ouvrage"
- mariées : https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=900&q=80 avec alt="robe de cérémonie immaculée"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond poudre #F7F1EC, encre #221C18, action noir profond #1A1512, accent or rose #C89A6B. Typographies Google Fonts : Cormorant Garamond (titres italiques autorisées) et Jost (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Grille éditoriale avec images de hauteurs variées. Apparitions lentes et feutrées. Curseur personnalisé discret sur ordinateur.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000025 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme lewagon.com, la référence des sites de bootcamp, et openclassrooms.com. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du Centre Formation Pro Guinée, Almamya, Conakry. Formations courtes certifiantes : bureautique, comptabilité pratique, marketing digital, anglais professionnel. Sessions du soir et du week-end. Cible : jeunes diplômés et salariés qui veulent une compétence monnayable rapidement.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Formations, Calendrier, Méthode, Résultats, Financement, S'inscrire
2) hero : titre "Une compétence en 8 semaines, un CV qui répond", preuve sociale immédiate, bouton Voir les formations
3) formations : 4 cartes détaillées avec durée, rythme, programme en 4 points, prix GNF et badge Prochaine session
4) calendrier des 3 prochaines rentrées en tableau
5) méthode : 70% de pratique, groupes de 15 maximum, un projet réel par formation
6) résultats animés : 850 diplômés, 78% en poste sous 6 mois, note moyenne 4,7 sur 5
7) témoignages : 3 anciens avec poste actuel
8) financement : paiement en 2 fois, tarif entreprise, contact et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Bureautique complète Word Excel PowerPoint, 6 semaines du soir, 1 800 000 GNF
- Comptabilité pratique avec logiciel, 8 semaines, 2 500 000 GNF
- Marketing digital et réseaux sociaux, 6 semaines, 2 200 000 GNF
- Anglais professionnel intensif, 10 semaines, 2 000 000 GNF
- Témoignage : "Deux mois après la formation compta, j'étais aide-comptable dans une PME de Matoto", Aminata, 26 ans
- Paiement en deux tranches sans frais : moitié à l'inscription, moitié à mi-parcours

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=1600&q=80 avec alt="salle de formation active et moderne"
- formation bureautique : https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=900&q=80 avec alt="apprenants concentrés sur ordinateur"
- méthode : https://images.unsplash.com/photo-1543269865-cbf427effbad?w=900&q=80 avec alt="formateur accompagnant un petit groupe"
- résultats : https://images.unsplash.com/photo-1560250097-0b93528c311a?w=900&q=80 avec alt="diplômée confiante en entretien"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #131C2E, action bleu vif #2563EB, accent réussite #F59E0B. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre des formations par rythme (soir / week-end). Compteurs animés. Badge de places restantes sur chaque session.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000026 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme ecole-jeanninemanuel.fr pour la confiance des parents. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'École primaire privée Les Petits Génies, Nongo, Conakry. De la maternelle au CM2, cantine, transport et étude du soir. Cible : parents qui comparent sérieux, sécurité et frais avant l'inscription de septembre.

SECTIONS, dans cet ordre exact :
1) navigation chaleureuse : nom, ancres Notre école, Classes, Frais, Vie scolaire, Inscription, Contact
2) hero : photo d'enfants en classe, titre "Là où vos enfants aiment apprendre", bouton Inscrire mon enfant
3) notre école en 3 promesses : effectifs limités à 25, enseignants titulaires suivis, cour sécurisée
4) classes : de la petite section au CM2 en 6 cartes avec effectif et enseignant référent
5) frais annuels en tableau transparent par niveau avec ce qui est inclus, options cantine et transport
6) vie scolaire : 4 vignettes photo (bibliothèque, sport, sorties, fête de fin d'année)
7) inscription : 4 étapes avec pièces, dates et test de niveau éventuel
8) mot de la directrice avec photo, avis de 2 parents, contact, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Maternelle petite et moyenne section : 4 500 000 GNF par an, goûter inclus
- Grande section et CP : 5 000 000 GNF par an
- CE1 au CM2 : 5 500 000 GNF par an
- Cantine : 900 000 GNF par trimestre, menus affichés chaque lundi
- Transport : 4 quartiers desservis, 1 200 000 GNF par trimestre
- Avis : "Ma fille est entrée timide en CP, elle récite devant toute l'école à la fête", M. Sylla, parent
- Inscription : dossier retiré à l'école ou par WhatsApp, test de niveau à partir du CE1, réponse sous une semaine

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=1600&q=80 avec alt="élèves épanouis en salle de classe"
- classes : https://images.unsplash.com/photo-1543269865-cbf427effbad?w=900&q=80 avec alt="institutrice guidant ses élèves"
- vie scolaire bibliothèque : https://images.unsplash.com/photo-1531913764164-f85c52e6e654?w=900&q=80 avec alt="coin lecture coloré de l'école"
- vie scolaire sport : https://images.unsplash.com/photo-1497633762265-9d179a990aa6?w=900&q=80 avec alt="enfants jouant dans la cour"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond crème doux #FDF8EF, encre #26221C, action bleu cartable #2B5BB8, accents craie #E5533C et #F2B705 en petites touches. Typographies Google Fonts : Fraunces (titres ronds) et Nunito Sans (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Le tableau des frais met en évidence la colonne au survol. Accordéon sur les questions d'inscription.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000027 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme skillshare.com et domestika.org pour la vitrine de cours en ligne. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la plateforme Guinée Academy, cours en ligne en français pour l'Afrique de l'Ouest : bureautique, création de site avec l'IA, community management, comptabilité. Vidéos accessibles par abonnement mensuel payé en mobile money. Cible : 18 à 40 ans, apprentissage sur téléphone.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Catalogue, Comment ça marche, Tarifs, Formateurs, Avis, Commencer
2) hero : titre "Apprends depuis ton téléphone, paie avec ton mobile money", mockup léger en CSS pur d'un écran de cours, bouton Voir le catalogue
3) catalogue : 6 cartes cours avec vignette, durée totale, niveau, nombre d'inscrits
4) comment ça marche : 3 étapes (paie par mobile money, reçois ton accès WhatsApp, apprends à ton rythme)
5) tarifs : 2 cartes, mensuel et annuel avec 2 mois offerts, ce qui est inclus
6) formateurs : 3 cartes avec spécialité
7) avis : 4 apprenants avec métier
8) questions en accordéon (connexion faible, téléchargement, certificat), pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Créer des sites web avec l'IA, 12 heures, débutant, 2 400 inscrits
- Community management de A à Z, 8 heures, 1 850 inscrits
- Excel du débutant au tableau croisé, 10 heures, 3 100 inscrits
- Comptabilité pratique OHADA, 14 heures, 990 inscrits
- Abonnement mensuel : 120 000 GNF, tous les cours, sur 2 appareils
- Abonnement annuel : 1 200 000 GNF, 2 mois offerts, certificats inclus
- Les vidéos existent en qualité légère 240p pour les connexions 3G

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero arrière-plan discret : https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80 avec alt="apprentissage sur ordinateur portable et téléphone"
- cours 1 : https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=900&q=80 avec alt="création de site web à l'écran"
- cours 2 : https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=900&q=80 avec alt="réseaux sociaux sur smartphone"
- cours 3 : https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=900&q=80 avec alt="feuille de calcul en cours d'usage"
- formateurs : https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=900&q=80 avec alt="formateur face caméra en tournage"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond nuit douce #10141F, encre claire #EDF0F7, action turquoise #14B8A6, accent violet #7C6CF6. Typographies Google Fonts : Space Grotesk (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre du catalogue par thème. Les cartes cours affichent une barre de progression décorative au survol.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000028 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme codesrousseau.fr pour le sérieux et ornikar.com pour la modernité. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'Auto-école La Prudence, Matoto, Conakry. Permis B voiture et permis A moto, code en salle climatisée, moniteurs patients, véhicules récents doubles commandes. Cible : étudiants et jeunes salariés, souvent inquiets du prix total réel.

SECTIONS, dans cet ordre exact :
1) navigation : nom, ancres Formules, Le code, La conduite, Moniteurs, Résultats, S'inscrire
2) hero : photo voiture école, titre "Le permis sans mauvaises surprises, au prix annoncé", bouton Voir les formules
3) formules tout compris : 3 cartes avec absolument tout ce qui est inclus et la mention Aucun frais caché
4) le code : salle climatisée, séances quotidiennes, tablettes d'entraînement, horaires
5) la conduite : véhicules doubles commandes, circuits d'examen réels, moniteurs certifiés
6) nos moniteurs : 3 cartes photo avec ancienneté et spécialité
7) résultats animés : 82% de réussite au premier passage, 1 400 permis obtenus
8) étapes jusqu'au permis : frise en 5 points avec durée moyenne, avis de 2 élèves, inscription WhatsApp, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Formule Permis B complète : code illimité 3 mois plus 20 heures de conduite, frais d'examen inclus, 3 500 000 GNF
- Formule accélérée 6 semaines : 4 200 000 GNF
- Permis A moto : code plus 12 heures de plateau et circulation, 2 200 000 GNF
- Heure de conduite supplémentaire : 150 000 GNF
- Avis : "Reçue au premier passage, mon moniteur croyait en moi plus que moi", Fatou, 23 ans
- Étapes : inscription et dossier, code en 4 à 8 semaines, conduite, examen blanc, passage

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?w=1600&q=80 avec alt="voiture d'auto-école prête pour la leçon"
- la conduite : https://images.unsplash.com/photo-1502877338535-766e1452684a?w=900&q=80 avec alt="leçon de conduite avec moniteur attentif"
- le code : https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=900&q=80 avec alt="salle de code studieuse"
- moniteurs : https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=900&q=80 avec alt="moniteur souriant près du véhicule"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #17202A, action vert feu #16A34A, accent signalisation #EF4444 en petites touches. Typographies Google Fonts : Archivo (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Compteurs de résultats animés. La frise des étapes se colore au défilement. Accordéon sur le détail des formules.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000029 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme tonyrobbins.com épuré à la sauce sobre et welcometothejungle.com pour le ton juste. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la coach Safiatou Bah, orientation scolaire et professionnelle, Conakry et visio. Bilans d'orientation pour lycéens, accompagnement de reconversion pour salariés. Cible : parents de lycéens et salariés en questionnement, qui achètent de la clarté.

SECTIONS, dans cet ordre exact :
1) navigation légère : nom, ancres Pour qui, Accompagnements, Méthode, Parcours, Témoignages, Réserver
2) hero chaleureux : portrait, titre "Choisir sa voie, pas la subir", bouton Réserver un premier échange gratuit
3) pour qui : 2 grandes cartes distinctes, lycéens et parents d'un côté, salariés en reconversion de l'autre
4) accompagnements : 3 offres en cartes avec séances, durée totale, livrable final et prix GNF
5) méthode en 4 temps avec ce que le client repart avec à chaque étape
6) son parcours : formation, certifications, années d'expérience en ressources humaines
7) témoignages : 3 cartes dont un lycéen devenu étudiant et une reconversion réussie
8) premier échange gratuit de 20 minutes par WhatsApp ou visio, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Bilan d'orientation lycéen : 4 séances plus tests, dossier de choix argumenté, 1 500 000 GNF
- Accompagnement reconversion : 6 séances sur 3 mois, plan d'action écrit, 3 000 000 GNF
- Séance ponctuelle de clarification : 90 minutes, 500 000 GNF
- Témoignage : "Je pensais médecine par défaut, j'ai découvert la logistique et je m'y épanouis", Alpha, étudiant
- Parcours : 9 ans en ressources humaines dans une banque, certification en orientation professionnelle

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1600&q=80 avec alt="coach professionnelle à l'écoute en entretien"
- pour qui lycéens : https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=900&q=80 avec alt="lycéen réfléchissant à son avenir"
- pour qui salariés : https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&q=80 avec alt="salarié en réflexion de reconversion"
- méthode : https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=900&q=80 avec alt="séance de coaching autour d'un carnet"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond lin #FAF7F2, encre #26221E, action terracotta #C2593B, accent sauge #7D9B76. Typographies Google Fonts : Fraunces (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Apparitions douces. Les 2 grandes cartes Pour qui mènent chacune à son offre par ancre. Question fréquente en accordéon.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000030 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme linear.app, la référence mondiale des sites SaaS, et stripe.com. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'outil SaaS B2B Stockly, gestion de stock et facturation pour boutiques et PME en Afrique de l'Ouest. Application web et mobile, hors ligne partiel, en francs guinéens et francs CFA. Cible : gérants de boutiques structurées et distributeurs.

SECTIONS, dans cet ordre exact :
1) navigation type SaaS : logo, ancres Produit, Fonctionnalités, Tarifs, Clients, Questions, boutons Se connecter et Essai gratuit
2) hero : titre "Ton stock sait tout, enfin toi aussi", sous-titre une ligne, bouton Essai gratuit 14 jours, mention Sans carte bancaire, maquette d'interface reconstruite en CSS pur (tableau de bord avec 3 chiffres et une liste)
3) logos clients en bande grise
4) 3 fonctionnalités majeures en alternance image texte : inventaire en temps réel, factures conformes, alertes de rupture par WhatsApp
5) tarifs : 3 plans en GNF par mois avec liste de ce qui est inclus, plan du milieu recommandé
6) témoignages : 2 gérants avec boutique et ville
7) questions en accordéon : hors ligne, données, migration, support
8) appel final et pied de page SaaS complet

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Plan Boutique : 250 000 GNF par mois, 1 point de vente, 2 utilisateurs
- Plan Commerce : 600 000 GNF par mois, 3 points de vente, utilisateurs illimités, alertes WhatsApp
- Plan Distribution : 1 500 000 GNF par mois, multi-dépôts, exports comptables, accompagnement dédié
- Fonctionnalité : chaque vente met le stock à jour, même hors ligne, synchronisation au retour du réseau
- Témoignage : "Fini les ruptures du samedi : l'alerte part avant que le rayon soit vide", Thierno, alimentation générale à Matoto

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- section fonctionnalité 1 : https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900&q=80 avec alt="gérant consultant son tableau de bord"
- section fonctionnalité 2 : https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?w=900&q=80 avec alt="facturation numérique sur écran"
- section fonctionnalité 3 : https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=900&q=80 avec alt="rayons de boutique bien approvisionnés"
- témoignages : https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=900&q=80 avec alt="commerçant confiant dans sa boutique"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #0F172A, action indigo #4F46E5, fonds de section #F1F5F9, réussite #10B981. Typographies Google Fonts : Inter partout avec graisses 400 à 800, lettrage serré sur les titres pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). La maquette du hero anime ses chiffres au chargement. Interrupteur mensuel annuel. Accordéon des questions. Bande logos en défilement lent.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000031 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme wave.com, la référence du paiement mobile africain, et lemonade.com pour la simplicité radicale. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la fintech GuinéePay, transfert d'argent et paiement marchand par QR en Guinée. Frais parmi les plus bas, agents dans tout le pays. Cible grand public : le site doit se comprendre en 5 secondes, y compris pour un utilisateur peu lettré. Phrases courtes, très gros boutons.

SECTIONS, dans cet ordre exact :
1) navigation minimale : logo, ancres Particuliers, Marchands, Frais, Agents, Sécurité, bouton Télécharger
2) hero radicalement simple : titre géant "Envoie. Reçois. C'est tout.", visuel téléphone reconstitué en CSS, deux boutons de téléchargement
3) 3 gestes en 3 cartes géantes illustrées : envoyer à un numéro, payer au QR chez le marchand, retirer chez l'agent
4) frais : tableau ultra clair comparant 3 opérations avec le prix exact
5) pour les marchands : encaisser au QR sans terminal, reversement le jour même
6) agents : chiffre animé de 4 200 points dans le pays, comment devenir agent
7) sécurité : code secret, plafonds, assistance humaine en français, soussou, peul et malinké
8) questions courtes en accordéon, téléchargement final, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Envoi vers un numéro GuinéePay : 1% du montant, minimum 1 000 GNF
- Paiement marchand au QR : gratuit pour le client
- Retrait chez un agent : 1,5% du montant
- Marchands : encaissez au QR, zéro matériel, reversé sur votre compte le soir même
- Assistance humaine 7j/7 de 8h à 20h en 4 langues
- Devenir agent : caution de 5 000 000 GNF, commission sur chaque opération, formation offerte

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- section particuliers : https://images.unsplash.com/photo-1563986768609-322da13575f3?w=900&q=80 avec alt="paiement par téléphone au quotidien"
- section marchands : https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&q=80 avec alt="commerçante encaissant au téléphone"
- section agents : https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&q=80 avec alt="kiosque d'agent de mobile money"
- sécurité : https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=900&q=80 avec alt="utilisateur serein avec son téléphone"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #101828, action bleu électrique #1B6EF3, aplat de marque #0A2A6B, réussite #12B76A. Typographies Google Fonts : Sora (titres très gras) et Inter (texte grand, 18px minimum) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Presque aucune animation : c'est un choix de vitesse. Compteur des agents animé une fois. Boutons de 56px de haut minimum.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000032 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme ueno.co d'antan et basicagency.com, l'agence qui prouve par sa propre vitrine. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'agence web Pixel Conakry, création de sites, applications et identités de marque. Le site est lui-même la démonstration : direction artistique audacieuse mais lisible. Cible : PME ambitieuses, ONG et institutions qui comparent 3 agences.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Réalisations, Services, Méthode, L'équipe, Devis
2) hero typographique audacieux : très grand titre "Des sites qui travaillent pendant que vous dormez", curseur de couleur qui suit la souris en halo discret
3) réalisations : 4 études de cas en grandes cartes avec secteur, mission, résultat chiffré
4) services : 3 offres claires avec livrables et fourchette de prix GNF affichée sans détour
5) méthode : 5 étapes datées de l'atelier au lancement, avec ce que le client valide à chaque étape
6) l'équipe : 4 profils courts avec rôle
7) manifeste court : 3 principes de travail
8) devis en 24h : mini-formulaire 3 champs plus WhatsApp, pied de page signé

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Étude de cas : site de réservation pour un hôtel de Conakry, réservations directes en hausse de 40% en 3 mois
- Étude de cas : boutique en ligne de cosmétiques, 200 commandes le premier mois
- Site vitrine professionnel : de 8 000 000 à 15 000 000 GNF, 3 semaines
- Site avec réservation ou paiement : de 18 000 000 à 35 000 000 GNF, 6 semaines
- Identité de marque complète : logo, chartes, gabarits, à partir de 6 000 000 GNF
- Méthode : atelier de cadrage, maquette validée, développement, contenus et photos, lancement et formation

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- réalisation 1 : https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=900&q=80 avec alt="site d'hôtel affiché sur un écran élégant"
- réalisation 2 : https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=900&q=80 avec alt="produits cosmétiques d'une boutique en ligne"
- réalisation 3 : https://images.unsplash.com/photo-1556155092-490a1ba16284?w=900&q=80 avec alt="équipe de l'agence en séance de création"
- l'équipe : https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=900&q=80 avec alt="studio de travail créatif de l'agence"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond ivoire #F6F3EC, encre #141310, action orange brûlé #E4572E, bloc sombre #141310 pour les études de cas. Typographies Google Fonts : Space Grotesk (titres serrés) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Halo de couleur suivant la souris sur le hero (désactivé sur mobile). Cartes d'études de cas avec parallaxe légère. Défilement fluide.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000033 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme les pages de levée à la stripe.com/atlas et le ton direct de notion.so. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : page investisseurs de la startup Kossam, chaîne du froid et distribution de lait local en Guinée. Levée de fonds d'amorçage en cours. La page doit donner confiance à des investisseurs de la diaspora et des fonds régionaux : traction, équipe, marché, utilisation des fonds.

SECTIONS, dans cet ordre exact :
1) navigation discrète : logo, ancres Le problème, La solution, Traction, Marché, Équipe, Investir
2) hero sobre et sûr : titre "Le lait guinéen mérite sa chaîne du froid", une phrase de mission, bouton Recevoir le dossier investisseur
3) le problème en 3 chiffres qui font mal
4) la solution : 3 cartes (collecte réfrigérée, mini-laiteries, distribution en kiosques)
5) traction animée : litres collectés par mois, éleveurs partenaires, kiosques ouverts, croissance mensuelle
6) le marché en 2 chiffres sourcés
7) l'équipe : 3 fondateurs avec parcours en une ligne chacun
8) utilisation des fonds : barres claires (60% équipement froid, 25% kiosques, 15% équipe), bouton contact investisseurs, pied de page sobre

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Problème : 70% du lait local se perd faute de froid, la Guinée importe l'essentiel de sa poudre de lait, les éleveurs vendent à perte en saison de pointe
- Traction : 12 000 litres collectés par mois, 340 éleveurs partenaires à Labé et Mamou, 18 kiosques à Conakry, croissance de 22% par mois sur 6 mois
- Levée en cours : 250 000 dollars d'amorçage pour 3 camions réfrigérés et 30 nouveaux kiosques
- Équipe : une ingénieure agroalimentaire, un ancien directeur logistique, une responsable réseau d'éleveurs
- Contact investisseurs : dossier complet envoyé sous 48h après un premier échange

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1523348837708-15d4a09cfac2?w=1600&q=80 avec alt="élevage laitier en zone rurale guinéenne"
- solution collecte : https://images.unsplash.com/photo-1500937386664-56d1dfef3854?w=900&q=80 avec alt="collecte de lait auprès des éleveurs"
- solution distribution : https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&q=80 avec alt="kiosque de distribution de quartier"
- équipe : https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=900&q=80 avec alt="équipe fondatrice en discussion de travail"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #172236, action bleu nuit #1E3A8A, accent lait #F5F0E6 en fonds de section, réussite #15803D. Typographies Google Fonts : Inter partout, titres en graisse 800 interlettrage serré pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Compteurs de traction animés. Barres d'utilisation des fonds qui se remplissent. Aucune fioriture : la page respire la maîtrise.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000034 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme cloudflare.com et crowdstrike.com pour l'autorité technique. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site du cabinet SecuriGuinée, cybersécurité pour banques, télécoms et administrations : audits, tests d'intrusion, formation et réponse à incident. Cible : directions des systèmes d'information qui exigent des certifications et de la discrétion. Une adresse d'urgence incident doit être joignable en permanence.

SECTIONS, dans cet ordre exact :
1) navigation sombre : logo, ancres Services, Méthodologie, Certifications, Urgence incident, Contact
2) bandeau fin permanent : Incident en cours ? Ligne d'urgence 24h/7 avec numéro cliquable
3) hero : titre "Vos systèmes ont des failles. Nous les trouvons avant les autres.", bouton Demander un audit
4) services : 4 cartes (audit de sécurité, test d'intrusion, formation des équipes, réponse à incident) avec livrables
5) méthodologie : 5 phases avec standards cités (OWASP, ISO 27001)
6) certifications de l'équipe en badges texte sobres
7) cas anonymisés : 2 encadrés type banque de la place, fuite évitée
8) urgence : procédure en 3 étapes, engagement de prise d'appel en 15 minutes, contact chiffré disponible, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Audit de sécurité complet : cartographie, revue de configuration, rapport dirigeant et plan d'action priorisé
- Test d'intrusion externe et interne : exploitation contrôlée, preuve par capture, restitution technique et dirigeante
- Formation anti-hameçonnage : campagne de faux courriels mesurée, atelier de 3 heures, affiches internes
- Cas : une banque de la place, 14 vulnérabilités critiques corrigées avant leur exploitation
- Urgence : appel pris en 15 minutes, isolement guidé, intervention sur site à Conakry sous 4 heures

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero très assombri : https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=1600&q=80 avec alt="salle serveurs sous lumière bleutée"
- services : https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=900&q=80 avec alt="analyste en cybersécurité devant ses écrans"
- méthodologie : https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=900&q=80 avec alt="code et journaux d'audit à l'écran"
- cas : https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80 avec alt="salle de réunion confidentielle"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond noir bleuté #0A0E14, encre claire #E6EBF2, action vert terminal #22C55E, alerte #EF4444 réservée au bandeau urgence. Typographies Google Fonts : Space Grotesk (titres) et IBM Plex Mono en petites capitales pour les étiquettes, Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Effet de frappe terminal sur une ligne du hero. Le bandeau urgence reste fixe. Aucune donnée client nommée : la discrétion se voit.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000035 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme asos.com pour la grille produit et thefoldlondon.com pour l'allure. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : boutique en ligne Dressing 224, mode féminine et accessoires à Conakry. Commande par WhatsApp, livraison Conakry 24h et intérieur 72h, paiement à la livraison ou mobile money. Cible : femmes 18 à 40 ans qui achètent depuis Instagram.

SECTIONS, dans cet ordre exact :
1) navigation boutique : logo, ancres Nouveautés, Robes, Accessoires, Comment commander, Livraison, panier symbolique
2) hero : photo mode, titre "La nouvelle collection est arrivée", bouton Voir les nouveautés
3) grille produits : 8 cartes photo avec nom, prix GNF, badge Nouveau ou Promo, bouton Commander qui ouvre WhatsApp avec le produit pré-rempli
4) comment commander : 3 étapes illustrées (choisis, écris-nous, reçois)
5) livraison et retours : Conakry 24h, intérieur 72h, échange sous 48h si taille incorrecte
6) avis clientes avec photos : 3 cartes
7) Instagram : bande de 4 vignettes cliquables
8) paiement à la livraison mis en avant, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Robe wax Awa, coupe portefeuille, 450 000 GNF
- Ensemble deux pièces Bintou, 550 000 GNF
- Robe de soirée Mariama, satin, 750 000 GNF, badge Nouveau
- Sac à main tressé, 300 000 GNF
- Boucles créoles dorées, 150 000 GNF
- Foulard en soie imprimée, 200 000 GNF, badge Promo
- Livraison Conakry 30 000 GNF sous 24h, gratuite dès 800 000 GNF d'achat
- Avis : "Commandée lundi sur WhatsApp, portée mercredi au mariage", Oumou, Kipé

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1498049794561-7780e7231661?w=1600&q=80 avec alt="tenue de mode portée en extérieur urbain"
- produit 1 : https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=900&q=80 avec alt="robe colorée sur cintre élégant"
- produit 2 : https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=900&q=80 avec alt="ensemble en wax cousu main"
- produit 3 : https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=900&q=80 avec alt="accessoires de mode disposés à plat"
- avis : https://images.unsplash.com/photo-1588508065123-287b28e013da?w=900&q=80 avec alt="cliente rayonnante dans sa nouvelle tenue"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #1C1917, action framboise #C0264B, accent rose pâle #F7E8EC. Typographies Google Fonts : Jost (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre par catégorie sans rechargement. Second visuel au survol des produits. Badge Promo animé discrètement.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000036 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme typology.com, la référence épure, et fenty beauty pour la fierté. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : boutique en ligne Karité & Or, cosmétiques naturels fabriqués en Guinée : beurre de karité pur, savons noirs, huiles et baumes. Production artisanale de Kindia, vente à Conakry et expédition sous-régionale. Cible : femmes soucieuses de composition, diaspora.

SECTIONS, dans cet ordre exact :
1) navigation épurée : logo, ancres Produits, Nos engagements, Rituels, La fabrique, Avis, Commander
2) hero lumineux : photo produit nature, titre "La peau nourrie par la terre de Kindia", bouton Découvrir
3) produits : 6 cartes épurées avec composition en 3 mots, contenance, prix GNF
4) engagements : 4 icônes SVG inline (100% naturel, fabriqué en Guinée, testé sur nous, emballage réduit)
5) rituels : 2 routines guidées matin et soir utilisant les produits
6) la fabrique : histoire courte de l'atelier de Kindia avec 2 photos et les femmes qui produisent
7) avis : 3 clientes
8) commande WhatsApp et points de vente physiques, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Beurre de karité pur, pot 250 g, 120 000 GNF
- Savon noir au miel, 80 000 GNF
- Huile de baobab pressée à froid, flacon 100 ml, 180 000 GNF
- Baume réparateur mains et pieds, 100 000 GNF
- Lait corporel karité vanille, 150 000 GNF
- Coffret découverte 4 produits, 400 000 GNF
- Rituel du soir : démaquiller au savon noir, hydrater au beurre fouetté, sceller à l'huile de baobab
- L'atelier : 12 femmes de Kindia transforment le karité selon le geste transmis, chaque pot est numéroté

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=1600&q=80 avec alt="cosmétiques naturels posés sur fond minéral"
- produit karité : https://images.unsplash.com/photo-1571781926291-c477ebfd024b?w=900&q=80 avec alt="pot de beurre de karité artisanal"
- produit huile : https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?w=900&q=80 avec alt="flacon d'huile végétale doré"
- la fabrique : https://images.unsplash.com/photo-1592982537447-7440770cbfc9?w=900&q=80 avec alt="productrice au travail à l'atelier"
- rituels : https://images.unsplash.com/photo-1562322140-8baeececf3df?w=900&q=80 avec alt="application du soin sur la peau"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond coquille #FAF6F0, encre #2A231C, action bronze #A67B44, accent feuille #6B8F5E. Typographies Google Fonts : Fraunces (titres) et Karla (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Apparitions très douces. Au survol d'un produit, sa composition complète glisse sur la carte.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000037 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme backmarket.fr pour la confiance et boulanger.com pour la clarté produit. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : boutique Électro Madina, téléphones, ordinateurs et accessoires, neufs et occasion certifiée, marché Madina, Conakry. Garantie écrite 6 mois même sur l'occasion : c'est l'arme anti-arnaque du marché. Cible : étudiants et jeunes actifs échaudés par les mauvaises surprises.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Téléphones, Ordinateurs, Occasion certifiée, Garantie, Avis, Contact
2) hero : titre "Du matériel testé, garanti par écrit, au prix de Madina", bouton Voir les téléphones
3) bandeau confiance : Garantie 6 mois écrite, 21 points de contrôle, reprise possible
4) téléphones : 6 cartes avec état (neuf ou certifié), stockage, batterie testée, prix GNF
5) ordinateurs : 4 cartes même format
6) l'occasion certifiée : les 21 points de contrôle expliqués en accordéon par famille
7) garantie : ce qu'elle couvre, ce qu'elle exclut, comment la faire jouer en 3 étapes
8) avis : 3 clients, adresse précise dans le marché avec repère, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- iPhone 13 128 Go, occasion certifiée, batterie 89%, 4 500 000 GNF, garantie 6 mois
- Samsung Galaxy A25 neuf scellé, 2 200 000 GNF
- Tecno Spark 20, neuf, 1 100 000 GNF
- MacBook Air M1, occasion certifiée, cycle batterie 180, 8 500 000 GNF
- HP EliteBook i5, occasion certifiée, 4 200 000 GNF
- Garantie : panne matérielle couverte 6 mois, écran cassé exclu, échange sous 72h si défaut la première semaine
- Avis : "Mon iPhone certifié tourne depuis 8 mois sans un souci, papier de garantie en poche", Sékou, étudiant

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1607936854279-55e8a4c64888?w=1600&q=80 avec alt="comptoir de la boutique avec appareils exposés"
- téléphones : https://images.unsplash.com/photo-1542838132-92c53300491e?w=900&q=80 avec alt="smartphones alignés en présentation"
- ordinateurs : https://images.unsplash.com/photo-1518770660439-4636190af475?w=900&q=80 avec alt="ordinateur portable ouvert prêt à l'emploi"
- occasion certifiée : https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=900&q=80 avec alt="technicien testant un appareil au banc"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond gris tech #F5F6F8, encre #131A24, action bleu franc #1D6FE8, badge garantie #14803D. Typographies Google Fonts : Archivo (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre neuf / occasion. Chaque carte montre sa jauge de batterie testée. Accordéon des 21 points.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000038 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme la clarté de frichti.co et l'appétit de deliveroo.fr. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : service Tata Cuisine, plats faits maison livrés à Conakry : menu de la semaine, plats du jour et formules bureau pour entreprises. Commande la veille avant 20h. Cible : employés de bureau de Kaloum et Almamya, familles pressées le week-end.

SECTIONS, dans cet ordre exact :
1) navigation appétissante : logo, ancres Menu de la semaine, Formules bureau, Comment ça marche, Zones, Avis
2) hero : photo plat généreux, titre "Le goût de la maison, livré au bureau", bouton Voir le menu de la semaine
3) menu de la semaine : 5 jours en onglets, chaque jour 2 plats au choix avec photo et prix
4) formules bureau : 3 cartes (5, 10, 20 repas par semaine) avec prix par repas dégressif et facture entreprise
5) comment ça marche : 3 étapes avec heure limite de commande mise en avant
6) zones et créneaux de livraison en tableau simple
7) avis : 3 clients dont une entreprise
8) engagement fraîcheur : cuisiné le matin même, livré en glacière, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Lundi : riz gras poulet 65 000 GNF ou salade composée poulet grillé 55 000 GNF
- Mardi : sauce feuille bœuf et riz 60 000 GNF ou poisson yassa 70 000 GNF
- Mercredi : mafé tiga 60 000 GNF ou attiéké poisson braisé 75 000 GNF
- Formule bureau 10 repas : 55 000 GNF le repas, livraison incluse, facture mensuelle
- Commande : choisis avant 20h la veille, confirme sur WhatsApp, reçois entre 12h et 13h
- Avis entreprise : "Nos 12 collaborateurs mangent maison tous les midis, budget maîtrisé", cabinet d'expertise, Kaloum

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1600&q=80 avec alt="plat maison appétissant prêt à livrer"
- menu jour 1 : https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=900&q=80 avec alt="assiette de riz garnie vue de dessus"
- menu jour 2 : https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=900&q=80 avec alt="poisson accompagné joliment dressé"
- formules bureau : https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=900&q=80 avec alt="équipe déjeunant ensemble au bureau"
- fraîcheur : https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=900&q=80 avec alt="produits frais du marché au matin"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond crème #FFF9F0, encre #27211A, action paprika #D2542C, accent basilic #4E7A3A. Typographies Google Fonts : Fraunces (titres) et Nunito Sans (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Onglets des jours de la semaine, le jour actuel ouvert par défaut (calculé en JS). Compte à rebours avant l'heure limite de commande.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000039 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme gumroad.com et les pages produits de ali abdaal pour la vente de numérique. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : boutique de produits numériques de Mariama Digital, Conakry : modèles de CV, pack de prompts IA, guides PDF business et mini-formations vidéo. Livraison automatique par lien après paiement mobile money. Cible : jeunes actifs francophones d'Afrique de l'Ouest.

SECTIONS, dans cet ordre exact :
1) navigation simple : logo, ancres Produits, Comment recevoir, Avis, Qui suis-je, Contact
2) hero : titre "Des outils qui te font gagner des semaines, au prix d'un déjeuner", preuve sociale chiffrée, bouton Voir les produits
3) produits : 6 cartes avec visuel maquette CSS, ce que contient le produit en 3 points, prix GNF, bouton Obtenir
4) comment recevoir : 3 étapes (paie par mobile money, envoie la capture sur WhatsApp, reçois ton lien en 5 minutes)
5) garantie simple : remboursé sous 48h si le produit ne correspond pas à sa description
6) avis : 4 acheteurs avec métier
7) qui suis-je : parcours court avec photo et chiffres
8) questions en accordéon, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Pack 100 prompts IA pour entrepreneurs, PDF plus fichier copiable, 75 000 GNF
- Modèles de CV professionnels, 10 gabarits Word et Canva, 50 000 GNF
- Guide : lancer son business WhatsApp en 30 jours, 120 pages, 100 000 GNF
- Mini-formation vidéo : créer son site avec l'IA en un week-end, 2 heures, 250 000 GNF
- Avis : "Le pack CV m'a décroché deux entretiens en une semaine", Ibrahima, logisticien
- Déjà 1 400 clients servis en Guinée, au Sénégal et en Côte d'Ivoire

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1560250097-0b93528c311a?w=1600&q=80 avec alt="espace de travail créatif avec ordinateur"
- comment recevoir : https://images.unsplash.com/photo-1563986768609-322da13575f3?w=900&q=80 avec alt="réception d'un lien sur téléphone"
- qui suis-je : https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=900&q=80 avec alt="créatrice numérique à son bureau"
- avis : https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=900&q=80 avec alt="client satisfait consultant son achat"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond ivoire #FBF8F2, encre #1F1B16, action violet #6D28D9, accent citron #EAB308. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Les cartes produits basculent légèrement en 3D au survol. Compteur de clients animé. Accordéon des questions.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000040 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme onefinestay.com et les pages sobres de aman.com, le luxe est le silence. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'Hôtel Baie de Camayenne, front de mer, Conakry. 45 chambres, restaurant, piscine, salles de réunion. Réservation directe par WhatsApp pour éviter les commissions des plateformes. Cible : voyageurs d'affaires en semaine, familles le week-end.

SECTIONS, dans cet ordre exact :
1) navigation transparente puis blanche : logo, ancres Chambres, Restaurant, Piscine & détente, Réunions, Accès, bouton Réserver
2) hero plein écran : photo vue mer, titre "Face à l'océan, loin du bruit", bouton Vérifier les disponibilités
3) chambres : 3 catégories en grandes cartes photo avec surface, équipements en icônes, prix par nuit GNF, bouton Réserver cette chambre
4) restaurant : ambiance, spécialités, horaires, photo pleine largeur
5) piscine et détente : 2 photos et texte court
6) réunions et séminaires : capacité des 2 salles, équipements, formule journée
7) avis voyageurs : 3 cartes avec origine
8) accès depuis l'aéroport avec durée, contact, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Chambre Classique vue jardin, 28 m2, 950 000 GNF la nuit, petit déjeuner inclus
- Chambre Supérieure vue mer, 32 m2, 1 400 000 GNF la nuit
- Suite Baie, 55 m2, salon séparé, 2 500 000 GNF la nuit
- Restaurant : poisson du jour de la criée de Boulbinet, ouvert 6h30 à 23h
- Salle Atlantique : 80 personnes en théâtre, écran, sonorisation, formule journée 4 500 000 GNF
- Avis : "Réveillée par l'océan, servie comme une reine", Mme Touré, Abidjan

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=1600&q=80 avec alt="piscine de l'hôtel face à l'océan au crépuscule"
- chambre classique : https://images.unsplash.com/photo-1566073771259-6a8506099945?w=900&q=80 avec alt="chambre d'hôtel lumineuse et soignée"
- chambre supérieure : https://images.unsplash.com/photo-1584132967334-10e028bd69f7?w=900&q=80 avec alt="lit majestueux face à la fenêtre"
- suite : https://images.unsplash.com/photo-1590490360182-c33d57733427?w=900&q=80 avec alt="suite spacieuse au design épuré"
- restaurant : https://images.unsplash.com/photo-1512918728675-ed5a9ecdebfd?w=900&q=80 avec alt="table du restaurant dressée avec soin"
- détente : https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=900&q=80 avec alt="transat au bord de la piscine"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc cassé #FBFAF7, encre #1C2733, action bleu océan #14547A, accent sable #CBB48A. Typographies Google Fonts : Cormorant Garamond (titres) et Inter (texte espacé) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Le bouton Réserver ouvre WhatsApp avec dates et catégorie pré-remplies. Galerie discrète par catégorie de chambre au clic.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000041 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme evaneos.fr pour l'organisation et voyageurs du monde pour le rêve maîtrisé. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'agence Sila Voyages, Conakry. Billets d'avion, pèlerinage Hajj et Omra, séjours organisés en Afrique de l'Ouest et assistance visa. Cible : familles pour les billets, pèlerins pour le Hajj, jeunes couples pour les séjours.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Billets, Hajj & Omra, Séjours, Visas, Pourquoi nous, Contact
2) hero : photo évasion, titre "Partir l'esprit tranquille, revenir avec des souvenirs", 3 boutons directs vers Billets, Hajj, Séjours
3) billets d'avion : compagnies partenaires, engagement meilleur prix sous 2h par WhatsApp, 3 destinations phares avec fourchette de prix
4) Hajj & Omra : bloc dédié respectueux avec formules, encadrement religieux, acomptes échelonnés
5) séjours organisés : 3 cartes (Dakar, Abidjan, Banjul) avec durée, inclus, prix par personne
6) visas : pays traités, délais, pièces en accordéon
7) pourquoi nous : agréments IATA, 12 ans, 2 agences physiques
8) avis : 3 voyageurs, contact et pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Conakry Dakar aller-retour à partir de 2 800 000 GNF
- Conakry Paris aller-retour à partir de 9 500 000 GNF
- Omra formule 15 jours : vol, hôtel à 400 m du Haram, encadrement francophone, 55 000 000 GNF
- Hajj 2027 : inscriptions ouvertes, acompte 20 000 000 GNF, paiement en 6 fois
- Séjour Dakar 5 jours : vol, hôtel 4 étoiles, île de Gorée et Lac Rose, 12 500 000 GNF par personne
- Visa France : dossier complet préparé et rendez-vous pris, 1 500 000 GNF hors frais consulaires

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1540541338287-41700207dee6?w=1600&q=80 avec alt="avion au-dessus des nuages au couchant"
- billets : https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80 avec alt="préparatifs de voyage et passeport"
- séjour Dakar : https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=900&q=80 avec alt="plage et pirogues sous le soleil"
- séjours : https://images.unsplash.com/photo-1571003123894-1f0594d2b5d9?w=900&q=80 avec alt="voyageuse heureuse en découverte"
- agence : https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&q=80 avec alt="conseillère de l'agence avec des clients"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #14263D, action bleu horizon #1668C7, accent safran #E9A319. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Les 3 boutons du hero défilent en douceur vers leurs sections. Accordéon des visas par pays.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000042 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme chateauform.com, le modèle des lieux événementiels, et une salle de mariage premium. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la salle Espace Nimba Réceptions, Lambanyi, Conakry. Mariages jusqu'à 500 invités, conférences, anniversaires. Parking 150 places, groupe électrogène, traiteurs partenaires. Cible : futurs mariés et entreprises, qui réservent 2 à 6 mois à l'avance.

SECTIONS, dans cet ordre exact :
1) navigation élégante : nom, ancres La salle, Capacités, Formules, Galerie, Disponibilités, Contact
2) hero : photo salle dressée, titre "Le lieu que vos invités n'oublieront pas", bouton Vérifier ma date
3) la salle en chiffres : 500 invités assis, 800 m2, parking 150 places, groupe électrogène total
4) capacités par configuration : banquet, théâtre, cocktail en 3 cartes chiffrées
5) formules : 3 offres (salle seule, salle plus décoration, clé en main avec traiteur) avec prix GNF
6) galerie : 6 photos en mosaïque d'événements réels
7) équipements inclus et options en 2 colonnes
8) vérifier ma date : bouton WhatsApp avec date pré-remplie, réponse en 2h, avis de 2 clients, accès, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Salle seule journée : 8 000 000 GNF, tables, chaises, sonorisation de base et groupe électrogène inclus
- Salle plus décoration thème au choix : 15 000 000 GNF
- Clé en main 300 invités : salle, décoration, traiteur partenaire, service, 45 000 000 GNF
- Configuration banquet : 500 assis, théâtre : 650, cocktail : 800
- Avis : "Coupure de courant en pleine ville, notre mariage ne s'en est même pas aperçu", famille Barry
- Acompte 30% à la réservation, solde une semaine avant l'événement

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=1600&q=80 avec alt="salle de réception dressée pour un gala"
- galerie 1 : https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=900&q=80 avec alt="cérémonie de mariage sous les lumières"
- galerie 2 : https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=900&q=80 avec alt="table d'honneur fleurie"
- galerie 3 : https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=900&q=80 avec alt="piste de danse animée le soir"
- galerie 4 : https://images.unsplash.com/photo-1475721027785-f74eccf877e2?w=900&q=80 avec alt="décoration raffinée des tables"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond champagne #FAF5EE, encre #241E16, action or profond #A8842C, accent bordeaux #6E1F2E. Typographies Google Fonts : Cormorant Garamond (titres) et Jost (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Galerie lightbox. Les cartes capacités permutent la photo de fond au survol. Compteur des dates restantes du mois en cours.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000043 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme websummit.com et les pages sobres de vivatechnology.com. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de la conférence Guinée Business Forum, 2 jours au Palais du Peuple, Conakry. 40 intervenants, 1 200 participants, thème investir et entreprendre en Guinée. Billets par mobile money, sponsors à convaincre. Cible : entrepreneurs, cadres, investisseurs régionaux.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Programme, Intervenants, Billets, Sponsors, Lieu, badge dates
2) hero : titre du forum, dates énormes, compte à rebours, lieu, deux boutons : Prendre mon billet et Devenir sponsor
3) chiffres animés : 1 200 participants, 40 intervenants, 25 sessions, 2 jours
4) programme : 2 onglets jour 1 et jour 2, sessions avec heure, salle et intervenant
5) intervenants : 8 cartes photo avec fonction et entreprise
6) billets : 3 catégories avec avantages et prix GNF, achat mobile money en 3 étapes
7) sponsors : 3 niveaux de visibilité avec ce que chaque niveau donne, logos édition précédente
8) lieu et accès, questions en accordéon, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Pass Standard : accès aux 2 jours et pauses café, 500 000 GNF
- Pass Business : plus déjeuners networking et actes du forum, 1 200 000 GNF
- Pass VIP : plus dîner de gala et accès salon intervenants, 2 500 000 GNF
- Session phare : Financer sa croissance en Guinée, avec un panel banques et fonds régionaux, jour 1 à 10h
- Sponsor Or : stand premium, logo sur scène, prise de parole en plénière, 4 places VIP
- Achat : montant par Orange Money au numéro dédié, code billet reçu par WhatsApp, badge retiré sur place

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?w=1600&q=80 avec alt="salle de conférence comble en plénière"
- programme : https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=900&q=80 avec alt="panel d'intervenants sur scène"
- intervenants : https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&q=80 avec alt="intervenante au micro en présentation"
- sponsors : https://images.unsplash.com/photo-1519741497674-611481863552?w=900&q=80 avec alt="espace networking entre participants"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #0F1E3D, action bleu forum #1A4FBF, accent énergie #F2620F. Typographies Google Fonts : Archivo (titres très gras) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Compte à rebours en temps réel. Onglets du programme. Les cartes intervenants révèlent leur sujet au survol.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000044 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme sixt.fr pour l'efficacité et getaround.com pour la simplicité. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : site de l'agence Kaloum Location Auto, Conakry. Berlines, 4x4 et minibus, avec ou sans chauffeur, courte et longue durée. Aéroport possible 24h/24. Cible : entreprises et ONG pour la longue durée, particuliers pour cérémonies et voyages à l'intérieur.

SECTIONS, dans cet ordre exact :
1) navigation : logo, ancres Véhicules, Tarifs, Avec chauffeur, Longue durée, Conditions, Réserver
2) hero : photo 4x4, titre "La bonne voiture, au bon prix, à l'heure dite", bouton Réserver un véhicule
3) véhicules : 6 cartes avec catégorie, places, climatisation, prix par jour GNF, badge Avec chauffeur possible
4) avec chauffeur : forfaits ville et intérieur du pays avec carburant précisé
5) longue durée entreprises : remises par palier et facturation mensuelle
6) conditions claires : caution, pièces, carburant, état des lieux photo
7) zones desservies dont récupération aéroport 24h/24
8) avis : 3 clients dont une ONG, réservation WhatsApp avec dates pré-remplies, pied de page

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Berline climatisée type Corolla : 800 000 GNF par jour sans chauffeur
- 4x4 Prado : 1 800 000 GNF par jour, chauffeur inclus hors carburant
- Minibus 15 places : 1 500 000 GNF par jour avec chauffeur
- Forfait aéroport : accueil pancarte, 400 000 GNF la course
- Longue durée : moins 15% dès 7 jours, moins 30% au mois, facture entreprise
- Caution berline 5 000 000 GNF restituée à l'état des lieux, permis plus pièce d'identité

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero : https://images.unsplash.com/photo-1502877338535-766e1452684a?w=1600&q=80 avec alt="4x4 robuste prêt pour la route"
- véhicule berline : https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?w=900&q=80 avec alt="berline propre en présentation"
- véhicule 4x4 : https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=900&q=80 avec alt="véhicule tout-terrain en extérieur"
- avec chauffeur : https://images.unsplash.com/photo-1580489944761-15a19d654956?w=900&q=80 avec alt="chauffeur professionnel ouvrant la portière"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond gris clair #F4F5F7, encre #161B26, action orange sécurité #E0731D, accent anthracite #2A3140. Typographies Google Fonts : Archivo (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Filtre par catégorie de véhicule. Interrupteur avec ou sans chauffeur qui ajuste l'affichage des prix.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000045 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme read.cv, la référence du CV en ligne sobre, et les pages perso des designers. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : CV en ligne de Mohamed Lamine Camara, contrôleur de gestion, Conakry. 8 ans d'expérience banque et industrie. Objectif : être trouvé et contacté par les recruteurs, remplacer le PDF perdu dans les boîtes mail. Une seule page, imprimable proprement.

SECTIONS, dans cet ordre exact :
1) en-tête : nom en grand, titre du poste, localisation, boutons Télécharger le PDF, WhatsApp et LinkedIn
2) résumé de profil : 3 lignes denses qui disent la valeur, pas les banalités
3) expériences : 3 postes en chronologie inversée, chacun avec 3 réalisations chiffrées
4) compétences : 2 colonnes, techniques et humaines, sans barres de progression gadget
5) formation et certifications en liste sobre
6) langues et outils
7) recommandation : 1 citation d'un ancien manager
8) pied de page avec les mêmes boutons de contact

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Contrôleur de gestion senior, Banque Atlantique Guinée, depuis 2022 : reporting mensuel ramené de 12 à 5 jours, tableau de bord adopté par 3 directions, économies identifiées de 1,2 milliard GNF sur les frais généraux
- Contrôleur de gestion, cimenterie, 2019 à 2022 : coûts de revient par ligne mis en place, écarts mensuels réduits de 18%
- Auditeur junior, cabinet, 2017 à 2019 : 40 missions dont 12 en banque
- Compétences : consolidation, budget, SAP et Sage, Power BI, Excel avancé ; rigueur, restitution claire aux dirigeants
- Recommandation : "Le seul contrôleur dont les dirigeants lisent les rapports jusqu'au bout", directeur financier, Banque Atlantique

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- portrait en-tête, format rond ou carré arrondi : https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=900&q=80 avec alt="portrait professionnel de Mohamed Lamine Camara"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #1A2332, action bleu recruteur #2457C5, filets #E3E7EE. Typographies Google Fonts : Inter partout, hiérarchie par graisse et taille uniquement pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Bouton Télécharger le PDF déclenche l'impression avec une feuille de style print parfaite sur une page A4. Ancres discrètes.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000046 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme les portfolios sur cargo.site et le minimalisme de daniellevitt.com. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : portfolio de Aïcha Design, graphiste et directrice artistique indépendante, Conakry. Identités de marque, affiches, réseaux sociaux. Objectif : décrocher des missions d'entreprises et d'ONG. Le site est sa première pièce de portfolio.

SECTIONS, dans cet ordre exact :
1) navigation minimale : prénom, ancres Projets, Services, À propos, Contact
2) hero typographique : très grande phrase "Je donne un visage aux marques qui comptent", pas de photo, la typographie est le décor
3) projets : 6 études de cas en grille, photo, client, mission en une ligne ; 2 cartes s'ouvrent en détail avec contexte, proposition, résultat
4) services : 3 offres avec livrables et fourchette GNF
5) à propos : portrait, parcours en 5 lignes, outils, valeurs de travail
6) logos clients en texte
7) processus en 4 étapes courtes
8) contact grand format : phrase d'invitation et boutons WhatsApp et mail, pied de page signé

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Étude de cas : identité complète d'une marque de jus local, ventes en hausse de 25% après le rebranding
- Étude de cas : campagne d'affichage d'une ONG d'éducation, 3 millions de vues estimées à Conakry
- Identité de marque : logo, couleurs, typographies, gabarits, de 4 000 000 à 8 000 000 GNF
- Pack réseaux sociaux mensuel : 12 visuels et couvertures, 1 500 000 GNF
- Affiche ou flyer événement : à partir de 800 000 GNF
- Processus : brief écoute, 2 pistes créatives, allers-retours cadrés, livraison de tous les fichiers sources

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- projet 1 : https://images.unsplash.com/photo-1561214115-f2f134cc4912?w=900&q=80 avec alt="identité visuelle déployée sur supports"
- projet 2 : https://images.unsplash.com/photo-1547826039-bfc35e0f1ea8?w=900&q=80 avec alt="affiches créatives en situation"
- projet 3 : https://images.unsplash.com/photo-1556155092-490a1ba16284?w=900&q=80 avec alt="déclinaisons digitales d'une marque"
- portrait : https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=900&q=80 avec alt="portrait de la graphiste en studio"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond papier #F7F5F0, encre #191713, action unique #FF4D2E, aucun autre accent : la retenue est la signature. Typographies Google Fonts : Space Grotesk (titres immenses) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Le titre du hero s'assemble mot par mot au chargement. Les études de cas s'ouvrent en accordéon large. Curseur point discret sur ordinateur.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000047 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme linktr.ee amélioré : la référence beacons.ai pour les créateurs. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : page de liens de DJ Sory Officiel, artiste et animateur, Conakry. Une seule colonne mobile : tous ses réseaux, ses dernières vidéos, ses dates et le booking WhatsApp. La page doit charger vite et se partager partout, surtout en bio Instagram et TikTok.

SECTIONS, dans cet ordre exact :
1) photo de profil ronde, nom avec badge vérifié stylisé, phrase d'accroche courte
2) 3 liens principaux en gros boutons : Booking WhatsApp, Dernière vidéo YouTube, Nouveau single
3) grille des réseaux : 6 boutons icônes SVG inline (TikTok, Instagram, YouTube, Facebook, Snapchat, Audiomack) avec pseudo
4) prochaines dates : 3 événements en liste (date, lieu, ville, badge Complet sur un)
5) bloc booking : types de prestations et bouton WhatsApp avec message pré-rempli
6) pied de page minuscule avec crédit

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Accroche : Animateur de vos plus belles nuits, de Conakry à Dakar
- Booking mariage ou soirée privée : à partir de 5 000 000 GNF la prestation
- Date : samedi prochain, Palm Camayenne, Conakry, badge Complet
- Date : fin du mois, festival Kindia Vibes, Kindia
- Nouveau single : Wontanara Night, disponible sur toutes les plateformes

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- photo de profil : https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=900&q=80 avec alt="portrait scénique du DJ en lumière"
- arrière-plan flouté sombre de la page : https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=1600&q=80 avec alt="ambiance de scène nocturne"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond dégradé nuit #12081F vers #1F0F35, encre claire #F5F0FF, action violet néon #A855F7, accent or #F5C518. Typographies Google Fonts : Sora (nom et boutons) et Inter (détails) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Boutons avec léger brillant animé au survol. Toute la page tient en une colonne de 480px maximum, centrée, parfaite en bio.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000048 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme les landing pages de référence sur lapa.ninja : une promesse, une preuve, un bouton. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : landing page de lancement pour Kliman, application de suivi des dépenses familiales par SMS, avant son lancement en Guinée. Objectif unique : collecter des inscriptions à la liste d'attente par WhatsApp. Une page, une seule action possible.

SECTIONS, dans cet ordre exact :
1) navigation réduite au logo seul
2) hero : titre "Sache où part ton argent, sans changer de téléphone", sous-titre une ligne sur le SMS, champ visuel de numéro et bouton Rejoindre la liste d'attente, compteur d'inscrits
3) 3 bénéfices en cartes courtes : fonctionne par SMS sans internet, résumé chaque dimanche, alertes de dépassement
4) comment ça marche en 3 étapes illustrées d'icônes SVG inline
5) preuve sociale : 2 phrases de testeurs de la version pilote
6) seconde répétition du bouton avec urgence douce : les 500 premiers inscrits auront 3 mois offerts
7) pied de page minimal

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Bénéfice : chaque dépense envoyée par SMS au 622 00, catégorisée automatiquement
- Bénéfice : le dimanche soir, ton résumé de la semaine arrive par SMS, poste par poste
- Testeur : "J'ai découvert que le crédit téléphonique me coûtait plus que le transport", Fanta, pilote à Ratoma
- Testeur : "Ma femme et moi voyons enfin les mêmes chiffres", couple pilote à Matoto
- Liste d'attente : envoie START sur WhatsApp, tu recevras ton accès au lancement, 500 premiers : 3 mois offerts

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- hero côté droit ou arrière-plan léger : https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1600&q=80 avec alt="personne consultant ses SMS sereinement"
- preuve sociale : https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=900&q=80 avec alt="famille discutant de son budget ensemble"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond blanc #FFFFFF, encre #14201C, action vert billet #0F9D58, accent menthe #E6F4EE. Typographies Google Fonts : Sora (titres) et Inter (texte) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). Compteur d'inscrits qui s'incrémente doucement. Le bouton principal est répété 3 fois maximum, jamais plus. Aucune navigation qui distrait.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000049 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.

RÔLE : tu es à la fois développeur front-end senior et directeur artistique. Tu livres des pages complètes, prêtes pour un vrai client qui paie. Ton niveau de référence : les sites que produisent les meilleures agences, pas les modèles gratuits.

RÉFÉRENCES : avant d'écrire, pense à la structure et au niveau de finition de sites comme les cartes de visite numériques de popl.co et le minimalisme d'une carte papier réussie. Ne copie rien : retiens leur hiérarchie visuelle, leurs espacements généreux et leur direction artistique cohérente, et applique ce niveau d'exigence au projet ci-dessous.

PROJET : carte de visite numérique de Fatoumata Binta Diallo, notaire à Conakry. Remplace la carte papier : partagée par lien WhatsApp ou QR code imprimé au dos de la vraie carte. Une seule petite page élégante, chargement instantané.

SECTIONS, dans cet ordre exact :
1) carte centrée verticalement à l'écran, format carte réelle aux coins arrondis avec ombre douce
2) recto : photo ronde, nom, fonction Notaire, étude et quartier
3) boutons d'action en icônes : appeler, WhatsApp, mail, itinéraire, enregistrer le contact
4) verso au retournement : horaires de l'étude, services en 4 lignes, adresse complète
5) bouton Partager cette carte qui copie le lien
6) mention discrète sous la carte

CONTENUS RÉDIGÉS, à utiliser tels quels (adapte librement le reste) :
- Maître Fatoumata Binta Diallo, notaire, étude sise à Kaloum, avenue de la République
- Services : ventes immobilières, successions, contrats de mariage, authentifications
- Horaires : lundi à vendredi 8h30 à 16h30, samedi sur rendez-vous
- Enregistrer le contact télécharge une vraie fiche vCard .vcf générée en JS
- Partager copie le lien avec confirmation Lien copié

IMAGES, uniquement celles-ci, aux emplacements indiqués :
- photo de profil : https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=900&q=80 avec alt="portrait professionnel de la notaire"
Toutes les images : object-fit:cover, loading="lazy" sauf celle du hero. Sur le hero, pose un voile dégradé sombre (haut transparent vers bas rgba(0,0,0,.55)) pour que le titre reste lisible.

DESIGN : palette exacte fond gris perle #EEF0F3 en pleine page, carte blanche #FFFFFF, encre #1B2431, action bleu notarial #1E4FA3, filet or #C6A55C. Typographies Google Fonts : Cormorant Garamond (nom) et Inter (le reste) pour les titres, avec une échelle stricte (h1 clamp(2.2rem,6vw,3.6rem), h2 clamp(1.6rem,4vw,2.4rem), texte 17px/1.65). Sections aérées : padding vertical 96px sur ordinateur, 64px sur mobile. Largeur max du contenu 1160px. Rayons d'arrondi cohérents (18px cartes, 12px boutons), une seule couleur d'action utilisée pour tous les boutons principaux. Ombres douces et rares. Aucun tiret long dans les textes.

INTERACTIONS : navigation collante qui se teinte au défilement, apparitions douces au scroll (IntersectionObserver, translateY 24px + opacité, 0.6s), états de survol nets sur cartes et boutons (élévation + translation 3px). La carte se retourne en 3D au clic sur Retourner (transform rotateY). vCard générée et téléchargée en JS pur. Partager utilise l'API Web Share avec repli copie.

TECHNIQUE : mobile d'abord, pensé pour un téléphone Android en 3G à Conakry. Un bouton WhatsApp flottant en bas à droite ouvre https://wa.me/224622000050 avec un message pré-rempli. Numéros de téléphone cliquables (tel:). Prix en GNF avec séparateur d'espace. Balises meta title et description, Open Graph, favicon emoji en data-URI. HTML sémantique, contraste AA minimum, attributs alt partout.

SORTIE : un seul fichier index.html complet et autonome, CSS dans <style> et JS dans <script>, aucune dépendance extérieure sauf Google Fonts et les images listées. Aucun texte de remplissage, aucun lorem ipsum : chaque phrase doit pouvoir être lue par un vrai client. Réponds uniquement avec le code.

ACCEPTATION, vérifie avant de répondre : parfait à 375px de large sans défilement horizontal ; toutes les images chargent ; le bouton WhatsApp fonctionne ; les ancres de navigation défilent en douceur ; aucun placeholder restant ; la page donne envie de payer son auteur.