/*
 * Les affiches dans les listes d'événements : rangées justifiées (la façon 37 de l'essai d'octobre 2026, retenue par Mathieu
 * le 2026-10-15). Toutes les cartes d'une rangée ont la même hauteur, chacune à la largeur de son affiche. Chaque carte
 * (partials/simple_event) porte son format : --ar (largeur sur hauteur) et .sev--affiche | --lieu (l'image de la salle) | --sans.
 * Chargé après les feuilles de design ; affiches.js donne le fichier en pleine taille quand la vignette ne suffit plus.
 */
body.simple.affiches-rangees {
  --aff-h: 22rem;

  /* Les formats extrêmes (bannière, « story ») sont ramenés dans des bornes : le cadre ne rogne alors qu'un peu. */
  .sev { --ar2: clamp(0.56, var(--ar, 1.5), 2.4); }
  .sev__img { position: relative; display: grid; height: auto; overflow: hidden; background: none; }
  .sev__img img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
  .sev--affiche .sev__img { aspect-ratio: var(--ar2); }

  /* L'image de la salle (logo ou photo) n'est pas une affiche : entière, sur un fond, elle remplit son cadre avec une marge
     tout autour (Mathieu, 2026-10-15 : un peu plus grosse, jamais recadrée). */
  .sev--lieu .sev__img { place-items: center; padding: var(--space-3); box-sizing: border-box; background: var(--fond, var(--color-surface-2)); }
  .sev--lieu .sev__img img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
  .sev--sans .sev__img { display: flex; background: var(--dbg, var(--color-surface-2)); }

  /* L'heure revient dans la carte, l'image est au-dessus du texte. */
  .sev { flex-direction: column; gap: var(--space-3); padding: 0; border: 0; min-width: 0; }
  .sev__img { flex: none; width: 100%; }
  .sev__when { position: static; width: auto; text-align: left; font-size: 0.875rem; }
  .sev__title { font-size: 1.125rem; line-height: 1.25; }
  .sev--lieu .sev__img { height: 9.5rem; }
  /* Sans image : la carte devient une tuile de la couleur de sa discipline. */
  .sev--sans { padding: var(--space-4); background: var(--dbg, var(--color-surface-2)); color: var(--dink, var(--color-ink)); min-height: 9rem; }
  .sev--sans .sev__img { display: none; }
  .sev--sans .sev__title { font-size: 1.375rem; }
  .sev--sans :is(.sev__title a, .sev__meta a, .sev__when, .sev__artists, .sev__price, .sev__tickets, .muted) { color: inherit; }
  .sev--sans .stags .stag:not(.stag--disc) { color: inherit; }

  /* Les rangées. Une rangée ne s'étire pas au-delà d'une fois et demie sa hauteur : sinon une affiche seule deviendrait géante. */
  .slist { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-4); }
  .slist::after { content: ""; flex: 100000 1 0; }
  .sev { flex: calc(var(--ar2) * 100) 1 calc(var(--ar2) * var(--aff-h)); max-width: calc(var(--ar2) * var(--aff-h) * 1.5); box-sizing: border-box; }
  .sev--lieu { --ar: 0.9; }
  .sev--sans { --ar: 0.85; }
  /* Au téléphone, un peu moins hautes. */
  @media (max-width: 560px) { .slist { --aff-h: 17rem; } }
}