/* Variante 3 — « La scène » (16/10/2026).
   Colonne de gauche = l'Épure telle quelle (question, micro centré, liens), séparée de la scène par un trait fin.
   À droite, le personnage prend toute la hauteur, facettes en haut à droite, zoom en bas à droite.
   Sur téléphone, cette variante reprend l'Épure (variante-epure.css, chargée avant). */

@media (min-width: 901px) {
  /* la délimitation : un trait fin, ancre à 30 %, du haut en bas de la scène */
  .v3 #map, .v3 .has-profile #map { border-left: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); --fig-top: 56px; --fig-bottom: 44px; }
  .v3 .stage { gap: clamp(24px, 3vw, 48px); }
  .v3 .profile-canvas, .v3 .has-profile .profile-canvas { margin: 56px 0 44px; }
  .v3 .empty-caption { right: 24px; bottom: 60px; }
  .v3 .hud__bottom { left: auto; right: 20px; top: 40px; bottom: auto; width: min(440px, calc(100% - 40px)); align-items: flex-end; } /* 30/10 : tablette en portrait, la rangée des facettes ne dépasse plus à gauche */
  .v3 .hud__line { display: none; }
  .v3 .hud__facets { justify-content: flex-end; }
  .v3 .orbit-controls { top: auto; bottom: 18px; right: 24px; }
  .v3 .intro { display: none; }
  .v3 .conversation, .v3 #stage.started .conversation { margin-top: clamp(14px, 3dvh, 30px); }
}
/* téléphone : le portrait reste visible au milieu des facettes. Les cartes se réduisent à leur titre (le texte
   se lit au toucher), le réglage du zoom passe sur le bord droit, en colonne, hors du visage. */
@media (max-width: 900px) {
  .v3 .has-profile #orbit .card { width: 148px; padding: 6px 8px 7px; }
  .v3 .has-profile #orbit .card .cat { font-size: 8px; padding: 1px 5px; margin-bottom: 4px; }
  .v3 .has-profile #orbit .card h3 { font-size: 14px; line-height: 1.05; margin: 0; -webkit-line-clamp: 2; max-height: 2.2em; }
  .v3 .has-profile #orbit .card p { display: none; }
  .v3 .orbit-controls { top: 96px; bottom: auto; right: 6px; }
  .v3 .orbit-controls > div { flex-direction: column; gap: 4px; }
  .v3 .orbit-controls #zoomFit, .v3 #zoomValue { display: none; }
  .v3 .orbit-controls button { width: 30px; height: 30px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
}