/* Sections des pages solutions (recette du 27/10/2026) : usages qui s'illustrent, « À vous d'essayer » (cadre commun ;
   chaque essai a ses styles dans css/vitrine-v3/essais/<clé>.css), repères, parcours qui avance au défilement et
   bandeau « En démo » (script : js/vitrine-v3/solution-sections.js). Couleurs de la solution (--v3-brique*, posées par
   .v3-solution--<clé>), couleurs unies ; les écrans réutilisent les briques des aperçus (solution.css).
   Repasse du 27/10/2026 : repères et parcours servent aussi aux pages éditoriales, aux ressources, aux tarifs, au contact
   et au livre blanc, dans le bleu de la marque (valeurs par défaut de --v3-brique*), avec le hero à sommaire ci-dessous. */

[data-vitrine-v3] { --v3-brique: var(--v3-blue); --v3-brique-texte: var(--v3-blue); --v3-brique-doux: var(--v3-blue-soft); --v3-brique-trait: light-dark(#c9d8f7, #2c3f66); }

[data-vitrine-v3] .v3-solution-page :is(.v3-essai, .v3-reperes, .v3-avant, .v3-demo-bande) .v3-eyebrow { color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-solution-page :is(.v3-essai, .v3-reperes, .v3-avant, .v3-demo-bande) .v3-eyebrow .lucide { color: var(--v3-brique); }

/* Usages qui s'illustrent : la liste à gauche, la fenêtre fixe à droite, centrée sur l'usage lu (le script pose sa
   hauteur et son sommet : --v3-usages-hauteur, --v3-usages-sommet). */
[data-vitrine-v3] .v3-usages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); align-items: start; gap: 72px; }
[data-vitrine-v3] .v3-usages-liste { margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-usage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 0 20px; min-height: max(40vh, var(--v3-usages-hauteur, 0px)); padding: 28px 0 28px 26px; border-left: 2px solid var(--v3-line); cursor: pointer; transition: border-color 220ms ease; }
[data-vitrine-v3] .v3-usage-texte h3 { margin-bottom: 10px; color: var(--v3-muted); transition: color 220ms ease; }
[data-vitrine-v3] .v3-usage-texte p { max-width: 52ch; color: var(--v3-muted); font-size: 0.9375rem; line-height: 1.8; }
[data-vitrine-v3] .v3-usage:hover .v3-usage-texte h3,
[data-vitrine-v3] .v3-usage[data-v3-actif] .v3-usage-texte h3 { color: var(--v3-ink); }
[data-vitrine-v3] .v3-usage[data-v3-actif] { border-left-color: var(--v3-brique); }
[data-vitrine-v3] .v3-usage-illustration { display: none; }
[data-vitrine-v3] .v3-usages-ecran { position: sticky; top: var(--v3-usages-sommet, 112px); }
[data-vitrine-v3] .v3-usages-vues { display: grid; padding: 24px; }
/* Toutes les vues dans la même case : la fenêtre garde la hauteur de la plus grande, sans saut d'un usage à l'autre. */
[data-vitrine-v3] .v3-usage-vue { grid-area: 1 / 1; align-self: start; visibility: hidden; opacity: 0; transition: opacity 240ms ease, visibility 0s linear 240ms; }
[data-vitrine-v3] .v3-usage-vue[data-v3-actif] { visibility: visible; opacity: 1; transition: opacity 240ms ease; }
[data-vitrine-v3] :is(.v3-usages-fenetre, .v3-usage-illustration, .v3-parcours-illustration) .v3-ap { font-size: 0.75rem; }
/* Usages en scène (prototype du 30/10/2026, retour de Paul) : en grand écran, la section se fige et déroule les usages un
   à un. Le texte arrive seul d'un côté, la fenêtre arrive de l'autre, son écran avance avec le défilement jusqu'au bout,
   puis tout s'efface et l'usage suivant arrive du côté opposé. Opacités et déplacements posés par
   js/vitrine-v3/solution-sections.js ; longueur de la section : --v3-scene-longueur. Sans script, sans animation ou sur
   téléphone, l'enveloppe s'efface (display: contents) et la mise en page habituelle s'applique. */
[data-vitrine-v3] .v3-usages-scene { display: contents; }
@media (min-width: 64rem) {
    [data-vitrine-v3] .v3-usages[data-v3-scene] { display: block; height: var(--v3-scene-longueur, auto); }
    /* overflow-x: clip : la fenêtre qui arrive de côté ne déborde pas de la page (1 024 px), sans casser le collage. */
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usages-scene { position: sticky; top: var(--v3-scene-sommet, 104px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); align-items: center; gap: 72px; height: calc(100svh - var(--v3-scene-sommet, 104px)); overflow-x: clip; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usages-scene[data-v3-cote="droite"] { grid-template-columns: minmax(0, 580px) minmax(0, 1fr); }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usages-scene[data-v3-cote="droite"] .v3-usages-liste { grid-column: 2; grid-row: 1; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usages-scene[data-v3-cote="droite"] .v3-usages-ecran { grid-column: 1; grid-row: 1; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usages-liste { display: grid; }
    /* En scène, c'est la position seule qui pilote : ni apparition au défilement (data-v3-reveal), ni lissage, ni fondu
       d'un écran à l'autre. Une transition à sa propre horloge laissait la fenêtre visible au changement d'usage (elle
       sautait alors de côté) et faisait encore glisser l'écran suivant à son arrivée (retour de Paul du 03/11/2026). */
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usage { grid-area: 1 / 1; min-height: 0; border-left-color: var(--v3-brique); cursor: default; opacity: 0; visibility: hidden; transition: none; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] :is(.v3-usage-texte h3, .v3-usage-vue) { transition: none; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usage-texte h3 { color: var(--v3-ink); font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usage-texte p { font-size: 1.0625rem; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usages-ecran { position: static; }
    [data-vitrine-v3] .v3-usages[data-v3-scene] .v3-usages-fenetre { opacity: 0; transition: none; }
}

/* À vous d'essayer : le cadre commun à toutes les solutions. */
:root:not([data-v3-js]) .v3-essai { display: none; }
[data-vitrine-v3] .v3-essai { border-block: 1px solid var(--v3-brique-trait); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-essai-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 64px; }
[data-vitrine-v3] .v3-essai .v3-section-heading { margin-bottom: 0; }
[data-vitrine-v3] .v3-essai-carte { display: grid; gap: 22px; min-width: 0; padding: 28px; border: 1px solid var(--v3-brique-trait); border-radius: 12px; background: var(--v3-white); box-shadow: 0 24px 60px #12243a14; }
[data-vitrine-v3] .v3-essai-entete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #eef1f5; }
[data-vitrine-v3] .v3-essai-surtitre { margin: 0; color: var(--v3-muted); font-size: 0.75rem; }
[data-vitrine-v3] .v3-essai-objet { margin: 2px 0 0; color: var(--v3-ink); font-size: 1.125rem; font-weight: 650; }
[data-vitrine-v3] .v3-essai-repere { display: grid; justify-items: end; gap: 2px; margin: 0; color: var(--v3-muted); font-size: 0.6875rem; text-align: right; }
[data-vitrine-v3] .v3-essai-repere strong { color: var(--v3-ink); font-size: 0.875rem; }
/* Un choix : des cases cliquables (boutons radio ou cases à cocher qui couvrent la case, toujours atteignables au clavier). */
[data-vitrine-v3] .v3-essai-choix { min-width: 0; margin: 0; padding: 0; border: 0; }
[data-vitrine-v3] .v3-essai-choix legend { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0; color: var(--v3-ink); font-size: 0.875rem; font-weight: 650; }
[data-vitrine-v3] .v3-essai-etape { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--v3-brique-doux); color: var(--v3-brique-texte); font-size: 0.6875rem; font-weight: 700; }
[data-vitrine-v3] .v3-essai-choix--neutre .v3-essai-etape { background: #f0f3f6; color: #45576b; }
[data-vitrine-v3] .v3-essai-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 6px; }
[data-vitrine-v3] .v3-essai-options--echelle { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-vitrine-v3] .v3-essai-option { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-height: 64px; padding: 10px 6px; border: 1px solid #dce2e8; border-radius: 8px; background: var(--v3-white); color: #42536b; text-align: center; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
[data-vitrine-v3] .v3-essai-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
[data-vitrine-v3] .v3-essai-option-valeur { color: var(--v3-ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
[data-vitrine-v3] .v3-essai-option-libelle { font-size: 0.6875rem; line-height: 1.3; }
[data-vitrine-v3] .v3-essai-option:hover { border-color: var(--v3-brique-trait); }
[data-vitrine-v3] .v3-essai-option:has(input:focus-visible) { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
[data-vitrine-v3] .v3-essai-option:has(input:checked) { border-color: var(--v3-brique); background: var(--v3-brique-doux); color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-essai-option:has(input:checked) .v3-essai-option-valeur { color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-essai-choix--neutre .v3-essai-option:has(input:checked) { border-color: #64748b; background: #f0f3f6; color: #33445a; }
[data-vitrine-v3] .v3-essai-choix--neutre .v3-essai-option:has(input:checked) .v3-essai-option-valeur { color: #33445a; }
[data-vitrine-v3] .v3-essai-bornes { display: none; }
[data-vitrine-v3] .v3-essai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
[data-vitrine-v3] .v3-essai-resultat { min-height: 132px; padding: 16px 18px; border-radius: 10px; background: #f7f9fb; }
[data-vitrine-v3] .v3-essai-consigne { margin: 0; color: var(--v3-muted); font-size: 0.875rem; line-height: 1.6; }
[data-vitrine-v3] .v3-essai-lecture { display: grid; gap: 12px; }
[data-vitrine-v3] .v3-essai-lecture[hidden] { display: none; }
[data-vitrine-v3] .v3-essai-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; color: var(--v3-ink); font-size: 0.9375rem; line-height: 1.6; }
[data-vitrine-v3] .v3-essai-verdict .v3-ap-pastille { font-size: 0.6875rem; }
[data-vitrine-v3] .v3-essai-regle { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--v3-muted); font-size: 0.75rem; line-height: 1.5; }
[data-vitrine-v3] .v3-essai-regle .lucide { flex: 0 0 auto; width: 15px; height: 15px; color: var(--v3-brique); }
[data-vitrine-v3] .v3-essai-recommencer { justify-self: start; }
[data-vitrine-v3] .v3-essai-recommencer[hidden] { display: none; }

/* Repères : le texte détaillé en points numérotés, titre à gauche, contenu à droite. */
[data-vitrine-v3] .v3-reperes-liste { margin: 0; padding: 0; border-top: 1px solid var(--v3-line); list-style: none; }
[data-vitrine-v3] .v3-repere { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; padding: 40px 0; border-bottom: 1px solid var(--v3-line); }
[data-vitrine-v3] .v3-repere-entete { display: flex; align-items: flex-start; gap: 18px; }
[data-vitrine-v3] .v3-repere-numero { flex: 0 0 auto; min-width: 2.75rem; color: var(--v3-brique); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; }
[data-vitrine-v3] .v3-repere-entete :is(h2, h3) { margin: 2px 0 0; font-size: 1.3125rem; line-height: 1.35; letter-spacing: -0.01em; }
[data-vitrine-v3] .v3-repere-corps { display: grid; align-content: start; gap: 16px; min-width: 0; }
[data-vitrine-v3] .v3-repere-corps > p { max-width: 68ch; margin: 0; color: light-dark(#34475d, #b8cfe9); font-size: 0.9375rem; line-height: 1.85; }
[data-vitrine-v3] .v3-repere-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-repere-points li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--v3-brique-trait); border-radius: 8px; background: var(--v3-brique-doux); color: var(--v3-ink); font-size: 0.875rem; line-height: 1.6; }
[data-vitrine-v3] .v3-repere-points .lucide { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--v3-brique); }
[data-vitrine-v3] .v3-repere-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
[data-vitrine-v3] .v3-repere-cartes > div { padding: 14px 16px; border: 1px solid var(--v3-line); border-left: 3px solid var(--v3-brique); border-radius: 8px; background: var(--v3-white); }
[data-vitrine-v3] .v3-repere-cartes dt { margin-bottom: 4px; color: var(--v3-ink); font-size: 0.875rem; font-weight: 650; }
[data-vitrine-v3] .v3-repere-cartes dd { margin: 0; color: var(--v3-muted); font-size: 0.8125rem; line-height: 1.6; }
[data-vitrine-v3] .v3-repere-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-repere-liens li { margin: 0; }
[data-vitrine-v3] .v3-repere-liens a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--v3-brique-trait); border-radius: 8px; background: var(--v3-white); color: var(--v3-brique-texte); font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
[data-vitrine-v3] .v3-repere-liens a:hover { border-color: var(--v3-brique); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-repere-liens .lucide { width: 14px; height: 14px; }

/* Pages éditoriales : le titre et l'introduction à gauche, le sommaire numéroté à droite (mêmes numéros que les repères). */
[data-vitrine-v3] .v3-editorial-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 64px; }
[data-vitrine-v3] .v3-editorial-hero--seul { grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin-inline: auto; }
[data-vitrine-v3] .v3-editorial-hero-texte h1 { max-width: 20ch; }
[data-vitrine-v3] .v3-sommaire { padding: 22px 24px; border: 1px solid var(--v3-line); border-radius: 10px; background: var(--v3-white); }
[data-vitrine-v3] .v3-sommaire-titre { margin-bottom: 8px; color: var(--v3-muted); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
[data-vitrine-v3] .v3-sommaire ol { margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-sommaire li + li { border-top: 1px solid var(--v3-line); }
[data-vitrine-v3] .v3-sommaire a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; color: var(--v3-ink); font-size: 0.875rem; font-weight: 550; line-height: 1.45; }
[data-vitrine-v3] .v3-sommaire a:hover { color: var(--v3-blue); }
[data-vitrine-v3] .v3-sommaire-numero { flex: 0 0 1.75rem; color: var(--v3-blue); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-vitrine-v3] .v3-sommaire-numero .lucide { width: 15px; height: 15px; vertical-align: -2px; }
[data-vitrine-v3] .v3-editorial-panneaux { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
[data-vitrine-v3] .v3-editorial-suite > :first-child { margin-top: 0; }
[data-vitrine-v3] .v3-parcours--sans-illustration .v3-parcours-etape { grid-template-columns: 40px minmax(0, 46rem); }

/* Bandeau « En démo » : ce que l'on regarde ensemble, et la question qu'Upikat propose de préparer. */
[data-vitrine-v3] .v3-demo-bande { border-block: 1px solid var(--v3-brique-trait); background: var(--v3-white); }
[data-vitrine-v3] .v3-demo-grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 64px; }
[data-vitrine-v3] .v3-demo-texte h2 { margin: 14px 0 18px; }
[data-vitrine-v3] .v3-demo-texte > p:not(.v3-eyebrow) { max-width: 60ch; margin: 0 0 26px; color: var(--v3-muted); font-size: 0.9375rem; line-height: 1.85; }
[data-vitrine-v3] .v3-demo-bande .v3-mascotte { margin: 0; }

/* Parcours qui avance au défilement : un tracé vertical (le GPS de l'accueil, couché sur la page) et ses étapes. */
[data-vitrine-v3] .v3-parcours { position: relative; }
[data-vitrine-v3] .v3-parcours-trace { position: absolute; top: 20px; bottom: 20px; left: 19px; width: 2px; background: var(--v3-brique-trait); }
[data-vitrine-v3] .v3-parcours-remplissage { position: absolute; inset: 0; background: var(--v3-brique); transform: scaleY(var(--v3-parcours-progres, 1)); transform-origin: top; }
[data-vitrine-v3] .v3-parcours-curseur { position: absolute; top: calc(var(--v3-parcours-progres, 1) * 100%); left: 50%; width: 14px; height: 14px; border: 3px solid var(--v3-white); border-radius: 50%; background: var(--v3-brique); box-shadow: 0 0 0 4px var(--v3-brique-trait); translate: -50% -50%; }
[data-vitrine-v3] .v3-parcours:not([data-v3-parcours-pret]) .v3-parcours-curseur { display: none; }
[data-vitrine-v3] .v3-parcours-etapes { position: relative; display: grid; gap: 56px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-parcours-etape { display: grid; grid-template-columns: 40px minmax(0, 34rem) minmax(0, 22.5rem); justify-content: start; align-items: start; gap: 0 40px; }
[data-vitrine-v3] .v3-parcours-point { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--v3-brique); border-radius: 10px; background: var(--v3-brique); color: var(--v3-on-action); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease; }
[data-vitrine-v3] .v3-parcours-texte h3 { margin: 8px 0 10px; transition: color 260ms ease; }
[data-vitrine-v3] .v3-parcours-texte p { max-width: 46ch; color: var(--v3-muted); font-size: 0.875rem; line-height: 1.85; }
[data-vitrine-v3] .v3-parcours-illustration { padding: 14px 16px; border: 1px solid var(--v3-brique-trait); border-radius: 10px; background: var(--v3-white); box-shadow: 0 12px 30px #12243a0d; transition: opacity 380ms ease, transform 380ms ease; }
/* Étapes pas encore atteintes (seulement quand le script suit le défilement) : grisées, illustration en attente, sans
   animation, pour qu'elle se rejoue à l'arrivée du tracé. */
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etape:not([data-v3-atteinte]) .v3-parcours-point { border-color: light-dark(#cdd6df, #3b454f); background: var(--v3-white); color: var(--v3-muted); }
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etape:not([data-v3-atteinte]) .v3-parcours-texte h3 { color: var(--v3-muted); }
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etape:not([data-v3-atteinte]) .v3-parcours-illustration { opacity: 0; transform: translateY(12px); }
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etape:not([data-v3-atteinte]) .v3-parcours-illustration :is(*, *::before, *::after) { animation: none; }

@media (prefers-reduced-motion: no-preference) {
    [data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etape[data-v3-atteinte] .v3-parcours-point { animation: v3-parcours-pop 420ms cubic-bezier(0.3, 1.5, 0.5, 1); }
}
@keyframes v3-parcours-pop { 50% { transform: scale(1.15); } }

@media (max-width: 63.999rem) {
    [data-vitrine-v3] .v3-usages { grid-template-columns: minmax(0, 1fr); gap: 0; }
    [data-vitrine-v3] .v3-usages-ecran { display: none; }
    [data-vitrine-v3] .v3-usage { min-height: 0; padding: 26px 0 30px; border-top: 2px solid var(--v3-brique-trait); border-left: 0; cursor: auto; }
    [data-vitrine-v3] .v3-usage-texte h3 { color: var(--v3-ink); }
    [data-vitrine-v3] .v3-usage-illustration { display: block; grid-column: 1 / -1; margin-top: 18px; padding: 16px; border: 1px solid var(--v3-brique-trait); border-radius: 10px; background: var(--v3-white); }
    [data-vitrine-v3] :is(.v3-essai-layout, .v3-demo-grille) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    [data-vitrine-v3] .v3-editorial-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    [data-vitrine-v3] .v3-repere { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
}

@media (max-width: 47.999rem) {
    [data-vitrine-v3] .v3-essai-carte { gap: 18px; padding: 20px 16px; }
    [data-vitrine-v3] .v3-essai-entete { grid-template-columns: auto minmax(0, 1fr); }
    [data-vitrine-v3] .v3-essai-repere { display: flex; grid-column: 1 / -1; align-items: baseline; gap: 8px; text-align: left; }
    [data-vitrine-v3] .v3-essai-options--echelle { gap: 4px; }
    [data-vitrine-v3] .v3-essai-options--echelle .v3-essai-option { min-height: 48px; padding: 10px 2px; }
    /* Téléphone : les libellés d'une échelle restent lus par les lecteurs d'écran ; ses deux bornes les résument. */
    [data-vitrine-v3] .v3-essai-options--echelle .v3-essai-option-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    [data-vitrine-v3] .v3-essai-bornes { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; color: var(--v3-muted); font-size: 0.6875rem; }
    [data-vitrine-v3] :is(.v3-repere-points, .v3-repere-cartes) { grid-template-columns: minmax(0, 1fr); }
    [data-vitrine-v3] .v3-repere-numero { font-size: 1.5rem; }
    [data-vitrine-v3] .v3-parcours-etapes { gap: 36px; }
    [data-vitrine-v3] .v3-parcours-etape { grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px; }
    [data-vitrine-v3] .v3-parcours-illustration { grid-column: 2; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-vitrine-v3] :is(.v3-usage, .v3-usage-texte h3, .v3-usage-vue, .v3-parcours-point, .v3-parcours-texte h3, .v3-parcours-illustration, .v3-essai-option, .v3-repere-liens a) { transition: none; }
}

/* Plan des fiches du 30/10/2026 (chantier 7 de l'audit du 28/10/2026) : nom du module au-dessus de la promesse,
   « Avant de démarrer » (parcours compact, repères en accordéon, réserves), liste « Les éléments à examiner » dans la
   bande démo, pages liées et sources en pied de FAQ, lien de fin d'essai vers la démo. */
[data-vitrine-v3] .v3-hero-module { display: block; margin-bottom: 14px; color: var(--v3-brique-texte); font-size: 1rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; }
[data-vitrine-v3] .v3-hero-promesse { display: block; }

[data-vitrine-v3] .v3-avant-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 56px; }
[data-vitrine-v3] .v3-avant-parcours h3 { margin: 0 0 18px; font-size: 1rem; }
[data-vitrine-v3] .v3-avant-parcours ol { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-avant-parcours li { display: flex; align-items: flex-start; gap: 14px; }
[data-vitrine-v3] .v3-avant-numero { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--v3-brique-trait); border-radius: 6px; color: var(--v3-brique-texte); font-size: 0.6875rem; font-weight: 650; }
[data-vitrine-v3] .v3-avant-parcours strong { font-size: 0.9375rem; }
[data-vitrine-v3] .v3-avant-parcours p { margin-top: 4px; color: var(--v3-muted); font-size: 0.875rem; line-height: 1.7; }
[data-vitrine-v3] .v3-avant .v3-bon-a-savoir { margin-top: 40px; }
/* Repères en accordéon : un en-tête cliquable (numéro, titre, chevron), le contenu dessous. */
[data-vitrine-v3] .v3-reperes-liste--accordeon .v3-repere { display: block; padding: 0; }
[data-vitrine-v3] .v3-reperes-liste--accordeon summary { align-items: center; padding: 18px 0; cursor: pointer; list-style: none; }
[data-vitrine-v3] .v3-reperes-liste--accordeon summary::-webkit-details-marker { display: none; }
[data-vitrine-v3] .v3-reperes-liste--accordeon .v3-repere-numero { min-width: 2rem; font-size: 1.125rem; }
[data-vitrine-v3] .v3-reperes-liste--accordeon summary :is(h2, h3) { flex: 1; margin: 0; font-size: 1.0625rem; }
[data-vitrine-v3] .v3-reperes-liste--accordeon summary > .lucide { flex: 0 0 auto; width: 18px; height: 18px; color: var(--v3-muted); transition: rotate 200ms ease; }
[data-vitrine-v3] .v3-reperes-liste--accordeon details[open] > summary > .lucide { rotate: 180deg; }
[data-vitrine-v3] .v3-reperes-liste--accordeon .v3-repere-corps { padding: 0 0 24px; }
[data-vitrine-v3] .v3-reperes-liste--accordeon .v3-repere-points { grid-template-columns: minmax(0, 1fr); }

[data-vitrine-v3] .v3-demo-examen { margin: 0 0 26px; }
[data-vitrine-v3] .v3-demo-examen-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.875rem; font-weight: 650; }
[data-vitrine-v3] .v3-demo-examen-titre .lucide { width: 16px; height: 16px; color: var(--v3-brique); }
[data-vitrine-v3] .v3-demo-examen ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-demo-examen li { display: flex; align-items: flex-start; gap: 8px; color: var(--v3-muted); font-size: 0.875rem; line-height: 1.6; }
[data-vitrine-v3] .v3-demo-examen li .lucide { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px; color: var(--v3-brique); }

[data-vitrine-v3] .v3-faq-pied { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 32px; padding-top: 28px; border-top: 1px solid var(--v3-line); }
[data-vitrine-v3] .v3-faq-pied h3 { margin: 0 0 12px; color: var(--v3-muted); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
[data-vitrine-v3] .v3-faq-pied ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-faq-pied a { display: inline-flex; align-items: center; gap: 6px; color: var(--v3-blue); font-size: 0.875rem; font-weight: 600; }
[data-vitrine-v3] .v3-faq-pied .lucide { width: 14px; height: 14px; }

/* Le lien de fin d'essai n'apparaît qu'avec « Recommencer », quand l'exemple est allé au bout. */
[data-vitrine-v3] .v3-essai-recommencer[hidden] + .v3-essai-suite { display: none; }
[data-vitrine-v3] .v3-essai-suite { align-self: center; font-size: 0.8125rem; }

@media (max-width: 63.999rem) {
    [data-vitrine-v3] .v3-avant-grille, [data-vitrine-v3] .v3-faq-pied { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}