/*--------------------------------------------------------------------*\
        #font-family: "bricolage-grotesque",sans-serif;
\*--------------------------------------------------------------------*/

:root {
    --color-bleu: #0F2642;
    --color-orange: #f77061;
    --color-texte: var(--texte-gris);
    --color-lien: #1a1a1a;
    --color-gris: #CFD3D9;
    --menu-gris: #5A5858;
    --texte-gris: #333;
    --typography-primary-font-family: 'bricolage-grotesque';
    --bold: 600;
    --Primary-color: var(--color-bleu);
}

/*--------------------------------------------------------------------*\
        #Surcharge CSS
\*--------------------------------------------------------------------*/

/*---------------------------------------*\
        #Accueil
\*---------------------------------------*/

@media screen and (min-width: 768px) {

    .lienAccueilHeader:hover,
    .lienSiteHeader:hover,
    .compCompte:hover,
    .compPanierVide .topContentComposants:hover,
    .compPanier .topContentComposants:hover {
        border-bottom: 5px solid var(--color-orange);
    }
}

#langageEN .compListeFiltre a img+p::after,
.compListeFiltre a p .infoElement,
.descriptionHeader {
    display: none;
}

.compListeFiltre a {
    min-height: 109px;
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}

.compListeFiltre a:hover {
    opacity: 1;
    background-color: #fff1ef;
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}

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

    .compListeFiltre a img {
        height: 300px;
        width: 300px;
    }

    .headerAdministrable {
        margin: 50px auto;
    }
}

/*---------------------------------------*\
        #Calendrier
\*---------------------------------------*/

#pageEtape1 .dataContentComposants .descContent {
    padding: 20px 20px 0 !important;
}

div.dp-popup div.dp-nav-prev .dp-nav-prev-year,
div.dp-popup div.dp-nav-next .dp-nav-next-year {
    display: none;
}

.calendarHeureLines,
div.dp-popup .dp-calendar .jCalendar tbody td.today,
div.dp-popup .dp-calendar .jCalendar tbody .other-month,
div.dp-popup .dp-calendar .jCalendar tbody .current-month {
    background: var(--gray-Primary-color);
    border: 2px solid var(--gray-Primary-color);
    color: #000000;
    font-weight: var(--bold);
}

#contenuCalendarHeures,
div.dp-popup .dp-calendar .jCalendar tbody td.other-month.disabled,
div.dp-popup .dp-calendar .jCalendar tbody td.current-month.disabled,
div.dp-popup .dp-calendar .jCalendar tbody td.other-month.disabled:hover,
div.dp-popup .dp-calendar .jCalendar tbody td.current-month.disabled:hover,
div.dp-popup h2,
div.dp-popup {
    background: var(--gray-Primary-color);
    border: 2px solid var(--gray-Primary-color);
    color: #999;
    font-weight: 400;
}

.calendarHeureLines:hover,
div.dp-popup .dp-calendar .jCalendar tbody td.selected,
div.dp-popup .dp-calendar .jCalendar tbody .other-month:hover,
div.dp-popup .dp-calendar .jCalendar tbody .current-month:hover,
div.dp-popup .dp-calendar .jCalendar tbody td.other-month.dp-hover,
div.dp-popup .dp-calendar .jCalendar tbody td.current-month.dp-hover {
    background-color: var(--gray-Primary-color);
    border: solid 2px var(--color-orange);
    color: #000000;
    font-weight: var(--bold);
}

div.dp-popup .dp-calendar .jCalendar tbody td.indispo:hover,
div.dp-popup .dp-calendar .jCalendar tbody td.indispo {
    color: #fff !important;
    background: var(--color-orange) !important;
    border: 2px solid var(--color-orange);
}

div.dp-popup h2,
div.dp-popup .dp-calendar .jCalendar thead th,
.calendarHeureLines a {
    color: #000000 !important;
    font-weight: var(--bold);
}

div.dp-popup div.dp-nav-prev a,
div.dp-popup div.dp-nav-next a {
    color: #000000 !important;
}

#langageEN .calendarHeureLines {
    width: 65px;
}

/* 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(--text_disabled);
    border-radius: 5px;
}

.calendarIndex .Index .etat-indispo {
    background-color: var(--gray-Primary-color) !important;
    border: 1px solid var(--gray-Primary-color);
    color: #999;
    font-weight: var(--bold);
}

.calendarIndex .Index .etat-complet {
    color: #fff !important;
    background: var(--color-orange) !important;
    border: 2px solid var(--color-orange);
    font-weight: var(--bold);
}

.calendarIndex .Index .etat-dispo {
    background-color: var(--gray-Primary-color) !important;
    border: 1px solid var(--gray-Primary-color);
    color: #000000;
    font-weight: var(--bold);
}

.calendarIndex .Index .etat-select {
    background-color: var(--gray-Primary-color) !important;
    border: 2px solid var(--color-orange);
    color: #000000;
    font-weight: var(--bold);
}

.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;
    }
}

/*---------------------------------------*\
        #Footer
\*---------------------------------------*/

.compFooterMarqueBlanche .headerComposants .footerComposants .contentComposants .dataContentComposants .mentionsLegales a,
.compFooterMarqueBlanche .headerComposants .footerComposants .contentComposants .dataContentComposants .conditionsGenerales a,
.compFooterMarqueBlanche .headerComposants .footerComposants .contentComposants,
#PoweredSeeTickets {
    color: #fff;
}

.compFooterMarqueBlanche .headerComposants .footerComposants .contentComposants .dataContentComposants #svgLogoSeetickets {
    fill: #fff;
}

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

    .compFooterMarqueBlanche .headerComposants .footerComposants .contentComposants .dataContentComposants {
        height: 250px;
    }

    .all-list {
        width: 230px;
    }

    #PoweredSeeTickets {
        width: 100%;
    }

    .compFooterMarqueBlanche .headerComposants .footerComposants .contentComposants .dataContentComposants .paiement {
        width: 300px;
    }
}

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

    #PoweredSeeTickets {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}