/* Pages solutions (recette du 26/10/2026) : chaque page dans la couleur de sa solution (--v3-brique*, palette dans
   vitrine-v3.css, posée par .v3-solution-page.v3-solution--<clé>) et un aperçu d'interface propre à la solution
   (components/_solution_apercu.html.twig). Le bouton principal reste bleu : c'est l'action de la marque. */

/* Accents de la page */
[data-vitrine-v3] .v3-solution-page .v3-solution-hero { border-bottom: 1px solid var(--v3-brique-trait); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-solution-page #usages .v3-eyebrow { color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-solution-page .v3-feature { border-top: 2px solid var(--v3-brique-trait); transition: border-color 220ms ease; }
[data-vitrine-v3] .v3-solution-page .v3-feature:hover { border-top-color: var(--v3-brique); }
[data-vitrine-v3] .v3-solution-page #usages .v3-text-link { color: var(--v3-brique-texte); }

/* Fenêtre de l'aperçu */
[data-vitrine-v3] .v3-solution-fenetre { border-color: var(--v3-brique-trait); box-shadow: 0 24px 60px #12243a14; }
[data-vitrine-v3] .v3-solution-fenetre .v3-product-caption { justify-content: flex-start; background: #f7f9fb; }
[data-vitrine-v3] .v3-solution-fenetre .v3-product-heading { margin-bottom: 16px; }
[data-vitrine-v3] .v3-solution-fenetre .v3-product-heading .v3-icon-box { width: 36px; height: 36px; }
[data-vitrine-v3] .v3-solution-fenetre .v3-product-heading .v3-icon-box .lucide { width: 18px; height: 18px; }
[data-vitrine-v3] .v3-solution-fenetre .v3-product-callout { margin-top: 14px; border-color: var(--v3-brique-trait); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-solution-fenetre .v3-product-callout > .lucide { color: var(--v3-brique); }

/* Briques communes des aperçus */
[data-vitrine-v3] .v3-ap { container-type: inline-size; display: grid; gap: 10px; color: var(--v3-ink); font-size: 0.6875rem; line-height: 1.45; }
[data-vitrine-v3] .v3-ap p { margin: 0; }
[data-vitrine-v3] .v3-ap :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-ap .lucide { flex: 0 0 auto; width: 14px; height: 14px; }
[data-vitrine-v3] .v3-ap-carte { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 11px 12px; border: 1px solid #e2e8ef; border-radius: 8px; background: var(--v3-white); transition: border-color 200ms ease, box-shadow 200ms ease, translate 200ms ease; }
[data-vitrine-v3] .v3-ap-carte:hover { border-color: var(--v3-brique-trait); box-shadow: 0 8px 20px #12243a12; translate: 0 -1px; }
[data-vitrine-v3] .v3-ap-carte-titre { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 650; }
[data-vitrine-v3] .v3-ap-carte-titre > .lucide { color: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-carte-titre > span:not([class]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-meta { margin-left: auto; color: var(--v3-muted); font-weight: 500; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-vitrine-v3] .v3-ap-discret { display: flex; align-items: center; gap: 5px; color: var(--v3-muted); }
[data-vitrine-v3] .v3-ap-fort { font-weight: 650; }
[data-vitrine-v3] .v3-ap-chiffre { color: var(--v3-muted); }
[data-vitrine-v3] .v3-ap-chiffre strong { color: var(--v3-brique-texte); font-size: 0.875rem; }
[data-vitrine-v3] .v3-ap-citation { padding-left: 9px; border-left: 2px solid var(--v3-brique-trait); color: #42536b; }
[data-vitrine-v3] .v3-ap-pastille { display: inline-flex; align-items: center; justify-self: start; padding: 2px 7px; border: 1px solid transparent; border-radius: 4px; font-size: 0.625rem; font-weight: 600; line-height: 1.45; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-pastille--accent { border-color: var(--v3-brique-trait); background: var(--v3-brique-doux); color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-ap-pastille--ok { border-color: #bfe3cf; background: #eef8f2; color: #1f6b47; }
[data-vitrine-v3] .v3-ap-pastille--attente { border-color: #efdfbf; background: #fcf5e9; color: #805312; }
[data-vitrine-v3] .v3-ap-pastille--neutre { border-color: #dce2e8; background: #f0f3f6; color: #45576b; }
[data-vitrine-v3] .v3-ap-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 4px; border: 1px solid var(--v3-brique-trait); border-radius: 999px; background: var(--v3-brique-doux); color: var(--v3-brique-texte); font-size: 0.5625rem; font-weight: 700; }
[data-vitrine-v3] .v3-ap-avatar--plein { border-color: var(--v3-brique-texte); background: var(--v3-brique-texte); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-ap-ia { padding: 1px 5px; border-radius: 4px; background: #efeafd; color: #5b3fc4; font-size: 0.5625rem; font-weight: 700; }
[data-vitrine-v3] .v3-ap-puces { display: flex; flex-wrap: wrap; gap: 5px; }
[data-vitrine-v3] .v3-ap-puce { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid #e2e8ef; border-radius: 4px; background: #f7f9fb; color: #42536b; font-size: 0.625rem; }
[data-vitrine-v3] .v3-ap-puce .lucide { width: 12px; height: 12px; color: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-puce .v3-ap-avatar { min-width: 16px; height: 16px; padding: 0 3px; font-size: 0.5rem; }
[data-vitrine-v3] .v3-ap-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--v3-muted); font-size: 0.5625rem; }
[data-vitrine-v3] .v3-ap-cle::before { display: inline-block; width: 10px; height: 4px; margin-right: 5px; border-radius: 2px; background: var(--v3-ap-cle, var(--v3-brique)); content: ''; vertical-align: middle; }
[data-vitrine-v3] .v3-ap-cle--manager, [data-vitrine-v3] .v3-ap-cle--auto { --v3-ap-cle: #64748b; }
[data-vitrine-v3] .v3-ap-cle--attendu::before { width: 2px; height: 10px; border-radius: 1px; background: var(--v3-ink); }
[data-vitrine-v3] .v3-ap-saisie { display: grid; gap: 3px; padding: 7px 9px; border: 1px solid #e2e8ef; border-radius: 6px; background: #fafbfd; }
[data-vitrine-v3] .v3-ap-tape { justify-self: start; color: #263a54; }
[data-vitrine-v3] .v3-ap-tape::after { display: inline-block; width: 1px; height: 1.05em; margin-left: 2px; background: var(--v3-brique-texte); content: ''; opacity: 0; vertical-align: -2px; }
[data-vitrine-v3] .v3-ap-case { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid #c3ced9; border-radius: 4px; color: var(--v3-on-action); }
[data-vitrine-v3] .v3-ap-case .lucide { width: 11px; height: 11px; stroke-width: 3; }
[data-vitrine-v3] :is(.v3-ap-proposition-retenue, .v3-ap-etape-faite) .v3-ap-case { border-color: var(--v3-brique); background: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-case--encours { border-color: var(--v3-brique); background: var(--v3-brique); box-shadow: inset 0 0 0 3px var(--v3-white); }
[data-vitrine-v3] .v3-ap-jauge { display: block; height: 5px; overflow: hidden; border-radius: 3px; background: #e7ecf2; }
[data-vitrine-v3] .v3-ap-jauge > span { display: block; height: 100%; border-radius: 3px; background: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-jauge--auto > span { background: #64748b; }
[data-vitrine-v3] .v3-ap-jauge--60 { width: 60%; }
[data-vitrine-v3] .v3-ap-jauge--80 { width: 80%; }
[data-vitrine-v3] .v3-ap-jauge--100 { width: 100%; }
[data-vitrine-v3] .v3-ap-lignes li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eef1f5; }
[data-vitrine-v3] .v3-ap-lignes li:last-child { border-bottom: 0; }

/* Circuit de validation et jalons d'un parcours : des points reliés par un trait qui se remplit. */
[data-vitrine-v3] :is(.v3-ap-circuit, .v3-ap-jalons) { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
[data-vitrine-v3] :is(.v3-ap-circuit, .v3-ap-jalons) li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; color: var(--v3-muted); text-align: center; }
[data-vitrine-v3] :is(.v3-ap-circuit, .v3-ap-jalons) li + li::before { position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: #e2e8ef; content: ''; }
[data-vitrine-v3] :is(.v3-ap-circuit-trait, .v3-ap-jalon-trait) { position: absolute; z-index: 1; top: 9px; right: 50%; width: 100%; height: 2px; background: var(--v3-brique); }
[data-vitrine-v3] li:not(.v3-ap-circuit-fait, .v3-ap-jalon-fait, .v3-ap-jalon-encours) > :is(.v3-ap-circuit-trait, .v3-ap-jalon-trait) { display: none; }
[data-vitrine-v3] :is(.v3-ap-circuit-point, .v3-ap-jalon-point) { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid #d5dde6; border-radius: 50%; background: var(--v3-white); color: var(--v3-on-action); }
[data-vitrine-v3] :is(.v3-ap-circuit-point, .v3-ap-jalon-point) .lucide { width: 11px; height: 11px; stroke-width: 3; }
[data-vitrine-v3] :is(.v3-ap-circuit-fait, .v3-ap-jalon-fait) { color: var(--v3-ink); }
[data-vitrine-v3] :is(.v3-ap-circuit-fait, .v3-ap-jalon-fait) :is(.v3-ap-circuit-point, .v3-ap-jalon-point) { border-color: var(--v3-brique); background: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-jalon-encours { color: var(--v3-ink); }
[data-vitrine-v3] .v3-ap-jalon-encours .v3-ap-jalon-point { border-color: var(--v3-brique); box-shadow: 0 0 0 3px var(--v3-brique-doux); }
[data-vitrine-v3] .v3-ap-jalons strong { font-weight: 650; }
[data-vitrine-v3] .v3-ap-jalons li > span:last-child { font-size: 0.5625rem; }

/* Compétences : deux regards sur cinq niveaux face au niveau attendu */
[data-vitrine-v3] .v3-ap-competences { display: grid; gap: 6px; }
[data-vitrine-v3] .v3-ap-competences li { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, auto); align-items: center; gap: 10px; margin-inline: -6px; padding: 4px 6px; border-radius: 6px; transition: background-color 180ms ease; }
[data-vitrine-v3] .v3-ap-competences li:hover { background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-ap-competences .v3-ap-pastille { justify-self: end; }
[data-vitrine-v3] .v3-ap-competence-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-regards { position: relative; display: grid; gap: 3px; }
[data-vitrine-v3] .v3-ap-niveau { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
[data-vitrine-v3] .v3-ap-niveau > span { height: 5px; border-radius: 2px; background: #e7ecf2; }
[data-vitrine-v3] .v3-ap-niveau--collaborateur { --v3-ap-niveau: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-niveau--manager { --v3-ap-niveau: #64748b; --v3-ap-decale: 160ms; }
[data-vitrine-v3] .v3-ap-niveau--1 > span:nth-child(-n + 1),
[data-vitrine-v3] .v3-ap-niveau--2 > span:nth-child(-n + 2),
[data-vitrine-v3] .v3-ap-niveau--3 > span:nth-child(-n + 3),
[data-vitrine-v3] .v3-ap-niveau--4 > span:nth-child(-n + 4),
[data-vitrine-v3] .v3-ap-niveau--5 > span { background: var(--v3-ap-niveau); }
[data-vitrine-v3] .v3-ap-niveau > span:nth-child(2) { --v3-ap-rang: 1; }
[data-vitrine-v3] .v3-ap-niveau > span:nth-child(3) { --v3-ap-rang: 2; }
[data-vitrine-v3] .v3-ap-niveau > span:nth-child(4) { --v3-ap-rang: 3; }
[data-vitrine-v3] .v3-ap-niveau > span:nth-child(5) { --v3-ap-rang: 4; }
[data-vitrine-v3] .v3-ap-competences li:nth-child(2) { --v3-ap-ligne: 350ms; }
[data-vitrine-v3] .v3-ap-competences li:nth-child(3) { --v3-ap-ligne: 700ms; }
[data-vitrine-v3] .v3-ap-competences li:nth-child(4) { --v3-ap-ligne: 1050ms; }
[data-vitrine-v3] .v3-ap-attendu--2 { --v3-ap-attendu: 2; }
[data-vitrine-v3] .v3-ap-attendu--3 { --v3-ap-attendu: 3; }
[data-vitrine-v3] .v3-ap-attendu--4 { --v3-ap-attendu: 4; }
/* Fiche de poste : le niveau attendu seul, sans les deux regards. */
[data-vitrine-v3] .v3-ap-niveau--cible { --v3-ap-niveau: color-mix(in srgb, var(--v3-brique) 55%, var(--v3-white)); }
[data-vitrine-v3] .v3-ap-parcours-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
/* Lecture par périmètre : part des revues au niveau attendu, compétence par compétence. */
[data-vitrine-v3] .v3-ap-perimetre { display: grid; gap: 7px; }
[data-vitrine-v3] .v3-ap-perimetre li { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, auto); align-items: center; gap: 10px; }
[data-vitrine-v3] .v3-ap-part--55 { width: 55%; }
[data-vitrine-v3] .v3-ap-part--73 { width: 73%; }
[data-vitrine-v3] .v3-ap-part--91 { width: 91%; }
[data-vitrine-v3] .v3-ap-repere { position: absolute; top: -3px; bottom: -3px; left: calc(var(--v3-ap-attendu, 3) * 20% - 2px); width: 2px; border-radius: 1px; background: var(--v3-ink); }

/* Formation : places de la session et bilan par trimestre */
[data-vitrine-v3] .v3-ap-places { display: flex; flex-wrap: wrap; gap: 4px; }
[data-vitrine-v3] .v3-ap-place { width: 12px; height: 12px; border-radius: 3px; background: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-place--libre { border: 1px dashed #c3ced9; background: transparent; }
[data-vitrine-v3] .v3-ap-histogramme { display: flex; align-items: flex-end; gap: 8px; height: 54px; border-bottom: 1px solid #e2e8ef; }
[data-vitrine-v3] .v3-ap-barre { flex: 1; border-radius: 3px 3px 0 0; background: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-barre--40 { height: 40%; }
[data-vitrine-v3] .v3-ap-barre--50 { height: 50%; }
[data-vitrine-v3] .v3-ap-barre--65 { height: 65%; }
[data-vitrine-v3] .v3-ap-barre--85 { height: 85%; }
[data-vitrine-v3] .v3-ap-axe { display: flex; gap: 8px; color: var(--v3-muted); font-size: 0.5625rem; }
[data-vitrine-v3] .v3-ap-axe > span { flex: 1; text-align: center; }

/* Copilote managérial : propositions et étapes d'une action */
[data-vitrine-v3] .v3-ap-propositions { display: grid; gap: 5px; }
[data-vitrine-v3] .v3-ap-propositions li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e2e8ef; border-radius: 6px; color: #42536b; }
[data-vitrine-v3] .v3-ap-propositions li > span:nth-child(2) { flex: 1; min-width: 0; }
[data-vitrine-v3] .v3-ap-proposition-retenue { border-color: var(--v3-brique-trait); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-ap-proposition-retenue > span:nth-child(2) { color: var(--v3-ink); font-weight: 600; }
[data-vitrine-v3] .v3-ap-etapes { display: grid; gap: 6px; }
[data-vitrine-v3] .v3-ap-etapes li { display: flex; align-items: center; gap: 8px; }
[data-vitrine-v3] .v3-ap-etapes .v3-ap-bascule { margin-left: auto; }

/* Dossier RH : recherche, liste, organigramme */
[data-vitrine-v3] .v3-ap-recherche { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--v3-brique-trait); border-radius: 6px; background: var(--v3-white); box-shadow: 0 0 0 3px var(--v3-brique-doux); }
[data-vitrine-v3] .v3-ap-recherche > .lucide { color: var(--v3-brique); }
[data-vitrine-v3] .v3-ap-recherche .v3-ap-puce { margin-left: auto; }
[data-vitrine-v3] .v3-ap-liste { display: grid; gap: 4px; }
[data-vitrine-v3] .v3-ap-liste li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid #e2e8ef; border-radius: 6px; background: var(--v3-white); transition: background-color 180ms ease, border-color 180ms ease; }
[data-vitrine-v3] .v3-ap-liste li:hover { border-color: var(--v3-brique-trait); }
[data-vitrine-v3] .v3-ap-liste li > .lucide { color: #a3b1c0; }
[data-vitrine-v3] .v3-ap-liste .v3-ap-liste-choisie { border-color: var(--v3-brique-trait); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-ap-personne { display: grid; flex: 1; min-width: 0; }
[data-vitrine-v3] .v3-ap-personne > span { overflow: hidden; color: var(--v3-muted); text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-organigramme { display: grid; justify-items: center; }
[data-vitrine-v3] .v3-ap-organigramme li { display: grid; justify-items: center; }
[data-vitrine-v3] .v3-ap-lien { width: 2px; height: 10px; background: var(--v3-brique-trait); }
[data-vitrine-v3] .v3-ap-noeud { padding: 3px 8px; border: 1px solid #e2e8ef; border-radius: 5px; background: #f7f9fb; font-size: 0.625rem; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-noeud--choisi { border-color: var(--v3-brique); background: var(--v3-brique-doux); color: var(--v3-brique-texte); font-weight: 650; }

/* Jeunes talents : acteurs du parcours et livret */
[data-vitrine-v3] .v3-ap-acteurs { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 8px; border-top: 1px solid #eef1f5; }
[data-vitrine-v3] .v3-ap-acteur { display: inline-flex; align-items: center; gap: 6px; color: #42536b; }
[data-vitrine-v3] .v3-ap-livret { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; }
[data-vitrine-v3] .v3-ap-livret > span:not([class]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-livret-entete { color: var(--v3-muted); font-size: 0.5625rem; font-weight: 600; }
[data-vitrine-v3] .v3-ap-livret-vide { justify-self: center; color: #a3b1c0; }

/* Audit : cercle d'évaluateurs, questionnaire et restitution */
[data-vitrine-v3] .v3-ap-cercle { position: relative; width: 132px; height: 132px; margin: 2px auto; }
[data-vitrine-v3] .v3-ap-orbite { position: absolute; inset: 18px; border: 1.5px dashed var(--v3-brique-trait); border-radius: 50%; }
[data-vitrine-v3] .v3-ap-cercle .v3-ap-avatar { position: absolute; translate: -50% -50%; }
[data-vitrine-v3] .v3-ap-cercle-centre { top: 50%; left: 50%; width: 46px; height: 46px; font-size: 0.5625rem; }
[data-vitrine-v3] .v3-ap-cercle-1 { top: 18px; left: 66px; }
[data-vitrine-v3] .v3-ap-cercle-2 { top: 42px; left: 108px; }
[data-vitrine-v3] .v3-ap-cercle-3 { top: 90px; left: 108px; }
[data-vitrine-v3] .v3-ap-cercle-4 { top: 114px; left: 66px; }
[data-vitrine-v3] .v3-ap-cercle-5 { top: 90px; left: 24px; }
[data-vitrine-v3] .v3-ap-cercle-6 { top: 42px; left: 24px; }
[data-vitrine-v3] .v3-ap-cercle .v3-ap-repondu { border-color: var(--v3-brique-texte); background: var(--v3-brique-texte); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-ap-questions { display: grid; gap: 8px; }
[data-vitrine-v3] .v3-ap-questions li { display: grid; gap: 4px; }
[data-vitrine-v3] .v3-ap-restitution { display: grid; gap: 7px; }
[data-vitrine-v3] .v3-ap-restitution li { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 10px; }
[data-vitrine-v3] .v3-ap-paire { display: grid; gap: 3px; }
[data-vitrine-v3] .v3-ap-regle { display: flex; align-items: center; gap: 6px; color: var(--v3-muted); font-size: 0.5625rem; }
[data-vitrine-v3] .v3-ap-regle .lucide { width: 12px; height: 12px; color: var(--v3-brique); }

/* Congés : calendrier et solde */
[data-vitrine-v3] .v3-ap-calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; font-size: 0.5625rem; font-variant-numeric: tabular-nums; text-align: center; }
[data-vitrine-v3] .v3-ap-jour-nom { color: var(--v3-muted); font-weight: 600; }
[data-vitrine-v3] .v3-ap-jour { padding: 3px 0; border-radius: 4px; color: #42536b; }
[data-vitrine-v3] .v3-ap-jour--repos { color: #a3b1c0; }
[data-vitrine-v3] .v3-ap-jour--choisi { background: var(--v3-brique-texte); color: var(--v3-on-action); font-weight: 700; }
[data-vitrine-v3] .v3-ap-compteur { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid #eef1f5; color: var(--v3-muted); }
[data-vitrine-v3] .v3-ap-compteur strong { color: var(--v3-brique-texte); font-size: 0.8125rem; }

/* Feuille de temps : la semaine par activité */
[data-vitrine-v3] .v3-ap-temps { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(6, minmax(0, 1fr)); align-items: center; gap: 3px; font-variant-numeric: tabular-nums; text-align: center; }
[data-vitrine-v3] .v3-ap-temps-entete { color: var(--v3-muted); font-size: 0.5625rem; font-weight: 600; }
[data-vitrine-v3] .v3-ap-temps-entete:first-child, [data-vitrine-v3] .v3-ap-temps-activite { text-align: left; }
[data-vitrine-v3] .v3-ap-temps-activite { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-ap-temps-case { padding: 4px 0; border-radius: 4px; background: var(--v3-brique-doux); color: var(--v3-brique-texte); font-weight: 600; transition: background-color 160ms ease; }
[data-vitrine-v3] .v3-ap-temps-case:hover { background: var(--v3-brique-trait); }
[data-vitrine-v3] .v3-ap-temps-total { font-weight: 700; }
[data-vitrine-v3] .v3-ap-temps-somme { padding-top: 4px; border-top: 1px solid #e2e8ef; font-weight: 650; }
[data-vitrine-v3] .v3-ap-temps-somme.v3-ap-temps-total { color: var(--v3-brique-texte); }

/* Un état qui change : l'avant laisse la place à l'après (sans animation, seul l'après est affiché). */
[data-vitrine-v3] .v3-ap-bascule { display: inline-grid; justify-items: start; }
[data-vitrine-v3] .v3-ap-bascule > * { grid-area: 1 / 1; }
[data-vitrine-v3] .v3-ap-bascule > .v3-ap-avant { visibility: hidden; }

/* Fenêtre étroite (téléphone, colonne du hero resserrée) */
@container (max-width: 400px) {
    [data-vitrine-v3] .v3-ap-deux { grid-template-columns: minmax(0, 1fr); }
    [data-vitrine-v3] .v3-ap-competences li { grid-template-columns: minmax(0, 1fr) 84px; }
    [data-vitrine-v3] .v3-ap-competences .v3-ap-pastille { grid-column: 1 / -1; justify-self: start; }
    [data-vitrine-v3] .v3-ap-temps { grid-template-columns: minmax(0, 1.3fr) repeat(6, minmax(0, 1fr)); }
    [data-vitrine-v3] .v3-ap-perimetre li { grid-template-columns: minmax(0, 1fr) 72px; }
    [data-vitrine-v3] .v3-ap-perimetre .v3-ap-discret { grid-column: 1 / -1; }
}

/* Composition à l'arrivée : délais par pas de 150 ms. */
[data-vitrine-v3] .v3-ap-d1 { --v3-ap-d: 150ms; }
[data-vitrine-v3] .v3-ap-d2 { --v3-ap-d: 300ms; }
[data-vitrine-v3] .v3-ap-d3 { --v3-ap-d: 450ms; }
[data-vitrine-v3] .v3-ap-d4 { --v3-ap-d: 600ms; }
[data-vitrine-v3] .v3-ap-d5 { --v3-ap-d: 750ms; }
[data-vitrine-v3] .v3-ap-d6 { --v3-ap-d: 900ms; }
[data-vitrine-v3] .v3-ap-d7 { --v3-ap-d: 1050ms; }
[data-vitrine-v3] .v3-ap-d8 { --v3-ap-d: 1200ms; }
[data-vitrine-v3] .v3-ap-d9 { --v3-ap-d: 1350ms; }
[data-vitrine-v3] .v3-ap-d10 { --v3-ap-d: 1500ms; }
[data-vitrine-v3] .v3-ap-d11 { --v3-ap-d: 1650ms; }
[data-vitrine-v3] .v3-ap-d12 { --v3-ap-d: 1800ms; }
[data-vitrine-v3] .v3-ap-d13 { --v3-ap-d: 1950ms; }
[data-vitrine-v3] .v3-ap-d14 { --v3-ap-d: 2100ms; }
[data-vitrine-v3] .v3-ap-d15 { --v3-ap-d: 2250ms; }
[data-vitrine-v3] .v3-ap-d16 { --v3-ap-d: 2400ms; }
/* Écrans des usages (maquette du 27/10/2026) : deux saisies de suite, puis l'état qui change. */
[data-vitrine-v3] .v3-ap-d22 { --v3-ap-d: 3300ms; }

@media (prefers-reduced-motion: no-preference) {
    [data-vitrine-v3] .v3-ap-entre { animation: v3-ap-entre 460ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--v3-ap-d, 0ms) both; }
    [data-vitrine-v3] .v3-ap-remplit { transform-origin: left center; animation: v3-ap-remplit 560ms cubic-bezier(0.3, 0.7, 0.2, 1) var(--v3-ap-d, 0ms) both; }
    [data-vitrine-v3] :is(.v3-ap-circuit-trait, .v3-ap-jalon-trait).v3-ap-remplit { transform-origin: left center; }
    [data-vitrine-v3] .v3-ap-monte { transform-origin: center bottom; animation: v3-ap-monte 620ms cubic-bezier(0.3, 0.7, 0.2, 1) var(--v3-ap-d, 0ms) both; }
    [data-vitrine-v3] .v3-ap-lien.v3-ap-monte { transform-origin: center top; }
    [data-vitrine-v3] .v3-ap-tampon { animation: v3-ap-tampon 420ms cubic-bezier(0.3, 1.5, 0.5, 1) var(--v3-ap-d, 0ms) both; }
    [data-vitrine-v3] .v3-ap-tape { animation: v3-ap-tape 1300ms steps(26, end) var(--v3-ap-d, 0ms) both; }
    [data-vitrine-v3] .v3-ap-tape::after { animation: v3-ap-curseur 800ms steps(1, end) calc(var(--v3-ap-d, 0ms) + 1300ms) 3; }
    [data-vitrine-v3] .v3-ap-bascule > .v3-ap-avant { animation: v3-ap-sort 260ms ease-in var(--v3-ap-d, 0ms) both; }
    [data-vitrine-v3] .v3-ap-bascule > .v3-ap-apres { animation: v3-ap-arrive 320ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--v3-ap-d, 0ms) + 220ms) both; }
    /* Niveaux : segments remplis un à un, ligne après ligne, la vue du manager juste après celle du collaborateur ; le
       niveau attendu se pose ensuite, et l'écart à justifier se signale deux fois. */
    [data-vitrine-v3] .v3-ap-niveau > span { transform-origin: left center; animation: v3-ap-remplit 260ms ease-out calc(300ms + var(--v3-ap-ligne, 0ms) + var(--v3-ap-decale, 0ms) + var(--v3-ap-rang, 0) * 70ms) both; }
    [data-vitrine-v3] .v3-ap-repere { animation: v3-ap-repere 360ms cubic-bezier(0.3, 1.4, 0.5, 1) calc(900ms + var(--v3-ap-ligne, 0ms)) both; }
    [data-vitrine-v3] .v3-ap-ecart .v3-ap-pastille { animation: v3-ap-tampon 420ms cubic-bezier(0.3, 1.5, 0.5, 1) var(--v3-ap-d, 0ms) both, v3-ap-signal 1100ms ease-in-out calc(var(--v3-ap-d, 0ms) + 500ms) 2; }
    [data-vitrine-v3] .v3-ap-orbite.v3-ap-entre { animation-name: v3-ap-orbite; animation-duration: 900ms; }
}
@keyframes v3-ap-entre { from { opacity: 0; transform: translateY(6px); } }
@keyframes v3-ap-remplit { from { transform: scaleX(0); } }
@keyframes v3-ap-monte { from { transform: scaleY(0); } }
@keyframes v3-ap-tampon { from { opacity: 0; transform: scale(1.6); } 60% { opacity: 1; } }
@keyframes v3-ap-tape { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes v3-ap-curseur { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes v3-ap-sort { from { opacity: 1; visibility: visible; } to { opacity: 0; transform: translateY(-4px); visibility: hidden; } }
@keyframes v3-ap-arrive { from { opacity: 0; transform: translateY(4px); } }
@keyframes v3-ap-repere { from { opacity: 0; transform: scaleY(0.2); } }
@keyframes v3-ap-signal { 50% { box-shadow: 0 0 0 4px var(--v3-brique-trait); } }
@keyframes v3-ap-orbite { from { opacity: 0; transform: rotate(-90deg) scale(0.85); } }

/* Aperçu sous la ligne de flottaison au chargement : la composition attend son arrivée à l'écran (mouvements.js). */
[data-vitrine-v3] [data-v3-apercu="attente"] :is(*, *::before, *::after) { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    [data-vitrine-v3] .v3-solution-page .v3-feature,
    [data-vitrine-v3] :is(.v3-ap-carte, .v3-ap-competences li, .v3-ap-liste li, .v3-ap-temps-case) { transition: none; }
    [data-vitrine-v3] .v3-ap-carte:hover { translate: none; }
}