/* Lecteur video de chantier, charge a l'entree dans le viewport.
   max-width ajoute le 30/08 : en carre (aspect-ratio 1/1) sans limite de
   largeur, la video remplissait tout le .container (jusqu'a 1180px) sur
   grand ecran -- bug reel signale par Jean sur peintre-mios.html, present
   a l'identique sur toutes les pages utilisant ce composant partage.
   520px = taille d'un post video Instagram, coherent avec le bouton son
   "modele Instagram" deja documente plus bas. */
.project-video {
  max-width: 520px;
  margin: clamp(1.75rem, 4vw, 3rem) auto;
}

.project-video__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 8px solid var(--JS_Blanc-casse, #FBF9F5);
  border-radius: 16px;
  background: var(--JS_Vert-profond, #17352B);
  box-shadow: 0 20px 48px rgba(23, 53, 43, 0.18);
}

.project-video__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bouton son, modele Instagram : discret, coin bas-droit, over la video. */
.project-video__sound-toggle {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(23, 53, 43, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.15s ease;
}

.project-video__sound-toggle:hover,
.project-video__sound-toggle:focus-visible {
  background: rgba(23, 53, 43, 0.8);
}

.project-video__sound-toggle .icon-unmuted {
  display: none;
}

.project-video__sound-toggle[aria-pressed="true"] .icon-muted {
  display: none;
}

.project-video__sound-toggle[aria-pressed="true"] .icon-unmuted {
  display: block;
}

.project-video figcaption {
  max-width: 68ch;
  margin: 0.85rem auto 0;
  color: var(--JS_Texte-principal, #1F3129);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 640px) {
  .project-video__media {
    border-width: 5px;
    border-radius: 12px;
  }
}