/* Font "proxima-nova" */
@import url("https://use.typekit.net/yfo1abg.css");

@font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/l?subset_id=2&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/d?subset_id=2&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/a?subset_id=2&fvd=n6&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
}

@font-face {
    font-family: "proxima-nova";
    src: url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}
/*------------------------------------*\
    # VARIABLES
\*------------------------------------*/

:root {
    --typography-primary-font-family: "proxima-nova";
    --Primary-color: #000000;
}

body {
    font-family: var(--typography-primary-font-family), sans-serif;
}

/*------------------------------------*\
    # HEADER
\*------------------------------------*/
.ligneContent2 {
    background-color: #fff;
    backdrop-filter: blur(2px);
}

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

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

.compPanierVide .topContentComposants:hover,
.compPanier .topContentComposants:hover,
.compCompte:hover,
.lienSiteHeader:hover,
.lienAccueilHeader:hover {
    border-bottom: 1px solid;
}

.compCompte .compteBouton a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.773' height='20.773' viewBox='0 0 20.773 20.773'%3E%3Cpath d='M13.387,3A10.387,10.387,0,1,0,23.773,13.387,10.391,10.391,0,0,0,13.387,3Zm0,3.116a3.116,3.116,0,1,1-3.116,3.116A3.112,3.112,0,0,1,13.387,6.116Zm0,14.749a7.479,7.479,0,0,1-6.232-3.345c.031-2.067,4.155-3.2,6.232-3.2s6.2,1.132,6.232,3.2A7.479,7.479,0,0,1,13.387,20.865Z' transform='translate(-3 -3)' fill='%23000000'/%3E%3C/svg%3E");
}

.compPanierVide .topContentComposants::before,
.compPanier .topContentComposants::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24.079' height='20.773' viewBox='0 0 24.079 20.773'><path d='M21.6,12.807L16.8,5.632a1.065,1.065,0,0,0-.908-.465,1.078,1.078,0,0,0-.908.465l-4.794,7.174H4.951A1.1,1.1,0,0,0,3.856,13.9a1.285,1.285,0,0,0,.038.3L6.669,24.343a2.195,2.195,0,0,0,2.112,1.6H23.01a2.182,2.182,0,0,0,2.107-1.6l2.775-10.146a.976.976,0,0,0,.044-.29,1.1,1.1,0,0,0-1.095-1.095H21.6Zm-8.986,0L15.9,7.991l3.283,4.816H12.612ZM15.9,21.563a2.189,2.189,0,1,1,2.189-2.189A2.188,2.188,0,0,1,15.9,21.563Z' transform='translate(-3.856 -5.167)' fill='%23000000'/></svg>");
}

#compPanier1 .headerComposants .footerComposants .contentComposants .dataContentComposants,
#compPanier1 .totalValiderPanier .totalPanier,
#pageAccueil #compPanier1 .totalValiderPanier,
.supPanier,
#compPanier1 .bottomRecapPanier .supRecapPanier .lienSupRecapPanier {
        background-color: #fff;
}

.supPanier{
        margin:0px;
        border-radius: 30px;
}

.infoPanier{
        color:var(--Primary-color)
}

#compPanier1 .totalValiderPanier .validerPanier a{
        border: solid 1px var(--Primary-color);
        color: #fff;
        background-color: var(--Primary-color);
}

#compPanier1 .totalValiderPanier .validerPanier a:hover {
  background: transparent;
  color: var(--Primary-color);
}

.bottomRecapPanier{
        border-top:0px
}

#compPanier1 .listeRecapPanier .recapPanier .infosRecapPanier .nom a,
#compPanier1 .listeRecapPanier .recapPanier .infosRecapPanier .date,
#compPanier1 .listeRecapPanier .recapPanier .infosRecapPanier .tarif,
#compPanier1 .listeRecapPanier .recapPanier .infosRecapPanier .prix,
#compPanier1 .totalValiderPanier .totalPanier{
        color:var(--Primary-color)
}

@media screen and (max-width: 767px) { 
        #compPanier1 .headerComposants .footerComposants .contentComposants .dataContentComposants .listeRecapPanier{
                background-color: #fff;
                border-top:0;
        } 
}

@media screen and (max-width: 980px) {
  #compPanier1 .cachePanier a {
    width: 15% !important;
  }
}

/*------------------------------------*\
    # ACCUEIL
\*------------------------------------*/

.ligneContent3 {
    margin-top: 135px;
}

.cadre-colonne-content {
    margin: 30px auto 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.compAccueil {
    padding: 10px 10px 10px 10px;
    width: 700px;
}

.evenementInfo,
.evenementInfoComp,
#compHTML1,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementSalle .evenementSalleVille,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementSalle::before,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd a.evenementReserver,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementSousGenre,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementGenre
 {
    display: none;
}

.compAccueil .evenementTarifs .evenementTarifsDetails .evenementTarifsChoix {
    font-size: 14px;
    margin-top: 10px;
    font-weight: 700;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementTarifs .evenementTarifsDetails{
    margin-top: 0px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementSalle {
    max-width: 100%;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementGenre {
    margin: 0 5px 5px 0;
}

a.evenementDate time {
    font-size: 13px;
}

a.evenementNom {
    font-size: 18px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementDate,
.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .representationListe dl dd .representationDate {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
}

div.evenementListe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 729px) {
  div.evenementListe {
    grid-template-columns: 1fr;
  }

  .compAccueil{
        width: 100%;
  }
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl{
    justify-self: center;
    border: solid #000 0px;
    border-radius: 10px;
    width: 300px;
    min-height: 435px;
    text-align: center;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl:hover{
    background-color: #f0f0f0;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dt{
    float: none;
    width: 300px;
    height: 300px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd .evenementNom{
    width: 100%;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dd{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-left: 0px;
    margin-top: 20px;
    position: relative;
    text-align: center;
    height: 190px;
}

.compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl dt img{
    width: 300px;
    height: 300px;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

@media screen and (max-width: 767px) {
  .compAccueil .headerComposants .footerComposants .contentComposants .dataContentComposants .evenementListe dl:first-child {
    margin-top: 0;
  }
}

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

    .cadre-colonne-content {
        box-shadow: 0 0 0px rgba(0, 0, 0, .2);
    }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
    .ligneContent3 {
        margin-top: 125px !important;
    }
}


@media screen and (max-width: 767px) {
    .ligneContent3 {
        margin-top: 50px;
    }
}

@media (min-width: 1024px) {
  div.evenementListe {
    column-gap: 48px;
  }
}

/*------------------------------------*\
    # ETAPE1
\*------------------------------------*/

#pageEtape1 .compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dl {
    overflow: hidden;
    background-color: var(--gray-Primary-color);
    padding: 20px;
    display: flex;
    gap: 20px;
}

.compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dt {
    height: 180px;
    width: 180px;
}

.compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dt img {
    width: 180px;
    height: 180px;
}

.bandeauEtat {
    width: 180px;
    height: 180px;
}

.compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dd {
    width: 660px;
    padding-left: 0px;
}

#pageEtape1 #compBody #compBodyHeader #compBodyFooter #compBodyContent .dataContentComposants .buttonsContainer {
    margin-bottom: 0px;
}

@media screen and (max-width: 767px) {
    .compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dl dt {
        width: 110px !important;
        height: 110px !important;
    }

    .compObjet .headerComposants .footerComposants .contentComposants .dataContentComposants dt img {
        width: 110px !important;
        height: 110px !important;
    }

    .bandeauEtat {
        width: 110px !important;
        height: 110px !important;
    }
}

/*------------------------------------*\
    # CALENDRIER
\*------------------------------------*/
div.dp-popup .dp-calendar .jCalendar tbody .current-month{
    color: #5B5B5B;
    background-color: #8ee175;
    cursor: pointer;
    border: 2px solid #999
}

div.dp-popup .dp-calendar .jCalendar tbody td.current-month.disabled{
  background: #999;
  color: #fff;
  border: 2px solid #999;
  pointer-events: none;
}

div.dp-popup .dp-calendar .jCalendar tbody td.current-month.dp-hover{
    background-color: var(--gray-Primary-color);
    color:#000000
}

div.dp-popup .dp-calendar .jCalendar tbody td.selected{
    background-color: #fff;
    color:#000
}

div.dp-popup .dp-calendar .jCalendar tbody td.today{
    background-color: #D5B992;
    color:#000;
}

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: #f3f3f3;
    border:0px
}

/*------------------------------------*\
    # 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: 16px;
}

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

.calendarIndex .Index .etat-jour {
   background-color: #D5B992;
    color:#000;
    border: 1px solid #999;
    color: var(--Secondary-color);
    border-radius: 10px;
}

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

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

.calendarIndex .Index .etat-dispo {
    color: #5B5B5B;
    background-color: #8ee175;
    cursor: default;
    border: 1px solid #5B5B5B;
    border-radius: 10px;
}

.calendarIndex .Index .etat-select {
    background-color: #fff;
    color:#000;
    border: 1px solid #5B5B5B;
    border-radius: 10px;
}

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

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

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

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

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

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

#compModeDeDiffusionContent1 {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    margin-top: 20px;
}

.compModeDeDiffusion .headerComposants .footerComposants .contentComposants .dataContentComposants,
.compModeDeDiffusion .headerComposants .footerComposants .contentComposants .msg-mode-diffusion {
    padding: 20px;
    flex: 1;
    font-size: 1.1rem;
}

.compModeDeDiffusion .headerComposants .footerComposants .contentComposants .dataContentComposants .modeDeDiffusion {
    width: 390px;
}

.compModeDeDiffusion .headerComposants .footerComposants .contentComposants .msg-mode-diffusion {
    background-color: var(--gray-Primary-color);
    border-radius: 8px;
    margin-right: 20px;
}

.compModeDeDiffusion .headerComposants .footerComposants .contentComposants .msg-mode-diffusion a {
    font-weight: 700;
}

.compModeDeDiffusion .headerComposants .footerComposants .contentComposants .dataContentComposants .modeDeDiffusion td.tableColonne1 {
    width: 100%;
}

.modeDeDiffusion .tableColonne2,
.modeDeDiffusion .tableColonne3,
.compModeDeDiffusion .topContentComposants,
.compModeDeDiffusion .dataContentComposants .tableDesc,
.compModeDeDiffusion .dataContentComposants .tableHeader {
    display: none !important;

}

@media screen and (max-width: 475px) {
    .compModeDeDiffusion .headerComposants .footerComposants .contentComposants .dataContentComposants .modeDeDiffusion td.tableColonne1 {
        width: 100% !important;
    }

    #compModeDeDiffusionContent1 {
        flex-direction: column;
    }

    .compModeDeDiffusion .headerComposants .footerComposants .contentComposants .msg-mode-diffusion {
        margin: 0 20px;
    }

    #dejapass {
        height: 35px;
    }
}

/*------------------------------------*\
    # ETAPE3
\*------------------------------------*/

table.reduction th {
    display: none;
}

.divBoxReductionMessage {
    font-size: 1.8333rem;
    font-weight: 700;
    color: var(--Primary-color);
}

.btCodeReduction {
    border-radius: 10px;
    border: 3px solid var(--Primary-color);
    background-color: var(--Primary-color);
}

.btCodeReduction:hover {
    background-color: var(--transparent);
    color: var(--Primary-color);
}

#recapAchat #libelleRecapAchat {
    font-size: 20px;
    font-weight: 500;
}

#recapAchat #infoRecapAchat {
    font-size: 18px;
}

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

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

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

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

.footerAdministrable .footerAdministrableLine a {
    font-size: 1.25rem;
}

@media screen and (max-width: 767px) {
    .footerAdministrable .footerAdministrableLine {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .faContactAssistance {
        margin-bottom: 7px;
    }

    .faPaiementSecurise {
        line-height: 40px;
    }
}