/* =========================================================
   Page « Prochaines dates » : billets de théâtre
   ========================================================= */
.programme { max-width: 980px; margin-inline: auto; }
.programme__liste { list-style: none; padding: 0; display: grid; gap: 1.75rem; }
.programme__liste > li { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.programme__vide { text-align: center; font-family: var(--police-sous-titre); font-style: italic; font-size: 1.25rem; margin-inline: auto; }

/* ---------- Billet ---------- */
.billet {
  position: relative; display: grid; grid-template-columns: 1fr;
  color: var(--encre);
  background: var(--grain), radial-gradient(ellipse at 20% 10%, #fdf6e6, var(--ivoire) 55%, #e4cf9f);
  /* Bords dentelés à gauche et à droite */
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 18px repeat-y,
    radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 18px repeat-y;
  mask:
    radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 18px repeat-y,
    radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 18px repeat-y;
}
@media (min-width: 760px) { .billet { grid-template-columns: 150px 1fr 230px; } }

/* Bloc date */
.billet__date {
  display: grid; place-content: center; justify-items: center; gap: .1rem; padding: 1.25rem 1rem;
  background: var(--grain), var(--velours); color: var(--ivoire); text-align: center;
  border-bottom: 2px solid var(--or);
}
@media (min-width: 760px) { .billet__date { border-bottom: 0; border-right: 2px solid var(--or); } }
.billet__jour-semaine { font-family: var(--police-sous-titre); font-style: italic; text-transform: capitalize; }
.billet__jour { font-family: var(--police-titre); font-size: 3rem; line-height: 1; color: var(--or); text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.billet__mois { font-family: var(--police-titre-2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.billet__heure { margin-top: .35rem; padding: .1rem .6rem; border: 1px solid var(--or); border-radius: 999px; font-weight: 700; }

/* Informations */
.billet__infos { padding: 1.5rem 1.75rem; display: grid; gap: .45rem; align-content: center; }
.billet__titre { font-family: var(--police-titre); color: var(--rouge); font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.billet__lieu { font-family: var(--police-sous-titre); font-style: italic; color: #5a3a2a; }
.billet__prix { font-weight: 700; }

/* Talon détachable */
.billet__talon {
  position: relative; display: grid; gap: .75rem; align-content: center; justify-items: stretch;
  padding: 1.5rem 1.75rem; border-top: 2px dashed var(--or-fonce);
}
@media (min-width: 760px) { .billet__talon { border-top: 0; border-left: 2px dashed var(--or-fonce); } }
.billet__talon .badge { justify-self: center; }
.billet__talon .btn { width: 100%; }
.billet__talon .point-vente { text-align: center; font-size: .95rem; }

/* Tampon « Complet » */
.billet--complet::after {
  content: "Complet"; position: absolute; top: 50%; left: 50%; z-index: 2; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-14deg);
  padding: .2rem 1rem; border: 4px double var(--rouge); border-radius: 6px;
  font-family: var(--police-titre); font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--rouge);
  opacity: .55; letter-spacing: .1em; text-transform: uppercase;
}

/* Téléphone : le tampon cacherait le titre et le lieu ; « Complet » reste indiqué dans le talon */
@media (max-width: 640px) { .billet--complet::after { display: none; } }

/* ---------- Un spectacle et ses dates à venir ---------- */
.programme-spectacle { margin-bottom: 3.5rem; scroll-margin-top: calc(var(--h-entete) + 1rem); }
.programme-spectacle__entete {
  display: grid; gap: 1.25rem; margin-bottom: 1.5rem; padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--grain), var(--ivoire); color: var(--encre);
  border: 1px solid var(--or); border-radius: var(--rayon); box-shadow: var(--ombre);
}
@media (min-width: 760px) { .programme-spectacle__entete { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.programme-spectacle__affiche { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--noir); }
.programme-spectacle__affiche img, .programme-spectacle__affiche .affiche-defaut { width: 100%; height: 100%; object-fit: cover; }
.programme-spectacle__texte { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.programme-spectacle__titre { font-family: var(--police-titre); color: var(--rouge); font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; overflow-wrap: anywhere; }
.programme-spectacle__meta { font-family: var(--police-sous-titre); font-style: italic; color: #5a3a2a; }
/* Type, synopsis replié et « Lire la suite » (mêmes règles que « Nos spectacles ») */
.programme-spectacle .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;
}
.programme-spectacle .spectacle__description { color: var(--encre); margin-top: .35rem; }
.programme-spectacle .spectacle__description p + p { margin-top: .5rem; }
.programme-spectacle .spectacle__description.replie { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.programme-spectacle .lire-suite { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--rouge); font-weight: 700; text-decoration: underline; cursor: pointer; }
/* Dans la carte d'un spectacle, chaque billet affiche la date (le titre est déjà au-dessus) */
.billet__titre--date { font-family: var(--police-titre-2); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
.billet__titre--date time { display: inline-block; }
.billet__titre--date time::first-letter { text-transform: uppercase; }