@import url('https://fonts.googleapis.com/css?family=Advent+Pro|Dancing+Script&display=swap');

body {
    font-family: 'Advent Pro', sans-serif;
    padding: 0;
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
}
li{
    list-style-type: none;
}
h2{
    text-transform: uppercase;
    text-align: center;
    padding-top: 30px;
    font-size: 2em;
}
a {
    text-decoration: none;
    color: black;
}

/* ***********NAVBAR************* */

nav {
    overflow: hidden;
    background-color: #FFFAE1;
    position: fixed;
    width: 100%;
    opacity: 0.9;
}
header li{
    float: right;
    font-size: 1.2em;
}
header li a{
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 18px 16px;
}
#logo{
    font-family: 'Dancing Script', cursive;
    font-weight: bold;
    float: left;
}

/* ***********IMAGE PRINCIPALE************ */

#imagePrincipale {
    padding-top: 60px;
    background: url(media/image-principale.JPG) no-repeat fixed 50% 50%;
    background-size: cover;
    height: 799px;
}
h1 {
    font-family: 'Dancing Script', cursive;
    text-align: center;
    color: antiquewhite;
    font-size: 4em;
    margin-top: 100px;
    text-shadow: 1px 3px 2px black;
}
#premierTrait {
    height: 1px;
    width: 90%;
    margin: -3px auto;
    border-color: #FFFAE1;
}
h3 {
    text-align: center;
    color: antiquewhite;
    font-size: 3em;
    text-shadow: 1px 3px 2px black;
}

/* **************PRESENTATION**************** */

#presentation{
    background-color: #FFFAE1;
    padding: 10px 0 100px 0;
}
#texteIntro{
    padding: 0 20px;
}
#prestations{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 10%;
}
.imagesPrestations h4{
    font-family: 'Dancing Script', cursive;
    text-align: center;
    font-size: 1.8em;
    margin: 15px;
    font-weight: 300;
}
.imagesPrestations img{
    border-radius: 10px; 
    box-shadow: 3px 5px 3px 1px rgba(0,0,0,0.5);
}
.imagesPrestations img:hover{
    opacity: 0.5;
    transform: scale(1.05);
    transition: 0.8s ease-in-out;
}

/* ****************TOURISME************** */
#tourisme{
    height: 140px;
    background-color: #f1f2f6;
    padding: 1px 2%;
}
#tourisme h2{
    padding-top: 60px;
}
#ocean{
    background: url(media/ocean.jpg);
}
#chateau{
    background: url(media/chateau.JPG);
}
#phare{
    background: url(media/phare.JPG);
}
#vignoble{
    background: url(media/vignes.jpg);
}
#tourisme li{
    margin: 65px 100px 0 100px;
    height: 226px;
    width: 55%;
    max-width: 550px;
    float: left;
    box-shadow: 6px 6px 28px -1px rgba(0,0,0,0.75);
}
#tourisme p{
    height: 45px;
    width: 235px;
    background-color: #01DF74;
    float: right;
    margin: 50px -180px 0 0;
    font-size: 1.2em;
    text-align: center;
    padding-top: 15px;
    box-shadow: 4px 4px 0 1px rgba(90, 161, 43, 1);
}
#tourisme #chateau, #tourisme #vignoble {
    float: right;
}
#chateau p, #vignoble p{
    float: left;
    border-color: cyan;
    margin-left: -180px;
    box-shadow: -4px 4px 0 1px rgba(15,154,156,1);
}

/* ***********FOOTER************ */
footer #foot{
    background-color: #524A3A;
    color: #FFFAE1;
    padding: 20px 0 10px 0;
    text-align: center;
}
form{
    margin: 0 auto;
    min-width: 900px;
}
input, textarea, button {
    border: none;
    width: 55%;
    padding: 15px 10px;
    margin: 1px 0;
    font-size: 1.2em;
    font-family: 'Advent Pro', sans-serif;
    border-radius: 8px;
}
textarea{
    height: 120px;
    resize: none;
}
button{
    font-size: 1.5em;
    border-color: #FFFAE1;
}
button :hover{
    background-color: #e55039;
    color: #FFFAE1;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
#deuxiemeTrait{
    height: 1px;
    width: 75%;
    background-color: #FFFAE1;
    margin: 60px auto;
}
#copyrightEtIcons{
    display: flex;
    margin-bottom: 20px;
    padding: 0 10%;
}
#copyright {
    display: flex;
    width: 50px;
    text-align: left;
    color: #FFFAE1;
}
#icons{
    width: 50px;
}