/* Copilote vocal : trois demandes en boucle, reconstitution de démonstration épurée.
   Sans script ou avec mouvement réduit : le récapitulatif final, immobile. */
/* Sur un écran court (760, 720 px), le téléphone rétrécit pour que la scène, sa commande et sa légende tiennent dans l'écran. */
.device-voice { width: min(clamp(244px, 22vw, 304px), calc((100svh - 230px) * .46)); }
.voice-demo { position: relative; height: 100%; overflow: hidden; font-size: 5.2cqw; }
.vd-screen { position: absolute; inset: 0; padding: 15cqw 6.5cqw 0; }
.vd-top { display: flex; align-items: center; }
.vd-top > span:first-child { font: 600 9.5cqw/1 var(--font-titre); color: var(--app-accent); letter-spacing: -.06em; }
.vd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; margin-top: 5cqw; }
.vd-steps i { position: relative; height: max(2px, .9cqw); border-radius: 2px; overflow: hidden; background: var(--app-line); }
.vd-steps i::after { content: ''; position: absolute; inset: 0; background: var(--app-accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.vd-stage { position: absolute; top: 40cqw; right: 6.5cqw; bottom: 50cqw; left: 6.5cqw; }
.vd-scene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 7cqw; }
.vd-said { align-self: flex-end; max-width: 92%; margin: 0; padding: 3.6cqw 4.8cqw; border: 1px solid var(--app-line); border-radius: 5cqw 5cqw 1.4cqw 5cqw; background: var(--app-surface); font-size: 6cqw; line-height: 1.3; }
/* Espaces insécables : un guillemet ne se retrouve jamais seul en début ou en fin de ligne. */
.vd-said::before { content: '«\00a0'; color: var(--app-muted); }
.vd-said::after { content: '\00a0»'; color: var(--app-muted); }
.vd-answer { padding: 5cqw; border: 1px solid var(--app-accent); border-radius: 3.5cqw; background: var(--app-surface); }

/* Documents */
.vd-doc { display: flex; align-items: center; gap: 4cqw; }
.vd-file { display: grid; place-items: center; flex: none; width: 12cqw; height: 15cqw; border: 1px solid var(--app-line); border-radius: 1.4cqw; color: var(--app-accent); background: var(--app-bg); font-size: 3.4cqw; font-weight: 700; letter-spacing: .04em; }
.vd-doc strong { display: block; margin-bottom: 1cqw; font-size: 6.2cqw; }
.vd-doc small { color: var(--app-muted); font-size: 4.8cqw; }

/* Devis */
.vd-quote { display: grid; gap: 3cqw; }
.vd-quote-client { margin: 0; color: var(--app-muted); font-size: 5cqw; }
.vd-quote-ligne { margin: -1.6cqw 0 0; font-size: 5cqw; }
.vd-quote-total { margin: 0 0 2cqw; font-size: 11cqw; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.vd-quote-total small { color: var(--app-muted); font-size: 4.6cqw; font-weight: 400; letter-spacing: 0; }
.vd-create { position: relative; display: grid; }
.vd-create > span { grid-area: 1 / 1; display: grid; place-items: center; padding: 3.2cqw; border-radius: 2cqw; font-size: 5cqw; font-weight: 600; }
.vd-button { color: var(--app-bg); background: var(--app-accent); }
.vd-done { color: var(--app-accent); background: oklch(31% .06 183); opacity: 0; }
.vd-tap { display: none; }

/* Chiffre d'affaires */
.vd-big { margin: 0 0 5cqw; font-size: 13cqw; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.vd-big small { color: var(--app-muted); font-size: 4.8cqw; font-weight: 400; letter-spacing: 0; }
.vd-chart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5cqw; align-items: end; height: 32cqw; }
.vd-chart > div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.vd-chart i { display: block; height: calc(var(--h) * 25cqw); border-radius: 1.4cqw 1.4cqw 0 0; background: var(--app-line); transform-origin: bottom; }
.vd-chart > div:last-child i { background: var(--app-accent); }
.vd-chart span { margin-top: 2cqw; color: var(--app-muted); font-size: 4.2cqw; }

/* Récapitulatif : dernier temps de la boucle et état immobile. */
.vd-summary { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8cqw; }
.vd-summary-title { margin: 0; font: 400 11cqw/1.1 var(--font-titre); letter-spacing: -.03em; }
.vd-summary ul { display: grid; gap: 4cqw; margin: 0; padding: 0; list-style: none; }
.vd-summary li { padding-top: 4cqw; border-top: 1px solid var(--app-line); }
.vd-summary strong { color: var(--app-accent); font-size: 5.6cqw; }

/* Micro : repos, écoute, recherche, réponse lue. */
.vd-mic { position: absolute; right: 0; bottom: 16cqw; left: 0; display: grid; justify-items: center; }
.vd-orb { position: relative; display: grid; place-items: center; width: 21cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--app-accent); background: oklch(27% .05 200); }
.vd-orb::before, .vd-orb::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--app-accent); opacity: 0; }
.vd-wave { display: flex; align-items: center; gap: 1.3cqw; height: 9cqw; }
.vd-wave i { display: block; width: 1.3cqw; height: 8.5cqw; border-radius: 1cqw; background: var(--app-accent); transform: scaleY(.153); }

.vd-toggle { display: block; margin: 20px auto 0; padding: 6px 2px; border: 0; border-bottom: 1px solid currentColor; color: rgb(243 238 229 / .7); background: none; font: inherit; font-size: .8125rem; cursor: pointer; }
.vd-toggle:hover { color: var(--papier); }
.vd-toggle:focus-visible { outline: 2px solid var(--turquoise-pale); outline-offset: 4px; }
.benefit-voice .benefit-visual figcaption { margin-top: 14px; }

/* État immobile, par défaut : seul le récapitulatif, complet. */
.voice-demo:not(.vd-live) .vd-steps, .voice-demo:not(.vd-live) .vd-scene { display: none; }

/* Boucle animée (voice-demo.js, timeline GSAP) : états de départ seulement, sans transition ;
   la timeline écrit les états suivants en ligne et les remet à zéro à chaque tour. */
.vd-live .vd-scene, .vd-live .vd-summary, .vd-live .vd-said, .vd-live .vd-quote > *, .vd-live .vd-retards > *,
.vd-live .vd-done, .vd-live .vd-tap, .vd-live .vd-summary-title, .vd-live .vd-summary li { opacity: 0; visibility: hidden; }
.vd-said::after { opacity: var(--vd-fin, 1); }
.vd-live .vd-word { opacity: .12; filter: blur(2px); }
.vd-live .vd-answer { clip-path: circle(0% at 50% 190%); opacity: .4; }
.vd-live .vd-big { clip-path: inset(0% 100% 0% 0%); }
.vd-live .vd-tap { display: block; position: absolute; top: 50%; left: 62%; width: 10cqw; aspect-ratio: 1; padding: 0; border: 2px solid var(--app-text); border-radius: 50%; pointer-events: none; }
.vd-live[data-state="listen"] .vd-orb { background: oklch(33% .07 190); }
.vd-live[data-state="listen"] .vd-orb::before { animation: vd-ring 1.2s ease-out infinite; }
.vd-live[data-state="listen"] .vd-orb::after { animation: vd-ring 1.2s ease-out .6s infinite; }
.vd-live[data-state="listen"] .vd-wave i { animation: vd-voice .52s ease-in-out infinite alternate; }
.vd-live[data-state="listen"] .vd-wave i:nth-child(2) { animation-duration: .38s; animation-delay: -.2s; }
.vd-live[data-state="listen"] .vd-wave i:nth-child(3) { animation-duration: .46s; animation-delay: -.1s; }
.vd-live[data-state="listen"] .vd-wave i:nth-child(4) { animation-duration: .34s; animation-delay: -.3s; }
.vd-live[data-state="listen"] .vd-wave i:nth-child(5) { animation-duration: .5s; animation-delay: -.25s; }
.vd-live[data-state="think"] .vd-orb { border-color: var(--app-line); background: conic-gradient(from var(--vd-spin, 0deg), var(--app-accent) 0 22%, transparent 22%) border-box; }
.vd-live[data-state="think"] .vd-orb { mask: radial-gradient(circle, transparent 0 calc(50% - 1.2cqw), #000 calc(50% - 1.2cqw + .5px)); }
.vd-live[data-state="think"] .vd-orb { animation: vd-spin .7s linear infinite; }
.vd-live[data-state="speak"] .vd-orb { background: oklch(40% .09 183); }
.vd-live[data-state="speak"] .vd-wave i { animation: vd-voice .9s ease-in-out infinite alternate; }
.vd-live[data-state="speak"] .vd-wave i:nth-child(2n) { animation-delay: -.45s; }
.vd-live[data-state="speak"] .vd-wave i:nth-child(3) { animation-duration: .7s; }
@property --vd-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes vd-spin { to { --vd-spin: 360deg; } }
@keyframes vd-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
@keyframes vd-voice { from { transform: scaleY(.153); } to { transform: none; } }
.vd-paused *, .vd-paused *::before, .vd-paused *::after { animation-play-state: paused !important; }

@media (max-width: 760px) {
  .device-voice { width: min(70vw, 268px); }
}