Direction Artistique & Interactions — v0

Projet Site Maison Crosnier · 21 juillet 2026 Extrait des maquettes du graphiste (page d'accueil, Arpajon). Couche « présentation » possédée entièrement par le site — indépendante de la caisse. Objectif : traduire les visuels en éléments réutilisables pour le développement (design tokens, composants, interactions).

Important — le texte des maquettes est du remplissage. Seule la direction visuelle et structurelle est retenue (palette, typo, motifs, mise en page, schémas d'interaction). Aucun contenu textuel des maquettes ne fait spec : ni les libellés de catégories, ni les mentions de services (livraison, cutoff « avant 20h »), ni les prix.

Les valeurs de couleur et les noms de police ci-dessous sont estimés visuellement ; les valeurs exactes et les fichiers sources sont à récupérer auprès du graphiste (voir §9).

1. Marque & univers

Maison Crosnier, Pâtissier-Chocolatier — Arpajon. Wordmark en capitales serif, avec la mention « ARPAJON ».
Mascotte : la marmotte. Logo = marmotte dessinée au trait, doré. Sous-univers éditorial « La Marmotte ».
Motif signature 1 : le feston (bord ondulé façon papier dentelle / caissette de pâtisserie) en haut de la bande dorée.
Motif signature 2 : les empreintes de marmotte (traces de pattes) — motif de marque à fort potentiel d'animation (loader, transitions, révélations au scroll).
Ton : artisanal, gourmand, chaleureux, premium mais accessible.
Idée déco évoquée : devanture végétalisée.
Sites de référence (inspiration) : Yann Couvreur, Cyril Lignac, Lenôtre, Pierre Hermé, Cédric Grolet, Sébastien Gaudard (Pâtisserie des Martyrs), Patrick Roger, Le Cacaotier, Yannick Alléno (chocolats), Gilles Cresno. Registre commun : minimalisme élégant, grandes photos, beaucoup de blanc, typographies fines.

2. Palette (design tokens — hex approximatifs)

:root {
  --creme:        #F7F0E0;  /* fond principal, ivoire chaud */
  --creme-clair:  #FBF7EE;  /* cartes, zones claires */
  --or:           #C3A15A;  /* bande de services, accents, logo */
  --or-fonce:     #B08F3C;  /* survols / états actifs */
  --texte:        #2E2A25;  /* brun-noir, texte courant */
  --texte-invers: #FFFFFF;  /* texte sur image / sur or */
  --filet:        #C3A15A;  /* filets & séparateurs fins */
}

Usage : fond crème dominant, or en aplat pour la bande de services et en accent (nav active, filets, prix), texte brun-noir, blanc sur les photos et sur l'or.

3. Typographie

Titres & navigation : sans-serif light, en CAPITALES, fortement espacées (letter-spacing ≈ 0.12–0.18em). Effet aérien, élégant.
Wordmark / logo : serif classique en capitales.
Corps : même sans-serif en graisse normale.
Polices exactes à obtenir du graphiste. Alternatives Google Fonts pour le dev / simulateur, le temps d'avoir les vraies : titres → Jost, Questrial ou Josefin Sans (Light) ; wordmark serif → Cormorant Garamond ; corps → la même sans en Regular.

4. Motifs & éléments graphiques

Feston en bordure haute de la bande dorée : à réaliser en SVG répétable (pas une image bitmap), pour rester net et responsive.
Empreintes de marmotte : asset décoratif / d'animation (voir §8).
Filets fins dorés comme séparateurs (ex. entre les colonnes de services, sous « EXPÉDITION OFFERTE DÈS 70€ »).
Icônes de services au trait (macarons, scooter, sac, bouclier) — style linéaire fin, doré/blanc.

5. Imagerie & iconographie

Photos produits en tuiles carrées, plein cadre, haute qualité (entremets, chocolats, macarons, pâtes de fruits…). Format 1:1.
Photo d'ambiance boutique en bandeau large.
Icônes header : recherche, Instagram, compte, panier (le dernier glyphe est à confirmer — cadenas/panier).

Header (sur les 3 zones) : à gauche « ☰ COMMANDER » (ouvre le menu complet), logo centré, à droite icônes (recherche, Instagram, compte, panier).

Barre de navigation principale — méga-menus (navigation CONFIRMÉE, fichier « NAV / REFs ») :

NOS CRÉATIONS → Pâtisseries · Chocolats · Macarons · Pains & Viennoiseries · Gourmandises · Le Salé
SAISONS → Collection du moment · Noël · Pâques · Fêtes & rendez-vous
ÉVÉNEMENTS → Mariages & célébrations · Entreprises · Pièces & créations sur mesure
LA MARMOTTE → Jouer aux goûts · L'univers de la Marmotte

Ces catégories sont la taxonomie d'affichage (navigation / merchandising, gérée côté site). Elles sont distinctes des familles de politique de commande (qui pilotent les délais), lesquelles ne sont pas encore figées. Un produit relèvera des deux.

Menu « Commander » (☰) : ouvre un panneau latéral gauche listant toute l'arborescence dépliée.

Hero : bandeau image + titres empilés (les 4 univers) + un produit mis en avant (création de saison). Ligne « EXPÉDITION OFFERTE DÈS 70€ ».

Bande de services (dorée, bord festonné), 4 colonnes : Achat en boutique (Ouvert 7/7 – 24/24) · Livraison J+1 (par coursier, Paris & Île-de-France) · Click & Collect (commande avant 20h, retrait dès 10h le lendemain) · Paiement sécurisé.

Footer : logo centré (Pâtissier-Chocolatier — Arpajon).

7. Composant clé : la carte produit

Tuile carrée (photo). Interaction au survol (visible dans les maquettes) : l'image zoome légèrement / change, et une étiquette blanche apparaît par-dessus avec le nom du produit, le prix, et un bouton « + » d'ajout (ex. « PÂTES DE FRUITS D'AUTOMNE — 24 € ⊕ »).

Lien direct avec US-004 (ajout sans quitter le catalogue) et le mode vitrine/commande : en mode vitrine (sans créneau), le « + » déclenche d'abord le choix de la date/créneau.
Prévoir un équivalent tactile (pas de survol sur mobile) : l'étiquette est visible ou apparaît au tap.

8. Interactions & animations

Ce que les maquettes montrent déjà :

Méga-menus au survol/clic des 4 univers ; panneau latéral au clic sur « Commander ».
Survol carte produit : zoom/révélation d'étiquette + « + ».

Pistes cohérentes avec la marque (à valider avec tes idées) :

Empreintes de marmotte comme transition (traces qui traversent l'écran au chargement / entre deux pages) ou comme révélation au scroll.
Feston animé subtilement à l'apparition de la bande de services.
Apparitions douces au scroll (fondu + léger décalage) sur les tuiles produits.

Cadre à respecter (déjà noté au §15 de la synthèse) : mobile-first, performance (les animations lourdes pénalisent le chargement, surtout sur mobile), et accessibilité — respecter prefers-reduced-motion : toute animation non essentielle doit se désactiver proprement pour les personnes qui le demandent.

[À compléter par tes idées de navigation / transitions / effets — je les structure ici.]

9. À récupérer auprès du graphiste

Polices (fichiers ou noms exacts + licences web).
Couleurs exactes (codes hex / références) — les valeurs du §2 sont estimées.
Logo en vectoriel (SVG) — marmotte + wordmark — et les déclinaisons.
Icônes (services, header) en SVG.
Motif d'empreintes et feston en vectoriel.
Maquettes mobiles (les visuels fournis sont desktop) : header, menu, grille, fiche produit, tunnel.
Gabarits des autres pages (catégorie, fiche produit, panier, tunnel de commande).

10. Note de modèle

Le texte des maquettes étant du remplissage, les mentions de livraison et de cutoff n'ont aucune valeur de spec (le périmètre reste retrait / drive tel que défini dans la synthèse).

Un point conceptuel reste néanmoins valable et à garder pour le modèle : distinguer la catégorie d'affichage (navigation / merchandising, gérée côté site) de la famille de politique de commande (qui pilote les délais). Un produit relèvera des deux. Les familles de politique de commande ne sont pas encore figées — à arrêter ultérieurement.