/* ==========================================================
   NUMBER AFTER TWELVE
   SHOWS
   ========================================================== */


/* ==========================================================
   HEADER
   ========================================================== */

.inner-header {
  width: 100%;
  min-height: 115px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px clamp(20px, 4vw, 60px);
  border-bottom: 1px solid #222;
  background: #000;
}

.header-logo {
  display: block;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}

.header-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inner-nav {
  display: flex;
  align-items: center;
  gap: clamp(25px, 4vw, 60px);
}

.inner-nav a {
  position: relative;
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  transition: color 0.2s ease;
}

.inner-nav a:hover,
.inner-nav a:focus-visible,
.inner-nav a.active {
  color: #e00000;
}

.inner-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: #e00000;
}


/* ==========================================================
   PAGE
   ========================================================== */

.shows-page {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 55px 0 90px;
}


/* ==========================================================
   TITRE
   ========================================================== */

.shows-heading {
  margin-bottom: 38px;
}

.shows-heading h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(52px, 6vw, 78px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 3px;
  color: #fff;
}

.shows-title-line {
  width: 72px;
  height: 3px;
  margin-top: 14px;
  background: #e00000;
}

.shows-subtitle {
  margin: 16px 0 0;
  color: #8f8f8f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 3px;
}


/* ==========================================================
   FILTRES
   ========================================================== */

.shows-filters-section {
  margin-bottom: 55px;
}

.shows-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shows-filter {
  appearance: none;
  border: 1px solid #333;
  border-radius: 0;
  padding: 10px 16px;
  background: transparent;
  color: #aaa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.shows-filter:hover,
.shows-filter:focus-visible {
  border-color: #777;
  color: #fff;
}

.shows-filter.active {
  border-color: #e00000;
  background: #e00000;
  color: #fff;
}


/* ==========================================================
   RECHERCHE
   ========================================================== */

.shows-search-wrap {
  position: relative;
  width: min(100%, 460px);
  margin-top: 16px;
}

.shows-search {
  appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 46px 0 15px;
  border: 1px solid #333;
  border-radius: 0;
  outline: none;
  background: #090909;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.shows-search::placeholder {
  color: #666;
  opacity: 1;
}

.shows-search:hover {
  border-color: #555;
}

.shows-search:focus {
  border-color: #e00000;
  background: #0d0d0d;
}

.shows-search-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: #777;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

.shows-search-wrap:focus-within .shows-search-icon {
  color: #e00000;
}

/* Retire le bouton natif d'effacement de certains navigateurs */

.shows-search::-webkit-search-cancel-button {
  cursor: pointer;
}


/* ==========================================================
   SECTIONS
   ========================================================== */

.shows-section {
  margin-bottom: 75px;
}

.shows-section:last-child {
  margin-bottom: 0;
}

.shows-section-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.shows-section-heading h2 {
  flex-shrink: 0;
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
  color: #fff;
}

.shows-section-line {
  width: 100%;
  height: 1px;
  background: #252525;
}


/* ==========================================================
   LISTE
   ========================================================== */

.shows-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ==========================================================
   CARTE
   ========================================================== */

.show-card {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  min-height: 165px;
  overflow: hidden;
  border: 1px solid #262626;
  border-left: 3px solid #e00000;
  background: #0d0d0d;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.show-card:hover {
  border-top-color: #3a3a3a;
  border-right-color: #3a3a3a;
  border-bottom-color: #3a3a3a;
  background: #101010;
}


/* ==========================================================
   DATE
   ========================================================== */

.show-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  border-right: 1px solid #262626;
  background: #080808;
  text-align: center;
}

.show-day {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 58px;
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: 1px;
  color: #fff;
}

.show-month {
  display: block;
  margin-top: 9px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
  color: #e00000;
}

.show-year {
  display: block;
  margin-top: 7px;
  color: #666;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
}


/* ==========================================================
   CORPS DE LA CARTE
   ========================================================== */

.show-body {
  min-width: 0;
  padding: 25px 28px;
}


/* ==========================================================
   LIGNE PRINCIPALE
   4 colonnes fixes :
   1. événement
   2. avec
   3. horaires / tarifs
   4. flyer
   ========================================================== */

.show-summary {
  display: grid;

  grid-template-columns:
    minmax(230px, 1.7fr)
    minmax(160px, 1fr)
    minmax(150px, 0.8fr)
    120px;

  align-items: center;
  gap: clamp(22px, 3vw, 45px);
  width: 100%;
}

.show-primary,
.show-other-column,
.show-practical,
.show-flyer-column {
  min-width: 0;
}


/* ==========================================================
   INFOS PRINCIPALES
   ========================================================== */

.show-artist {
  margin: 0 0 6px;
  color: #e00000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 2.5px;
}

.show-event {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(27px, 3vw, 37px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1.2px;
  color: #fff;
}

.show-location {
  margin: 10px 0 0;
  color: #c7c7c7;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.3px;
}


/* ==========================================================
   AUTRES GROUPES
   ========================================================== */

.show-column-label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
}

.show-other-artists {
  margin: 0;
  color: #aaa;
  font-size: 12px;
  line-height: 1.6;
}


/* ==========================================================
   HORAIRES / TARIFS
   ========================================================== */

.show-time {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.8px;
}

.show-price {
  margin: 8px 0 0;
  color: #888;
  font-size: 11px;
  line-height: 1.5;
}


/* ==========================================================
   MINIATURE FLYER
   ========================================================== */

.show-flyer-column {
  width: 120px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.show-flyer-thumb-link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  border: 1px solid #333;
  transition:
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.show-flyer-thumb-link:hover,
.show-flyer-thumb-link:focus-visible {
  border-color: #e00000;
  opacity: 0.88;
}

.show-flyer-thumb {
  display: block;
  width: auto;
  max-width: 120px;
  max-height: 72px;
  object-fit: contain;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.show-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.show-info-button,
.show-ticket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 15px;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.show-info-button {
  appearance: none;
  border: 1px solid #3a3a3a;
  background: transparent;
  color: #aaa;
}

.show-info-button:hover,
.show-info-button:focus-visible {
  border-color: #777;
  color: #fff;
}

.show-ticket {
  border: 1px solid #e00000;
  background: #e00000;
  color: #fff;
}

.show-ticket:hover,
.show-ticket:focus-visible {
  background: transparent;
  color: #e00000;
}


/* ==========================================================
   INFOS OUVERTES
   ========================================================== */

.show-description {
  max-width: none;
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid #292929;
}

.show-description[hidden] {
  display: none;
}


/* ==========================================================
   DESCRIPTION GÉNÉRALE
   ========================================================== */

.show-description-text {
  margin: 0;
  max-width: 950px;
  color: #b8b8b8;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-line;
}


/* ==========================================================
   DÉTAIL PAR GROUPE
   ========================================================== */

.show-detail-block {
  max-width: 950px;
  padding: 20px 0;
  border-bottom: 1px solid #242424;
}

.show-detail-block:first-child {
  padding-top: 0;
}

.show-detail-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.show-detail-block h4 {
  margin: 0 0 8px;
  font-family: "Bebas Neue", sans-serif;
  color: #fff;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
}

.show-detail-block p {
  margin: 0;
  color: #aaa;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-line;
}

.show-detail-block a {
  display: inline-block;
  margin-top: 11px;
  color: #e00000;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  text-decoration: none;
}

.show-detail-block a:hover,
.show-detail-block a:focus-visible {
  text-decoration: underline;
}


/* ==========================================================
   DATES PASSÉES
   ========================================================== */

/*
  La section reste parfaitement lisible,
  mais les anciennes dates sont volontairement
  plus neutres que les dates à venir.
*/

.past-shows-section .shows-section-heading h2 {
  color: #777;
}

.past-shows-section .shows-section-line {
  background: #1c1c1c;
}

.past-show-card {
  border-color: #222;
  border-left-color: #484848;
  background: #090909;
}

.past-show-card:hover {
  border-top-color: #333;
  border-right-color: #333;
  border-bottom-color: #333;
  background: #0c0c0c;
}

.past-show-card .show-date {
  border-right-color: #222;
  background: #070707;
}

.past-show-card .show-day {
  color: #999;
}

.past-show-card .show-month {
  color: #666;
}

.past-show-card .show-year {
  color: #4f4f4f;
}

.past-show-card .show-artist {
  color: #777;
}

.past-show-card .show-event {
  color: #aaa;
}

.past-show-card .show-location {
  color: #888;
}

.past-show-card .show-column-label {
  color: #555;
}

.past-show-card .show-other-artists {
  color: #777;
}

.past-show-card .show-time {
  color: #999;
}

.past-show-card .show-price {
  color: #666;
}

.past-show-card .show-flyer-thumb-link {
  border-color: #292929;
}

.past-show-card .show-flyer-thumb {
  filter: grayscale(1);
  opacity: 0.55;
}

.past-show-card .show-info-button {
  border-color: #333;
  color: #777;
}

.past-show-card .show-info-button:hover,
.past-show-card .show-info-button:focus-visible {
  border-color: #666;
  color: #ddd;
}

.past-show-card .show-ticket {
  border-color: #555;
  background: transparent;
  color: #888;
}

.past-show-card .show-ticket:hover,
.past-show-card .show-ticket:focus-visible {
  border-color: #888;
  color: #fff;
}

.past-show-card .show-description {
  border-top-color: #222;
}

.past-show-card .show-description-text,
.past-show-card .show-detail-block p {
  color: #858585;
}

.past-show-card .show-detail-block {
  border-bottom-color: #202020;
}

.past-show-card .show-detail-block h4 {
  color: #aaa;
}

.past-show-card .show-detail-block a {
  color: #888;
}


/* ==========================================================
   ÉTATS VIDES / ERREUR
   ========================================================== */

.shows-empty,
.shows-error {
  width: 100%;
  padding: 35px 25px;
  border: 1px solid #222;
  background: #090909;
  text-align: center;
}

.shows-empty[hidden] {
  display: none;
}

.shows-empty p,
.shows-error p {
  margin: 0;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
}

.shows-error p {
  color: #b8b8b8;
}


/* ==========================================================
   ÉCRANS INTERMÉDIAIRES
   ========================================================== */

@media (max-width: 1150px) {

  .show-summary {
    grid-template-columns:
      minmax(220px, 1.5fr)
      minmax(150px, 1fr)
      minmax(140px, 0.8fr)
      100px;

    gap: 22px;
  }

  .show-flyer-column {
    width: 100px;
  }

  .show-flyer-thumb {
    max-width: 100px;
  }
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (min-width: 521px) and (max-width: 1024px) {

  /* HEADER */

  .inner-header {
    min-height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px 15px;
  }

  .header-logo {
    width: 90px;
    height: 90px;
  }

  .inner-nav {
    width: 100%;
    justify-content: center;
    gap: clamp(35px, 7vw, 65px);
  }

  .inner-nav a {
    font-size: 13px;
    letter-spacing: 2.5px;
  }


  /* PAGE */

  .shows-page {
    width: min(100% - 48px, 900px);
    padding: 45px 0 75px;
  }

  .shows-heading {
    margin-bottom: 34px;
  }

  .shows-filters-section {
    margin-bottom: 45px;
  }

  .shows-search-wrap {
    width: min(100%, 430px);
  }


  /* CARTE */

  .show-card {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .show-day {
    font-size: 50px;
  }

  .show-body {
    padding: 23px;
  }


  /*
    Tablette :
    informations principales + AVEC sur la première ligne,
    horaires/tarifs sur la deuxième,
    flyer à droite.
  */

  .show-summary {
    grid-template-columns:
      minmax(220px, 1.5fr)
      minmax(150px, 1fr)
      100px;

    gap: 20px;
  }

  .show-primary {
    grid-column: 1;
    grid-row: 1;
  }

  .show-other-column {
    grid-column: 2;
    grid-row: 1;
  }

  .show-practical {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .show-flyer-column {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 100px;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 520px) {

  /* HEADER */

  .inner-header {
    min-height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px 14px;
  }

  .header-logo {
    width: 86px;
    height: 86px;
  }

  .inner-nav {
    width: 100%;
    justify-content: center;
    gap: clamp(18px, 7vw, 32px);
  }

  .inner-nav a {
    font-size: 12px;
    letter-spacing: 2px;
  }


  /* PAGE */

  .shows-page {
    width: calc(100% - 30px);
    padding: 38px 0 65px;
  }


  /* TITRE */

  .shows-heading {
    margin-bottom: 30px;
  }

  .shows-heading h1 {
    font-size: 54px;
  }

  .shows-title-line {
    width: 58px;
  }

  .shows-subtitle {
    font-size: 10px;
    letter-spacing: 2px;
  }


  /* FILTRES */

  .shows-filters-section {
    margin-bottom: 42px;
  }

  .shows-filters {
    gap: 7px;
  }

  .shows-filter {
    padding: 9px 11px;
    font-size: 9px;
    letter-spacing: 1px;
  }


  /* RECHERCHE */

  .shows-search-wrap {
    width: 100%;
    margin-top: 13px;
  }

  .shows-search {
    height: 40px;
    padding-left: 12px;
    padding-right: 40px;
    font-size: 10px;
  }

  .shows-search-icon {
    right: 12px;
    font-size: 17px;
  }


  /* SECTIONS */

  .shows-section {
    margin-bottom: 58px;
  }

  .shows-section-heading {
    gap: 12px;
    margin-bottom: 16px;
  }

  .shows-section-heading h2 {
    font-size: 23px;
    letter-spacing: 1.5px;
  }


  /* CARTE */

  .show-card {
    display: block;
    min-height: 0;
    border-left-width: 2px;
  }


  /* DATE */

  .show-date {
    flex-direction: row;
    justify-content: flex-start;
    gap: 7px;
    padding: 13px 17px;
    border-right: 0;
    border-bottom: 1px solid #262626;
    text-align: left;
  }

  .show-day {
    font-size: 31px;
    line-height: 1;
  }

  .show-month {
    margin: 0;
    font-size: 18px;
  }

  .show-year {
    margin: 0 0 0 3px;
    font-size: 9px;
  }


  /* CORPS */

  .show-body {
    padding: 20px 17px 21px;
  }


  /*
    Mobile :
    les colonnes fixes desktop redeviennent
    naturellement verticales.
  */

  .show-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
  }

  /*
    En desktop/tablette les colonnes vides restent présentes
    pour garantir l'alignement.

    En mobile elles sont masquées pour éviter de créer
    des espaces vides dans l'empilement vertical.
  */

  .show-other-column:empty,
  .show-practical:empty,
  .show-flyer-column:empty {
    display: none;
  }


  /* PRINCIPAL */

  .show-artist {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: 2px;
  }

  .show-event {
    font-size: 29px;
    line-height: 1.05;
  }

  .show-location {
    margin-top: 9px;
    font-size: 12px;
  }


  /* AUTRES GROUPES */

  .show-column-label {
    margin-bottom: 5px;
  }

  .show-other-artists {
    font-size: 11px;
    line-height: 1.5;
  }


  /* HORAIRES / PRIX */

  .show-time {
    font-size: 11px;
  }

  .show-price {
    margin-top: 6px;
    font-size: 10px;
  }


  /* MINI FLYER */

  .show-flyer-column {
    width: auto;
    min-height: 0;
    justify-content: flex-start;
  }

  .show-flyer-column:empty {
    display: none;
  }

  .show-flyer-thumb {
    max-width: 120px;
    max-height: 72px;
  }


  /* INFOS OUVERTES */

  .show-description {
    margin-top: 20px;
    padding-top: 18px;
  }

  .show-description-text {
    font-size: 12px;
    line-height: 1.65;
  }

  .show-detail-block {
    padding: 18px 0;
  }

  .show-detail-block h4 {
    font-size: 21px;
  }

  .show-detail-block p {
    font-size: 12px;
    line-height: 1.65;
  }


  /* ACTIONS */

  .show-actions {
    gap: 8px;
    margin-top: 19px;
  }

  .show-info-button,
  .show-ticket {
    min-height: 36px;
    padding: 9px 12px;
    font-size: 9px;
    letter-spacing: 1px;
  }


  /* MESSAGES */

  .shows-empty,
  .shows-error {
    padding: 28px 18px;
  }

  .shows-empty p,
  .shows-error p {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
}


/* ==========================================================
   TRÈS PETITS ÉCRANS
   ========================================================== */

@media (max-width: 380px) {

  .inner-nav {
    gap: 15px;
  }

  .inner-nav a {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .shows-page {
    width: calc(100% - 24px);
  }

  .shows-filter {
    padding: 8px 9px;
  }

  .show-event {
    font-size: 27px;
  }
}