Page d'Attente — Landing Minimaliste pour Pré-lancement

Compétence Page d'Attente

Les pages de pré-lancement sont votre première poignée de main avec vos futurs utilisateurs. Cette compétence construit une entrée ciblée et honnête : votre identité de marque, ce que vous créez, un chemin clair pour rejoindre la liste des premiers inscrits. Pas de rareté artificielle, pas de faux compteur, pas de tactiques d'inflation — juste un vaisseau propre, mobile-first, pour un intérêt authentique.

Flux de travail

Pré-vol : Charger le modèle renforcé et les fondations de la marque

0. Charger l'identité de la marque — Lire DESIGN.md pour le système de couleurs, l'appairage de polices et les règles spatiales. C'est votre fondation. Une page d'attente vit ou meurt par la cohérence avec la marque qu'elle représente. Si DESIGN.md est manquant, demandez à l'utilisateur de fournir un avant de continuer.
1. Lire et copier le modèle réutilisable — Lire assets/template.html. Ce modèle est la graine renforcée pour toutes les sorties. Copiez-le dans index.html comme base. N'écrivez pas de HTML à partir de zéro et ne vous écartez pas de cette structure. Le modèle contient toute la mise en page requise, la structure du formulaire, les décorations, les styles de focus et l'échafaudage d'accessibilité intégrés.

Étapes : Remplacement des jetons avec validation et échappement

2. Mapper les jetons à partir des entrées — Pour chaque espace réservé dans le modèle (par exemple {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), suivez les règles de remplacement ci-dessous :
   • Jetons de texte ({{PRODUCT_NAME}}, {{TAGLINE}}) : Échapper HTML <, >, &, ", ' avant insertion dans les nœuds de texte HTML ou les valeurs d'attribut.
   • Jetons HTML ({{LOGO_MARK}}) : Si vous utilisez des initiales textuelles, échappez-les par défaut en HTML. Si vous utilisez un SVG en ligne, vous devez le nettoyer strictement en utilisant une liste d'autorisation : supprimez les balises <script>, les gestionnaires d'événements (on*), <foreignObject>, les références externes (href, xlink:href, url()) et tout attribut/élément interdit avant l'insertion. Si le SVG ne peut pas être nettoyé en toute sécurité, revenez aux initiales textuelles échappées. N'émettez jamais de HTML arbitraire brut et non nettoyé. Assurez-vous que tout SVG se redimensionne proprement dans son conteneur.
   • Jetons d'expression de couleur ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, {{DECO_EXPRESSION}}, {{STRIPE_EXPRESSION}}, {{SUCCESS_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{BTN_LABEL_EXPRESSION}}, {{TICKER_BG_EXPRESSION}}, {{TICKER_FG_EXPRESSION}}, {{DECO_STROKE_EXPRESSION}}, {{LOGO_SHADOW_EXPRESSION}}, {{LOGO_FG_EXPRESSION}}) : Doivent strictement adhérer à une grammaire de couleur explicite (#hex, rgb/rgba, hsl/hsla, oklch, ou color-mix() utilisant uniquement des variables locales). Rejeter fermement toute entrée contenant ;, {}, <, >, des commentaires (/*), @, url(, ou des références externes pour empêcher l'injection CSS. Ne pas envelopper dans # ou ajouter de guillemets supplémentaires. Exemples : rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. Insérer tel quel dans les variables CSS :root. Dérivez --success de DESIGN.md si présent ; sinon utilisez uniquement la valeur de repli autorisée #2D6A4F.
   • Jetons de nom de police ({{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}) : Ce sont des valeurs de police de caractères CSS, déjà entre guillemets si elles contiennent des espaces (par exemple 'DM Sans', Syne). Insérez-les tels quels dans les déclarations --font-display et --font-body ; n'ajoutez PAS de guillemets supplémentaires.
   • Jetons d'URL de police ({{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}) : Les espaces doivent être encodés en + pour l'URL Google Fonts (par exemple DM+Sans, IBM+Plex+Serif). Validez que l'URL est bien formée avant l'insertion.
3. Vérifier les règles de mappage des jetons — Tous les jetons de couleur sont maintenant dans des variables CSS :
   • --bg = {{BG_EXPRESSION}} (par exemple #FDE8DF)
   • --fg = {{FG_EXPRESSION}} (par exemple #1A1410)
   • --accent = {{ACCENT_EXPRESSION}} (badge de marque)
   • --deco = {{DECO_EXPRESSION}} (décoration primaire)
   • --deco-stripe = {{STRIPE_EXPRESSION}} (bande d'accent)
   • --input-border = {{BORDER_EXPRESSION}} (expression CSS complète avec opacité)
   • --success = {{SUCCESS_EXPRESSION}} ou valeur de repli #2D6A4F
   • --btn-label = {{BTN_LABEL_EXPRESSION}} (couleur du texte du bouton pour le contraste)
   • --ticker-bg = {{TICKER_BG_EXPRESSION}} (fond du ticker animé)
   • --ticker-fg = {{TICKER_FG_EXPRESSION}} (texte du ticker animé)
   • --deco-stroke = {{DECO_STROKE_EXPRESSION}} (traits SVG, généralement atténués avec une opacité de 12-15%)
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (ombre du conteneur du logo, nuance subtile de premier plan)
   • --logo-fg = {{LOGO_FG_EXPRESSION}} (couleur de texte contrastante pour les initiales du logo)
4. Mise en page réactive — Le modèle inclut une mise à l'échelle mobile-first :
   • 375px : le formulaire s'empile sur une seule colonne, le logo rétrécit à 40px, la décoration se compresse, pas de défilement horizontal.
   • 768px : espace confortable à deux colonnes.
   • 1440px+ : mise en page centrée avec un espacement généreux.
   • Vérifiez que tout le texte reste lisible et que la saisie de l'email + le bouton sont entièrement visibles (pas de coupure) à 375×667 et 390×844.

Validation : Exécuter les contrôles de qualité renforcés avant l'émission

5. Exécuter la liste de contrôle qualité — Lire references/checklist.md. Validez chaque verrou P0 avant d'émettre :
   • Exactement un appel à l'action (formulaire d'email)
   • Pas de compteur, pas de preuve sociale factice, pas d'emoji
   • Pas de défilement horizontal à 375px
   • La saisie d'email a type="email" et required ; le prénom n'a pas de required
   • Le formulaire n'utilise PAS novalidate ; JS utilise la garde checkValidity()
   • Le message de succès a role="status" ou aria-live="polite"
   • Toutes les couleurs proviennent de DESIGN.md ou d'une valeur de repli autorisée ; aucune valeur hexadécimale inventée
   • Tout le texte utilisateur est échappé HTML ; les jetons de couleur adhèrent à une grammaire stricte ; les polices sont encodées dans l'URL
   • Passer P0 ou ne pas émettre. Si un verrou P0 échoue, demander à l'utilisateur ou corriger les mappages de jetons et réessayer.
6. Vérifier les verrous P1 pour une soumission de qualité (recommandé) :
   • États de survol et actif sur le bouton d'envoi
   • Validation du formulaire avec un retour clair
   • L'animation du ticker respecte prefers-reduced-motion: reduce
   • Tous les éléments interactifs ont des styles de focus visibles (input:focus inclut outline)
   • Prise en charge du clavier Tab/Entrée
   • Contraste WCAG AA pour le texte du corps (≥4.5:1) et l'étiquette du bouton (≥4.5:1)
   • Attribut alt/aria-label du logo présent ; le ticker a aria-hidden="true"
   • <html lang=""> est défini

Sortie

7. Émettre du HTML propre — Fichier unique, CSS en ligne, SVG pour les graphiques. Marquez les éléments interactifs avec data-od-id (titre, formulaire, logo, ticker, grille, etc.) afin que les agents puissent personnaliser sans analyser.

Contrôles de qualité

Cette compétence applique un flux de travail basé sur un modèle renforcé pour garantir la conformité. Vous devez suivre ce chemin d'exécution ; s'écarter du modèle disqualifie la sortie.

Exécution obligatoire basée sur le modèle :

• Lire assets/template.html comme base ; n'écrivez pas de HTML à partir de zéro.
• Copiez-le dans index.html et remplacez uniquement les jetons {{PLACEHOLDER}} par des valeurs validées/échappées.
• Exécutez chaque verrou P0 dans references/checklist.md avant d'émettre ; si l'un échoue, corrigez et revalidez.

Verrous P0 (doivent passer) :

• Appel à l'action unique : Le formulaire d'email est le seul élément interactif. Pas de navigation, pas de boutons secondaires, pas de liens sociaux.
• Placement du logo : Fixe en haut à gauche, correspond à la couleur d'accent de DESIGN.md, se réduit sur mobile (50px → 40px).
• Cohérence des couleurs : Chaque couleur provient de la palette DESIGN.md. Seule exception codée en dur autorisée : #2D6A4F pour --success.
• Pas d'anti-patrons : Pas de compte à rebours, pas de preuve sociale factice, pas d'icônes emoji, pas de lorem ipsum.
• Intégrité du contenu : Le titre et la copie se rapportent directement aux entrées product_name et tagline — pas de copie de remplissage.
• Adaptation mobile : Pas de défilement horizontal à 375px. La saisie d'email et le bouton d'envoi sont entièrement visibles (pas de coupure) à 375×667 et 390×844. Le débordement vertical est défilable, pas caché.
• Discipline typographique : Polices d'affichage + corps uniquement (règle des 2 polices). Taille cohérente dans toutes les sections.
• Structure du formulaire : Deux champs (prénom optionnel, email obligatoire), garde checkValidity(), message de succès avec role="status".
• Échappement des jetons : Tout le texte fourni par l'utilisateur est échappé HTML ; les jetons de couleur adhèrent à une grammaire stricte et ne contiennent aucun caractère dangereux (;, {}, <, >, /*, @, url() ; les noms de polices sont encodés dans l'URL ; {{LOGO_MARK}} est des initiales textuelles échappées ou un SVG en ligne strictement nettoyé (pas de scripts, pas de gestionnaires d'événements, pas de foreignObject, pas de hrefs externes).

Verrous P1 (devraient passer pour une soumission de qualité) :

• Section héro visuellement distincte et au-dessus de la ligne de flottaison.
• Le bouton d'envoi d'email a des états de survol et actif.
• La validation du formulaire fournit un retour clair.
• La page est défilable (pas coupée) sur toutes les fenêtres mobiles ; l'appel à l'action est visible sans défilement.
• L'animation du ticker est mise en pause/supprimée sous prefers-reduced-motion: reduce.
• Tous les éléments interactifs ont des styles de focus visibles (outline, pas seulement outline:none).
• Clavier : Tab atteint chaque champ du formulaire ; Enter soumet.
• Contraste WCAG AA : Texte du corps ≥4.5:1, étiquette du bouton ≥4.5:1.
• Attribut alt/aria-label du logo présent ; le ticker a aria-hidden="true".
• <html lang=""> défini sur le code de langue correct.

Retenue décorative :

• La zone inférieure améliore sans distraction. Opacité, traits subtils, animation atténuée.
• Pas de dégradé qui s'étend sur plus de 20% de la hauteur de la fenêtre.
• Bobine, bande, grille ou ticker utilisent uniquement les couleurs de DESIGN.md.

Sortie

N'émettre qu'après que tous les verrous P0 dans references/checklist.md sont passés.

Émettre l'artefact entre les balises :

<artifact identifier="waitlist-id" type="text/html" title="Bientôt disponible — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="fr">
...
</html>
</artifact>

Une ligne de description au-dessus de l'artefact ; rien en dessous.

Post-émission : Si l'utilisateur demande des modifications, mettez à jour le fichier index.html sur place et réexécutez les vérifications de la liste P0 avant d'émettre la version suivante. Ne sautez pas la validation lors des itérations.