Feature Sections

Différenciation légère « nous vs eux » en grille de cartes : 2 ou 3 colonnes, lignes cochées ou barrées, colonne mise en avant. Plus léger que la table comparative.

Features en progressive disclosure : accordéon natif <details>, chaque item ouvre un détail explicatif et une métadonnée optionnelle. Premier item ouvrable par défaut.

Statement éditorial pleine largeur : carte ink qui s'étend de 80 % à 100 % au scroll, titre serif accent, lede, CTA, et un média globe filaire (réseau en orbite). Pose un concept sous un hero.

Grille de problèmes/frictions auto-fit (3 cards min) : num + kicker + h3 + body, séparateurs hairline 1px.

Section éditoriale "pourquoi X cale" : chapter label sticky à gauche + N FIG rows à droite avec row-lines.

Section couche opérationnelle fond sombre : chapter label + h2 + lede + CTA, console terminal mockup à droite, strip 4 attributs en pied.

Bloc manifeste intercalary : kicker mono § + grand bloc display italique sans box, span accent terracotta, respiration éditoriale forte.

Grille de fonctionnalités pour structurer les bénéfices ou capacités principales d'une offre.

Bloc garantie pour expliciter les engagements, réduire le risque perçu et rassurer.

Diagramme d'architecture signature : N canaux d'entrée vers un système central et M sorties, avec boucle d'amélioration continue.

Grille éditoriale de services 3×2 avec figure, métrique, body et ligne de connecteurs en pied de cellule.

Index éditorial de cas d'usage en lignes numérotées avec libellé italique, tag mono et lien d'ancrage solution.

Section de palier d’offres avec eyebrow, H2, lede, grille de cartes et variante hero sombre optionnelle.

Grille persona 2×2 pain points / critères / objections / preuves avec footer méta sombre en trois colonnes.

Split éditorial deux colonnes pour lister blog et livres blancs, chacun avec cartes connexes et CTA.

Bande teaser fond paper-2 avec kicker, H2 et liste de pills pour éléments à venir.

Grille hairline de 2 à 6 engagements ou garanties, titre display et corps sans, extrait de la page Méthode.

Index éditorial de publications en lignes numérotées (num · date · tag · titre italique · flèche), extrait de FieldNotes.

Grille de livrables tangibles avec cards numérotées et tag format/durée, extraite des pages offre et détail.

Bande stack technologique fond paper-2 avec kicker, lead et rangée de pills techniques.

Bande de trois cards connexes pour relier cas, offres ou ressources en fin de page.

Liste d'inclusions inline séparée par point médian pour expliciter le périmètre d'un engagement.

Énoncé macro-typographique du problème avec stats optionnelles en grille hairline.

Mosaique bento asymetrique de 5 cellules (1 grande 2x2 + 4 petites) pour valoriser les capacites cles avec une mise en page moderne.

Lignes alternées visuel/texte (gauche-droite, droite-gauche) pour presenter les fonctionnalites cles d'une offre avec un rythme editorial fort.

Liste sticky a gauche, cadre media a droite dont l'image change en fondu au scroll. Ideal pour presenter des domaines d'expertise avec un visuel par item.

Cartes numerotees qui se superposent en s'empilant au scroll (effet stack sticky, CSS pur). Ideal pour une methode en plusieurs temps.

Liste editoriale qui revele l'image du projet au survol, dans un carre cadre (image qui suit le curseur ou centree).

Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.

Bento media asymetrique : tuiles image avec grand titre superpose et zoom au survol (layouts feature-2, quad, mosaic).

Composition editoriale : photo lead + grappe de photos decalees (layouts lead-cluster, scatter, duo).

Bande 2 ou 3 colonnes dont les images changent en fondu (auto ou au survol), avec CTA.

Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.

Trois colonnes iconographiques avec titre et description, séparées par des hairlines verticaux. Idéal pour présenter 3 piliers ou bénéfices distincts.

Liste-catalogue éditoriale de services en lignes (§ numéro, titre display, description, méta durée, flèche) avec footer CTA optionnel.

Arbre de décision : en-tête kicker et titre display à gauche, liste ordonnée numérotée d items à droite, hairlines fines.

Prise de position technologique en split 50/50 : kicker, titre display, aside, statement manifesto et facts mono clé/valeur.

Inventaire technique en table spec (capacité, description, statut) avec en-tête kicker et aside.

Points de friction métier : en-tête eyebrow et titre display, aside Callout, frise Timeline numérotée des frictions.

Grille 2x2 de défis ou pain-points : numéro en coin, icône, titre et texte par carte, border-left accent et élévation au survol. Pose le problème avant la solution sur une landing.

Une feature majeure exposée en deux colonnes : texte et points clés d’un côté, mockup ou capture de l’autre. Le champ reversed permet d’alterner les côtés au fil de la page.

Liste éditoriale de pain-points sur fond ink, classés par sévérité : chaque item porte un label severity vertical (mono) et un glyphe (◆▲●○), un titre serif, une description, et une ligne mono « → correctif ». Séparateurs hairline, reveal-stagger.

Rangée horizontale de cartes d'étapes sur fond ink, reliées par des flèches accent, qui raconte le flux du système (site → lead → scoring → CRM → apprentissage). En-tête « Fig. N » + méta mono, grand titre serif avec dernier mot en accent, lede courte, puis une ligne « ↺ boucle d'amélioration continue ». Reveal-stagger, responsive (scroll horizontal / colonne empilée en mobile).

Storytelling au scroll : rail de texte sticky dont l'etape active passe en accent, colonne media sticky dont l'image change en fondu. Mobile = stepper empile.

Offres en onglets (familles) : diptyque ou trio de cartes relie a une rangee de services par une dorsale line-art dessinee au scroll. Une branche peut etre teintee (token --complementary). Vanilla JS aria, 0 dependance.