Malka Debleds — Entreprise Vivante Landing Page

Malka Debleds — « Entreprise vivante » : cahier des charges de la landing page #

Version : 1.0 — finale · Langue du site : français · Périmètre : MVP premium entièrement fonctionnel

Présentation #

Ce document est le cahier des charges complet de la landing page de Malka Debleds, professionnelle de l'accompagnement vibratoire et stratégique des entrepreneurs. Il décrit un site de production — et non une maquette — construit avec Next.js (App Router), React, TypeScript strict, Tailwind CSS et Motion for React, et déployé avec Docker Compose sur un VPS Linux.

Le site transforme une visite en expérience de découverte, de clarification et de prise de contact : une hero cinématographique « CLARTÉ » (paysage montagneux au coucher du soleil, portrait réel de Malka, grand mot « CLARTÉ » en transparence, progression Écouter → Explorer → Clarifier → Décider), une philosophie éditoriale « Entreprise vivante », une boussole de méthode interactive, quatre accompagnements configurables, une boussole d'orientation sans diagnostic, une présentation de Malka, des témoignages réels uniquement, un contact par WhatsApp et par formulaire sécurisé, et un footer immersif « Passage & Clarté ».

Le document est écrit pour être exécuté tel quel par un agent de développement IA ou une équipe, sans question préalable : chaque valeur par défaut est une décision, chaque préoccupation a une section propriétaire et les autres sections y renvoient par numéro (« voir §9.4 »). Rien n'y est inventé : les éléments que seule Malka peut fournir (photos, identité légale, textes et consentements des témoignages, clé d'API e-mail, domaine) ont un emplacement, un format et un garde-fou de build qui empêche toute mise en production sans eux (voir §1.3).

Table des matières #

1. Avant de commencer — décisions par défaut et éléments fournis par Malka
2. Vision produit, objectifs et publics cibles
3. Exigences fonctionnelles et non fonctionnelles
4. Architecture UX, parcours et wireframes
5. Design system
6. Spécifications des sections et interactions
7. Contenus éditoriaux (copy deck)
8. Système d'animation Motion
9. Architecture logicielle, modèle de contenu et contrats d'API
10. Sécurité, RGPD et conformité
11. SEO, accessibilité et performance
12. Arborescence du projet et conventions de code
13. Configuration et variables d'environnement
14. Architecture Docker et déploiement
15. Stratégie de tests et critères d'acceptation
16. Plan de développement par étapes
17. Risques, hypothèses, dépendances et arbitrages
18. Instructions pour l'agent exécutant

1. Avant de commencer — décisions par défaut et éléments fournis par Malka #

Cette section est la première à lire. Elle dit comment utiliser le document, liste toutes les décisions prises par défaut (l'exécutant ne les remet pas en question) et tout ce que Malka doit fournir avant la mise en production, avec l'emplacement exact où chaque élément se branche et le garde-fou automatique qui bloque la production tant qu'il manque.

1.1 Comment lire et exécuter ce document #

1.1.1 Nature du document #

Ce document est une spécification d'exécution complète : un agent de développement (ou un développeur) doit pouvoir construire le site de bout en bout sans poser de question et sans autre source d'information. Il est autosuffisant. Quand une valeur n'est pas fournie par Malka, le document définit l'emplacement, le format, la validation et le garde-fou de build — il n'invente jamais la valeur.

Vocabulaire :

1.1.2 Ordre de lecture et d'exécution #

L'ordre détaillé de lecture est fixé en §18.2 ; il prévaut. En résumé :

1. Lire la section 1, puis la section 2 (périmètre, publics, ce qui manque et comment le traiter). La section 3 est le tableau de référence des exigences : elle se consulte tout au long du projet.
2. Lire la section 18 (consignes à l'exécutant) avant d'écrire la première ligne de code.
3. Lire §9.1 (pile et versions) et la section 13 (variables d'environnement), puis la section 12 (arborescence et conventions), puis §9.2 à §9.8.
4. Lire les sections 5 (jetons de design) et 8 (animation), puis la section 4 (architecture UX, ancres) et §6.1 à §6.11 (spécification des sections), puis la section 7 (textes français), au moment d'implémenter chaque jalon qui les concerne.
5. Lire les sections 10 et 11 (sécurité, RGPD, SEO, accessibilité, performance) et la section 14 (Docker et déploiement) avant le jalon correspondant.
6. Exécuter le plan de la section 16 dans l'ordre, jalon par jalon. Un jalon n'est terminé que lorsque ses critères d'acceptation (section 15 et critères AC-… de chaque section) passent.
7. La section 17 (risques, hypothèses, arbitrages) se lit avant toute déviation : elle explique pourquoi une option a été écartée.

1.1.3 Conventions d'écriture #

1.1.4 Principe de précédence #

Chaque sujet a une seule section propriétaire. En cas d'écart apparent entre deux sections, la valeur de la section propriétaire l'emporte et l'exécutant aligne l'autre occurrence.

1.1.5 Règle d'or : ne jamais inventer #

L'exécutant NE DOIT PAS produire, même provisoirement dans une branche destinée à la production :

• un texte de témoignage, un nom de client autre que « Stéphanie (Steff Beauté Plurielle) » et « Émilie » ;
• une statistique autre que « 300+ personnes accompagnées » et « 50+ personnes formées » ;
• une identité légale (SIRET, adresse, statut, hébergeur), un prix, une durée de séance, une certification, une récompense, une mention presse ;
• un fait biographique sur Malka ;
• un visage généré ou retouché par IA.

Quand un élément manque, l'exécutant utilise l'élément de développement prévu (§1.2, D-23 et D-24), la mise en production est bloquée par un garde (§1.3.3), et la valeur réelle est ajoutée par Malka dans le fichier indiqué en §1.3.2.

1.1.6 Les trois environnements #

La variable APP_ENV (définie en §13) pilote le comportement des gardes et des éléments de développement.

Les tests automatisés (NODE_ENV=test) utilisent aussi EMAIL_DRY_RUN=true. Les gardes qui lisent le système de fichiers (G-05, G-07, G-08, G-09) ne s'exécutent qu'au build ; ils ne s'exécutent jamais au démarrage ni pendant la vie du conteneur.

1.1.7 Définition de « terminé » commune à tout livrable #

Un livrable (composant, route, jalon) est terminé quand toutes les conditions suivantes sont vraies :

1. lint, typecheck et tests unitaires/intégration passent (commandes en §14 et §15).
2. Aucun avertissement React ni erreur de console au chargement de / ni au parcours des interactions du composant.
3. Le composant est vérifié aux largeurs 320, 390, 834, 1024, 1440 et 1920 px (voir §4.6), sans défilement horizontal ni chevauchement (voir §4.5).
4. Le comportement prefers-reduced-motion: reduce est vérifié (voir §8).
5. La navigation au clavier seul et l'analyse automatique d'accessibilité (axe) n'indiquent aucune violation de niveau sérieux ou critique.
6. Les états de chargement, vide, erreur, succès et désactivé applicables sont implémentés (liste des états à couvrir par section en §6).
7. Aucune valeur inventée n'est présente dans les fichiers de contenu pour l'environnement visé (§1.1.5).

1.2 Décisions par défaut #

Toutes les décisions suivantes sont fermées. L'exécutant les applique sans les rouvrir ; une déviation nécessite une entrée dans DECISIONS.md (§18.7) et ne peut pas contredire la section propriétaire.

1.3 Éléments à fournir par Malka #

1.3.1 Phases de besoin #

Chaque élément est nécessaire à partir d'une phase du projet. Le plan de développement (§16) rattache chaque phase au jalon du même intitulé.

1.3.2 Tableau des éléments #

Légende de la colonne « Garde » : les identifiants G-xx renvoient au tableau §1.3.3. L'identifiant M-06 n'est pas attribué : le décor du footer est entièrement vectoriel (montagnes et rivière en SVG) et ne demande ni visuel ni licence.

1.3.3 Gardes automatiques #

Les gardes sont numérotés de G-00 à G-11. Ils sont implémentés à trois endroits :

• src/lib/content/guards.ts (avec les schémas de src/lib/content/schemas.ts) : gardes de contenu G-00, G-01, G-02 (références de contenu), G-03, G-05 et G-11, exécutés au build ;
• scripts/check-assets.ts : gardes d'actifs G-02 (références d'images), G-07, G-08 et G-09, exécutés en tête de pnpm build ;
• src/lib/env.ts : gardes d'environnement G-04, G-06 et G-10, exécutés au démarrage du serveur (G-04) et au build (G-06, G-10).

Les gardes qui lisent le système de fichiers (registre content-validation.json, images, licences, logo) ne s'exécutent qu'au build (script de contrôle ou phase de build de Next.js) ; ils ne s'exécutent jamais au démarrage ni pendant la vie du conteneur, qui ne contient pas ces fichiers.

Tous les gardes affichent un message en français, lisible, qui liste chaque élément manquant et le fichier à mettre à jour. Exemple de sortie attendue pour G-01 :

✖ Garde G-01 — informations légales incomplètes (APP_ENV=production)
  Fichier à mettre à jour : src/content/fr/legal.ts
  Champs manquants :
    - publisher.siret
    - publisher.address
    - host.name
    - vatMention
    - privacy.retention
Le build est interrompu. Corrigez les champs ci-dessus puis relancez le build.

Le registre de validation content-validation.json a la structure suivante. Seule Malka (ou son mandataire explicite) renseigne validatedBy et validatedOn; l'exécutant ne les remplit jamais.

{
  "biography":     { "validatedBy": "", "validatedOn": "" },
  "copyDeck":      { "validatedBy": "", "validatedOn": "" },
  "offers":        { "validatedBy": "", "validatedOn": "" },
  "orientation":   { "validatedBy": "", "validatedOn": "" },
  "altTexts":      { "validatedBy": "", "validatedOn": "" },
  "trustFigures":  { "validatedBy": "", "validatedOn": "" },
  "ogImage":       { "validatedBy": "", "validatedOn": "" }
}

Règle de lecture de G-05 : une clé est « validée » si validatedBy est une chaîne non vide et validatedOn est une date ISO YYYY-MM-DD valide, non future. Le fichier est livré avec toutes les valeurs vides, ce qui rend la production impossible tant que Malka n'a pas validé. La clé copyDeck couvre l'ensemble des textes proposés à Malka (détail des offres, textes de la méthode et de la boussole d'orientation, posture et approche de la section À propos, messages du site) ; la biographie dispose de sa propre clé biography et est la seule source de vérité de sa validation.

1.4 Liste de contrôle avant mise en production #

Cocher chaque ligne dans l'ordre. Une case non cochée interdit la mise en production.

1.4.1 Contenu et mentions légales #

• src/content/fr/legal.ts est complet : éditeur, hébergeur, mention de TVA, durée de conservation des demandes (privacy.retention), date de dernière mise à jour (M-09 à M-12) ; aucun bandeau de données manquantes ne s'affiche sur les pages légales.
• content-validation.json est entièrement renseigné par Malka (M-14, M-15, M-21, D-37) ; G-05 passe.
• Chaque offre a details renseigné ; format vaut « À distance » ; aucune duration n'est présente sans avoir été fournie par Malka.
• Les témoignages publiés ont un texte mot pour mot, un consentement écrit daté et un canal ; ou aucun témoignage n'est publié et la section est absente de la page et de la navigation.
• La biographie de la section À propos est celle validée par Malka ; aucune certification ni chiffre non fourni.
• La politique de confidentialité décrit exactement les traitements réels : formulaire, accusé de réception, e-mail via Brevo, journaux serveur, WhatsApp (service édité par Meta), boussole d'orientation (aucune donnée transmise), cookies et stockage, mesure d'audience seulement si activée.
• Malka a confirmé par écrit si ses prestations s'adressent à des professionnels ou aussi à des consommateurs (M-22) ; dans le second cas, le médiateur est renseigné (M-12) et les conditions générales sont prévues comme évolution.

1.4.2 Visuels et licences #

• Aucune référence à dev-fallback dans le build de production (G-02).
• Portraits et paysage réels intégrés (public/images/hero/ et public/images/about/), détourage propre, aucun visage généré ou retouché par IA (M-01, M-02, M-04).
• docs/assets-licences.json contient une entrée valide pour chaque visuel réel (G-08).
• Image Open Graph public/og/og-default.jpg en 1 200 × 630, validée par Malka (M-07).
• Les fichiers maîtres respectent dimensions minimales, ratios et canal alpha exigés (G-07).

1.4.3 E-mail #

• Clé BREVO_API_KEY stockée dans l'environnement du serveur, absente du dépôt et des journaux.
• Domaine d'envoi authentifié dans Brevo ; SPF, DKIM et DMARC publiés (M-17).
• Contrôle DNS effectué : dig +short TXT <domaine> montre l'enregistrement SPF ; dig +short TXT _dmarc.<domaine> montre l'enregistrement DMARC ; l'enregistrement DKIM fourni par Brevo est présent.
• EMAIL_DRY_RUN=false en production (la valeur true y est refusée au démarrage, G-04).
• Envoi réel de bout en bout depuis le formulaire public : la notification arrive chez astheoris.pro@gmail.com (boîte de réception, pas les indésirables), replyTo = e-mail du visiteur ; l'accusé de réception arrive chez le visiteur ; l'en-tête d'authentification indique spf=pass, dkim=pass, dmarc=pass.
• Test d'échec simulé : sur la préproduction, avec EMAIL_DRY_RUN=false et une clé invalide, le formulaire affiche l'alternative WhatsApp et e-mail (D-32) et le texte saisi reste en place.

1.4.4 Domaine, DNS, HTTPS et hébergement #

• Le domaine pointe vers le VPS ; www redirige en 301 vers l'apex (D-30).
• SITE_URL est l'URL HTTPS définitive (G-06) ; le certificat est valide et se renouvelle automatiquement.
• docker compose ps montre web à l'état healthy ; curl -fsS https://<domaine>/api/health renvoie 200.
• Le redémarrage automatique est vérifié (arrêt forcé du conteneur → relance en moins de 30 s).
• Les journaux sont lisibles (docker compose logs web) et ne contiennent aucune donnée personnelle (voir §9.7).
• La procédure de retour arrière a été jouée au moins une fois sur préproduction (§14).

1.4.5 Qualité #

• lint, typecheck, tests unitaires, de composants, d'intégration et E2E (accessibilité incluse) passent sur l'image de production (§15).
• Lighthouse mobile sur le build de production : Performance ≥ 90, Accessibilité 100, Bonnes pratiques ≥ 95, SEO 100 (§11).
• Aucune violation axe de niveau sérieux ou critique sur /, /mentions-legales, /politique-de-confidentialite, la 404.
• Parcours au clavier seul et au lecteur d'écran validés (§4.3, J5 et J6).
• Comportement avec prefers-reduced-motion: reduce validé (§4.3, J7).
• Aucun défilement horizontal à 320 px ; aucun chevauchement sur la matrice de largeurs de §4.6.
• En-têtes de sécurité et politique de sécurité du contenu vérifiés (§10).
• robots.txt autorise l'indexation et sitemap.xml liste les trois URL canoniques ; aucune balise noindex ni en-tête X-Robots-Tag en production (D-26).

1.4.6 Analytique (uniquement si activée) #

• Instance Umami joignable en HTTPS ; data-do-not-track="true", data-exclude-search="true" et data-exclude-hash="true" présents ; aucun cookie déposé et stockage du navigateur vide tant que le visiteur n'a pas cliqué sur le bouton d'opposition (D-03).
• La section « mesure d'audience » de la politique de confidentialité s'affiche ; elle est absente si l'analytique est désactivée.
• Aucun événement n'envoie de donnée personnelle, d'identifiant de situation de la boussole ni d'offre présélectionnée ; aucune adresse mesurée ne porte de paramètre d'orientation (voir §9.8).

1.4.7 Après la mise en ligne #

• Soumettre https://<domaine>/sitemap.xml à l'outil de recherche de l'éditeur de moteur de son choix (facultatif, recommandé).
• Noter dans README.md la version déployée (APP_VERSION) et la date de mise en production.
• Conserver les trois dernières images (malka-site:<APP_VERSION>) pour le retour arrière.

2. Vision produit, objectifs et publics cibles #

2.1 Vision #

Faire de la visite du site de Malka Debleds une expérience de découverte, de clarification, puis de contact. Le site n'est ni un gabarit, ni une maquette : c'est un site de production, sobre, élégant, humain, accessible et commercialement efficace, d'un niveau d'exécution comparable aux studios numériques haut de gamme, sans effet gratuit ni surcharge graphique.

Le site présente Malka Debleds comme « professionnelle de l'accompagnement vibratoire et stratégique des entrepreneurs ». Il explique son approche (« Entreprise vivante » : une entreprise n'est pas séparée de la personne qui la porte), présente ses offres sans détour et conduit le visiteur vers une prise de contact simple.

2.2 Ambition #

2.3 Proposition de valeur #

Pour le visiteur : « Une écoute profonde, une lecture claire et des actions concrètes pour avancer avec plus de sens, de cohérence et de justesse », portée par une personne réelle, identifiable, joignable en un geste (WhatsApp ou formulaire).

Les trois promesses du site (promesses de service, jamais de résultat) :

1. Une écoute — un premier échange humain, sans engagement implicite.
2. Voir plus clair — une méthode simple en quatre phases (Écouter, Explorer, Clarifier, Décider) et des offres dont le prix et le périmètre sont visibles.
3. Pouvoir avancer — des actions concrètes à la suite de la lecture, avec un accompagnement à distance partout en France.

2.4 Positionnement et garde-fous éditoriaux #

Positionnement : accompagnement vibratoire et stratégique des entrepreneurs, à distance, en France. Cette formule est celle de Malka ; elle est employée telle quelle comme descripteur de sa pratique.

Garde-fous obligatoires (juridiques et éthiques), applicables à tout texte, visuel et message du site :

2.5 Objectifs business et indicateurs de succès #

Modèle économique : génération de demandes uniquement (pas de paiement en ligne). Les séances payantes (150 €, 300 €, 1 000 € ou sur devis) se concluent hors site après un échange par WhatsApp ou par e-mail.

2.5.1 Objectifs #

2.5.2 Indicateurs de succès #

Les cibles ci-dessous sont des objectifs de pilotage initiaux, révisables après 90 jours de données réelles ; elles sont exprimées en ratios, jamais en volumes de trafic.

Règles de mesure :

• Quand l'analytique est désactivée (défaut), K-03, K-04, K-05 et K-07 ne sont pas mesurables ; le site n'ajoute aucun traceur pour les compenser.
• Aucun indicateur n'utilise de donnée personnelle ; la situation choisie dans la boussole n'est jamais mesurée (voir §9.8).
• Les valeurs des cibles de performance sont celles de §11 ; elles sont reprises ici pour lisibilité.

2.6 Publics cibles (personas) #

Quatre personas décrivent les usages réels. Les trois premiers sont des visiteurs ; le quatrième est la propriétaire du site. Aucun n'est un client réel.

2.6.1 Persona 1 — La personne qui dirige son entreprise, bloquée ou fatiguée #

2.6.2 Persona 2 — L'indépendant ou l'indépendante en repositionnement ou en transition #

2.6.3 Persona 3 — La future cliente ou le futur client, prêt à réserver #

2.6.4 Persona 4 — Malka, propriétaire du site #

2.7 Hors périmètre (non-objectifs) #

Les éléments suivants sont explicitement hors périmètre au lancement. L'exécutant ne les implémente pas, et l'architecture n'a pas à les anticiper au-delà des points d'extension indiqués.

2.8 Principes de ton de marque #

Le détail des textes est dans §7 ; ces principes servent à les rédiger, à les relire et à les refuser.

Mots du lexique de marque, à employer avec leur graphie exacte : « Malka Debleds », « Entreprise vivante », « Boussole de clarté », « Passage & Clarté », « CLARTÉ ».

3. Exigences fonctionnelles et non fonctionnelles #

3.1 Lecture des tableaux #

• Chaque exigence a un identifiant stable (FR-xx, NFR-xx), une priorité (MVP = au lancement ; Évolution = prévu par l'architecture, non livré), une section propriétaire (où elle est spécifiée en détail) et un critère d'acceptation AC-3.2-nn ou AC-3.3-nn vérifiable.
• Les critères d'acceptation de ce tableau sont des critères de recette fonctionnelle de haut niveau. Chaque section propriétaire porte ses propres critères détaillés (AC-6.x-nn, etc.) ; la matrice de tests est dans §15.
• Les lettres A à J désignent les dix blocs fonctionnels de la page : A navigation, B hero, C philosophie, D méthode, E accompagnements, F boussole d'orientation, G À propos, H témoignages, I contact, J footer. La correspondance complète figure en §3.6.

3.2 Exigences fonctionnelles #

3.2.1 A — Navigation #

3.2.2 B — Hero « CLARTÉ » #

3.2.3 C et D — Philosophie et méthode #

3.2.4 E — Accompagnements #

3.2.5 F — Boussole d'orientation #

3.2.6 G et H — À propos et témoignages #

3.2.7 I — Contact et réservation #

3.2.8 J — Footer #

3.2.9 Système d'animation #

3.2.10 Pages légales, pages système et SEO #

3.2.11 Contenu, analytique, extension de réservation et exploitation #

3.3 Exigences non fonctionnelles #

3.3.1 Performance #

3.3.2 Accessibilité (WCAG 2.2 niveau AA) #

3.3.3 Sécurité #

3.3.4 Vie privée et RGPD #

3.3.5 Fiabilité #

3.3.6 Maintenabilité #

3.3.7 Observabilité et exploitabilité #

3.3.8 Déployabilité #

3.3.9 Évolutivité et internationalisation #

3.4 Matrice de compatibilité navigateurs et appareils #

Requête de compatibilité à déclarer dans package.json :

{
  "browserslist": [
    "last 2 chrome versions",
    "last 2 edge versions",
    "last 2 firefox versions",
    "last 2 safari versions",
    "ios_saf >= 17",
    "last 2 and_chr versions",
    "last 2 samsung versions"
  ]
}

Règles :

• Les navigateurs hors matrice (anciennes versions, navigateurs à moteur non standard) ne sont pas testés ; ils ne doivent toutefois pas faire échouer la lecture du contenu (amélioration progressive).
• Tout effet visuel avancé a un repli lisible : backdrop-filter → fond opaque ; 100svh → repli 100vh ; mask-image/clip-path non pris en charge → affichage direct du texte, sans masque.
• Le seul requis de rendu est le CSS moderne pris en charge par la matrice ci-dessus (couches @layer, variables CSS, clamp(), aspect-ratio, :focus-visible, prefers-reduced-motion).

3.5 Comportement sans JavaScript #

Le site est rendu côté serveur : le contenu est dans le HTML initial. Avec JavaScript désactivé ou en échec :

Règle de mise en œuvre : les bascules d'affichage sans JavaScript s'écrivent en CSS sous @media (scripting: none) dans src/styles/globals.css. Un bloc <noscript> n'est utilisé que pour remplacer le formulaire de contact. Les détails d'implémentation par section sont en §6.

3.6 Traçabilité des blocs A à J #

4. Architecture UX, parcours et wireframes #

Cette section fixe la structure de la page : ordre des sections, ancres, parcours visiteur, wireframes aux trois largeurs de référence, couches d'empilement et règles anti-chevauchement. Les dimensions typographiques, couleurs et espacements sont dans §5 ; le comportement détaillé de chaque section est dans §6. Quand une valeur numérique de cette section (dégagement minimal, largeur de colonne) et une valeur de §5 semblent différer, la plus contraignante pour éviter un chevauchement s'applique.

4.1 Architecture de la page et ordre des sections #

La landing page est une page unique, rendue statiquement, composée d'un en-tête, de huit sections (dont une conditionnelle) et d'un pied de page. Les pages légales, la 404 et la page d'erreur réutilisent l'en-tête simplifié et le pied de page.

4.1.1 Ordre et rythme #

Logique narrative : accueil (B) → je comprends la vision (C) → je vois comment Malka travaille (D) → je vois ce qui m'est proposé (E) → je me situe (F) → je fais confiance à la personne (G, H) → je contacte (I).

Vocabulaire des appels à l'action : « Prendre rendez-vous » (hero) et « Faire le point » (en-tête) mènent tous deux à la section Contact, où le bloc WhatsApp vient en premier (parcours J4). Aucun outil de réservation n'existe au lancement : le rendez-vous se convient directement avec Malka par WhatsApp ou par le formulaire.

4.1.2 Règle d'alternance des fonds clairs #

Les sections claires alternent deux teintes, ivory-50 et ivory-100 (jetons de §5). La teinte est calculée à partir du rang de rendu parmi les sections claires effectivement affichées, jamais codée en dur par section :

// pseudo-code de référence — la teinte dépend du rang parmi les sections claires rendues
const lightSections = renderedSections.filter((s) => s.tone === 'light');
lightSections.forEach((s, index) => {
  s.background = index % 2 === 0 ? 'ivory-50' : 'ivory-100';
});

Résultat avec toutes les sections : Philosophie ivory-50, Accompagnements ivory-100, Orientation ivory-50, À propos ivory-100, Témoignages ivory-50, Contact ivory-100. Sans Témoignages : Contact devient ivory-50. Les sections sombres (Hero, Méthode, Footer) ne comptent pas dans l'alternance.

4.1.3 Transitions entre sections #

Padding vertical d'une section : jeton --spacing-section (§5.6.1), appliqué partout sans valeur en pixels propre à une section. Ce padding inclut la hauteur des bords en dégradé (ils ne réduisent pas la zone de contenu).

4.1.4 Carte verticale de la page #

 ┌ skip link (visible au focus)
 ├ HEADER fixe 72/64 (toujours visible)
 ├ #accueil          [SOMBRE]  hero (≥ 1024 : clamp(720px,100svh,1080px))   ← h1
 │   └ dégradé de transition clamp(96px,14svh,160px)
 ├ #philosophie      [CLAIR ]  éditorial                                 ← h2
 ├ #methode          [SOMBRE]  boussole 4 phases + panneau               ← h2
 ├ #accompagnements  [CLAIR ]  4 offres + mention de TVA                 ← h2
 ├ #orientation      [CLAIR ]  4 situations → piste + offre suggérée     ← h2
 ├ #a-propos         [CLAIR ]  portrait + présentation                   ← h2
 ├ #temoignages      [CLAIR ]  slider (si ≥ 1 témoignage publiable)      ← h2
 ├ #contact          [CLAIR ]  WhatsApp d'abord, puis formulaire         ← h2
 └ <footer>          [SOMBRE]  carte CTA flottante, navigation, coordonnées, liens légaux

4.2 Ancres et identifiants de référence #

Cette table est la référence unique des identifiants de la page. Aucun autre identifiant d'ancre ne doit être créé sans mise à jour de cette table.

4.2.1 Table des ancres #

Ordre des liens du header (à partir de 1280 px) : Philosophie · Méthode · Accompagnements · Orientation · À propos · Témoignages (conditionnel) · Contact. Le CTA « Faire le point » (cible #contact) est séparé du groupe de liens. En dessous de 1280 px, les liens sont dans le panneau menu-mobile ; le CTA « Faire le point » reste visible dans la barre à partir de 640 px.

Libellés accessibles : le <nav> du header porte aria-label="Navigation principale" ; le groupe de liens du footer porte aria-label="Navigation du pied de page" ; le rail de méthode du hero est un <nav aria-label="Les quatre temps de la méthode"> dont chaque lien a pour nom accessible son libellé visible (« Écouter », « Explorer », « Clarifier », « Décider ») ; chaque section porte aria-labelledby="<id>-titre" où l'identifiant du titre est <id>-titre (par exemple philosophie-titre). Le titre du hero est le h1 de la page, identifié accueil-titre. Le lien lié à la section visible porte aria-current="location".

4.2.2 Règles #

1. Les identifiants sont en minuscules ASCII sans accent, séparés par des tirets, uniques sur la page.
2. Les liens de navigation sont lus depuis src/content/fr/navigation.ts ; chaque lien référence un identifiant déclaré dans une unique constante d'ancres (module anchors, emplacement en §12). Aucun composant n'écrit un #identifiant en dur.
3. Un test automatisé (§15) échoue si un href="#…" de la page ne correspond à aucun id, ou si un id d'ancre est dupliqué. Les repères methode-<id> sont des <span> vides distincts des onglets (methode-tab-<id>) : aucun identifiant n'est donc porté deux fois.
4. scroll-margin-top de chaque section = hauteur du header + 16 px (88 px à partir de 1024 px, 80 px en dessous) ; scroll-padding-top de l'élément html a la même valeur pour que le focus clavier ne soit jamais masqué par le header.
5. Les liens profonds #methode-ecouter … #methode-decider sont écoutés (hashchange) : l'étape correspondante s'active, y compris au chargement initial de la page avec ce fragment.
6. Après une navigation par ancre, le focus est placé sur la racine de la section cible (tabindex="-1", sans nouveau défilement) ; son nom accessible vient de aria-labelledby, ce qui permet aux utilisateurs de lecteurs d'écran et de clavier de se retrouver dans la bonne section. Pour #accueil, le focus va sur la section du hero ; pour #contenu, sur <main> ; pour une étape #methode-<id>, sur la racine de la section Méthode.
7. Sur les pages légales, les liens du header deviennent /#<ancre> ; le logo mène à / ; aucune mise en évidence de section active.
8. Comportement d'un fragment inconnu (/#inexistant) : la page s'affiche en haut, sans erreur.

4.3 Parcours utilisateurs #

Chaque parcours liste les étapes, l'état du système et les événements d'analytique émis uniquement si l'analytique est activée (§9.8). Les critères d'acceptation AC-4.3-nn sont repris par les tests E2E de §15.

4.3.1 J1 — Du hero au formulaire de contact (ordinateur, souris) #

• AC-4.3-01 : du chargement à la confirmation, le parcours J1 se déroule sans erreur de console, avec au plus 3 interactions avant d'atteindre le formulaire (clic CTA, défilement automatique, clic sur le premier champ).
• AC-4.3-02 : après le clic sur « Prendre rendez-vous », la section #contact porte le focus et son titre est visible sous le header (non masqué).
• AC-4.3-03 : l'envoi valide affiche la confirmation au plus 1 s après la réponse du serveur simulé (horloge de test avancée du délai minimal de remplissage défini en §9.4.8) et empêche un second envoi pendant la requête.

4.3.2 J2 — D'une offre vers WhatsApp #

• AC-4.3-04 : pour chacune des quatre offres, le lien WhatsApp contient le titre exact de l'offre, correctement encodé, et le numéro 33667295179.
• AC-4.3-05 : le lien WhatsApp déclare un texte masqué « (ouvre WhatsApp dans un nouvel onglet) ».
• AC-4.3-06 : la variante formulaire présélectionne l'offre correspondante (offerId), ne modifie ni le nom, ni l'e-mail, ni le message, et l'adresse affichée ne contient plus ?offre une fois le formulaire monté.

4.3.3 J3 — De la boussole d'orientation à un formulaire prérempli #

• AC-4.3-07 : aucun résultat de boussole n'est stocké (aucun cookie ni stockage navigateur), aucune adresse affichée ou chargée ne contient la situation, et rien n'est envoyé au serveur avant l'envoi du formulaire.
• AC-4.3-08 : la mise en garde « ne constitue ni un diagnostic ni une promesse de résultat » est visible avec chaque résultat.
• AC-4.3-09 : l'événement d'analytique ne contient jamais l'identifiant de la situation.
• AC-4.3-10 : sur mobile, si le panneau de résultat est hors de l'écran après une sélection au pointeur ou au toucher, la page défile jusqu'à le rendre visible sans masquer le choix (instantané en mouvement réduit) ; la navigation aux flèches du clavier ne fait jamais défiler la page — détail en §6.6.

4.3.4 J4 — Contact rapide par WhatsApp sur mobile (390 px) #

• AC-4.3-11 : depuis le premier écran, WhatsApp s'atteint en 2 touches (CTA du hero, puis bouton WhatsApp) ou 3 touches via le menu.
• AC-4.3-12 : aucun élément fixe en bas d'écran ne masque le contenu ou ne gêne la zone de saisie (pas de barre collante, voir §4.5).

4.3.5 J5 — Visiteur au clavier seul #

• AC-4.3-13 : l'ordre de tabulation est strictement l'ordre visuel de gauche à droite et de haut en bas ; aucun tabindex positif n'existe.
• AC-4.3-14 : chaque élément focalisé affiche l'indicateur de focus de §5 et n'est jamais couvert par le header.
• AC-4.3-15 : aucun piège de focus hors du menu ouvert ; toute fonction accessible à la souris l'est au clavier.

4.3.6 J6 — Visiteur avec lecteur d'écran #

• AC-4.3-16 : la navigation par repères et par titres au lecteur d'écran donne une structure complète et sans doublon.
• AC-4.3-17 : aucune information n'est transmise uniquement par la couleur, la position ou une animation.

4.3.7 J7 — Visiteur avec mouvement réduit #

• AC-4.3-18 : avec prefers-reduced-motion: reduce émulé, aucun élément n'a de transform animé et aucune boucle ne tourne ; tous les contenus restent accessibles.

4.3.8 J8 — Visite et retour depuis les pages légales #

• AC-4.3-19 : les pages légales sont accessibles en moins de 2 clics depuis n'importe quelle section de / (footer) et depuis la case de consentement du formulaire (nouvel onglet, formulaire intact).
• AC-4.3-20 : sur ces pages, aucun lien de navigation n'est marqué comme actif ; tous les liens du header pointent vers /#<ancre>.

4.3.9 J9 — Reprise après échec d'envoi #

• AC-4.3-21 : après chaque échec, le visiteur a toujours un moyen d'aboutir (WhatsApp, téléphone ou e-mail) et ne perd jamais son texte.
• AC-4.3-22 : l'échec est annoncé par la prise de focus : sur le récapitulatif des erreurs pour une validation, sur la bannière d'erreur pour un échec serveur ou réseau ; aucun role="alert" supplémentaire n'est ajouté, afin d'éviter une double annonce.

4.3.10 J10 — JavaScript désactivé ou en échec #

• AC-4.3-23 : avec JavaScript désactivé, un visiteur peut lire tout le contenu et contacter Malka par au moins un moyen (lien natif).

4.4 Wireframes #

4.4.1 Conventions de lecture #

• Trois largeurs de référence : ordinateur 1440 px, tablette 834 px, mobile 390 px. Les schémas sont proportionnels à l'horizontale (1 caractère ≈ 12 px à 1440 px, ≈ 11,6 px à 834 px, ≈ 10,3 px à 390 px) mais non à la verticale.
• Les textes entre crochets, comme [H2 éditorial], décrivent le rôle d'un contenu défini en §7 ; ils ne sont pas du texte final. Les titres d'offres, les prix et les libellés de navigation sont les valeurs réelles.
• ( … ) = bouton ou lien d'action ; [ … ] = contenu ou contrôle ; * = élément conditionnel ; {…} = cadre d'image.
• Les wireframes fixent la structure, l'ordre de lecture, les alignements et les dégagements. Les tailles de police et les espacements exacts sont dans §5. L'ordre du DOM est toujours l'ordre de lecture indiqué.
• Pour les largeurs intermédiaires, les règles de §4.6 s'appliquent.

4.4.2 Hero « CLARTÉ » (bloc B) #

Ordinateur — 1440 px (de 1024 px et plus) #

+----------------------------------------------------------------------------------------------------------------------+
| [Malka Debleds]  Philosophie Méthode Accompagnements Orientation À propos Témoignages* Contact  (Faire le point)     |
|     header 72 px — transparent sur le paysage ; fond forêt translucide après 24 px de défilement                     |
|                                                                                                                      |
|      Accompagnement vibratoire et stratégique des entrepreneurs     +----------------------------+                   |
|                                                                     |                            |                   |
|      Retrouver la clarté pour                                       |                            |   (01 Écouter)    |
|      faire grandir une entreprise                                   |                            |        |          |
|      alignée.                                                       |                            |   (02 Explorer)   |
|                                                                     |                            |        |          |
|      Une écoute profonde, une lecture claire et                     |       PORTRAIT RÉEL        |   (03 Clarifier)  |
|      des actions concrètes pour avancer avec                        |(détouré, fond transparent) |        |          |
|      plus de sens, de cohérence et de justesse.                     |                            |   (04 Décider)    |
|                                                                     |                            |                   |
|      (Prendre rendez-vous)  (Découvrir la méthode)                  |                            |                   |
|            C       L       A                                        |      R      T      É       |                   |
|                                                                     |                            |                   |
|      300+ personnes accompagnées    50+ personnes formées           |                            |                   |
|                                                                     +----------------------------+                   |
|                                                                                                                      |
|  ~~ dégradé de transition forêt -> ivoire, clamp(96px, 14svh, 160px), vers #philosophie ~~~~~~~~~~~~~~~~~~           |
+----------------------------------------------------------------------------------------------------------------------+

Repères et contrat de mise en page (≥ 1024 px) :

Dégagements obligatoires : texte ↔ portrait ≥ 24 px ; portrait ↔ rail ≥ 24 px ; CTA ↔ chiffres de confiance ≥ 24 px ; aucun texte ni lien dans le dégradé de transition.

Ordinateur compact — 1024 à 1279 px #

+----------------------------------------------------------------------------------------------------------------------+
|  [Malka Debleds]  (logo)                                             (Faire le point)   [≡]     — de 1024 à 1279 px  |
|                                                                                                                      |
|      Accompagnement vibratoire et stratégique des entrepreneurs     +----------------------------+                   |
|      Retrouver la clarté pour                                       |                            |                   |
|      faire grandir une entreprise                                   |                            |                   |
|      alignée.                                                       |                            |                   |
|      Une écoute profonde, une lecture claire et des actions…        |       PORTRAIT RÉEL        |                   |
|      (Prendre rendez-vous)  (Découvrir la méthode)                  |                            |                   |
|      300+ personnes accompagnées    50+ personnes formées           |                            |                   |
|                                                                     +----------------------------+                   |
|      [01 Écouter]  [02 Explorer]  [03 Clarifier]  [04 Décider]   ← rail horizontal, sous les chiffres                |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px (768 à 1023 px) #

+----------------------------------------------------------------------+
|   [Malka Debleds]                           (Faire le point)   [≡]   |
|   header 64 px                                                       |
|                                                                      |
|   Accompagnement vibratoire et stratégique des entrepreneurs         |
|   Retrouver la clarté pour faire grandir                             |
|   une entreprise alignée.                                            |
|                                                                      |
|   Une écoute profonde, une lecture claire et des actions             |
|   concrètes pour avancer avec plus de sens, de cohérence             |
|   et de justesse.                                                    |
|                                                                      |
|   (Prendre rendez-vous)  (Découvrir la méthode)                      |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |                                                                | |
|   |         bande encadrée 16:10 — hero-mobile (cover)             | |
|   |          C L A R T É  (réduit, derrière le portrait)           | |
|   |             PORTRAIT RÉEL — centré, aligné en bas              | |
|   |                                                                | |
|   +----------------------------------------------------------------+ |
|                                                                      |
|   300+ personnes accompagnées        50+ personnes formées           |
|                                                                      |
|   [1 Écouter]  [2 Explorer]  [3 Clarifier]  [4 Décider]              |
|   (rail horizontal, 4 liens vers #methode-ecouter … #methode-decider)|
|                                                                      |
+----------------------------------------------------------------------+

Mobile — 390 px (moins de 768 px) #

+------------------------------------+
|  [Malka Debleds]               [≡] |
|  header 64 px                      |
|                                    |
|  Accompagnement vibratoire et      |
|  stratégique des entrepreneurs     |
|                                    |
|  Retrouver la clarté               |
|  pour faire grandir une            |
|  entreprise alignée.               |
|                                    |
|  Une écoute profonde, une          |
|  lecture claire et des actions     |
|  concrètes pour avancer avec       |
|  plus de sens, de cohérence        |
|  et de justesse.                   |
|                                    |
|  +--------------------------------+|
|  |      Prendre rendez-vous       ||
|  +--------------------------------+|
|  +--------------------------------+|
|  |      Découvrir la méthode      ||
|  +--------------------------------+|
|                                    |
|  +--------------------------------+|
|  |    bande 9:10 (≈ 342 × 380)    ||
|  |      hero-mobile (cover)       ||
|  |      C L A R T É (réduit)      ||
|  |         PORTRAIT RÉEL          ||
|  |     centré, aligné en bas      ||
|  |                                ||
|  +--------------------------------+|
|                                    |
|  300+                  50+         |
|  personnes             personnes   |
|  accompagnées          formées     |
|                                    |
|  1          2           3         4|
|  Écouter Explorer Clarifier Décider|
|                                    |
+------------------------------------+

Recomposition sous 1024 px (décision D-20) :

1. L'ordre est : sur-titre → titre → description → CTA → bande portrait → chiffres de confiance → rail horizontal. Le texte n'est jamais superposé à une image et aucune marge négative n'est utilisée : le fond du hero est un dégradé forêt uni, et le paysage n'apparaît que dans la bande encadrée. Le LCP est le texte du titre. Le titre utilise le jeton display-xl en variante clamp(2.25rem, 7vw, 3.25rem).
2. La bande a un rayon de 20 px, une bordure champagne à 30 % d'opacité, overflow: clip. Elle contient dans cet ordre : paysage aplati hero-mobile (object-fit: cover, utilisé uniquement dans cette bande), mot CLARTÉ (font-size: clamp(4rem, 20vw, 7.5rem), champagne-200 à plat à l'opacité 0,14, centré), portrait (hauteur 92 % de la bande, aligné en bas, centré). Ratio : 16:10 de 768 à 1023 px, 9:10 en dessous de 768 px.
3. Les CTA sont en pleine largeur sur mobile (hauteur ≥ 52 px, espacement vertical ≥ 12 px) et côte à côte en tablette.
4. Le rail horizontal a quatre liens de largeur égale ; chaque cible mesure ≥ 44 px de haut ; libellés jamais tronqués (12 px à 320 px de large, 13 px au-delà) ; le numéro est au-dessus du libellé.
5. Sur mobile, le premier écran (390 × 844) montre le sur-titre, le titre, la description, les deux CTA et le début de la bande portrait. Sous 1024 px, la hauteur du hero est celle de son contenu (pas de plein écran forcé) ; en orientation paysage sur téléphone (hauteur < 600 px), le hero n'est jamais forcé à 100svh.
6. Pas de parallaxe ni de flou sous 1024 px ou avec pointeur grossier (§8).

4.4.3 Navigation (bloc A) #

Ordinateur — 1440 px (liens en ligne à partir de 1280 px) #

+----------------------------------------------------------------------------------------------------------------------+
|   [Malka Debleds]   Philosophie Méthode Accompagnements Orientation À propos Témoignages* Contact  (Faire le point)  |
|                     _____________                                                                                    |
|   état haut de page : transparent      actif = trait champagne + aria-current="location"                             |
|                                                                                                                      |
|   [Malka Debleds]   Philosophie Méthode Accompagnements Orientation À propos Témoignages* Contact  (Faire le point)  |
|   état défilé (> 24 px, retour à « haut » sous 8 px) : fond forêt translucide, flou d'arrière-plan dès 768 px        |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px (768 à 1023 px : barre de 64 px ; de 1024 à 1279 px : même barre, hauteur 72 px) #

+----------------------------------------------------------------------+
|   [Malka Debleds]                           (Faire le point)   [≡]   |
|   bouton menu : 44 × 44 px, aria-expanded, libellé « Ouvrir le menu »|
+----------------------------------------------------------------------+

Mobile — 390 px (menu fermé, puis ouvert) #

+------------------------------------+
|  [Malka Debleds]               [≡] |
|  CTA du header masqué sous 640 px  |
+------------------------------------+
|  [Malka Debleds]              [ X ]|
|  (barre propre du panneau)         |
+------------------------------------+
|  Philosophie                       |
|  Méthode                           |
|  Accompagnements                   |
|  Orientation                       |
|  À propos                          |
|  Témoignages*                      |
|  Contact                           |
|                                    |
|  +--------------------------------+|
|  |         Faire le point         ||
|  +--------------------------------+|
|                                    |
|  (panneau plein écran 100dvh,      |
|  fond forêt, défilement de fond    |
|  bloqué)                           |
+------------------------------------+

Contrat du header et du menu :

• Le header est toujours visible (sticky, jamais masqué au défilement). États : top (transparent), scrolled (après 24 px de défilement, retour sous 8 px) et solid (fond plein dès le chargement, pages légales). Fond forêt-950 à 0,92 d'opacité sous 768 px ; à 0,85 avec backdrop-filter: blur(12px) à partir de 768 px (repli à 0,97 si le flou n'est pas pris en charge).
• Liens en ligne à partir de 1280 px ; en dessous, bouton de menu (le CTA « Faire le point » reste visible à partir de 640 px).
• Le menu est une boîte de dialogue personnalisée role="dialog" aria-modal="true" identifiée menu-mobile, plein écran, avec sa propre barre (logo et bouton de fermeture) ; bouton aria-expanded + aria-controls="menu-mobile" ; padding-bottom: max(32px, env(safe-area-inset-bottom)) ; piège de focus ; Échap ferme et rend le focus au bouton ; pas de fermeture au clic sur le fond ; verrouillage du défilement de fond par html[data-scroll-locked] ; clic sur un lien ferme et défile vers la section ; liens ≥ 56 px de haut ; CTA ≥ 52 px de haut ; couche --z-menu (§4.5.1). Animation : ouverture en fondu et translation de −12 px vers 0 en durée fast ; fermeture en fondu instant ; ouverture et fermeture instantanées en mouvement réduit.

4.4.4 Philosophie — Entreprise vivante (bloc C) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|                                                                                                                      |
|       [H2 éditorial monumental]                                      [Paragraphe 1 — 2 à 3 phrases]                  |
|       [3 à 4 lignes, révélées ligne par ligne]                       [Paragraphe 2 — 2 à 3 phrases]                  |
|       [espace généreux]                                              [Paragraphe 3 — facultatif]                     |
|                                                                                                                      |
|       +--------------------------------------------------------------------------------------------------------+     |
|       | [phrase d'ancrage en italique serif, pleine largeur : une entreprise n'est pas séparée de la personne] |     |
|       +--------------------------------------------------------------------------------------------------------+     |
|                                                                                                                      |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|                                                                      |
|   [H2 éditorial monumental, 3 à 4 lignes]                            |
|                                                                      |
|   [Paragraphe 1 — colonne de lecture, 620 px maximum]                |
|   [Paragraphe 2]                                                     |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |              [phrase d'ancrage en italique serif]              | |
|   +----------------------------------------------------------------+ |
|                                                                      |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|                                    |
|  [H2 éditorial]                    |
|  [3 à 5 lignes]                    |
|                                    |
|  [Paragraphe 1]                    |
|  [Paragraphe 2]                    |
|                                    |
|  +--------------------------------+|
|  |       [phrase d'ancrage]       ||
|  +--------------------------------+|
|                                    |
+------------------------------------+

Contrat : colonne de texte ≤ 70 caractères par ligne ; fond clair ; révélations ligne par ligne (§8) ; aucun élément interactif dans la section.

4.4.5 Méthode — Boussole de clarté (bloc D) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|                                                                                                                      |
|       [H2 « Boussole de clarté »]                                                                                    |
|       [introduction courte]                                                                                          |
|                                                                                                                      |
|                       (1 Écouter)                                +----------------------------------------------+    |
|                  .-'                  '-.                        |          Panneau de l'étape active           |    |
|             (4 Décider)    Boussole    (2 Explorer)              |              [titre de l'étape]              |    |
|                             de clarté                            |         [explication — 3 à 5 lignes]         |    |
|                  '-.                  .-'                        |  [ce que Malka fait] / [ce que vous faites]  |    |
|                       (3 Clarifier)                              +----------------------------------------------+    |
|          boussole à gauche (colonnes 1 à 6), nœuds 56 px,                                                            |
|          panneau à droite (colonnes 7 à 12) ; 1 → 2 → 3 → 4 dans le sens horaire                                     |
|                                                                                                                      |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|                                                                      |
|   [H2 « Boussole de clarté »]                                        |
|   [introduction courte]                                              |
|                                                                      |
|                        (1 Écouter)                                   |
|            (4 Décider)     Boussole        (2 Explorer)              |
|                            de clarté                                 |
|                        (3 Clarifier)                                 |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |       Panneau de l'étape active — [titre] [explication]        | |
|   +----------------------------------------------------------------+ |
|                                                                      |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|                                    |
|  [H2 « Boussole de clarté »]       |
|  [introduction courte]             |
|                                    |
|             (1 Écouter)            |
|  (4 Décider)  Boussole (2 Explorer)|
|               de clarté            |
|             (3 Clarifier)          |
|                                    |
|  +--------------------------------+|
|  |   Panneau de l'étape active    ||
|  |     [titre] [explication]      ||
|  +--------------------------------+|
|                                    |
+------------------------------------+

Contrat : titre de la section « Boussole de clarté » ; fond sombre forêt ; première étape (Écouter) active par défaut (le panneau n'est jamais vide) ; chaque nœud mesure 56 px (48 px sous 768 px) ; les nœuds sont des onglets (role="tab") à activation automatique : les flèches déplacent le focus et activent l'étape ; sur pointeur fin, le survol prévisualise l'étape et le clic la verrouille ; au toucher, l'activation se fait par toucher ; les quatre panneaux restent montés dans une même cellule de grille (seul le panneau actif est visible, les autres sont masqués et inert) ; les repères methode-<id> sont des <span> vides de hauteur nulle (§4.2.1) ; le panneau est placé sous la boussole en dessous de 1024 px et à droite de la boussole à partir de 1024 px (boussole aux colonnes 1 à 6, panneau aux colonnes 7 à 12) ; sans JavaScript, les quatre étapes sont listées l'une sous l'autre.

4.4.6 Accompagnements (bloc E) #

Présentation éditoriale : un panneau sombre pour l'offre mise en avant et des lignes éditoriales sans cadre pour les autres (composant OfferItem, variantes panel et row) ; ni grille de cartes, ni hauteurs égales imposées.

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|                                                                                                                      |
|      [H2 « Accompagnements »]                    [introduction courte]                                               |
|                                                                                                                      |
|      +---------------------------------+         02  Lecture globale de l'entrepreneur et de l'entreprise            |
|      | 01  PANNEAU SOMBRE              |             [description courte] · À distance                               |
|      | [mise en avant]                 |             ▸ Détails (élément natif <details>)                             |
|      | Séance de clarification ciblée  |             Tarif 150 €   (Écrire sur WhatsApp)  Écrire via le formulaire › |
|      | [description courte]            |             - - - - - - - - - - - - - - - - - - - - - - - - - - - - -       |
|      | À distance                      |         03  Suivi de transition sur six mois                                |
|      | ▸ Détails (<details>)           |             [description courte] · À distance                               |
|      |                                 |             ▸ Détails                                                       |
|      | Tarif 300 €                     |             Tarif 1 000 € (Écrire sur WhatsApp)  Écrire via le formulaire › |
|      | (Écrire sur WhatsApp)           |             - - - - - - - - - - - - - - - - - - - - - - - - - - - - -       |
|      | Écrire via le formulaire ›      |         04  Accompagnement personnalisé                                     |
|      +---------------------------------+             [description courte] · À distance                               |
|                                                      Sur devis     (Écrire sur WhatsApp)  Écrire via le formulaire › |
|                                                                                                                      |
|      [mention de TVA — lue dans legal.ts, affichée sous la liste]                                                    |
|                                                                                                                      |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|                                                                      |
|   [H2 « Accompagnements »]                                           |
|   [introduction courte]                                              |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   | PANNEAU SOMBRE — 01  Séance de clarification ciblée            | |
|   | [mise en avant] · [description] · À distance                   | |
|   | ▸ Détails       Tarif 300 €                                    | |
|   | (Écrire sur WhatsApp)   Écrire via le formulaire ›             | |
|   +----------------------------------------------------------------+ |
|                                                                      |
|   02  Lecture globale de l'entrepreneur et de l'entreprise           |
|       [description] · À distance    Tarif 150 €                      |
|       (Écrire sur WhatsApp)   Écrire via le formulaire ›             |
|   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   |
|   (lignes 03 « Suivi de transition sur six mois » — Tarif 1 000 €    |
|   et 04 « Accompagnement personnalisé » — Sur devis : même structure)|
|                                                                      |
|   [mention de TVA]                                                   |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|                                    |
|  [H2 « Accompagnements »]          |
|  [introduction courte]             |
|                                    |
|  +--------------------------------+|
|  | PANNEAU SOMBRE                 ||
|  | 01 Séance de clarification     ||
|  |    ciblée     [mise en avant]  ||
|  | [description] · À distance     ||
|  | ▸ Détails      Tarif 300 €     ||
|  | (   Écrire sur WhatsApp   )    ||
|  | (Écrire via le formulaire ›)   ||
|  +--------------------------------+|
|                                    |
|  02 Lecture globale de             |
|     l'entrepreneur et de           |
|     l'entreprise                   |
|     [description] · À distance     |
|     Tarif 150 €                    |
|     (   Écrire sur WhatsApp   )    |
|     (Écrire via le formulaire ›)   |
|  - - - - - - - - - - - - - - - -   |
|  (lignes 03 et 04 : même structure,|
|  empilées dans l'ordre 1 → 4)      |
|                                    |
|  [mention de TVA]                  |
+------------------------------------+

Contrat : ordre du DOM = ordre order de offers.ts ; l'offre mise en avant se distingue visuellement (panneau sombre, dimension, ombre) sans changer sa place dans le DOM ; chaque offre expose titre (h3), description, format (« À distance »), tarif (le mot « Tarif » toujours visible + montant, ou « Sur devis »), détails dans un élément natif <details>, CTA WhatsApp « Écrire sur WhatsApp » (principal) et lien « Écrire via le formulaire » (secondaire, href="/?offre=<id>#contact") ; la liste supporte de 1 à 6 offres sans casse (une offre seule : panneau large unique) ; aucune hauteur égale n'est forcée entre offres voisines.

4.4.7 Boussole d'orientation (bloc F) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|                                                                                                                      |
|       [H2 « Boussole d'orientation »]                        +--------------------------------------------------+    |
|       [introduction — une piste, pas un diagnostic]          |         Résultat de la situation choisie         |    |
|       +---------------------+  +---------------------+       |       [piste de réflexion — 2 à 4 phrases]       |    |
|       | ( ) Décision bloquée|  | ( ) Fatigue         |       |     [question 1]  [question 2]  [question 3]     |    |
|       +---------------------+  +---------------------+       |   Offre possible : [titre de l'offre suggérée]   |    |
|       +---------------------+  +---------------------+       | (Écrire sur WhatsApp)  (Écrire via le formulaire)|    |
|       | ( ) Repositionnement|  | ( ) Transition      |       |  Cette boussole propose une piste de réflexion…  |    |
|       +---------------------+  +---------------------+       +--------------------------------------------------+    |
|                                                                                                                      |
|       2 × 2 à gauche (colonnes 1 à 5), résultat à droite ; puces de 56 px de haut, cases radio natives               |
|       état initial (aucun choix) : panneau de droite = invitation à choisir une situation + mise en garde            |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|                                                                      |
|   [H2 « Boussole d'orientation »]                                    |
|   [introduction]                                                     |
|                                                                      |
|   +------------------------------+  +------------------------------+ |
|   |       Décision bloquée       |  |           Fatigue            | |
|   +------------------------------+  +------------------------------+ |
|   +------------------------------+  +------------------------------+ |
|   |       Repositionnement       |  |          Transition          | |
|   +------------------------------+  +------------------------------+ |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |    Résultat : [piste] [questions] Offre possible : [titre]     | |
|   |     (Écrire sur WhatsApp)   (Écrire via le formulaire)         | |
|   |         Cette boussole propose une piste de réflexion…         | |
|   +----------------------------------------------------------------+ |
|                                                                      |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|                                    |
|  [H2 « Boussole d'orientation »]   |
|  [introduction]                    |
|                                    |
|  |      ( ) Décision bloquée      ||
|  |          ( ) Fatigue           ||
|  |      ( ) Repositionnement      ||
|  |         ( ) Transition         ||
|                                    |
|  +--------------------------------+|
|  |Résultat : [piste de réflexion] ||
|  |  [questions] Offre : [titre]   ||
|  |    (Écrire sur WhatsApp)       ||
|  |  (Écrire via le formulaire)    ||
|  | Mise en garde (non diagnostic) ||
|  +--------------------------------+|
|                                    |
+------------------------------------+

Contrat : quatre cases radio natives dans un radiogroup (fieldset et legend), rendues côté serveur ; chaque puce mesure 56 px de haut ; disposition 2 × 2 à partir de 1024 px et 2 × 2 en tablette, pile d'une colonne sous 768 px ; aucune situation présélectionnée (état initial vide avec invitation) ; le résultat remplace l'invitation sans décalage de mise en page (le panneau réserve sa hauteur minimale) ; deux CTA dans le résultat : « Écrire sur WhatsApp » et « Écrire via le formulaire » ; l'état est local (§6.6) ; la mise en garde est dans le panneau, toujours visible avec un résultat ; le panneau défile dans la vue uniquement après une sélection au pointeur ou au toucher ; avec @media (scripting: none), une liste statique remplace le sélecteur.

4.4.8 À propos de Malka (bloc G) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|                                                                                                                      |
|       +---------------------------------------+          [H2 « À propos »]                                           |
|       |                                       |          [Présentation personnelle — paragraphes validés par Malka]  |
|       |       PORTRAIT RÉEL — ratio 4:5       |          [Posture professionnelle — 2 à 3 points]                    |
|       |             (≈ 492 × 615)             |          [Approche humaine — paragraphe]                             |
|       |                                       |                                                                      |
|       +---------------------------------------+                                                                      |
|                                                                                                                      |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|                                                                      |
|   +----------------------------+   [H2 « À propos »]                 |
|   |     PORTRAIT RÉEL 4:5      |   [Présentation personnelle]        |
|   |                            |   [Posture professionnelle]         |
|   +----------------------------+   [Approche humaine]                |
|                                                                      |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|                                    |
|  [H2 « À propos »]                 |
|  +--------------------------------+|
|  |       PORTRAIT RÉEL 4:5        ||
|  |                                ||
|  +--------------------------------+|
|  [Présentation personnelle]        |
|  [Posture professionnelle]         |
|  [Approche humaine]                |
|                                    |
+------------------------------------+

Contrat : le portrait est une photographie réelle (jamais une image de repli en production) ; ratio fixe 4:5 avec dimensions déclarées (aucun décalage) ; texte alternatif descriptif ; le portrait précède le texte dans le DOM sur mobile ; l'éventuelle mention de droits de la photo figure dans les crédits des pages légales, pas dans cette section ; aucune certification, aucun diplôme ni chiffre non fourni par Malka.

4.4.9 Témoignages (bloc H, conditionnel) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|                                                                                                                      |
|       [H2 « Témoignages »]                                                                                           |
|                                                                                                                      |
|              +------------------------------------------------------------------------------------------+            |
|              |    « [texte du témoignage, mot pour mot, mis en valeur en grande typographie serif] »    |            |
|              |                                                                                          |            |
|              |                              [Nom de l'auteur] — [contexte]                              |            |
|              +------------------------------------------------------------------------------------------+            |
|                                                                                                                      |
|              (‹)  (›)      ● ○      1 / 2                                                                            |
|                                                                                                                      |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|                                                                      |
|   [H2 « Témoignages »]                                               |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |                   « [texte du témoignage] »                    | |
|   |                       [Nom] — [contexte]                       | |
|   +----------------------------------------------------------------+ |
|                                                                      |
|   (‹)  (›)      ● ○      1 / 2                                       |
|                                                                      |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|                                    |
|  [H2 « Témoignages »]              |
|                                    |
|  +--------------------------------+|
|  |   « [texte du témoignage] »    ||
|  |       [Nom] — [contexte]       ||
|  +--------------------------------+|
|                                    |
|  (‹)  (›)    ● ○    1 / 2          |
|                                    |
+------------------------------------+

Contrat : section et lien présents seulement s'il existe au moins un témoignage publiable (publié, consentement accordé, citation non vide de 700 caractères au plus) ; le carrousel n'existe qu'à partir de deux témoignages — avec un seul, la citation est affichée seule, sans flèches ni indicateurs ; les guillemets « » sont ajoutés par le composant autour du texte, qui reste mot pour mot celui de la personne ; aucune photo, aucun avatar ; pas de défilement automatique ; navigation en boucle (les boutons ne sont jamais désactivés) ; boutons précédent et suivant de 48 px ; indicateurs de 10 px dotés d'une zone cliquable de 44 px ; tous les panneaux restent montés dans une même cellule de grille, la hauteur du bloc est donc celle du témoignage le plus long (aucun saut de hauteur au changement) ; transitions en fondu avec un léger décalage vertical, instantanées en mouvement réduit ; sans JavaScript, tous les témoignages sont listés l'un sous l'autre.

4.4.10 Contact et prise de rendez-vous (bloc I) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|                                                                                                                      |
|       [H2 « Contact »]                                     +----------------------------------------------------+    |
|       [introduction — un échange simple et sans engagement]|                       Nom *                        |    |
|       +--------------------------------------------+       |                      E-mail *                      |    |
|       |           (Écrire sur WhatsApp)            |       |               Téléphone (facultatif)               |    |
|       |               06 67 29 51 79               |       |        Offre concernée (liste, facultatif)         |    |
|       |                                            |       |        Votre situation (liste, facultatif)         |    |
|       |         Téléphone : 06 67 29 51 79         |       |         Message *  (20 à 2000 caractères)          |    |
|       |      E-mail : astheoris.pro@gmail.com      |       |     [ ] consentement (lien vers la politique)      |    |
|       |     France — accompagnement à distance     |       |                (Envoyer ma demande)                |    |
|       +--------------------------------------------+       |     zone d'état : chargement / succès / erreur     |    |
|                                                            +----------------------------------------------------+    |
|                                                                                                                      |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|                                                                      |
|   [H2 « Contact »]                                                   |
|   [introduction]                                                     |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |             (Écrire sur WhatsApp)   06 67 29 51 79             | |
|   |            Téléphone — E-mail — France, à distance             | |
|   +----------------------------------------------------------------+ |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |                      Nom *   —   E-mail *                      | |
|   |          Téléphone (facultatif)   —   Offre concernée          | |
|   |              Votre situation (facultatif)                      | |
|   |                           Message *                            | |
|   |       [ ] consentement     (Envoyer ma demande)                | |
|   |                          zone d'état                           | |
|   +----------------------------------------------------------------+ |
|                                                                      |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|                                    |
|  [H2 « Contact »]                  |
|  [introduction]                    |
|                                    |
|  +--------------------------------+|
|  |      Écrire sur WhatsApp       ||
|  |         06 67 29 51 79         ||
|  +--------------------------------+|
|  Téléphone · E-mail · France       |
|                                    |
|  +--------------------------------+|
|  |             Nom *              ||
|  |            E-mail *            ||
|  |     Téléphone (facultatif)     ||
|  |        Offre concernée         ||
|  |  Votre situation (facultatif)  ||
|  |           Message *            ||
|  |        [ ] consentement        ||
|  |      Envoyer ma demande        ||
|  |          zone d'état           ||
|  +--------------------------------+|
|                                    |
+------------------------------------+

Contrat : le bloc WhatsApp précède toujours le formulaire dans le DOM et à l'écran ; sur ordinateur il est à gauche, sur tablette et mobile il est au-dessus ; champs en pleine largeur de leur colonne, hauteur ≥ 48 px, étiquettes visibles (pas de placeholder seul) ; deux listes facultatives visibles et modifiables, « Offre concernée » et « Votre situation (facultatif) », peuvent être présélectionnées par un parcours (offre ou boussole) ; le champ « Message » n'est jamais prérempli ; pendant l'envoi, le formulaire porte aria-busy, les champs sont en lecture seule et le bouton « Envoyer ma demande » est aria-disabled ; le champ piège n'est ni visible ni focalisable ni lu par les lecteurs d'écran ; la zone d'état (aria-live) réserve sa hauteur pour éviter tout décalage ; au moins 64 px d'espace libre sont réservés en bas de la section pour la carte flottante du footer (§4.4.11).

4.4.11 Footer « Passage & Clarté » (bloc J) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|   fin de #contact (fond clair) — au moins 64 px d'espace libre réservés sous son dernier contenu                     |
|                                                                                                                      |
|                              +----------------------------------------------------------+                            |
|                              |   [titre d'invitation — <p> en police d'affichage]       |                            |
|- - - - - - - - - - - - - - - |      [texte court, sans promesse de résultat]            | - - - jonction Contact/Footer|
|                              |   (Écrire sur WhatsApp)    Écrire via le formulaire ›    |   chevauchement :          |
|                              +----------------------------------------------------------+   --footer-overlap (80 px) |
|                                                                                                                      |
|   ~~ silhouettes de montagnes + rivière lumineuse (SVG vectoriel, décor) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|                                                                                                                      |
|       Navigation                           Contact                               Informations                        |
|       Philosophie · Méthode · …            06 67 29 51 79                        Mentions légales                    |
|       (un lien par ligne)                  astheoris.pro@gmail.com               Politique de confidentialité        |
|                                            France — accompagnement à distance    Retour en haut ↑                    |
|                                                                                                                      |
|       © [année] Malka Debleds                                                                                        |
|  C   L   A   R   T   É   (discret, géant, rogné par le bas, opacité 0,08)                                            |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|   fin de #contact — ≥ 64 px d'espace libre réservés                  |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |  [titre d'invitation — <p>]                                    | |
| - |- - - jonction Contact / Footer (chevauchement 64 px) - - - - - | |
|   |  (Écrire sur WhatsApp)       Écrire via le formulaire ›        | |
|   +----------------------------------------------------------------+ |
|   ~~ montagnes + rivière lumineuse (décor vectoriel) ~~              |
|                                                                      |
|   Navigation                        Contact                          |
|   Philosophie · Méthode…            06 67 29 51 79                   |
|   (un lien par ligne)               astheoris.pro@gmail.com          |
|   Informations                      France — à distance              |
|   Mentions légales, Confidentialité                                  |
|                                                                      |
|   © [année] Malka Debleds                                            |
|   C  L  A  R  T  É  (discret, rogné)                                 |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|  fin de #contact (≥ 64 px libres)  |
|  +--------------------------------+|
|  |[titre d'invitation — <p>]      ||
| - - jonction Contact / Footer - - -|
|  |  (  Écrire sur WhatsApp  )     ||
|  |  Écrire via le formulaire ›    ||
|  +--------------------------------+|
|  ~~ montagnes + rivière (décor) ~~ |
|                                    |
|  Navigation                        |
|  Philosophie · Méthode · …         |
|  Contact                           |
|  06 67 29 51 79                    |
|  astheoris.pro@gmail.com           |
|  France — accompagnement à distance|
|  Mentions légales                  |
|  Politique de confidentialité      |
|  Retour en haut ↑                  |
|                                    |
|  © [année] Malka Debleds           |
|  CLARTÉ (décor rogné, 0,08)        |
|                                    |
+------------------------------------+

Contrat : le footer est sombre et entièrement vectoriel (montagnes et rivière en SVG, sans image raster) ; la carte CTA est le composant unique FloatingCtaCard : elle est élevée visuellement (ombre, bordure champagne), en position: relative (jamais fixe ni collante) et chevauche la jonction Contact → Footer de --footer-overlap (48 px, 64 px puis 80 px selon la largeur, jeton de §5.11) ; au moins 64 px d'espace libre sont réservés en bas de #contact, de sorte qu'aucun texte ni aucune cible de Contact ne se trouve sous la carte et qu'aucun texte ne se superpose ; son titre est un <p> stylé en police d'affichage (pas un titre de plan) ; bouton principal « Écrire sur WhatsApp » et lien secondaire « Écrire via le formulaire » (cible #contact ; l'événement d'analytique des deux est footer_cta) ; liens d'une colonne séparés d'au moins 8 px et de hauteur ≥ 44 px au toucher ; le mot CLARTÉ est décoratif, statique (sans parallaxe), derrière tout le texte, en ivory-50 à l'opacité 0,08, font-size: clamp(6rem, 22vw, 20rem), sans effet sur la lecture ; padding bas = max(32px, env(safe-area-inset-bottom)). Le lien « Témoignages » du footer suit la même règle conditionnelle que celui du header.

4.4.12 Pages légales et pages système (404, erreur) #

Ordinateur — 1440 px #

+----------------------------------------------------------------------------------------------------------------------+
|   [Malka Debleds]   Philosophie Méthode Accompagnements Orientation À propos Contact               (Faire le point)  |
|   header à l'état « solid » (fond plein dès le chargement) ; liens vers /#<ancre>, aucun lien actif                  |
|                              [H1 « Mentions légales » ou « Politique de confidentialité »]                           |
|                              Dernière mise à jour : [date de legal.ts]                                               |
|                                                                                                                      |
|                              +----------------------------------------------------------+                            |
|                              |[contenu structuré en titres h2 / h3 — colonne de lecture, 72 caractères max.]|        |
|                              |                                                          |                            |
|                              +----------------------------------------------------------+                            |
|                                                                                                                      |
|   [footer identique à la page d'accueil, sans carte CTA]                                                             |
+----------------------------------------------------------------------------------------------------------------------+

Tablette — 834 px #

+----------------------------------------------------------------------+
|   [Malka Debleds]                           (Faire le point)   [≡]   |
|                                                                      |
|   [H1 de la page]                                                    |
|   Dernière mise à jour : [date]                                      |
|                                                                      |
|   +----------------------------------------------------------------+ |
|   |           [contenu — colonne de lecture 620 px max.]           | |
|   +----------------------------------------------------------------+ |
|                                                                      |
|   [footer]                                                           |
+----------------------------------------------------------------------+

Mobile — 390 px #

+------------------------------------+
|  [Malka Debleds]               [≡] |
|                                    |
|  [H1 de la page]                   |
|  Dernière mise à jour : [date]     |
|                                    |
|  [contenu — pleine largeur]        |
|  [titres h2 / h3]                  |
|                                    |
|  [footer]                          |
+------------------------------------+

Page 404 et page d'erreur (valable aux trois largeurs, spécification complète en §6.11) : un seul bloc centré, avec h1, une phrase d'explication, le bouton « Retour à l'accueil » vers /, et les moyens de contact (WhatsApp, e-mail). En développement et préproduction, les pages légales affichent en tête un bandeau « Informations légales à fournir par Malka avant mise en production » aux endroits où une valeur manque ; ce bandeau n'existe pas en production (garde G-01).

4.5 Empilement, couches et règles anti-chevauchement #

Principe : aucun chevauchement parasite, aucun texte illisible, aucun faux bouton, aucun élément décoratif bloquant. Les superpositions voulues (portrait devant le mot CLARTÉ, calques de paysage, carte flottante du footer sur la jonction Contact → Footer) sont des relations entre éléments décoratifs, entre un décor et rien d'autre, ou entre une carte et une zone réservée vide ; elles ne concernent jamais un texte porteur d'information ni une cible interactive.

4.5.1 Échelle d'empilement globale (z-index nommés) #

Toutes les valeurs z-index viennent de variables CSS nommées déclarées une fois dans src/styles/globals.css (leur définition de référence est en §5.7.4) ; aucune valeur numérique brute n'est autorisée dans un composant (règle de lint, §12).

Hormis le panneau de menu mobile, il n'existe aucune couche pour fenêtre modale, toast, bannière de cookies ni bouton flottant : ces éléments n'existent pas dans le produit.

4.5.2 Échelles locales (dans un contexte isolation: isolate) #

Les valeurs ci-dessous sont celles des variables nommées de §5.7.4 ; le code n'emploie que les noms.

Les sections Méthode (#methode) et Footer n'ont pas d'échelle locale nommée : leurs décors (halos et brume de fond ; ciel, montagnes, rivière lumineuse et mot CLARTÉ discret) utilisent --z-base et leur contenu (boussole et panneau ; carte flottante, colonnes, liens) utilise --z-content, dans un contexte isolation: isolate, l'ordre des décors entre eux étant donné par l'ordre du DOM.

Ordre de lecture des calques du hero, du plus bas au plus haut : lointain < brume < voile < mot < halo < portrait < crête proche < voile d'entrée < grain < contenu < bord de transition. Le voile est donc sous le mot, le halo et le portrait (le visage n'est jamais assombri) et au-dessus du paysage.

Règle : un décor local n'a jamais un z-index supérieur à celui du contenu de son contexte, à l'exception du bord de transition du hero (--z-hero-edge), qui ne contient ni texte ni cible interactive.

4.5.3 Texte sur image : voile et contraste #

1. Aucun texte porteur d'information n'est placé sur une zone d'image dont le contraste n'est pas garanti ≥ 4,5:1 (aussi pour le grand texte : on retient le seuil le plus strict).
2. Sur mobile et tablette, aucun texte n'est placé sur une image (D-20) : le voile n'est pas nécessaire.
3. Sur ordinateur, la colonne de texte du hero repose sur le voile --scrim-hero-x (valeurs de forest-950, définition de référence en §5.4.1) ; l'opacité reste au moins égale à 0,80 jusqu'à 60 % de la largeur, ce qui couvre le bord droit de la colonne de texte à toutes les largeurs de 1024 à 1920 px :

/* voile de lisibilité du hero — au-dessus du paysage, sous le mot CLARTÉ */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-scrim);
  pointer-events: none;
  background: var(--scrim-hero-x);
}

/* définition du jeton (référence : §5.4.1) */
:root {
  --scrim-hero-x: linear-gradient(
    90deg,
    rgb(14 34 25 / 0.94) 0%,
    rgb(14 34 25 / 0.86) 25%,
    rgb(14 34 25 / 0.80) 60%,
    rgb(14 34 25 / 0.36) 72%,
    rgb(14 34 25 / 0) 88%
  );
}

1. Le mot CLARTÉ est de couleur champagne-200 à plat, d'opacité 0,14 (hero) et, dans le footer, ivory-50 d'opacité 0,08 : texte ivory-50 posé sur la zone la plus claire possible du mot (forêt forest-900 mélangée à 14 % de champagne) conserve un rapport de contraste supérieur à 10:1. C'est cette garantie qui autorise le mot à passer sous la colonne de texte.
2. Les chiffres de confiance et le texte du footer ne reposent que sur des fonds unis forêt ou sur un voile de même nature. Les entrées du rail de méthode, placées sur le paysage, reposent sur leur capsule forest-950 d'opacité 0,80, jamais directement sur l'image.
3. Méthode de vérification automatique : pour chaque bloc de texte du hero, capturer la page avec le texte rendu transparent, échantillonner les pixels de la boîte du texte, prendre le pixel le plus clair (pire cas pour un texte clair) et calculer le rapport avec la couleur du texte ; échec en dessous de 4,5:1 (test en §15).

4.5.4 Règles anti-chevauchement et dégagements #

4.5.5 Test automatisé de non-chevauchement #

Les composants marquent leurs éléments avec data-layout="text" | "media" | "control" | "decor". Dans le hero, un attribut data-hero-box (headline, portrait, rail, etc.) est un alias nommé de la même boîte, posé en plus de data-layout. Le test E2E (§15) parcourt chaque section et vérifie, pour chaque viewport de §4.6.4, qu'aucune paire d'éléments text, media ou control ne s'intersecte et que les dégagements de AC-4.5-02 sont respectés.

// tests/e2e/layout-overlap.spec.ts — logique de référence
const kinds = '[data-layout="text"], [data-layout="media"], [data-layout="control"]';
for (const section of await page.locator('main > section').all()) {
  const boxes = await section.locator(kinds).evaluateAll((els) =>
    els.map((el) => ({ id: el.getAttribute('data-testid') ?? el.tagName, r: el.getBoundingClientRect() })),
  );
  // paires non imbriquées : aucune intersection, dégagement minimal respecté
  expect(findIntersections(boxes, { minGapPx: viewportWidth >= 1024 ? 24 : 16 })).toEqual([]);
}

4.6 Règles responsives #

4.6.1 Plages de largeur #

Les points de rupture sont ceux de Tailwind par défaut : sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Mobile < 768 px ; tablette 768–1023 px ; ordinateur ≥ 1024 px. Largeur minimale supportée : 320 px.

4.6.2 Comportement par section #

4.6.3 Règles transversales #

1. Typographie : tailles fluides par clamp() définies en §5 ; à 320 px, le plus long mot du titre du hero (« entreprise ») ne déborde pas ; aucun titre n'utilise de hyphens forcés.
2. Zoom et texte agrandi : à 200 % de zoom et à 400 % (équivalent 320 px), tout reste lisible, sans défilement horizontal ni perte de fonction ; si l'utilisateur augmente la taille de police du navigateur de 200 %, aucun texte n'est tronqué.
3. Orientation paysage sur téléphone (par exemple 844 × 390, largeur ≥ 768 px mais hauteur < 500 px) : mise en page tablette, hero sans hauteur forcée, header 64 px.
4. Très grands écrans : le conteneur reste à 1280 px ; les fonds (paysage, footer) s'étendent sur toute la largeur avec object-fit: cover ; la hauteur du hero est plafonnée à 1080 px ; le contenu est centré ; le rail du hero reste aligné sur le bord droit du conteneur, jamais sur le bord de la fenêtre.
5. Images : les calques de parallaxe haute définition ne sont rendus qu'à partir de 1024 px ; en dessous, seule l'image aplatie du hero (hero-mobile, object-fit: cover) est affichée, dans la bande encadrée (poids mobile ≤ 350 Ko au-dessus de la ligne de flottaison, §11).
6. Pointeur : le survol n'est jamais la seule manière d'accéder à une information ; les effets de survol sont limités à (hover: hover) and (pointer: fine).
7. Orientation : le site fonctionne dans les deux orientations ; il ne force jamais l'orientation.

4.6.4 Viewports de test #

• AC-4.6-01 : à chacun de ces viewports, / n'a aucun défilement horizontal et passe le test de non-chevauchement (§4.5.5).
• AC-4.6-02 : à 1024 × 768, la composition du hero à deux colonnes (7fr / 5fr) est active, sans chevauchement entre colonne de texte, portrait et rail.
• AC-4.6-03 : à 1023 × 768, la pile verticale est active (aucune composition à deux colonnes).

4.7 États vides et conditionnels au niveau de la page #

Les critères AC-4.7-nn ci-dessus se lisent : « dans la condition de la ligne, le comportement décrit est observé et testé » ; leur mise en œuvre détaillée est dans la section propriétaire de l'élément concerné (§6 pour les sections, §9 et §10 pour l'analytique, §11 pour l'indexation).

5. Design system #

Cette section est la source unique des valeurs visuelles du site : couleurs, contrastes, dégradés, typographie, espacements, rayons, ombres, icônes, règles d'imagerie, catalogue de composants et déclaration Tailwind. Les tokens de mouvement (durées, courbes, ressorts, décalages) appartiennent à la section 8 ; ce chapitre les référence sans les redéfinir. Les textes visibles (copy) appartiennent à la section 7 ; les ancres et identifiants de sections à la section 4.2 ; les versions de dépendances à la section 9.1.

5.1 Principes et architecture des tokens #

5.1.1 Principes directeurs #

1. Sobriété premium : une seule couleur d'accent chaude (champagne) par zone d'écran, jamais deux appels à l'action champagne dans le même viewport hors hero.
2. Profondeur par la lumière, pas par la décoration : atmosphères (halos, brume, grain) très faibles ; aucun dégradé sur du texte (le mot géant « CLARTÉ », décoratif, est un aplat translucide).
3. Lisibilité d'abord : tout texte repose sur un fond dont le contraste est calculé (§5.3). Aucun texte ne repose sur une photographie sans voile (« scrim ») conforme à §5.4.
4. Une seule source : aucune valeur hexadécimale, aucun rgb() ni durée codés en dur dans les composants ; tout passe par les classes utilitaires ou les variables CSS décrites ici.
5. Thème par attribut : l'alternance sections sombres / claires est pilotée par data-theme (§5.10), jamais par des classes de couleur propres à chaque section.

5.1.2 Trois couches de tokens #

5.1.3 Fichiers #

Un test unitaire tests/unit/design/no-hardcoded-colors.test.ts échoue si un fichier de src/**/*.{ts,tsx,css} autre que globals.css et tokens.ts contient un littéral #RRGGBB ou #RGB, ou si un fichier autre que ces deux-là et src/styles/motion.css (qui peut écrire rgb( pour l'ombre pré-rendue des survols, sans aucun littéral hexadécimal) contient rgb( ou hsl(.

5.2 Couleurs #

5.2.1 Palette primitive (verrouillée) #

Le blanc pur (#FFFFFF) et le noir pur (#000000) sont interdits dans l'interface (hors rgb(0 0 0 / x) pour les ombres natives des éléments système).

5.2.2 Tokens sémantiques #

Valeurs par thème (le thème est porté par l'attribut data-theme de l'élément ou d'un ancêtre ; voir §5.10) :

Les tokens error et success sont globaux (text-error, text-success, border-error, border-success) et réservés aux fonds clairs (§5.3.4). Sur un fond sombre, un état d'erreur utilise l'icône + un titre ivory-50 + une bordure champagne-400 (jamais le rouge).

5.2.3 Répartition d'usage (guide d'équilibre) #

5.3 Contrastes WCAG 2.x #

5.3.1 Méthode et seuils #

Rapport de contraste = (L₁ + 0,05) / (L₂ + 0,05), avec L la luminance relative WCAG 2 (sRGB linéarisé). Tous les chiffres ci-dessous sont calculés sur les valeurs hexadécimales de §5.2.1, arrondis à 0,01 par défaut.

Objectif projet : tout texte courant ≥ 4,5 : 1 et la plupart ≥ 7 : 1 ; le tableau de §5.3.2 et §5.3.3 liste les seules combinaisons autorisées.

5.3.2 Texte sur fonds sombres #

5.3.3 Texte sur fonds clairs #

5.3.4 Combinaisons INTERDITES pour du texte (liste de blocage) #

Aucun de ces couples n'est utilisé pour du texte de corps, d'étiquette, de bouton, de lien ou de placeholder. Le linter de tokens de §5.1.3 et la revue visuelle refusent toute classe correspondante.

5.3.5 Texte sur image : voiles minimum #

Voile (« scrim ») = aplat forest-950 (#0E2219) d'opacité α posé sur l'image. Valeurs calculées sur le pire cas théorique (image au blanc ivoire ivory-50 sous le voile) :

Règle : dans l'emprise de tout texte posé sur une image (hero, footer), l'opacité effective du voile est ≥ 0,80 à chaque pixel de la boîte du texte (marge de 8 px incluse). Les étiquettes du rail de méthode du hero (côté lumineux de l'image, étiquettes horizontales) sont posées sur des capsules forest-950 à 0,80 minimum avec texte ivory-50 (8,46 : 1 au pire). Les bordures d'un bouton fantôme sur image utilisent sage-200 (≥ 6,42 : 1 au pire) et non sage-400 (2,94 : 1 sur un voile à 0,75).

5.3.6 Contrastes des composants (non-texte, ≥ 3 : 1) #

Les bordures de cartes non interactives (--border, ≈ 1,3 : 1) sont purement décoratives ; l'information ne repose jamais sur elles (la séparation visuelle s'appuie aussi sur l'espacement et le changement de fond).

5.3.7 Contrastes des boutons (texte) #

Si un halo champagne (champagne-200) est superposé à un fond clair derrière du texte, son opacité ne dépasse pas 0,30 : turquoise-600 reste alors ≥ 4,58 sur ivory-100 (4,87 sur ivory-50) et ink-600 ≥ 6,82.

5.4 Dégradés et surcouches atmosphériques #

Toutes les surcouches : position: absolute, pointer-events: none, aria-hidden="true", z-index selon §5.7.4, jamais d'ombre ou de flou animés. Les animations de dérive (halos, brume) sont définies en section 8 ; ici, seul l'état de repos.

Les gradients utilisent l'interpolation in oklab (meilleure continuité des verts) avec repli automatique : chaque déclaration in oklab est précédée de la même déclaration sans in oklab (les navigateurs qui ne comprennent pas la seconde conservent la première).

5.4.1 Variables de dégradés (dans :root) #

:root {
  /* Hero — voile horizontal (desktop ≥ 1024px), seul voile du hero. α ≥ 0.80 jusqu'à 60 % de la largeur :
     le bord droit de la colonne de texte (titre, description, boutons, chiffres de confiance, rail horizontal
     de 1024–1279 px) se situe à ≈ 56 % de la largeur du viewport entre 1024 et 1440 px. */
  --scrim-hero-x: linear-gradient(90deg,
    rgb(14 34 25 / 0.94) 0%,
    rgb(14 34 25 / 0.86) 25%,
    rgb(14 34 25 / 0.80) 60%,
    rgb(14 34 25 / 0.36) 72%,
    rgb(14 34 25 / 0) 88%);

  /* Header transparent en haut du hero : α ≥ 0.80 sur les 72 px de la barre (52 % de 140 px). */
  --scrim-header: linear-gradient(180deg,
    rgb(14 34 25 / 0.88) 0%,
    rgb(14 34 25 / 0.80) 52%,
    rgb(14 34 25 / 0) 100%);

  /* Vignettage du hero (bords). */
  --vignette-hero: radial-gradient(120% 90% at 70% 40%,
    rgb(14 34 25 / 0) 55%,
    rgb(14 34 25 / 0.55) 100%);

  /* Halo champagne derrière le portrait. */
  --halo-champagne: radial-gradient(closest-side,
    rgb(235 217 179 / 0.55) 0%,
    rgb(212 180 122 / 0.22) 38%,
    rgb(212 180 122 / 0) 72%);

  /* Brume horizontale (bande de vallée). */
  --mist-sage: linear-gradient(180deg,
    rgb(211 221 208 / 0) 0%,
    rgb(211 221 208 / 0.28) 45%,
    rgb(211 221 208 / 0) 100%);

  /* Lueur de rivière (footer). */
  --glow-river: radial-gradient(ellipse 60% 40% at 50% 100%,
    rgb(79 168 162 / 0.35) 0%,
    rgb(79 168 162 / 0) 70%);

  /* Voile du footer — texte uniquement dans la zone α ≥ 0.80 (haut) ou sur la barre légale pleine. */
  --scrim-footer: linear-gradient(180deg,
    rgb(14 34 25 / 0.96) 0%,
    rgb(14 34 25 / 0.84) 55%,
    rgb(14 34 25 / 0.45) 100%);

  /* Transitions entre sections (bandes dont la hauteur est fixée par la section qui les porte). */
  --edge-hero-to-light: linear-gradient(180deg,
    rgb(14 34 25 / 0) 0%,
    rgb(143 168 143 / 0.35) 40%,
    rgb(233 224 204 / 0.85) 78%,
    rgb(251 248 241) 100%);
  --edge-light-to-dark: linear-gradient(180deg,
    rgb(251 248 241) 0%,
    rgb(251 248 241 / 0) 100%);
  --edge-dark-to-light: linear-gradient(180deg,
    rgb(19 48 31 / 0) 0%,
    rgb(19 48 31 / 0) 40%,
    rgb(251 248 241) 100%);

  /* Lumière chaude sur sections claires (discret : α champagne ≤ 0.30). */
  --warmth-light: radial-gradient(60% 50% at 85% 0%,
    rgb(235 217 179 / 0.30) 0%,
    rgb(235 217 179 / 0) 70%);
}

Les gradients sont définis sans mot-clé de couleur nommée ; pour les rendre in oklab, la couche base ajoute (une seule fois, @supports (background: linear-gradient(in oklab, red, blue))) les variantes :

@supports (background: linear-gradient(in oklab, red, blue)) {
  :root {
    --scrim-hero-x: linear-gradient(in oklab 90deg,
      rgb(14 34 25 / 0.94) 0%, rgb(14 34 25 / 0.86) 25%, rgb(14 34 25 / 0.80) 60%,
      rgb(14 34 25 / 0.36) 72%, rgb(14 34 25 / 0) 88%);
    --edge-hero-to-light: linear-gradient(in oklab 180deg,
      rgb(14 34 25 / 0) 0%, rgb(143 168 143 / 0.35) 40%,
      rgb(233 224 204 / 0.85) 78%, rgb(251 248 241) 100%);
    --edge-light-to-dark: linear-gradient(in oklab 180deg, rgb(251 248 241) 0%, rgb(251 248 241 / 0) 100%);
    --edge-dark-to-light: linear-gradient(in oklab 180deg,
      rgb(19 48 31 / 0) 0%, rgb(19 48 31 / 0) 40%, rgb(251 248 241) 100%);
  }
}

5.4.2 Hero — empilement et voiles #

Valable à partir de 1024 px. Le hero est un contexte d'empilement (position: relative; isolation: isolate) ; toutes les valeurs de z-index ci-dessous sont locales à ce contexte et nommées en §5.7.4.

Le voile est placé sous le mot, le halo et le portrait : le visage n'est jamais assombri. Le texte, les chiffres de confiance et le rail se situent dans la colonne de texte, entièrement couverte par la zone α ≥ 0,80 de --scrim-hero-x (de 0 à 60 % de la largeur) sur toute la hauteur : aucun voile vertical n'est nécessaire.

Sous 1024 px, le hero n'empile pas de calques derrière le texte : fond uni forest-950 (dégradé forêt discret sans image), texte au-dessus, puis une bande encadrée (rayon 20 px, overflow: clip) qui contient hero-mobile en object-fit: cover, le mot CLARTÉ et le portrait. Aucun texte n'est posé sur une image et aucun voile de lisibilité n'est requis ; la composition complète est en §4.4.2 et §6.2.2.

@media (min-width: 1024px) {
  .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: var(--z-hero-scrim);
    pointer-events: none;
    background: var(--vignette-hero), var(--scrim-hero-x);
  }
}
.hero-halo {
  position: absolute;
  z-index: var(--z-hero-halo);
  width: 70vmin;
  aspect-ratio: 1;
  background: var(--halo-champagne);
  pointer-events: none;
  /* Centrage et position finale : définis par la section 6.2 ; no filter: blur() (le dégradé est déjà doux). */
}
.hero-edge {
  position: absolute;
  z-index: var(--z-hero-edge);
  inset-inline: 0;
  bottom: 0;
  height: clamp(96px, 14svh, 160px);
  background: var(--edge-hero-to-light);
  pointer-events: none;
}

Le voile du hero doit garantir §5.3.5 dans la boîte de chaque texte ; la vérification automatisée est décrite en §5.13 (AC-5.4-03).

5.4.3 Header #

Le header est toujours visible (position: sticky, aucun masquage au défilement). Trois états, portés par l'attribut data-state :

.site-header[data-state="top"]    { background: transparent; }
.site-header[data-state="top"]::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 140px;
  background: var(--scrim-header); pointer-events: none; z-index: -1;
}
.site-header[data-state="scrolled"] {
  background-color: rgb(14 34 25 / 0.92);   /* forest-950, α 0.92 : ivory-50 12,58 · champagne-400 6,74 au pire */
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
  .site-header[data-state="scrolled"] {
    background-color: rgb(14 34 25 / 0.85);
    backdrop-filter: blur(12px) saturate(1.1);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .site-header[data-state="scrolled"] { background-color: rgb(14 34 25 / 0.97); }
  }
}
.site-header[data-state="solid"] { background-color: var(--color-forest-950); } /* pages légales, 404, erreur */

backdrop-filter n'est utilisé que sur le header scrolled et uniquement à partir de 768 px (coût GPU), avec la valeur unique blur(12px) ; en dessous de 768 px, ou si le navigateur ne le prend pas en charge, le fond est quasi opaque (0,92 sous 768 px, 0,97 en repli). La hauteur du header est constante dans les trois états (72 px ≥ 1024 px ; 64 px en dessous) : aucun décalage de mise en page au passage top → scrolled. Le comportement détaillé (seuils, navigation, menu mobile) est en §6.1.

5.4.4 Brume (mist) #

--mist-sage est posée en bande (height: 38%, bottom: 0) au-dessus de hero-mid. En section claire, une variante discrète est autorisée : background: radial-gradient(60% 50% at 20% 100%, rgb(169 217 211 / 0.30), rgb(169 217 211 / 0)) ; avec α ≤ 0,30, turquoise-600 reste ≥ 4,72 sur le mélange ivory-50 (calculé).

5.4.5 Lueur de rivière (footer) #

Le décor du footer (montagnes et rivière) est entièrement vectoriel (SVG en ligne, section 6.10) : il n'utilise aucun fichier d'image. --glow-river est posée au pied du footer, hauteur min(55%, 420px), sous la barre légale. La barre légale (liens « Mentions légales », « Politique de confidentialité », mention de droits) repose sur un aplat plein forest-950 : aucun texte n'est jamais superposé à la lueur ou aux silhouettes sans voile --scrim-footer à α ≥ 0,80 (zone haute du voile : 0 à 55 % de la hauteur du décor).

5.4.6 Mot géant « CLARTÉ » #

Élément décoratif : aria-hidden="true", user-select: none, pointer-events: none, non sélectionnable, absent du plan de lecture. Ne porte aucun texte porteur d'information : il ne doit jamais être le seul porteur d'un mot-clé. Sa couleur est pleine et plate (aucun dégradé) ; l'effet de profondeur vient uniquement de son opacité fixe et de l'ordre des calques (le portrait recouvre les dernières lettres, §5.4.2).

.word-clarte {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: var(--clarte-size, clamp(14rem, 21vw, 22rem));   /* hero ≥ 1024 px, centré sur le hero */
  line-height: 0.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(235 217 179 / var(--clarte-opacity, 0.14));      /* champagne-200, aplat */
}
.word-clarte--band {                                           /* hero < 1024 px : à l'intérieur de la bande encadrée */
  --clarte-size: clamp(4rem, 20vw, 7.5rem);
}
.word-clarte--footer {
  --clarte-size: clamp(6rem, 22vw, 20rem);
  --clarte-opacity: 0.08;
  color: rgb(251 248 241 / var(--clarte-opacity));            /* ivory-50, aplat */
}
@media (forced-colors: active) { .word-clarte { display: none; } }

• Opacités fixes : 0,14 dans le hero et la bande, 0,08 dans le footer ; elles sont aussi les valeurs de WORD_OPACITY en section 8 ({ hero: 0.14, footer: 0.08 }). Un texte ivory-50 superposé au mot du hero (champagne-200 à 0,14 sur forest-900) reste à 9,4 : 1 (calculé) : un chevauchement accidentel texte/mot est donc sans conséquence de lisibilité, mais la composition (section 6.2) évite tout chevauchement.
• Le mot est entièrement contenu : overflow-x: clip sur la section (jamais overflow: hidden, qui casserait position: sticky). Une vérification visuelle (AC-5.4-05) refuse une coupe > 3 % de la largeur du mot à 320, 768, 1440 et 1920 px ; si elle échoue, ajuster uniquement --clarte-size.
• Le mot écrit toujours « CLARTÉ » (É majuscule accentué) ; il n'est jamais traduit.

5.4.7 Texture de grain #

Tuile SVG public/textures/grain.svg (≈ 300 octets ; limite dure 4 Ko), répétée en 200 × 200 px, bruit fractal en niveaux de gris :

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <filter id="n" x="0" y="0" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/>
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <rect width="200" height="200" filter="url(#n)"/>
</svg>

@utility grain {
  position: relative;
  isolation: isolate;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--grain-z, var(--z-base));   /* le hero pose --grain-z: var(--z-hero-grain) */
    background-image: url("/textures/grain.svg");
    background-size: 200px 200px;
    opacity: var(--grain-opacity, 0.04);
    pointer-events: none;
  }
}
[data-theme="dark"]  { --grain-opacity: 0.05; }
[data-theme="light"] { --grain-opacity: 0.03; }

Règles : opacité comprise entre 0,03 et 0,05 ; jamais de mix-blend-mode ni de grain position: fixed plein écran (repeints coûteux) ; appliqué aux sections hero, méthode, footer et, optionnellement, aux sections claires via la classe grain ; désactivé en forced-colors: active (display: none sur le pseudo-élément). Le SVG est servi depuis public/textures/ avec Cache-Control: public, max-age=31536000, immutable (§11.3.8) ; son nom change si son contenu change.

5.5 Typographie #

5.5.1 Familles #

Décision : l'italique de Fraunces est chargée comme seconde instance next/font non préchargée (preload: false). Le navigateur ne la télécharge que lorsqu'un em de titre ou une citation d'accroche est effectivement rendu ; aucun préchargement n'alourdit le chemin critique. font-synthesis: none est posé sur html (§5.11) : le navigateur ne fabrique jamais de faux italique ni de faux gras. L'italique est réservée aux em des titres (h1–h3) et aux citations d'accroche (.pull-quote) : dans le corps de texte, em est rendu en graisse 600 (Manrope n'a pas d'italique) sans changement de couleur (le contraste du texte courant n'est jamais modifié, §5.3.4). L'accent coloré de l'em n'est appliqué qu'aux textes de 24 px et plus (h1, h2, citation d'accroche), jamais à un h3 ni au corps de texte. Budget de l'italique : un seul fichier woff2 de plus (voir §11.3.4).

// src/app/fonts.ts
import { Fraunces, Manrope } from 'next/font/google';

export const fraunces = Fraunces({
  subsets: ['latin', 'latin-ext'],
  axes: ['opsz'],            // wght variable par défaut
  style: ['normal'],
  display: 'swap',
  variable: '--font-display',
  adjustFontFallback: true,
});

export const frauncesItalic = Fraunces({
  subsets: ['latin', 'latin-ext'],
  axes: ['opsz'],
  style: ['italic'],
  display: 'swap',
  variable: '--font-display-italic',
  preload: false,            // chargée à la demande, jamais préchargée
  adjustFontFallback: true,
});

export const manrope = Manrope({
  subsets: ['latin', 'latin-ext'],
  display: 'swap',
  variable: '--font-sans',
  adjustFontFallback: true,
});

src/app/layout.tsx applique className={${fraunces.variable} ${frauncesItalic.variable} ${manrope.variable}} sur <html lang="fr">. Attention à la collision de noms : les variables --font-display, --font-display-italic et --font-sans sont posées par next/font, donc les déclarations Tailwind correspondantes utilisent @theme inline pour référencer ces variables sans les redéfinir (§5.11).

5.5.2 Échelle fluide #

Interpolation linéaire entre 320 px et 1440 px de viewport, bornée ; toutes les valeurs en rem + vw pour respecter le zoom du texte (WCAG 1.4.4). Taille minimale de texte affichée : 12,8 px (0,8rem).

Notes :

• display-xl est le seul token à deux valeurs : la valeur ≥ 1024 px est posée par une règle @media (min-width: 1024px) sur :root (§5.11). Au-dessus de 1024 px le H1 occupe exactement trois lignes fixes sans retour automatique (white-space: nowrap par ligne, section 6.2) : une ligne de 22 caractères mesure ≈ 495 px à 1024 px, ≈ 591 px à 1280 px et ≈ 634 px à 1440 px, toujours inférieure à la colonne de texte (509 / 658 / 733 px, §6.2.2).
• Les valeurs ≥ 24 px sont du « grand texte » (§5.3.1). heading-md à 20 px et en dessous est du texte normal.
• Les champs de formulaire utilisent font-size: max(1rem, 16px) (jamais plus petit : sinon iOS zoome au focus).
• font-variant-numeric: lining-nums tabular-nums sur figure, price et le compteur de caractères ; si la police ne propose pas la fonctionnalité, le rendu reste correct.
• font-optical-sizing: auto sur Fraunces ; aucun font-variation-settings manuel.

5.5.3 Longueurs de ligne et rythme #

Coupures : hyphens: auto (avec lang="fr") uniquement sur les paragraphes de corps < 768 px ; hyphens: manual pour tout titre. Les adresses e-mail et URL longues reçoivent overflow-wrap: anywhere. L'espacement vertical entre paragraphes de corps est 1em ; entre titre et paragraphe, 0.75em à 1em selon le niveau.

5.5.4 Règles d'usage #

5.5.5 Chargement des polices #

Voir §11.3.4 (préchargement, subsets, budget d'octets, métriques de repli). Aucun <link> vers un domaine tiers de polices n'est autorisé.

5.5.6 Typographie française : règles et assistant #

Règles appliquées à tout texte visible (contenu, boutons, métadonnées affichées, messages de formulaire). Les textes de la section 7 sont écrits en texte normal (espaces simples) : l'assistant frTypo ci-dessous est la seule source des espaces insécables, appliquée une fois au chargement du contenu ; il est idempotent.

Aide typographique src/lib/typography/fr.ts (fonctions pures, testées unitairement) :

// src/lib/typography/fr.ts
export const NNBSP = '\u202F'; // espace fine insécable
export const NBSP = '\u00A0';  // espace insécable

export interface FrTypoOptions {
  /** Convertit ' en ’ (défaut : true). Désactivé pour les citations verbatim. */
  apostrophes?: boolean;
  /** Convertit ... en … (défaut : true). */
  ellipsis?: boolean;
}

/** URL et adresses e-mail : jamais modifiées (un « ? » ou un « : » y fait partie de la syntaxe). */
const PROTECTED = /(?:https?:\/\/|www\.)\S+|\S+@\S+/gu;
const SPACES = '[ \\u00A0\\u202F]*';

export function frTypo(input: string, opts: FrTypoOptions = {}): string {
  const { apostrophes = true, ellipsis = true } = opts;
  const stash: string[] = [];
  let s = input.replace(PROTECTED, (m) => `\uE000${stash.push(m) - 1}\uE001`);
  if (ellipsis) s = s.replace(/\.{3}/g, '…');
  if (apostrophes) s = s.replace(/(\p{L})'(\p{L})/gu, '$1’$2');
  // Ponctuation haute : jamais en début de chaîne, jamais entre deux signes hauts (« ?! » reste collé).
  s = s.replace(new RegExp(`(?<=[^\\s;!?])${SPACES}([;!?])`, 'gu'), `${NNBSP}$1`);   // ; ! ?  -> U+202F
  s = s.replace(new RegExp(`(?<=[^\\s:])${SPACES}:(?=\\s|$)`, 'gu'), `${NBSP}:`);         // :      -> U+00A0 (« 12:30 » intact)
  // Guillemets français.
  s = s.replace(new RegExp(`«${SPACES}`, 'gu'), `«${NNBSP}`).replace(new RegExp(`${SPACES}»`, 'gu'), `${NNBSP}»`);
  // Tiret d'incise.
  s = s.replace(new RegExp(`${SPACES}—${SPACES}`, 'gu'), `${NBSP}— `);
  // Pourcentages et nombres suivis d'un mot court / d'une unité.
  s = s.replace(new RegExp(`(\\d)${SPACES}%`, 'gu'), `$1${NBSP}%`);
  s = s.replace(/(\d\+?) (?=\p{L}{1,10}(?!\p{L}))/gu, `$1${NBSP}`);
  return s.replace(/\uE000(\d+)\uE001/g, (_, i: string) => stash[Number(i)] ?? '');
}

/** Inverse pour les métadonnées SEO et attributs techniques : remplace U+00A0/U+202F par une espace normale. */
export function stripFrTypo(input: string): string {
  return input.replace(/[\u00A0\u202F]/g, ' ');
}

Règles d'application :

1. Le chargeur de contenu (getContent, voir §9.3) applique frTypo récursivement à toutes les chaînes sauf les clés listées dans TYPO_SKIP_KEYS = ['id','href','url','src','email','phoneE164','whatsappE164Digits','slug','lastUpdated','alt']. Pour la clé quote des témoignages, le chargeur appelle frTypo(text, { apostrophes: false, ellipsis: false }) : le texte validé par Malka reste verbatim, seules les espaces avant la ponctuation haute sont rendues insécables. alt est exclu uniquement parce que les textes alternatifs sont lus par les lecteurs d'écran : ils conservent des espaces normales.
2. Les messages issus de la validation (schéma Zod partagé, voir §9.4) et les libellés dynamiques sont passés par frTypo dans les composants FormField et Alert.
3. Les métadonnées (title, description, Open Graph, JSON-LD) utilisent stripFrTypo (voir §11.1) : les extraits des moteurs de recherche affichent des espaces normales.
4. whatsappMessage traverse frTypo au chargement comme tout autre texte ; le constructeur d'URL wa.me (§9.8) l'encode ensuite tel quel (U+00A0 → %C2%A0, U+202F → %E2%80%AF), sans jamais le modifier.
5. Un test unitaire tests/unit/typography/fr.test.ts couvre au minimum : Prêt ?, Bienvenue !, Contact : x, « mot », 6 mois, l'entreprise, https://exemple.fr/page?x=1, contact@exemple.fr, 12:30, Quoi ?!, une chaîne commençant par ?, Nom — Titre, ... et l'idempotence (frTypo(frTypo(x)) === frTypo(x)).
6. Si la police ne contient pas le glyphe U+202F, le navigateur utilise la police de repli pour cet espace : aucun « tofu » n'est visible (c'est une espace).

5.6 Espacement, grille et conteneurs #

5.6.1 Échelle d'espacement (base 4 px) #

--spacing: 0.25rem (Tailwind) ; échelle recommandée pour les décisions de design :

Espace vertical de section (token --spacing-section) : clamp(4.5rem, 2.5rem + 8vw, 9rem) (72 px → 144 px). Utilitaire : py-section, utilisé par toutes les sections (Section, §5.12.1) : aucune section ne déclare de remplissage vertical en pixels propre. Espace entre titre de section et contenu : clamp(2.5rem, 1.5rem + 4vw, 5rem) (--spacing-block, utilitaire gap-block / mt-block).

5.6.2 Grille et conteneurs #

@utility container-page {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  max-width: calc(var(--container-content) + 2 * var(--gutter));
}
:root { --gutter: 1.5rem; }
@media (min-width: 768px)  { :root { --gutter: 2.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 4rem; } }

Les éléments pleine largeur (paysages, voiles) sortent du conteneur (position: absolute; inset: 0 dans la section) ; le contenu éditorial, lui, reste dans container-page.

5.6.3 Hauteurs fixes #

5.7 Rayons, ombres, bordures, empilement #

5.7.1 Rayons #

Le portrait détouré du hero n'a jamais de rayon (silhouette naturelle).

5.7.2 Ombres et élévation #

Ombres teintées forest-950, jamais noires. Principe : les ombres ne sont pas animées (animation interdite de box-shadow ; voir §8). Un survol « élève » une carte via la classe .motion-lift (§5.12, définie en §8) : un pseudo-élément ::after portant l'ombre cible apparaît en fondu (opacity) et la carte monte de translateY(-4px) (valeur unique de tout le site).