body{
    cursor: default;
    overflow-x: hidden;
    background-color: white;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
span {
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 2.2vh;
    text-align: justify;
}
p {
    margin-bottom: 4vh;
}
a {
    cursor: default;
    text-decoration: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: #1b1e21;
}
div {
    border: 0;
    margin: 0;
    padding: 0;
}
img {
    border: 0;
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
    padding: 0;
}
.white-bckg{
    position:absolute;
    width:100%;
    bottom:-1px;
    left:0;
    border:0;
}
.white-text{ color : white;}
.dark-text{color: #1b1e21; }


.header-1 {
    user-select: none;
    z-index: 10;
    display: block;
    position: fixed;
    top: 0;
    width: 100vw;
}
.div-bouton-menu {
    position: relative;
    height: 100%;
    float: left;
}

.menu-white-bg {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.90) 20%,rgba(255, 255, 255, 0.90) 80%, rgba(255, 255, 255, 0.5) 100%);
    color: #1b1e21;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.map-container-2{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-container-2 iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.text-justify{    text-align: justify ;}

.hidden{	display:none;}

/***********************************************************************************
************************************************************************************
/////////////////////////// VERSION GRAND ECRAN ///////////////////////////////////
************************************************************************************
***********************************************************************************/
body{
    cursor: default;
    overflow-x: hidden;
    background-color: white;
    margin: 0;
    padding: 0;
}
span {
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 2.2vh;
    text-align: justify;
}
span:hover{
    text-decoration: none;
}


p {
    margin-bottom: 4vh;
}
a {
    cursor: default;
    text-decoration: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: #1b1e21;
}
a:hover{
    text-decoration: none;
}
div {
    border: 0;
    margin: 0;
    padding: 0;
}
img {
    border: 0;
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
    padding: 0;
}
h3 {
    font-size: 1vh;
}

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

    .div-logo {
        position: relative;
        display: block;
        float: left;
        width: 15%;
        height: 8vh;
        margin-left: 5%;
        margin-top: 0;
    }

    .img-logo {
        z-index: 9;
        position: relative;
        display: inline;
        margin-top: 5px;
        height: 90%;
    }
    #menu-bouton{
        display: none;
    }
    .div-menu {
        z-index: 10;
        position: relative;
        display: block;
        float: left;
        height: 8vh;
        width: 60%;
        min-width: 400px;
        min-height: 3vw;
        margin-left: 20%;
    }

    .li-menu {
        position: relative;
        display: block;
        float: left;
        width: 25%;
        height: 8vh;
        line-height: 8vh;
        text-align: center;
        font-family: Calibri, Arial, Helvetica, sans-serif;
        font-size: 2.2vh;
        font-variant: small-caps;
        text-decoration: none;
    }



    .li-menu::after {
        margin-left: auto;
        margin-right: auto;
        content: '';
        display: block;
        width: 0;
        height: 3px;
        background: red;
        transition: width .5s;
        text-decoration: none;
    }

    .li-menu:hover::after {
        width: 100%;
    / / transition: width .3 s;
        text-decoration: none;
    }

    .li-menu:hover {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
        color: black;
    }
    .li-menu a:hover {
        color: black;
    }

    .container-h1 {
        position: relative;
        background-color: rgba(255, 255, 255, 0);
    }

    #hero {
        position: relative;
        z-index: -1;
        width: 100vw;
        min-height: 80vh;
        background-size: cover;
        background-position: center;
    }
    .div-h1 {
        z-index: 0;
        position: relative;
        width: 65vw;
        margin-left: auto;
        margin-right: auto;
        padding-top: 1vh;
        margin-bottom: 5vh;
        text-align: center;
    }


    .alerte-construction {
        font-family: Arial, Helvetica, Canadara, sans-serif;
        font-weight: bolder;
        color: darkred;
        font-size: 3vh;
        display: block;
    }

    .div-p {
        z-index: 0;
        position: relative;
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 5vh;
        margin-bottom: 5vh;
        padding-right: 15px;
        padding-left: 15px;
        font-family: Arial, Helvetica, Canadara, sans-serif;
    }
}

/***********************************************************************************
************************************************************************************
/////////////////////////// VERSION ECRAN MOYEN ///////////////////////////////////
************************************************************************************
***********************************************************************************/
@media only screen and (max-width: 1125px) and (min-width: 700px)  {

    .div-logo {
        position: relative;
        display: block;
        float: left;
        width: 38vw;
        min-width: 600px;
        height: 8vh;
        margin-left: 2vw;
        margin-top: 0;
    }

    .img-logo {
        z-index: 9;
        position: relative;
        display: inline;
        max-width: 90vw;
        max-height: 100%;
    }
    #menu-bouton{
        display: none;
    }
    .div-menu {
        z-index: 10;
        position: relative;
        display: block;
        float: left;
        height: 6vh;
        width: 100vw;
        min-width: 400px;
        min-height: 3vw;
    }

    .li-menu {
        position: relative;
        display: block;
        float: left;
        width: 50%;
        height: 6vh;
        line-height: 6vh;
        text-align: center;
        font-family: Calibri, Arial, Helvetica,  sans-serif;
        font-size: 2.2vh;
        font-variant: small-caps;
        text-decoration: none;
    }


    .li-menu::after {
        margin-left: auto;
        margin-right: auto;
        content: '';
        display: block;
        width: 0;
        height: 3px;
        background: deeppink;
        transition: width .5s;
    }

    .li-menu:hover::after {
        text-decoration: none;
        width: 100%;
    / / transition: width .3 s;
    }

    .li-menu:hover {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
        color: black;
        text-decoration: none;
    }

    .container-h1 {
        position: relative;
        background-color: rgba(255, 255, 255, 0);
    }
    #hero {
        position: relative;
        z-index: -1;
        width: 100vw;
        min-height: 65vh;
        background-size: cover;
        background-position: center;
    }
    .div-h1 {
        z-index: 0;
        position: relative;
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 5vh;
        margin-bottom: 5vh;
        text-align: center;
    }

    h1 {

    }

    h2 {

    }

    .alerte-construction {
        font-family: Arial, Helvetica, Canadara, sans-serif;
        font-weight: bolder;
        color: darkred;
        font-size: 3vh;
        display: block;
    }

    .div-p {
        z-index: 0;
        position: relative;
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 5vh;
        margin-bottom: 5vh;
        padding-right: 15px;
        padding-left: 15px;
        font-family: Arial, Helvetica, Canadara, sans-serif;
    }
}

/***********************************************************************************
************************************************************************************
/////////////////////////// VERSION PETIT ECRAN ///////////////////////////////////
************************************************************************************
***********************************************************************************/
@media screen and (max-width: 700px) {

    .header-1{
        background: white;
        color: #1b1e21;
        height: 11vh;
    }
    .div-header{
        z-index: 20;
        position: relative;
        width: 100%;
        height: 11vh;
        box-shadow: 1px 2px 5px grey;
    }
    .div-logo {
        position: relative;
        display: block;
        float: left;
        height: 7vh;
        margin-left: 5vw;
        margin-top: 2vh;
    }

    .img-logo {
        z-index: 9;
        position: relative;
        display: inline;
        height: 100%;
    }
    #menu-bouton {
        display: block;
        width: 7vh;
        float: right;
        height: 11vh;
        width: 11vh;
        margin-right: 5vw;
    }
    .img-bouton {
        position: relative;
        height: 100%;
    }
    .div-menu {
        z-index: 10;
        position: relative;
        float: left;
        height: 100vh;
        width: 100vw;
        min-height: 3vw;
        background-color: rgba( 47, 47, 47, 0.8);
    }
    .ul-menu{
        background: white;
        height: 30vh;
        padding-top: 5vh;
    }
    .li-menu {
        z-index: 11;
        position: relative;
        display: block;
        float: left;
        width: 100vw;
        height: 10vh;
        line-height: 10vh;
        text-align: center;
        font-family: Calibri, Arial, Helvetica, sans-serif;
        font-size: 5vw;
        font-variant: small-caps;
        background: white;
    }
    #hero {
        position: relative;
        z-index: -1;
        margin-top: 8vh;
        width: 100vw;
        min-height: 50vh;
        background-size: cover;
        background-position: 50%;
    }
    .container-h1 {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .div-h1 {
        z-index: 0;
        position: relative;
        width: 95vw;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 4vh;
        margin-bottom: 3vh;
        text-align: center;
    }

    h1 {

    }

    h2 {

    }

    .alerte-construction {
        font-family: Arial, Helvetica, Canadara, sans-serif;
        font-weight: bolder;
        color: darkred;
        font-size: 3vh;
        display: block;
    }

    .div-p {
        z-index: 0;
        position: relative;
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        padding-top: 2vh;
        margin-bottom: 2vh;
        font-family: Arial, Helvetica, Canadara, sans-serif;
    }

}