*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background-color: #FAEFE0;
	padding: 0rem;
	font-family: Montserrat;
}

.header{
	background-color: #F1D2A7;
	padding: 2rem 5rem 2rem 5rem;
	display: flex;
	align-items: center;
}

.side-menu{
	display: none;
}

.header-left{
	width: 45%;
	display: flex;
	gap: 2rem;
	align-items: center;
}

.header-right{
	width: 54%;
	text-align : right;
}

.header-title{
	text-align: left;
	font-family: Garamond;
	font-size: 1.8rem;
}

.header .logo{
	width: 5rem;
	height: 5rem;
}


nav.header-nav ul li.btn, nav.header-nav ul li.btn-active{
	list-style-type: none;
	display: inline-block;
	text-align: right;
	padding-inline: 1rem;
	font-family: Montserrat;
	font-weight: bold;
	text-transform: uppercase;
}

nav.header-nav ul li.btn a{
	color: #4F4F4F;
	text-decoration: none;
	border-bottom: 0.2rem solid #4F4F4F;
	text-transform: uppercase;
}
nav.header-nav ul li.btn-active a{
	color: #000000;
	text-decoration: none;
	border-bottom: 0.2rem solid #000000;
	text-transform: uppercase;
}

nav.header-nav ul li.btn:hover a{
	color: #2B2B2B;
	transition: 0.5s all;
	font-weight: bold;
	border-bottom: 0.2rem solid #2B2B2B;
}


div.site-body{
	background-color: #FAEFE0;
	padding: 0px;
}

div.hero-header{
	background-image: url("../img/header-bg.jpg");
	background-size: cover;
	background-position: center;
	height: 50rem;
	text-align: center;
	padding: 5rem;
	align-content: center;
	line-height: 1.5rem;
	overflow: hidden;
}


h2.page-title{
	text-align: center;
	font-family: Garamond;
	font-weight: 1200;
	font-size: 4rem;
	line-height: 2rem;
	text-transform: uppercase;
	padding-top: 4rem; padding-bottom: 4rem;
}

h2.title{
	color: #FFFFFF;
	font-family: Garamond;
	font-size: 4rem;
	font-weight: 1200;
	line-height: 4rem;
}

h3.subtitle-wht{
	color: #FFFFFF;
	font-family: Montserrat;
	font-size: 2rem;
	font-weight: 300;
	margin-top: 0rem;
	line-height: 3rem;
}

h3.subtitle{
	color: #000000;
	font-family: Garamond;
	font-size: 2rem;
	font-weight: 300;
	text-align: center;
	margin-top: 0rem;
	margin-bottom: 2rem;
}

.sub-subtitle{
	font-family: Garamond;
	font-weight: 300;
	font-size: 1rem;
	text-align: center;
}

.section-title{
	font-family: Garamond;
	font-size: 2rem;
	font-weight: 900;
}



.first-row, .second-row, .third-row, .main, .divided-section{
	background-color: #FAEFE0;
	display: flex;
	padding: 2rem 5rem 2rem 5rem;
}

div.row-left, div.row-right, .left-form, .right-form{
	width: 50%;
	padding-inline: 2rem;
	background-color: #FAEFE0;
	align-content: center;
}

div.row-left-centered, div.row-right-centered{
	width: 100%;
	padding: 0;
}

.maps-integration{
	width: 90%;
	filter: grayscale(100%) invert(90%);
}

.articles-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding-left: 5rem; padding-right: 5rem;
	padding-bottom: 5rem;
}

.article{
	background-color: #F1D2A7;
	padding: 1rem;
	border-radius: 0.5rem;
}

.article-first-line{
	display: flex;
	width: 100%;
	gap: 1rem;
	font-size: 0.8rem;
	text-align: right;
	line-height: 0.5rem;
	margin-top: 0.6rem; margin-bottom: 0.6rem;
}

.article-title{
	font-family: Garamond;
	font-size: 1.2rem;
	line-height: 0.5rem;
	margin-top: 0.6rem; margin-bottom: 0.6rem;
}

.article-desc{
	font-size: 0.9rem;
	text-align: justify;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient : vertical;
	overflow: hidden;
	margin-top: 0.6rem; margin-bottom: 0.6rem;
}

.base-btn{
	background-color: #4E032A;
	padding: 0.5rem 1.5rem 0.5rem 1.5rem;
	border: 0;
	font-family: Montserrat;
	color: #FFFFFF;
	align-content: right;
	border-radius: 10rem;
	text-decoration: none;
	font-weight: 600;
}

.base-btn:hover{
	background-color: #3B0220;
	border: 0;
	font-family: Montserrat;
}

.base-btn .btn-link{
	text-decoration: none;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 0.8rem;
}

img.section-img{
	display: block;
	width: 99%;
	position: center;
	background-size: cover;
	margin: 0 auto;
}

img.article-img{
	display: block;
	width: 100%;
	height: auto;
	position: center;
	background-size: cover;
	margin: 0 auto;
	border-radius: 0.5rem;
}

p.section-text{
	line-height: 2;
}

footer.footer{
	background-color: #F1D2A7;
	text-align: center;
	display: flex;
	align-items: center;
	align-content : center;
	justify-content: center;
	gap: 0.6rem;
	padding-top: 2rem; padding-bottom: 2rem;
	width : 100%;
}

footer.footer p:first-of-type{
	font-weight: 600;
	font-size: 1.1rem;
}

.footer .first-column{
	width: 40%;
	align-items: top;
	text-align: center; 
	padding: 1rem;
	line-height: 2rem;
}

.footer .second-column,.fourth-column{
	width: 15%;
}

.footer .second-column{
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: 0.3rem;
}

.footer .second-column ul{
	padding-left: 0.3rem;
	margin: 0;
}

.footer .second-column a{
	text-align: left;
	width: 100%;
}

.footer .third-column{
	width: 17%;
	text-align: left; 
}

.footer .fourth-column{
	align-content: center;
	padding: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.socials{
	display: flex;
	gap: 0.6rem;
	justify-content: center;
}

.socials .social-btn{
	background-color: #4E032A;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	text-decoration: none;
	font-size: 1.2rem;
	transition: 0.3s;
}

.socials .social-btn:hover{
	background-color: #3B0220;
}

nav.footer-nav ul li.footer-btn, nav.footer-nav ul li.footer-btn-active{
	list-style-type: none;
	text-align: left;
	padding-bottom: 0.3rem;
	font-family: Montserrat;
	font-weight: bold;
	padding-left: 0;
	text-transform: uppercase;

}

nav.footer-nav ul li.footer-btn a{
	color: #4F4F4F;
	text-decoration: none;
	border-left: 0.2rem solid #4F4F4F;
	padding-left: 0.3rem;
}
nav.footer-nav ul li.footer-btn-active a{
	color: #000000;
	text-decoration: none;
	border-left: 0.2rem solid #000000;
	padding-left: 0.3rem;
}

nav.footer-nav ul li.footer-btn:hover a{
	color: #2B2B2B;
	transition: 0.5s all;
	font-weight: bold;
	border-left: 0.2rem solid #2B2B2B;
	padding-left: 0.3rem;
}



/* LAYOUT PRINCIPAL */
.main{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding: 50px;
}

/* CARTE */
.map{

}
/* COLONNES */
.left, .right{
	width: 100%;
}

/* FORMULAIRE */
.form{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 600px;
}

/* LIGNES (2 colonnes) */
.row{
	display: flex;
	gap: 1rem;
}

/* CHAMPS */
.group{
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* LABEL */
.group label{
	margin-bottom: 0.6rem;
}

/* INPUTS */
input, select{
	width: 100%;
	padding: 1rem;
	border: 0.1rem solid #FAEFE0;
	border-radius: 10rem;
}
textarea{
	width: 100%;
	padding: 2rem;
	border: 0.1rem solid #FAEFE0;
	border-radius: 0.5rem;
	margin-bottom: 0.6rem;
}


/* TELEPHONE */
.phone{
	display: flex;
	gap: 0.2rem;
}

.phone select{
	width: auto;
}

.phone input{
	width: 100%;
}

/* TEXTAREA */
textarea{
	min-height: 10rem;
}

/* BOUTON */
button{
	background-color: #4E032A;
	color: white;
	border: none;
	padding: 1rem 2rem;
	cursor: pointer;
	width: fit-content;
}

/* MAP */
.map{
	width: 100%;
	height: 27rem;
	border: 0;
}

/* RESPONSIVE */
@media (max-width: 768px){
	.main{
		grid-template-columns: 1fr;
	}
}

.article-page{
}

.link{
	color: #4E032A;
	text-decoration: none;
}

.list{
	color: #000000;
	text-decoration: none;
	padding-left: 40px;
}

.list li{
	list-style-type: square;
	padding-bottom: 20px;
}