/* Graphen Studio — card vidéo paysage
   Fenêtre 16/9 avec commandes interactives. */

/* La section ne porte ni transformation ni z-index : elle ne forme donc pas de
   contexte d'empilement, et ses deux calques se rangent parmi les visuels. La
   fenêtre prend la profondeur de la card ; le calque des commandes, posé au
   même endroit par archive.js, passe au-dessus de tous les visuels — un
   visuel peut couvrir le film, jamais ses boutons. */
.vv {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 900px;
  pointer-events: none;
}

.vv-fenetre,
.vv-calque {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.vv-fenetre {
  overflow: hidden;
  background: #000;
  pointer-events: auto;
}
.vv-calque { pointer-events: none; }
/* Card presque transparente (au fond, ou juste avant de passer la caméra) :
   ni la fenêtre ni ses boutons ne captent les clics. */
.vv-fenetre.is-inerte { pointer-events: none; }
.vv .vv-calque.is-inerte .vv-commandes { visibility: hidden; }

.vv-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.vv-commandes {
  position: absolute;
  z-index: 2;
  left: 26px;
  bottom: 4.63%;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50%);
  transition: opacity .35s var(--ease-out);
}
.vv[data-proche] .vv-commandes { opacity: 1; visibility: visible; }

.vv-plein-ecran {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  padding: 0;
  cursor: pointer;
  color: #fff;
  pointer-events: auto;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .55)) drop-shadow(0 2px 13px rgb(0 0 0 / .35));
  transition: transform .15s var(--ease-out);
}
.vv-plein-ecran:hover,
.vv-plein-ecran:focus-visible { transform: scale(1.08); }
.vv-son svg,
.vv-plein-ecran svg { width: 21px; height: 21px; }
.vv-plein-ecran svg { fill: none; stroke: currentColor; }

.vv-plein-ecran .vv-reduire { display: none; }
.vv[data-plein-ecran] .vv-plein-ecran .vv-agrandir { display: none; }
.vv[data-plein-ecran] .vv-plein-ecran .vv-reduire { display: block; }

/* Le bouton de son : l'icône seule, de la même taille que l'autre commande.
   L'égaliseur s'anime quand le son passe, et se fige derrière sa barre oblique
   en muet. */
.vv-son {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .55)) drop-shadow(0 2px 13px rgb(0 0 0 / .35));
  transition: transform .15s var(--ease-out);
}
.vv-son:hover, .vv-son:focus-visible { transform: scale(1.08); outline: none; }

/* Égaliseur : trois barres animées et la barre oblique qui dit « coupé ». Il est
   dessiné dans le même cadre de 24 que l'autre commande et rendu à la même
   taille, sans quoi les deux icônes ne pèsent pas pareil à l'œil. */
/* Un peu plus grand que l'autre commande (28 px contre 21) : ses barres fines
   paraissaient plus petites que le cadre du plein écran. */
.vv-son svg { width: 28px; height: 28px; fill: currentColor; }

.vv-barre {
  transform-box: fill-box;
  transform-origin: center;
  animation: vv-barre-a 987ms ease-in-out infinite alternate;
}
.vv-barre:nth-of-type(2) { animation-name: vv-barre-b; animation-delay: 233ms; }
.vv-barre:nth-of-type(3) { animation-delay: 466ms; }
.vv[data-muet] .vv-barre { animation-play-state: paused; }
@keyframes vv-barre-a { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes vv-barre-b { from { transform: scaleY(1); } to { transform: scaleY(.4); } }

.vv-coupe {
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.vv[data-muet] .vv-coupe { display: block; }

/* ---------- Plein écran ----------
   C'est la section entière qui passe dans la couche du dessus, pour emmener
   fenêtre et commandes ensemble. Les deux calques y quittent la pose d'archive.js
   (d'où les !important, contre ses styles en ligne) et les commandes reprennent
   leur taille de base. */

.vv:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.vv:fullscreen > .vv-fenetre,
.vv:fullscreen > .vv-calque {
  transform: none !important;
  opacity: 1 !important;
}
.vv:fullscreen .vv-video { object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .vv-commandes, .vv-son, .vv-plein-ecran { transition: none; }
  .vv-plein-ecran:hover, .vv-plein-ecran:focus-visible,
  .vv-son:hover, .vv-son:focus-visible { transform: none; }
  .vv-barre { animation: none; }
}