@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
    scroll-behavior: smooth;
}

.en {
	display: flex;
	justify-content: flex-end;
	padding-right: 40px;

}
.en button {
	position: relative;
	align-items: center;
	justify-content:center;
	font-family: "raleway";
    font-size: 0.8em;
    font-weight:700;
	color: rgb(255, 255, 255);
	height: 25px;
	width: 80px;
	border-radius: 40px;
	border: 2px solid rgb(255, 255, 255);
	transition: all 0.5s ease-out;
	background-color: rgba(255, 255, 255, 0);	
}

.en button:hover,
.en button:focus {
	color:#e7b670;
	background-color: rgb(255, 255, 255);	
}


/*-- section 1--*/


.sec1 {
    display: flex;
    height: 100vh;
    width: 100%;
	align-items: center;
	justify-content: center;
    text-align: center;
    background: url(/assets/img/terroir.jpg);
    position: relative;
    opacity: 0.95;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.sec1 h1{
    color:white;
    font-size: 6em;
    font-weight:400;
    text-align: center;
    font-family: "SysFalsoW00-italic";
    margin-left: 80px;
    margin-right: 80px;
}

@font-face {
    font-family: "Noto Serif";
    src:url(/assets/fonts/NotoSans-Regular.ttf);
}

@font-face {
    font-family: "raleway";
    src:url(/assets/fonts/Raleway-Regular.ttf);
}

@font-face {
    font-family: "SysFalsoW00-italic";
    src:url(/assets/fonts/SysFalso-W00-Italic.ttf);
}


/*-- section 2--*/

.sec2,.sec3,.sec4,.sec5,.sec6 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.sec2 .container,.sec3 .container,.sec4 .container,.sec5 .container,.sec6 .container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items:center ;
}

.separateur {
    margin-left: 60px;
    margin-right:60px;
}

.sec2 h1 {
    color:#e7b670 ;
    font-size: 4em;
    font-weight:200;
    text-align: center;
    font-family: "SysFalsoW00-italic";
    margin-top: 40px;
}
.sec2 .title h2 {
    color:#e7b670 ;
    font-size: 1.4em;
    text-align: center;
    font-family: "Noto Serif", serif;
    font-weight: 400;
    margin-bottom: 70px;
}

.sec2 .right h3 {
    color: black ;
    font-size: 2em;
    font-family: "Noto Serif", serif;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: left;

}
.sec2 .left h4 {
    color: black ;
    font-size: 2em;
    font-family: "Noto Serif", serif;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: right;
}
.sec2 .center h5 {
    color:#e7b670 ;
    font-size: 2em;
    font-family: "Noto Serif", serif;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}
.sec2 .center h6 {
    color: black ;
    font-size: 2em;
    font-family: "Noto Serif", serif;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

.sec2 .content1 .right p {
    text-align: left;
}
.sec2 .content2 .left p {
    text-align: right;
}
.sec2 .content4 .right p {
    text-align: left;
}
.sec2 .content5 .left p {
    text-align: right;
}
.sec2 .content5 .europe p {
    text-align: right;
}

p { font-size: 0.8em;
    max-width: 600px;
    line-height: 2.2;
    text-align: center;
    font-family: "raleway";
    margin-left: 0PX;
    margin-right: 0PX;
}

.content1, .content12 {
    display:flex ;
    flex-direction: row;   
}
.separateur2 {
    margin-left: 60px;
    margin-right:60px;
}
.content {
    width: 100%;
    display: flex;
    flex-direction: row ;
    align-items: center;
    justify-content: space-around;
}
.content1 .left img {
    width: 100%;
    margin-top: 40px;
}
.content2 .right img {
    width: 100%;
    margin-top: 40px;
}
.content3 .center img{
width: 80px;
margin-top: 20px;
}
.content4 .left img{
    width: 100%;
    margin-top: 40px;
}
.content5 .right img{
    width: 100%;
    margin-top: 40px;
}
.content5 .left img{
    width: 30%;
    margin-top: 20px;

}
.europe img{
    width: 100%;
    margin-top: 20px;
    margin-right: 40px;
}

.content3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.content4 h5{  

    color:#e7b670 ;
    font-size: 2em;
    font-family: "Noto Serif", serif;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: left;
}

.europe{
    display: flex;
    align-items: center; 

}
.content5 h6{ 
    color:#e7b670 ;
    font-size: 2em;
    font-family: "Noto Serif", serif;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: right;
}
.denosjours h7{    
    color: white ;
    font-size: 2em;
    font-family:"SysFalsoW00-italic";
    font-weight: 200;
    margin-bottom:20px;
    margin-top: 20px;
    text-align: center;
}

/*-- section denosjours--*/ 
.denosjours{

    display: flex;
    flex-direction: column;
    align-items: center;
    min-height:500px;
    background: url(/assets/img/denosjours.jpg);
    position: relative;
    opacity: 0.95;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    }
.denosjours .texte {
    background-color: #e7b670;
    margin: -40px;
    margin-bottom: -100;
    padding: 20px;
    text-align: center;
    color: white;
}   

.content6 p{
    padding-bottom:0px ;
    margin-bottom: 60px;

}
    

/*-- section 3--*/

.sec3 .content7 .left p {
    text-align: right;
}

.sec3 .content7 .right img {
    display: flex;
    align-items: center;
    justify-content:center;
    width: 100%;
    margin-top: 240px;
}

.sec3 .content7 .separateur {
    margin-top: 240px;
}

.sec3 .content8 .right p {
    text-align: left;
}

.sec3 .content8 .left img{
    display: flex;
    align-items: center;
    justify-content:center;
    width: 100%;
    margin-top: 140px;
}

.sec3 .content8 .separateur{
    margin-top: 140px;
}


.sec3 .content7 .left h1 {
    color: #e7b670 ;
    font-size: 3em;
    font-family:"SysFalsoW00-italic";
    font-weight: 200;
    margin-bottom: 20px;
    margin-top: 40px;
    text-align: right;
}

.sec3 .content8 .right h1 {    
    color: #e7b670 ;
    font-size: 3em;
    font-family:"SysFalsoW00-italic";
    font-weight: 200;
    margin-bottom: 20px;
    margin-top: 40px;
    text-align: left;
}

.sec4 .content9 .right img {
    display: flex;
    align-items: center;
    justify-content:center;
    width: 100%;
    
}
.sec3 .container .title2 {  
    color: #848273 ;
    font-size: 2em;
    font-family:"SysFalsoW00-italic";
    font-weight: 200;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

/*-- section sols--*/

.sols{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height:500px;
    margin-top: 100px;
    margin-bottom: -100px;
    background: url(/assets/img/sols.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec4 img {
    padding-top: 70px;
}

.sec4 .left{
    background-color: #e7b670;
    color: white;
    text-align: center;
    margin: 10px;
    padding: 20px;
}

.sec4 .right img{
margin-left: 60px;
padding-top: 140px;
}

.sec4 h3, .sec5 h3 {
    font-size: 3em;
    font-family:"SysFalsoW00-italic";
    font-weight: 200;
}

.sec4 p{
    text-align: left;
    font-size: 0.8em;
}

/*-- section biodynamique--*/

.biodynamique{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height:500px;
    margin-top: 40px;
    margin-bottom: -120px;
    background: url(/assets/img/biodynamie.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec5 .left h1 {  
    color: #848273 ;
    font-size: 3em;
    font-family:"SysFalsoW00-italic";
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.sec5 .left h2 {  
    color: #000000 ;
    font-size: 3em;
    font-family:"SysFalsoW00-italic";
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

.sec5 .left h1 {
    margin-top: 140px;
    color: black;
}
.sec5 .left h3 {  
    color: #848273 ;
    font-size: 1.2em;
    font-family: "Noto Serif";
    font-weight: 200;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

.sec5 .right h1 {  
    font-size: 2.4em;
    font-family:"SysFalsoW00-italic";
    font-weight: 200;
    text-align: center;
}

.sec5 .right p{  
    font-size: 0.8em;
    font-family:"raleway";
    font-weight: 400;
    text-align: left;
}

.sec5 .right{
    background-color: #e7b670;
    color: white;
    text-align: start;
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 30px;
}


.sec6 .content11 .left p {
    text-align: right;
}
.sec6 .content10 .right p {
    text-align: left;
}


.sec6 .content10 .left img{
    align-items: center;
    justify-content:center;
    width: 100%;
    margin-top: 60px;

}

.sec6 .content11 .right img{
    align-items: center;
    justify-content:center;
    width: 100%;
    margin-top: 80px;

}

.sec6 .content10,.sec6 .content11{

margin-top:60px;
}


.pied {
    margin-top: 60px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;	font-size: 0.8em;
    background-color: #e7b670;
    background-position: center;
    background-size: cover;

}

.content12 {
    font-family: "raleway";
    font-style: normal;
}

.pied a {
	color: white;
}

.nav{
	display: flex;
    flex-direction: column;
    align-items: center;
	padding: 25px;
    font-weight: 700;

}
.pied .nav ul {
	display: flex
}
.pied .nav ul li {
	margin: 0 30px
    
}
.pied .nav p{
    color: white;
    font-family: "raleway";
	font-weight: 400;
    text-align: center;
    font-size: 1em;
}

.pied .icon img{
	width: 35PX;
}


@media (max-width: 1366px) {
    .sec1 {
        background: url(/assets/img/terroir.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .denosjours{
        background: url(/assets/img/denosjours.jpg);
        background-position: center;
         background-repeat: no-repeat;
         background-size: cover;       
    }
    .sols{
        background: url(/assets/img/sols.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .biodynamique{
        background: url(/assets/img/biodynamie.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
} 

@media (max-width: 1024px) {
    .content1 { flex-direction: column-reverse;}
    .content2 { flex-direction: column;}
    .content3 { flex-direction: column;}
    .content4 { flex-direction: column-reverse;}
    .content5 { flex-direction: column;}
    .content7 { flex-direction: column;}
    .content8 { flex-direction: column-reverse;}
    .content9 { flex-direction: column;}
    .content10 { flex-direction: column-reverse;}
    .content11 { flex-direction: column;}
    .content12 { flex-direction: column;}
    .separateur {display: none;}
    .sec1 h1 {font-size: 4em;}
    img{
        margin-left: 0px;
        margin-right: 0px;
    }
    .sec2 .title h1 {font-size: 3em;}
    .sec2 .right h3 {text-align: center;}
    .sec2 .left h4 {text-align: center;}
    .sec2 .content1 .right p {text-align:center;}
    .sec2 .content2 .left p {text-align: center;}
    .sec2 .content5 .left p {text-align: left;}
    .sec6 .content11 .left p {text-align: center;}
    .sec3 .content7 .left p {text-align: center;}
    .sec3 .content8 .right p {text-align: center;}  
    .content4 h5{text-align: center;}
    .content5 h6{text-align: center;}
    .sec3 .title2 h1{font-size: 1.6em;}
    .sec3 .content7 .left h1{text-align: center;font-size: 2.2em;}
    .sec3 .content7 .right img {margin-top: 60px;}
    .sec3 .content8 .left img {margin-top: 60px;}   
    .sec3 .content8 .right h1{text-align: center;}
    .sec3 .container .title2{ font-size: 1.2em;}
    .sec4 .container .right img {margin-left: 0; padding-top: 0;}
    .sec5 .container .content9 h1{font-size: 1.8em;}
    .sec5 .container .content9 h2{font-size: 1.8em;}
    .sec5 .container .content9 h3{font-size: 1.8em;}
    .pied .nav ul li {margin: 0 10px}
    .pied .icon img { width: 30PX;}

    }

    @media (max-width: 518px) {

    .denosjours{ min-height:350px;} 
    .sols { min-height:350px;}
    .biodynamique { min-height:350px;}
    .sec1 h1, .sec2 h1, .sec3 h1{font-size: 3em;}    
    }