01Étape A
Titre de la première étape
Texte d'exemple de l'étape. Le grand numéro filigrané et l'image alternée donnent le rythme du déroulé.
01 — Couleurs (tokens)
Palette ACSS de marque + neutres. ⚠ Customs à mapper sur tokens ACSS réels en phase Etch (--bg-ultra-dark → --base-ultra-dark, --neutral-700… → variants, --primary-dim → --primary-trans-*).
02 — Typographie & grammaire
Échelle ACSS native (Headings + Text, clamps fluides). Customs dérivés de --text-m (--text-mono).
Eyebrow — kicker mono
Titre H1 — display
Titre H2 — section
Titre H3 — sous-section
Titre H4 — carte
Lead — texte d'introduction allégé, plus grand, en graisse 300, pour ouvrir une section.
Corps de texte courant. Mesure de lecture limitée, rythme vertical régulier via .prose. Lien fondu : lien dans le texte.
Statement — phrase forte à valeur d'accroche.
Texte mono — référence technique
03 — Boutons
Framework boutons ACSS var-driven. .btn--ghost-light sur fond sombre uniquement.
04 — Layout « colonne d'ancrage » .editorial
Rail titre ancré (sticky) + corps. Brise la « colonne centrée façon blog » sur les sections de texte.
Eyebrow
Titre de la section
Texte d'introduction de la section, posé à droite du rail.
Corps de la section. Le rail de gauche reste visible au scroll, le corps déroule à droite. Texte d'exemple neutre pour la démonstration du composant.
Deuxième paragraphe d'exemple, pour montrer le rythme vertical du corps éditorial.
05 — Layout « process imagé » .process / .phase
Étapes numérotées, image + texte alternés (.phase--rev). Pour un déroulé (bureau d'études → atelier → site).
02Étape B
Titre de la deuxième étape (inversée)
Variante .phase--rev : l'image passe à gauche, le texte à droite, pour alterner.
Plan cotéLayout « plan technique annoté »
Layout « plan technique annoté » .plan
Cartouche-titre bordé + ligne de rappel + grand numéro en filigrane + corps à filet cyan. Variante signature « plan d'atelier ».
Le cartouche est borné à 60 % pour les titres longs ; le filigrane reste à droite ; .plan--rev inverse texte/image.
07 — .section--dark + .step-grid / .step-card
Modificateur sombre (basculement de couleur tokenisé). Cartes numérotées, nombre de colonnes par variante (--2 / --3 / --4).
01
Carte sombre
Titre + description. Sur fond sombre, titres en blanc par héritage tokenisé.
02
Deuxième
Texte d'exemple neutre pour la carte numérotée.
03
Troisième
Texte d'exemple neutre pour la carte numérotée.
08 — .step-grid--2 sur fond clair
Mêmes cartes, variante claire automatique (hors .section--dark) et 2 colonnes.
01 — A
Carte claire
Variante claire : fond neutre, titre anthracite, description neutre-700.
02 — B
Carte claire
Texte d'exemple neutre.
09 — Fiche-produit .spec-card / .spec-grid
Fiche à blocs étiquetés (Fonction / Composants / Matériaux). Pour les gammes détaillées (appareils de raclage).
Produit d'exemple
Phrase de description du produit, posée avant les blocs étiquetés.
Fonction
- Élément un
- Élément deux
Composants
- Élément un
- Élément deux
Matériaux
- Aluminium
- Inox
Second produit
Description d'exemple neutre.
Fonction
- Élément un
- Élément deux
Composants
- Élément un
Matériaux
- Inox
10 — Fiche technique .fiche (REP. 01)
Texte + image, gros numéro détouré, repère RÉF, alternance .fiche--rev.
01Réf. exemple
Titre de la fiche
Description de la fiche technique. Texte d'exemple neutre pour le composant.
Consulter la ficheRÉF · 01
11 — Module « 3 métiers » .schema + marquee
Schéma à branches cotées (illustration figurative = SVG graphiste à venir) + bandeau défilant des techniques.
◆ CŒURau centre
01Branche ADescription courte d'exemple
02Branche BDescription courte d'exemple
03Branche CDescription courte d'exemple
Technique ATechnique BTechnique CTechnique DTechnique ATechnique BTechnique CTechnique D
12 — Bi-colonne .poly · stats · piliers
Colonne A
- Élément un
- Élément deux
- Élément trois
Colonne B
Texte d'exemple neutre de colonne.
Note mono · exemple
2000m²
Libellé d'exemple
10t
Libellé d'exemple
3ISO
Libellé d'exemple
Pilier A
Pilier B
Pilier C
13 — Galerie · tags · placeholders
Logo
Logo
Logo
Logo
Marqueur interne : Texte provisoire — à valider · coordonnée <à compléter> (masqués hors vue team — ?display=team).
14 — Callout / mini-CTA .callout
Encart d'appel à l'action réutilisable (fin de section, milieu de page). 3 variantes : clair (défaut), sombre quadrillé .callout--dark.blueprint, accroche-question .callout--ask.
Variante 1 — clair (filet cyan)
Besoin spécifique
Texte d'exemple neutre : présentation d'un besoin particulier puis invitation à prendre contact pour une étude sur mesure.
Variante 2 — sombre quadrillé .callout--dark.blueprint
Sur-mesure
Texte d'exemple neutre sur fond sombre, pour un highlight fort en contexte clair.
Variante 3 — accroche-question .callout--ask
Une question ?
Un besoin spécifique ?
Texte de soutien d'exemple neutre, développant la réponse à l'accroche interrogative, suivi de l'action.
15 — Emblèmes « Fabriqué & posé par ETSA » .emblem
Sceaux géométriques/typographiques (SVG, tokens ACSS oklch → bascule claire/sombre). Pistes à arbitrer avec Stéphanie ; la piste 1 (plaque, logo intégré) est en place sur la page Batardeaux. Assets autoporteurs archivés dans assets/emblemes/ + Nextcloud GRAPHISME/EMBLEMES-ETSA/.
1 · Plaque (logo ETSA)
2 · Poinçon
3 · Médaille certif
16 — Intro à média latéral .metiers__intro
Colonne gauche englobant titre + texte, média à droite (schéma, photo ou emblème). Bascule 1 colonne ≤980px.
Intitulé
Titre de section englobé dans la colonne
Accroche d'exemple neutre.
Texte d'exemple neutre développant le propos sur deux ou trois phrases pour donner du corps à la colonne.
RÉF
17 — Texte + rail de cartes .app-grid / .app-card
Texte à gauche, rail de petites cartes à droite (dégradé oklch dérivé d'un accent). Bascule 1 colonne ≤640px.
Applications
Intitulé d'exemple
Texte d'exemple neutre introduisant une série d'applications ou de variantes.
01
Première application
02
Deuxième application
03
Troisième application
18 — Média sur quadrillage .poly-media
Image encadrée posée sur le quadrillage blueprint (mise en avant photo).
19 — Blog (brèves + article à la une) .blog
Intro + brèves à gauche, article à la une à droite. Bascule 1 colonne ≤980px.
Actualités
Le blog
- Févr. 2026Titre de brève d'exemple neutre
- Janv. 2026Autre brève d'exemple neutre
À la une · Exemple
Article à la une — titre d'exemple
Chapô d'exemple neutre pour l'article mis en avant dans la grille blog.
Lire l'article20 — Certifications (2×2) .certif
Bloc certifications en carrés 2×2, contexte sombre. Bascule 1 colonne ≤980px.
Qualité & conformité
Certifications et conformité
Texte d'exemple neutre présentant l'engagement qualité, environnement et sécurité.
ISO9001Qualité
ISO14001Environnement
ISO45001Santé & sécurité
NormesAFNORConformité
Bandeau CTA pleine largeur
Texte d'exemple neutre pour le bandeau d'appel à l'action.