html {
  font-size: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: url(../images/plage/fond_plage2.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

body {
  flex-wrap: wrap;
  justify-content: space-around;
  font-family: verdana;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  background-color: transparent;
  /*margin-top: 1vw;*/
}
.titre_plage {
  color: black;
  font-size: 1.5em;
  text-align: center;
  background-color: rgb(255, 255, 255, 0.8);
  margin-right: 15px;
  margin-left: 15px;
}
.row {
  margin-top: 2vw;
  margin-right: 0px;
  margin-left: 0px;
}
.fond_cel {background-color: rgb(255, 255, 255, 0.8);}
.top {
  height: 15vw;
}
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
/*.logo img {
  width: 20%;
}*/
.cel_gauche_ephemeride {
  background-color: rgb(255, 255, 255, 0.8);
  padding-top: 1.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-bottom: 1vw;
  text-align: center;
  font-size: 2.5vw;
  line-height: 1.6em;
  height: 22vw;
  margin-top: 1vw;
}
.chiffre_date {
  color: red;
  font-size: 2em;
}
.cel_gauche_heure {
      background-color: rgb(255, 255, 255, 0.8);
    text-align: center;
    font-size: 5vw;
    /* line-height: 15vw; */
    height: 22vw;
    margin-top: 1vw;
    padding-top: 7vw;
}

.cel_gauche {
  background-color: rgb(255, 255, 255, 0.8);
  text-align: center;
  height: 22vw;
  margin-top: 1vw;
}
.cel_centre {
  background-color: rgb(255, 255, 255, 0.8);
  text-align: center;
  height: 22vw;
  margin-top: 1vw;
}
.cel_droite {
  background-color: rgb(255, 255, 255, 0.8);
  text-align: center;
  height: 22vw;
  margin-top: 1vw;
}
.parking {
  background-color: rgb(255, 255, 255, 0.8);
  text-align: center;
  text-align: center;
  height: 22vw;
  margin-top: 1vw;
      margin-bottom: 50px;
}
.parking_mobile {
  background-color: rgb(255, 255, 255, 0.8);
  text-align: center;
  text-align: center;
  height: 22vw;
  margin-top: 1vw;
}
.le_P {
  width: 14.9vw;
  height: 22vw;
  margin-top: 0.6vw;
  /* margin-right: 0.5VW; */
  background-color: #182983;
  color: white;
  font-size: 11vw;
}

.le_P_droite {
  width: 14.9vw;
  height: 22vw;
  margin-top: 0.6vw;
  margin-right: 1.6vw;
  background-color: #182983;
  color: white;
  font-size: 11vw;
}

.le_P_droite2 {
  width: 14.9vw;
  height: 22vw;
   margin-top: 0.6vw;
  /*margin-right: 1.6vw; */
  background-color: #182983;
  color: white;
  font-size: 11vw;
}

.Plage {
  color: #182983;
  font-size: 7vw;
  margin-top: 3vw;
}

.disponible {
background-color: #182983;
  color: white;  
  height: 22vw;
  margin-top: 0.5vw;
  padding-top: 2vw;
}
.nombre {
  font-size: 13vw;
  text-align: left;
  margin-top: -4vw;
}

.txt_dispo {
        font-size: 8vw;
    text-align: center;
    padding-top: 2.3vw;
}
.date {
  background-color: rgb(255, 255, 255, 0.8);
  font-size: 6em;
  text-align: left;
  line-height: 1em;
}
.heure {
  background-color: rgb(255, 255, 255, 0.8);
  font-size: 6em;
  text-align: left;
  line-height: 1em;
}
.drapeau {
  color: green;
  font-size: 9em;  
  padding-top: 3vw;
}
.temperature {
  color: orange;
  font-size: 9vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 4vw;
}
.temp_eau {
  color: #008dd2;
  font-size: 7vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 3vw;
  padding-bottom: 1vw;
  padding-right: 1vw;
  padding-left: 1vw;
}
.drapeau img {
  width: 11vw;
  margin-top: 4vw;
  margin-left: 2vw;
}
.temp_eau img {
  width: 12vw;
  margin: auto;
  padding-top: 3vw;
}
.vent img {
  width: 8vw;
  /* margin-top: -1vw;
  padding-left: 2vw; */
}
#logo_ville {
  width: 16vw;
  padding-top: 1vw;
}
.vent {
  color: rgb(227 12 12);
  font-size: 5vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 5vw;
  line-height: 5vw;
}
.uv {
  background-color: orange;
  color: white;
  font-size: 9vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 5vw;
}

#direction_vent {
  font-weight: bold;
}
#vitesse_vent {
  font-size: 7vw;
  font-weight: bold;
}
.footer {
  height: 4vw;
}
.complet {
  font-size: 7vw;
  color: red;
  margin-top:50vw;
}
/* special mobile 000000000000000000000000000000000000000000000000000000000000000000000000000           -*/
@media only screen and (max-device-width: 768px)
  {
  .top {height: 0vw;}
  .row {margin-top: 5vw;}
  .smartfoune {padding-top:5vw;}

  .le_P { 
  width: 14vw;
  height: 22vw;
  margin-top: 0.6vw;
  /* margin-right: 0.5VW; */
  background-color: #182983;
  color: white;
  font-size: 8vw;
  padding-top: 5vw;
  }
  .le_P_droiter {
      width: 12vw;
      height: 22vw;
      margin-top: 0.6vw;
      margin-right: 1vw;
      padding-left: 3px;
      background-color: #182983;
     text-align: center;
      color: white;
      font-size: 8vw;
      padding-top: 5vw;
  }
  .txt_dispo {    
    height: 22vw;
    margin-top: 0.6vw;
    background-color: #182983;
    text-align: center;
    color: white;
    font-size: 5vw;
    padding-top: 7vw;
    /* font-size: 5vw;
    text-align: center;
    padding-top: 2.3vw; */
  }
  .parking {    
      background-color: rgb(255, 255, 255, 0.8);
      text-align: center;
    
      height: 26vw;
      margin-top: 1vw;
      margin-left: 15px;
      margin-right: 15px;
      padding-left: 1vw;
      padding-right: 1vw;      
      padding-top: 8px;
      }
    .col-xs-5.img_eau, .col-xs-7.temp_eau_chiffre, .col-xs-7.dir_vent {padding-left: 1px;padding-right: 1px;}
    .temp_eau {   
        font-size: 8vw;
        padding-top: 5vw;
      /* padding-bottom: 1vw; */
      padding-right: 1vw;
      padding-left: 1vw;
      }
    .dir_vent {   
      /* font-size: 5vw;
      font-weight: bold; 
      padding-top: 2vw;*/
      padding-right: 1vw;
      padding-left: 1vw;
    }
    .cel_gauche_ephemeride {
      line-height: 1.25em;
      padding-top: 4vw;
      font-size: 3.3vw;
      background-color: rgb(255, 255, 255, 0.8);

      padding-left: 1vw;
      padding-right: 1vw;
      padding-bottom: 1vw;
      text-align: center;  
      height: 22vw;    
    }
    .vent img {
          width: 15vw;
    padding-bottom: 2vw;
    }
    .vent {
      padding-top: 1vw;
    }
    .cel_centre {
   padding-top: 6px;
    }
}
/* special tablette 000000000000000000000000000000000000000000000000000000000000000000000000000           -*/
@media screen and (min-width: 768px) and (max-device-width: 992px)
{
    .top {height: 0vw;}
  .row {margin-top: 5vw;}
  .smartfoune {padding-top:5vw;}

  .le_P { 
  width: 14vw;
  height: 22vw;
  margin-top: 0.6vw;  
  background-color: #182983;
  color: white;
  font-size: 8vw;
  padding-top: 4vw;;
  }
  .le_P_droiter {
        width: 12vw;
      height: 22vw;
      margin-top: 0.6vw;
      margin-right: 1vw;
      padding-left: 3px;
      background-color: #182983;
      text-align: left;
      color: white;
      font-size: 8vw;
      padding-top: 4vw;
  }
  .txt_dispo {    
    height: 22vw;
    margin-top: 0.6vw;
    background-color: #182983;
    text-align: center;
    color: white;
    font-size: 5vw;
    padding-top: 6vw;
    /* font-size: 5vw;
    text-align: center;
    padding-top: 2.3vw; */
  }
  .parking {    
      background-color: rgb(255, 255, 255, 0.8);
      text-align: center;
    
      height: 26vw;
      margin-top: 1vw;
      margin-left: 15px;
      margin-right: 15px;
      padding-left: 1vw;
      padding-right: 1vw;
      padding-top: 8px;
      }
    .col-xs-5.img_eau, .col-xs-7.temp_eau_chiffre, .col-xs-7.dir_vent {padding-left: 1px;padding-right: 1px;}
    .temp_eau {   
        font-size: 8vw;
      
        padding-top: 5vw;
        padding-bottom: 1vw;
        padding-right: 1vw;
        padding-left: 1vw;
      }
    .dir_vent {   
      font-size: 5vw;
      font-weight: bold;
      padding-top: 2vw;
      padding-right: 1vw;
      padding-left: 1vw;
    }
    .cel_gauche_ephemeride {
      line-height: 1.25em;
      padding-top: 2vw;
      font-size: 3.5vw;  
      background-color: rgb(255, 255, 255, 0.8);
    
      padding-left: 1vw;
      padding-right: 1vw;
      padding-bottom: 1vw;
      text-align: center;  
      height: 22vw;
    }
    .vent img {
          width: 15vw;
    padding-bottom: 2vw;
    }
    .vent {
      padding-top: 1vw;
    }

}