/* Variantes allégées de l'Entrée en trame (16/10/2026) — socle commun aux trois essais.
   Objectif : l'œil tombe d'abord sur le micro et la question. Tout le reste s'efface, ou attend son heure.
   Chargée après entree-declic.css ; elle n'ajoute rien au moteur (entree.js), elle rhabille et réordonne. */

body.vx { --mic: 104px; }

/* ——— Ce qui quitte le premier écran ——— */
.vx .intro h1, .vx .intro-copy, .vx .welcome-note, .vx #asks:before, .vx .starters,
.vx .write-foot, .vx .typerow > label, .vx .empty-card, .vx .hud__xy, .vx .photo-note { display: none !important; }
/* mode écriture : les points de départ reviennent (avant le premier échange) */
.vx #dock.writing .starters { display: block !important; margin-top: 10px; }
.vx #stage.started #dock.writing .starters { display: none !important; }

/* ——— L'en-tête de l'entretien, en une ligne ——— */
.vx .aime-heading { gap: 8px; }
.vx .aime-avatar { width: 22px; height: 22px; padding: 4px; gap: 3px; }
.vx .aime-avatar i { width: 4px; height: 4px; }
.vx .aime-avatar i:nth-child(2), .vx .aime-avatar i:nth-child(3) { width: 3px; height: 3px; }
.vx .aime-heading > div { flex-direction: row; align-items: baseline; gap: 8px; }
.vx .aime-heading strong { font: 700 12px var(--display); letter-spacing: -.02em; }
.vx .aime-heading > div > span, .vx .availability { font-size: 9px; }
.vx #asks { border-top: 0; padding-top: 0; }
.vx .welcome-question p { max-width: none; }

/* ——— Le micro : l'objet principal de la page ——— */
.vx .voice-panel { background: none; color: var(--ink); padding: 0; }
.vx .micwrap { width: var(--mic); height: var(--mic); }
.vx #mic { border: 1px solid var(--ink); background: var(--cta); color: var(--ink); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); transition: background .4s, transform .4s cubic-bezier(.22,.8,.24,1), box-shadow .4s; }
.vx #mic:hover { transform: scale(1.03); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.vx #mic:active { transform: scale(.97); }
.vx #mic svg { width: 40%; height: 40%; stroke-width: 1.35; }
.vx #mic.live { background: var(--accent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.vx .ring { inset: -8px; border: 1px solid var(--ink); opacity: 0; }
.vx .live-on .ring { animation: vx-ring 3.2s ease-out infinite; }
.vx .live-on .r2 { animation-delay: 1.6s; }
/* avant le premier mot, le micro respire lentement : c'est lui qu'on regarde */
.vx #stage:not(.started) .micwrap:not(.live-on) #mic { animation: vx-breathe 7s ease-in-out infinite; }
.vx .voice-copy strong { font: 800 clamp(18px, 2.4dvh, 22px)/1.1 var(--display); letter-spacing: -.045em; white-space: normal; }
.vx .voice-copy > span { font: 500 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: normal; }
.vx #wave { margin: 0; width: 132px; height: 28px; opacity: 0; transition: opacity .5s; }
.vx .is-listening #wave { opacity: 1; }

/* avant le premier mot, le micro parle seul : la ligne d'état n'arrive qu'ensuite (sauf erreur) */
.vx #stage:not(.started) #status:not([data-error]) { display: none; }

/* ——— Les actions secondaires : des liens, pas des boutons ——— */
.vx #dock .dockcard > #saveBtn { width: auto; min-height: 34px; margin: 0; padding: 7px 12px; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font: 600 10.5px var(--mono); letter-spacing: .06em; gap: 10px; justify-content: center; }
.vx #dock .dockcard > #saveBtn > span { font-size: 15px; }
.vx #dock .dockcard > #saveBtn.pulse { background: var(--cta); box-shadow: 0 0 0 3px var(--accent); }
.vx .conversation-save { display: flex; align-items: baseline; gap: 8px; margin: 0; white-space: nowrap; }
.vx .conversation-save button, .vx #conversationSave button { width: auto; min-height: 0; padding: 0; border: 0; background: none !important; color: var(--muted) !important; font: 500 10px var(--mono); letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; gap: 5px; }
.vx .conversation-save button > span { font-size: 12px; }
.vx .conversation-save button:hover { color: var(--ink) !important; transform: none; }
.vx .conversation-save p { display: none; }
.vx #demo { font: 500 10px var(--mono); letter-spacing: .06em; color: var(--muted); text-underline-offset: 3px; }
.vx #demo:hover { color: var(--ink); }
.vx #demo span { font-size: 12px; }
.vx .status { max-width: none; font: 500 11px/1.5 var(--mono); color: var(--muted); }
.vx #transcript { font: italic 400 13px/1.55 var(--mono); color: var(--muted); max-height: 54px; }
.vx .conversation-foot { font: 400 9.5px/1.5 var(--mono); color: var(--muted); }
.vx .write-box { padding: 10px 12px; }
.vx .write-box textarea { font-size: 13px; }

/* « Avez-vous terminé ? » */
.vx .floor-ask { border-left: 2px solid var(--accent); padding: 8px 0 0 12px; margin-top: 10px; }
.vx .floor-ask p { font: 700 18px/1.15 var(--display); letter-spacing: -.03em; }
.vx .floor-ask p span { font: 400 11px/1.5 var(--mono); }
.vx .floor-ask button { border-radius: 0; font: 600 10.5px var(--mono); min-height: 34px; }
.vx .floor-ask button[data-floor="done"] { background: var(--ink); color: var(--bg); }

/* ——— La scène : l'état vide se réduit à une phrase ——— */
.vx .empty-caption { right: 24px; bottom: 90px; max-width: 240px; }
.vx .empty-caption p { font: 500 11.5px/1.55 var(--mono); }

@keyframes vx-ring { 0% { transform: scale(.92); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes vx-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 50% { transform: scale(1.035); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } }

/* ——— Bureau : le micro en colonne, « Écrire plutôt » en lien, statut et démo libérés de leur rangée ——— */
@media (min-width: 901px) {
  .vx .dockrow { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .vx .voice-copy { align-items: center; gap: 4px; }
  .vx .srow { display: contents; }
  .vx .status { text-align: center; }
  .vx #transcript { text-align: center; }
  .vx .mobile-write-toggle { display: inline-flex; flex-direction: row; align-items: center; width: auto; height: auto; gap: 6px; padding: 0; border: 0; background: none; font: 500 10px var(--mono); letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); white-space: nowrap; }
  .vx .mobile-write-toggle span:after { content: " plutôt"; }
  .vx .mobile-write-toggle svg { width: 14px; height: 14px; }
  .vx .mobile-write-toggle:hover, .vx .mobile-write-toggle[aria-expanded="true"] { color: var(--ink); background: none; border: 0; }
  .vx #dock .typerow { display: none; margin: 0; }
  .vx #dock.writing .typerow { display: block; }
  .vx .conversation-foot { justify-content: center; text-align: center; }
}

/* ——— Téléphone : le bloc du bas reste compact, le micro un peu plus grand qu'avant ——— */
@media (max-width: 900px) {
  body.vx { --mic: 72px; }
  .vx .dockrow { gap: 12px; }
  .vx #mic svg { width: 44%; height: 44%; }
  .vx .voice-copy strong { font-size: 15px; }
  .vx .voice-copy > span { font-size: 8.5px; }
  .vx #wave { width: 48px; }
  .vx #dock .dockcard > #saveBtn { width: 100%; }
  .vx .conversation-save { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .vx #stage:not(.started) .micwrap:not(.live-on) #mic, .vx .live-on .ring { animation: none; }
}