/*---------------------------------------------------------------------------------------------*/
/*  nettilac2024.1.css                                                                         */
/*  rev. 18.7.2024                                                                             */
/*  Break points  1200px - 992px - 768px - 576px                                               */
/*---------------------------------------------------------------------------------------------*/

html {
    position: relative;
    min-height: 100%;
}

header {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1000;
    overflow: hidden;
}


.header-scroll {
    max-height: 8em;
    transition: 3s;
}



header.divFndBleu {
    background-image: url('../Images/BleuEntete02.png');
    background-size: cover;
}

header .divLogo {
    position: relative;
    background-image: url('../Images/lumiereblancentete22f.png');
    background-size: cover;
    background-position-x: center;
    background-position-y: 0px;
}

main {
    margin-bottom: 12rem; /* hauteur de divPiedPage*/
}




/* SmartPhone */
header .divLogo {
    width: 375px;
}

    header .divLogo img {
        width: 800px;
        margin-left: calc((375px - 800px) / 2) !important;
    }



/* iPad largeur à partir de 768px */
@media (min-width: 768px) {

    header .divLogo {
        width: 768px;
    }

        header .divLogo img {
            width: 1200px;
            margin-left: calc((768px - 1200px) / 2) !important;
            transition: .5s;
        }


    .header-scroll .divLogo img {
        width: 800px;
        margin-left: calc((768px - 800px) / 2) !important;
        transition: 2s;
    }
}


/* iPad largeur à partir de 992px */
@media (min-width: 992px) {

    header .divLogo {
        width: 992px;
    }

        header .divLogo img {
            width: 1500px;
            margin-left: calc((992px - 1500px) / 2) !important;
        }

    .header-scroll .divLogo img {
        width: 1100px;
        margin-left: calc((992px - 1100px) / 2) !important;
        transition: 2s;
    }
}



/* grand écran - largeur à partir de 1200px */
@media (min-width: 1200px) {

    header .divLogo {
        width: 1200px;
    }

        header .divLogo img {
            width: 1920px;
            margin-left: calc((1200px - 1920px) / 2) !important;
        }


    .header-scroll .divLogo img {
        width: 1200px;
        margin-left: calc((1200px - 1200px) / 2) !important;
        transition: 2s;
    }
}


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


.header-cache {
    opacity: 0;
    transition: 1s;
    display: none;
}


@media (min-width: 768px) {
    .menu-visible {
        opacity: 1 !important;
        display: block !important;
    }
}



/* menu langue */
.divLangue {
    position: absolute;
    z-index: 2500;
    width: 5rem;
    top: .5rem;
    left: .5rem;
}


@media (min-width: 992px) {
    .divLangue {
        width: 16rem;
        top: 3rem;
        left: calc(1rem + 7vw);
    }
}




/* menu smart */

.divMenuSmart {
    position: fixed;
    z-index: 2500;
    width: 2.5rem;
    top: 0.25rem;
    right: 1.5rem;
    text-align: center;
}


@media (min-width: 992px) {
    .divMenuSmart {
        width: 4rem;
        top: 1.5rem;
        right: 5.5rem;
    }
}


@media (min-width: 768px) {
    .divMenuSmart {
        display: none;
    }
}


.menu-smart {
    position: fixed;
    z-index: 1500;
    width: 100%;
    top: 4.5rem;
    right: 0rem;
    padding-top: 0rem;
    overflow: hidden;
    background-color: white;
}


.menu-smart {
    opacity: 0;
    height: 0rem;
    transition: height .25s, opacity .25s;
}

    .menu-smart a {
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 1.2em;
        text-align: center;
        color: #003e6e !important;
    }

        .menu-smart a.bord {
            border-width: 1px;
            border-color: #aaa !important;
        }

        .menu-smart a.bord {
            display: block;
            color: white;
            border-bottom-style: solid;
            border-width: 1px;
            border-color: white;
            text-align: center;
            padding-top: .25rem;
            padding-bottom: .25rem;
            margin-bottom: .25em;
        }



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


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

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



.divMenuSmart img {
    width: 100%;
}





/* Menu Objets */

.divMenuObjet {
    position: relative;
    z-index: 500;
    top: 0px;
    width: 100%;
    min-height: 17rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 992px) {
    .divMenuObjet {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}


@media (min-width: 1200px) {
    .divMenuObjet {
        padding-left: 6rem;
        padding-right: 6rem;
    }
}


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




.divMenuBack {
    position: fixed;
    z-index: 2500;
    width: 2.5rem;
    top: 0.5rem;
    right: 2.5rem;
    text-align: center;
}

    .divMenuBack a {
        font-family: "Roboto-Regular", Helvetica, Verdana, Arial, sans-serif;
        margin-bottom: .1em;
        font-size: 1.5em;
        color: white;
        text-shadow: 1px 1px 1px black;
    }

    .divMenuBack img {
        width: 100%;
    }



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


/* pied de page */
.divPiedPage {
    position: fixed;
    z-index: -1;
    bottom: 0px;
    width: 100%;
    min-height: 12rem;
    padding-top: 1em;
}

    .divPiedPage p {
        font-size: 1.2em;
        color: white;
    }

    .divPiedPage a {
        color: white;
    }

/* ne pas afficher dans le pied page */
@media (max-width: 768px) {
    .divPiedPage .NoSmart {
        display: none;
    }
}


/* Titre */
.divTitreAccueil {
    position: absolute;
    z-index: 1000;
    width: 100%;
    top: 20vw;
    left: 0px;
    text-align: center;
}

@media (max-width: 768px) {
    .divTitreAccueil {
        top: 28vw;
    }
}






.divCadrePhoto {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    /*border-style: dotted;*/
    border-width: 1px;
    border-color: yellow;
}

    .divCadrePhoto .divOmbreBlanc {
        position: absolute;
        z-index: 1000;
        left: 0px;
        bottom: 1vw;
        width: 100%;
    }


@media (max-width: 768px) {
    .divCadrePhoto .divOmbreBlanc {
        opacity: .75;
        bottom: 0vw;
    }
}



.divCadrePhoto img {
    width: 100%;
}







/* Liste d'objets */

.divListeObjetCadre {
    padding-bottom: 4rem;
}

.divListeObjet h2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

.divListeObjet .tech {
    margin-bottom: 1rem;
    text-align: center;
}

.divCadreAnnonce {
    position: relative;
}

    .divCadreAnnonce img {
        width: 100%;
        margin-bottom: 1rem;
    }


/* Carte Géo */
#divCarteGeo {
    position: relative;
    overflow: hidden;
    height: calc(5rem + (75vw / 1));
    top: 0px;
    left: 0px;
    width: 100%;
    margin-bottom: .5rem;
}

@media (min-width: 768px) {
    #divCarteGeo {
        height: calc(5rem + (75vw / 2));
    }
}


@media (min-width: 992px) {
    #divCarteGeo {
        height: calc(5rem + (75vw / 3));
    }
}


#divCarteGeo .divGoogleMap {
    width: 100%;
    height: 100%;
}


    #divCarteGeo .divGoogleMap #map {
        width: 100%;
        height: 100%;
        /*background-color: mediumvioletred;*/
    }



#divCarteGeo .ConntaiBulleObjet {
    max-height: 17rem;
    overflow-y: scroll;
}



#divCarteGeo .BulleObjet p,
#divItineraire .BulleObjet p {
    margin: 0px;
    margin-bottom: .25rem;
}

#divCarteGeo .BulleObjet a,
#divItineraire .BulleObjet a {
    color: #333;
}

.leaflet-control-attribution svg {
    display: none !important;
}

.divDirection .distance {
    text-align: right;
}



/* Description */
.divDescription .divTexte {
    margin-bottom: 2rem;
    text-align: center;
}

.divIconDesc {
    background-image: url('../Images/BleuEntete02.png');
    background-position-x: 50vW;
    text-align: center;
    margin-bottom: 2rem;
}

    .divIconDesc img {
        width: 3em;
        margin-right: .5em;
        margin-left: 1.5em;
        margin-top: .5em;
        margin-bottom: .5em;
    }

.divDescription .tech {
    text-align: center;
    margin-bottom: 2rem;
}


.divZero {
    font-size: 1.2em;
    text-align: center;
    margin-top: 4em;
    margin-left: auto;
    margin-right: auto;
}




/* Googole maps et Contact */
#map {
    width: 100%;
    height: 558px;
}

#divItineraire {
    margin-bottom: 2rem;
}

/* largeur au maximum de 768px - ente 1 et 768px */
@media (max-width: 768px) {
    #divItineraire {
        /*font-size: .8em;*/
    }
}


#divItineraire input[type=text], label {
    /*font-size: 1.25em;*/
    margin: 0px;
    padding: 0.25em;
    margin-top: 0.25em;
}



#divItineraire .divDirection {
    width: 100%;
    height: 350px;
    overflow-y: scroll;
    font-family: Roboto-Regular;
    font-size: 1em;
}

    #divItineraire .divDirection p {
        font-family: Roboto-Regular;
        font-size: 1em;
    }

    #divItineraire .divDirection img {
        width: 100%;
        max-width: 1.25rem;
    }


.MenuItineraire {
    background-color: whitesmoke;
}


    .MenuItineraire img {
        max-width: 6rem;
    }


@media (max-width: 768px) {
    .MenuItineraire img {
        max-width: 4rem;
    }
}


    /*.TravelMode {
    padding: 2rem;
}*/




    /* Demande de location */


    .divDemandeLocCadre {
        position: relative;
        top: 0rem;
        width: 67%;
        margin-top: 17rem;
        margin-right: auto;
        margin-left: auto;
        color: white;
    }


    @media (max-width: 768px) {
        .divDemandeLocCadre {
            width: 95%;
            margin-top: 10rem;
        }
    }



    .divDemandeLocCadre .divFormulaire {
        position: relative;
        top: 0rem;
    }




    .divDemandeLoc {
        position: relative;
        top: 0rem;
        min-height: 17rem;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 1px;
    }



    .divMenuDemandeLoc {
        width: 100%;
        margin-bottom: 2rem;
    }

    @media (max-width: 1332px) {
        .divDemandeLoc {
            /*width: 80%;*/
        }
    }


    @media (max-width: 992px) {
        .divDemandeLoc {
            width: 100%;
        }

        .divMenuDemandeLoc .text-center,
        .divMenuDemandeLoc .text-end {
            text-align: left !important;
        }
    }


    .divDemandeLoc .divExplication {
        margin-bottom: 2rem;
    }

        .divDemandeLoc .divExplication ol {
            margin-left: -1rem;
        }

    .divDemandeLoc .divTelecharger {
        margin-bottom: 2rem;
    }


        .divDemandeLoc .divTelecharger p {
            margin-right: 2em;
        }




    .divMenuDemandeLoc {
        font-size: 1.25em;
    }

    /* ente 1 et 900px */
    /*@media (max-width: 1332px) {
    .divMenuDemandeLoc {
        font-size: 1.75em;
    }
}
*/

    /* ente 1 et 900px */
    /*@media (max-width: 900px) {
    .divMenuDemandeLoc {
        font-size: 1.4em;
    }
}*/


    .divDemandeLocSplash {
        position: fixed;
        z-index: 2000;
        top: 12rem;
        left: 25vw;
        width: 50vw;
        min-height: 25rem;
        opacity: 0;
        transition: 1s;
    }

    @media (max-width: 768px) {
        .divDemandeLocSplash {
            left: 5vw;
            width: 90vw;
        }
    }






    .divMenuObjet a {
        color: white;
    }


        .divMenuObjet a.item,
        .divMenuObjet p.item {
            font-size: .7em; /*  .7em => .7 fois le font-size de divMenuObjet */
            display: block;
            margin-bottom: .125em;
            margin-top: .125em;
            padding-left: .25em;
            /*text-align: center;*/
            color: white;
        }

        .divMenuObjet a.item,
        .divMenuObjet p.item {
            text-align: center;
        }




    @media (max-width: 900px) {
        .divMenuObjet a.item,
        .divMenuDemandeLoc a.item {
            padding-top: 0.5em;
        }
    }

    .divMenuObjet a.item:hover,
    .divMenuDemandeLoc a.item:hover,
    .divPiedPage a:hover {
        background-color: #3fd6eb;
    }


    .divMenuDemandeLoc a.bord,
    .divMenuDemandeLoc p.bord {
        display: block;
        height: 1.5em;
        color: white;
        border-top-style: none;
        border-bottom-style: solid;
        border-width: 1px;
        border-color: white;
    }


    @media (max-width: 900px) {
        .divMenuDemandeLoc p.bord {
            border-bottom-style: none;
            padding-top: 2rem;
        }
    }


    .divMenuDemandeLoc .icone-pdf,
    a.icone-pdf {
        padding-bottom: 1px;
        color: white;
    }

        .divMenuDemandeLoc .icone-pdf img {
            width: 3em;
            padding: .25em;
            cursor: pointer;
        }

    .divMenuDemandeLoc img.select {
        border-style: solid;
        border-color: greenyellow;
    }


    /* Activité */

    .divActiviteCadre {
        position: relative;
        top: 0rem;
        width: 100%;
        margin-top: 17rem;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 4rem;
        color: white;
    }



    @media (max-width: 670px) {
        .divActiviteCadre {
            margin-top: 5rem;
        }
    }



    .divActivite {
        position: relative;
        top: 0px;
        /*    width: 81.5rem;
    margin-left: auto;
    margin-right: auto;*/
    }


    @media (max-width: 670px) {
        .divActivite {
            position: relative;
            /*top: 5rem;*/
        }
    }



    @media (max-width: 1332px) {
        .divActivite {
            /*    width: 80%;*/
        }
    }


    .divActivite .divTitre {
        margin-top: 6rem;
        margin-bottom: 2rem;
    }

    /* largeur au maximum de 800px - ente 1 et 500 iPhone vertical */
    @media (max-width: 670px) {
        .divActivite .GrilleLoyer {
            display: none;
        }
    }


    /* 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%;
        }