/* Page live. Les lignes (.lignes, .ligne__*), les en-têtes de module, la vidéo au clic
   (.video__*) et le module booking (.contact-clair) viennent de site.css. */

.live-tete__titre { font-size: var(--taille-xl); letter-spacing: 0.12em; line-height: 1.35; max-width: 28ch; }

/* Formats : la ligne porte le nom et la durée, le texte se lit dessous */
.formats .ligne { padding-block: var(--e-4); }
.formats .ligne__nom { font-size: var(--taille-l); margin: 0; }
@media (min-width: 52rem) {
  /* Le texte, la disponibilité et le matériel s'empilent dans la troisième colonne, en lignes successives */
  .formats .ligne { grid-template-columns: 3rem 16rem minmax(0, 1fr) 8rem; grid-auto-rows: auto; }
  .formats .ligne__texte { grid-column: 3; grid-row: 1; margin: 0; }
  .formats .ligne__valeur { grid-column: 4; grid-row: 1; }
  .formats .format__disponible { grid-row: 2; margin-top: var(--e-3); }
  .formats .format__materiel { grid-row: 3; margin-top: var(--e-2); }
}

/* Vidéos : la première en pleine largeur, les autres par deux sur grand écran */
.live-videos__grille { display: grid; gap: var(--e-6) var(--e-5); }
.live-videos__note { margin: var(--e-5) 0 0; color: var(--pierre); font-size: var(--taille-s); }
@media (min-width: 52rem) {
  .live-videos__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-videos__grille > :first-child { grid-column: 1 / -1; }
}

/* Dates : un tableau date, événement, lieu, pays. Sur téléphone le lieu passe sous l'événement. */
.dates__liste { margin: 0; padding: 0; list-style: none; }
.dates__entete, .dates__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 2rem;
  grid-template-areas: "quand quoi pays" ". ou .";
  column-gap: var(--e-3);
  align-items: baseline;
}
.dates__entete {
  margin: 0;
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--bronze);
  color: var(--pierre);
  font-size: var(--taille-xs);
  letter-spacing: var(--chasse-libelle);
  text-transform: uppercase;
}
.dates__entete .dates__ou { display: none; }
.dates__item { padding-block: var(--e-3); border-bottom: 1px solid var(--filet); }
.dates__quand { grid-area: quand; color: var(--pierre); font-size: var(--taille-s); }
.dates__quoi { grid-area: quoi; font-weight: 600; }
.dates__ou { grid-area: ou; color: var(--pierre); font-size: var(--taille-s); text-transform: uppercase; letter-spacing: var(--chasse-libelle); }
.dates__pays { grid-area: pays; color: var(--pierre); font-size: var(--taille-s); text-align: right; }
.dates__entete > :nth-child(1) { grid-area: quand; }
.dates__entete > :nth-child(2) { grid-area: quoi; }
@media (min-width: 40rem) {
  .dates__entete, .dates__item {
    grid-template-columns: 7rem minmax(0, 1fr) 10rem 3rem;
    grid-template-areas: "quand quoi ou pays";
  }
  .dates__entete .dates__ou { display: block; }
}

/* En-tête : le titre et le Booker, la photo de scène à côté sur grand écran */
.live-tete__grille { display: grid; gap: var(--e-6); }
.live-tete__photo { margin: 0; }
.live-tete__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--rayon); }
.live-tete__photo figcaption { margin-top: var(--e-3); }
@media (max-width: 51.99rem) { .live-tete__photo img { aspect-ratio: 1; } }
@media (min-width: 52rem) {
  .live-tete__grille { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); gap: var(--e-7); align-items: center; }
}

/* Disponibilité et matériel d'un format, sous son texte ; le paragraphe « à venir » clôt la liste */
.format__disponible { color: var(--ivoire); font-family: var(--mono); font-size: var(--taille-xs); text-transform: uppercase; letter-spacing: var(--chasse-libelle); }
.format__materiel { font-size: var(--taille-s); }
.format__materiel .libelle, .formats__a-venir .libelle { color: var(--bronze); margin-right: var(--e-2); }
.formats__a-venir { margin: var(--e-4) 0 0; padding-top: var(--e-3); border-top: 1px solid var(--filet); color: var(--pierre); max-width: var(--largeur-texte); }