/* Outil · Vision du réalisateur (Director's viewfinder), id viseur : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : vr-
   À gauche : la zone fixe (3:2) avec la vidéo de la caméra (agrandie de focale ÷ natif), le cadre au format choisi (le
   reste assombri, la grille des tiers, la focale écrite) ; avant la caméra, un message et « Allumer la caméra » ; l'info ;
   Photo et le lien vers Focale et netteté. À droite : focale (les plus larges que l'appareil grisées), cadre, tiers,
   caméra de l'appareil. */
.vr .outil-fixe { align-items: stretch; }
.vr-zone { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #0a0908; box-shadow: inset 0 0 0 1px var(--filet-doux);
  display: grid; place-items: center; }
.vr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; transition: transform .35s var(--courbe); }
.vr-cadre { position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(242, 240, 235, .85), 0 0 0 2000px rgba(10, 9, 8, .62); transition: width .35s var(--courbe), height .35s var(--courbe); }
.vr-tiers { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(242, 240, 235, .35) calc(33.33% - .5px), rgba(242, 240, 235, .35) calc(33.33% + .5px), transparent calc(33.33% + .5px),
    transparent calc(66.66% - .5px), rgba(242, 240, 235, .35) calc(66.66% - .5px), rgba(242, 240, 235, .35) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(0deg, transparent calc(33.33% - .5px), rgba(242, 240, 235, .35) calc(33.33% - .5px), rgba(242, 240, 235, .35) calc(33.33% + .5px), transparent calc(33.33% + .5px),
    transparent calc(66.66% - .5px), rgba(242, 240, 235, .35) calc(66.66% - .5px), rgba(242, 240, 235, .35) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.vr-sans-tiers .vr-tiers { display: none; }
.vr-legende { position: absolute; left: 8px; bottom: 6px; font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--papier); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.vr-attente { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: #0a0908; text-align: center; }
.vr-attente[hidden] { display: none; }
.vr-attente p { margin: 0; max-width: 34ch; font: var(--valeur); line-height: 1.6; letter-spacing: .06em; color: var(--texte2); }
.vr-attente .pastille { cursor: pointer; }
.vr-attente .pastille:hover { translate: none; }
.vr-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.vr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vr-actions .pastille { cursor: pointer; }
.vr-actions .pastille:hover { translate: none; }
.vr-actions .pastille:disabled { opacity: .3; cursor: default; }
.vr-focales button { padding-inline: 2px; }
.vr .seg button:disabled { opacity: .25; cursor: default; }
@media (max-width: 559px) { .vr-zone { aspect-ratio: 4 / 5; } }

/* ---------- Plein écran (pensé pour le téléphone) : la zone couvre tout l'écran, les commandes par-dessus l'image ---------- */
.vr-commandes { display: none; }
html.vr-plein-ouvert .vue { overflow: hidden !important; }
.vr-plein .vr-zone, .vr-zone:fullscreen { position: fixed; inset: 0; z-index: 200; width: 100vw; height: 100dvh; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #000; }
.vr-plein .vr-commandes, .vr-zone:fullscreen .vr-commandes { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vr-commandes > * { pointer-events: auto; }
.vr-plein .vr-attente { background: #000; }
.vr-plein .vr-legende { display: none; }
.vr-rond { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 9, 8, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--papier); box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .2); }
.vr-rond svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vr-fermer { top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
.vr-etat { position: absolute; top: calc(24px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(10, 9, 8, .5); font: 600 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--papier); white-space: nowrap; }
/* Les focales : une colonne à droite (en paysage, sous le pouce) */
.vr-pile { position: absolute; right: calc(12px + env(safe-area-inset-right)); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 6px; }
.vr-pile button, .vr-bas button { min-width: 46px; height: 34px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; font: 600 12px/1 var(--mono); color: var(--papier);
  background: rgba(10, 9, 8, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .18); }
.vr-pile button[aria-pressed="true"], .vr-bas button[aria-pressed="true"] { background: var(--papier); color: var(--noir); box-shadow: none; }
.vr-pile button:disabled { opacity: .3; cursor: default; }
/* Les cadres et la grille : une rangée en bas, au centre */
.vr-bas { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; gap: 6px; max-width: calc(100% - 150px); overflow-x: auto; scrollbar-width: none; }
.vr-bas::-webkit-scrollbar { display: none; }
.vr-bas button { flex: none; }
/* Le déclencheur : un rond blanc, à droite en bas (portrait : au-dessus de la rangée) */
.vr-declencheur { position: absolute; right: calc(76px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; background: none; box-shadow: inset 0 0 0 3px var(--papier); display: grid; place-items: center; }
.vr-declencheur i { width: 48px; height: 48px; border-radius: 50%; background: var(--papier); transition: transform .12s; }
.vr-declencheur:active i { transform: scale(.88); }
.vr-declencheur:disabled { opacity: .3; cursor: default; }
/* L'interface en portrait (9:16) : focales en colonne au-dessus du déclencheur, au centre en bas */
.vr-plein.vr-ui-portrait .vr-pile { top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); translate: 0; }
.vr-plein.vr-ui-portrait .vr-declencheur { right: 50%; translate: 50% 0; bottom: calc(64px + env(safe-area-inset-bottom)); }
.vr-plein.vr-ui-portrait .vr-bas { max-width: calc(100% - 28px); }
/* L'écran est dans l'autre sens que l'interface (iPhone) : les commandes tournent d'un quart de tour, la vidéo non.
   Le bord gauche des commandes tournées est le haut de l'écran (l'encoche) ; le bord droit, le bas (la barre d'accueil). */
.vr-plein.vr-tourne .vr-commandes { inset: auto; left: 50%; top: 50%; width: 100dvh; height: 100vw; translate: -50% -50%; rotate: 90deg; }
.vr-plein.vr-tourne .vr-fermer { top: 14px; left: calc(14px + env(safe-area-inset-top)); }
.vr-plein.vr-tourne .vr-etat { top: 22px; }
.vr-plein.vr-tourne .vr-pile { right: calc(12px + env(safe-area-inset-bottom)); }
.vr-plein.vr-tourne .vr-bas { bottom: 14px; }
.vr-plein.vr-tourne .vr-declencheur { right: calc(76px + env(safe-area-inset-bottom)); bottom: 14px; }
.vr-plein.vr-tourne.vr-ui-portrait .vr-declencheur { right: 50%; bottom: 64px; }
.vr-plein.vr-tourne.vr-ui-portrait .vr-pile { bottom: 150px; }