# Brief de production — Site Divinemenciel **Objet :** plan de production du nouveau site Div, à utiliser dans Claude Design. **Méthode :** patchwork assumé — hero issu de Vivre.agency, ossature et grille issues de Whatmattersagency, le tout habillé à la charte Div (design system existant). --- ## 0. Comment utiliser ce document À fournir à Claude Design, en partant du design system Div déjà en place dans le projet : 1. **Ce brief** (le plan section par section ci-dessous). 2. **Les deux adresses web de référence**, pour le rendu visuel cible : - Hero → https://vivre.agency/ - Structure / cards / rythme → https://www.whatmattersagency.com/ 3. Rappel : Claude Design verra le *rendu* des sites mais n'en lit pas la structure fine. Ce brief traduit ce qui a été extrait des maquettes Figma, pour qu'il n'ait rien à deviner. --- ## 1. Le fil conducteur (grammaire commune aux deux références) Ces principes tiennent tout le site ensemble et évitent l'effet collage. Les deux sites de référence les partagent déjà, ce qui rend le mariage naturel : - **Label + trait** en tête de chaque section : un mini-titre en capitales fines, suivi d'un trait horizontal de ~50 px. Signature visuelle récurrente. - **Grille centrée ~1296 px** (conteneur principal), marges latérales généreuses. - **Titres éditoriaux massifs**, phrasé éditorial et non commercial. - **Bordures horizontales pleine largeur** entre les sections, qui rythment le scroll. - **Tout est habillé à la charte Div** : couleurs, typo, espacements depuis le design system. Les couleurs des références (orange, bleu, vert WMA) sont à remplacer par la palette Div (terracotta, etc.). --- ## 2. Architecture multi-pages - **Accueil** — la vitrine narrative (détaillée ci-dessous). - **Réalisations** — détail de chaque projet (réutilise la mosaïque de cards). - **Services** — développement de l'offre (réutilise la grille services). - **À propos** — présentation Div, équipe (modèle « People behind » de Vivre). - **Contact** — formulaire + coordonnées. **Navigation :** logo à gauche, menu centré ou à droite, un bouton CTA à l'extrême droite. Header léger, fond transparent sur le hero puis plein au scroll. --- ## 3. Page d'accueil — section par section ### 3.1 — Hero (signature Vivre.agency) La pièce maîtresse. Structure à 4 couches : 1. **Image plein cadre** (pleine fenêtre, ~100vh). Visuel Div immersif (food / hospitality / événementiel). 2. **Overlay sombre** semi-transparent uniforme par-dessus l'image, pour la lisibilité du texte clair. 3. **Accroche ancrée en bas à gauche** (pas centrée — c'est ce qui donne le côté éditorial premium) : - Mini-label en capitales fines + trait 50 px à sa droite (ex. une signature Div courte). - Titre H1 massif sur 2 lignes (le positionnement Div donne le texte). 4. **Animation :** le titre apparaît à la montée ; ton à caler sur Div. ### 3.2 — Bandeau manifeste (transition Vivre) Juste sous le hero, un paragraphe d'intro pleine largeur, gros corps de texte. - **Animation signature :** le texte se révèle **mot à mot** au scroll (apparition en cascade). C'est l'effet premium à capturer. - Sert de pont narratif entre le hero et le corps de la page. ### 3.3 — Réalisations (mosaïque Whatmattersagency) - Label « Sélection » (ou équivalent Div) + trait, puis titre éditorial d'intro. - **Grille asymétrique sur 2 rangées** : chaque rangée combine une card large + une card étroite, et l'ordre s'inverse d'une rangée à l'autre (large-étroite puis étroite-large). C'est ce décalage qui crée le rythme et évite l'effet catalogue. - **Anatomie d'une card :** image à coins francs (border-radius quasi nul) ; sous l'image, à gauche le titre du projet en gros + une ligne de services en gris, à droite le numéro (01), (02)… - **Astuce à reprendre :** le fond de chaque card est une couleur de marque Div ; l'image se pose dessus. Si une image charge mal, on voit la couleur Div derrière, jamais du blanc. - **Animation signature :** les titres de projet sont animés **lettre par lettre** (effet flip / bascule vertical à l'apparition ou au survol). C'est ce qui donne le premium. ### 3.4 — Services / Comment on aide (grille Vivre) - Label « Solutions » (ou équivalent Div) + trait, puis titre éditorial. - **3 colonnes**, chacune : icône + titre court + une phrase éditoriale brève et poétique (modèle « Social / Content / Performance » de Vivre, à adapter aux services Div : food branding, événementiel, etc.). - Ton : sobre, évocateur, jamais une liste de prestations sèche. ### 3.5 — Testimonials / Ils en parlent - Label « Ils en parlent » + trait, puis titre. - Bloc citation sur un fond contrasté (rectangle pleine largeur dans la grille). Une citation client mise en avant, avec attribution. - Option : carrousel léger si plusieurs témoignages. ### 3.6 — Clients / Logos - Label « Clients » + trait, puis titre. - **Grille de logos en cellules régulières** (modèle Vivre : cellules ~240×124, logo centré dans chaque). Logos en monochrome pour l'homogénéité. ### 3.7 — Contact / Footer - Gros bloc de pied : coordonnées Div, liens, réseaux. - **Touche signature Vivre :** une vidéo en fond dans le footer (boucle discrète) pour la fin de page premium. Optionnel selon les assets Div disponibles. --- ## 4. Récapitulatif des emprunts | Section | Source | Ce qu'on reprend | |---|---|---| | Hero | Vivre.agency | Image + overlay + accroche bas-gauche + label/trait + titre massif | | Bandeau manifeste | Vivre.agency | Paragraphe révélé mot à mot au scroll | | Réalisations | Whatmattersagency | Mosaïque asymétrique, fonds de marque, titres animés lettre par lettre, numérotation | | Services | Vivre.agency | Grille 3 colonnes icône + titre + phrase éditoriale | | Testimonials | Whatmattersagency / Vivre | Bloc citation sur fond contrasté | | Clients | Vivre.agency | Grille de logos en cellules régulières | | Footer | Vivre.agency | Bloc coordonnées + vidéo de fond optionnelle | | **Fil conducteur global** | **Commun aux deux** | **Label + trait 50 px, grille 1296 px, titres éditoriaux, bordures entre sections** | --- ## 5. Notes d'animation (à recréer dans Claude Design) - **Hero :** titre qui apparaît à la montée. - **Manifeste :** révélation mot à mot au scroll (la plus distinctive). - **Cards réalisations :** titres animés lettre par lettre (flip vertical). - **Sections :** légère apparition/translation à l'entrée dans le viewport. Ces effets ne se « voient » pas dans une simple capture — ils sont décrits ici pour être reconstruits directement dans Claude Design.