L’accueil
La page d’où le système est tiré, section par section.
L’ordre
Douze blocs, dans l’ordre de l’accueil précédent, tranché par JB : offres, équipe, engagements, réalisations, citations, IA, suivi, contact. Deux bandes de cellules allumées séparent les offres de l’équipe, puis le suivi du contact. Chaque bloc est un composant de src/components/trame, nourri par src/data/accueil-v3.ts ou par une collection.
| Section | Composants | Données |
|---|---|---|
| Ouverture | Section tr-une tr-une--affiche + Hero variante « centre » : l’affiche, puis la démonstration | V3.surtitre, MARQUE.promesse, V3.ouverture.sousTitre, V3.cta, V3.ouverture.boutonOffres ; la scène hero ; six offres autour d’elle (OFFRES_UNE : le nom lu dans V3.offres.cartes, la cible dans la table CIBLES écrite dans la page) et V3.offres.bouton ; plus d’annotations |
| Logos | Section tr-logos + Logos, en carrousel | V3.logos.libelle, V3.logos.ordre, puis les cas de la collection realisations qui ont l’accord du client et un logo |
| Offres | Tete cellule (surligne « grandir ») + Grille tr-offres + Carte ×6 | V3.offres, les technos des fiches src/content/offres, sans le prix ; six cartes, des rangées de trois pleines : aucune cellule allumée ; la note du Crédit Impôt Innovation (V3.offres.cii) reste sur /offres/ |
| Bande | Bande motif a | aucune : onze cellules décrites dans le composant |
| Équipe | Tete centre (surligne « sous le même toit ») + Grille tr-equipe + Cellule tr-equipe__photo + EmplacementPhoto + Cellule tr-role ×4 + Scene | V3.equipe, PHOTO_GROUPE, les illustrations role-chef-de-projet, role-design, role-strategie, role-dev ; plus de faits, de bouton ni de corps sous la grille |
| Engagements | Tete gauche (surligne « compter ») + Engagements | V3.engagements.liste : cinq cellules, puis deux cellules allumées qui finissent la rangée de quatre |
| Réalisations | Tete ligne + Bouton + Grille tr-cas + Cas ×6, chacune avec sa Vitrine (format petite, celui des cartes par trois de la page Réalisations : 16/11, sans puce) | V3.realisations.ids lus dans la collection realisations, V3.realisations.offreLibelle, V3.realisations.resumes ; la matière, le support et la vitrine des fiches, P.realisations.reserve ; plus de briefs photo des cas (la liste BRIEFS) dans la page depuis le 13 octobre |
| Citations | Mur | la collection verbatims, V3.verbatims, V3.realisations.bouton |
| IA | Grille tr-ia + Cellule tr-ia__texte, sur le blanc, sans aplat (étiquette, titre, chapô, corps, Bouton, EnAttente) + Cellule tr-ia__dessin pâle et unie, en fondu + Scene ia-scene fixe v2Seulement (le schéma v2, entier, dans une boîte 4/3 ; sans le SVG, la réserve « Scène à produire » et aucune annotation, jamais l’ancienne scène peinte) + Puce ×5, ancrées : les trois étapes sous le flux vert, leur trait parti du flux, et deux repères au-dessus de leurs objets ; la boîte flotte d’un bloc, dessin et annotations | V3.ia, dont V3.ia.etapes pour les trois étapes ; « Le mail » et « Le logiciel métier » écrits dans la page (PUCES_IA) ; ANCRES_IA (trame/annotations.ts) ; le titre est écrit dans la page pour porter le surlignage ; accordClient de bosco-services choisit le corps nommé ou anonyme, et le bouton vers le cas |
| Suivi | Tete centre (surligne « mise en ligne ») + Dome + Puce ×3, ancrées sur les objets du schéma + Tarifs + p.tr-suite + Bouton | V3.suivi, l’illustration suivi, ANCRES_DOME (trame/annotations.ts) |
| Bande | Bande motif b | aucune : onze cellules, décoratives |
| Contact | Section tr-contact + Contact : la grille tr-joindre, la tête en cellule pâle, le formulaire et l’agenda | V3.contact, dont agenda et boutonAgenda, V3.cta |
Chaque section est une Section de la trame : sa ligne pointillée traverse la fenêtre, son contenu tient sur 1184 px entre les deux rails. Les cellules vont jusqu’aux rails ; une tête de section garde une marge de clamp(20px, 3vw, 48px). Le point de contact fait exception : sa grille s’arrête à 1100 px, centrée.
Le 12 octobre, JB allège l’accueil : la note du Crédit Impôt Innovation quitte le bas des offres (elle reste sur /offres/), et sous l’équipe, la rangée des faits, le bouton « Rencontrer l’équipe » et la phrase V3.equipe.corps sont retirés. Les faits restent sur la page de l’équipe (/a-propos/). Le même jour, le premier écran devient « le grand titre centré », choisi par JB parmi quatre propositions, le bandeau des clients devient un carrousel et le point de contact est refait.
Le premier écran
« Le grand titre centré », depuis le 12 octobre. D’abord l’affiche, tout au centre : l’étiquette, le titre sur deux lignes qui montent l’une après l’autre, jusqu’à 100 px, le chapô et les deux boutons, sur une grille qui s’efface sous le titre. Puis la démonstration, sur toute la largeur de la trame : la scène hero au centre de sa cellule pâle, les offres autour dans leurs cases, des liens vers leurs pages, chacune reliée par un trait d’attache à l’objet qu’elle nomme dans la scène. Plus d’annotations sur la scène, ni de parallaxe, ni de recul au défilement : ils restent à l’en-tête des pages intérieures.
Agence web, mobile et IA · Nantes et Paris
Conçu pour être utile.
Construit pour rapporter.
Vous vous lancez, ou vos outils ne suivent plus. On construit le site, la boutique, l’application ou l’outil qui fait vendre ou gagner du temps.
Appelsrc/pages/index.astro, src/components/trame/Hero.astro
// Dans le frontmatter de index.astro
const CIBLES = {
'e-commerce': [0.29375, 0.19230769230769232],
'application-mobile': [0.15625, 0.4206730769230769],
'marketing-digital': [0.29375, 0.703125],
'ia-et-automatisation': [0.70625, 0.19831730769230768],
'logiciel-metier': [0.85, 0.41466346153846156],
'site-internet': [0.725, 0.703125],
}
const OFFRES_UNE = Object.entries(CIBLES).flatMap(([id, cible]) => {
const carte = V3.offres.cartes.find((c) => c.id === id)
return carte ? [{ id, nom: carte.nom, cible }] : []
})
// Dans la page
<Section classe="tr-une tr-une--affiche" titreId="tr-titre">
<Hero
variante="centre"
etiquette={ V3.surtitre }
lignes={[MARQUE.promesse[0], MARQUE.promesse[1]]}
sousTitre={ V3.ouverture.sousTitre }
principal={{ href: '/contact/', libelle: V3.cta }}
secondaire={{ href: '/offres/', libelle: V3.ouverture.boutonOffres }}
scene="hero"
offres={ OFFRES_UNE }
boutonOffre={ V3.offres.bouton }
/>
</Section>| Classe | Zone | Valeur |
|---|---|---|
| .tr-une.tr-une--affiche | la section | le padding haut de l’ouverture, calc(76px + clamp(24px, 3vw, 44px)), 0 en bas : la démonstration descend jusqu’à la ligne de la section suivante (margin-bottom -1 px) |
| .tr-affiche | l’affiche | en colonne, tout au centre, texte centré ; padding 0 clamp(20px, 3vw, 48px), clamp(36px, 3.4vw, 48px) en bas ; isolée, son contenu au-dessus de son fond |
| .tr-affiche__fond | la grille de l’affiche | la grille de 48 px, trait à 55 % de --line, calée en bas, qui monte de clamp(24px, 3vw, 44px) au-dessus de l’affiche ; masquée au centre, sous le titre : pleine aux bords, vide de 20 % à 80 % ; des cellules vivantes « calme » ; aria-hidden ; absente sous 620 px |
| .tr-etq | l’étiquette | une tr-etq, centrée au-dessus du titre |
| .tr-affiche__titre | le titre | Outfit 700, clamp(44px, 6.9vw, 100px) : 44 px jusqu’à 638 px de fenêtre, 100 px dès 1450 ; interligne 0,94, approche -0,035em ; clamp(18px, 1.8vw, 24px) sous l’étiquette ; la seconde ligne en vert profond quand le titre est le h1 |
| .tr-ligne | chaque ligne du titre | monte de 112 % dans son cadre en 900 ms ; la seconde part 110 ms après la première ; le titre apparaît en fondu (data-reveal="fade") |
| .tr-affiche__lead | le chapô | centré, 50ch au plus, lignes équilibrées, clamp(20px, 2vw, 28px) sous le titre ; 18 px sous 620 px |
| .tr-affiche__cta | les deux boutons | un groupe .tr-cta centré, écart 12 / 14 px, clamp(24px, 2.4vw, 34px) sous le chapô ; sous 480 px le libellé passe à la ligne, sous 360 px la flèche disparaît |
| .tr-demo | la démonstration | une tr-grille data-lignes, sur toute la largeur de la trame, qui se trace à l’arrivée : deux colonnes, trois dès 620 px ; dès 1000 px, 1fr / 2,3fr / 1fr sur trois rangées |
| .tr-demo__scene | la cellule de la scène | tr-cel pâle, padding 0, aria-hidden : sur toute la largeur jusqu’à 999 px, en 3:2 (2:1 de 620 à 999 px) ; dès 1000 px, au centre, sur les trois rangées, en 3:2 ; derrière le schéma v2, pâle et unie, comme la maquette du héros : ni dégradé d’angle, ni quadrillage .tr-une__fond, ni cellules vivantes (13 octobre, choix à valider par JB) |
| .tr-une__scene | la scène hero | l’illustration v2 hero.svg (2560 × 1664 : le G Grinn sur son socle, six objets autour), appelée en hero.svg#fixe, chargée tout de suite (eager), posée sur toute la cellule en contain : le schéma entier, jamais coupé ; elle flotte d’un bloc (5 s, 24 unités du dessin), menée par trame.ts avec ses traits et son anneau ; ni parallaxe ni recul |
| .tr-demo__offre | une offre | un lien vers /offres/<id>/, nommé « Voir l’offre » et le nom de l’offre (aria-label) ; padding 14 / 16 px, 128 px de haut au moins (150 px de 620 à 999 px ; 132 px et padding 12 px sous 620 px) ; dès 1000 px, les trois cases d’un côté se partagent la hauteur de la scène |
| .tr-demo__nom | son nom | dessiné comme une annotation : Inter 600 10,5 px, capitales, 0,1em, bord --line, fond blanc, encre seconde ; sur une ligne dès 620 px ; 10 px et 0,06em en dessous |
| .tr-demo__offre img | sa vignette | l’illustration v2 de l’offre recadrée sur son objet principal, entier (/assets/illustrations/<id>-vignette.svg, au format de la case, ses voisins retirés, seules les liaisons qui sortent du cadre fondues ; animée ; data-vignette ; 13 octobre : la scène entière, réduite à 90-130 px, était illisible en densité 1 ; sinon l’illustration entière <id>.svg, sinon le webp de l’ancienne scène), en srcset avec <id>-vignette@2x.svg (le dessin sans le traitement de lisibilité, en densité 2 et plus), en multiply (sur la case allumée, ses faces blanches prennent le vert clair de la case, sans tache blanche aux bords), lazy, alt vide ; sous le nom, à droite : 42 px du haut, 10 px du bord, min(62 %, 200px) de large, contain calé à droite, jusqu’à 10 px du bas ; dès 1000 px, la vignette recadrée de 30 px du haut à 8 px du bas, min(50 %, 170px) de large ; de 620 à 999 px, jusqu’à 32 px du bas, pour laisser « Voir l’offre » libre ; sous 620 px, en bas à droite à 8 px des bords, 64 % de large |
| .tr-demo__voir | « Voir l’offre » | V3.offres.bouton et sa flèche, Inter 600 10,5 px, capitales, encre troisième, aria-hidden ; sous 620 px, la flèche seule |
| .is-allumee, :hover, :focus-visible | l’offre allumée | la case en vert clair en 380 ms (--mid : la transition des cellules tracées, [data-lignes] > .tr-cel, l’emporte sur les 520 ms écrits pour .tr-demo__offre), le nom en pastille verte (fond --grinn, bord --grinn-deep, encre) en 520 ms, la vignette à 1,06 en 700 ms ; au survol et au focus, le libellé en vert profond et la flèche qui sort de 2 px |
| .tr-demo__liens | les traits d’attache | un svg aria-hidden posé sur toute la démonstration, rempli par trame.ts : l’anneau de la scène hero à toutes les largeurs, et dès 1000 px un trait de chaque case à l’objet qu’elle nomme (rubrique suivante) |
Le composant garde sa variante « cote », celle d’avant le 12 octobre, et c’est encore sa valeur par défaut : le texte à gauche, la scène annotée à droite, qui suit le pointeur et recule au défilement. Aucune page ne l’emploie plus.
Les offres autour de la scène
Chaque case nomme un objet de la scène hero. Sa cible, x et y en fraction de la scène, est écrite dans index.astro (table CIBLES), au point d’ancrage de l’objet dans hero.svg ; l’ordre des cases suit la place des objets, trois à gauche, trois à droite. Dès 1000 px, quand les cases entourent la scène, trame.ts (partie 10) trace un trait de chaque case à sa cible, puis allume les offres l’une après l’autre ; l’anneau relie les objets entre eux à toutes les largeurs.
| Offre | Lien | Case dès 1000 px | Cible dans la scène | Tour |
|---|---|---|---|---|
| E-commerce | /offres/e-commerce/ | à gauche, en haut | 29,4 % de la largeur, 19,2 % de la hauteur | 6 |
| Application mobile | /offres/application-mobile/ | à gauche, au milieu | 15,6 % de la largeur, 42,1 % de la hauteur | 5 |
| Marketing digital | /offres/marketing-digital/ | à gauche, en bas | 29,4 % de la largeur, 70,3 % de la hauteur | 4 |
| IA et automatisation | /offres/ia-et-automatisation/ | à droite, en haut | 70,6 % de la largeur, 19,8 % de la hauteur | 1 |
| Logiciel métier | /offres/logiciel-metier/ | à droite, au milieu | 85 % de la largeur, 41,5 % de la hauteur | 2 |
| Site internet | /offres/site-internet/ | à droite, en bas | 72,5 % de la largeur, 70,3 % de la hauteur | 3 |
| Quoi | Où | Valeur |
|---|---|---|
| le trait | .tr-demo__trait | une ligne droite, du bord de la case tourné vers la scène, à mi-hauteur, jusqu’à la cible ; 1 px, tirets de 4 px tous les 8, vert moyen à 75 % ; un carré de 7 px à chaque bout, blanc bordé de vert moyen côté case (le port), plein côté scène (la cible) ; plus de halo sur l’objet depuis le 13 octobre (il tachait le schéma au trait) |
| l’anneau | .tr-demo__voisins, .tr-demo__flux | chaque objet relié à ses deux voisins, dans l’ordre des cibles autour du centre du dessin (maquette du héros) : 1,5 px, tirets de 4 px tous les 8, vert ; un carré vert profond de 6 px circule sur chaque côté (3 s, décalés de 0,5 s, animateMotion) ; à toutes les largeurs ; sans carrés en mouvement réduit |
| le flottement | FLOTTE, DUREE, T0 | l’image, l’anneau et les cibles montent de 24 unités du dessin et redescendent en 5 s (ease-in-out), et chaque trait pivote sur sa case (skewY) pour que son bout suive l’objet ; toutes ces animations partent du même instant : rien ne glisse sur les objets ; elles avancent par pixel entier de l’écran (1 / devicePixelRatio, marches step-end sur la même courbe) : déplacée d’une fraction de pixel, l’image était floue en densité 1 (13 octobre) |
| la cible | data-cible | x et y en fraction de la scène, posés sur sa boîte réelle : l’image est en contain, le script retrouve le dessin d’après ses attributs width et height (2560 × 1664) |
| quand | trame.ts | les traits, seulement quand toutes les cases entourent la scène (le haut de chacune au-dessus du bas de la scène), soit dès 1000 px ; l’anneau, toujours ; retracés quand la démonstration change de taille (ResizeObserver), quand l’onglet revient (visibilitychange) et quand l’image est chargée (load) |
| le tour | PAS, PASSAGES | une offre s’allume toutes les 1,8 s, avec son trait ; dès 1000 px, dans le sens des aiguilles d’une montre autour du centre de la scène, depuis le haut : IA et automatisation, Logiciel métier, Site internet, Marketing digital, Application mobile, E-commerce ; sous 1000 px, dans l’ordre de lecture ; deux passages, 21,6 s, puis tout s’éteint |
| l’offre allumée | .tr-demo__lien.is-allumee | son trait passe au vert profond et ses tirets courent de l’offre vers l’objet (0,9 s, linéaire, sans fin) ; ses deux carrés passent au vert profond |
| la reprise | IntersectionObserver | seuil 0.3 : hors du cadre, le tour s’arrête et tout s’éteint ; il repart du début quand la démonstration revient à l’écran ; les deux passages faits, il attend ce retour |
| la pause | survol, focus, onglet | le pointeur ou le focus dans la démonstration arrête le tour et éteint tout ; il reprend où il en était quand ils en sortent ; onglet caché, il s’arrête, et reprend au retour |
| le survol d’une offre | :hover, :focus-visible | la case s’allume, et son trait avec elle : trame.ts suit pointerenter, pointerleave, focus et blur sur chaque case |
| mouvement réduit | reduit | les traits et l’anneau sont tracés et restent, rien ne tourne ni ne flotte ; le survol et le focus allument encore la case et son trait, sans transition, sans flux, sans zoom de la vignette |
| sans script | la page | les cases et leurs liens, la scène hero sans flottement (hero.svg#fixe : ses objets entrent et ses nœuds s’allument quand même, par le CSS du SVG), ni traits ni anneau : le svg reste vide |
Ce qui attend
La mise en page est validée, les contenus non. Tout ce qui manque est marqué sur la page, en clair, et rien n’a été remplacé par une image ou une phrase d’emprunt.
| Élément | Où | État |
|---|---|---|
| La photo de l’équipe | la cellule tr-equipe__photo | déposée le 12 octobre (assets/equipe/groupe.webp) : la photo s’affiche, avec son alt, cadrée center 18 % ; 4/3 jusqu’à 860 px, 16/10 au-dessus, 2/1 dès 1000 px |
| Les captures des réalisations | les vitrines des 6 cartes Cas | depuis le 13 octobre, chaque carte montre la vitrine du cas, comme la page Réalisations, à la place de la réserve photo ; en réserve, « Capture à fournir » : Bosco Services |
| Les logos des clients | les 9 cases du bandeau | logo à l’encre pour Clotilde Davenne, Builders, PepPsy, Cathédrale de Nantes, Bosco Services, La Grande Table, Mes Jardiniers, IE Architecture ; nom en Outfit pour Renault, fichier à fournir |
| Les citations | les quatre cartes du Mur | en réserve : aucune citation inventée, logo et portrait en pointillé |
| L’accord de Bosco Services | Réalisations et IA | donné : la carte, la page du cas et le bloc IA nomment Bosco Services |
| Un second exemple d’IA | le bloc IA | une pastille « un second exemple à fournir » à côté du bouton |
| Le traitement du formulaire | Contact | branché le 12 octobre : le relais (server/formulaire.mjs) envoie la demande par e-mail avec Brevo, puis /merci/ ; la mesure du lead sur /merci/ reste à poser |
| Les annotations techniques des cartes | les six illustrations des offres | les technos des fiches, ancrées sur les objets des dessins : à confirmer |
| Les cibles de la démonstration | index.astro, table CIBLES | les points d’ancrage des six objets de hero.svg (OUTILS de hero-eco.py) : à recaler si la scène hero change |
| La section IA | le bloc IA, Scene ia-scene | faite le 13 octobre, à la demande de JB (« avec un fond clair ») : le texte sur le blanc, le schéma v2 (tour 11 : le mail, l’assistant, le logiciel métier, la fiche et le devis, la validation) entier dans une cellule pâle et unie, ses cinq annotations ancrées (les trois étapes sous le flux, les deux repères au-dessus de leurs objets), la boîte qui flotte d’un bloc ; plus de dégradé vert ni de vidéo ; à montrer à JB |
| Le fond derrière la scène hero | la cellule .tr-demo__scene | pâle et unie depuis le 13 octobre, comme la maquette du héros : choix à valider par JB |
| Les textes | toute la page | la copie v3 du 30 septembre, en attente de validation ; la session sémantique la retravaille |
Les captures
L’accueil ne se met pas en ligne sans passer la boucle de contrôle. Elle construit le site, le type, passe le contrôle de marque, puis ouvre chaque page dans Chrome sans fenêtre, à quatre largeurs, et relève ce qu’un navigateur signalerait.
npm run boucleConstruit, type, contrôle la marque, puis ouvre chaque page construite à 1440, 1024, 768 et 375 px.
.boucle/captures/Une capture PNG de chaque page, à chaque largeur, pleine hauteur : accueil-1440.png, design-accueil-375.png.
.boucle/rapport.mdLes écarts relevés : console, exceptions, requêtes en échec, débordement horizontal, nombre de h1, sauts de niveau de titre, images sans alt, liens internes cassés, éléments jamais révélés.
Les options--sans-build pour ne pas reconstruire, --largeurs=1440,375 pour choisir les largeurs, --pages=/,/offres/ pour choisir les pages, --sans-captures pour aller plus vite.
Hors dépôtLe dossier .boucle/ est dans .gitignore : les captures et le rapport se regardent en local et ne se versionnent pas. La boucle sort en erreur dès qu’un écart est relevé, et se relance jusqu’au vert.
RègleL’accueil est la source : une page intérieure qui hésite reprend son bloc tel quel, composant et données compris.