/*
 * Les listes d'événements en lignes (Mathieu, 2026-10-16 : « pour regarder les shows plus rapidement ») : une soirée par ligne,
 * une petite vignette, le titre, la salle, le prix. Les boutons « Affiches » et « Lignes » (partials/simple_view_toggle) passent
 * de l'une à l'autre sur place ; simple.js met body.vue-lignes à la place de body.affiches-rangees et retient le choix.
 * Chargé après les feuilles de design et affiches.css.
 */

/* — Les deux boutons : à droite de la rangée des outils (accueil d'une zone) ou au-dessus d'une liste, de l'allure des
   boutons des périodes (« 7 prochains jours ») ; aria-pressed tient lieu de .is-on — */
.svue { display: flex; flex-wrap: wrap; gap: var(--space-2); width: fit-content; margin: 0 0 var(--space-4) auto; }
.stools .svue { margin: 0 0 var(--space-3) auto; }
.svue[hidden] { display: none; }
.svue__btn { font: inherit; cursor: pointer; }
.svue__btn[aria-pressed="true"] { background: var(--color-accent); color: var(--color-ground); }
.svue__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
body[data-design="washi"] .svue__btn[aria-pressed="true"] { background: none; color: var(--color-accent-text); border-bottom: 2px solid var(--acc); }

/* — Les lignes — */
body.simple.vue-lignes {
  .shour { font-size: 1.5rem; margin: var(--space-6) 0 var(--space-2); }
  .shour--none { font-size: 1.125rem; }
  .sgroup + .shour { margin-top: var(--space-3); }

  .slist { display: block; border-top: 1px solid var(--color-border); }
  .slist > li { max-width: none; }
  .sev {
    position: relative; display: grid; align-items: center; column-gap: var(--space-4); row-gap: 1px;
    grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 16rem) auto;
    grid-template-areas: "img when where foot" "img title where foot" "img artists tags marks";
    padding: 8px 6px; margin: 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: none; color: inherit; min-height: 0;
  }
  .sev:hover { background: var(--color-surface-2); }
  .sev__body { display: contents; }

  /* La vignette : petite, toujours au même format ; l'image d'une salle entière sur son fond, une soirée sans image en pastille de sa couleur. */
  .sev__img { grid-area: img; align-self: center; width: 2.75rem; height: 3.5rem; flex: none; padding: 0; border-radius: var(--radius-sm, 4px); overflow: hidden; background: var(--color-surface-2); }
  .sev__img img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
  .sev--lieu .sev__img { padding: 3px; box-sizing: border-box; }
  .sev--lieu .sev__img img { object-fit: contain; }
  .sev__img--none { display: block; padding: 0; background: var(--dbg, var(--color-surface-2)); }
  .sev__img--none span { display: none; }

  .sev__when { grid-area: when; position: static; width: auto; margin: 0; text-align: left; font-size: 0.75rem; line-height: 1.3; }
  .sev__title { grid-area: title; margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; letter-spacing: normal; }
  .sev__artists { grid-area: artists; margin: 0; font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sev__meta { grid-area: where; align-self: center; margin: 0; font-size: 0.875rem; line-height: 1.3; }
  .stags { grid-area: tags; margin: 0; gap: 4px; overflow: hidden; max-height: 1.5rem; }
  .stags .stag { font-size: 0.6875rem; padding-block: 1px; }
  .sev__foot { grid-area: foot; justify-self: end; margin: 0; padding: 0; gap: 4px var(--space-3); font-size: 0.8125rem; justify-content: flex-end; }
  .sev__actions { grid-area: marks; justify-self: end; margin: 0; gap: 4px; }
  .sev__actions .sev__tickets { margin-left: 0; }
  .sev__counts { display: none; }
  .smark--mini { min-height: 26px; padding: 0 9px; font-size: 0.75rem; }

  /* Au téléphone : le titre prend la largeur, la salle passe dessous, les genres se taisent. */
  @media (max-width: 720px) {
    .sev {
      grid-template-columns: 2.5rem minmax(0, 1fr) auto; column-gap: var(--space-3);
      grid-template-areas: "img when foot" "img title foot" "img artists artists" "img where where" "img marks marks";
    }
    .sev__img { width: 2.5rem; height: 3.25rem; align-self: start; }
    .sev__title { font-size: 1rem; }
    .sev__meta { font-size: 0.8125rem; color: var(--color-text-2); }
    .stags { display: none; }
    .sev__actions { justify-self: start; margin-top: 4px; }
  }
}