*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
 --radius: .5rem;
 --font-title: 'Bricolage Grotesque', sans-serif;
 --font-base: 'Roboto', sans-serif;
 --line-h-base: 1.3;
 --line-h-title: 1.2;
 --color-black: #4D4040;
 --color-text: var(--color-black);
 font-size: 16px;
 line-height: 1.2em;
 font-family: var(--font-base);

 @media (max-width: 767px) {
	font-size: 14px;
 }
}


body {
 font-family: var(--font-base);
 line-height: var(--line-h-base);
 color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-title);
 line-height: var(--line-h-title);
 margin-bottom: 1rem;
}

h2, .h2, h1, .h1 {
 font-family: var(--font-title);
 font-size: clamp(4rem, 16vw, 18rem);
 line-height: var(--line-h-title);
}

h3, .h3 {
 font-family: var(--font-title);
 font-size: clamp(2rem, 3vw, 4rem);
 line-height: var(--line-h-title);
}

h4, .h4 {
 font-family: var(--font-title);
 font-size: clamp(2rem, 2.5vw, 3.5rem);
 line-height: var(--line-h-title);
}

h5, .h5 {
 font-family: var(--font-title);
 font-size: clamp(1.7rem, 2.2vw, 3rem);
 line-height: var(--line-h-title);
}

h6, .h6 {
 font-family: var(--font-title);
 font-size: clamp(1.5rem, 2vw, 2rem);
 line-height: var(--line-h-title);
}

.big-title {
 font-size: 1.25rem;
 line-height: var(--line-h-title);
}

.base, p, ul, ol, li {
 font-size: 1rem;
 margin-bottom: .8rem;

 &:last-child {
	margin-bottom: 0;
 }
}

.small {
 font-size: .9rem;
}

.xsmall {
 font-size: .8rem;
}

.font-title {
 font-family: var(--font-title);
}

.font-base {
 font-family: var(--font-base);
}

.accent {
 color: var(--color-green);
}

.container {
 width: 85vw;
 max-width: 1640px;
 margin-inline: auto;

 @media (max-width: 767px) {
	max-width: 92vw;
 }
}

img {
 width: 100%;
 height: auto;
}

.grid {
 display: grid;
 gap: 1rem;

 @media (max-width: 767px) {
	display: flex;
	flex-direction: column;
 }
}

.flex {
 display: flex;

 @media (max-width: 767px) {
	flex-direction: column;
 }
}

body {
 background-position: top center;
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 margin-top: var(--headerHeight);
}

body,html {
 overflow-x: hidden !important;
 overflow-y: auto;
 scroll-behavior: smooth;
}

.bg-white {
 background-color: white;
 color: var(--color-primary);
}

.blocs-grid {
 grid-template-columns: repeat(3, 1fr);

 @media (max-width: 991px) {
	display: flex;
	flex-direction: column;
 }
}

.btn-primary, [type="submit"] {
 cursor: pointer;
 color: white;
 background-color: var(--color-primary);
 border-radius: .5rem;
 padding: .5rem 1.5rem;
 display: flex;
 width: fit-content;
 justify-content: center;
 align-items: center;
 font-size: 1rem;
 line-height: normal;
 text-decoration: none;
 box-shadow: inset 0 3px 15px rgba(255,255,255,.15);
 transition:  all .2s linear;
 border: none;

 &:hover {
	box-shadow: inset 0 15px 15px rgba(255,255,255,.15);
	background-color: var(--color-secondary);
 }
}

.info-bloc {
	padding: 1rem;

 .img-container {
	margin-bottom: 2rem;
 }

 .content {
	font-size: 1.2rem;
	line-height: 1.3em;
	padding-bottom: 2rem;
	color: var(--color-text);

	* {
	 font-size: inherit;
	 line-height: inherit;
	}

	a {
	 color: var(--color-primary);
	}
 }

 .btn-primary {
	margin-top: auto;

	@media  (max-width: 991px) {
	 width: 100%;
	}
 }
}

a {
 color: var(--color-primary);
 transition: all .2s linear;
 svg {
	color: inherit;
 }
}

ul.socials {
 padding: 0;
 margin: 0;
 list-style: none;
 display: flex;
 gap: .5rem;
 align-items: center;
 justify-content: flex-start;
flex-wrap: wrap;

 li {
	margin: 0;
 }

 a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	min-width: 2.5rem;
	height: 2.5rem;
	min-height: 2.5rem;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: white;

	svg {
	 width: 1.5rem;
	 height: auto;
	}

	&.facebook {
	 background-color: transparent;

	 svg {
		width: 100%;
		color: var(--color-primary);
	 }
	}

	&:hover {
	 background-color: var(--color-secondary);

	 &.facebook {
		background-color: transparent;

		svg {
		 color: var(--color-secondary);
		}
	 }
	}
 }
}

section.section {
 padding: 7rem 0;
 background-color: var(--color-secondary);
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 margin: 6rem 0;

 &:not(.info-blocs, .intro) {
	color: white;

	h2 {
	 text-shadow: 0 5px 10px rgba(0,0,0,.65);
	 margin-bottom: 0;
	 line-height: 1;
	}

	h4 {
	 text-shadow: 0 10px 15px rgba(0,0,0,.5);
	 margin-top: 5rem;
	}

	h4, p {
	 max-width: 60%;
	}

	.btn-primary {
	 font-size: 1.5rem;
	 margin-top: 2rem;
	}

	@media (max-width: 767px) {

	 h4, p {
		max-width: 90%;
	 }
	}
 }

 &.no-bg {
	h2, h4 {
	 text-shadow: none;
	}
 }

 &.intro {
	color: white;

	h2 {
	 margin: 0;
	 line-height: 1;
	}
 }

 &.about {
	padding: 5rem 0;
	margin: -6rem 0;

	.grid {
	 grid-template-columns: repeat(2, 1fr);
	}

	.content {
	 font-size: clamp(1.1rem, 2vw, 1.2rem);
	 line-height: var(--line-h-base);

	 * {
		font-size: inherit;
		line-height: inherit;
		max-width: 100%;
	 }

	 .img-container {
		margin-top: 2rem;
	 }
	}
 }

 @media (max-width: 767px) {
	padding: 4rem 0;
	margin: 3rem 0;

	&.about {
	 padding: 2rem 0;
	 margin: -3rem 0;
	}
 }
}

.page-header {

 &.hero {
	width: 100vw;
	/* height: calc(100dvh - var(--headerHeight)); */
	height: auto;
	margin-bottom: -6rem;
	display: flex;

	img {
	 width: 100%;
	 height: auto;
	 object-fit: cover;
	 object-position: top center;
	}

	@media (max-width: 767px) {
	 margin-bottom: -3rem;
	}
 }
}

header.header {
 color: white;
 background-color: var(--color-primary);
 padding: 1.2rem 0;
 position: fixed;
 top: 0;
 width: 100vw;
 z-index: 9999;

 @media (max-width: 767px) {
	padding: 1rem 0;
 }

 .logo {
	width: 10rem;

	@media (max-width: 767px) {
	 width: 8rem;
	}
 }

 .flex {
	gap: 1rem;
	align-items: center;
	justify-content: space-between;

	@media (max-width: 767px) {
	 flex-direction: row;
	}
 }

 .btn-menu {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	background: transparent;
	border: none;

	span {
	 display: flex;
	 width: 3rem;
	 height: .4rem;
	 background-color: white;
	}
 }

 #burgerMenu {
	position: fixed;
	top: var(--headerHeight);
	right: -100vw;
	width: 45vw;
	height: calc(100dvh - var(--headerHeight));
	padding: 6rem;
	transition: all .4s ease-in-out;

	@media (max-width: 991px) {
	 width: 100vw;
	 padding: 2rem;
	}

	&.is-active {
	 right: 0;
	}

	.flex {
	 width: 100%;
	 height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	 flex-direction: column;
	 gap: 6rem;
	 align-items: flex-start;
	 justify-content: space-between;
	}

	&::before {
	 content: '';
	 background-color: var(--color-primary);
	 position: absolute;
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 z-index: -1;
	 opacity: .9;
	}

	a {
	 color: white;
	 text-decoration: none;
	}

	ul {
	 padding: 0;
	 margin: 0;
	 list-style: none;
	 display: flex;
	 flex-direction: column;
	 gap: 1.1rem;

	 li {
		margin: 0;
	 }
	}
 }
}

.mapContainer {
 position: relative;
 margin-bottom: 3rem;

 .address {
	background-color: white;
	color: var(--color-primary);
	display: flex;
	flex-direction: column;
	width: fit-content;
	padding: 2rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;

	address {
	 font-size: 1.2rem;
	}
 }
}


body.Page {

 form {
	background-color: white;
	padding: 2rem;
 }
}