/* Mouvement léger de la Vitrine V3 (js/vitrine-v3/mouvements.js) : apparition au défilement, icônes qui se dessinent,
   aperçu produit qui se joue seul. Sans le script ou avec la réduction des mouvements, aucun état masqué n'est posé. */

[data-vitrine-v3] [data-v3-reveal] {
    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);
}
[data-vitrine-v3] [data-v3-reveal="pending"] { opacity: 0; transform: translateY(16px); }
[data-vitrine-v3] [data-v3-reveal="shown"] { opacity: 1; transform: none; }

/* Icônes des cartes : le trait se dessine à l'apparition (pathLength = 1 posé par le script). */
[data-vitrine-v3] [data-v3-reveal] .v3-icon-box svg[data-v3-drawn] :is(path, line, polyline, polygon, circle, rect, ellipse) {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--v3-reveal-delay, 0ms) + 180ms);
}
[data-vitrine-v3] [data-v3-reveal="pending"] .v3-icon-box svg[data-v3-drawn] :is(path, line, polyline, polygon, circle, rect, ellipse) { stroke-dashoffset: 1; }

/* Aperçu produit : curseur fictif de la démonstration automatique (sans bouton de pause depuis le 26/10/2026). */
[data-vitrine-v3] [data-v3-autoplay] { position: relative; }
/* Barre de fenêtre de la démonstration : pastilles et logo de l'application. */
[data-vitrine-v3] .v3-product-caption { justify-content: flex-start; }
[data-vitrine-v3] .v3-product-fenetre { display: inline-flex; gap: 6px; }
[data-vitrine-v3] .v3-product-fenetre > span { width: 9px; height: 9px; border-radius: 50%; background: #c9d3de; }
[data-vitrine-v3] .v3-product-workspace-logo { width: 24px; height: 24px; margin-left: 6px; border-radius: 6px; }
[data-vitrine-v3] .v3-product-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 22px;
    height: 22px;
    color: var(--v3-ink);
    pointer-events: none;
    transform: translate(var(--v3-cursor-x, 70%), var(--v3-cursor-y, 120px));
    transition: transform 680ms cubic-bezier(0.45, 0, 0.2, 1);
}
[data-vitrine-v3] .v3-product-cursor svg { width: 22px; height: 22px; fill: var(--v3-white); stroke: var(--v3-ink); stroke-width: 1.6; }
[data-vitrine-v3] .v3-product-cursor::after { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border: 2px solid var(--v3-blue); border-radius: 50%; opacity: 0; content: ''; transform: scale(0.4); }
[data-vitrine-v3] .v3-product-cursor[data-v3-click]::after { animation: v3-cursor-click 260ms ease-out; }
[data-vitrine-v3] [data-v3-preview-evolution] :is(td, th) { transition: background-color 400ms ease; }
[data-vitrine-v3] [data-v3-preview-evolution][data-v3-evolved] :is(td, th) { background: light-dark(#fbf8f1, #121820); }

@keyframes v3-cursor-click {
    from { opacity: 0.9; transform: scale(0.4); }
    to { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
    [data-vitrine-v3] [data-v3-reveal] { transition: none; }
    [data-vitrine-v3] [data-v3-reveal="pending"] { opacity: 1; transform: none; }
    [data-vitrine-v3] .v3-product-cursor { display: none; }
}

@media print {
    [data-vitrine-v3] [data-v3-reveal="pending"] { opacity: 1; transform: none; }
    [data-vitrine-v3] .v3-product-cursor { display: none; }
}

/* La barre de fenêtre de la démonstration reste sur une ligne, y compris aux plus petites largeurs. */
@media (max-width: 380px) {
    [data-vitrine-v3] .v3-product-caption { flex-direction: row; align-items: center; gap: 8px; }
}

/* Étapes de la démonstration (Campagne, Entretien, Actions) : numéros, barre qui se remplit jusqu'à l'étape ouverte,
   contenu qui glisse dans le sens du parcours et se compose ligne après ligne. Rangs posés par vitrine-v3.js. */
[data-vitrine-v3] .v3-tablist--etapes { position: relative; counter-reset: v3-etape; border-bottom: 0; }
[data-vitrine-v3] .v3-tablist--etapes button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-bottom: 0; counter-increment: v3-etape; transition: color 200ms ease, background-color 200ms ease; }
[data-vitrine-v3] .v3-tablist--etapes button::before { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #c9d3de; border-radius: 50%; background: var(--v3-white); color: #6b7d92; font-size: 0.625rem; font-weight: 700; content: counter(v3-etape); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms ease; }
[data-vitrine-v3] .v3-tablist--etapes button:hover::before { border-color: var(--v3-blue); color: var(--v3-blue); transform: scale(1.08); }
[data-vitrine-v3] .v3-tablist--etapes button[aria-selected="true"]::before { border-color: var(--v3-action); background: var(--v3-action); color: var(--v3-on-action); }
[data-vitrine-v3] .v3-tablist--etapes button[data-v3-tab-passe]::before { border-color: #9fbaf0; background: var(--v3-blue-soft); color: var(--v3-blue); }
[data-vitrine-v3] .v3-tablist-piste { position: absolute; right: 17px; bottom: 0; left: 17px; height: 2px; background: var(--v3-line); pointer-events: none; }
[data-vitrine-v3] .v3-tablist-piste > span { display: block; width: 100%; height: 100%; background: var(--v3-action); transform: scaleX(calc((var(--v3-onglet, 0) + 1) / var(--v3-onglets, 3))); transform-origin: left; transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Vues superposées dans la fenêtre (recette du 26/10/2026) : la fenêtre garde la hauteur de la plus haute, elle ne
   saute plus d'une vue à l'autre. « !important » : exception plus précise à [hidden] { display: none !important }. */
[data-vitrine-v3] [data-v3-autoplay][data-v3-onglet] .v3-product-main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
[data-vitrine-v3] [data-v3-autoplay][data-v3-onglet] .v3-product-main > [data-v3-tabpanel] { grid-row: 2; grid-column: 1; }
[data-vitrine-v3] [data-v3-autoplay][data-v3-onglet] .v3-product-main > [data-v3-tabpanel][hidden] { display: block !important; visibility: hidden; pointer-events: none; }
[data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]) { animation: v3-etape-entree 380ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-vitrine-v3] [data-v3-autoplay][data-v3-onglet-sens="arriere"] [data-v3-tabpanel]:not([hidden]) { animation-name: v3-etape-retour; }
[data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]) :is(.v3-product-heading, .v3-product-context, tbody tr, .v3-product-note, .v3-product-actions > li, .v3-product-callout) { animation: v3-etape-ligne 420ms ease-out both; }
[data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]) :is(.v3-product-context, tbody tr:nth-child(1), .v3-product-note:nth-of-type(1), .v3-product-actions > li:nth-child(1)) { animation-delay: 90ms; }
[data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]) :is(tbody tr:nth-child(2), .v3-product-note:nth-of-type(2), .v3-product-actions > li:nth-child(2)) { animation-delay: 170ms; }
[data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]) :is(tbody tr:nth-child(3), .v3-product-actions > li:nth-child(3)) { animation-delay: 250ms; }
[data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]) .v3-product-callout { animation-delay: 330ms; }
/* Micro-interactions : une ligne survolée s'éclaire, une suite survolée avance d'un cran (« translate » : l'animation
   d'entrée des lignes garde la main sur « transform »), une note survolée se soulève, son statut aussi. */
[data-vitrine-v3] .v3-product-table tbody tr { transition: background-color 200ms ease; }
[data-vitrine-v3] .v3-product-table tbody tr:hover { background: #f5f8fd; }
[data-vitrine-v3] .v3-product-table tbody tr:hover .v3-site-letter { border-color: var(--v3-blue); color: var(--v3-blue); }
[data-vitrine-v3] .v3-product-actions > li { transition: translate 220ms ease, background-color 220ms ease; }
[data-vitrine-v3] .v3-product-actions > li:hover { background: #f7f9fd; translate: 3px 0; }
[data-vitrine-v3] .v3-product-actions > li:hover .v3-task-marker { border-color: var(--v3-blue); color: var(--v3-blue); }
[data-vitrine-v3] .v3-product-note { transition: border-color 220ms ease, box-shadow 220ms ease, translate 220ms ease; }
[data-vitrine-v3] .v3-product-note:hover { border-color: #c7d6ef; box-shadow: 0 10px 22px #12243a10; translate: 0 -2px; }
[data-vitrine-v3] .v3-product-inline { transition: background-color 220ms ease, color 220ms ease; }
[data-vitrine-v3] .v3-product-note:hover .v3-product-inline { color: var(--v3-blue); }
/* Vue vivante (mouvements.js, [data-v3-vie]) : l'élément qui change d'état s'éclaire un instant pour attirer l'œil. */
[data-vitrine-v3] .v3-status[data-v3-vie-change] { animation: v3-vie-statut 620ms cubic-bezier(0.3, 1.4, 0.5, 1); }
[data-vitrine-v3] :not(.v3-status)[data-v3-vie-change] { animation: v3-vie-texte 1100ms ease-out; }
@keyframes v3-vie-statut { 0% { box-shadow: 0 0 0 0 #194bd140; transform: scale(0.85); } 60% { box-shadow: 0 0 0 6px #194bd100; transform: scale(1.06); } 100% { box-shadow: none; transform: none; } }
@keyframes v3-vie-texte { 0% { background-color: light-dark(#fff3c9, #2d2404); } 100% { background-color: transparent; } }

/* Questions fréquentes : la réponse se déplie en douceur, le « + » pivote. */
[data-vitrine-v3] .v3-faq-item summary .lucide { transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1), color 200ms ease; }
[data-vitrine-v3] .v3-faq-item summary:hover .lucide { color: var(--v3-blue); }
[data-vitrine-v3] .v3-faq-item[open] .v3-faq-answer { animation: v3-faq-ouverture 320ms ease-out; }
@keyframes v3-faq-ouverture { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@keyframes v3-etape-entree { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes v3-etape-retour { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes v3-etape-ligne { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    [data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]),
    [data-vitrine-v3] [data-v3-autoplay] [data-v3-tabpanel]:not([hidden]) * { animation: none; }
    [data-vitrine-v3] .v3-product-actions > li,
    [data-vitrine-v3] .v3-product-note { transition: none; }
    [data-vitrine-v3] .v3-product-actions > li:hover,
    [data-vitrine-v3] .v3-product-note:hover { translate: none; }
    [data-vitrine-v3] .v3-tablist-piste > span,
    [data-vitrine-v3] .v3-tablist--etapes button::before,
    [data-vitrine-v3] .v3-faq-item summary .lucide { transition: none; }
    [data-vitrine-v3] .v3-faq-item[open] .v3-faq-answer { animation: none; }
}