/* Galerie vidéo du Tapis Magique : six cartes 9/16 à ombre décalée (signature de la page avis),
   lecture dans une fenêtre modale au clic. Rien ne se charge avant le clic. */
.tm-galerie-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.tm-galerie { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 48rem) { .tm-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tm-galerie__carte {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; margin: 0;
  border: 0; border-radius: 1.25rem; overflow: hidden; cursor: pointer;
  background: var(--lavis-1, #EFECFC); box-shadow: .5rem .5rem 0 var(--arc-2, #58E8BF);
  transition: transform .35s cubic-bezier(.25, .8, .35, 1);
}
.tm-galerie__carte:hover, .tm-galerie__carte:focus-visible { transform: translate(-.2rem, -.2rem); }
.tm-galerie__carte:focus-visible { outline: 3px solid var(--arc-1, #6128FF); outline-offset: 4px; }
.tm-galerie__carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-galerie__voile { position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(transparent, rgba(20, 19, 18, .72)); }
.tm-galerie__lecture {
  position: absolute; top: 50%; left: 50%; width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%; background: rgba(255, 255, 255, .92);
}
.tm-galerie__lecture::after {
  content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .6rem 0 .6rem .95rem; border-color: transparent transparent transparent var(--arc-1, #6128FF);
}
.tm-galerie__titre {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1;
  font-family: var(--rf-display); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.25; color: #fff; text-align: left;
}

/* Fenêtre modale */
.tm-galerie__dialog {
  margin: auto; padding: 0; border: 0; background: transparent; color: #fff;
  width: min(calc(100% - 2rem), 24rem);
}
.tm-galerie__dialog::backdrop { background: rgba(20, 19, 18, .86); }
.tm-galerie__dialog video {
  display: block; width: 100%; height: auto; max-height: 74vh; aspect-ratio: 9 / 16;
  border-radius: 1.25rem; background: #000; object-fit: contain;
}
.tm-galerie__fermer {
  position: absolute; top: .75rem; right: .75rem; z-index: 2; padding: .4rem .9rem; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: .9rem; cursor: pointer;
}
.tm-galerie__barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.tm-galerie__nav {
  flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.2rem; cursor: pointer;
}
.tm-galerie__compteur { margin: 0; text-align: center; font-size: .9rem; line-height: 1.35; }
.tm-galerie__nom { display: block; font-family: var(--rf-display); font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) { .tm-galerie__carte { transition: none; } }
