/*  Breakpoints */
/*  https://getbootstrap.com/docs/5.0/layout/breakpoints/ */



body {
}

.divAppli {
    min-height: 60em;
}


.divMenuHaut {
    position: fixed;
    z-index: 2000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 4em;
}


@media (max-width: 767px) {
    .divMenuHaut {
        display: none;
    }
}



.menuVideo {
    display: none;
    position: absolute;
    top: 2.1rem;
    left: 0px;
    width: 100%;
    min-width: 3em;
    text-align: left;
    padding-top: .5em;
    padding-bottom: .5em;
    background-image: url('../Images/fndMenuVideos.png');
}

    .menuVideo a {
        padding-left: 5%;
        padding-right: 5%;
        margin-left: -5%;
        margin-right: -5%;
    }

    .menuVideo a:hover {
        text-decoration: underline;
    }



    /* Entete et menu pour smartphone */
    #divEnteteSmart {
        display: none;
        position: fixed;
        z-index: 2000;
        width: 100%;
        height: 4.5em;
        top: 0px;
        left: 0px;
        background-image: url('../Images/fndMenu.png');
    }



@media (max-width: 767px) {
    #divEnteteSmart {
        display: block;
    }
}


#divEnteteSmart .divMenu {
    padding-top: 1rem;
    text-align: right;
}



/* menu Smart */
.menu-smart {
    position: absolute;
    z-index: 1000;
    overflow: hidden;
    height: 1rem;
    width: 100%;
    top: 3.75rem;
    right: 0rem;
    padding-top: 0rem;
    background-color: white;
    transition: height .5s, opacity .5s;
}


.menu-smart {
    /*display: none;*/
    opacity: 0;
}

.menu-smart-ouvert {
    opacity: 1;
    height: 19rem;
    transition: height .5s, opacity .5s;
}


.menu-smart a {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: 1.2em;
    text-align: center;
}

    .menu-smart a:hover {
        color: #002450;
        text-decoration: none;
    }


a.menu-smart-fermer {
    font-weight: 600;
    padding-bottom: 3rem;
    font-size: 1.25em;
}

    a.menu-smart-fermer:hover {
        text-decoration: none;
    }



#divEnteteSmart img {
    width: 100%;
    max-width: 3em;
}



.divResume {
    position: absolute;
    top: -33.5em;
    left: -5.5em;
}


@media (max-width: 1400px) {
    .divResume {
        top: -30em;
    }
}


@media (max-width: 992px) {
    .divResume {
        position: relative;
        top: 0rem;
        left: -2em;
    }
}


.divReso {
    /*display: none;*/
    position: fixed;
    bottom: 10em;
    right: 1em;
    width: 3.5em;
}


    .divReso img {
        width: 100%;
    }


    .divReso .imgInsta {
        position: relative;
        top: 2em;
        left: 0em;
    }


    .divReso .imgUtube {
        position: relative;
        top: 0em;
        left: 0em;
    }

    .divReso .imgFace {
        position: relative;
        top: 4em;
        left: 0em;
    }



    .divContenu {
        z-index: 1000;
        position: relative;
        top: 0px;
        left: 0px;
        margin-top: 45.5vw;
        min-height: 60em;
    }

    @media (max-width: 1200px) {
        .divContenu {
            margin-top: calc(2em + 53vw);
        }
    }


    @media (max-width: 992px) {
        .divContenu {
            margin-top: 60vw;
            margin-top: calc(4em + 60vw);
        }
    }


    @media (max-width: 768px) {
        .divContenu {
            margin-top: 40em; /* tenir compte du font-size du menu */
        }
    }

    @media (max-width: 576px) {
        .divContenu {
            margin-top: 25em;
        }
    }



    .divPresentation p {
        font-size: 1.5em;
    }



    @media (max-width: 576px) {
        .divPresentation p {
            font-size: 1.25em;
        }
    }



    .divPartenaire {
        min-height: 12em;
        padding-top: 4em;
        padding-bottom: 4em;
        margin-top: 0em;
        margin-bottom: -3em;
    }

    .divPartenaire-titre {
        margin-bottom: -3.25em;
        padding-top: 2em;
        padding-bottom: 2em;
    }


        .divPartenaire-titre h2 {
            margin: 0;
            padding: 0;
        }

    .divCitation p {
        margin: 5em;
        margin-top: 0em;
        margin-bottom: 1em;
        padding-top: 1em;
    }


    /*Vidéo*/

    .divPanneauLarge {
        position: relative;
        width: 100%;
        min-height: calc(5rem + 50vw);
    }


    @media (max-width: 768px) {
        .divPanneauLarge {
            min-height: 45rem;
        }
    }


    @media (max-width: 576px) {
        .divPanneauLarge {
            min-height: 25rem;
        }
    }




    .divPanneauLarge .divFndMagique {
        z-index: 500;
        position: absolute;
        top: 0px;
        height: 62em;
        left: 0px;
        width: 100%;
    }

    @media (max-width: 768px) {
        .divPanneauLarge .divFndMagique {
            height: 45rem;
        }
    }


    @media (max-width: 576px) {
        .divPanneauLarge .divFndMagique {
            height: 30rem;
        }
    }






    .divPanneauLarge .divMp4 {
        position: relative;
        top: 15em;
        z-index: 1000;
    }

    @media (max-width: 768px) {
        .divPanneauLarge .divMp4 {
            top: 7em;
        }
    }


    .divPanneauLarge .couvert {
        position: absolute;
        top: 0px;
        left: 0px
    }

    .divPanneauLarge .divMp4 img {
        width: 100%;
    }



    .divPanneauLarge .iconVideo {
        position: absolute;
        z-index: 1000;
        width: 5rem !important;
        top: 50%;
        left: 48%;
        cursor: pointer;
    }



    .divPanneauLarge .divTitre {
        position: absolute;
        z-index: 1000;
        top: 24em;
        left: -2em;
        padding-top: 5em;
        padding-bottom: 5em;
        padding-left: 1.5em;
        padding-right: 1.5em;
    }


    @media (max-width: 768px) {
        .divPanneauLarge .divTitre {
            position: relative;
            top: 10em;
            left: 0px;
            padding-top: 3em;
            padding-bottom: 3em;
        }
    }

    @media (max-width: 576px) {
        .divPanneauLarge .divTitre {
            top: 9em;
            padding-top: 1em;
            padding-bottom: 2em;
            margin-bottom: 5em;
        }
    }


    .divPanneauLarge .divTitre-gauche {
        left: 0em;
    }


    .divPanneauLarge .divTitreBoutique input {
        width: 100%;
    }

    .divListeConcerts {
        position: relative;
        z-index: 1000;
        margin-top: 15em;
        min-height: 62em;
    }



    .fade {
        opacity: .0;
        transition: opacity 1s;
        width: 0px !important;
    }


    .display-none {
        display: none;
    }

    /* formulaire */

    #frmBoutique,
    #divConfirmPaiement {
        position: absolute;
        z-index: 1000;
        top: 18em;
        left: -2em;
        padding-top: 2em !important;
    }

    @media (max-width: 768px) {
        #frmBoutique {
            left: 0rem;
        }
    }


    #frmBoutique .btn-close,
    #divStreaming .btn-close {
        color: white !important;
        position: absolute;
        width: 2rem;
        height: 2rem;
        right: 1rem;
        top: 1rem;
        font-size: 1.5rem;
        font-weight: bold;
    }


    .divFormulaire,
    .divMessageCheckOut {
        padding-top: 2rem;
        padding-left: .25rem;
        background-color: white;
    }

        .divFormulaire .form-label {
            color: #002450;
        }


        .divFormulaire .form-label,
        .divFormulaire input[type=text] {
            font-size: 1.25em;
            padding-top: .25rem;
            padding-bottom: .25rem;
            padding-left: .5rem;
            margin-top: .25rem;
            margin-bottom: .25rem;
        }


        .divFormulaire .validation {
            display: none; /* Caché au démarrage */
            font-family: "Roboto-Medium", Helvetica, Verdana, Arial, sans-serif;
            font-size: .9rem;
        }

        .divFormulaire .NP {
            width: 30% !important;
            float: left;
        }

        .divFormulaire .ville {
            width: 68.75% !important;
            margin-left: .75%;
            float: left;
        }

        .divFormulaire .reponse-capcha {
            max-width: 4rem;
        }



        .divFormulaire .image-capcha {
            max-width: 6rem;
        }


        .divFormulaire #lblMessageConfirmation {
            display: none;
            padding: 1rem;
            /*color: white;*/
        }


    .imgCD {
        display: block;
    }

    .imgCDipad {
        display: none;
    }

    @media (max-width: 1200px) {
        .imgCDipad {
            display: block;
        }

        .imgCD {
            display: none;
        }
    }


    @media (max-width: 768px) {
        .imgCDipad {
            display: none;
        }

        .imgCD {
            display: block;
        }
    }



    .multi5 {
        height: 7em;
    }

    .bg-warning {
        color: #333;
        font-size: 1.2em;
    }

    .bg-warning-stripe {
        background-color: #ffc107 !important;
        display: block;
        padding: 1em;
    }

    .bg-success {
        color: white;
        font-size: 1.2em;
    }



    .divSiteStreaming {
        padding-top: 2rem;
        padding-left: .25rem;
        background-color: white;
    }


        .divSiteStreaming img {
            width: 100%;
            max-width: 10rem;
        }






    /* dlg Cookies */
    .dlgCookies {
        position: fixed;
        z-index: 1000;
        bottom: 0px;
        left: 0px;
        width: 100%;
        min-height: 5rem;
    }

    .dlgCookies {
        background-color: white;
        border-style: solid;
        border-width: 2px;
        border-color: gray;
    }

        .dlgCookies a {
            width: 100%;
        }


    /* caché mais pas !imporant */
    .cache-simple {
        display: none;
    }