html,body{width:100%;height:100%;margin:0;padding:0;}
@font-face {
    font-family: Dinpro-regular;
    src: url("dinpro-regular.otf") format("opentype");
}
#logotop{width:250px;}
#lang{color:#030f40;font-weight:bold;margin-right: 1rem;}
*{ -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;font-family: Dinpro-regular,Verdana, Arial, 'sans-serif' !important;/* <-- fonts */}
.header{background-color:white;padding: 0.2rem 0;max-width: 1280px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
.header img{height:3rem;width:auto;display:block;margin:1rem auto;}


.accueil{background: url(accueil_eau.webp);min-height: 36rem;background-repeat: no-repeat;background-size: 100%;display: block;position: relative;background-color: #6095d6;margin:0;padding:0 0 2rem 0;    border: 1px solid transparent;}
.accueil_cont{padding: 2rem 0;max-width: 1280px;margin: 0 auto;display:block;}

.block{padding: 5rem 0;max-width: 1280px;margin: 0 auto;display:block;overflow:auto;}
.fleft{width: 40%;margin-left:10%;float: left;}
.fleft img{width:100%;border-radius: 50px;}
.fleft h2{color:#030f40;}

.blockgrisupper{background-color:#f8f9fa;width:100%;padding:1rem 0;}
.blockgris{padding: 5rem 0 5rem 15%;max-width: 1280px;margin: 0 auto;display:block;overflow:auto;}
.blockgris h2{color:#030f40;}

h1{font-size: 2rem;width: 25%;color: white;margin: 5% 0 2% 12%;text-transform: uppercase;border: 1px solid;padding: 1rem 2rem;border-radius: 5px;}

p,#selector,li{font-size: 1.25rem;}

#logo{float:right;width:150px;}
#select{width: 40%;max-width: 1280px; margin:3rem auto 0 auto;background-color: #ffffffd9;padding: 2rem;border-radius: 5px; display: block;position: relative;}
#selector{padding:1rem;}
#nocp{display:none;font-weight: bold;}
#nocp a{color:#0082ca;}
#imgbottom{width:150px;float:right;}

#footer{background-color:#030f40;padding: 2rem 0;}
#footer a{color:white;padding-left: 1rem;}
#footer img{height:25px;width:auto;display:block;margin-bottom: 1rem;padding-left: 1rem;}



@media only screen and (min-width:768px) and (max-width: 1280px) {
    #select {width: 50%;}
}



@media only screen and (max-width: 768px) {
    #select{width:80%;padding: 5rem 2rem;}
    body{background-size: auto;}
    #imgbottom{float:left;}
    h1{margin-top: 5rem;width:calc(98% - 2rem);margin: 9rem auto 0 auto;padding: 1rem;}
    #logo{margin-right: 3rem;}
    .fleft {width: 80%;}
    #selector {padding: 1rem 0;}
    .fleft img {margin-bottom: 3rem;}
    #footer a {display: block;margin-bottom: 0.75rem;}
    .blockgris{width:80%;}
}