/* =========================================================
   Page « Nos spectacles »
   ========================================================= */

/* ---------- Barre de filtres ---------- */
.filtres {
  display: grid; gap: 1rem; align-items: end;
  padding: 1.25rem 1.5rem; margin-bottom: 1rem;
  background: var(--grain), rgba(20, 6, 8, .7);
  border: 1px solid rgba(212, 175, 55, .5); border-radius: var(--rayon);
}
@media (min-width: 640px) { .filtres { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .filtres { grid-template-columns: 2fr 1fr 1fr auto; } }
.filtres__effacer { min-height: 48px; }
.filtres__resultat { margin-bottom: 1.5rem; font-family: var(--police-sous-titre); font-style: italic; opacity: .9; }
.liste-vide { text-align: center; font-family: var(--police-sous-titre); font-style: italic; font-size: 1.2rem; margin: 2rem auto; }

/* ---------- Carte spectacle ---------- */
.spectacle .carte__media { aspect-ratio: 16 / 9; }
.spectacle .carte__media iframe { width: 100%; height: 100%; border: 0; }
.spectacle__type {
  align-self: flex-start; padding: .15rem .65rem; border-radius: 999px;
  background: var(--rouge); color: var(--ivoire);
  font-family: var(--police-titre-2); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.spectacle--cible { animation: surbrillance 2s ease 1; }
@keyframes surbrillance { 30% { box-shadow: 0 0 0 4px var(--or), 0 0 40px rgba(212, 175, 55, .6); } }

/* Description repliée sur 4 lignes */
.spectacle__description { color: var(--encre); }
.spectacle__description p + p { margin-top: .5rem; }
.spectacle__description ul, .spectacle__description ol { padding-left: 1.25rem; }
.spectacle__description.replie { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lire-suite { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--rouge); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Bouton lecture vidéo (façade YouTube) ---------- */
.lecture {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: linear-gradient(transparent 50%, rgba(20, 6, 8, .65)); border: 0; cursor: pointer;
}
.lecture__icone {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--degrade-or); box-shadow: 0 0 0 4px rgba(20, 6, 8, .5), 0 8px 24px rgba(0, 0, 0, .6);
  transition: transform var(--transition);
}
.lecture__icone::after { /* triangle */
  content: ""; margin-left: 6px;
  border-left: 22px solid var(--noir); border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.lecture:hover .lecture__icone, .lecture:focus-visible .lecture__icone { transform: scale(1.1); }
.lecture__mention {
  position: absolute; left: .75rem; bottom: .5rem; z-index: 2; pointer-events: none;
  font-size: .8rem; color: var(--ivoire); text-shadow: 0 1px 3px #000;
}

/* ---------- Partage ---------- */
.spectacle__actions { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.partage { position: relative; }
.partage summary { list-style: none; }
.partage summary::-webkit-details-marker { display: none; }
.partage__menu {
  position: absolute; left: 0; bottom: calc(100% + .5rem); z-index: 5; min-width: 210px;
  display: grid; padding: .5rem; background: var(--noir-2); border: 1px solid var(--or); border-radius: 8px; box-shadow: var(--ombre);
}
.partage__menu a, .partage__menu button {
  display: block; padding: .6rem .75rem; border-radius: 4px; text-align: left;
  color: var(--ivoire) !important; text-decoration: none; background: none; border: 0; cursor: pointer; font-size: .95rem;
}
.partage__menu a:hover, .partage__menu button:hover { background: var(--rouge-velours); }

/* Spectacle tout juste passé, vidéo pas encore ajoutée */
.spectacle__bientot {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
  padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  color: var(--ivoire); background: rgba(20, 6, 8, .8); border: 1px solid var(--or);
}

/* Message « aucun spectacle » sur toute la largeur */
.grille > .liste-vide { grid-column: 1 / -1; }

/* Spectacle encore en tournée : lien vers ses prochaines dates */
.spectacle__encore { margin: .25rem 0 .5rem; font-weight: 700; }
.spectacle__encore a { color: var(--rouge); }