*

html {
  height: 100vh;
padding-bottom: 25vh;
}

body {
    font-family: "Zalando Sans SemiExpanded", sans-serif; 
    min-height : 100%;
}

#header {
    height: 20vh;
    width : 100%;
    background-color: #6D7075;
    display: flex;
    flex-direction: row;
    letter-spacing: 1rem;
}

#headertitre{
    margin-left : 25vw;
    margin-top : 2vh;
    height : 15vh;
    width : 35%;

}

#headertitre h1 {
    font-size: clamp(1.2em, 3.5vw, 5.2em);
   /* font-size: 80px; */
    margin: 0;
    color: white;
}

#headertitre h2{
    font-size: clamp(1em, 1.4vw, 3vw);
    /*font-size: 30px; */
    font-weight : 200;
    margin : auto;
    margin-left : 6vw;;
    color: white;
} 

#titreimage{
    height : 15vh;
    margin-top : 2vh;

}

#titreadresse{
    width : 22vw;
    margin-top: 5vh;
    margin-left : 3vw;
}


#titreadresse h3 {
    letter-spacing: 0.5rem;
    margin-top: 10vh;
    font-size: 15px;
    font-weight: 200;
    margin: auto;
    margin-left: 6vw;
    color: white;
}


#vitrine {
    margin-top: 2vh;
    height: 75vh;
    display: flex;
    flex-direction: row;
}

#vitrinegauche {
    width: 45vw;
    height: auto;
    margin-left: 3vw;
}

#vitrinegauche img {
    position : relative ;
    z-index : 1;
    margin-left: 0vw;
    border: 3px solid #6D7075;
    border-radius: 10px;
}

#vitrinegauche #bouton1 {
    position: absolute;
    z-index: 2;
    margin-left: 2%;
    margin-top: -75vh;

}

#vitrinegauche #bouton2 {
    position: absolute;
    z-index: 2;
    margin-top: -60vh;
    margin-left: 12vw;
}

#vitrinegauche #bouton1 img, #vitrinegauche #bouton2 img{
   border: 3px solid white; 
}



#vitrinegauche #bouton1 a,#vitrinegauche #bouton2 a{
    color : white;
    text-decoration: none;
} 


#porte {
    width: 25vw;
    height: 100%;
    margin-left: 0vw;
    margin-right: 2vw;
    background-color: #6D7075;
}

#vitrinedroite {
    width: 42vw;
    height: 100%;
}

#vitrinedroitehaute {
    background-color: white;
    height: 50%;
}

#vitrinedroitehaute h1 {
    margin : 0;
    padding : 2%;
    font-size: clamp(1.2em, 3.2vw, 5em);
    color : #edb19b;
}

#vitrinedroitebasse {
    background-color: #edb19b;
    height: 50%;
    width : 37vw;
}

.entree {
    width: 30%;
    float: right;
    margin: 1.5%;
    height: auto;
    display: flex;
    flex-direction: column; 
}

.entree .legende{
    border : 1px solid black;
    padding : 3%;
    width : 86%;
    margin-left : 4%;
    border-radius : 10px;
}



#container{
    width : 92vw;
    margin-left : 4vw;
    min-height : 100vh;
    display : flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

iframe{
    width : 80vw;
}

#containertrouver{
    width : 92vw;
    margin-left : 12vw;
    min-height : 80vh;
    margin-top : 10vh;
    display : flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.offre{
    height : 80vh;
    width : 22vw;
    margin-top : 5vh;
    display : flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.titreplats{
    height : 5vh ;
    padding : 5%;
}

.texteplats{
    padding : 3%;
    text-align: justify;
}

.prixplats{
    width : 95%;
    border-right: 2px solid black;
        
}


.prixplats p{
    text-align: end;
    margin-left : 1%;
    margin-right: 5%;
    font-size : 12px;
}

#imageinterieur{
    width : 25vw;
    height : auto;
}

#pagedouble{
    width : 92%;
    height : 100%;
    margin-left : 5%;
    margin-top: 5vh;
    display : flex;
    flex-direction: row;
    justify-content: space-between;
}

#pagegauche{
    width : 50%;  
}
#pagegauche img{
    border-radius : 10px;
}

#pagedroite{
    width : 44%;
    border : 3px solid #6D7075;
    padding : 1%;
    border-radius : 10px; 
}

#pagedroitehoraires{
    width : 34%;
    border : 3px solid #6D7075;
    padding : 5%;
    border-radius : 10px;
    display : flex;
    flex-direction: row;
    
}

#jours, #heures{
    width : 30%;
    height : auto;
    margin-left : 15%;
}

#jours p, #heures p{
    margin-bottom: 3%;
}

boutonform {
     height: 5%;
     font-size: 1.1rem;
     margin-top: 1%;
    ;
 }

 textarea,
 select {
   /*  width: 100%;
     /*border-radius: 5px;
    /* border: 1px solid #6D7075; */
 }

input {
     display: inline;
     float: right;
     height: 1.5vh;
     border: 0;
     border-radius: 5px;
     margin-bottom: 1.5vh;

   /*  min-width : 60%;
   /* border: 1px solid #6D7075; */
 }

#envoyer {

     display: inline;
     float: right;
     height: 3.5vh;
     border: 0;
     border-radius: 5px;
     margin-bottom: 0vh;
     min-width : 60%;
}

.civilite {
     display: flex;
     justify-content: space-between;
     width: 100%;
 }

 .civilite .saisie {
     min-width: 10%;
 }

 h6 {
     margin: 0;
 }

 .saisie {
     width: 100%;
     display: flex;
     justify-content: space-between;
 }

 fieldset {
     font-family: 'Quicksand', arial, sans-serif;
     border-radius: 10px;
     margin-bottom: 4%;
     border : 0px;
 }

 #objetdemande {
     height: 50%;
     width: 100%;
 }



footer {
    position : absolute;
    height: 15vh;
    width: 90%;
    margin-left: 5%;
    margin-top: 2%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content :space-between;
    border-top: 2px solid var(--rouge);
}

footer {
    height: 20vh;
    width: 91vw;
    background-color: #6D7075;
    margin-top : 5vh;
}

.infooter
{
    width: 20%;
    height: 100%;
    margin-left : 3vw;

}

.infooter p {
    margin: 0;
    font-size: 1rem;
    text-align: left;

    
}

.infooter p a{
       color : white;
    text-decoration: none 
}

.titre {
    margin-left: 0vw;;
    height : 4vh;

}

.titre {
    font-size: 1.5vw;
    color: white;
    text-align: left;
    border-bottom: 2px solid var(--rouge);
    margin-bottom: 2vh;
    width : auto;
}

.imagefooter img {
    margin-top: 2vh;
    margin-left : 8vw;
   
}