/*
 * CONTRÔLES PAR-DESSUS LA VIDÉO — roue crantée de qualité, plein écran.
 * Partagé par la diffusion (atelier.php) et la rediffusion (atelier-replay.php).
 * Logique : assets/video-qualite.js, assets/video-plein-ecran.js.
 * Suppose un conteneur .video-wrapper en position: relative.
 */
.video-ctrl-btn {
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: rgba(0,0,0,.55); color: #fff; font-size: 20px; line-height: 38px;
    display: flex; align-items: center; justify-content: center;
}
.video-ctrl-btn:hover, .video-ctrl-btn[aria-expanded="true"] { background: rgba(0,0,0,.8); }

/* Roue crantée (présente seulement si une vidéo HD est réglée) */
.qualite { position: absolute; top: 10px; right: 10px; z-index: 3; }
.qualite-menu {
    position: absolute; top: 44px; right: 0; min-width: 170px; padding: 6px;
    background: rgba(0,0,0,.85); border-radius: 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.qualite-menu[hidden] { display: none; }
.qualite-menu button {
    background: none; border: none; color: #fff; text-align: left; cursor: pointer;
    padding: 8px 10px; border-radius: 6px; font-size: .9rem;
}
.qualite-menu button:hover { background: rgba(255,255,255,.12); }
.qualite-menu button[aria-checked="true"] { color: #ffbf66; font-weight: 700; }
.qualite-menu button[aria-checked="true"]::before { content: '✓ '; }

/* Plein écran sur le CONTENEUR : roue et bouton son restent visibles.
   Deux règles séparées : un sélecteur inconnu invaliderait toute une liste. */
.plein-ecran { position: absolute; right: 10px; bottom: 10px; z-index: 3; }
.video-wrapper:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; }
.video-wrapper:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; }