@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Special+Elite');

:root{
	--color: #343434;
	--background: #d6f9ff;
	--bg_menu: #1b566c;
	--primary: #1a1a1a;
	--hover: #a17f1e;
}

html, body{
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: var(--color);
	/*background: var(--background);*/
	box-sizing: border-box;
}

a{
	color: var(--color);
	transition: .2s;
}

a:hover, button:hover{
	transform: scale(1.1);
	transition: .3s;
}

h1, h2, h3, h4, h5{
	margin: 0;
}






input[type=submit], .btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: var(--primary);
	color: #FFF;
	text-decoration: none;
	min-width: 200px;
	padding: 8px 32px;
	border: 0;
	transition: .3s;
	border-radius: 24px;
	cursor: pointer;
	font-size: 18px;
}






header{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 64px;
	color: #000;
	background: #FFF;
}

header.animated{
	animation: slideIn .8s linear;
}

header img{
	height: 124px;
	transition: .3s;
}

nav{
	display: flex;
	flex-direction: column;
	/*gap: 8px;*/
}

nav div{
	margin-top: 8px;
}

nav a{
	text-decoration: none;
	color: #000;
	font-size: 20px;
	
	display: inline-flex;
	align-items: center;
}

nav h1 a{
	font-size: 32px;
	transition: .3s;
}

nav a:not(:last-child):after{
	content: '\002014';
	font-size: 10px;
	padding: 0 8px;
}


@keyframes slideIn{
	from {
		opacity: 0;
		transform: scale(3);
	}
	
	to {
		opacity: 1;
		transform: scale(1);
	}
}






.hero__image{
	width: 100%;
	height: 400px;
	background-attachment: fixed;
	background-position-y: bottom;
	background-repeat: no-repeat;
	background-size: cover;
}






.container{
	padding: 64px;
}

.container p{
	margin-top: 0;
}

.container hr{
	width: 120px;
	margin: 32px auto;
	border: 1px solid #000;
}

.container{
	/*width: calc(100% - 64px);*/
	margin: auto;
	text-align: center;
	position: relative;
}

.container:nth-child(2n+1){
	/*background: #FFF;*/
	/*color: #292929;*/
}

.container:nth-child(2n+1)::before{
	content: '';
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #c5681845;
	opacity: 0.8;
}

body::before{
	content: '';
	display: flex;
	position: fixed;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	
	background: url(images/background.svg);
}





.small_container{
	max-width: 848px;
	margin: auto;
	margin-top: 24px;
}


.small_container ul{
	display: inline-block;
	text-align: left;
}






.card{
	margin: 8px;
	color: var(--color);
	
	width: calc(103px * 1.8);
	height: calc(100px * 1.8);
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-decoration: none;
	
	background-repeat: no-repeat;
}

.card-full{
	grid-column-end: span 2;
}

.card li, .actucard li{
	list-style-type: square;
	text-align: left;
}

.card hr{
	width: 90%;
	border-color: var(--color);
}

.card h3{
	margin-bottom: 8px;
}



.card-color .card:nth-child(1){
	--border: #ed0b11;
	background-image: url(images/forme-1.svg);
}

.card-color .card:nth-child(2){
	--border: #45fd08;
	background-image: url(images/forme-4.svg);
}

.card-color .card:nth-child(3){
	--border: #2101fd;
	background-image: url(images/forme-2.svg);
}

.card-color .card:nth-child(4){
	--border: #2101fd;
	background-image: url(images/forme-3.svg);
}











input, textarea{
	font-size:18px;
}

.contact{
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	text-align: left;
}

.contact label{
	display: block;
	margin-top: 16px;
}

.contact input[type=text], .contact textarea{
	display: block;
	text-align: left;
	width: 500px;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 6px 12px;
	margin-top: 4px;
	box-sizing: border-box;
}





.line{
	border-left: 8px solid var(--primary);
	padding-left: 16px;
	margin-bottom: 32px;
	text-align: left;
}


.inline{
	display: inline-block;
	text-align: left;
}

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

.center{
	text-align: center;
}

.justify{
	text-align: justify;
}

.margin{
	margin: 30px;
}

.mb{
	margin-bottom: 10px!important;
}

.nomargin{
	margin: 5px;
}

.padding{
	padding: 20px;
}

.hidden{
	display: none;
}

label.checkbox{
	display: block;
}





video{
	width: 100%;
	max-width: 800px;
	max-height: 400px;
}





blockquote {
	position: relative;
	margin: 0 auto;
	padding: 8px;
	font-style: italic;
	max-width: 700px;
}

blockquote:before,
blockquote:after {
	position: absolute;
	font-family: 'Special Elite', cursive;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -5rem;
	top: 0rem;
}

blockquote:after {
	content: '”';
	right: -5rem;
	bottom: 0rem;
}





.card__shape{
	display: inline-flex;
	gap: 180px;
	margin: 48px;
	flex-wrap: wrap;
}





footer{
	padding: 64px 0;
	background: #1a1a1a;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 176px;
}

.footer.link{
	display: flex;
	flex-direction: column;
}

.footer.link{
	display: flex;
	flex-direction: column;
	/*gap: 8px;*/
}

.footer a{
	color: #FFF;
	text-decoration: none;
	display: flex;
	align-items: center;
}

.footer svg, .socials svg{
	width: 24px;
	height: 24px;
	margin-right: 10px;
	transition: .3s;
}

.footer svg:hover, .socials svg:hover{
	transform: scale(1.4);
}







.menu-mobile, .menu-close, .hidden-xl{
	display: none;
}


@media only screen and (max-width: 890px){
	
	footer{
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}
	
	.footer:nth-child(1){
		margin: auto;
	}
	
	header{
		flex-direction: column;
		gap: 0;
		padding-bottom: 16px;
	}
	
	nav{
		text-align: center;
	}
	
	.menu-mobile, .menu-open .menu-close{
		position: absolute;
		top: 8px;
		right: 8px;
		display: flex!important;
		color: #000;
		cursor: pointer;
		z-index: 50;
		padding: 8px 24px;
	}
	
	.menu-open .menu-mobile{
		display: none!important;
	}
	
	.menu-open{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		display: flex!important;
		flex-direction: column;
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
	}
	
	.menu-open img, .menu-open .header__title{
		display: none;
	}
	
	.header__body{
		display: none;
	}
	
	.menu-open .header__body{
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	
	.header__body a{
		margin-bottom: 8px;
	}
	
	.header__body a:after{
		display: none;
	}
	
	.flex{
		flex-wrap: wrap;
	}
	
	iframe{
		width: 100%;
	}
	
	.actualites_top span{
		display: none;
	}
	
	.actualites_images img{
		width: 100%!important;
		height: 200px!important;
	}
	
	.hero__image{
		height: 200px;
		background-attachment: initial;
		background-position-y: top;
		background-size: 100%;
	}

}

@media only screen and (max-width: 700px){
	
	footer{
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	
	.footer a{
		display: inline-flex;
	}
	
	.footer{
		margin: 4px!important;
	}
	
	input, textarea{
		width: 100%!important;
	}
	
	.classes .card{
		height: 100%;
	}
	
	.card__shape{
		gap: 0;
		margin: 0;
	}
	
	.shape__container{
		width: 100%!important;
	}
	
	.hidden-xl{
		display: block!important;
	}
	
	.hidden-xs{
		display: none!important;
	}
	
	.container{
		padding: 16px;
	}

}