:root {
--transparent: transparent;
  --Primary-color: #000000;
  --Secondary-color: #1c1c1c;
  --Tertiary-color: #ffffff;
  --gray-Primary-color: #f7f7f7;
  --gray-Secondary-color: #f3f3f3;
  --gray-Tertiary-color: #777777;
  --text-primary-color: #000000;
  --text-secondary-color: #ffffff;
  --text-Tertiary-color: #333333;
  --text-Quaternary-color: #555555;
  --line-Primary-color: #999999;
  --line-Secondary-color: #d6d6d6;
  --background-highlight: #fffbec;
  --background-gray: #e6e6e6;
  --background-hover-gray: #d8d8d8;
  --backgroung-panier-color: var(--Secondary-color);
  --typography-primary-font-family: neue-haas-grotesk-display, sans-serif;;
  --typography-secondary-font-family: "roboto-condensed";
  --typography-primary-font-weight: 400;
  --typography-secondary-font-weight: 700;
  --border-radius-0 : 0px;
  --border-radius-10 : 10px;
  --border-radius-30 : 30px;


}

/*--------------------------------------------------------------------*\
        # header
\*--------------------------------------------------------------------*/

.ligneContent3{
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .headerAdministrable {
        height: 100% !important;
    }
}

.titre-vel{
    display: none;
}

/* .colonneAccueilContent1{
    width: 980px;
} */
/*----------------------------------*\
        # fil d'ariane
\*----------------------------------*/

.compFilAriane .headerComposants .footerComposants .contentComposants .dataContentComposants span.text{
    text-align: left;
    padding-left: 5px;
}

@media screen and (max-width: 767px) {
.compFilAriane .headerComposants .footerComposants .contentComposants .dataContentComposants span.text{
    width: auto;
}
}
/*----------------------------------*\
        # content
\*----------------------------------*/

.ligneContent2 {
    background-color: var(--Tertiary-color);
}

.ligneContent2,
.ligneContent2 a {
    color: var(--Primary-color);
}

.compPanierVide:hover,
#compPanier1 .deroulePanier a:hover,
.ligneContent2:hover,
.ligneContent2 a:hover {
    color: var(--Primary-color);
}

.compPanierVide .topContentComposants:hover,
.compPanier .topContentComposants:hover,
.compCompte:hover,
.lienSiteHeader:hover,
.lienAccueilHeader:hover {
    border-bottom: 0 solid #840265;
}
/*--------------------------------------------------------------------*\
        # Accueil
\*--------------------------------------------------------------------*/

.titre-vel p {
    text-align: center;
    color: var(--Primary-color);
    font-family: var(--typography-primary-font-family);
    text-transform: capitalize;
    letter-spacing: 3px;
    font-weight: 400;
    font-size: 35px;
    width: fit-content;
    margin: 0 auto;
}

.cadre-accueil {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0 20px;
    width: fit-content;
    text-decoration: none;
    color: inherit;
    margin: 0 auto;
    padding: 0px 20px 20px;
}

/* event ds rgpt */
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd,
/* event */
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement,
.compListeFiltre a {
    width: 180px;
    border-bottom: none;
    border-radius: var(--border-radius-0);
    position: relative;
    overflow: inherit;
    cursor: pointer;
    transition: 0.2s;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--transparent);
    display: flex;
    flex-flow: wrap-reverse;
    background-image: none!important;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-left: 0px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl{
    background-color: var(--Tertiary-color);
    display: flex;
    flex-flow: column-reverse;
    height: 310px;
    justify-content: flex-end;
    margin: 0px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd{
    min-height: 300px;
    width: 100%;
    margin: 0px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl:last-child{
    margin-bottom: auto ;
}

.compListeFiltre a p .rgp-button{
    display: none;
}

.titre-event {
    text-align: left;
    color: var(--Primary-color);
    font-size: 35px;
    border-bottom: 1px solid currentColor;
    padding-bottom: 8px;
    margin-bottom: 20px;
    width: 980px;
}

@media screen and (max-width: 980px) {
    .titre-event {
        font-size: 28px;
        width: 100%;
    }
}

.titre-event p { 
    text-transform: uppercase; 
}

.titre-event .billets {
  font-style: italic;
  font-weight: 400;
}

.titre-event .exposition {
  font-weight: 700;
}

.titre-event .vie {
  font-style: italic;
  font-weight: 400;
}

.titre-event .musee {
  font-weight: 700;
}

.btn-reserver{
    font-size: 22px;
    border: 1px solid var(--gray-Tertiary-color);
    border-radius: var(--border-radius-30);
    padding: 5px;
    margin-top: 10px;
    display: block;
}

span.btn-reserver:nth-child(1){
    width: 200px;

}

.evenementListe{
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dt,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl dt {
    width: 180px;
    height: 200px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dt img,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl dt img {
    height: 200px;
    width: 180px;
    border-radius: var(--border-radius-0);
    z-index: 2;
    position: inherit;
    bottom: 245px;
}

.compListeFiltre a:last-child {
    margin-bottom: auto;
}

.compListeFiltre a p .dateElement,
.compListeFiltre a p .coordElement,
.compListeFiltre a p .infoElement{
    display: none;
}

.compListeFiltre a p .nameElement{
    font-size: 22px;
    font-weight: normal;
    font-style: italic;
}

.compListeFiltre a img{
    display: inherit;
    position: inherit;
    height: 200px;
    width: 180px;
    border-radius: var(--border-radius-0);
}

.compListeFiltre a p{
    display: flex;
    flex-flow: column;
    padding: 5px;
    margin-left: 0;
    max-width: 100%;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dt .evenementNom{
    display: block;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementTarifs, 
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl dd .representationTarifs,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementSalle,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementSousGenre,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementDate, 
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl dd .representationDate,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementGenre,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dt .evenementNom{
    display: none;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd a.evenementReserver{
    font-size: 22px;
    border-radius: var(--border-radius-30);
    padding: 5px;
    margin-top: 10px;
    display: block;
    background-color: var(--transparent);
    color: var(--Primary-color);
    position: inherit;
    bottom:-200px;
    right:0px;
    text-transform: none;
    border:1px solid var(--gray-Tertiary-color);
    border-radius: var(--border-radius-30);
    color: var(--text-Quaternary-color);
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd a.evenementReserver:hover{
    font-size: 22px;
    border-radius: var(--border-radius-30);
    padding: 5px;
    margin-top: 10px;
    display: block;
    background-color: var(--transparent);
    color: var(--Primary-color);
    position: inherit;
    bottom:-200px;
    right:0px;
    text-transform: none;
    border:1px solid var(--gray-Tertiary-color);
    border-radius: var(--border-radius-30);
    color: var(--text-Quaternary-color);
}

@media screen and (max-width: 767px) {
  .evenementReserver{
    bottom: -200px!important;
  }

  .compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl{
    width: 335px!important;
  }

  .compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd{
    width: 180px!important;
  }

  .compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl{
    align-items: center;
  }
}
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementNom, 
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl dd .representationNom{
    font-size: 22px;
    font-weight: normal;
    font-style: italic;
    width: 55%;
    text-transform: uppercase;
    left:40px;
    position: inherit;
}

@media screen and (max-width: 767px) {
    .compListeFiltre .headerComposants .footerComposants .contentComposants .dataContentComposants a {
        margin: 14px;
        width: 180px;
    }

    .compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dt,
    .compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl dt {
        margin: 0;
    }
}

.bandeauEtat{
    backdrop-filter: none
}

/*--------------------------------------------------------------------*\
        # Event ds rgpt
\*--------------------------------------------------------------------*/

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .objetListeMain dl {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .objetListeMain dl dt {
    display: none;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .objetListeMain dl dt img {
    width: 180px;
    height: 180px;
    border-radius: var(--border-radius-0);
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .objetListeMain dl dd h1 {
    color: var(--Primary-color)!important;
    font-size: 1.8333rem;
    font-weight: 700;
    text-align: center;
    font-family: var(--typography-primary-font-family);
    text-transform: capitalize;
    letter-spacing: 3px;
    font-weight: 400;
    font-size: 35px;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .objetListeMain dl dd .objetInfo {
    color: var(--Primary-color);
    font-size: 15px;
}

.cadre-event {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: fit-content;
    text-decoration: none;
    color: inherit;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .cadre-event {
    flex-direction: column;
    }
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement {
    min-height: 300px;
    margin-bottom: 0;
    background-color: var(--transparent);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 180px;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dt,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dt {
    width: 180px;
    height: 250px;
    margin-top: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
}


.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetReserver{
    position: initial;
    font-size: 22px;
    border: 1px solid var(--gray-Tertiary-color);
    border-radius: var(--border-radius-30);
    padding: 5px;
    margin-top: 10px;
    display: block;
    width: 200px;
    background: transparent;
    color: var(--text-Quaternary-color)!important;
    text-transform: initial;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dt img {
    width: 180px;
    height: 310px;
    margin-left: 0;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement:hover,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl:hover,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl:hover,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement:hover,
.compListeFiltre a:hover {
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 1;
    z-index: 1;
    transform: scale(1.05);
}

#compListeFiltreContent1 > div:nth-child(2){
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetNom, 
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetNom,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetDate, 
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetDate,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetGenre, 
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetGenre,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetSousGenre, 
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetSousGenre,
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetTarifs, 
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dd .objetTarifs
{
    display: none;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dt .objetNom, 
.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dt .objetNom{
    display: block;
    font-size: 22px;
    font-style: italic;
    text-transform: uppercase;
    width: 90%;
}

.compListeObjet .compObjetRegroupement .headerComposants .footerComposants .contentComposants .dataContentComposants .compObjetEvenement .headerComposants .footerComposants .contentComposants .dataContentComposants dl dt img{
    width: 180px;
    height: 200px;
    border-radius: var(--border-radius-0);
}

@media screen and (max-width: 767px) {
  .objetListeMain{
    background-color: var(--Tertiary-color);
  }
}
/*--------------------------------------------------------------------*\
        # CALENDAR
\*--------------------------------------------------------------------*/

.compCalendrier{
    margin: 0px;
}

#pageEtape1 .compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dl,
.calendarHeureLines{
    background-color: var(--Tertiary-color);
    border: 1px solid var(--Primary-color);
}

.compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dt img{
    border-radius: 0px;
}

.calendarHeureLines a{
    color:var(--Primary-color-color)
}

.infoOverflowed{
    overflow: inherit;
    height: auto;
}

.compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dd .overflowInfo {
    display: none;
}

div.dp-popup,
#contenuCalendarHeures{
    background-color: var(--Tertiary-color);
}

div.dp-popup .dp-calendar .jCalendar tbody td.today{
    background-color: var(--background-highlight);
    color:var(--Primary-color)
}

div.dp-popup h2,
div.dp-popup .dp-calendar .jCalendar tbody td.other-month.empty, 
div.dp-popup .dp-calendar .jCalendar tbody td.current-month.empty,
div.dp-popup .dp-calendar .jCalendar tbody td.other-month.disabled{
    background-color: var(--Tertiary-color);
    border:0px
}

div.dp-popup .dp-calendar .jCalendar tbody .other-month, div.dp-popup .dp-calendar .jCalendar tbody .current-month{
    background-color: var(--Tertiary-color);
    color: var(--Primary-color);
    border: 1px solid var(--Primary-color)
}

div.dp-popup .dp-calendar .jCalendar tbody td.selected{
    background-color: var(--Primary-color);
    color:var(--Tertiary-color);
    border:1px solid #5B5B5B
}


/* legende calendrier */
.calendarIndex .Index-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.calendarIndex .Index-row-top,
.calendarIndex .Index-row-bottom {
    display: flex;
    justify-content: left;
    gap: 30px;
}

.calendarIndex .Index-row-bottom {
    justify-content: left;
    gap: 40px;
}

.calendarIndex .Index li {
    display: inline;
}

.calendarIndex {
    font-size: 14px;
    margin-left: 5px;
    padding: 10px;
}

.calendarIndex .Index .colorIndex {
    padding: 5px 15px;
    font-size: 12px;
    color: var(--Primary-color);
    border-radius: 0px;
}

.calendarIndex .Index .etat-jour {
    background-color: var(--background-highlight);
    color:var(--Primary-color);
    border:1px solid var(--Primary-color);
    border-radius: var(--border-radius-10);
}

.calendarIndex .Index .etat-dispo {
    background-color: var(--Tertiary-color);
    color: var(--Primary-color);
    border: 1px solid var(--Primary-color);
    border-radius: var(--border-radius-10);
}

.calendarIndex .Index .etat-indispo {
    color: #999;
    background-color: var(--gray-Secondary-color);
    border:1px solid var(--Primary-color);
    border-radius: var(--border-radius-10);
}

.calendarIndex .Index .etat-complet {
    background-color: var(--gray-Primary-color) !important;
    border: 1px solid var(--Primary-color);
    color: var(--gray-Tertiary-color);
    text-decoration: line-through;
    border-radius: var(--border-radius-10);
}

.calendarIndex .Index .etat-select {
    background-color: var(--Primary-color);
    color:var(--Tertiary-color);
    border:1px solid #5b5b5b;
    border-radius: var(--border-radius-10);
}

.calendarIndex .Index .txtIndex {
    margin-left: 7px;
    font-size: 9px;
}

.calendarIndex .Index {
    margin-bottom: 5px;
}

@media screen and (max-width: 767px) {

    .calendarIndex .Index-container,
    .calendarIndex .Index-row-top,
    .calendarIndex .Index-row-bottom {
        display: flex;
    }

    .calendarIndex .Index {
        margin: 15px 0;
    }
}

/*--------------------------------------------------------------------*\
        # ETAPE2
\*--------------------------------------------------------------------*/

@media screen and (min-width: 768px) {
    .compNouveauClient table input {
        padding: 7px;
        width: 217px;
    }

    .compDejaClient table tr td input#dejamail,
    .compDejaClient table tr td input#dejapass {
        width: 221px;
        padding: 7px;
        text-indent: 13px;
    }
}

/*--------------------------------------------------------------------*\
        # footerAdministrable
\*--------------------------------------------------------------------*/

.footerAdministrable .footerAdministrableLine {
    padding: 59px 0 0;
}

.footerAdministrableColumn div a {
    margin: 0 auto !important;
    padding: 5px 0;
}

.faPaiementSecurise {
    text-align: right;
    float: inline-end;
}