/*
 * Accueil de la Vitrine V3, refonte du 23/10/2026 : hero où le GPS 3D occupe toute la largeur (texte à gauche, téléphone
 * d'Upikat à droite), clients et partenaires, prix et compteurs, onglets par rôle, solutions par brique, démonstration au
 * défilement, démo et confiance. Jetons de vitrine-v3.css, couleurs unies, rayons modérés (le téléphone est une illustration d'appareil).
 * Animations : js/vitrine-v3/accueil.js ; aucune avec la réduction des mouvements.
 */

/* Hero : fond bleu nuit, texte en blanc. Sous 64rem, le texte, puis le GPS, puis le téléphone d'Upikat, l'un sous
   l'autre. À partir de 64rem (plus bas), le GPS 3D occupe toute la largeur du hero et laisse libre la gauche du canevas
   pour le texte et les appels à l'action. */
[data-vitrine-v3] .v3-accueil-hero { position: relative; overflow: hidden; padding-block: 44px 56px; background: var(--v3-navy); color: #f3f6fb; }
[data-vitrine-v3] .v3-accueil-hero-grille { position: relative; z-index: 2; }
[data-vitrine-v3] .v3-accueil-hero-texte { min-width: 0; max-width: 36rem; }
[data-vitrine-v3] .v3-accueil-hero-texte h1 { max-width: 15ch; color: var(--v3-on-action); font-size: clamp(2.375rem, 4.2vw, 4rem); }
[data-vitrine-v3] .v3-accueil-hero .v3-eyebrow { color: #9ebfff; }
[data-vitrine-v3] .v3-accueil-hero .v3-eyebrow-line { background: light-dark(#9ebfff, #45619b); }
[data-vitrine-v3] .v3-accueil-hero-chapo { max-width: 34ch; margin-top: 24px; color: #c9d4e2; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; }
[data-vitrine-v3] .v3-accueil-hero-texte .v3-button-row { margin-top: 34px; }
[data-vitrine-v3] .v3-accueil-hero .v3-button-secondary { border-color: light-dark(#5b7391, #849ebe); background: transparent; color: var(--v3-on-action); }
[data-vitrine-v3] .v3-accueil-hero .v3-button-secondary:hover { border-color: light-dark(#9ebfff, #364970); background: #1c334d; }

/* Scène : le GPS 3D (variante hero), seul. */
[data-vitrine-v3] .v3-accueil-hero-fond { margin-top: 40px; }
[data-vitrine-v3] .v3-scene { position: relative; min-width: 0; margin: 0; }
[data-vitrine-v3] .v3-scene-gps { min-width: 0; }

/* Hero plein cadre : le canevas couvre tout le hero ; à droite, les quatre étapes en zigzag et le panneau de lecture posé
   en bas. Les étapes sont placées depuis le bord droit (marge du conteneur, pas entre deux étapes) pour ne jamais passer
   sous le texte ; le trajet 3D suit leurs points. */
@media (min-width: 64rem) {
    [data-vitrine-v3] .v3-accueil-hero { --v3-hero-marge: max(32px, calc((100% - 1280px) / 2)); --v3-hero-pas: 144px; display: flex; align-items: center; min-height: clamp(620px, calc(100svh - 150px), 800px); padding-block: 64px; }
    [data-vitrine-v3] .v3-accueil-hero-grille { pointer-events: none; }
    [data-vitrine-v3] .v3-accueil-hero-texte { max-width: 23rem; pointer-events: auto; }
    [data-vitrine-v3] .v3-accueil-hero-fond { position: absolute; inset: 0; z-index: 0; width: auto; margin: 0; }
    [data-vitrine-v3] .v3-accueil-hero :is(.v3-scene, .v3-scene-gps) { position: absolute; inset: 0; width: auto; padding: 0; }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-map { position: absolute; inset: 0; height: auto; min-height: 0; }
    /* Recette du 26/10/2026 : sans titre ni pause en haut, les étapes remontent pour laisser au panneau de lecture (plus
       haut, avec son aperçu d'interface) la bande du bas, sans masquer le cercle de « Formation ». */
    /* Hauteurs en part de la zone sous la bande haute passée sous l'en-tête (--v3-gps-haut, effets.css). */
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-station:nth-child(1) { top: calc(36% + var(--v3-gps-haut, 0px) * 0.64); left: calc(100% - var(--v3-hero-marge) - 80px - var(--v3-hero-pas) * 3); }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-station:nth-child(2) { top: calc(11% + var(--v3-gps-haut, 0px) * 0.89); left: calc(100% - var(--v3-hero-marge) - 80px - var(--v3-hero-pas) * 2); }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-station:nth-child(3) { top: calc(37% + var(--v3-gps-haut, 0px) * 0.63); left: calc(100% - var(--v3-hero-marge) - 80px - var(--v3-hero-pas)); }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-station:nth-child(4) { top: calc(14% + var(--v3-gps-haut, 0px) * 0.86); left: calc(100% - var(--v3-hero-marge) - 80px); }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-reader { position: absolute; right: var(--v3-hero-marge); bottom: 36px; z-index: 4; width: min(380px, 30%); overflow: hidden; border: 1px solid light-dark(#ced9e3, #384550); border-radius: 12px; box-shadow: 0 24px 60px #0613224d; transition: opacity 300ms ease-out, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
    /* Recette du 26/10/2026 : la fiche n'apparaît qu'une fois la flèche posée sur l'étape et s'efface quand elle repart
       (data-v3-gps-lecteur, gps-animation.js). Tant que le GPS n'est ni prêt ni déclaré indisponible (data-v3-gps-ready
       absent), elle attend aussi, JavaScript actif (data-v3-js, posé dans l'en-tête) ; un secours la montre au bout de 6 s
       si le script n'a pas pris la main. */
    [data-v3-js] [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps]:not([data-v3-gps-ready]) .v3-gps-reader { pointer-events: none; animation: v3-gps-lecteur-secours 300ms ease-out 6s both; }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps][data-v3-gps-ready="true"][data-v3-gps-lecteur="en-route"] .v3-gps-reader { opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98); transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 0s linear 200ms; }
    /* La fiche affichée (visible d'office, gps-animation.css) disparaît avec la carte : jamais de lien atteignable à l'aveugle. */
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps][data-v3-gps-ready="true"][data-v3-gps-lecteur="en-route"] .v3-gps-panel { visibility: hidden; transition: visibility 0s linear 200ms; }
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-panel { min-height: 0; padding: 14px 18px 16px; }
}
@media (min-width: 80rem) {
    [data-vitrine-v3] .v3-accueil-hero { --v3-hero-pas: 180px; }
    [data-vitrine-v3] .v3-accueil-hero-texte { max-width: min(34rem, 40%); }
}
@keyframes v3-gps-lecteur-secours { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

/* Téléphone : cadre façon titane (aplats et liserés), boutons latéraux, Dynamic Island, barre d'état et indicateur. */
[data-vitrine-v3] .v3-telephone { position: relative; z-index: 3; width: 232px; height: 440px; margin: 28px auto 0; padding: 7px; border-radius: 46px; background: #2a3442; box-shadow: inset 0 0 0 1px #56657a, inset 0 0 0 3px #1a222d, 0 0 0 1px #0d141d, 0 38px 70px #0a16264d, 0 10px 24px #0a162633; }
[data-vitrine-v3] .v3-telephone-bouton { position: absolute; width: 3px; border-radius: 2px; background: #3a4656; }
[data-vitrine-v3] .v3-telephone-bouton--action { top: 92px; left: -3px; height: 22px; }
[data-vitrine-v3] .v3-telephone-bouton--volume { top: 128px; left: -3px; height: 64px; box-shadow: 0 0 0 0 transparent; }
[data-vitrine-v3] .v3-telephone-bouton--marche { top: 132px; right: -3px; height: 72px; }
[data-vitrine-v3] .v3-telephone-ecran { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 39px; background: light-dark(#f2f4f8, #131a21); box-shadow: inset 0 0 0 1px #0d141d; }
[data-vitrine-v3] .v3-telephone-statut { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 18px 0 24px; color: var(--v3-ink); font-size: 0.75rem; font-weight: 650; background: var(--v3-white); }
[data-vitrine-v3] .v3-telephone-ilot { position: absolute; top: 10px; left: 50%; width: 72px; height: 23px; border-radius: 13px; background: #05090f; transform: translateX(-50%); }
[data-vitrine-v3] .v3-telephone-icones { display: inline-flex; align-items: center; gap: 4px; }
[data-vitrine-v3] .v3-telephone-icones .lucide { width: 12px; height: 12px; stroke-width: 2.2; }
[data-vitrine-v3] .v3-telephone-barre { position: absolute; bottom: 7px; left: 50%; width: 92px; height: 4px; border-radius: 2px; background: #12243a; transform: translateX(-50%); }
[data-vitrine-v3] .v3-chat-entete { display: flex; align-items: center; gap: 9px; padding: 6px 14px 11px 10px; border-bottom: 1px solid light-dark(#e3e8ef, #393f47); background: var(--v3-white); }
[data-vitrine-v3] .v3-chat-retour { width: 18px; height: 18px; color: var(--v3-blue); }
[data-vitrine-v3] .v3-chat-avatar { display: inline-flex; flex: 0 0 auto; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: light-dark(#e2f2ff, #09283d); }
[data-vitrine-v3] .v3-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
[data-vitrine-v3] .v3-chat-entete > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-vitrine-v3] .v3-chat-entete strong { display: inline-flex; align-items: center; gap: 6px; color: var(--v3-ink); font-size: 0.8125rem; }
[data-vitrine-v3] .v3-chat-entete > span:last-child > span { overflow: hidden; color: var(--v3-muted); font-size: 0.625rem; text-overflow: ellipsis; white-space: nowrap; }
/* Fil : la piste est ancrée en bas, les messages précédents remontent (animation FLIP dans accueil.js). */
[data-vitrine-v3] .v3-chat-fil { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; }
[data-vitrine-v3] .v3-chat-piste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; list-style: none; }
[data-vitrine-v3] .v3-chat-bulle { max-width: 86%; margin: 0; padding: 8px 11px; border-radius: 12px; font-size: 0.75rem; line-height: 1.45; }
[data-vitrine-v3] .v3-chat-bulle--ia { align-self: flex-start; border: 1px solid light-dark(#e0e6ee, #394048); border-bottom-left-radius: 4px; background: var(--v3-white); color: var(--v3-ink); }
[data-vitrine-v3] .v3-chat-bulle--vous { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--v3-action); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-chat-report { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; margin: 0; padding: 4px 8px; border: 1px solid light-dark(#ddd6fe, #433a63); border-radius: 6px; background: light-dark(#f5f3ff, #252134); color: light-dark(#5b21b6, #c6bafd); font-size: 0.625rem; font-weight: 600; }
[data-vitrine-v3] .v3-chat-report .lucide { width: 12px; height: 12px; }
[data-vitrine-v3] .v3-chat-ecrit { display: inline-flex; align-self: flex-start; gap: 4px; padding: 11px 12px; border: 1px solid light-dark(#e0e6ee, #394048); border-radius: 12px; border-bottom-left-radius: 4px; background: var(--v3-white); }
[data-vitrine-v3] .v3-chat-ecrit[hidden] { display: none; }
[data-vitrine-v3] .v3-chat-ecrit > span { width: 6px; height: 6px; border-radius: 50%; background: light-dark(#9aa8b8, #4a5765); animation: v3-ecrit 1s ease-in-out infinite; }
[data-vitrine-v3] .v3-chat-ecrit > span:nth-child(2) { animation-delay: 150ms; }
[data-vitrine-v3] .v3-chat-ecrit > span:nth-child(3) { animation-delay: 300ms; }
[data-vitrine-v3] .v3-chat-saisie { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 22px; padding: 6px 6px 6px 13px; border: 1px solid light-dark(#dfe5ec, #394048); border-radius: 12px; background: var(--v3-white); color: #8a97a6; font-size: 0.6875rem; }
[data-vitrine-v3] .v3-chat-envoi { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--v3-action); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-chat-envoi .lucide { width: 14px; height: 14px; }

@keyframes v3-apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v3-ecrit { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes v3-parcours-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v3-parcours-sortie { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes v3-parcours-pop { 0% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes v3-parcours-surligne { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v3-parcours-ecrit-bref { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v3-parcours-onde { 0% { opacity: 0.55; transform: scale(0.75); } 100% { opacity: 0; transform: scale(1.3); } }

/* Clients et partenaires. */
[data-vitrine-v3] .v3-logos { padding-block: 44px 48px; border-block: 1px solid var(--v3-line); background: var(--v3-white); }
[data-vitrine-v3] .v3-logos-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
[data-vitrine-v3] .v3-logos-tete h2 { color: var(--v3-ink); font-size: 1.125rem; letter-spacing: -0.02em; }
[data-vitrine-v3] .v3-defilant { display: flex; margin-top: 22px; overflow: hidden; }
[data-vitrine-v3] .v3-defilant-piste { display: flex; flex: 0 0 auto; gap: 14px; margin: 0; padding: 0 14px 0 0; list-style: none; animation: v3-defile 80s linear infinite; }
[data-vitrine-v3] .v3-defilant:hover .v3-defilant-piste,
[data-vitrine-v3] .v3-defilant:focus-within .v3-defilant-piste { animation-play-state: paused; }
@keyframes v3-defile { to { transform: translateX(-100%); } }
[data-vitrine-v3] .v3-logo { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 64px; padding-inline: 20px; }
/* Logos recadrés sur leur contenu : la hauteur règle l'équilibre, les plus larges sont bornés. */
[data-vitrine-v3] .v3-logo > a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 6px 8px; border-radius: 8px; transition: background-color 400ms ease, transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-vitrine-v3] .v3-logo img { width: auto; height: auto; max-width: 150px; max-height: 46px; filter: grayscale(1) contrast(0.92); opacity: 0.7; transition: filter 500ms ease, opacity 500ms ease; }
/* Au survol ou au focus : le logo retrouve ses couleurs, s'éclaire d'un halo discret et se soulève à peine. */
[data-vitrine-v3] .v3-logo > a:is(:hover, :focus-visible) { background: light-dark(#f5f8fd, #121820); transform: translateY(-2px); }
[data-vitrine-v3] .v3-logo > a:is(:hover, :focus-visible) img { filter: grayscale(0) contrast(1) drop-shadow(0 6px 14px #194bd124); opacity: 1; }
[data-vitrine-v3] .v3-partenaires { display: flex; align-items: center; gap: 22px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--v3-line); }
[data-vitrine-v3] .v3-partenaires-titre { flex: 0 0 auto; margin: 0; color: var(--v3-muted); font-size: 0.8125rem; font-weight: 600; }
[data-vitrine-v3] .v3-partenaires-liste { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-partenaires-liste .v3-logo { height: 52px; padding-inline: 14px; }
[data-vitrine-v3] .v3-partenaires-liste .v3-logo img { max-width: 130px; max-height: 38px; }

/* Prix de l'innovation IA & RH (components/_accueil_prix.html.twig) : bandeau éditorial sur papier ivoire, filets or,
   médaille bleu nuit dont l'anneau se dessine à l'apparition. Couleurs unies, aucun logo reproduit. */
[data-vitrine-v3] .v3-prix { --v3-or: #93702a; --v3-or-clair: #e2cf9f; padding-block: 64px; border-bottom: 1px solid light-dark(#ebe2cf, #493e28); background: light-dark(#f8f5ee, #131921); }
[data-vitrine-v3] .v3-prix-grille { display: grid; grid-template-columns: 196px minmax(0, 1fr) minmax(0, 0.75fr); align-items: center; gap: 56px; }
[data-vitrine-v3] .v3-prix-medaille { position: relative; display: grid; place-items: center; width: 196px; aspect-ratio: 1; }
[data-vitrine-v3] .v3-prix-anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
[data-vitrine-v3] .v3-prix-anneau circle { fill: none; stroke: var(--v3-or); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1500ms cubic-bezier(0.4, 0, 0.2, 1) 200ms; }
[data-vitrine-v3] .v3-prix-anneau .v3-prix-anneau-fin { stroke: var(--v3-or-clair); stroke-width: 1; stroke-dasharray: 0.6 1.4; transition: opacity 900ms ease 900ms; }
[data-vitrine-v3] [data-v3-reveal="pending"] .v3-prix-anneau circle:first-child { stroke-dashoffset: 100; }
[data-vitrine-v3] [data-v3-reveal="pending"] .v3-prix-anneau .v3-prix-anneau-fin { opacity: 0; }
[data-vitrine-v3] .v3-prix-coeur { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 144px; height: 144px; border-radius: 50%; background: var(--v3-navy); box-shadow: 0 20px 44px #12243a38; }
[data-vitrine-v3] .v3-prix-coeur .lucide { width: 38px; height: 38px; color: #e6c983; stroke-width: 1.5; }
[data-vitrine-v3] .v3-prix-annee { margin-top: 6px; color: var(--v3-on-action); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.1; }
[data-vitrine-v3] .v3-prix-mention { margin-top: 3px; color: #e6c983; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
[data-vitrine-v3] .v3-prix-surtitre { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--v3-or); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
[data-vitrine-v3] .v3-prix-surtitre::before { width: 28px; height: 1px; background: var(--v3-or); content: ''; }
[data-vitrine-v3] .v3-prix h2 { margin-top: 14px; color: var(--v3-ink); font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.035em; line-height: 1.08; }
[data-vitrine-v3] .v3-prix-organisateur { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; color: light-dark(#3d3320, #e3d6bf); font-size: 1.25rem; font-weight: 600; }
[data-vitrine-v3] .v3-prix-filet { width: 44px; height: 1px; background: var(--v3-or); transform-origin: left; transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 500ms; }
[data-vitrine-v3] [data-v3-reveal="pending"] .v3-prix-filet { transform: scaleX(0); }
[data-vitrine-v3] .v3-prix-propos { margin: 0; padding-left: 28px; border-left: 1px solid var(--v3-or-clair); color: light-dark(#5b5140, #cec2ae); font-size: 0.9375rem; line-height: 1.65; }
[data-vitrine-v3] .v3-prix-propos p { margin: 0; }
[data-vitrine-v3] .v3-prix-propos .v3-prix-propos-accroche { margin-bottom: 10px; color: var(--v3-ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; text-wrap: balance; }

/* Bénéfices par rôle (recette du 26/10/2026) : titre et sélecteur centrés, l'un sous l'autre, qui coiffent les deux
   colonnes (texte et composant) ; le sélecteur est un contrôle segmenté à trois parts égales dont le curseur glisse d'un
   rôle à l'autre (--v3-onglet, posé par vitrine-v3.js). Les trois panneaux sont superposés dans la même scène : la
   hauteur ne bouge pas d'un rôle à l'autre, le panneau sortant s'efface pendant que l'entrant arrive. */
[data-vitrine-v3] .v3-publics-tete { display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-vitrine-v3] .v3-publics-tete .v3-eyebrow { justify-content: center; }
[data-vitrine-v3] .v3-publics-tete h2 { max-width: 22ch; }
[data-vitrine-v3] .v3-publics-liste { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 31rem); margin-top: 28px; padding: 5px; border: 1px solid var(--v3-line); border-radius: 10px; background: light-dark(#eef2f6, #141a22); }
[data-vitrine-v3] .v3-publics-liste button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 0; border-radius: 8px; background: transparent; color: light-dark(#3e5066, #b3c8e2); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: color 200ms ease; }
[data-vitrine-v3] .v3-publics-liste button .lucide { width: 16px; height: 16px; transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-vitrine-v3] .v3-publics-liste button:hover { color: var(--v3-blue); }
[data-vitrine-v3] .v3-publics-liste button:hover .lucide { transform: translateY(-1px) scale(1.08); }
[data-vitrine-v3] .v3-publics-liste button[aria-selected="true"] { color: var(--v3-blue); }
[data-vitrine-v3] .v3-publics-liste button:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
[data-vitrine-v3] .v3-publics-curseur { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 8px; background: var(--v3-white); box-shadow: 0 2px 8px #12243a14, 0 0 0 1px #12243a0a; transform: translateX(calc(var(--v3-onglet, 0) * 100%)); transition: transform 360ms cubic-bezier(0.2, 0.75, 0.2, 1); pointer-events: none; }
[data-vitrine-v3] .v3-publics-repli { display: flex; justify-content: center; gap: 18px; margin-top: 24px; }
[data-vitrine-v3] .v3-publics-scene { display: grid; gap: 48px; margin-top: 48px; }
[data-vitrine-v3] .v3-public { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 56px; transition: opacity 240ms ease 130ms, visibility 0s linear 0s; }
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public { grid-area: 1 / 1; }
/* Fond de la colonne du composant commun aux trois rôles : il ne bouge pas, seuls les composants se relaient dessus. */
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-publics-scene { position: relative; isolation: isolate; }
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-publics-scene::before { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: calc((100% - 56px) * 0.55); border-radius: 12px; background: light-dark(#eaf0f7, #151b23); content: ''; }
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public-visuel { align-self: stretch; background: transparent; }
/* Panneau inactif : présent dans la scène (il réserve sa hauteur), invisible et hors de l'arbre d'accessibilité.
   « !important » : seule exception, plus précise, à la règle [hidden] { display: none !important } de vitrine-v3.css. */
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public[hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 130ms ease, visibility 0s linear 130ms; }
[data-vitrine-v3] .v3-public h3 { max-width: 20ch; font-size: clamp(1.4rem, 2.2vw, 1.875rem); line-height: 1.25; letter-spacing: -0.035em; }
[data-vitrine-v3] .v3-public-texte ul { margin: 26px 0 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-public-texte li { display: flex; align-items: center; gap: 14px; margin-top: 16px; color: light-dark(#34475d, #b8cfe9); font-size: 1rem; line-height: 1.5; }
/* Le texte du rôle choisi arrive par un léger glissement, ligne après ligne ; le composant se pose sans saut. */
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public:not([hidden]) :is(.v3-public-texte h3, .v3-public-texte li) { animation: v3-public-ligne 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 130ms both; }
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public:not([hidden]) .v3-public-texte li:nth-child(1) { animation-delay: 190ms; }
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public:not([hidden]) .v3-public-texte li:nth-child(2) { animation-delay: 240ms; }
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public:not([hidden]) .v3-public-texte li:nth-child(3) { animation-delay: 290ms; }
[data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public:not([hidden]) .v3-app { animation: v3-public-app 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 130ms both; }
@keyframes v3-public-ligne { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v3-public-app { from { opacity: 0.4; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
/* Solutions : chaque carte dans la couleur de sa solution (palette et icône : css/vitrine-v3/vitrine-v3.css), filet
   supérieur qui se déploie au survol, libellé de la brique et lien dans la même teinte. */
[data-vitrine-v3] .v3-solution-card[class*="v3-brique--"] { position: relative; overflow: hidden; transition: opacity 520ms ease var(--v3-reveal-delay, 0ms), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--v3-reveal-delay, 0ms), border-color 220ms ease, box-shadow 220ms ease; }
[data-vitrine-v3] .v3-solution-card[class*="v3-brique--"]::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--v3-brique); content: ''; transform: scaleX(0.18); transform-origin: left; transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-vitrine-v3] .v3-solution-card[class*="v3-brique--"] h3 a:hover { color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-solution-card[class*="v3-brique--"] > .v3-text-link { color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-solution-card[class*="v3-brique--"]:hover { border-color: var(--v3-brique-trait); box-shadow: 0 14px 34px #12243a12; }
[data-vitrine-v3] .v3-solution-card[class*="v3-brique--"]:hover::before { transform: scaleX(1); }
[data-vitrine-v3] .v3-solution-brique { color: var(--v3-brique-texte); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; text-align: right; }

/* Scène des composants : un fond doux, le composant posé dessus à sa taille naturelle (jamais étiré ni recadré). */
[data-vitrine-v3] .v3-public-visuel { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 36px; border-radius: 12px; background: light-dark(#eaf0f7, #151b23); }

/* Composants simplifiés inspirés de l'application (components/_accueil_app.html.twig). */
[data-vitrine-v3] .v3-app { width: min(100%, 32rem); overflow: hidden; border: 1px solid light-dark(#d7dfe9, #39424d); border-radius: 12px; background: var(--v3-white); box-shadow: 0 24px 56px #12243a1c; color: var(--v3-ink); }
[data-vitrine-v3] .v3-app-barre { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid light-dark(#e6ebf1, #393e45); background: light-dark(#f7f9fc, #121820); font-size: 0.8125rem; font-weight: 650; }
[data-vitrine-v3] .v3-app-barre img { width: 22px; height: 22px; border-radius: 5px; }
[data-vitrine-v3] .v3-app-barre-fin { margin-left: auto; color: var(--v3-muted); font-size: 0.6875rem; font-weight: 500; }
[data-vitrine-v3] .v3-app-corps { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
[data-vitrine-v3] .v3-app-titre { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
[data-vitrine-v3] .v3-app-titre p { margin: 0; color: var(--v3-muted); font-size: 0.75rem; }
[data-vitrine-v3] .v3-app h4 { margin: 2px 0 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; }
[data-vitrine-v3] .v3-app-etiquette { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 3px 9px; border: 1px solid; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
[data-vitrine-v3] .v3-app-etiquette--verte { border-color: light-dark(#bfe3cf, #1d4d37); background: light-dark(#eef8f2, #17291f); color: light-dark(#1f6b47, #88d1a7); }
[data-vitrine-v3] .v3-app-etiquette--bleue { border-color: light-dark(#d3e0ff, #323f62); background: light-dark(#edf2ff, #1d2439); color: light-dark(#1745b3, #a8c4fc); }
[data-vitrine-v3] .v3-app-etiquette--ambre { border-color: light-dark(#f1d9ae, #543d0c); background: light-dark(#fdf4e6, #302106); color: light-dark(#8a4b0b, #f2ab74); }
[data-vitrine-v3] .v3-app-etiquette--violette { border-color: light-dark(#ddd6fe, #433a63); background: light-dark(#f5f3ff, #252134); color: light-dark(#5b21b6, #c6bafd); }
[data-vitrine-v3] .v3-app-sites { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-app-sites li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
[data-vitrine-v3] .v3-app-sites li > span:nth-child(2) { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.875rem; }
[data-vitrine-v3] .v3-app-site { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid light-dark(#dce3ec, #39414b); border-radius: 8px; background: light-dark(#f7f9fc, #121820); color: light-dark(#425570, #aec4e4); font-size: 0.75rem; font-weight: 700; }
[data-vitrine-v3] .v3-app-jauge { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: light-dark(#e7ecf2, #161c24); }
[data-vitrine-v3] .v3-app-jauge > span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--v3-action); }
[data-vitrine-v3] .v3-app-jauge--large { height: 8px; }
[data-vitrine-v3] .v3-app-jauge[data-jauge="24"] > span { width: 24%; background: light-dark(#d97706, #713b02); }
[data-vitrine-v3] .v3-app-jauge[data-jauge="58"] > span { width: 58%; }
[data-vitrine-v3] .v3-app-jauge[data-jauge="66"] > span { width: 66%; }
[data-vitrine-v3] .v3-app-jauge[data-jauge="80"] > span { width: 80%; background: #7c3aed; }
[data-vitrine-v3] .v3-app-jauge[data-jauge="86"] > span { width: 86%; background: light-dark(#2f9e64, #0c512f); }
[data-vitrine-v3] .v3-app-alerte { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid light-dark(#f1d9ae, #543d0c); border-radius: 10px; background: light-dark(#fdf8ee, #2a2211); color: light-dark(#5b4a2b, #d8c5a2); font-size: 0.8125rem; line-height: 1.45; }
[data-vitrine-v3] .v3-app-alerte .lucide { width: 18px; height: 18px; flex: 0 0 auto; color: light-dark(#b45309, #f19562); }
[data-vitrine-v3] .v3-app-bouton { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 1px solid; border-radius: 8px; font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
[data-vitrine-v3] .v3-app-bouton .lucide { width: 14px; height: 14px; }
[data-vitrine-v3] .v3-app-bouton--plein { margin-left: auto; border-color: var(--v3-action); background: var(--v3-action); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-app-bouton--vert { border-color: light-dark(#bfe3cf, #1d4d37); background: light-dark(#eef8f2, #17291f); color: light-dark(#1f6b47, #88d1a7); }
[data-vitrine-v3] .v3-app-bouton--violet { border-color: light-dark(#d6dcfb, #393e61); background: light-dark(#eef0fe, #212339); color: light-dark(#3b41b8, #b0befa); }
[data-vitrine-v3] .v3-app-personne { display: flex; align-items: center; gap: 12px; }
[data-vitrine-v3] .v3-app-personne p { margin: 2px 0 0; color: var(--v3-muted); font-size: 0.75rem; }
[data-vitrine-v3] .v3-app-avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: light-dark(#e4ecff, #1a2544); color: var(--v3-blue); font-size: 0.875rem; font-weight: 700; }
[data-vitrine-v3] .v3-app-avis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
[data-vitrine-v3] .v3-app-carte { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid light-dark(#e3e8ef, #393f47); border-radius: 10px; background: var(--v3-white); }
[data-vitrine-v3] .v3-app-carte-titre { margin: 0; font-size: 0.8125rem; font-weight: 650; }
[data-vitrine-v3] .v3-app-note { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
[data-vitrine-v3] .v3-app-note > span + span { color: var(--v3-muted); font-size: 0.875rem; font-weight: 500; }
/* Jauge à cinq segments, comme les avis de l'application : la couleur suit la note. */
[data-vitrine-v3] .v3-app-segments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
[data-vitrine-v3] .v3-app-segments > span { height: 6px; border-radius: 3px; background: light-dark(#e7ecf2, #161c24); }
[data-vitrine-v3] .v3-app-segments--4 > span:nth-child(-n + 4) { background: light-dark(#2f9e64, #0c512f); }
[data-vitrine-v3] .v3-app-segments--3 > span:nth-child(-n + 3) { background: light-dark(#c9b61d, #685e06); }
[data-vitrine-v3] .v3-app-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-app-actions { display: flex; flex-wrap: wrap; gap: 10px; }
[data-vitrine-v3] .v3-app-carte--ligne { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
[data-vitrine-v3] .v3-app-carte--ligne > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.875rem; }
[data-vitrine-v3] .v3-app-icone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: light-dark(#f3effe, #282038); color: light-dark(#6d28d9, #bcaef9); }
[data-vitrine-v3] .v3-app-icone .lucide { width: 18px; height: 18px; }
[data-vitrine-v3] .v3-app-sous { color: var(--v3-muted); font-size: 0.75rem; }
[data-vitrine-v3] .v3-app-upikat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid light-dark(#ddd6fe, #433a63); border-radius: 10px; background: light-dark(#f8f6ff, #252030); color: light-dark(#3b2a7a, #cfccfe); font-size: 0.8125rem; font-weight: 600; }
[data-vitrine-v3] .v3-app-upikat img { width: 28px; height: 28px; border-radius: 50%; background: light-dark(#e2f2ff, #09283d); }

/* Composants vivants (recette du 26/10/2026) : réactions au survol et actions rejouées par js/vitrine-v3/accueil.js à
   l'ouverture de l'onglet. Les jauges se remplissent depuis la gauche ; les compteurs et statuts changent en fondu. */
[data-vitrine-v3] .v3-app-compteur { margin: -4px 0 0; color: var(--v3-muted); font-size: 0.8125rem; }
[data-vitrine-v3] .v3-app-compteur strong { color: var(--v3-ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
[data-vitrine-v3] .v3-app-site-nom { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
[data-vitrine-v3] .v3-app-site-detail { color: var(--v3-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-4px); transition: opacity 200ms ease, transform 200ms ease; }
[data-vitrine-v3] .v3-app-sites li { margin-inline: -8px; padding: 6px 8px; border-radius: 8px; transition: background-color 180ms ease; }
[data-vitrine-v3] .v3-app-sites li:hover { background: light-dark(#f4f7fb, #131920); }
[data-vitrine-v3] .v3-app-sites li:hover .v3-app-site-detail,
[data-vitrine-v3] .v3-app-sites li[data-v3-app-vivant] .v3-app-site-detail { opacity: 1; transform: none; }
[data-vitrine-v3] .v3-app-sites li:hover .v3-app-site { border-color: light-dark(#c7d6ef, #334460); background: var(--v3-white); color: var(--v3-blue); }
[data-vitrine-v3] .v3-app-sites li:hover .v3-app-jauge { transform: scaleY(1.35); }
[data-vitrine-v3] .v3-app-sites { gap: 6px; }
[data-vitrine-v3] .v3-app-jauge { transition: transform 180ms ease; }
[data-vitrine-v3] .v3-app-jauge > span { transform-origin: left center; transition: width 700ms cubic-bezier(0.3, 0.7, 0.2, 1); }
[data-vitrine-v3] .v3-app-etiquette { transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease; }
[data-vitrine-v3] .v3-app-bouton { transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease; }
[data-vitrine-v3] .v3-app-bouton:hover { transform: translateY(-1px); box-shadow: 0 4px 10px #12243a1f; }
[data-vitrine-v3] .v3-app-bouton--plein:hover { border-color: var(--v3-action-hover); background: var(--v3-action-hover); }
[data-vitrine-v3] .v3-app-bouton--vert:hover { border-color: light-dark(#9fd3b6, #20543b); background: light-dark(#e3f4ea, #0b2d1d); }
[data-vitrine-v3] .v3-app-bouton--violet:hover { border-color: light-dark(#bcc5f7, #3e436d); background: light-dark(#e4e7fd, #222347); }
[data-vitrine-v3] .v3-app-bouton--vert .lucide { transition: transform 220ms ease; }
[data-vitrine-v3] .v3-app-bouton--vert:hover .lucide { transform: rotate(90deg); }
[data-vitrine-v3] .v3-app-bouton--violet:hover .lucide { animation: v3-app-eclair 520ms ease; }
[data-vitrine-v3] .v3-app-bouton[data-v3-app-presse] { transform: scale(0.95); box-shadow: 0 0 0 4px #194bd126; }
/* Relance (RH) : le bouton est pressé, l'alerte devient une confirmation, le site passe à « Relancé ». */
[data-vitrine-v3] .v3-app-alerte { position: relative; transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease; }
[data-vitrine-v3] .v3-app-alerte-texte { display: grid; flex: 1 1 auto; min-width: 0; }
[data-vitrine-v3] .v3-app-alerte-texte > span { grid-area: 1 / 1; transition: opacity 260ms ease, transform 260ms ease; }
[data-vitrine-v3] .v3-app-alerte-apres { opacity: 0; transform: translateY(4px); }
[data-vitrine-v3] .v3-app-alerte .v3-app-alerte-coche { display: none; color: light-dark(#2f9e64, #55bc81); }
[data-vitrine-v3] .v3-app-alerte[data-v3-app-fait] { border-color: light-dark(#bfe3cf, #1d4d37); background: light-dark(#eef8f2, #17291f); color: light-dark(#1f5a3d, #9bd7b4); }
[data-vitrine-v3] .v3-app-alerte[data-v3-app-fait] .v3-app-alerte-cloche { display: none; }
[data-vitrine-v3] .v3-app-alerte[data-v3-app-fait] .v3-app-alerte-coche { display: block; animation: v3-app-coche 360ms cubic-bezier(0.3, 1.5, 0.5, 1); }
[data-vitrine-v3] .v3-app-alerte[data-v3-app-fait] .v3-app-alerte-avant { opacity: 0; transform: translateY(-4px); }
[data-vitrine-v3] .v3-app-alerte[data-v3-app-fait] .v3-app-alerte-apres { opacity: 1; transform: none; }
[data-vitrine-v3] .v3-app-alerte[data-v3-app-fait] .v3-app-bouton { visibility: hidden; }
[data-vitrine-v3] .v3-app-alerte:not([data-v3-app-fait]) .v3-app-alerte-cloche { transform-origin: top center; }
[data-vitrine-v3] .v3-app-alerte:hover:not([data-v3-app-fait]) .v3-app-alerte-cloche { animation: v3-app-cloche 640ms ease; }
/* Avis (manager) : la note se recharge segment par segment ; carte survolée soulevée. */
[data-vitrine-v3] .v3-app-avis .v3-app-carte { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; cursor: default; }
[data-vitrine-v3] .v3-app-avis .v3-app-carte:hover { border-color: light-dark(#cfd9e6, #384452); box-shadow: 0 10px 22px #12243a14; transform: translateY(-2px); }
[data-vitrine-v3] .v3-app-note > span:first-child { font-variant-numeric: tabular-nums; }
[data-vitrine-v3] [data-v3-app-avis][data-v3-app-charge] .v3-app-segments > span { animation: v3-app-segment 260ms ease-out both; }
[data-vitrine-v3] [data-v3-app-avis][data-v3-app-charge] .v3-app-segments > span:nth-child(2) { animation-delay: 140ms; }
[data-vitrine-v3] [data-v3-app-avis][data-v3-app-charge] .v3-app-segments > span:nth-child(3) { animation-delay: 280ms; }
[data-vitrine-v3] [data-v3-app-avis][data-v3-app-charge] .v3-app-segments > span:nth-child(4) { animation-delay: 420ms; }
[data-vitrine-v3] [data-v3-app-avis][data-v3-app-charge] .v3-app-segments > span:nth-child(5) { animation-delay: 560ms; }
[data-vitrine-v3] .v3-app-etiquettes .v3-app-etiquette { transition: transform 160ms ease, background-color 160ms ease; }
[data-vitrine-v3] .v3-app-avis .v3-app-carte:hover .v3-app-etiquette { transform: translateY(-1px); }
[data-vitrine-v3] .v3-app-suivi { display: grid; grid-template-columns: 18px minmax(0, 1fr) 72px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid light-dark(#e3e8ef, #393f47); border-radius: 10px; color: var(--v3-muted); font-size: 0.75rem; transition: border-color 200ms ease, background-color 200ms ease; }
[data-vitrine-v3] .v3-app-suivi > .lucide { width: 18px; height: 18px; color: var(--v3-blue); }
[data-vitrine-v3] .v3-app-suivi > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
[data-vitrine-v3] .v3-app-suivi strong { color: var(--v3-ink); font-size: 0.8125rem; }
[data-vitrine-v3] .v3-app-suivi:hover { border-color: light-dark(#c7d6ef, #334460); background: light-dark(#f7f9fd, #121820); }
[data-vitrine-v3] .v3-app-suivi-jauge > span { width: 66%; }
[data-vitrine-v3] .v3-app-actions { position: relative; align-items: center; }
[data-vitrine-v3] .v3-app-toast { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 10px; border-radius: 8px; background: var(--v3-ink); color: var(--v3-on-action); font-size: 0.75rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 240ms ease; pointer-events: none; }
[data-vitrine-v3] .v3-app-toast .lucide { width: 14px; height: 14px; color: #7fd6a6; }
[data-vitrine-v3] .v3-app-toast[data-v3-app-visible] { opacity: 1; transform: none; }
/* Préparation (collaborateur) : Upikat « écrit », puis la question suivante est comptée. */
[data-vitrine-v3] .v3-app-upikat { transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; cursor: default; }
[data-vitrine-v3] .v3-app-upikat img { transition: transform 260ms cubic-bezier(0.3, 1.5, 0.5, 1); }
[data-vitrine-v3] .v3-app-upikat-texte { display: grid; flex: 1 1 auto; min-width: 0; }
[data-vitrine-v3] .v3-app-upikat-texte > span { display: inline-flex; grid-area: 1 / 1; align-items: center; gap: 6px; transition: opacity 220ms ease; }
[data-vitrine-v3] .v3-app-upikat-ecrit { opacity: 0; }
[data-vitrine-v3] .v3-app-upikat[data-v3-app-ecrit] .v3-app-upikat-repos { opacity: 0; }
[data-vitrine-v3] .v3-app-upikat[data-v3-app-ecrit] .v3-app-upikat-ecrit { opacity: 1; }
[data-vitrine-v3] .v3-app-points { display: inline-flex; gap: 3px; }
[data-vitrine-v3] .v3-app-points > span { width: 4px; height: 4px; border-radius: 50%; background: light-dark(#7c6bd6, #3e307a); animation: v3-app-points 1s ease-in-out infinite; }
[data-vitrine-v3] .v3-app-points > span:nth-child(2) { animation-delay: 150ms; }
[data-vitrine-v3] .v3-app-points > span:nth-child(3) { animation-delay: 300ms; }
[data-vitrine-v3] .v3-app-upikat-fleche { width: 16px; height: 16px; color: light-dark(#6d4ed8, #afa7f9); opacity: 0; transform: translateX(-4px); transition: opacity 200ms ease, transform 200ms ease; }
[data-vitrine-v3] .v3-app-upikat:hover { border-color: light-dark(#c4b5fd, #4b426c); background: light-dark(#f3efff, #282039); box-shadow: 0 6px 16px #5b21b614; }
[data-vitrine-v3] .v3-app-upikat:hover img { transform: scale(1.12) rotate(-6deg); }
[data-vitrine-v3] .v3-app-upikat:hover .v3-app-upikat-fleche { opacity: 1; transform: none; }
[data-vitrine-v3] .v3-app-carte--ligne { transition: border-color 200ms ease, box-shadow 200ms ease; }
[data-vitrine-v3] .v3-app-carte--ligne:hover { border-color: light-dark(#cfd9e6, #384452); box-shadow: 0 8px 18px #12243a10; }
[data-vitrine-v3] .v3-app-carte--ligne:hover .v3-app-icone { transform: scale(1.06); }
[data-vitrine-v3] .v3-app-icone { transition: transform 200ms ease; }
/* À l'ouverture de l'onglet (section vue à l'écran) : les jauges se remplissent depuis la gauche. */
[data-vitrine-v3] [data-v3-publics-vu] .v3-public:not([hidden]) .v3-app-jauge > span { animation: v3-app-jauge 900ms cubic-bezier(0.3, 0.7, 0.2, 1) 180ms both; }
[data-vitrine-v3] [data-v3-publics-vu] .v3-public:not([hidden]) .v3-app-sites li:nth-child(2) .v3-app-jauge > span { animation-delay: 300ms; }
[data-vitrine-v3] [data-v3-publics-vu] .v3-public:not([hidden]) .v3-app-sites li:nth-child(3) .v3-app-jauge > span { animation-delay: 420ms; }
@keyframes v3-app-jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v3-app-segment { from { opacity: 0.2; transform: scaleX(0.3); } to { opacity: 1; transform: none; } }
@keyframes v3-app-coche { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes v3-app-cloche { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@keyframes v3-app-eclair { 0%, 100% { transform: none; } 35% { transform: scale(1.25) rotate(-8deg); } 70% { transform: scale(0.95) rotate(4deg); } }
@keyframes v3-app-points { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* « Comment ça marche » : étapes à gauche, écran qui suit l'étape lue (collant) à droite. */
[data-vitrine-v3] .v3-parcours-tete { max-width: 46rem; }
[data-vitrine-v3] .v3-parcours-tete > p:last-child { margin-top: 16px; color: #c0ccdb; font-size: 1.0625rem; line-height: 1.6; }
[data-vitrine-v3] .v3-parcours-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; margin-top: 40px; }
/* Scène figée de « Comment ça marche » (retour de Paul du 30/10/2026) : en grand écran, l'enveloppe se fige sous l'en-tête
   et déroule les étapes une à une, le texte d'un côté et l'écran de l'autre, en alternance (opacités et déplacements posés
   par js/vitrine-v3/defilement.js ; longueur : --v3-scene-longueur). Sinon l'enveloppe s'efface (display: contents). */
[data-vitrine-v3] .v3-parcours-plateau { display: contents; }
@media (min-width: 64rem) {
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] { display: block; height: var(--v3-scene-longueur, auto); }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-plateau { position: sticky; top: var(--v3-scene-sommet, 104px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 64px; height: calc(100svh - var(--v3-scene-sommet, 104px)); overflow-x: clip; }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-plateau[data-v3-cote="droite"] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-plateau[data-v3-cote="droite"] .v3-parcours-etapes { grid-column: 2; grid-row: 1; }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-plateau[data-v3-cote="droite"] .v3-parcours-cadre { grid-column: 1; grid-row: 1; }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-etapes { display: grid; padding: 0; }
    /* C'est la position seule qui pilote : ni apparition au défilement, ni lissage, ni transition à sa propre horloge
       dans le cadre (fondu des écrans, frise, fil). Elles laissaient le cadre visible au changement d'étape (il sautait
       alors de côté) et faisaient encore glisser l'écran et la balise à son retour (retour de Paul du 03/11/2026). */
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-etape { grid-area: 1 / 1; min-height: 0; border-top: 0; opacity: 0; visibility: hidden; transition: none; }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-scene { position: static; }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-cadre { opacity: 0; transition: none; }
    [data-vitrine-v3] .v3-parcours-grille[data-v3-scene] .v3-parcours-cadre :is(.v3-parcours-ecran, .v3-parcours-trace-faite, .v3-parcours-balise, .v3-parcours-borne, .v3-parcours-point, .v3-parcours-fil-etat, .v3-parcours-fil-jauge > span) { transition: none; }
}
[data-vitrine-v3] .v3-parcours-etapes { margin: 0; padding: 0; list-style: none; }
/* Sous la dernière étape, la place pour que l'écran reste centré pendant qu'elle est lue (et non remonté avec la fin
   de la grille) : la moitié de l'écran, moins la moitié de l'étape, plus le décalage dû à l'en-tête. */
@media (min-width: 64rem) {
    [data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etapes { padding-bottom: max(0px, calc(var(--v3-parcours-hauteur, 520px) / 2 - 22vh + 40px)); }
}
[data-vitrine-v3] .v3-parcours-etape { min-height: 44vh; padding-block: 30px; border-top: 1px solid #2f4560; transition: opacity 300ms ease; }
[data-vitrine-v3] .v3-parcours-etape:last-child { min-height: 44vh; }
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etape { opacity: 0.4; }
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-etape[aria-current] { opacity: 1; }
[data-vitrine-v3] .v3-parcours-numero { color: #9ebfff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; }
[data-vitrine-v3] .v3-parcours-etape h3 { margin-top: 10px; color: var(--v3-on-action); font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.035em; }
[data-vitrine-v3] .v3-parcours-etape p { max-width: 32ch; margin-top: 10px; color: #c0ccdb; font-size: 1.0625rem; line-height: 1.6; }
[data-vitrine-v3] .v3-parcours-cadre { position: relative; }
/* Écran centré dans la hauteur visible sous l'en-tête collant (80 px), quelle que soit sa hauteur (mesurée par
   accueil.js : --v3-parcours-hauteur) : il reste face à l'étape lue, qui traverse le milieu de l'écran (recette du
   26/10/2026, il restait collé en haut). */
[data-vitrine-v3] .v3-parcours-scene { position: sticky; top: max(96px, calc((100svh + 80px - var(--v3-parcours-hauteur, 520px)) / 2)); padding: 22px; border: 1px solid #2f4a68; border-radius: 12px; background: #1a2f4a; }
[data-vitrine-v3] .v3-parcours-pied { margin-top: 18px; }

/* Route façon GPS : une borne par étape, la balise avance. */
/* Frise : points, trace et balise partagent le même axe horizontal (13 px sous le haut de la route). */
[data-vitrine-v3] .v3-parcours-route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 0 22px; }
[data-vitrine-v3] .v3-parcours-trace { position: absolute; top: 12px; right: 12.5%; left: 12.5%; height: 2px; background: #33506f; }
[data-vitrine-v3] .v3-parcours-trace-faite { display: block; width: 0; height: 100%; background: light-dark(#79c9c1, #126d67); transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); }
[data-vitrine-v3] .v3-parcours-borne { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #8ea2b8; font-size: 0.75rem; font-weight: 600; transition: color 300ms ease; }
[data-vitrine-v3] .v3-parcours-point { width: 14px; height: 14px; margin-top: 0; border: 2px solid light-dark(#4e6b8d, #82a1c6); border-radius: 50%; background: #1a2f4a; transition: border-color 300ms ease, background-color 300ms ease; }
[data-vitrine-v3] .v3-parcours-balise { position: absolute; top: -1px; left: 12.5%; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid light-dark(#79c9c1, #45968f); border-radius: 50%; background: #12243a; color: #e5faf3; transform: translateX(-50%); transition: left 600ms cubic-bezier(0.4, 0, 0.2, 1); }
[data-vitrine-v3] .v3-parcours-balise .lucide { width: 14px; height: 14px; transform: rotate(90deg); }
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] .v3-parcours-trace-faite { width: 33.333%; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="3"] .v3-parcours-trace-faite { width: 66.666%; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] .v3-parcours-trace-faite { width: 100%; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] .v3-parcours-balise { left: 37.5%; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="3"] .v3-parcours-balise { left: 62.5%; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] .v3-parcours-balise { left: 87.5%; }
[data-vitrine-v3] .v3-parcours-scene [data-borne="1"],
[data-vitrine-v3] .v3-parcours-scene:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) [data-borne="2"],
[data-vitrine-v3] .v3-parcours-scene:is([data-etat="3"], [data-etat="4"]) [data-borne="3"],
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-borne="4"] { color: var(--v3-on-action); }
[data-vitrine-v3] .v3-parcours-scene [data-borne="1"] .v3-parcours-point,
[data-vitrine-v3] .v3-parcours-scene:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) [data-borne="2"] .v3-parcours-point,
[data-vitrine-v3] .v3-parcours-scene:is([data-etat="3"], [data-etat="4"]) [data-borne="3"] .v3-parcours-point,
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-borne="4"] .v3-parcours-point { border-color: light-dark(#79c9c1, #45968f); background: light-dark(#79c9c1, #126d67); }
/* Bornes cliquables (souris) : elles amènent à leur étape ; au survol, la borne s'éclaire. */
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-borne { cursor: pointer; }
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-borne:hover { color: var(--v3-on-action); }
[data-vitrine-v3] [data-v3-parcours-pret] .v3-parcours-borne:hover .v3-parcours-point { border-color: light-dark(#a9e2dc, #0a4e4a); box-shadow: 0 0 0 5px #79c9c126; transform: scale(1.15); }
[data-vitrine-v3] .v3-parcours-point { transition: border-color 300ms ease, background-color 300ms ease, box-shadow 200ms ease, transform 200ms ease; }

/* Le fil de l'entretien : un même sujet suivi d'une étape à l'autre ; son état et ses quatre segments suivent l'étape
   lue (data-etat), sans saut : les états se relaient en fondu dans la même case. */
[data-vitrine-v3] .v3-parcours-fil { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #2f4a68; border-radius: 10px; background: #15283f; }
[data-vitrine-v3] .v3-parcours-fil-sujet { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-vitrine-v3] .v3-parcours-fil-sujet > span:last-child { display: flex; flex-direction: column; min-width: 0; }
[data-vitrine-v3] .v3-parcours-fil-icone { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #1f3b5e; color: #9ebfff; }
[data-vitrine-v3] .v3-parcours-fil-icone .lucide { width: 16px; height: 16px; }
[data-vitrine-v3] .v3-parcours-fil-legende { color: #8ea2b8; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
[data-vitrine-v3] .v3-parcours-fil strong { overflow: hidden; color: var(--v3-on-action); font-size: 0.9375rem; text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-parcours-fil-etats { display: grid; justify-items: end; }
[data-vitrine-v3] .v3-parcours-fil-etat { grid-area: 1 / 1; padding: 4px 10px; border: 1px solid light-dark(#3c5f86, #80a6d0); border-radius: 6px; background: #1c3350; color: #cfe0f6; font-size: 0.75rem; font-weight: 650; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-vitrine-v3] .v3-parcours-fil-etat[data-fil-etat="4"] { border-color: light-dark(#4f8f86, #64a49b); background: #173d3d; color: #bdeee6; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="1"] [data-fil-etat="1"],
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] [data-fil-etat="2"],
[data-vitrine-v3] .v3-parcours-scene[data-etat="3"] [data-fil-etat="3"],
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-fil-etat="4"] { opacity: 1; transform: none; }
[data-vitrine-v3] .v3-parcours-scene:not([data-etat]) [data-fil-etat="1"] { opacity: 1; transform: none; }
[data-vitrine-v3] .v3-parcours-fil-jauge { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
[data-vitrine-v3] .v3-parcours-fil-jauge > span { height: 4px; border-radius: 2px; background: #2c4462; transition: background-color 400ms ease; }
[data-vitrine-v3] .v3-parcours-scene .v3-parcours-fil-jauge > span:nth-child(1),
[data-vitrine-v3] .v3-parcours-scene:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) .v3-parcours-fil-jauge > span:nth-child(2),
[data-vitrine-v3] .v3-parcours-scene:is([data-etat="3"], [data-etat="4"]) .v3-parcours-fil-jauge > span:nth-child(3),
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] .v3-parcours-fil-jauge > span:nth-child(4) { background: light-dark(#79c9c1, #126d67); }

/* Survol utile : une étiquette repérée allume les mots dont elle vient (et inversement) ; une partie, une suite ou la
   question d'Upikat se met en avant. */
/* « translate » plutôt que « transform » : les animations d'entrée (remplissage « both ») gardent la main sur transform. */
[data-vitrine-v3] .v3-parcours-ecran .v3-etiquette { cursor: default; transition: translate 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
[data-vitrine-v3] .v3-surligne { cursor: default; }
[data-vitrine-v3] .v3-surligne::before { transition: background-color 180ms ease, box-shadow 180ms ease; }
[data-vitrine-v3] .v3-parcours-ecran:has(.v3-etiquette--bleue:hover, .v3-surligne--bleue:hover) .v3-surligne--bleue::before { background: light-dark(#bcd0ff, #1e2c54); box-shadow: 0 0 0 2px #7fa2f0; }
[data-vitrine-v3] .v3-parcours-ecran:has(.v3-etiquette--verte:hover, .v3-surligne--verte:hover) .v3-surligne--verte::before { background: light-dark(#b3e0c4, #043820); box-shadow: 0 0 0 2px #6cbf8f; }
[data-vitrine-v3] .v3-parcours-ecran:has(.v3-etiquette--ambre:hover, .v3-surligne--ambre:hover) .v3-surligne--ambre::before { background: light-dark(#f3d49c, #3b2900); box-shadow: 0 0 0 2px #d9a548; }
[data-vitrine-v3] .v3-parcours-ecran:has(.v3-etiquette--bleue:hover, .v3-surligne--bleue:hover) .v3-etiquette--bleue { border-color: light-dark(#7fa2f0, #6889d5); box-shadow: 0 4px 12px #194bd11f; translate: 4px 0; }
[data-vitrine-v3] .v3-parcours-ecran:has(.v3-etiquette--verte:hover, .v3-surligne--verte:hover) .v3-etiquette--verte { border-color: light-dark(#6cbf8f, #4a9e70); box-shadow: 0 4px 12px #1f6b471f; translate: 4px 0; }
[data-vitrine-v3] .v3-parcours-ecran:has(.v3-etiquette--ambre:hover, .v3-surligne--ambre:hover) .v3-etiquette--ambre { border-color: light-dark(#d9a548, #b17f15); box-shadow: 0 4px 12px #80531224; translate: 4px 0; }

/* Écrans de la démonstration : un seul visible, transition courte d'un état au suivant. */
[data-vitrine-v3] .v3-parcours-ecrans { display: grid; }
[data-vitrine-v3] .v3-parcours-ecran { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 10px; background: var(--v3-white); color: var(--v3-ink); opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 350ms ease, transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-vitrine-v3] .v3-parcours-scene[data-etat="1"] [data-v3-parcours-ecran="1"],
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] [data-v3-parcours-ecran="2"],
[data-vitrine-v3] .v3-parcours-scene[data-etat="3"] [data-v3-parcours-ecran="3"],
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-v3-parcours-ecran="4"] { opacity: 1; transform: none; pointer-events: auto; }
/* Seul l'écran affiché réagit au pointeur : les écrans superposés invisibles ne captent plus le survol. */
[data-vitrine-v3] .v3-parcours-ecran { pointer-events: none; }
[data-vitrine-v3] .v3-parcours-ecran-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: light-dark(#3e5066, #b3c8e2); font-size: 0.8125rem; font-weight: 650; }
[data-vitrine-v3] .v3-parcours-ecran-titre .lucide { width: 16px; height: 16px; color: var(--v3-blue); }
[data-vitrine-v3] .v3-parcours-ecran .v3-chat-bulle { font-size: 0.875rem; }
[data-vitrine-v3] .v3-parcours-ecran .v3-chat-bulle--ia { background: light-dark(#f4f6f9, #131921); }
[data-vitrine-v3] .v3-parcours-signatures,
[data-vitrine-v3] .v3-parcours-note { display: flex; align-items: center; gap: 7px; margin: auto 0 0; color: var(--v3-muted); font-size: 0.75rem; }
[data-vitrine-v3] :is(.v3-parcours-signatures, .v3-parcours-note) .lucide { width: 14px; height: 14px; color: light-dark(#5b21b6, #c6bafd); }
[data-vitrine-v3] .v3-parcours-signatures .lucide { color: light-dark(#1f7a52, #76cb9e); }
[data-vitrine-v3] .v3-parcours-etiquettes { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
/* Repérer : chaque repère est typé (icône, nature, objet) et porte son état, validé par le manager ou point de friction. */
[data-vitrine-v3] .v3-parcours-etiquettes .v3-etiquette { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-weight: 500; }
[data-vitrine-v3] .v3-reperage-icone { display: inline-grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--v3-white); }
[data-vitrine-v3] .v3-reperage-icone .lucide { width: 15px; height: 15px; }
[data-vitrine-v3] .v3-reperage-texte { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
[data-vitrine-v3] .v3-reperage-texte > span { font-size: 0.625rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
[data-vitrine-v3] .v3-reperage-texte strong { color: var(--v3-ink); font-size: 0.8125rem; font-weight: 650; }
[data-vitrine-v3] .v3-reperage-etat { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: light-dark(#e3f4ea, #17291f); color: light-dark(#1f7a52, #88d1a7); font-size: 0.6875rem; font-weight: 650; }
[data-vitrine-v3] .v3-reperage-etat .lucide { width: 12px; height: 12px; }
[data-vitrine-v3] .v3-reperage-etat--friction { background: light-dark(#ffe4ea, #3a1620); color: light-dark(#be123c, #fda4b4); }
[data-vitrine-v3] .v3-parcours-ecran-titre .v3-mascotte-badge { margin-left: 2px; }

/* Préparer : la conversation, plus serrée que dans le téléphone de la section Upikat. */
[data-vitrine-v3] .v3-parcours-conversation { display: flex; flex-direction: column; gap: 8px; }
[data-vitrine-v3] .v3-parcours-conversation .v3-chat-bulle { max-width: 84%; padding: 8px 11px; font-size: 0.8125rem; }
[data-vitrine-v3] .v3-parcours-conversation .v3-chat-report { margin-top: 2px; }

/* Échanger : un formulaire à double entrée, les questions en lignes, les deux parties en colonnes. */
[data-vitrine-v3] .v3-parcours-ecran-precision { margin-left: auto; padding: 2px 8px; border: 1px solid var(--v3-line); border-radius: 6px; color: var(--v3-muted); font-size: 0.6875rem; font-weight: 600; }
[data-vitrine-v3] .v3-parcours-formulaire { display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; }
[data-vitrine-v3] .v3-parcours-ligne { display: contents; }
[data-vitrine-v3] .v3-parcours-colonne { display: flex; align-items: center; gap: 6px; padding-bottom: 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
[data-vitrine-v3] .v3-parcours-colonne--collaborateur { color: light-dark(#0b6e64, #7bcdc1); }
[data-vitrine-v3] .v3-parcours-colonne--manager { color: light-dark(#a2530f, #f29c62); }
[data-vitrine-v3] .v3-parcours-pastille { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: light-dark(#0f8f82, #3eac9f); color: #ffffff; font-size: 0.625rem; letter-spacing: 0; }
[data-vitrine-v3] .v3-parcours-colonne--manager .v3-parcours-pastille { background: light-dark(#d9731f, #ce793c); }
[data-vitrine-v3] .v3-parcours-ligne-question { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; color: light-dark(#3e5066, #b3c8e2); font-size: 0.75rem; font-weight: 650; }
[data-vitrine-v3] .v3-parcours-accord { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px; background: light-dark(#e3f4ea, #17291f); color: light-dark(#1f7a52, #88d1a7); font-size: 0.625rem; font-weight: 700; }
[data-vitrine-v3] .v3-parcours-accord .lucide { width: 10px; height: 10px; stroke-width: 3; }
[data-vitrine-v3] .v3-parcours-reponse { padding: 8px 10px; border-left: 3px solid; border-radius: 6px; font-size: 0.75rem; line-height: 1.45; }
[data-vitrine-v3] .v3-parcours-reponse--collaborateur { border-color: light-dark(#0f8f82, #3eac9f); background: light-dark(#eef8f6, #131921); }
[data-vitrine-v3] .v3-parcours-reponse--manager { border-color: light-dark(#d9731f, #ce793c); background: light-dark(#fdf3ea, #302011); }
/* La ligne sur laquelle ils s'accordent reste soulignée. */
[data-vitrine-v3] .v3-parcours-ligne--accord > .v3-parcours-reponse { box-shadow: 0 0 0 2px light-dark(#2f9e64, #43ac72); }

/* Agir. */
[data-vitrine-v3] .v3-parcours-friction { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid light-dark(#fbcfd8, #5a1f2c); border-left: 3px solid light-dark(#e11d48, #f9757e); border-radius: 8px; background: light-dark(#fff1f3, #2a141a); }
[data-vitrine-v3] .v3-parcours-friction-icone { display: inline-grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: light-dark(#ffe0e6, #3a1620); color: light-dark(#be123c, #fda4b4); }
[data-vitrine-v3] .v3-parcours-friction-icone .lucide { width: 16px; height: 16px; }
[data-vitrine-v3] .v3-parcours-friction > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-vitrine-v3] .v3-parcours-friction > span:last-child > span { color: light-dark(#be123c, #fda4b4); font-size: 0.625rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
[data-vitrine-v3] .v3-parcours-friction strong { font-size: 0.875rem; }
[data-vitrine-v3] .v3-parcours-analyse { position: relative; }
[data-vitrine-v3] .v3-parcours-analyse .v3-chat-ecrit { position: absolute; top: 0; left: 0; opacity: 0; }
[data-vitrine-v3] .v3-parcours-analyse p { display: flex; gap: 8px; margin: 0; padding: 9px 11px; border: 1px solid light-dark(#ddd6fe, #433a63); border-radius: 8px; background: light-dark(#f5f3ff, #252134); color: light-dark(#34475d, #b8cfe9); font-size: 0.75rem; line-height: 1.5; }
[data-vitrine-v3] .v3-parcours-analyse p > .lucide { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: light-dark(#5b21b6, #c6bafd); }
[data-vitrine-v3] .v3-parcours-analyse strong { display: block; color: light-dark(#5b21b6, #c6bafd); font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; }
[data-vitrine-v3] .v3-parcours-solutions-titre { margin: 2px 0 -4px; color: var(--v3-muted); font-size: 0.625rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
[data-vitrine-v3] .v3-parcours-solutions { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-parcours-solution { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid light-dark(#dfe5ec, #394048); border-radius: 8px; color: var(--v3-muted); font-size: 0.6875rem; }
[data-vitrine-v3] .v3-parcours-solution > span:last-child { display: flex; flex-direction: column; gap: 1px; }
[data-vitrine-v3] .v3-parcours-solution strong { color: var(--v3-ink); font-size: 0.8125rem; font-weight: 650; }
[data-vitrine-v3] .v3-parcours-choix { display: inline-grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; border: 1.5px solid light-dark(#b6c3d2, #4a5765); border-radius: 50%; color: #ffffff00; }
[data-vitrine-v3] .v3-parcours-choix .lucide { width: 11px; height: 11px; stroke-width: 3; }
/* État final (celui affiché sans animation) : la solution retenue par le manager, les autres en retrait. */
[data-vitrine-v3] .v3-parcours-solution--retenue { border-color: var(--v3-blue); background: light-dark(#edf2ff, #1d2439); }
[data-vitrine-v3] .v3-parcours-solution--retenue .v3-parcours-choix { border-color: var(--v3-blue); background: var(--v3-blue); color: #ffffff; }
[data-vitrine-v3] .v3-parcours-solution:not(.v3-parcours-solution--retenue) { opacity: 0.55; }
[data-vitrine-v3] .v3-parcours-envois { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; }
[data-vitrine-v3] .v3-parcours-envois-titre { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; color: var(--v3-muted); font-size: 0.6875rem; font-weight: 650; }
[data-vitrine-v3] .v3-parcours-envois-titre .lucide { width: 13px; height: 13px; color: var(--v3-blue); }
[data-vitrine-v3] .v3-parcours-envoi { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid light-dark(#bfe3cf, #1d4d37); border-radius: 6px; background: light-dark(#eef8f2, #17291f); color: light-dark(#1f6b47, #88d1a7); font-size: 0.6875rem; font-weight: 650; }
[data-vitrine-v3] .v3-parcours-envoi::before { content: '✓'; }
[data-vitrine-v3] .v3-etiquette { padding: 6px 11px; border: 1px solid; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; }
[data-vitrine-v3] .v3-etiquette--verte { border-color: light-dark(#bfe3cf, #1d4d37); background: light-dark(#eef8f2, #17291f); color: light-dark(#1f6b47, #88d1a7); }
[data-vitrine-v3] .v3-etiquette--bleue { border-color: light-dark(#d3e0ff, #323f62); background: light-dark(#edf2ff, #1d2439); color: light-dark(#1745b3, #a8c4fc); }
[data-vitrine-v3] .v3-etiquette--ambre { border-color: light-dark(#efdfbf, #503d12); background: light-dark(#fcf5e9, #2d220c); color: light-dark(#805312, #e4b276); }
[data-vitrine-v3] .v3-parcours-balise::after { position: absolute; inset: -7px; border: 2px solid light-dark(#79c9c1, #45968f); border-radius: 50%; opacity: 0; content: ''; animation: v3-parcours-onde 2.4s ease-out infinite; }
[data-vitrine-v3] .v3-parcours-upikat { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid light-dark(#e3e8ef, #393f47); }
[data-vitrine-v3] .v3-parcours-upikat > span:last-child { display: flex; flex-direction: column; gap: 1px; }
[data-vitrine-v3] .v3-parcours-upikat strong { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; }
[data-vitrine-v3] .v3-parcours-upikat > span:last-child > span { color: var(--v3-muted); font-size: 0.75rem; }
[data-vitrine-v3] .v3-parcours-question { position: relative; display: flex; flex-direction: column; }
[data-vitrine-v3] .v3-parcours-progression { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--v3-muted); font-size: 0.6875rem; font-weight: 600; }
[data-vitrine-v3] .v3-parcours-progression .v3-ia-jauge { --v3-ia-avance: 0.5; }
/* L'indicateur « Upikat écrit » occupe la place de la question qui va s'afficher ; masqué une fois la question posée. */
[data-vitrine-v3] .v3-parcours-question .v3-chat-ecrit { position: absolute; top: 0; left: 0; opacity: 0; }
[data-vitrine-v3] .v3-parcours-signatures { flex-wrap: wrap; gap: 8px 16px; }
[data-vitrine-v3] .v3-parcours-signatures > span { display: inline-flex; align-items: center; gap: 6px; }
[data-vitrine-v3] .v3-parcours-extrait { margin: 0; padding: 12px 14px; border-radius: 8px; background: light-dark(#f4f6f9, #131921); color: light-dark(#34475d, #b8cfe9); font-size: 0.875rem; line-height: 1.7; }
[data-vitrine-v3] .v3-surligne { position: relative; z-index: 0; padding: 1px 2px; background: none; color: var(--v3-ink); font-weight: 600; white-space: nowrap; }
[data-vitrine-v3] .v3-surligne::before { position: absolute; inset: 0; z-index: -1; border-radius: 3px; content: ''; transform-origin: left; }
[data-vitrine-v3] .v3-surligne--bleue::before { background: light-dark(#dbe6ff, #17264d); }
[data-vitrine-v3] .v3-surligne--verte::before { background: light-dark(#d6efe0, #04301d); }
[data-vitrine-v3] .v3-surligne--ambre::before { background: light-dark(#f9e7c6, #342402); }

/* Micro-animations : l'écran de l'étape lue se compose sous les yeux, à chaque fois qu'il redevient actif. Rien ne joue
   tant que la démonstration n'est pas à l'écran (data-v3-parcours-attente, posé par js/vitrine-v3/accueil.js). Chaque
   élément porte son moment dans --d ; sans animation, l'écran est dans son état final. Retours de Paul du 29/10/2026 :
   Préparer dure environ 7 s (trois allers-retours), Agir déroule la résolution d'un point de friction. */
[data-vitrine-v3] .v3-parcours-scene[data-etat="1"] [data-v3-parcours-ecran="1"] :is(.v3-parcours-upikat, .v3-parcours-question .v3-chat-bulle, .v3-parcours-conversation > .v3-chat-bulle--vous, .v3-chat-report, .v3-parcours-progression),
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] [data-v3-parcours-ecran="2"] :is(.v3-parcours-colonne, .v3-parcours-ligne-question, .v3-parcours-reponse, .v3-parcours-signatures > span),
[data-vitrine-v3] .v3-parcours-scene[data-etat="3"] [data-v3-parcours-ecran="3"] :is(.v3-parcours-extrait, .v3-parcours-etiquettes > li, .v3-parcours-note),
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-v3-parcours-ecran="4"] :is(.v3-parcours-friction, .v3-parcours-analyse p, .v3-parcours-solutions-titre, .v3-parcours-solution, .v3-parcours-envois-titre) { animation: v3-parcours-entree 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both; }
[data-vitrine-v3] .v3-parcours-scene:is([data-etat="1"], [data-etat="4"]) .v3-parcours-ecran:is([data-v3-parcours-ecran="1"], [data-v3-parcours-ecran="4"]) .v3-chat-ecrit { animation: v3-parcours-ecrit-bref 900ms ease var(--d, 0ms) both; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] [data-v3-parcours-ecran="2"] .v3-parcours-signatures .lucide,
[data-vitrine-v3] .v3-parcours-scene[data-etat="3"] [data-v3-parcours-ecran="3"] .v3-reperage-etat,
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-v3-parcours-ecran="4"] .v3-parcours-envoi { animation: v3-parcours-pop 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="3"] [data-v3-parcours-ecran="3"] .v3-surligne::before { animation: v3-parcours-surligne 520ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both; }

/* Préparer. */
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-question:nth-child(1) .v3-chat-ecrit { --d: 250ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-question:nth-child(1) .v3-chat-bulle { --d: 1150ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-conversation > :nth-child(2) { --d: 1900ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-question:nth-child(3) .v3-chat-ecrit { --d: 2500ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-question:nth-child(3) .v3-chat-bulle { --d: 3400ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-conversation > :nth-child(4) { --d: 4150ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-question:nth-child(5) .v3-chat-ecrit { --d: 4750ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-question:nth-child(5) .v3-chat-bulle { --d: 5650ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-chat-report { --d: 6300ms; }
[data-vitrine-v3] .v3-parcours-ecran--preparer .v3-parcours-progression { --d: 6700ms; }
/* La préparation avance d'une question quand la réponse est reportée. */
[data-vitrine-v3] .v3-parcours-scene[data-etat="1"] [data-v3-parcours-ecran="1"] .v3-ia-jauge > span { animation: v3-parcours-avance 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 6900ms both; }
@keyframes v3-parcours-avance { from { transform: scaleX(0.25); } to { transform: scaleX(0.5); } }

/* Échanger : la colonne du collaborateur se remplit, puis celle du manager ; leur accord s'allume, puis les signatures. */
[data-vitrine-v3] .v3-parcours-ecran--echanger .v3-parcours-colonne { --d: 100ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="1"] > :is(.v3-parcours-ligne-question, .v3-parcours-reponse--collaborateur) { --d: 350ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="2"] > :is(.v3-parcours-ligne-question, .v3-parcours-reponse--collaborateur) { --d: 600ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="3"] > :is(.v3-parcours-ligne-question, .v3-parcours-reponse--collaborateur) { --d: 850ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="1"] > .v3-parcours-reponse--manager { --d: 1450ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="2"] > .v3-parcours-reponse--manager { --d: 1700ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="3"] > .v3-parcours-reponse--manager { --d: 1950ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="4"] > :is(.v3-parcours-ligne-question, .v3-parcours-reponse--collaborateur) { --d: 1100ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger [data-ligne="4"] > .v3-parcours-reponse--manager { --d: 2200ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger .v3-parcours-accord { --d: 2750ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger .v3-parcours-signatures > span:first-child { --d: 3300ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger .v3-parcours-signatures > span:first-child .lucide { --d: 3450ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger .v3-parcours-signatures > span:last-child { --d: 3700ms; }
[data-vitrine-v3] .v3-parcours-ecran--echanger .v3-parcours-signatures > span:last-child .lucide { --d: 3850ms; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] [data-v3-parcours-ecran="2"] .v3-parcours-ligne--accord > .v3-parcours-reponse { animation: v3-parcours-entree 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both, v3-parcours-accord 600ms ease 2600ms both; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="2"] [data-v3-parcours-ecran="2"] .v3-parcours-accord { animation: v3-parcours-pop 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both; }

/* Repérer. */
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-extrait { --d: 100ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-surligne--bleue::before { --d: 650ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-surligne--verte::before { --d: 1050ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-surligne--ambre::before { --d: 1450ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-etiquettes > li:nth-child(1) { --d: 1950ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-etiquettes > li:nth-child(2) { --d: 2200ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-etiquettes > li:nth-child(3) { --d: 2450ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-etiquettes > li:nth-child(2) .v3-reperage-etat { --d: 3000ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-etiquettes > li:nth-child(3) .v3-reperage-etat { --d: 3250ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-etiquettes > li:nth-child(1) .v3-reperage-etat { --d: 3750ms; }
[data-vitrine-v3] .v3-parcours-ecran--reperer .v3-parcours-note { --d: 4200ms; }

/* Agir : le point de friction, l'IA analyse, propose, le manager retient une solution, elle part aux bonnes personnes. */
/* L'écartement des pistes non retenues ne remplit pas son état de départ (forwards, pas both) : avant 3,3 s, c'est leur
   entrée en cascade qui décide de leur opacité (sinon elles s'affichaient d'emblée, retour de Paul du 03/11/2026). */
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-friction { --d: 100ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-analyse .v3-chat-ecrit { --d: 550ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-analyse p { --d: 1450ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-solutions-titre { --d: 2050ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-solution:nth-child(1) { --d: 2200ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-solution:nth-child(2) { --d: 2400ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-solution:nth-child(3) { --d: 2600ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-envois-titre { --d: 4000ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-envoi:nth-child(2) { --d: 4200ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-envoi:nth-child(3) { --d: 4450ms; }
[data-vitrine-v3] .v3-parcours-ecran--agir .v3-parcours-envoi:nth-child(4) { --d: 4700ms; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-v3-parcours-ecran="4"] .v3-parcours-solution--retenue { animation: v3-parcours-entree 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both, v3-parcours-retenue 420ms ease 3300ms both; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-v3-parcours-ecran="4"] .v3-parcours-solution--retenue .v3-parcours-choix { animation: v3-parcours-coche 360ms ease 3300ms both; }
[data-vitrine-v3] .v3-parcours-scene[data-etat="4"] [data-v3-parcours-ecran="4"] .v3-parcours-solution:not(.v3-parcours-solution--retenue) { animation: v3-parcours-entree 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both, v3-parcours-ecartee 420ms ease 3300ms forwards; }
@keyframes v3-parcours-accord { from { box-shadow: 0 0 0 0 #2f9e6400; } to { box-shadow: 0 0 0 2px #2f9e64; } }
@keyframes v3-parcours-retenue { from { border-color: #dfe5ec; background-color: #ffffff; } to { border-color: #194bd1; background-color: #edf2ff; } }
@keyframes v3-parcours-coche { from { border-color: #b6c3d2; background-color: #ffffff; color: #ffffff00; } to { border-color: #194bd1; background-color: #194bd1; color: #ffffff; } }
@keyframes v3-parcours-ecartee { from { opacity: 1; } to { opacity: 0.55; } }
/* Pause d'attente : !important, car les animations des écrans sont posées en raccourci (qui remet la lecture en marche). */
[data-vitrine-v3] .v3-parcours-scene[data-v3-parcours-attente] .v3-parcours-ecran *,
[data-vitrine-v3] .v3-parcours-scene[data-v3-parcours-attente] .v3-parcours-ecran *::before { animation-play-state: paused !important; }

/* Démo : la vue produit posée dans la section (recette du 26/10/2026 : plus de cadre bleu nuit autour), une liste
   courte à côté. */
[data-vitrine-v3] .v3-accueil-demo-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 64px; }
/* Le texte vient d'abord dans le document (titre de section avant ceux de l'aperçu), le visuel passe à gauche. */
[data-vitrine-v3] .v3-accueil-demo-visuel { order: -1; min-width: 0; }
[data-vitrine-v3] .v3-accueil-demo-visuel .v3-product { border-color: light-dark(#d7dfe9, #39424d); box-shadow: 0 30px 70px #12243a1f, 0 6px 16px #12243a0f; }
[data-vitrine-v3] .v3-accueil-demo-texte h2 { max-width: 16ch; }
[data-vitrine-v3] .v3-accueil-demo-liste { margin: 28px 0 30px; padding: 0; counter-reset: v3-demo; list-style: none; }
[data-vitrine-v3] .v3-accueil-demo-liste li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 0 14px 40px; border-top: 1px solid var(--v3-line); color: var(--v3-muted); font-size: 0.9375rem; line-height: 1.5; }
/* Chaque point se coche à son apparition : pastille, puis coche dessinée en bordures (aucune image). */
[data-vitrine-v3] .v3-accueil-demo-liste li::before { position: absolute; top: 16px; left: 0; width: 24px; height: 24px; border: 1px solid light-dark(#b9cdf5, #33456c); border-radius: 50%; background: var(--v3-blue-soft); content: ''; transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--v3-reveal-delay, 0ms) + 200ms), background-color 300ms ease calc(var(--v3-reveal-delay, 0ms) + 200ms); }
[data-vitrine-v3] .v3-accueil-demo-liste li::after { position: absolute; top: 22px; left: 9px; width: 6px; height: 10px; border: solid var(--v3-blue); border-width: 0 2px 2px 0; content: ''; transform: rotate(45deg); transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--v3-reveal-delay, 0ms) + 420ms); }
[data-vitrine-v3] .v3-accueil-demo-liste li[data-v3-reveal="pending"]::before { transform: scale(0.6); }
[data-vitrine-v3] .v3-accueil-demo-liste li[data-v3-reveal="pending"]::after { transform: rotate(45deg) scale(0); }
[data-vitrine-v3] .v3-accueil-demo-liste strong { color: var(--v3-ink); font-size: 1rem; }
[data-vitrine-v3] .v3-accueil-demo-note { display: flex; align-items: flex-start; gap: 8px; max-width: 46ch; margin-top: 26px; color: var(--v3-muted); font-size: 0.75rem; line-height: 1.6; }
[data-vitrine-v3] .v3-accueil-demo-note .lucide { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--v3-blue); }

/* Confiance (components/_accueil_confiance.html.twig) : les chiffres en grand, le retour d'expérience, les engagements.
   Les compteurs montent jusqu'à leur valeur (accueil.js) ; l'anneau du taux d'utilisation se remplit à 80 %. */
[data-vitrine-v3] .v3-confiance { border-top: 1px solid var(--v3-line); background: var(--v3-white); }
[data-vitrine-v3] .v3-confiance-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 16px; }
[data-vitrine-v3] .v3-compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-compteur { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 216px; padding: 24px; border: 1px solid var(--v3-line); border-radius: 12px; background: light-dark(#f7f9fc, #121820); transition: opacity 520ms ease var(--v3-reveal-delay, 0ms), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--v3-reveal-delay, 0ms), border-color 250ms ease, box-shadow 250ms ease; }
[data-vitrine-v3] .v3-compteur:hover { border-color: light-dark(#c9d6ea, #36445b); box-shadow: 0 16px 36px #12243a14; }
[data-vitrine-v3] .v3-compteur-icone { position: absolute; top: 22px; left: 24px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid light-dark(#d9e3f7, #354056); border-radius: 9px; background: var(--v3-blue-soft); color: var(--v3-blue); }
[data-vitrine-v3] .v3-compteur-icone .lucide { width: 19px; height: 19px; }
[data-vitrine-v3] .v3-compteur strong { color: var(--v3-ink); font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1; }
[data-vitrine-v3] .v3-compteur > span:last-child { color: var(--v3-muted); font-size: 0.9375rem; }
[data-vitrine-v3] .v3-compteur--anneau { border-color: var(--v3-navy); background: var(--v3-navy); }
[data-vitrine-v3] .v3-compteur--anneau strong { color: var(--v3-on-action); }
[data-vitrine-v3] .v3-compteur--anneau > span:last-child { color: #c0ccdb; }
[data-vitrine-v3] .v3-anneau { position: absolute; top: 18px; right: 18px; width: 86px; height: 86px; }
[data-vitrine-v3] .v3-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
[data-vitrine-v3] .v3-anneau circle { fill: none; stroke-width: 10; }
[data-vitrine-v3] .v3-anneau-fond { stroke: #2c4460; }
[data-vitrine-v3] .v3-anneau-valeur { stroke: light-dark(#79c9c1, #45968f); stroke-dasharray: 100; stroke-dashoffset: 20; stroke-linecap: round; transition: stroke-dashoffset 1600ms cubic-bezier(0.4, 0, 0.2, 1) 300ms; }
[data-vitrine-v3] [data-v3-reveal="pending"] .v3-anneau-valeur { stroke-dashoffset: 100; }
[data-vitrine-v3] .v3-confiance-cas { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid light-dark(#d3e0ff, #323f62); border-radius: 12px; background: var(--v3-blue-soft); color: var(--v3-ink); text-decoration: none; transition: opacity 520ms ease var(--v3-reveal-delay, 0ms), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--v3-reveal-delay, 0ms), border-color 250ms ease, box-shadow 250ms ease; }
[data-vitrine-v3] .v3-confiance-cas:hover { border-color: var(--v3-blue); box-shadow: 0 16px 36px #194bd124; }
[data-vitrine-v3] .v3-confiance-cas-surtitre { display: inline-flex; align-items: center; gap: 8px; color: var(--v3-blue); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; }
[data-vitrine-v3] .v3-confiance-cas-surtitre .lucide { width: 16px; height: 16px; }
[data-vitrine-v3] .v3-confiance-cas strong { font-size: 1.5rem; letter-spacing: -0.03em; }
[data-vitrine-v3] .v3-confiance-cas > span:nth-child(3) { color: light-dark(#34475d, #b8cfe9); font-size: 0.9375rem; line-height: 1.6; }
[data-vitrine-v3] .v3-confiance-cas .v3-text-link { margin-top: auto; padding-top: 8px; }
[data-vitrine-v3] .v3-confiance-liste { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-confiance-liste a { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 18px; border: 1px solid var(--v3-line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color 220ms ease, transform 220ms ease; }
[data-vitrine-v3] .v3-confiance-liste a:hover { border-color: light-dark(#b9cdf5, #33456c); transform: translateY(-2px); }
[data-vitrine-v3] .v3-confiance-liste a:hover .v3-icon-box { border-color: var(--v3-action); background: var(--v3-action); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-confiance-liste .v3-icon-box { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
[data-vitrine-v3] .v3-confiance-liste a > span:last-child { display: flex; flex-direction: column; gap: 3px; color: var(--v3-muted); font-size: 0.8125rem; line-height: 1.45; }
[data-vitrine-v3] .v3-confiance-liste strong { color: var(--v3-ink); font-size: 0.9375rem; }

/* Upikat, l'assistant IA (components/_accueil_upikat.html.twig) : le téléphone joue la préparation d'un entretien, la
   légende des modes suit la démonstration, la synthèse apparaît à la fin et mène à la page de contact. Sans script ou
   avec la réduction des mouvements, tout est affiché (aucun data-v3-etat). */
[data-vitrine-v3] .v3-upikat-demo { background: light-dark(#f4f7fb, #131920); }
[data-vitrine-v3] .v3-upikat-demo-grille { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 64px; }
[data-vitrine-v3] .v3-upikat-demo-texte h2 { max-width: 18ch; }
[data-vitrine-v3] .v3-upikat-demo-chapo { max-width: 46ch; margin-top: 18px; color: var(--v3-muted); font-size: 1.0625rem; line-height: 1.65; }
[data-vitrine-v3] .v3-upikat-modes { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-upikat-modes li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--v3-muted); font-size: 0.875rem; line-height: 1.45; transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; }
[data-vitrine-v3] .v3-upikat-modes li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
[data-vitrine-v3] .v3-upikat-modes strong { color: var(--v3-ink); font-size: 0.9375rem; }
[data-vitrine-v3] .v3-upikat-modes .v3-icon-box { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
/* Mode en cours dans la démonstration : la ligne de la légende s'allume. */
[data-vitrine-v3] :is([data-v3-ia-mode="choix"] [data-v3-ia-legende="choix"], [data-v3-ia-mode="clavier"] [data-v3-ia-legende="clavier"], [data-v3-ia-mode="voix"] [data-v3-ia-legende="voix"], [data-v3-ia-mode="synthese"] [data-v3-ia-legende="synthese"]) { border-color: light-dark(#d3e0ff, #323f62); background: var(--v3-white); box-shadow: 0 10px 26px #12243a12; transform: translateX(4px); }
[data-vitrine-v3] :is([data-v3-ia-mode="choix"] [data-v3-ia-legende="choix"], [data-v3-ia-mode="clavier"] [data-v3-ia-legende="clavier"], [data-v3-ia-mode="voix"] [data-v3-ia-legende="voix"], [data-v3-ia-mode="synthese"] [data-v3-ia-legende="synthese"]) .v3-icon-box { border-color: var(--v3-action); background: var(--v3-action); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-upikat-rejouer { margin-top: 24px; }
[data-vitrine-v3] .v3-upikat-rejouer[hidden] { display: none; }

[data-vitrine-v3] .v3-upikat-scene { position: relative; display: flex; justify-content: center; min-width: 0; padding: 12px 0 28px; }
[data-vitrine-v3] .v3-telephone--grand { width: 272px; height: 556px; margin: 0; }
[data-vitrine-v3] .v3-telephone--grand .v3-chat-bulle { font-size: 0.8125rem; }
/* L'en-tête, la progression et la saisie gardent leur hauteur : seul le fil se resserre quand il se remplit. */
[data-vitrine-v3] .v3-telephone-ecran > :not(.v3-chat-fil) { flex-shrink: 0; }
/* Upikat en vignette, en haut à droite (retour de Paul du 29/10/2026) : plan poitrine en 3D, comme un appel vidéo, sur la
   bande de l'en-tête et de la progression, dont le texte et la jauge s'arrêtent avant elle ; le fil reste entier. */
[data-vitrine-v3] .v3-ia-upikat { position: absolute; top: 50px; right: 10px; z-index: 2; width: 66px; height: 78px; overflow: hidden; border: 1px solid light-dark(#d3e0ff, #323f62); border-radius: 12px; background: light-dark(#e2f2ff, #09283d); }
[data-vitrine-v3] .v3-telephone--grand :is(.v3-chat-entete, .v3-ia-progression) { padding-right: 86px; }
[data-vitrine-v3] .v3-ia-upikat :is(img, .upikat-avatar, canvas) { display: block; width: 100%; height: 100%; }
[data-vitrine-v3] .v3-ia-progression { display: flex; flex-direction: column; gap: 6px; padding: 9px 14px 10px; border-bottom: 1px solid light-dark(#e3e8ef, #393f47); background: var(--v3-white); }
[data-vitrine-v3] .v3-ia-progression-texte { color: var(--v3-muted); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; }
[data-vitrine-v3] .v3-ia-jauge { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: light-dark(#e7ecf2, #161c24); }
[data-vitrine-v3] .v3-ia-jauge > span { display: block; width: 100%; height: 100%; background: var(--v3-action); transform: scaleX(var(--v3-ia-avance, 1)); transform-origin: left; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-vitrine-v3] [data-v3-ia-message][data-v3-etat="attente"],
[data-vitrine-v3] .v3-ia-choix[data-v3-etat="replie"] { display: none; }
[data-vitrine-v3] [data-v3-ia-message][data-v3-etat="visible"] { animation: v3-apparait 320ms ease-out; }
[data-vitrine-v3] .v3-ia-choix { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; }
[data-vitrine-v3] .v3-ia-option { padding: 6px 11px; border: 1px solid light-dark(#b9cdf5, #33456c); border-radius: 8px; background: var(--v3-white); color: var(--v3-blue); font-size: 0.75rem; font-weight: 600; line-height: 1.3; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
[data-vitrine-v3] .v3-ia-option--retenue { background: var(--v3-blue-soft); }
[data-vitrine-v3] .v3-ia-option[data-v3-presse] { border-color: var(--v3-action); background: var(--v3-action); color: var(--v3-on-action); transform: scale(0.94); }
[data-vitrine-v3] .v3-chat-bulle--vocal { display: flex; flex-direction: column; gap: 3px; }
[data-vitrine-v3] .v3-chat-vocal { display: inline-flex; align-items: center; gap: 4px; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; }
[data-vitrine-v3] .v3-chat-vocal .lucide { width: 10px; height: 10px; }
/* Zone de saisie : repos, saisie au clavier (texte qui s'écrit, curseur), voix (onde du micro), transcription. */
[data-vitrine-v3] .v3-ia-saisie { position: relative; gap: 8px; min-height: 40px; }
/* Recette du 26/10/2026 : le texte saisi prend la place restante (base nulle) et défile dans sa zone ; il ne pousse
   jamais le micro ni le bouton d'envoi, qui gardent leur taille (le bouton se réduisait de moitié pendant la saisie). */
[data-vitrine-v3] .v3-ia-saisie-texte { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-ia-saisie[data-v3-ia-saisie-mode="clavier"] .v3-ia-saisie-texte { color: var(--v3-ink); direction: rtl; text-align: left; }
[data-vitrine-v3] .v3-ia-saisie[data-v3-ia-saisie-mode="clavier"] .v3-ia-saisie-texte::after { display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; background: var(--v3-action); content: ''; vertical-align: -0.15em; animation: v3-curseur 900ms steps(1) infinite; }
[data-vitrine-v3] .v3-ia-onde { display: none; flex: 1 1 0; align-items: center; gap: 3px; min-width: 0; height: 22px; overflow: hidden; }
[data-vitrine-v3] .v3-ia-onde > span { flex: 0 0 3px; height: 100%; border-radius: 2px; background: var(--v3-action); transform: scaleY(0.25); transform-origin: center; }
[data-vitrine-v3] .v3-ia-saisie:is([data-v3-ia-saisie-mode="voix"], [data-v3-ia-saisie-mode="transcription"]) .v3-ia-saisie-texte { display: none; }
[data-vitrine-v3] .v3-ia-saisie:is([data-v3-ia-saisie-mode="voix"], [data-v3-ia-saisie-mode="transcription"]) .v3-ia-onde { display: flex; }
[data-vitrine-v3] .v3-ia-saisie[data-v3-ia-saisie-mode="voix"] .v3-ia-onde > span { animation: v3-onde 900ms ease-in-out infinite; }
[data-vitrine-v3] .v3-ia-saisie[data-v3-ia-saisie-mode="transcription"] .v3-ia-onde > span { opacity: 0.35; transition: opacity 300ms ease; }
[data-vitrine-v3] .v3-ia-onde > span:nth-child(3n + 1) { animation-delay: -120ms; }
[data-vitrine-v3] .v3-ia-onde > span:nth-child(3n + 2) { animation-delay: -420ms; animation-duration: 700ms; }
[data-vitrine-v3] .v3-ia-onde > span:nth-child(4n) { animation-delay: -650ms; animation-duration: 1100ms; }
[data-vitrine-v3] .v3-ia-micro { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: light-dark(#6b7d92, #9aadc3); transition: background-color 200ms ease, color 200ms ease; }
[data-vitrine-v3] .v3-ia-micro .lucide { width: 14px; height: 14px; }
[data-vitrine-v3] .v3-ia-saisie[data-v3-ia-saisie-mode="voix"] .v3-ia-micro { background: var(--v3-action); color: var(--v3-on-action); animation: v3-micro 1.4s ease-out infinite; }
[data-vitrine-v3] .v3-ia-saisie .v3-chat-envoi { transition: transform 160ms ease, background-color 160ms ease; }
[data-vitrine-v3] .v3-ia-saisie[data-v3-ia-envoi] .v3-chat-envoi { background: #0f3aa8; transform: scale(0.86); }

/* Synthèse : le résultat de la conversation, posé par-dessus le bas du téléphone, centré (retour de Paul du 29/10/2026 :
   à côté, elle décentrait le téléphone) ; un clic l'ouvre sur la page de contact. */
[data-vitrine-v3] .v3-ia-synthese { position: absolute; right: 0; bottom: 4px; left: 0; z-index: 4; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; width: 300px; padding: 16px 18px; border: 1px solid light-dark(#d7dfe9, #39424d); border-radius: 12px; background: var(--v3-white); color: var(--v3-ink); text-decoration: none; box-shadow: 0 28px 60px #12243a24; transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 250ms ease, border-color 250ms ease; }
[data-vitrine-v3] .v3-ia-synthese[data-v3-etat="attente"] { visibility: hidden; opacity: 0; transform: translateY(28px) scale(0.96); pointer-events: none; }
[data-vitrine-v3] .v3-ia-synthese[data-v3-etat="visible"] { animation: v3-invitation 1.6s ease-out 900ms 2; }
[data-vitrine-v3] .v3-ia-synthese:hover,
[data-vitrine-v3] .v3-ia-synthese:focus-visible { border-color: var(--v3-blue); box-shadow: 0 32px 70px #194bd12e; transform: translateY(-4px); }
[data-vitrine-v3] .v3-ia-synthese:focus-visible { outline: 3px solid light-dark(#93b8ff, #6385c8); outline-offset: 3px; }
[data-vitrine-v3] .v3-ia-synthese > span { display: flex; }
[data-vitrine-v3] .v3-ia-synthese-entete { align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid light-dark(#e6ebf1, #393e45); }
[data-vitrine-v3] .v3-ia-synthese-entete > span:nth-child(2) { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; }
[data-vitrine-v3] .v3-ia-synthese-entete strong { font-size: 0.9375rem; }
[data-vitrine-v3] .v3-ia-synthese-entete > span:nth-child(2) > span { color: var(--v3-muted); font-size: 0.6875rem; }
[data-vitrine-v3] .v3-ia-synthese-icone { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--v3-blue-soft); color: var(--v3-blue); }
[data-vitrine-v3] .v3-ia-synthese-icone .lucide { width: 18px; height: 18px; }
[data-vitrine-v3] .v3-ia-synthese-bloc { flex-direction: column; gap: 7px; color: light-dark(#34475d, #b8cfe9); font-size: 0.75rem; line-height: 1.5; }
[data-vitrine-v3] .v3-ia-synthese-titre { color: var(--v3-muted); font-size: 0.625rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
[data-vitrine-v3] .v3-ia-themes { display: flex; flex-wrap: wrap; gap: 5px; }
[data-vitrine-v3] .v3-ia-themes > span { padding: 3px 8px; border: 1px solid light-dark(#d3e0ff, #323f62); border-radius: 6px; background: light-dark(#edf2ff, #1d2439); color: light-dark(#1745b3, #a8c4fc); font-size: 0.6875rem; font-weight: 600; }
[data-vitrine-v3] .v3-ia-points { display: flex; flex-direction: column; gap: 5px; }
[data-vitrine-v3] .v3-ia-points > span { position: relative; padding-left: 16px; }
[data-vitrine-v3] .v3-ia-points > span::before { position: absolute; top: 0.55em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: light-dark(#2f9e64, #0c512f); content: ''; }
[data-vitrine-v3] .v3-ia-synthese-bloc--retenir { padding: 10px 12px; border-left: 3px solid light-dark(#d9731f, #ce793c); border-radius: 6px; background: light-dark(#fdf3ea, #302011); }
[data-vitrine-v3] .v3-ia-synthese-pied { align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid light-dark(#e6ebf1, #393e45); color: var(--v3-muted); font-size: 0.625rem; }
[data-vitrine-v3] .v3-ia-synthese-ouvrir { display: inline-flex; align-items: center; gap: 4px; color: var(--v3-blue); font-size: 0.75rem; font-weight: 650; }
[data-vitrine-v3] .v3-ia-synthese-ouvrir .lucide { width: 14px; height: 14px; transition: transform 250ms ease; }
[data-vitrine-v3] .v3-ia-synthese:hover .v3-ia-synthese-ouvrir .lucide { transform: translate(2px, -2px); }
/* À son arrivée, la synthèse se compose : chaque bloc après l'autre. */
[data-vitrine-v3] .v3-ia-synthese[data-v3-etat="visible"] > span { animation: v3-apparait 420ms ease-out both; }
[data-vitrine-v3] .v3-ia-synthese[data-v3-etat="visible"] > span:nth-child(2) { animation-delay: 180ms; }
[data-vitrine-v3] .v3-ia-synthese[data-v3-etat="visible"] > span:nth-child(3) { animation-delay: 360ms; }
[data-vitrine-v3] .v3-ia-synthese[data-v3-etat="visible"] > span:nth-child(4) { animation-delay: 540ms; }
[data-vitrine-v3] .v3-ia-synthese[data-v3-etat="visible"] > span:nth-child(5) { animation-delay: 720ms; }

@keyframes v3-curseur { 50% { opacity: 0; } }
@keyframes v3-onde { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes v3-micro { 0% { box-shadow: 0 0 0 0 #194bd166; } 100% { box-shadow: 0 0 0 9px #194bd100; } }
@keyframes v3-invitation { 0% { box-shadow: 0 28px 60px #12243a24, 0 0 0 0 #194bd159; } 100% { box-shadow: 0 28px 60px #12243a24, 0 0 0 14px #194bd100; } }

/* Upikat entre 64 et 80rem : colonne de scène élargie, téléphone et synthèse resserrés. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
    [data-vitrine-v3] .v3-upikat-demo-grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; }
    [data-vitrine-v3] .v3-telephone--grand { width: 256px; height: 524px; }
    [data-vitrine-v3] .v3-ia-synthese { width: 272px; padding: 16px; }
}

@media (max-width: 63.999rem) {
    [data-vitrine-v3] .v3-public { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 30px; }
    /* Une colonne : chaque composant garde son propre fond, sous son texte. */
    [data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-publics-scene::before { content: none; }
    [data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public-visuel { align-self: start; background: light-dark(#eaf0f7, #151b23); }
    /* Upikat : le téléphone centré, la synthèse par-dessus son bas, comme en grand écran. */
    [data-vitrine-v3] .v3-upikat-demo-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    [data-vitrine-v3] .v3-ia-synthese { width: min(300px, calc(100% - 24px)); }
    /* Confiance : quatre engagements en deux colonnes égales, jamais trois plus un orphelin. */
    [data-vitrine-v3] .v3-confiance-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-vitrine-v3] .v3-confiance-grille { grid-template-columns: minmax(0, 1fr); }
    [data-vitrine-v3] .v3-prix-grille { grid-template-columns: 160px minmax(0, 1fr); gap: 28px 40px; }
    [data-vitrine-v3] .v3-prix-medaille { width: 160px; }
    [data-vitrine-v3] .v3-prix-coeur { width: 118px; height: 118px; }
    [data-vitrine-v3] .v3-prix-propos { grid-column: 1 / -1; }
    /* Démonstration : l'écran reste collé en haut pendant que les étapes défilent dessous. */
    [data-vitrine-v3] .v3-parcours-grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
    [data-vitrine-v3] .v3-parcours-cadre { display: contents; }
    [data-vitrine-v3] .v3-parcours-scene { z-index: 2; top: 78px; order: -2; padding: 16px; }
    [data-vitrine-v3] .v3-parcours-etape { min-height: 52vh; }
    [data-vitrine-v3] .v3-accueil-demo-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    [data-vitrine-v3] .v3-accueil-demo-visuel { order: 0; }
}

@media (max-width: 47.999rem) {
    [data-vitrine-v3] .v3-logos-tete { display: block; }
    [data-vitrine-v3] .v3-logos-tete .v3-text-link { margin-top: 6px; }
    [data-vitrine-v3] .v3-logo { height: 52px; padding-inline: 14px; }
    [data-vitrine-v3] .v3-logo img { max-width: 112px; max-height: 36px; }
    [data-vitrine-v3] .v3-partenaires { display: block; }
    [data-vitrine-v3] .v3-partenaires-liste { margin-top: 10px; }
    [data-vitrine-v3] .v3-partenaires-liste .v3-logo img { max-width: 100px; max-height: 32px; }
    [data-vitrine-v3] .v3-publics-liste { width: 100%; }
    [data-vitrine-v3] .v3-publics-liste button { padding-inline: 6px; font-size: 0.8125rem; }
    [data-vitrine-v3] .v3-publics-liste button .lucide { display: none; }
    [data-vitrine-v3] .v3-publics-scene { margin-top: 32px; }
    [data-vitrine-v3] .v3-app-suivi { grid-template-columns: 18px minmax(0, 1fr); }
    [data-vitrine-v3] .v3-app-suivi-jauge { grid-column: 1 / -1; }
    [data-vitrine-v3] .v3-parcours-route { font-size: 0.6875rem; }
    /* Fil de l'entretien : le sujet, puis son état dessous, sur toute la largeur. */
    [data-vitrine-v3] .v3-parcours-fil { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; padding: 10px 12px; }
    [data-vitrine-v3] .v3-parcours-fil-etats { justify-items: start; }
    /* Démonstration sur téléphone : l'écran collé en haut reste compact pour laisser lire l'étape en dessous. */
    [data-vitrine-v3] .v3-parcours-route { padding-bottom: 14px; }
    [data-vitrine-v3] .v3-parcours-ecran { gap: 8px; padding: 12px; }
    [data-vitrine-v3] .v3-parcours-fil-legende { display: none; }
    [data-vitrine-v3] .v3-parcours-ecran .v3-chat-bulle,
    [data-vitrine-v3] .v3-parcours-extrait { font-size: 0.8125rem; }
    /* Écrans resserrés (29/10/2026) : la démonstration collée en haut garde moins de 60 % de la hauteur, l'étape se lit
       dessous. Upikat reste nommé et présenté comme une IA ; deux questions du formulaire suffisent à montrer la double
       entrée ; les solutions tiennent sur une ligne. */
    [data-vitrine-v3] .v3-parcours-upikat > span:last-child > span { display: none; }
    [data-vitrine-v3] .v3-parcours-upikat .v3-chat-avatar { width: 26px; height: 26px; }
    [data-vitrine-v3] .v3-parcours-upikat { padding-bottom: 8px; }
    [data-vitrine-v3] .v3-parcours-conversation { gap: 5px; }
    [data-vitrine-v3] .v3-parcours-conversation .v3-chat-bulle { padding: 5px 9px; font-size: 0.6875rem; line-height: 1.4; }
    [data-vitrine-v3] .v3-parcours-formulaire { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 6px; }
    [data-vitrine-v3] .v3-parcours-formulaire-coin, [data-vitrine-v3] .v3-parcours-ligne:nth-child(n + 6), [data-vitrine-v3] .v3-parcours-ecran-precision { display: none; }
    [data-vitrine-v3] .v3-parcours-ligne-question { grid-column: 1 / -1; flex-direction: row; align-items: center; margin-top: 4px; font-size: 0.6875rem; }
    [data-vitrine-v3] .v3-parcours-reponse { padding: 5px 8px; font-size: 0.6875rem; }
    [data-vitrine-v3] .v3-parcours-pastille { flex: 0 0 auto; }
    [data-vitrine-v3] .v3-parcours-extrait { font-size: 0.75rem; }
    [data-vitrine-v3] .v3-parcours-extrait { padding: 9px 11px; line-height: 1.6; }
    [data-vitrine-v3] .v3-parcours-etiquettes { gap: 5px; margin-top: 0; }
    [data-vitrine-v3] .v3-parcours-etiquettes .v3-etiquette { gap: 8px; padding: 5px 8px; }
    [data-vitrine-v3] .v3-reperage-icone, [data-vitrine-v3] .v3-parcours-solution > span:last-child > :not(strong), [data-vitrine-v3] .v3-parcours-solutions-titre, [data-vitrine-v3] .v3-parcours-friction-origine { display: none; }
    [data-vitrine-v3] .v3-reperage-texte strong, [data-vitrine-v3] .v3-parcours-solution strong { font-size: 0.75rem; }
    [data-vitrine-v3] .v3-parcours-friction, [data-vitrine-v3] .v3-parcours-analyse p { padding: 7px 9px; }
    [data-vitrine-v3] .v3-parcours-friction-icone { width: 24px; height: 24px; }
    [data-vitrine-v3] .v3-parcours-friction strong { font-size: 0.75rem; }
    [data-vitrine-v3] .v3-parcours-analyse p { font-size: 0.6875rem; }
    [data-vitrine-v3] .v3-parcours-solutions { gap: 4px; }
    [data-vitrine-v3] .v3-parcours-solution { padding: 5px 9px; }
    [data-vitrine-v3] .v3-parcours-envois { gap: 4px; }
    [data-vitrine-v3] .v3-parcours-upikat { padding-bottom: 10px; }
    [data-vitrine-v3] .v3-confiance-liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    [data-vitrine-v3] .v3-compteurs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    [data-vitrine-v3] .v3-compteur { min-height: 0; padding: 20px 20px 20px 76px; }
    [data-vitrine-v3] .v3-compteur-icone { top: 22px; left: 20px; }
    [data-vitrine-v3] .v3-compteur--anneau { padding-left: 20px; padding-right: 110px; }
    [data-vitrine-v3] .v3-anneau { top: 50%; width: 72px; height: 72px; transform: translateY(-50%); }
    [data-vitrine-v3] .v3-prix { padding-block: 48px; }
    [data-vitrine-v3] .v3-prix-grille { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 24px; }
    [data-vitrine-v3] .v3-prix-propos { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-vitrine-v3] .v3-accueil-hero .v3-scene-gps [data-v3-gps] .v3-gps-reader { transform: none; transition: none; }
    [data-vitrine-v3] .v3-telephone,
    [data-vitrine-v3] .v3-parcours-ecran,
    [data-vitrine-v3] .v3-parcours-trace-faite,
    [data-vitrine-v3] .v3-parcours-balise,
    [data-vitrine-v3] .v3-parcours-etape,
    [data-vitrine-v3] .v3-parcours-fil-etat,
    [data-vitrine-v3] .v3-parcours-fil-jauge > span,
    [data-vitrine-v3] .v3-solution-card[class*="v3-brique--"]::before { transition: none; }
    /* Rôles : changement instantané, composants dans leur état initial, sans réaction animée. */
    [data-vitrine-v3] .v3-publics-curseur,
    [data-vitrine-v3] .v3-public,
    [data-vitrine-v3] .v3-publics-onglets[data-v3-onglet] .v3-public[hidden],
    [data-vitrine-v3] .v3-app *,
    [data-vitrine-v3] .v3-app-sites li { transition: none; }
    [data-vitrine-v3] .v3-publics-onglets .v3-public *,
    [data-vitrine-v3] .v3-app * { animation: none !important; }
    [data-vitrine-v3] .v3-app-bouton:hover,
    [data-vitrine-v3] .v3-app-avis .v3-app-carte:hover,
    [data-vitrine-v3] .v3-app-upikat:hover img { transform: none; }
    [data-vitrine-v3] .v3-chat-ecrit > span { animation: none; }
    [data-vitrine-v3] .v3-ia-onde > span,
    [data-vitrine-v3] .v3-ia-saisie .v3-ia-micro,
    [data-vitrine-v3] .v3-ia-synthese,
    [data-vitrine-v3] .v3-ia-synthese > span { animation: none; }
    [data-vitrine-v3] .v3-upikat-modes li { transition: none; }
    /* Démonstration : écrans affichés dans leur état final, sans balise qui pulse. */
    [data-vitrine-v3] .v3-parcours-ecran *,
    [data-vitrine-v3] .v3-parcours-ecran *::before,
    [data-vitrine-v3] .v3-parcours-balise::after { animation: none; }
    /* Bandeau des clients : immobile, en grille, sans la copie qui sert à boucler. */
    [data-vitrine-v3] .v3-defilant { flex-wrap: wrap; justify-content: center; }
    [data-vitrine-v3] .v3-defilant-piste { flex-wrap: wrap; justify-content: center; padding: 0; animation: none; }
    [data-vitrine-v3] [data-v3-defilant-copie] { display: none; }
}