/* Netdev – Vidéo PeerTube */

/*
 * Valeurs par défaut, sans spécificité grâce à :where() : n'importe quelle règle du site les remplace,
 * par exemple dans Elementor > Réglages du site > CSS personnalisé :
 *   .ndv-elementor { --ndv-bouton-fond: #f1d840; --ndv-bouton-texte: #000; }
 */
:where(.ndv-elementor) {
  --ndv-bouton-fond: rgba(0, 0, 0, .55);
  --ndv-bouton-fond-survol: rgba(0, 0, 0, .78);
  --ndv-bouton-texte: #fff;
  --ndv-bouton-texte-survol: var(--ndv-bouton-texte);
  --ndv-bouton-taille: 2.75rem;
  --ndv-bouton-ecart: 1rem;
  --ndv-bouton-rayon: 999px;
  --ndv-bouton-bordure: 0;
  --ndv-bouton-ombre: none;
  --ndv-focus: #fff;
  --ndv-icone-taille: 45%;
  --ndv-icone-epaisseur: 2;
  --ndv-icone-remplissage: none;
  --ndv-icone-ornement: inline;
  --ndv-z-commandes: 2;
}

/* La vidéo couvre tout le conteneur, quel que soit son format (Elementor la dimensionne en 16:9). */
.elementor .elementor-background-video-hosted.ndv-media {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  transform: none;
  object-fit: cover;
}

.ndv-elementor > .ndv__commandes {
  position: absolute;
  inset: var(--ndv-commandes-inset, auto var(--ndv-bouton-ecart) var(--ndv-bouton-ecart) auto);
  z-index: var(--ndv-z-commandes);
  display: flex;
  gap: .5rem;
  pointer-events: none;
}

.ndv-elementor > .ndv__commandes[hidden] {
  display: none;
}

.ndv-elementor .ndv__bouton {
  inline-size: var(--ndv-bouton-taille);
  block-size: var(--ndv-bouton-taille);
  min-inline-size: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: var(--ndv-bouton-bordure);
  border-radius: var(--ndv-bouton-rayon);
  box-shadow: var(--ndv-bouton-ombre);
  background: var(--ndv-bouton-fond);
  color: var(--ndv-bouton-texte);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .18s ease, color .18s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Le thème et le kit Elementor stylent souvent button:hover et button:focus : on garde la main. */
.ndv-elementor .ndv__bouton:focus {
  border: var(--ndv-bouton-bordure);
  background: var(--ndv-bouton-fond);
  color: var(--ndv-bouton-texte);
}

.ndv-elementor .ndv__bouton:hover {
  border: var(--ndv-bouton-bordure);
  background: var(--ndv-bouton-fond-survol);
  color: var(--ndv-bouton-texte-survol);
}

.ndv-elementor .ndv__bouton:focus-visible {
  outline: 2px solid var(--ndv-focus);
  outline-offset: 2px;
}

.ndv-elementor .ndv__bouton[aria-busy="true"] {
  cursor: progress;
  opacity: .7;
}

.ndv-elementor .ndv__bouton svg {
  inline-size: var(--ndv-icone-taille);
  block-size: var(--ndv-icone-taille);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-width: clamp(1, var(--ndv-icone-epaisseur), 3.5);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ndv-elementor .ndv__bouton svg .ndv__plein {
  fill: var(--ndv-icone-remplissage);
}

.ndv-elementor .ndv__bouton svg .ndv__orne {
  display: var(--ndv-icone-ornement);
}

.ndv-elementor .ndv__bouton .ndv__icone--actif {
  display: none;
}

.ndv-elementor .ndv__bouton[aria-pressed="true"] .ndv__icone--actif {
  display: block;
}

.ndv-elementor .ndv__bouton[aria-pressed="true"] .ndv__icone--inactif {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ndv-elementor .ndv__bouton {
    transition: none;
  }
}