/**
 * UTICK — Styles billetterie / agenda
 * Extrait de style.css (thème Symetry child)
 *
 * NOTE : ce fichier utilise les variables CSS (--rouge, --bleu, --rox-*)
 * définies dans le :root de style.css. style.css doit donc rester chargé.
 *
 * @format
 */

/* -------------------------------------------------------
   Modules événements (next / all)
------------------------------------------------------- */
.module_next_events .lieu {
  display: none;
}

.module_next_events .categorie,
.module_all_events .categorie {
  color: white;
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 7px;
  text-transform: uppercase;
  font-weight: 700;
}
.module_all_events .categorie {
  margin-bottom: 0;
}
.module_next_events_spectacles .categorie,
.module_all_events_spectacles .categorie {
  background: var(--rouge);
}
.module_next_events_sports .categorie,
.module_all_events_sports .categorie {
  background: var(--bleu);
}
.module_all_events_sports .categorie {
  display: none !important;
}
.module_next_events_sports .et_pb_column_utick .et_pb_module:last-child,
.module_next_events_sports .et_pb_column_utick_3 .et_pb_module:last-child {
  background: white;
  padding: 2%;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  margin-top: -16px;
}

.module_next_events_sports .date {
  display: none;
}

.module_next_events .et_pb_image_wrap img,
.module_all_events .et_pb_image_wrap img {
  transition: var(--rox-transition);
}
.module_next_events .et_pb_image_wrap:hover img,
.module_all_events .et_pb_image_wrap:hover img {
  transform: scale(0.95);
  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.2);
}
.module_all_events,
.module_all_events h4 {
  color: white;
}
/* -------------------------------------------------------
   Next events — cartes horizontales (nouveau layout)
   Fond de page : #171C1F  |  Fond des cartes : #212A2E
------------------------------------------------------- */
.utick_events_list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.utick_event_card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #212a2e;
  border-radius: 18px;
  padding: 20px 32px 20px 32px;
  position: relative;
  overflow: hidden;
}
.utick_event_categorie {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 4px 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
.utick_event_categorie_Musique {
  /* background-color: #fbda2c; */
  background-color: #fbda2c;
}
/* Gauche : titre + description */
.utick_event_info {
  flex: 1 1 0;
  padding-top: 40px;
  min-width: 0;
}
.utick_event_title {
  color: #ffffff00;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1px;
  -webkit-text-stroke: 0.1px white !important;
}
.utick_event_desc {
  color: white;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* Centre : image */
.utick_event_image {
  flex: 0 0 260px;
}
.utick_event_image img {
  /* width: 260px; */
  /* height: 180px; */
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Droite : date + lieu + bouton */
.utick_event_right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.utick_event_meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.utick_meta_row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c7cdd1;
  font-size: 14px;
  line-height: 1.3;
}
.utick_meta_row p {
  margin: 0;
  padding-bottom: 0;
}
.utick_meta_icon {
  flex-shrink: 0;
}

/* Bouton "Réserver" — style contour */
.utick_event_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid white;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 28px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.utick_event_btn:hover {
  transform: scale(0.95);
  border: 2px solid var(--rouge);
}

/* -------------------------------------------------------
   Conteneur + grilles
------------------------------------------------------- */
.utick_container {
  padding: 0 !important;
}

.et_pb_column_utick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}
.et_pb_column_utick_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.et_pb_column_utick p,
.et_pb_column_utick_3 p {
  padding-bottom: 0;
}

/* -------------------------------------------------------
   Bouton billetterie fixe
------------------------------------------------------- */
#btn_utick_fixed {
  position: fixed;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  height: 75px;
  width: 75px;
  bottom: 15px;
  right: 15px;
  background: #bc0c26;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
}
#btn_utick_fixed i {
  font-size: 20px;
  margin-top: -12px;
}
#btn_utick_fixed i::after {
  content: "Billeterie";
  display: block;
  position: absolute;
  font-size: 8px;
  color: white;
  left: calc(50% - 25px);
  margin-top: 5px;
}

/* -------------------------------------------------------
   Responsive
------------------------------------------------------- */
@media screen and (max-width: 980px) {
  .module_all_events .et_pb_column_utick div .et_pb_module,
  .module_next_events .et_pb_column_utick div .et_pb_module,
  .module_all_events .et_pb_column_utick_3 div .et_pb_module,
  .module_next_events .et_pb_column_utick_3 div .et_pb_module {
    margin-bottom: 0 !important;
  }
  .module_all_events .title,
  .module_next_events .title {
    font-size: 25px;
  }
  .utick_event_card {
  padding: 20px 10px 20px 10px;
}
}

@media screen and (max-width: 1024px) {
  .et_pb_column_utick,
  .et_pb_column_utick_3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media screen and (max-width: 900px) {
  .utick_event_card {
    flex-direction: column;
    align-items: stretch;
  }
  .utick_event_image,
  .utick_event_image img {
    width: 100%;
    flex: none;
  }
  .utick_event_right {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media screen and (max-width: 768px) {
  .et_pb_column_utick,
  .et_pb_column_utick_3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}

/* -------------------------------------------------------
   Next events STAGE — grille 4 colonnes, cartes verticales
   (même DA que les cartes spectacles)
------------------------------------------------------- */
.utick_events_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.utick_card {
  display: flex;
  flex-direction: column;
  background: #212a2e;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.utick_card_categorie {
  position: absolute;
  top: 14px;
  left: 0;
  padding: 4px 18px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--bleu); /* défaut */
  z-index: 2;
  display: none;
  background: var(--rouge);
}
/* couleur par catégorie (facultatif) */
.utick_event_categorie_sport {
  background: #fff8c3;
  color: #212a2e;
}
.utick_event_categorie_stage {
  background: #ffd1c3;
  color: #212a2e;
}

.utick_event_categorie_theatre,
.categorie_theatre {
  background: #437eb7;
}

.utick_event_categorie_musique,
.categorie_musique {
  background: #fff200;
}

.utick_event_categorie_humour,
.categorie_humour {
  background: #62c4b1;
}

.utick_event_categorie_famille,
.categorie_famille {
  background: #f17baf;
}

.utick_event_categorie_burlesque,
.utick_event_categorie_rox_cafe {
  background: #eec78b;
  color: #212a2e;
}

.utick_event_categorie_burlesque,
.categorie_burlesque {
  background: #d2232a;
  color: #fff;
}
.utick_categorie_rox_cafe {
  background: #f5b43c;
}
.utick_categorie_soiree_saint_valentin {
  background: #f53c89;
  color: #fff !important;
}

.utick_event_categorie_docu,
.utick_event_categorie_conference,
.utick_event_categorie_evenement,
.categorie_docu,
.categorie_conference,
.categorie_evenement {
  background: #776e9b;
  color: #fff;
}

.utick_card_image {
  display: block;
  width: 100%;
}
.utick_card_image img {
  width: 100%;
  /* height: 220px; */
  object-fit: cover;
  display: block;
  transition: var(--rox-transition);
}
.utick_card_image:hover img {
  transform: scale(1.03);
}

.utick_card_body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 26px;
  flex: 1;
}
.utick_card_title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}
.utick_card_desc {
  color: #c7cdd1;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding-bottom: 0;
}
.utick_card_meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.utick_card .utick_event_btn {
  margin-top: 4px;
  align-self: flex-start;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .utick_events_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
@media screen and (max-width: 600px) {
  .utick_events_grid {
    grid-template-columns: 1fr;
  }
}





/* Shortcode [utick_events] — cartes en grille */
.et_pb_column_utick .utick_event {
  background: #212a2e;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.utick_event > a { display: block; }
.utick_event img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: var(--rox-transition);
}
.utick_event > a:hover img { transform: scale(1.03); }

.utick_title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 16px 18px 0;
  margin: 0;
}
.utick_lieu  { color: #c7cdd1; font-size: 14px; padding: 8px 18px 0; margin: 0; }
.utick_date  { color: #c7cdd1; font-size: 14px; padding: 4px 18px 18px; margin: 0; }

/* Badge catégorie */
.utick_categorie {
  align-self: flex-start;
  margin: 14px 18px 0;
  padding: 5px 14px;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 700;
  color: #151A1E;
}
.utick_categorie_theatre    { background: #437EB7; color:#fff; }
.utick_categorie_musique    { background: #FFF200; }
.utick_categorie_humour     { background: #62C4B1; }
.utick_categorie_famille    { background: #F17BAF; }
.utick_categorie_conference { background: #776E9B; color:#fff; }