Trame et rythme
Deux rails, des cellules au trait pointillé, une grille de 48 px, et l’air entre les sections.
Les rails
Le contenu tient sur 1184 px entre deux rails pointillés. La ligne d’une section traverse toute la fenêtre ; seuls les rails sont aux bords du conteneur.
| Classe | Zone | Valeur |
|---|---|---|
| --tr-tout | la largeur du contenu | 1184 px |
| .tr-in | le conteneur | width: min(100% - 2 × var(--gut), 1184px), --gut valant 28 px ; centré ; les deux rails --tv posés sur ses bords (background-position 0 0 et 100% 0), 1 px de large |
| .tr-sec | une section | la ligne --th en haut, sur 100 % de la fenêtre, 1 px de haut : la page est posée sur un plan qui la déborde |
| --th | le trait horizontal | repeating-linear-gradient(90deg, var(--trait) 0 4px, transparent 4px 8px) |
| --tv | le trait vertical | repeating-linear-gradient(180deg, var(--trait) 0 4px, transparent 4px 8px) |
| --trait | la couleur du trait | var(--line) : sur la trame, le vert Grinn #98D1CB depuis le 12 octobre (les verts en relief ; #D6D3D1, gris chaud, ailleurs) ; atténuée par color-mix dans les grilles de 48 px (de 36 % à 55 %) |
| .tr-hdr | l’en-tête | la même ligne --th en bas, sans bordure pleine |
| .tr-pied .wrap | le pied | même largeur que .tr-in, les deux rails, fond pâle |
Appelsrc/components/trame/Section.astro
<Section id="offres" titreId="tr-offres">
<Tete variante="cellule" etiquette={ V3.offres.surtitre } titre={ V3.offres.titre } surligne={ V3.offres.surligne } sousTitre={ V3.offres.sousTitre } id="tr-offres" />
</Section>La cellule
Le conteneur trace le haut ; chaque cellule trace son bas et sa droite. Les lignes restent justes quel que soit le nombre de colonnes, et la dernière colonne s’arrête sur le rail.
| Classe | Zone | Valeur |
|---|---|---|
| .tr-grille | la grille | trace le haut (--th, 100 % × 1 px) ; display: grid ; clip-path: inset(0 1px 0 0), pour que le trait droit de la dernière colonne tombe sur le rail |
| .tr-cel | la cellule | trace son bas (--th, 0 100%) et sa droite (--tv, 100% 0) ; padding clamp(20px, 2.4vw, 28px) ; position: relative ; min-width: 0 |
| .tr-cel--pale | la cellule pâle | background-color var(--pale), #F5FAF5 |
| .tr-cas | trois colonnes | une colonne, deux dès 600 px, trois dès 1000 px : les cas de l’accueil et des pages d’offre |
| .tr-cases | six colonnes | la grille des cas de la page Réalisations : une colonne ; six dès 861 px, une carte en prend trois, deux ou six |
| .tr-murl | cinq colonnes | le mur des clients de la page Réalisations : deux colonnes ; cinq dès 861 px |
| Cellule | le composant | element (li, div, figure, article), pale, reveal (true, fade, false), muette (aria-hidden), style, id |
-
Site internet
Un site qui transforme les visites en demandes.
-
E-commerce
Une boutique Shopify pensée pour la conversion.
-
Application mobile
Une application pour vos clients ou vos équipes.
-
Logiciel métier
Le logiciel qui remplace vos tableurs.
-
IA et automatisation
Une IA branchée sur votre métier.
-
Marketing digital
Être trouvé, et savoir ce qui rapporte.
-
Le suivi
On reste après la mise en ligne.
Appelsrc/components/trame/Grille.astro
<Grille classe="tr-cas">
<Cellule>
<Etiquette>Site internet</Etiquette>
<h3>Un site qui transforme les visites en demandes.</h3>
</Cellule>
<Cellule pale>
<Etiquette>Le suivi</Etiquette>
<h3>On reste après la mise en ligne.</h3>
</Cellule>
</Grille>La grille de 48
Sous les bandes, l’affiche de l’accueil, la tête en cellule et la page contact, une vraie grille de 48 px : un tiret de 4 px tous les 8, une ligne tous les 48. Les cellules allumées se posent dessus ; les cellules vivantes s’allument sur le même pas.
| Classe | Zone | Valeur |
|---|---|---|
| .tr-bande | les bandes | deux rangées : 96 px de haut ; chaque cellule 48 px (les allumées : 47 px de haut, largeur w × 48 px moins 1) ; grille en conic-gradient de 8 px / 48 px, trait à 55 % |
| .tr-cellules::before | la page contact, la candidature | la même grille, trait à 38 %, masquée : pleine sur 192 px en haut, fondue à 300 px, revenue sur les 144 derniers pixels |
| .tr-affiche__fond | l’affiche de l’accueil | trait à 55 %, calée en bas, qui monte de clamp(24px, 3vw, 44px) au-dessus de l’affiche ; masque horizontal : pleine aux bords, vide de 20 % à 80 %, sous le titre ; des cellules vivantes « calme » ; absente sous 620 px |
| .tr-une__fond | la cellule d’une scène | posé dans la démonstration de l’accueil et l’en-tête de page : trait à 48 %, masque radial : ellipse à 50 % 55 %, pleine à 28 %, fondue à 76 %, avec ses cellules vivantes ; masqué (display none) derrière une illustration v2 depuis le 13 octobre, choix à valider par JB : il ne se voit plus sur aucune page |
| .tr-tete--cel::before | la tête en cellule | trait à 50 %, masque horizontal : pleine aux bords, vide de 32 % à 68 % |
| .sys-spec__cadre::before | un spécimen de ces pages | trait à 36 %, sans masque |
| .tr-cellules i, .tr-pied__cellules i | les cellules allumées | 47 × 47 px, posées à des multiples de 48 px ; sept sur la page contact et la candidature, trois dans le pied |
| [data-cellules] > .tr-vivant | les cellules vivantes | des cases de 48 px calées sur le trait, dessinées par trame.ts ; dans la tête du point de contact, masquées à gauche : vides jusqu’à 48 % de la largeur, pleines dès 88 % |
L’air
Les cellules vont jusqu’aux rails ; le texte seul garde une marge de 20 à 48 px. Et les points de rupture que le bloc .tr emploie, avec ce que chacun change.
| Classe | Zone | Valeur |
|---|---|---|
| .tr-sec > .tr-in | l’air d’une section | padding clamp(40px, 5vw, 72px) en haut et en bas, 0 sur les côtés |
| .tr-une > .tr-in | l’ouverture | padding-top calc(76px + clamp(24px, 3vw, 44px)) : la hauteur de l’en-tête fixe, puis l’air ; 0 en bas |
| .tr-affiche | l’affiche de l’accueil | padding 0 clamp(20px, 3vw, 48px), clamp(36px, 3.4vw, 48px) en bas : l’air sous les boutons, avant la démonstration |
| .tr-demo | la démonstration de l’accueil | aucune marge : elle va jusqu’aux rails ; margin-bottom -1 px, son dernier trait sur la ligne de la section suivante |
| .tr-logos > .tr-in, .tr-bande-sec > .tr-in | les logos, les bandes | padding 0 : ces blocs s’appuient sur les lignes voisines |
| .tr-sec--plein > .tr-in | les sections d’une page de cas | padding 0 : la vitrine, le récit, le point fort, la citation et le cas suivant vont d’un rail à l’autre et posent chacun leur marge |
| .tr-cases-sec > .tr-in, .tr-murl-sec > .tr-in | la grille des cas, le mur des clients | la grille des cas sans padding haut ni bas ; le mur sans padding bas : chacun touche la ligne de la section suivante |
| .tr-tete | la tête de section | margin-bottom clamp(24px, 3vw, 40px) ; padding-inline clamp(20px, 3vw, 48px) |
| .tr-suite | la suite d’une section | margin-top clamp(28px, 3vw, 40px) ; même padding-inline |
| .tr-cta | les boutons | gap 12 px / 14 px ; margin-top 30 px |
| .tr-cel | dans une cellule | padding clamp(20px, 2.4vw, 28px) |
| .tr-corps--centre | défini, inemployé | margin-top clamp(28px, 3vw, 40px) ; 52 ch ; padding-inline clamp(20px, 3vw, 48px) ; c’était la phrase sous les faits de l’accueil, retirée le 12 octobre |
| .tr-joindre | le point de contact | 1100 px au plus, centré ; la tête en cellule pâle, padding clamp(28px, 4vw, 56px) clamp(22px, 3vw, 48px) ; les portes, padding clamp(22px, 3vw, 36px) |
| .tr [id] | une ancre | scroll-margin-top 88 px |
| --gut | la marge de fenêtre | 28 px de chaque côté, avant les rails |
| Largeur | Ce qui change |
|---|---|
| jusqu’à 339, 359 et 379 px | Le bouton de l’en-tête se resserre (12 px puis 8 px de côté, 11 px, interlettrage 0,08 puis 0,06 em) et perd sa flèche sous 380 px ; sous 360 px, les boutons de l’ouverture perdent la leur. |
| jusqu’à 480 px | Les étapes du point fort d’une page de cas passent une par ligne (jusqu’à 479 px) ; le bouton de la cellule d’appel peut passer à la ligne ; le badge des cas se rapproche du coin. L’étiquette passe à la ligne ; les boutons de l’ouverture et de la suite gardent leur largeur, 100 % au plus : le libellé passe à la ligne s’il le faut, centré, interligne 1,35, 13 px en haut et en bas ; la scène d’une carte passe à 220 px ; une cellule allumée du pied disparaît. |
| 600 px | Dessous : la cellule allumée d’une grille est masquée, le formulaire passe sur une colonne, le bouton de l’agenda prend toute la largeur. Dès 600 : réalisations, faits, engagements, étapes et chiffres sur deux colonnes ; les paires clé et valeur sur deux colonnes (220 px pour la clé). |
| 620 px | Dessous : la démonstration de l’accueil sur deux colonnes, la scène sur les deux en 3:2 ; dans chaque offre, le nom à 10 px, la vignette en bas à droite, la flèche seule ; le chapô de l’affiche à 18 px ; la grille de l’affiche masquée. Dès 620 : trois colonnes, le nom sur une ligne ; jusqu’à 999 px, la scène sur les trois, en 2:1, et chaque case d’offre monte à 150 px au moins, sa vignette arrêtée au-dessus de « Voir l’offre ». |
| 700 px | Dessous : les annotations disparaissent, le dôme passe à 280 px, la boîte du schéma de la section IA prend le format du dessin, sur toute la largeur de sa cellule. Dès 700 : offres, équipe, mur et suivi sur deux colonnes ; la photo de l’équipe sur toute la largeur. |
| 720 px | Jusqu’à 720 px : les vitrines des cas passent en 4/3, sauf celle du point fort, et perdent leurs puces ; la borne de la vitrine de tête reprend 62 % de large (48 % dès 721). |
| de 720 à 940 px | Le menu de l’en-tête reste affiché, resserré à 18 px. |
| 800 px | Dès 800 : les questions sur deux colonnes ; sur la page contact, le formulaire complet et la cellule de l’agenda côte à côte (.tr-portes--deux, 1,4fr et 1fr) ; dans ces pages, Emploi, À faire et l’échelle passent sur plusieurs colonnes. |
| 860 px | Dessous : la page contact et la candidature ne gardent que deux cellules allumées ; de 861 à 1140 px, deux d’entre elles se rapprochent des rails. Dès 861 : la grille des cas de la page Réalisations sur six colonnes, ses cases vides visibles, le cas en largeur sur deux colonnes ; le mur des clients sur cinq ; sur une page de cas, le point fort, la citation et le cas suivant sur deux colonnes. |
| 900 px | Dès 900 : la page intérieure avec scène passe sur deux colonnes (la cellule de la scène bord à bord), la section IA de l’accueil aussi (le texte, puis le dessin ; ses annotations un cran plus petites tant que la boîte du dessin fait moins de 540 px), le formulaire et l’agenda du point de contact côte à côte, le pied sur cinq colonnes. De 900 à 1199 px, les six annotations de l’en-tête de /offres/ passent un cran plus petit (9 px, padding 4 / 6 px), pour ne pas se chevaucher. |
| 960 px | Dès 960 : sur une page de cas, le récit et la fiche côte à côte (1fr et 360 px), la fiche collante à 64 px du haut ; de 861 à 960 px, le bouton de la cellule d’appel peut passer à la ligne. |
| 1000 px | Dès 1000 : la démonstration de l’accueil pose la scène au centre (1fr / 2,3fr / 1fr, trois rangées), trois offres de chaque côté, et ses traits d’attache, masqués en dessous (l’anneau de la scène hero, lui, reste à toutes les largeurs) ; réalisations et suivi sur trois ; équipe et engagements sur quatre, la photo de l’équipe toujours sur toute la largeur, en 2/1 ; le mur sur trois colonnes avec ses cases vides ; faits, étapes et chiffres selon leur nombre (trois faits sur la page de l’équipe) ; le rail devient une colonne collante. |
| 1080 px | Dès 1080 : les offres sur trois colonnes. |
| 1200 px | Dès 1200 : le sommaire du design system sur trois colonnes. |
Il n’y a pas de point de rupture à 1100 ni à 1239 px : ni dans le bloc .tr, ni ailleurs dans grinn.css. La largeur de 1184 px (--tr-tout) borne le contenu. Parmi les grilles, seul le point de contact (.tr-joindre) s’arrête avant, à 1100 px, centré : c’est une largeur, pas un point de rupture.
RègleTout est posé sur le plan : les cellules vont jusqu’aux rails, le texte seul garde sa marge, et rien ne flotte.