/* Soldout : bouton visuel, non cliquable */
.shows-block .show-data-right .tickets.is-soldout {
  pointer-events: none;
  text-decoration: line-through;
  opacity: .7;
}

/* UI commun (dropdown + tabs) */
.shows-filter-wrap {
    margin-bottom: 30px;
    text-align: left;
}
.shows-filter {
    padding: 10px 15px;
	font-size: 0.85em;
    outline: none;
	color: inherit;
	-webkit-text-fill-color: inherit;   /* iOS Safari force la teinte */
	border: 1px solid #eee;
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 15px 16px;
	padding-right: 40px; /* place pour l'icône */
	background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 9l6 6 6-6'/>\
</svg>");
}
.scheme-white .shows-filter {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 9l6 6 6-6'/>\
</svg>");
}
/* Retire l’icône native IE/Edge Legacy */
.shows-filter::-ms-expand {
  display: none;
}
/*Tabs style*/
.shows-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.shows-tab {
    padding: 6px 12px;
    border: 1px solid #eee;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8em;
    margin-bottom: 10px;
}
.shows-tab.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}


/* === Style Classic === */
.shows-classic .shows-inner {
  display: flex;
  flex-direction: column;
}
.shows-classic .show-data {
  transition: .3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 10px;
  border: 0;
  border-bottom: 1px solid #aaa;
}
.shows-classic .show-data:hover {
  background: #00000012;
}
.shows-classic .show-data-left {
  display: flex;
  gap: 30px;
}
.shows-classic .show-data-left .date {
  font-weight: 700;
  min-width: 200px;
  text-align: left;
}
.shows-classic .show-data-link {
  text-decoration: none;
  color: inherit;
}
.shows-classic .show-data-right .tickets {
    background: black;
    color: white;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
}
.shows-classic .city {
  font-weight: 700;
  text-transform: uppercase;
}


/* === Style Large Boxes === */
.shows-large-boxes .shows-inner {
  display: grid;
  gap: 20px;
}
.shows-large-boxes .show-data {
  display: block;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 22px;
}
.shows-large-boxes .show-data .date {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.shows-large-boxes .show-data .category {
  opacity: .85;
  margin-bottom: 4px;
}
.shows-large-boxes .show-data .venue,
.shows-large-boxes .show-data .city {
  font-size: 1rem;
}
.shows-large-boxes .show-data-right {
  margin-top: 10px;
  text-align: right;
}
.shows-large-boxes .show-data-right .tickets {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #111;
  font-weight: 600;
}

/* ---------- Variables de base (fallback) ---------- */
.shows-block {
  /* filtre (select) */
  --shows-filter-text: inherit;
  --shows-filter-bg: transparent;
  --shows-filter-border: #e5e7eb;

  /*data*/  
  --shows-data: inherit;
  
  /* bordures liste + items */
  --shows-border: #aaa;

  /* bouton billets */
  --shows-ticket-bg: #111111;
  --shows-ticket-text: #ffffff;

  /* couleur texte item + hover bg */
  --shows-item-hover: #0000000d;
}

/* Application des variables aux composants */
.shows-block .shows-filter {
  color: var(--shows-filter-text);
  background-color: var(--shows-filter-bg);
}
.shows-block .show-data {
  color: var(--shows-data);
  border-color: var(--shows-border);
}
.shows-classic.shows-block .shows-inner {
    border-color: var(--shows-border);
    border-top-width: 1px;
    border-top-style: solid;
}
.shows-block .show-data:hover {
  background: var(--shows-item-hover);
}
.shows-block .show-data-right .tickets {
  background-color: var(--shows-ticket-bg);
  color: var(--shows-ticket-text);
}

/* ---------- Schémas intégrés ---------- */
.shows-block.scheme-default {
  /* garde les valeurs par défaut ci-dessus (rien à faire) */
}

.shows-block.scheme-white {
  --shows-filter-text: #fff;
  --shows-filter-bg: transparent;
  --shows-filter-border: #fff;

  --shows-border: #666;
  
  --shows-data: #fff;

  --shows-ticket-bg: #fff;
  --shows-ticket-text: #000;

  --shows-item-text: #fff;
  --shows-item-hover: #ffffff1f;
}

.shows-block.scheme-black {
  --shows-filter-text: #000;
  --shows-filter-bg: transparent;
  --shows-filter-border: #000;

  --shows-border: #aaa;
  
  --shows-data: #000;

  --shows-ticket-bg: #000;
  --shows-ticket-text: #fff;

  --shows-item-text: #000;
  --shows-item-hover: #00000012;
}

.scheme-white .shows-tab.is-active {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.scheme-black .shows-tab.is-active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ---------- Schéma custom ---------- */
/* Les valeurs seront injectées en inline via style="" sur .shows-block, mais
   toutes les règles d’application restent ici dans style.css */
.shows-block.scheme-custom {
  /* pas de valeurs ici: elles arrivent par variables inline */
}


@media only screen and (max-width: 1000px) {
.shows-classic .show-data-left {
	gap: 0;
	flex-direction: column;
	text-align: left;
}
}
@media only screen and (max-width: 500px) {
.shows-classic .show-data-left {
	align-items: center;
	line-height: 1.35;
}
.shows-classic .show-data-left .date {
    min-width: auto;
}
.shows-classic .show-data {
    flex-direction: column;
    gap: 12px;
    padding: 16px 10px;
}
.shows-classic .show-data-right {
    margin-bottom: 4px;
}
}