@charset "UTF-8";
/* TESTS*/


 .row .vc_toggle_size_md.vc_toggle_default .vc_toggle_title h4 {
    color: #000 !important;
}


.vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a {
    background-color: #c7a457!important;
    color: #666;
}


.vc_tta-color-white.vc_tta-style-flat .vc_tta-tab.vc_active>a {
    background-color: #e53847!important;
    color: #fff!important;
}
.vc_tta-title-text {
    color: #fff!important;
}
.vc_custom_1754579805274 {
    margin-bottom: -30px!important;
}

.vc_grid-item .vc_gitem-animated-block {
    border: 0px solid #111!important;
   box-shadow: 0 0px 0px rgba(0, 0, 0, 0)!important; 
}
.vc_grid-item-mini .blog-detailed-grid {
   box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0)!important;
}

@media (max-width: 959px) {
    .vc_row[data-vc-full-width], .vc_row.vc_row-has-fill {
        margin-bottom: -12px !important;
    }
}

/* Roue 1 */
.roue::before {
  content: "";
  position: absolute;
  top: 29rem;
  left: -120px;
  width: 400px;  /* adapte à la taille de ta roue */
  height: 400px;
  background-size: 100%!important;
  background: url(/wp-content/uploads/2025/08/roue.svg) no-repeat center/contain;
  animation: spin 12s linear infinite;
  transform-origin: center;
  z-index: 0;
}

/* Roue 2 */
.block-tarifs::after {
  content: "";
  position: absolute;
  top: 0rem;
  right: -130px;
width: 250px;
height: 250px;
  background: url(/wp-content/uploads/2025/08/roue2.png) no-repeat center/contain;
  background-size: 100%!important;
  animation: spin 18s linear infinite; /* peut être différente */
  transform-origin: center;
  z-index: 0;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}



/* FIN DESIGN */








.block-tarifs {
  position: relative;
}




.vc_grid-item-mini .vc_custom_heading h5 {
    margin-bottom: 5px!important;
}

.content-area .vc_basic_grid .vc_grid-item-mini .vc_custom_heading.vc_gitem-post-data-source-post_excerpt p {
    margin-bottom: 10px;
    line-height: 19px !important;
    font-size: 14px !important;
}

.vc_grid-item-mini .vc_custom_heading h5 {
    letter-spacing: -0.02em;
    line-height: 20px!important;
}

@media (max-width: 960px) {
    .tt_button.pull-left {
        margin-top: 20px!important;
    }
}

.at-infos p#at-sub {
    margin-top: 0px !important;
}
#wrapper .wpb_text_column p:last-child {
    margin-bottom: 0px !important;
}

.vc_tta.vc_general {
    font-size: 1em;
    transform: rotate(-1.5deg)!important;
}
/* badge “Prochainement” */
.spectacle-card .badge-prochain{
      display: inline-block;
    font-weight: 900;
    background: #fff;
    color: #000;
    padding: .35rem .5rem;
    border-radius: .2rem;
    letter-spacing: -1px;
    transform: rotate(-3deg);
}

/* conteneur du mini bloc à droite */
.spectacle-card .blok-date.prochain .jour-date{
  position:absolute;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width: 100%;
  padding: 0;
}

/* bloc date/heure à droite */
.spectacle-card .blok-date .mini-right{
  text-align:right;
  line-height:1.05;
}
.spectacle-card .mini-right .date-mini{ display:block; font-weight:900;letter-spacing: -1px;}
.spectacle-card .mini-right .heure-mini{ display:block; font-weight:900; opacity:.9; }



.les-spectales {
    padding: 0;
    margin-top: 80px;
}

.container h3 {
    margin-bottom: -3px!important;
}

.actu-badge {
    display: inline-block;
   background: #ffffff !important;
    /*border: 1px solid;*/
    color: #000 !important;
    letter-spacing: -1.2px !important;
}

/**/
.liste-spectacles.programmation {
    display: grid;
       gap: 2rem 1.5rem;
    justify-content: center;
    padding: 0rem 0 1.5rem 0;
    /*grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));*/
}


@media (max-width: 900px) {
.liste-spectacles.programmation {
    display: grid;
    gap: 1rem 2rem;
    justify-content: center;
    padding: 0rem 0 0rem 0;
   
}

}

.jour-dates {
    margin-top: -55px;
    background: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    z-index: 2;
    display: flex !important;
    width: 105% !important;
    flex-wrap: nowrap!important;
    justify-content: space-around !important;
    align-items: flex-end !important;
    position: relative;
    min-height: 70px;
}

h3.heures {
    margin-bottom: 0px 0px -2px!important;
}

span.jour {
    color: #fff!important;
}
.jour {
        letter-spacing: -1px;
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    color:#fff;
}

span.date {
   color: #fff !important;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: -1px;

}


.badge-prochaine-date {
    margin-top: 10px;
    font-size: 12px;
    margin-bottom: 0px;
    letter-spacing: -0.8px;
    display: table;
    background: #de1a35 !important;
    color: #fff;
    padding: 0em .4em;
    border-radius: .2rem;
    transform: rotate(-2deg);
    white-space: nowrap;
    font-weight: bold;
   
}

.poster-wrapper.poster-margin{margin-top:7px!important;}



.actu-content a, a:hover, a:focus, a:active, a.active {
    outline: 0;
    text-decoration: underline;
   
}

.actu-content a:hover, a:focus, a:active, a.active {
   color:#e71d36;
}























/* Jour + Date */
.jour-date {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  color: #fff;
  margin-bottom: 4px;
  /*background: rgba(0, 0, 0, 0.65);*/
  padding: 4px 8px 4px 0px;
  border-radius: 4px;
  display: inline-block;
}

/* Badge "Aujourd'hui" */
.jour-date .badge-aujourdhui {
  background: #e63946;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Heure */
.heure {
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 8px;
  color: #e63946;
}


.home .barre-recherche-spectacle h3 {
     font-weight: 800;
    letter-spacing: -1.5px;
    font-size: 35px;
}


.upper-footer i, .upper-footer .widget-title, .upper-footer .modal-menu-item, .footer_widget ul.redux-social-media-list li i{
    color: #FFFFFF!important;
}

.footer_widget {
    margin: 0;
}
body, .box, .cb-text-area p, body p, .upper-footer .search-form .search-field, .upper-footer select, .footer_widget .wpml-ls-legacy-dropdown a, .footer_widget .wpml-ls-legacy-dropdown-click a {
    color: #000;
   
}

h5.widget-title span{ color: #FFFFFF!important;}
/* rien ne coupe le ruban incliné (Safari/mobile) */

/* éviter que ça coupe */
.wpb_text_column .wpb_wrapper { overflow: visible !important; }

/* le H1 porte le ruban via ::before, compatible Safari grâce à isolation */
.wpb_text_column .wpb_wrapper > h1 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: .2em .2em;
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.75rem, 4vw, 4rem);
  line-height: 1.1;
  isolation: isolate; /* clé pour Safari */
}

/* ruban rouge incliné derrière le texte */
.wpb_text_column .wpb_wrapper > h1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 1rem);
  height: 100%;
  background: #e53847;
  border-radius: .1rem;
  transform: translate(-50%, -50%) rotate(var(--angle, -3deg));
  -webkit-transform: translate(-50%, -50%) rotate(var(--angle, -3deg));
  transform-origin: center;
  z-index: -1;               /* OK grâce à isolation */
  transition: transform .2s ease-out;
}



.vc_grid-item-mini .vc_custom_heading h5, .container h5 {
    font-weight: bold;
    font-family: REM;
    color: #000 !important;
}








.ov-card {
    background: rgb(255 255 255)!important;
    border: 0px solid #fff!important;}

.ov-text p {
   color:#000!important;
}
.ov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  font-weight: 800;
  border: 2px solid #000;
  color: #fff;
  background: #000;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.ov-btn:hover {
  transform: translateY(-1px);
  background: #fff;
  color: #000;
}

.ov-backdrop[aria-hidden="true"] { display: none !important; }
@supports (-webkit-touch-callout: none) {
  .parallax { background-attachment: scroll; }
}

/* Hauteur de la mini-barre fixe */
.affiche-sticky--mini {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 84px;            /* adapte si besoin */
  z-index: 1000;
}
@media (max-width: 959px) {
    .container h3 {
        font-size: 16px;
    }
}

/* Réserve l'espace en bas sur mobile pour ne jamais masquer le footer */
@media (max-width: 960px) {
  body { padding-bottom: 84px; } /* même valeur que la barre */
}
.parallax {
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* effet parallax simple */
  min-height: 60vh; /* hauteur minimum visible */
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax__content {
  background: rgba(0, 0, 0, 0.5); /* assombrir pour lisibilité */
  color: white;
  padding: 2rem;
  border-radius: 10px;
  max-width: 800px;
  text-align: center;
}



/* spectacles */
li {
    padding: 5px 0;
  color:#fff;
}

.entry-header.blog-header {
    padding-bottom: 70px;
    padding-top: 20px;
    margin-bottom: 10px;
    background: #000;
}

.titre-spectacle{padding-top: 20px;padding-bottom: 20px;}

.entete-spectacle {
         display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;
    font-size: 21px;
    font-weight: bold;
    line-height: 22px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.mb-4.info-spectacle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-content: center;
    align-items: flex-start;
    gap: 50px;
}

.info-spectacle-gauche {
    width: 50%;
}
.info-spectacle-droite {
    width: 50%;
}

.les-jours .spectacle-salles {
    line-height: 15px !important;
    font-size: 15px !important;
    text-align: left;
    padding-bottom: 2px!important;
}

.spectacle-salles {
    color: #fff;
    font-weight: bold;
    letter-spacing: -1px;
    /* margin-top: 15px; */
    line-height: 22px !important;
    font-size: 21px !important;
    text-align: center;
}

.spectacle-genres {
    width: 50%;
  color:#fff;
}

/* fin spectacle */



.liste-spectacles.loading .spectacle-card {
  display: none !important;
}

span.txt-prog {
    color: #000 !important;
    line-height: 1;
    padding-top: 0px;
    padding-bottom: 0;
    /* margin: 14px 0 0 0;*/
    font-size: 35px; 
    position: relative;
    top: 0px;
    font-weight: bold;
        letter-spacing: -2px;
}

.affiche-sticky a:hover, a:focus {
    color: #cc2829;
    text-decoration: underline;
}

.kd-photobox {
    background: transparent;
    border: 2px solid;
}

button.filtre-btn.petit.reset-btn {
    background: #a9a9a9;
    color: #fff;
}
button.filtre-btn.petit.reset-btn:hover {
    background: #a6330f;
    color: #fff;
}

.poster-wrapper {
  position: relative;
  /*display: inline-block;*/
  overflow: hidden;
}

.poster-wrapper img.poster {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-en-savoir-plus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/themes/ekko/core/assets/images/overlay.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.7); /* assombrit l'affiche */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* empêche de bloquer les clics */
  border-radius:10px;
}

.poster-wrapper:hover .overlay-en-savoir-plus {
  opacity: 1;
}

.txt-ajdh{font-size: 18px!important;}
span.txt-ajdh{font-size:15px!important;display: block!important;}

.gauche .filtre-btn{
  font-weight: bold;
  font-size: 20px;
    padding: 0.6em 1.3em;
    margin-top: 3px;
        border: 2px solid #000;
        background: #fff;
        color:#000;
}

.spectacle-card {
  text-align: center;
  max-width: 260px; 
  margin: auto;
  /*font-family: Arial, sans-serif;*/
}

.poster-wrapper {
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.4s ease; 
  border-radius: 10px;
}

.date_spectacle {
    color: #FFF;
    font-weight: bold;
    line-height: 1;
    padding: 6px 5px 5px 5px;
    margin: 0;
    letter-spacing: -0.6px;
}

.poster {
  border-radius: 10px;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  display: block;
}

.poster-wrapper:hover,
.poster-wrapper:focus-within {
  transform: scale(1.03);
}

.title {
  margin: 12px 0 4px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #222;
}

.loader p{color:#fff;}

.content-area .vc_grid-item-mini {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.time {
  color: #fff;
  margin-bottom: 10px;
  font-size: 1rem;
}

.btn-info {
  background-color: #0073e6;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #005bb5;
  outline: none;
}

.swiper-button-next,
.swiper-button-prev {
  color: #0073e6;
}

.spectacle-card .time{margin-bottom:5px}

/* Responsive */
@media (min-width: 1270px) {
  span.txt-prog {
    font-size: 1.7em!important;
    top: 6px !important;
  }
}

@media (max-width: 768px) {
          .txt-prog {
            /*font-size: 24px!important;*/
            display: block;
        }
  .spectacle-card {
    max-width: 160px;
  }
  .title {
    font-size: 1rem;
  }
  .time {
    font-size: 0.9rem;
  }
  .btn-info {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

  .blanc h1,h2,h3,h4,h5  {
    color: #fff!important;
}

.vc_tta.vc_general .vc_tta-panels, .vc_tta.vc_general .vc_tta-panels-container {
    border-radius: 0 3px 3px 3px!important;
}
.vc_tta-tabs:not([class*=vc_tta-gap]):not(.vc_tta-o-no-fill).vc_tta-tabs-position-top .vc_tta-tab>a {
    border-radius: 7px 7px 0 0!important;
}


@media (max-width: 499px) {
    .container h3 {
    margin-bottom: 0px !important;
}

    .les-jours .spectacle-salles {
    line-height: 15px !important;
    font-size: 13px !important;
    text-align: left;
    padding-bottom: 2px!important;
}

  .spectacle-card .badge-prochain {
    display: inline-block;
    font-weight: bold;
    background: #fff;
    color: #000;
    padding: .2rem .2rem;
    border-radius: .2rem;
    letter-spacing: -1.2px;
    transform: rotate(-3deg);
    font-size: 12px;
    margin-top: 4px;
}
.spectacle-card .mini-right .date-mini {
    display: block;
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 12px;
}
.spectacle-card .mini-right .heure-mini {
    display: block;
    font-weight: 900;
    opacity: 1;
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 13px;
}

  .les-spectales {
    padding: 0;
    margin-top: 20px;
}

.programmation {
    margin-top: 0px !important;
}

  .actu-badge {font-size: 14px;padding: 0.3rem .3rem !important;}
  .container h2 {
    color: #000;
}
  .blanc h2 {
    color: #fff;
}
  
  .les-spectales .message-vide.filtre-msg {
    /* padding-top: 100px; */
    /* height: 300px; */
    margin: 0 auto!important;
    color: #fff;
    text-align: center!important;
    position: absolute!important;
    top: 300px!important;
    line-height: 1!important;
    width: 90%!important;
}
  
      .home .filtres-categories {
        display: flex!important;
        flex-direction: row;
        align-content: center;
        justify-content: space-between!important;
    }
  .txt-prog {
    font-size: 35px!important;
    display: block;
        }
  .spectacle-card {
    max-width: 140px;
  }
  .title {
    font-size: 0.9rem;
  }
  .time {
    font-size: 0.8rem;
  }
  .btn-info {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}


/* calendrier */

.calendrier-spectacle {
  margin-bottom: 20px;
  text-align: center;
      color: #000;
    font-weight: bold;
}

.calendrier-spectacle label{ color: #fff;}

.noir h2 {
    color: #000 !important;
}

.liste-spectacles {
  display: grid;
  gap: 3.5rem 1.5rem;
  justify-content: center;
  padding: 4rem 0 1.5rem 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.liste-spectacles.home {
    margin-top: 0em;
}

/* Messages vides / retours d'état */
.message-box {
  grid-column: 1 / -1;     /* prend toute la largeur de la grille */
  display: none;           /* masqué par défaut */
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  line-height: 1.4;
  font-size: 1.125rem;
  color: #555;
  background: #f7f7f7;
  border: 1px dashed #ddd;
  border-radius: 10px;
}

.btn-special{color: #000;font-size:26px; border-radius:0;padding:15px 20px!important;
          margin-top: 30px;
  transform:rotate(var(--angle, -1.5deg));
  -webkit-transform:rotate(var(--angle, -1.5deg));}

/* variantes (optionnel) */
.message-box.date-msg   { background: #fff7f7; color:#9a1b1b; border-color:#f0cccc; }
.message-box.filtre-msg {background: transparent;
    color: #153e75;
    border-color: #e71d36; }

/* classe d'affichage */
.message-box.is-visible { display: flex; }

/* 4 cartes entre 1269px et 763px */
@media (min-width: 763px) and (max-width: 1269px) {
  .liste-spectacles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 3 cartes entre 762px et 500px */
@media (min-width: 500px) and (max-width: 762px) {
  .liste-spectacles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 cartes en dessous de 500px */
@media (max-width: 499px) {
  .liste-spectacles {
    grid-template-columns: repeat(2, 1fr);
  }
}


.liste-spectacles .spectacle-card {
  /*border: 1px solid #5b5b5b;*/
  border-radius: 10px;
  /*padding: 10px 15px;*/
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.spectacle-card .tt_button {
    color: #000;
  margin: 10px auto;
}

.categorie .nom_spectacle{color:#fff;}

/* Conteneur principal */
.barre-recherche-spectacle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 10px 20px;
  border-radius: 12px;
  background: #f8f8f8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.8s ease-in-out;
}


.back-to-top .fa {
    color: #fff;
    font-size: 18px;
    line-height: 50px;
}

/* Titre */
.titre-recherche {
  margin: 0;
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
}

/* Input + icône */
.date-wrapper {
  position: relative;
  display: inline-block;
}

.date-wrapper input[type="date"] {
  padding: 8px 35px 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  color: #333;
}

.calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  pointer-events: none;
  color: #555;
}

/* Accessibilité */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 600px) {
  .barre-recherche-spectacle {
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    margin-top:-40px;
  }

  .titre-recherche {
    text-align: center;
  }

  .formulaire-recherche-date {
    text-align: center;
  }
}

.barre-recherche-spectacle h3 {
      color: #000 !important;
    line-height: 1;
    padding-top: 0px;
    padding-bottom: 0;
    margin: 0px 0 0 0;
}

.pasdespectacle {
      text-align: center;
    color: #fff;
    background: #e63946;
    /* border-radius: 10px 0px 10px 0; */
    padding: 5px;
    margin: -17px 0 0 -20px;
    display: block;
    line-height: 20px;
    font-size: 20px;
    /* height: 10px; */
    display: inline-block !important;
    background: #e71d36 !important;
    color: #fff !important;
    font-weight: 800;
    padding: .35em .9em;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-2deg);
    transform-origin: center;
    will-change: transform;
    outline: none !important;
    max-width: 330px;
}

/*.   */


.barre-recherche-spectacle {
     display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
    background: #f8f8f8;
    border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.titre-recherche {
  font-size: 1.2rem;
  font-weight: bold;
  color: #222;
  margin: 0;
}



.formulaire-recherche-date {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.formulaire-recherche-date label {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
}
.formulaire-recherche-date input[type="date"] {
  padding: 10px 14px;
  border: 2px solid #e63946; /* Rouge Ekko */
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: #333;
  background-color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
}
.formulaire-recherche-date input[type="date"]:focus {
  border-color: #b22234;
  outline: none;
  box-shadow: 0 0 8px rgba(230, 57, 70, 0.3);
}

.formulaire-recherche-date input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(27%) sepia(76%) saturate(4083%) hue-rotate(340deg) brightness(90%) contrast(93%);
}

.formulaire-recherche-date .date-wrapper {
  position: relative;
}

.texte-recherche {
  font-weight: 600;
  color: #444;
  margin-right: 5px;
}

.date-wrapper {
  position: relative;
}

.date-wrapper input[type="date"] {
  padding: 8px 12px;
  padding-right: 30px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
}

.calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.1rem;
  color: #0073e6;
}

/* Accessibilité */
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



/*  FILTRES */


.programmation .filtres-categories {
      margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
    align-items: flex-end;
}


.home .filtres-categories {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 0px 3px!important;
    justify-content: flex-start;
}

.filtre-btn {

      border: 0px solid #ddd;
    background-color: #e53847;;
    border-radius: 25px;
    padding: 0.3rem 0.8rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: -0.5px;
}

.filtre-btn:hover,
.filtre-btn.active {
  background-color: #e60023;
  color: #fff;

}

.barre-recherche-spectacle {
  text-align: left;
  margin-bottom: 20px;
}

.home .barre-recherche-spectacle h3 {
    color: #000 !important;
    line-height: 1;
    /*padding-top: 0px;*/
    padding-bottom: 0;
    /*margin: 0px 0 0 0;*/
}


.formulaire-recherche-date {
  margin-top: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.date-wrapper {
  position: relative;
}

.date-wrapper input[type="date"] {
  padding: 6px 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}


.barre-recherche-spectacle {
  margin-bottom: 0rem;
  margin-top:-60px;
  box-shadow: 0px 0px 15px black;
}

.header-recherche {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.titre-recherche {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

.formulaire-recherche-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.texte-recherche {
  font-weight: bold;
}

.date-wrapper {
  position: relative;
}

.date-wrapper input[type="date"] {
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-weight: bold;
}

.calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  background-color: #d32f2f;
  border-radius: 50%;
  padding: 6px;
  font-size: 14px;
  pointer-events: none;
}

.filtres-categories {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.droite .filtre-btn {
      color: #fff;
    font-weight: bold !important;
    /*border: 2px solid #e53846;*/
    background-color: #e53847;
    border-radius: 25px;
    padding: 0.3rem 0.8rem !important;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.filtre-btn:hover,
.filtre-btn.active {
  background-color: #000;
  color: #fff;
}



.lettre-rouge {
  color: #c72446;
}
 
h5.aujd{  
      position: absolute;
    display: block;
    color: #000 !important;
    font-weight: bold !important;
    top: -85px;
    left: 5px;
    line-height: 0.9;
    transform: rotate(-2deg) !important;
}

h3.message-vide.filtre-msg {
     padding-top: 100px;
    height:433px;
    margin: 0 auto;
    color: #000;
    text-align: center;
}
.les-spectales .message-vide.filtre-msg {
    /* padding-top: 100px; */
    /* height: 300px; */
    margin: 0 auto;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 200px;
    width: 100%;
}

.flex.justify-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
}

.programmation{margin-top:20px!important;}

.content-area{
  padding-top:15px;
}

.wpb-content-wrapper {
margin: -100px 0 0 0!important;
}

.kd-text-rotator-container {
    top: 41px;
}
@media (min-width: 861px) and (max-width: 913px) {
    .formulaire-recherche-date {
        gap: 0rem !important;
        flex-direction: column;
        position: absolute;
        right: 22px!important;
        top: 52px!important;
    }
}

@media (min-width: 600px) and (max-width: 860px) {
    .formulaire-recherche-date {
        gap: 0rem !important;
        display: flex!important;
        flex-direction: column!important;
        position:absolute;
        right: 35px!important;
        top: 52px!important;
    }
}

/* Responsive */
@media (max-width: 499px) {
  .wpb_text_column .wpb_wrapper > h1 {

    margin: 41px 0 20px 0;
    line-height: 35px;
   
}
  
     .programmation .container h3 {
        line-height: 31px!important;
        margin-bottom: -6px!important;
    }

     .home .container h3 {
        line-height: 31px!important;
        margin-bottom: 26px!important;
        font-size: 28px;
        letter-spacing: -1.5px;
    }

  .vc_column_container {
    margin: 0px 0 0 0;
}
  
      .vc_row.wpb_row.vc_inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0px 0 20px 0 !important;
    }
  
  .wpb_wrapper h2 {
    padding-top: 0px; 
}
  
  .vc_empty_space {
 
    height: 0px !important;
}
  
  .wpb-js-composer .wpb_content_element {
    padding: 0 !important;
    /*margin-bottom: -12px!important;*/
}
  .tt_button {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    float: none !important;
    margin: 0 auto;
    font-size: 13px;
    padding: 25px 23px!important;
    line-height: 0px;
    min-height: 30px;
    /* height: 10px; */
  }
  .cta-btncontainer .tt_button {
    padding: 25px 60px!important; 
  }
  span.txt-prog {
      top: 0px!important;
    font-size:35px;
  }
  .gauche {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .droite {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
                gap: 0.5rem;
    }
}



@media (min-width: 600px) and (max-width: 959px) {
  .home .liste-spectacles .spectacle-card.is-not-today .poster-wrapper::before {
        top: -5px !important;
        left: -6px !important;
        font-size: 1em !important;
}
  
  .flex.justify-between {
    display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
  }
  span.txt-prog {
      top: 0px;
        font-size: 35px;
  }
  .formulaire-recherche-date {
      /*display: flex;
        align-items: center;
        gap: 0rem;
        flex-direction: column;
        position: absolute;
        right: 35px;
        top: 49px;
     margin-top: -13px; */
}
  label {
      margin-bottom: 0px;
  }
}

h1 {
  font-size: clamp(2rem, 6vw, 3.5rem); /* taille qui s'adapte à l'écran */
  line-height: 1.1;
  word-wrap: break-word; /* casse les mots si besoin */
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.tr_home{
  padding-top: 18px!important;
    margin-bottom: 10px!important;
}

.aujourdhui {
top: 10px;
position: relative;
background: #e71d36 !important;
padding: 3px 12px;
color: #fff !important;
transform:rotate(-3deg)!important;
}


@media (min-width: 1270px){
  .barre-recherche-spectacle h3 {
    margin: 0px 0 0 0;
  }
  .home .filtres-categories {
    margin-top: 12px;
  }
  .content-area{padding-top: 110px!important;}
  .home .content-area{padding-top: 0px!important;}
  
}

@media (min-width: 960px) and (max-width: 1270px) {
       
  .content-area{padding-top: 110px!important;}
  .home .content-area{padding-top: 0px!important;}
}
  
@media (min-width: 960px) and (max-width: 991px) {
    .container {
        width: 100%;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
  .content-area{padding-top: 30px!important;}
  .home .content-area{padding-top: 0px!important;}
  
  .barre-recherche-spectacle {
    gap: 2px;
  }
  
    .pasdespectacle {
    font-size: 15px;
        line-height: 16px;
        padding: 5px;
        max-width: 250px;
    }
  h5.aujd {
    top: -65px;
    left:10px;
}
  .tr_home {
    padding-top: 20px !important;
    margin-bottom: 0px !important;
  }
  .barre-recherche-spectacle h3 {
    margin: 0px 0 0 0;
  }
  
  h3.titre-recherche {
font-size: 27px;
}
}

@media (min-width: 500px) and (max-width: 599px) {
  .formulaire-recherche-date {
        flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-end;
    gap: 0rem;
  
    position: absolute;
    right: 35px;
top: 50px;
    /* margin-top: -13px; */
    }
  label {
        display: flex;
        gap: 0rem !important;
        flex-direction: column;
        position: absolute;
        right: 0px;
        top: -20px;
        flex-wrap: wrap;
        align-content: flex-end!important;
}
  
  .flex.justify-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
  }

  h5.aujd {
  top: -50px;
  font-size: 16px!important;
  }
  .pasdespectacle {
        font-size: 14px;
padding: 5px;
/* border-radius: 10px 0px 10px 0; */
margin-top: -6px;
    }
}

@media (min-width: 500px){
  .tt_button{
    color:#000;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

.date-wrapper input[type="date"] {
    padding: 0.1rem 1rem 0.1rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-weight: bold;
}



@media (max-width: 600px) {
  .barre-recherche-spectacle.home.fade-in {
    margin-bottom: 40px!important;
}


  h1.mb-3 {
    font-size: clamp(3.2rem, 8vw, 3.8rem)!important;
    word-break: keep-all;      /* ne casse pas les mots */
  overflow-wrap: normal;
  }
  
  .entry-header.blog-header {
padding-bottom: 0px!important;
}
  
  h3.message-vide.filtre-msg {
    /* padding-top: 60px; */
    height: 160px;
    margin: 0;
  /*  width: 360px;
     padding: 0; */
    text-align: center;
    padding: 60px 0 0 0;
    line-height:1;
}
  
  .liste-spectacles {
    padding: 0;
  }
  .programmation .filtres-categories {
    margin-top: 5px;}
  
  .home .filtres-categories {
    margin-top: -15px !important;
  }
  
  .pasdespectacle {
            font-size: 15px;
        line-height: 16px;
        padding: 7px;
        /* border-radius: 10px 10px 0 0; */
        margin-top: -25px;
        max-width: 232px;
        text-align: left;
        margin: -62px 0 0px -14px;
        height: 43px;
  }
  
  .txt-prog {
     font-size: 35px;
     display: block;
  }
  .content-area{padding-top: 0px;}

  .container .rotator-single {
    font-size: 25px !important;
  }


  h5.aujd {
  top: -28px;
font-size: 16px!important;
display: inline-flex;
  }

 /* .container .vc_row-has-padding-top {
  padding-top: 0px!important;
  }*/

    .barre-recherche-spectacle {
      margin-bottom: 0rem;
    margin-top: -70px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    }

    .formulaire-recherche-date {
    flex-direction: row;
        width: 100%;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
      margin-bottom: 0;
    }
  
  .formulaire-recherche-date label {

font-size: 0.9rem;

}

  .date-wrapper {
        max-width: 40%;
        position: absolute;
        /*right: 45px;*/
        margin-top: -5px;
        margin-right:0px;
    }

  .date-wrapper input {
    width: 100%;
  }

  .home .filtres-categories {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 3px !important;
    justify-content: flex-start;
}

  .filtre-btn{
        border-radius: 17px;
        padding: 0.3rem 0.8rem !important;
        cursor: pointer;
        font-weight: bold !important;
        transition: all 0.2s ease-in-out;
        font-size: 13px;
  }

  .filtres-categories {
    gap: 0.2rem;
  }
  .barre-recherche-spectacle h3 {
    line-height: 1;
    padding: 0px;
    margin: 0;
    text-align: left;
  }

  .liste-spectacles {
  gap: 1rem 0.5rem;
  }

  .txt-prog{font-size:15px;display:block;}


  .liste-spectacles .spectacle-card {
    text-align: center;
    max-width: 164px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;  /* auto pour centrer*/
    text-align: center;
    padding: 0px;
    /*height: 400px;*/
  }
  .programmation .liste-spectacles .spectacle-card {
    text-align: center;
    max-width: 164px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;  /* auto pour centrer*/
    text-align: center;
    padding: 10px;
    height: 360px;
  }
  .date-wrapper input[type="date"] {
    padding: 0.2rem 0.2rem 0.2rem 0.2rem;
    border: 1px solid #ccc;
    border-radius: 14px;
    font-weight: bold;
  }
      .container h3 {
        color: #ffffff;
        font-weight: 700;
        font-size: 31px;
        line-height: 23px;
        padding: 0;
        margin-top: 7px;
        margin-bottom: 5px;
    }
   
  .flex.justify-between {
    display: block;
  }
  
  
}
.programmation .poster-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
    line-height: 0;
    text-decoration: none;
    margin-top: -60px;
}

.programmation .liste-spectacles .spectacle-card {
    position: relative;
    padding-top: 10px;
}

/* ===== Poster / Overlay de base ===== */
/* ===== Poster / Overlay ===== */



.poster-wrapper{
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
  text-decoration: none;
}
.poster{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s ease;
  will-change: transform;
}

       

.poster-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.50);
  opacity: 0;
  transform: translateY(10%);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none; /* laisse passer le clic vers le <a> */
}

/* Label + flèche animée */
.overlay-label{
      display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: bold;
    letter-spacing: .08em;
    text-transform: lowercase;
    color: #000;
    font-size: 14px;
    letter-spacing: -1px;
    background: #fff;
    /* background: rgba(0, 0, 0, .55); */
    padding: 1.2rem 1.2rem;
    border-radius: 999px;

}
.overlay-label .fleche{ transition: transform .3s ease; }

/* Hover/focus desktop */
.poster-wrapper:hover .poster,
.poster-wrapper:focus .poster{ transform: scale(1.25); }
.poster-wrapper:hover .poster-overlay,
.poster-wrapper:focus .poster-overlay{ opacity: 1; transform: translateY(0); }
.poster-wrapper:hover .overlay-label .fleche,
.poster-wrapper:focus .overlay-label .fleche{ transform: translateX(4px); }

/* Accessibilité clavier */
.poster-wrapper:focus-visible{
  outline: 3px solid #e63946;
  outline-offset: 3px;
  border-radius: 12px;
}

.vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a:focus, .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a:hover {
    background-color: #cc2829!important;
    color:#fff!important;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner {
    border: 0.5px solid #ffffff;
}

/* Réduire animations si demandé */
@media (prefers-reduced-motion: reduce){
  .poster, .poster-overlay, .overlay-label .fleche{ transition: none; }
}

/* ===== Mobile : pas de hover → overlay caché par défaut ===== */
@media (hover: none){
  .poster-overlay{ opacity: 0; transform: translateY(10%); }
  .poster-wrapper.is-armed .poster-overlay{ opacity: 1; transform: translateY(0); }
  .poster-wrapper.is-armed .poster{ transform: none; } /* éviter zoom mobile */
}

@media (max-width: 499px){

    .vc_tta-panel-title a{background: #df1c36!important;}
    .vc_tta-title-text {color: #fff!important;}

    .typcn:before {color: #fff;}

    input.wpcf7-form-control.wpcf7-submit.has-spinner {border-radius: 30px;}
    .vc_row.wpb_row.vc_row-fluid.block-tarifs.vc_row-has-fill.vc_row-has-padding-top.vc_row-has-padding-bottom{padding-top: 0px !important;}
    .kd-text-rotator-container {top: -29px;}

    .inline-cf .wpcf7-form-control-wrap input, .woocommerce #wrapper .quantity .qty {border-radius: 40px;}

    .btn-special {margin-top: 50px;}

    .overlay-label {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        font-weight: bold;
        letter-spacing: .08em;
        text-transform: lowercase;
        color: #000;
        font-size: 14px;
        letter-spacing: -1px;
        background: #fff;
        /* background: rgba(0, 0, 0, .55); */
        padding: 1.2rem 1.2rem;
        border-radius: 999px;
    }

    /* Base: rotation partout (évite les overrides) */
    .aujourdhui{
              display: inline-block;
        background: #e53847 !important;
        color: #fff !important;
        transform: rotate(var(--aj-angle, 0deg)) !important;
        -webkit-transform: rotate(var(--aj-angle, 0deg)) !important;
        transform-origin: center;
        padding: 7px 22px;
        font-weight: 800;
    }
}    

/* Ensuite, NE remets plus transform dans les media-queries :
   règle seulement font-size / top / left, etc. */
@media (min-width:1270px){
  .aujourdhui{ font-size:31px; top:0px; right:-1px; position:relative; }
}
@media (min-width:960px) and (max-width:1270px){
  .aujourdhui{ font-size:21px; top:9px; right:-1px; position:relative; }
}
@media (min-width:600px) and (max-width:959px){
  .aujourdhui{ top:-15px; left:-20px; position:relative; font-size:20px; }
}
@media (max-width:599px){
  .aujourdhui{ top:-60px; left:-15px; position:relative; font-size:20px; padding:7px 17px;}
}



.affiches-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .affiches-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .affiches-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .affiches-grid {
    grid-template-columns: 1fr;
  }
}

/* Le conteneur sert de référence aux positions */
.liste-spectacles .spectacle-card{
  position: relative;
  padding-top: 44px;               /* réserve la place des labels */
}

/* Jour (gauche, au-dessus de l’affiche) */
.liste-spectacles .spectacle-card .jour-date{
  position: absolute;
  top: 0; left: 0;
  transform: translateY(-50%);
  margin: 0;
  line-height: 1;
  font-weight: 800;
  color: #bdbdbd;                  /* par défaut (pas aujourd’hui) */
}

/* Badge rouge “Aujourd’hui” */
.liste-spectacles .spectacle-card .badge-aujourdhui{
  display: inline-block;
  background:#e71d36;
  color:#fff;
  padding:.35em .6em;
  border-radius:.25rem;
  font-size: 1rem;
  transform: rotate(-3deg);        /* petit tilt, comme ton style */
  white-space: nowrap;
}

/* Heure (droite, au-dessus de l’affiche) */
.liste-spectacles .spectacle-card .heure{
  position: absolute;
  top: 8px; right: 0;
  transform: translateY(-50%);
  margin: 0;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(1rem, 2.8vw, 1.9rem);
  color: #9e9e9e;                  /* par défaut = gris */
  text-shadow: none;
  letter-spacing: -1px;
}

/* Quand c’est aujourd’hui → texte heure bien blanc + léger glow */
.liste-spectacles .spectacle-card:has(.badge-aujourdhui) .heure{
  top: 7px;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Responsive : on remonte un peu les labels si les cartes sont petites */
@media (max-width: 600px){
  .liste-spectacles .spectacle-card{ padding-top: 40px; }
  .liste-spectacles .spectacle-card .badge-aujourdhui{ font-size: .8rem; }
  .liste-spectacles .spectacle-card .heure{ font-size: clamp(.95rem, 5vw, 1.4rem); }
}

/* Position des labels au-dessus de l’affiche */
.liste-spectacles .spectacle-card{ position:relative; padding-top:30px; }

.liste-spectacles .spectacle-card .jour-date{
  position:absolute; top:8px; left:0; transform:translateY(-50%);
  line-height:1; font-weight:800; margin:0;
}

/* 2 lignes : jour + date */
.liste-spectacles .spectacle-card .jour-date .jour,
.liste-spectacles .spectacle-card .jour-date .date{
  display:block; color:#fff; font-size:.95rem;margin-top: -2px;
}

/* Badge rouge pour aujourd’hui (si présent) */
.liste-spectacles .spectacle-card .badge-aujourdhui{
  display:inline-block; background:#e71d36; color:#fff;
  padding:.35em .6em; border-radius:.25rem; transform:rotate(-3deg);
  white-space:nowrap;
}

.badge-prochainement{
  margin-top: -20px;
    font-size: 12px;
    margin-bottom: 5px;
    letter-spacing: -0.8px;
    display: inline-block;
    background: #e71d36;
    color: #fff;
    padding: .2em .2em;
    border-radius: .2rem;
    transform: rotate(-2deg);
    white-space: nowrap;
    position: absolute;}

@media (max-width: 600px) {
    .home .liste-spectacles .spectacle-card {
        height: 350px;
    }
}


@media (max-width: 600px){
  .liste-spectacles .spectacle-card.is-hidden-mobile{
    display: none !important;
  }
}

/*      CARDS */

.home .liste-spectacles .spectacle-card{
  position: relative;           /* déjà utile pour tes labels */
  transition: opacity .25s ease, filter .25s ease;
}

.home .liste-spectacles .spectacle-card.is-not-today{
  opacity: .35;                 /* toute la carte est estompée */
  filter: grayscale(.15);       /* léger “grisage” optionnel */
}

.home .liste-spectacles .spectacle-card.is-not-today:hover,
.home .liste-spectacles .spectacle-card.is-not-today:focus-within{
  opacity: 1;                 /* remonte un peu au hover/focus */

}

/* Le wrapper est déjà position:relative dans ton code 
.home .liste-spectacles .spectacle-card.is-not-today .poster-wrapper::before {
        letter-spacing: -1px;
    content: "Prochaînement";
    position: absolute;
    top: -4px;
    left: -5px;
    background: #e71d36;
    color: #fff;
    font-weight: 800;
    padding: 1.25rem 1rem;
    border-radius: .3rem;
    transform: rotate(-3deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    pointer-events: none;
    z-index: 1;
    font-size: 1.3em;
}
*/
/* Option : un “ruban” coin supérieur droit 
.home .liste-spectacles .spectacle-card.is-not-today .poster-wrapper::after{
  content: "Prochaînement";
  position: absolute;
  top: 12px; right: -34px;
  width: 160px; text-align: center;
  background: #e71d36; color: #fff; font-weight: 800;
  padding: .35rem 0;
  transform: rotate(35deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 1;
  
  display: none;
}
*/

.home .liste-spectacles .spectacle-card.is-not-today {     opacity: .65; }
.home .liste-spectacles .spectacle-card.is-not-today .poster-wrapper::before {}
.home .liste-spectacles .spectacle-card.is-not-today .heure { color:#9e9e9e; text-shadow:none; }
@media (max-width: 600px) {
    .home .liste-spectacles .spectacle-card.is-not-today .poster-wrapper::before {font-size:16px;left: -9px;z-index:2; }
}


/* Passe à block pour activer le ruban diagonal au lieu du badge */


.home .liste-spectacles .spectacle-card.is-not-today .heure { color:#9e9e9e; text-shadow:none; }


.liste-spectacles { align-content: start!important; } /* anti "cartes en bas" quand la hauteur varie */


.message-box{
  display:none;
  opacity:0;
  transform: translateY(10px) scale(.98);
}

/* visible + anim du cadre (si tu veux garder l’effet) */
.message-box.is-visible{
  display:flex;                 /* <<< important */
  animation: msg-fade-in 600ms cubic-bezier(.16,1,.3,1) forwards,
             msg-ants 18s linear infinite 300ms;
}
@keyframes msg-fade-in{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes msg-ants{to{background-position:0 0,200% 0}}



.message-box.filtre-msg {
    background: transparent!important;
    color: #fff!important;
    font-size: 28px;
    font-weight: 800;
    font-family: REM;
  height:430px!important;
  padding: 160px 0 0 0!important;
}






.single-actualite .actualite-header { margin: 20px 0 10px; }
.single-actualite .actualite-cats { display:flex; gap:.4rem; margin-bottom:.5rem; }
.single-actualite .actualite-cat { background:#000; color:#fff; padding:.2rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem; text-decoration:none; }
.single-actualite .actualite-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height:1.1; margin: 0 0 .25rem; }
.single-actualite .actualite-meta { opacity:.75; margin:0 0 1rem; }
.single-actualite .actualite-hero { margin: 1rem 0 1.5rem; }
.single-actualite .actualite-hero img { width:100%; height:auto; border-radius:12px; }
.single-actualite .actualite-content { font-size:1.05rem; line-height:1.7; }
.single-actualite .actualite-share { display:flex; gap:.6rem; align-items:center; margin-top:1.2rem; }
.single-actualite .actualite-share a { text-decoration:none; font-weight:700; }
.single-actualite .actualite-nav { display:flex; justify-content:space-between; margin:2rem 0; }
.single-actualite .actualite-related .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.single-actualite .related-item img { width:100%; height:auto; border-radius:10px; display:block; }
.single-actualite .related-item h3 { margin:.5rem 0 .25rem; font-size:1rem; line-height:1.2; }



.actu-content p{color:#fff;}
.actu-content {
    max-width: 850px;
    margin: 0 auto;
}

.affiche-sticky a:hover, a:focus {
    color: #cc2829;
    text-decoration: none;
}

.share-btn {
    border: 1px solid #fff;
}
.actu-body {
    padding: 100px 0 90px 0;
    color: #111;
}
h3.actu-card__title a {
    color: #000 !important;
    font-weight: 700;
        font-size: 26px;
        line-height: 26px;
        padding: 0;
        margin-top: 7px;
        margin-bottom: 5px;
}

h1.actu-title {
    color: #fff;
    font-weight: bold;
}


.vc_grid-item-mini .vc_gitem-zone-a .vc_gitem-row-position-middle, .vc_gitem-zone-b .vc_gitem-row-position-middle {

    padding: 0 30px;
    top: 0;
}
.vc_grid .vc_gitem-link {
    color: #000 !important;
}





.actu-hero::before {
        background-position: center 30% !important;
    background-repeat: no-repeat!important;
    background-size: 100% !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), var(--hero, none);
}



.actu-hero {
  padding: 160px 0;
    position: relative;
    color: #fff;
    background: #111;
    padding: clamp(2rem, 6vw, 6rem) 0 clamp(1.5rem, 4vw, 3rem);
    isolation: isolate;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 380px;
    top: 56px;
}

.actualites .tt_button {
        border-color: #222;
    }

.actualites h1 strong {color:#fff!important;}

.navbar-default .navbar-toggle .icon-bar, .navbar-toggle .icon-bar:before, .navbar-toggle .icon-bar:after {
    position: absolute;
    width: 24px;
    height: 2px;
    left: 6px;
    top: 24px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform;
    margin: 0;
    background-color: #fff;
    border-radius: 0;
    color: #fff;
}

.ov-title {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    margin: 0 0 10px;
    font-weight: 800;
    color: #000 !important;
}

.program-margin .liste-spectacles .spectacle-card {
    position: relative;
    padding-top: 0px!important;
    margin-top:-40px!important;
}



@media (max-width:959px){
 #main-menu .navbar-nav .menu-item a {
        font-size: 1.6em;
    }

    .navbar-collapse .navbar-nav {
        margin: 45px 0 !important;
    }
}


@media (max-width:680px){
  .actu-body {padding: 50px 0 90px 0;}
  .single-post-layout-one {padding-top: 0px!important;}
  .actu-body {padding: 40px 30px 90px 30px;}
  .actu-related {padding: 1rem 30px 3rem;}
  .actu-hero {
    top: 7px;
    padding: 0!important;
    margin: 0!important;
    left: 0px !important;}

  .actu-hero::before {
    background-repeat: no-repeat!important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), var(--hero, none)!important;}
}

.actu-related__grid{display:grid;gap:22px;grid-template-columns:2fr}
@media (min-width:680px){.actu-related__grid{grid-template-columns:repeat(2,2fr)}}
@media (min-width:1100px){.actu-related__grid{grid-template-columns:repeat(4,2fr)}}

@media (min-width:1px) and (max-width:499px){
  .vc_row.vc_video-bg-container {
    background-position: 70% 105% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    top: -30px!important;}

    .actu .actu-hero::before {
      background-size: cover!important;           /* garde le cover */
    background-position: 50% 30%!important;     /* centre + remonte la zone utile */
    aspect-ratio: 16/9!important;               /* évite les sauts de layout */
    background-color: #000!important;}
}



/* ≥ 1270px : exactement 4 colonnes */
@media (min-width: 1270px){
  .liste-spectacles{
    grid-template-columns: repeat(5, 1fr) !important;
    /* optionnel: centrer le bloc si tes cartes ont une largeur max */
    justify-content: center;
  }
}

/* ≥ 1270px : exactement 4 colonnes */
@media (min-width:900px) and (max-width: 1269px){
  .liste-spectacles{
    grid-template-columns: repeat(4, 1fr) !important;
    /* optionnel: centrer le bloc si tes cartes ont une largeur max */
    justify-content: center;
  }
}

/* ≥ 1270px : exactement 4 colonnes */
@media (min-width:500px) and (max-width: 899px){
  .liste-spectacles{
    grid-template-columns: repeat(3, 1fr) !important;
    /* optionnel: centrer le bloc si tes cartes ont une largeur max */
    justify-content: center;
  }
}


.lds-ring p 
 {
    color: #ffffff!important;
    letter-spacing: -1px!important;
    font-weight: bold!important;
}