/* ══════════════════════════════════════════════════════════════
   QUATRE V2 — COMPOSANTS PARTAGÉS (design system)

   Source de vérité UNIQUE des contrôles posés sur les médias.
   Règle DS : un composant visuel réutilisé (badge, bouton, pastille)
   vit ICI, une seule fois. Les CSS de page ne définissent QUE le
   positionnement (right/bottom/taille contextuelle) — jamais une
   copie du style. Le lint de build (build.mjs → dsLint) vérifie que
   les pages générées portent bien ces composants.

   .q-glass  — pastille ronde verre dépoli (badge zoom, play/pause…)
   .q-toggle — bouton play/pause : swap des icônes via .is-paused
               (markup : svg.ico-pause + svg.ico-play, cf. build.mjs
               PLAY_PAUSE_BTN et le toggle du mur de photos expertise)
   ═════════════════════════════════════════════════════════════ */

.q-glass {
  width: clamp(36px, 2.78vw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgba(17, 17, 17, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.3s var(--ease-out);
}

.q-glass svg {
  width: 45%;
  height: 45%;
}

/* En bouton autonome : hover/focus → blanc plein (les badges DANS un
   bouton parent héritent du hover de ce parent, règle dans la page) */
button.q-glass {
  cursor: pointer;
}

button.q-glass:hover,
button.q-glass:focus-visible {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* ── Toggle play/pause ── */
.q-toggle .ico-play {
  display: none;
}

.q-toggle.is-paused .ico-pause {
  display: none;
}

.q-toggle.is-paused .ico-play {
  display: block;
}