Process Sections

diagnostic-stages

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

Auto-diagnostic « Où en êtes-vous ? » : 4 à 6 stades de maturité en cards horizontales cliquables, le stade courant relevé en accent (« vous êtes ici »). Situe le visiteur et l’oriente vers l’étape suivante (conversion + qualification). Déclinaison optionnelle `quizCta` : bande CTA (carte ink illustration + bouton) sous la piste, qui pousse au quiz d’auto-positionnement.

Ouvrir dans le builder

Instances sur le site

Global 5 instances sur 5 pages

Page	Position	Contenu	Variante
/ressources/diagnostics/claude-pme	`section 3`	Prêts, presque, ou pas encore ?	paper
/ressources/diagnostics/maturite-ia	`section 3`	Où en est votre entreprise ?	paper
/ressources/diagnostics/referent-ia	`section 3`	Quand un référent devient nécessaire	paper
/ressources/diagnostics/site-web-intelligent	`section 3`	Où en est votre site ?	paper
/services/template-service-ref	`section 5`	Cinq stades de maturité pipeline	paper

Aperçu

Comment l'utiliser

Intention

Expliquer une méthode

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Non	fr / en	·
`lede`	Contenu	`text`	Non	fr / en	·
`stages`	Contenu	`array`	Oui	·	4..6
`layout`	Présentation	`enum`	Non	·	grid-steps · vertical-stack · numbered-rows
`columns`	Présentation	`enum`	Non	·	2 · 3 · 4 · auto
`density`	Présentation	`enum`	Non	·	compact · base · ample
`contentAlign`	Présentation	`enum`	Non	·	start · center · end
`quizCta`	Contenu	`object`	Non	·	·
`placement`	Présentation	`object`	Non	·	·

Déclinaisons · 19

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 11 curées, 8 générées.

Auto-diagnostic · stades · papier 2
curée
diagnostic-stages--paper-2
Auto-diagnostic · stades · encre
curée
diagnostic-stages--ink
Auto-diagnostic · grille 3 colonnes
curée
diagnostic-stages--grid-steps-3
Auto-diagnostic · grille 2 colonnes
curée
diagnostic-stages--grid-steps-2
Auto-diagnostic · grille 4 colonnes
curée
diagnostic-stages--grid-steps-4
Auto-diagnostic · stades empilés
curée
diagnostic-stages--vertical-stack
Auto-diagnostic · lignes numérotées
curée
diagnostic-stages--numbered-rows
Auto-diagnostic · stades empilés · encre
curée
diagnostic-stages--vertical-stack-ink
Auto-diagnostic · lignes · compact
curée
diagnostic-stages--numbered-rows-compact
Auto-diagnostic · header centré
curée
diagnostic-stages--head-center
Auto-diagnostic · header masqué mobile (atomique)
curée
diagnostic-stages--atomic-head-hide-mobile
diagnostic-stages · horizontal
générée
diagnostic-stages--horizontal
diagnostic-stages · grille étapes
générée
diagnostic-stages--grid-steps
diagnostic-stages · diagramme
générée
diagnostic-stages--diagram
diagnostic-stages · zigzag
générée
diagnostic-stages--zigzag
diagnostic-stages · ligne connectée
générée
diagnostic-stages--connected-line
diagnostic-stages · cartes étapes
générée
diagnostic-stages--cards-steps
diagnostic-stages · serpentin
générée
diagnostic-stages--snake
diagnostic-stages · vertical alterné
générée
diagnostic-stages--vertical-alternating

Comparer les déclinaisons · 19

Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.

Auto-diagnostic · stades · papier 2
curée
diagnostic-stages--paper-2
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Auto-diagnostic · stades · encre
curée
diagnostic-stages--ink
background:ink
Ouvrir dans le builder
Auto-diagnostic · grille 3 colonnes
curée
diagnostic-stages--grid-steps-3
layout:grid-stepscolumns:3
Ouvrir dans le builder
Auto-diagnostic · grille 2 colonnes
curée
diagnostic-stages--grid-steps-2
layout:grid-stepscolumns:2
Ouvrir dans le builder
Auto-diagnostic · grille 4 colonnes
curée
diagnostic-stages--grid-steps-4
layout:grid-stepscolumns:4
Ouvrir dans le builder
Auto-diagnostic · stades empilés
curée
diagnostic-stages--vertical-stack
layout:vertical-stack
Ouvrir dans le builder
Auto-diagnostic · lignes numérotées
curée
diagnostic-stages--numbered-rows
layout:numbered-rows
Ouvrir dans le builder
Auto-diagnostic · stades empilés · encre
curée
diagnostic-stages--vertical-stack-ink
layout:vertical-stackbackground:ink
Ouvrir dans le builder
Auto-diagnostic · lignes · compact
curée
diagnostic-stages--numbered-rows-compact
layout:numbered-rowsdensity:compact
Ouvrir dans le builder
Auto-diagnostic · header centré
curée
diagnostic-stages--head-center
layout:grid-stepscolumns:3contentAlign:center
Ouvrir dans le builder
Auto-diagnostic · header masqué mobile (atomique)
curée
diagnostic-stages--atomic-head-hide-mobile
layout:grid-stepscolumns:3placement
Ouvrir dans le builder
diagnostic-stages · horizontal
générée
diagnostic-stages--horizontal
layout:horizontal
Ouvrir dans le builder
diagnostic-stages · grille étapes
générée
diagnostic-stages--grid-steps
layout:grid-steps
Ouvrir dans le builder
diagnostic-stages · diagramme
générée
diagnostic-stages--diagram
layout:diagram
Ouvrir dans le builder
diagnostic-stages · zigzag
générée
diagnostic-stages--zigzag
layout:zigzag
Ouvrir dans le builder
diagnostic-stages · ligne connectée
générée
diagnostic-stages--connected-line
layout:connected-line
Ouvrir dans le builder
diagnostic-stages · cartes étapes
générée
diagnostic-stages--cards-steps
layout:cards-steps
Ouvrir dans le builder
diagnostic-stages · serpentin
générée
diagnostic-stages--snake
layout:snake
Ouvrir dans le builder
diagnostic-stages · vertical alterné
générée
diagnostic-stages--vertical-alternating
layout:vertical-alternating
Ouvrir dans le builder

Sections liées

Même famille

journey-steps stable

Parcours en 3 temps : icône cercle avec badge numéro, titre, description et pill highlight par étape, connecteur accent entre étapes. Horizontal desktop, vertical mobile. Idéal funnel ou onboarding.

process-steps Process Sections Illustration au traitListeIcônes +3 14 décl.

method-diagram-list stable

Bloc methode : entete + diagramme de process (SVG de marque) + liste numerotee de phases (numero mono + titre + corps).

process-steps Process Sections Apparition au scrollIllustration au traitListe +1 10 décl.

process-steps stable

« Comment ça marche » en étapes numérotées verticales : numéro, titre, description et meta par étape, connecteurs visuels entre paliers, fonds paper à ink.

process-steps Process Sections Illustration au traitListeIcônes +3 14 décl.

system-flow stable

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).

process-steps Feature Sections Apparition au scrollDéfilementIllustration au trait +3 16 décl.

Même catégorie

journey-steps stable

process-steps Process Sections Illustration au traitListeIcônes +3 14 décl.

method-diagram-list stable

Bloc methode : entete + diagramme de process (SVG de marque) + liste numerotee de phases (numero mono + titre + corps).

process-steps Process Sections Apparition au scrollIllustration au traitListe +1 10 décl.

process-steps stable

« Comment ça marche » en étapes numérotées verticales : numéro, titre, description et meta par étape, connecteurs visuels entre paliers, fonds paper à ink.

process-steps Process Sections Illustration au traitListeIcônes +3 14 décl.

Similaires

method-timeline stable

Timeline méthodologique pour expliquer les étapes d'un accompagnement ou d'un processus.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.

method-stepline stable

Timeline de méthode horizontale sur fond clair : ligne hairline traversée de nœuds accent, chaque nœud surmonté d'un numéro mono, d'un titre serif et d'un sous-label mono. En-tête kicker à gauche, durée à droite. Reveal-stagger, empilage en colonne en mobile.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.

maturity-pyramid stable

Pyramide de maturité à quatre paliers avec timeline d'étapes, SVG progressif et grille de cartes asymétriques.

pyramid Timelines Apparition au scrollSurvolDéfilement +5 13 décl.

steps-horizontal stable

Etapes numerotees en ligne avec pastilles et connecteurs hairline. Passage vertical sous 760px.

timeline Timelines Liste4 colonnes 12 décl.

sticky-scroll-storytelling stable

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.

scroll-interactive Feature Sections Média collantApparition au scrollFondu enchaîné +7 12 décl.

tech-integration-flow stable

Position dans la stack en frise verticale numérotée (Timeline + Dingbat), un nœud par étape d intégration.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +3 8 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "diagnostic-stages",
  "background": "paper-2",
  "kicker_fr": "Auto-diagnostic",
  "kicker_en": "Self-assessment",
  "h2_fr": "Où en <i>êtes-vous</i> ?",
  "h2_en": "Where do <i>you</i> stand?",
  "lede_fr": "Situez votre organisation sur la trajectoire d’adoption des agents IA, puis choisissez la prochaine étape concrète.",
  "lede_en": "Place your organisation on the AI-agent adoption path, then pick the next concrete step.",
  "stages": [
    {
      "glyph": "○",
      "title_fr": "Curiosité",
      "title_en": "Curiosity",
      "body_fr": "Vous explorez l’IA générative en ordre dispersé, sans cas d’usage prioritaire.",
      "body_en": "You explore generative AI in a scattered way, without a priority use case.",
      "phase_fr": "Phase 0",
      "phase_en": "Phase 0"
    },
    {
      "glyph": "◔",
      "title_fr": "Premiers tests",
      "title_en": "First trials",
      "body_fr": "Quelques prompts manuels en production, mais rien d’industrialisé ni de mesuré.",
      "body_en": "A few manual prompts in production, but nothing industrialised or measured.",
      "phase_fr": "Phase 1",
      "phase_en": "Phase 1"
    },
    {
      "glyph": "◑",
      "title_fr": "Premier agent",
      "title_en": "First agent",
      "body_fr": "Un agent tourne sur un workflow ciblé, avec des résultats que vous suivez déjà.",
      "body_en": "One agent runs on a targeted workflow, with results you already track.",
      "phase_fr": "Phase 2",
      "phase_en": "Phase 2",
      "current": true
    },
    {
      "glyph": "◕",
      "title_fr": "Mise à l’échelle",
      "title_en": "Scaling",
      "body_fr": "Plusieurs agents en production, une gouvernance et une trace de chaque décision.",
      "body_en": "Several agents in production, governance and a trace for every decision.",
      "phase_fr": "Phase 3",
      "phase_en": "Phase 3"
    },
    {
      "glyph": "●",
      "title_fr": "Organisation augmentée",
      "title_en": "Augmented org",
      "body_fr": "Vos équipes composent leurs propres agents, l’IA est un réflexe de chaque métier.",
      "body_en": "Your teams compose their own agents, AI is a reflex across every function.",
      "phase_fr": "Phase 4",
      "phase_en": "Phase 4",
      "href": "/agence"
    }
  ],
  "quizCta": {
    "eyebrow_fr": "§ Quiz de maturité",
    "eyebrow_en": "§ Maturity quiz",
    "title_fr": "Dans quel stade <i>êtes-vous</i> vraiment ?",
    "title_en": "Which stage are <i>you</i> really in?",
    "body_fr": "Six questions, deux minutes : situez votre organisation avec précision et repartez avec les trois leviers concrets pour monter d’un stade.",
    "body_en": "Six questions, two minutes: place your organisation precisely and leave with the three concrete levers to climb one stage.",
    "cta_label_fr": "Faire le quiz →",
    "cta_label_en": "Take the quiz →",
    "cta_href": "/ressources/diagnostics/maturite-ia",
    "media_src": "/images/illustrations/ds/no-no-yes-ink.webp",
    "media_alt_fr": "Illustration : évaluer des options et trancher pour avancer",
    "media_alt_en": "Illustration: weighing options and deciding to move forward",
    "note_fr": "Gratuit · 2 min · résultat immédiat",
    "note_en": "Free · 2 min · instant result"
  }
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/diagnostic-stages.json

Chemin du détail machine

/library/section/diagnostic-stages.json