html, body, div, span, header, footer, img, p, nav, ul, li, main, a, h1, h2, br, iframe
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
color: unset;
font-family:Arial, Helvetica, sans-serif;
}

@font-face {
font-family: 'cac_champagneregular';
src: url('../html/font/cac_champagne-webfont.eot');
src: url('../html/font/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
url('../html/font/cac_champagne-webfont.woff') format('woff'),
url('../html/font/cac_champagne-webfont.ttf') format('truetype'),
url('../html/font/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
font-weight: normal;
font-style: normal;
}

p{
margin: 20px;	
}

/* Extra small devices (portrait phones, less than 576px) */

@media screen and (max-width: 767.98px) {

/*header*/

#barre1{
background: #F7F4EF;
width:100%;
min-height: 35px;	
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}

.barre2 {
width: 100%;
background: #F7F4EF;
display:flex;
flex-wrap: wrap;
}

.langues{
width: 40%;
padding-left: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
order: 1;
}

.langues p, .recherche p{
margin: 5px 15px;
}

.CB, .FR, .GB {
width: 30px;
height: 30px;
cursor: pointer;
}

.recherche{
width: 100%;
padding-right: 10px;
font-size: 1em;
display: flex;
align-items: center;
justify-content: center;
order: 3
}

.recherche form {
display:flex;
align-items: center;
justify-content: center;   
}

.monBouton{
background:url("../img/bouton1.png");
width: 30px;
height:26px;
margin-left: 5px;
}

.tel{
width: 60%;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 1.1em;
padding-right: 5px;
order: 2;
}

.barre3 {
background-color:rgb(39, 55, 77);
min-width: 100%;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
width: 207px;
height: 90px;
}

.menu {
background-color:rgb(39, 55, 77);
width:100%;
border-top: 1px solid #D98F3E;
border-bottom: 1px solid #D98F3E;
box-shadow : 0px 4px 10px gray;
display: flex;
}


nav{
width: 100%;
display: flex;
margin: 0 auto;
color: aliceblue;
font-size: 1.3em;
text-transform:uppercase;
align-items: center;
justify-content: center;
}

ul {
width: 100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
list-style-type: none;
}

ul li {
margin: 0 20px;
border: 1px solid #D98F3E;
width: 100%;
height:50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; 
}

ul li a:hover{
color: #D98F3E;
text-decoration: none;
}

.reserv {
background-color: #D98F3E;
width: 100%;
color:rgb(39, 55, 77);
height: 50px;
padding: 0 5px;
border: 1px solid #D98F3E;
display: flex;
align-items: center;
justify-content: center;
}

.reserv:hover{
background-color: rgb(39, 55, 77);
color: #D98F3E;
}

.reserv li a:hover{
color: #D98F3E;
text-decoration: none;
}

/*--------LE SITE---------*/

main {
margin: 0 auto;
width: 100%;
background: rgba(247, 244, 239, 0.452);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.video{
width: 100%;
height: 56.25%;
margin-top: 20px; 
}

.video iframe{
width: 100%;
}

.barriere1, .barriere2 {
width: 80%;
height: 80px;
margin: 10px auto;
display: flex;
}

h1 {
text-align: center;
font-size: 3.2em;
font-family: 'cac_champagneregular', Arial, Helvetica, sans-serif;
}

/*Lignes Chambres, restaurant et SPA*/

.ligne1, .ligne2, .ligne3{
margin-top: 20px;
display: flex;
flex-direction: column;
}

#carouselExampleFade{
width: 100%;
}

h2{
font-size: 2.8em;
font-family: 'cac_champagneregular', Arial, Helvetica, sans-serif;	
text-align: center;
margin-top: 20px;
}

.texte1, .texte2, .texte3 {
width: 100%;
}

.texte2{
order:2;
}

.bouton{
display: flex;
justify-content: center;
}

.btn-secondary {
background-color:rgb(39, 55, 77);
}

.btn-secondary:hover{
background-color:#D98F3E;
}		

/*Les 3 boxes*/

.trio {
margin: 10px;
display: flex;
flex-wrap: wrap;
}

.presse, .carte, .avis{
border: #D98F3E 1px solid;
width: 100%;
height: 320px;
margin: 0px 5px;
display: flex;
flex-direction: column;
}

.presse header p a:hover, .carte header p a:hover, .avis header p a:hover{
color:#D98F3E; 
}

.presse header, .carte header, .avis header{
background-color:rgb(39, 55, 77);
height: 30px;
border-bottom: 1px #D98F3E solid;
text-align:center;
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}

.carte iframe{
width:100%;
}

.carte footer{
background-color: rgb(39, 55, 77);
height: 60px;
padding: 10px;
border-bottom: 1px #D98F3E solid;
color:aliceblue;
font-family: Arial, Helvetica, sans-serif;	
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}

.carte footer p {
margin: 1px;
font-size: 0.8em;
}

.tel1 {
display: flex;
align-items: center;
justify-content: center;
}

.fa-phone{
margin-right: 10px;
}

.carte footer a:hover{
color: #D98F3E;
}

.touslesavis, .touslesarticles{
overflow: hidden;
background: white;
}

.enteteavis, .entetepresse{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}

.entetepresse img{
width: 200px;
height: 50px;
margin-bottom: 20px;
}

.enteteavis img{
width: 70px;
margin: 5px;
}

.fa-star{
color: #D98F3E;
}

.card-title {
margin: 5px;
}

.card-text{
font-size: 0.8em;
margin: 5px;
}

.hauteurPresse{
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.hauteurAvis{
min-height: 320px; 
}

/*bouton de redirection vers le haut de la page*/

#boutonHaut{
display: none;
}

/*--------FOOTER---------*/


footer {
background: rgb(39, 55, 77);
width: 100%;
border-top: 1px solid #D98F3E;
color: aliceblue;
text-align: center;
}

footer p a:hover {
    color: #D98F3E;

}

.newsletters {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 1px solid #D98F3E;
color: aliceblue;
}

.newletters button, .newsletters input{
margin-bottom: 20px;
}

.reseaux{
margin: 0 auto;
width: 80%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}

.facebook, .twitter, .instagram, .tripadvisor{
width:25px;
height:25px;
cursor: pointer;
}

}













/*  Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 

/*header*/

#barre1{
width: 100%;
height: 35px;
margin: 0 auto;
background: #F7F4EF;
display: flex;
align-content: center;
justify-content: center;
}

.barre2 {
background: #F7F4EF;
width: 100%;
margin: 0 auto;
display:flex;
align-content: center;
justify-content: center;
}

.langues{
width: 20%;
padding-left: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
}

.langues p, .recherche p{
margin: 5px 15px;
}

.CB, .FR, .GB {
width: 30px;
height: 30px;
cursor: pointer;
}

.recherche{
width: 50%;
padding-right: 10px;
font-size: 1.1em;
display: flex;
align-items: center;
justify-content: flex-end;
}

.recherche form {
display:flex;
align-items: center;
justify-content:  center;   
}

.monBouton{
background:url("../img/bouton1.png");
width: 30px;
height:26px;
margin-left: 5px;
}

.tel{
width: 30%;
font-size: 1.2em;
}

.barre3 {
background-color:rgb(39, 55, 77);
margin: 0 auto;
width: 100%;
height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
width: 299px;
height: 130px;
}

.menu {
background-color:rgb(39, 55, 77);
width:100%;
height: 50px;
border-top: 1px solid #D98F3E;
border-bottom: 1px solid #D98F3E;
box-shadow : 0px 4px 10px gray;
display: flex;
}

nav{
width:100%;
display: flex;
margin: 0 auto;
color: aliceblue;
font-size: 1em;
text-transform:uppercase;
align-items: center;
justify-content: center;
}

ul {
display:flex;
align-items: center;
justify-content: center;
list-style-type: none;
}

ul li {
margin: 0 20px;
}

ul li a:hover{
color: #D98F3E;
text-decoration: none;
}

.reserv {
background-color: #D98F3E;
color:rgb(39, 55, 77);
height: 50px;
padding: 0 5px;
border: 1px solid #D98F3E;
display: flex;
align-items: center;
justify-content: center;
}

.reserv:hover{
background-color: rgb(39, 55, 77);
color: #D98F3E;
}

.reserv li a:hover{
color: #D98F3E;
text-decoration: none;
}

/*--------LE SITE---------*/


main {
margin: 0 auto;
width: 100%;
background: rgba(247, 244, 239, 0.452);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px #D98F3E solid;
border-top:1px #D98F3E solid;
border-bottom:1px #D98F3E solid;
}

.video{
width: 100%;
height: 56.25%;
margin-top: 20px; 
}

.video iframe{
width: 100%;
}

.barriere1, .barriere2 {
width: 506px;
height: 100px;
margin: 10px auto;
display: flex;
}

h1 {
text-align: center;
font-size: 4em;
font-family: 'cac_champagneregular', Arial, Helvetica, sans-serif;
}	

/*lignes Chambres, restaurant et SPA*/

.ligne1, .ligne2, .ligne3{
width: 100%;
margin-top: 40px;
display:flex;
}

#carouselExampleFade{
width: 50%;
margin: 20px;}

h2{
font-size: 3em;
font-family: 'cac_champagneregular', Arial, Helvetica, sans-serif;	
}

.texte1, .texte2, .texte3 {
width: 50%;
margin: 20px;
}

.bouton{
display: flex;
justify-content: flex-end;
margin: 0px;
}

.btn-secondary {
background-color:rgb(39, 55, 77);
}

.btn-secondary:hover{
background-color:#D98F3E;
}

/*les trois boxes*/

.trio {
width:100%;
margin: 10px;
display: flex;
}

.presse, .carte, .avis{
border: #D98F3E 1px solid;
width: 33%;
height: 320px;
margin: 0px 5px;
display: flex;
flex-direction: column;
}

.presse header, .carte header, .avis header{
background-color:rgb(39, 55, 77);
height: 30px;
border-bottom: 1px #D98F3E solid;
text-align:center;
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}

.presse header p a:hover, .carte header p:hover, .avis header p:hover{
color:#D98F3E;
}

.map{
width: 100%;
}

.carte iframe{
width:100%;
}

.carte footer{
background-color: rgb(39, 55, 77);
width: 100%;
height: 60px;
padding: 10px;
border-bottom: 1px #D98F3E solid;
color:aliceblue;
font-size: 0.8em;
font-family: Arial, Helvetica, sans-serif;	
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}

.carte footer p {
margin: 1px;
font-size: 0.9em;
}

.tel {
display: flex;
align-items: center;
justify-content: center;
}

.fa-phone{
margin-right: 10px;
}

.carte footer a:hover{
color: #D98F3E;
}

.touslesavis, .touslesarticles{
overflow: hidden;
background: white;
}

.enteteavis, .entetepresse{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}

.entetepresse img{
width: 200px;
height: 50px;
margin-bottom: 20px;
}

.enteteavis img{
width: 70px;
margin: 5px;
}

.fa-star{
color: #D98F3E;
}

.card-title {
margin: 5px;
}

.card-text{
font-size: 0.8em;
margin: 5px;
}

.hauteurPresse{
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.hauteurAvis{
min-height: 320px; 
}

/*bouton de redirection vers le haut de la page*/

#boutonHaut{
display: none;
}

/*--------FOOTER---------*/


footer {
width: 100%;
background: rgb(39, 55, 77);
border-top: 1px solid #D98F3E;
color: aliceblue;
text-align: center;
}

footer p a:hover {
    color: #D98F3E;

}

.newsletters {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 1px solid #D98F3E;
color: aliceblue;
}

.newletters button, .newsletters input{
margin-bottom: 20px;
}

.reseaux{
margin: 0 auto;
width: 250px;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}

.facebook, .twitter, .instagram, .tripadvisor{
width:35px;
height:35px;
cursor: pointer;
}

}











/* Pour ecran(desktops, 992px and up) */
@media screen and (min-width: 992px) { 

/*--------HEADER--------*/


#barre1{
background: #F7F4EF;
height: 35px;	
display: flex;
align-content: center;
justify-content: center;
}

.barre2 {
background: #F7F4EF;
width: 1200px;
display:flex;
flex-wrap: wrap;
}

.langues{
width: 20%;
padding-left: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
}

.langues p, .recherche p{
margin: 5px 15px;
}

.CB, .FR, .GB {
width: 30px;
height: 30px;
cursor: pointer;
}

.recherche{
width: 60%;
padding-right: 10px;
font-size: 1.1em;
display: flex;
align-items: center;
justify-content: flex-end;
}

.recherche form {
display:flex;
align-items: center;
justify-content:  center;   
}

.monBouton{
background:url("../img/bouton1.png");
width: 30px;
height:26px;
margin-left: 5px;
}

.tel{
width: 20%;
font-size: 1.2em;
}


.barre3 {
background-color:rgb(39, 55, 77);
height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
width: 299px;
height: 130px;
}

.menu {
background-color:rgb(39, 55, 77);
width:100%;
height: 50px;
border-top: 1px solid #D98F3E;
border-bottom: 1px solid #D98F3E;
box-shadow : 0px 4px 10px gray;
display: flex;
}

nav{
width: 980px;
display: flex;
margin: 0 auto;
color: aliceblue;
font-size: 1.3em;
text-transform:uppercase;
align-items: center;
justify-content: center;
}

ul {
width: 980px;
display:flex;
align-items: center;
justify-content: center;
list-style-type: none;
}

ul li {
margin: 0 20px;
}

ul li a:hover{
color: #D98F3E;
text-decoration: none;
}

.reserv {
background-color: #D98F3E;
color:rgb(39, 55, 77);
height: 50px;
padding: 0 5px;
border: 1px solid #D98F3E;
display: flex;
align-items: center;
justify-content: center;
}

.reserv:hover{
background-color: rgb(39, 55, 77);
color: #D98F3E;
}

.reserv li a:hover{
color: #D98F3E;
text-decoration: none;
}


/*--------LE SITE---------*/


main {
margin: 0 auto;
width: 980px;
background: rgba(247, 244, 239, 0.452);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px #D98F3E solid;
border-top:1px #D98F3E solid;
border-bottom:1px #D98F3E solid;
}

video{
margin-top: 20px;	
}

.barriere1, .barriere2 {
width: 506px;
height: 100px;
margin: 10px auto;
display: flex;
}

h1 {
text-align: center;
font-size: 4em;
font-family: 'cac_champagneregular', Arial, Helvetica, sans-serif;
}

/*Ligne Chambres, Restaurant et SPA*/

.ligne1, .ligne2, .ligne3{
width: 100%;
margin-top: 40px;
display:flex;
}

#carouselExampleFade{
width: 50%;
margin: 20px;}

h2{
font-size: 3em;
font-family: 'cac_champagneregular', Arial, Helvetica, sans-serif;	
}

.texte1, .texte2, .texte3 {
width: 50%;
margin: 20px;
}

.bouton{
width: 100%;
display: flex;
justify-content: flex-end;
margin: 0px;
}

.btn-secondary {
background-color:rgb(39, 55, 77);
}

.btn-secondary:hover{
background-color:#D98F3E;
}

/*Les 3 Boxes*/

.trio {
margin: 10px 10px;
display: flex;
}

.presse, .carte, .avis{
border: #D98F3E 1px solid;
width: 320px;
height: 320px;
margin: 0px 5px;
display: flex;
flex-direction: column;
}

.presse header, .carte header, .avis header{
background-color:rgb(39, 55, 77);
height: 30px;
border-bottom: 1px #D98F3E solid;
text-align:center;
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}

.presse header p a:hover, .carte header p a:hover, .avis header p a:hover{
color:#D98F3E; 
}

.carte iframe{
width:100%;
}

.carte footer{
background-color: rgb(39, 55, 77);
height: 58px;
padding: 10px;
border-bottom: 1px #D98F3E solid;
color:aliceblue;
font-family: Arial, Helvetica, sans-serif;	
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}

.carte footer p {
margin: 1px;
font-size: 0.9em;
}

.tel {
display: flex;
align-items: center;
justify-content: center;
}

.fa-phone{
margin-right: 10px;
}

.carte footer a:hover{
color: #D98F3E;
}

.touslesavis, .touslesarticles{
overflow: hidden;
background: white;
}

.enteteavis, .entetepresse{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}

.entetepresse img{
width: 200px;
height: 50px;
margin-bottom: 20px;
}

.enteteavis img{
width: 70px;
margin: 5px;
}

.fa-star{
color: #D98F3E;
}

.card-title {
margin: 5px;
}

.card-text{
font-size: 0.8em;
margin: 5px;
}

.hauteurPresse{
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.hauteurAvis{
min-height: 320px; 
}


/*bouton de redirection vers le haut de la page*/

#boutonHaut{
position: fixed;
bottom : 10px;
right: -100px;
}

/*--------FOOTER---------*/


footer {
background: rgb(39, 55, 77);
width: 100%;
border-top: 1px solid #D98F3E;
color: aliceblue;
text-align: center;
}

footer p a:hover {
    color: #D98F3E;
}

.newsletters {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 1px solid #D98F3E;
color: aliceblue;
}

.newletters button, .newsletters input{
margin-bottom: 20px;
}

.reseaux{
margin: 0 auto;
width: 250px;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}

.facebook, .twitter, .instagram, .tripadvisor{
width:35px;
height:35px;
cursor: pointer;
}

}