Écarté
Ce que la trame ne garde pas du site précédent, les pistes écartées en route, et pourquoi.
Ce que la trame ne garde pas
Le site précédent posait chaque bloc sur une nappe, dans un cadre, avec une ombre. La trame pose tout sur un plan : deux rails, des cellules au trait, une seule grille, et rien qui flotte. Voici ce qui part, où c’était, et pourquoi.
| Élément | Où il était | Pourquoi il part |
|---|---|---|
| Les nappes d’expertise | Texture : cinq teintes de 126° à 174°, quatre dégradés radiaux, au fond des cartes d’offre et des compositions | Aucun aplat de couleur : le vert est un trait, une cellule allumée, un surlignage ; les cellules colorées restent pâles (sauf la cellule d’appel de la page Réalisations, sur l’encre), et le seul dégradé gardé, celui du site, reste ramassé dans un angle (les verts en relief, 12 octobre). |
| Les matières clientes | Matiere : métal, pierre, bois, feuillage, cave, papier, écran, images générées sous les fiches de réalisation | Seule, une image générée ne dit rien du client. Le composant reste écarté ; le 12 octobre, les sept images reviennent, mais en fond de la vitrine des cas, sous un voile commun et derrière la capture du produit (voir Vitrine des cas). |
| Les compositions | Scene + Cadre + Capture : la texture au fond, la fenêtre, le téléphone ou l’icône posés dessus, la capture dedans un jour | Les illustrations font le geste de chaque offre ; un cadre vide attendait une capture qui n’arrivait pas. Pour les cas, la composition revient le 12 octobre avec les vraies captures, dans un composant de la trame, Vitrine ; les offres gardent leurs illustrations. |
| Les cartes à ombre | .card : bordure, soulèvement de 3 px et ombre portée au survol, le visuel qui grandit de 3,5 % | Rien n’a d’ombre et rien ne flotte : la carte de la trame est une cellule qui pâlit, avec une lueur sous le pointeur. |
| La bande sombre et le dégradé | Bande ton sombre (.band, fond encre) pour la conversion ; .band-degrade à 160° comme seule grande surface colorée | Aucun aplat, ni sombre ni coloré : le contact est une grille de la trame, la tête dans une cellule pâle où des cases s’allument, le formulaire et l’agenda dessous. Seule exception, validée par JB le 12 octobre : la cellule d’appel de la page Réalisations, une cellule de la grille sur l’encre. |
| Les numéros de section | TitreSection numero : « 01 » dans la marge, la rubrique en regard, sur un filet pleine largeur, en tête de chaque section | Pas de numéro sur les offres : l’étiquette nomme la section ; le numéro reste aux engagements et aux étapes. |
| Le carrousel | Carrousel : défilement par accrochage, flèches, pastilles, pour les réalisations, les verbatims et les offres | Des grilles : les cas dans tr-cas sur l’accueil et les pages d’offre, dans tr-cases sur la page Réalisations ; les citations en mur, en quinconce autour du titre. Le bandeau des clients, qui défile depuis le 12 octobre, n’emploie pas ce composant : ni flèche, ni pastille, ni accrochage. |
| Le Marquee | Marquee : les noms des clients en capitales, dupliqués par le script pour boucler, sous le premier écran | Le défilement revient le 12 octobre, à la demande de JB, mais pas le Marquee : deux pistes posées par le composant, sans script, le logo à l’encre ou le nom en Outfit dans sa case, un arrêt au survol, rien en mouvement réduit. |
| Les pictos de métier | PictoMetier : quatre tracés Lucide au trait fin, vert profond, dans le bloc « Les grinners » | Les illustrations de rôle, role-chef-de-projet, role-design, role-strategie, role-dev : un outil par métier, sur le même socle, en gris « stone » avec un détail vert. |
| Le hero à illustration | Hero + Dessin : un fond de photo pleine largeur à fournir, et les illustrations dessine-puis-code, agent-ia et suivi en multiply | Le premier écran pose le titre au centre, sur la grille de la trame, puis la scène hero dans sa cellule pâle, entourée des offres, chacune reliée par un trait à l’objet qu’elle nomme ; la trame est le seul fond. |
| La bande papier millimétré | band-millim : un pas fin de 24 px, un pas fort tous les quatre, sous les verbatims de l’accueil précédent | Une seule grille, celle de 48 px ; le quadrillage ne vit que dans une cellule, et la grille se trace. |
| Le téléphone en attente | Telephone : « 02 XX XX XX XX » et une pastille, dans la bande de conversion | Pas de numéro tant qu’il n’existe pas : une réserve qui ressemble à un numéro trompe. |
| Trois mots | « expertise » en étiquette d’offre, « Production digitale » en étiquette du hero, « Parlons de votre projet » sur chaque bouton | Le référentiel sémantique v3 : « offre », « Agence web, mobile et IA » en tête de l’étiquette d’ouverture, et le bouton dit « Démarrer un projet ». |
Les pistes écartées en route
Ce qui a été construit sur la trame, puis écarté. Le 12 octobre, JB écarte les scènes peintes animées par Kling ; la série qui les remplace est posée le 13, et la section IA de l’accueil passe sur fond clair le même jour.
| Élément | Où il était | Pourquoi il part |
|---|---|---|
| Les scènes peintes animées | Scene, partout sur la trame jusqu’au 13 octobre : une image FLUX.2 dev sur Runware, recolorée par luminance dans les verts Grinn, animée en boucle de cinq secondes par Kling (première image égale à la dernière), en webm et mp4 avec une affiche jpg, posée en multiply sur sa cellule et saturée ; quinze scènes, de la scène hero aux rôles | Écartées par JB le 12 octobre : « trop IA slop », trop génériques. À leur place, les illustrations v2, des schémas isométriques vectoriels à la manière de Baseten, en gris « stone » avec le vert sur ce qui est actif, animés en CSS dans le SVG, sans vidéo (voir Scènes). La section IA de l’accueil, qui gardait la sienne, a reçu son schéma le 13 octobre, après la série : plus aucune page n’en pose. Les fichiers restent dans public/assets/scenes, et Scene y retombe pour tout nom sans SVG, sauf dans la section IA (v2Seulement : la réserve, jamais l’ancienne scène). |
| Le fond vert de la section IA | La section IA de l’accueil jusqu’au 13 octobre : toute la grille sur le pâle, ses cellules transparentes ; la cellule du dessin dans le dégradé d’angle (--degrade-angle) ; l’ancienne scène peinte en cover, agrandie à 1.08, qui perdait ses bords ; une annotation à droite, .tr-puce--doc, définie mais jamais appelée | JB demande le 13 octobre de refaire la section « avec un fond clair » : le texte sur le blanc, sans aplat, le dessin dans une cellule pâle et unie, le schéma v2 posé entier, ses annotations ancrées sur ses objets (voir Scènes). Les règles de l’ancien bloc sont retirées de grinn.css. |
| Le halo sur l’objet nommé | .tr-demo__halo : un disque vert en multiply sous la cible de chaque offre, dans la démonstration de l’accueil, qui montait à .45 quand l’offre s’allumait | Il tachait le schéma au trait : depuis le 13 octobre, trame.ts ne le trace plus sur une illustration v2. La règle reste dans grinn.css pour les anciennes scènes, et ne sert plus nulle part. |
Ce qui reste, pour l’instant
Rien n’est supprimé : c’est la décision de JB. Les composants précédents restent dans src/components tant que toutes les pages ne sont pas refaites, et les deux pages précédentes restent consultables, non indexées.
Hero, Marquee, TitreSection, Carte, Carrousel, Verbatim, PictoMetier, Dessin, Capture, Formulaire, Bande, Suivi, Telephonel’accueil précédent seulement (/accueil-precedent/) ; Formulaire, par Capture, part par le relais depuis le 12 octobre, comme ceux de la trame
Cadre, Scene, Texture, Matiere, Etiquette, Vignette, Ressourcele design system précédent seulement (/design/precedent/)
Portrait, DispositionOffres, Engagementsles deux pages précédentes
Entete, PiedDePagele gabarit de base (src/layouts/Page.astro), que la trame remplit avec son en-tête et son pied
Schema, FilAriane, FormulaireCompletplus aucune page : ils attendent la validation avant d’être retirés
L’accueil précédent est à /accueil-precedent/, le design system précédent à /design/precedent/ : tous deux en noindex, le temps de la refonte. Depuis le 9 octobre 2026, toutes les pages du site sont sur la trame, offres, réalisations, équipe, suivi, contact et pages légales comprises ; seules les deux pages précédentes emploient encore les composants écartés. Un composant ne se retire qu’une fois qu’aucune page ne l’appelle, et après la validation de toutes les pages.
Ce qui est repris
Tout n’est pas écarté. Ce que le site précédent faisait bien passe sur la trame tel quel, ou presque : les réserves, la pastille, les contenus arrêtés, le formulaire court, la règle des logos, et, depuis le 12 octobre, le défilement des clients et les matières des cas.
- Application mobile
PepPsy
Une donnée qui manque se marque en clair, sur la page. à fournir
Les réserves de photoEmplacementPhoto : le papier millimétré, les traits de coupe, le format attendu et le brief. Le composant est le même ; depuis le 12 octobre, la trame passe son fond du gris chaud au vert pâle (--photo, #F5FAF5) et son millimétré au vert profond dilué (--papier).
La pastille d’attenteEnAttente, .pend : Inter 700 9,5 px en capitales, bordée d’un trait. Elle marque une valeur absente, un accord à obtenir, un fichier à produire.
Les engagements et le suiviComme contenu : les cinq engagements et les trois colonnes du suivi, dans les mots de la copie v3. Les composants qui les posent sont ceux de la trame.
Le formulaire à deux champsL’e-mail et le type de projet, un bouton qui nomme la conversation, le reste replié ; depuis le 12 octobre, il part par le relais du formulaire, puis mène à /merci/ (voir Formulaire).
La règle des logosLe logo seul sur le site, la version signée pour les supports du groupe, le groupe nommé en texte : voir Logos et fichiers.
Les matièresReprises le 12 octobre, sous une autre forme : les sept images de public/assets/matieres servent de fond à la vitrine d’un cas, sous un voile commun, la capture du produit posée dessus. Voir Vitrine des cas.
Le bandeau qui défileRepris le 12 octobre, à la demande de JB, sous une autre forme : les cases de la trame, deux pistes en CSS, 5 s par case, arrêt au survol, immobile en mouvement réduit. Voir Logos.
RègleRien n’est supprimé avant que toutes les pages soient refaites ; d’ici là, ce qui est écarté reste lisible, et ne revient pas.