/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -0.25em
}

sup {
	top: -0.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

template {
	display: none
}

[hidden] {
	display: none
}

@font-face {
	font-family: "clearsans";
	src: url(63118c298d32b9a18a35.woff2) format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "clearsans";
	src: url(6fec2ce7eb0ed3ed13a3.woff2) format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "clearsans";
	src: url(cac87000e99db09400e2.woff2) format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: "clearsans";
	src: url(07ee1955bab4015093a7.woff2) format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: "aurora";
	src: url(30f7f6fea0f864471908.woff2) format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "jaturat";
	src: url(3d94f1936ee1827acd94.woff2) format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "jaturat";
	src: url(65078b0e7b6a58b7312d.woff2) format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: "jaturat";
	src: url(15410c1fb4f93c616679.woff2) format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

:root {
	--c-yellow: #fafb63;
	--c-cyan: #6bfff7;
	--c-dark-green: #172E2D;
	--f-labeur: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--f-heading: var(--f-labeur);
	--f-heading2: var(--f-labeur);
	--f-heading: "jaturat";
	--f-heading2: "aurora";
	--f-labeur: "clearsans"
}

.a42-modal {
	display: none;
	position: fixed;
	z-index: 600;
	background-color: #fff;
	padding: 1.25rem;
	margin: 0
}

.a42-modal .col-1-2 {
	float: left;
	width: 48%
}

.a42-modal .col-1-2:nth-child(odd) {
	clear: left
}

.a42-modal .col-1-2:nth-child(even) {
	float: right
}

@media screen and (max-width: 29.9em) {

	.a42-modal .col-1-2,
	.a42-modal .col-1-2:nth-child(even) {
		float: none
	}

	.a42-modal .col-1-2 {
		width: auto
	}

	.a42-modal .col-1-2:nth-child(odd) {
		clear: none
	}
}

.a42-modal .col-1-2,
.a42-modal fieldset,
.a42-modal legend {
	text-align: left
}

.a42-modal fieldset {
	position: relative;
	margin: .5em 0;
	padding: .5em 0 .5em .5em;
	border: 1px solid #cedae6
}

.a42-modal legend {
	position: relative;
	left: -0.2em;
	margin-bottom: 0;
	padding: 0 .2em;
	font-weight: bold;
	background-color: #fff;
	color: #962e3f
}

body.a42-ac-inv-contrast .a42-modal legend {
	color: inherit;
	background-color: inherit
}

.a42-modal input,
.a42-modal label {
	float: left;
	font-size: .9em
}

.a42-modal input {
	position: relative;
	top: .4em
}

.a42-modal label {
	padding-top: .2em;
	padding-bottom: .2em
}

@media screen and (max-width: 19.9em) {

	.a42-modal input,
	.a42-modal label {
		float: left;
		display: block
	}

	.a42-modal input {
		clear: left
	}
}

.a42-modal input {
	margin-right: .3em
}

.a42-modal label {
	margin-right: .75em
}

.a42-modal_close {
	position: absolute;
	top: 1.4rem;
	right: 1.25rem;
	border: 1px solid #962e3f;
	background-color: #962e3f;
	color: #fff;
	font-size: .8em
}

#modal-title {
	padding-right: 5rem
}

@media screen and (min-width: 50em) {
	.a42-modal {
		width: 40em;
		left: 50%;
		margin-left: -20em;
		top: 7%;
		box-shadow: 0 0 5px #aaa;
		border: 1px solid #fff
	}
}

@media screen and (max-width: 39.9em) {
	.a42-modal {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0
	}
}

#modal-content {
	display: none;
	position: fixed;
	top: 1em;
	bottom: 1em;
	width: 80%;
	background: #000;
	border: solid 1px #f0f0f0;
	color: var(--c-yellow);
	z-index: 300;
	margin: auto;
	padding: 5px 5em;
	font-size: .9em;
	box-shadow: 0px 0px 100px #a0a0a0;
	overflow: auto
}

#modal-content .modal-dialog {
	width: 90%;
	margin: 0
}

#modal-content h1 {
	margin-top: initial
}

#modal-content form {
	color: var(--c-yellow);
	margin: 2px
}

#modal-content form .a42-required {
	color: red;
	text-align: start
}

#modal-content form fieldset {
	padding: 5px
}

#modal-content form .help-message {
	position: relative;
	top: -2em
}

#modal-content form .sub {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	bottom: -0.25em
}

#modal-content form p {
	text-align: start
}

#modal-content form label {
	display: inline-block;
	margin-bottom: 8px
}

#modal-content form input,
#modal-content form select {
	width: 100%;
	padding: 8px;
	margin-bottom: 16px;
	box-sizing: border-box
}

#modal-content form #sendBtn {
	background-color: #6bfff7;
	color: #000;
	padding: 10px 15px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	width: 100%
}

#modal-content form #sendBtn:hover {
	background-color: #233964;
	color: #fff
}

@media screen and (max-width: 60em) {
	#modal-content {
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 1em
	}
}

#modal-content p {
	max-width: initial
}

#modal-content.is-visible {
	display: block
}

#btn-close-modal {
	position: absolute;
	top: .625rem;
	right: 1.5rem;
	width: 2.75rem;
	height: 2.75rem;
	cursor: pointer;
	border: 0
}

#btn-close-modal {
	overflow: hidden
}

#btn-close-modal:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjQgNC4yLTQuMS00LjFoLS4xbC03LjggNy43LTcuOC03LjhoLS4xbC00LjEgNC4xIDcuOSA3LjktNy45IDcuOCA0LjEgNC4yaC4xbDcuOC03LjggNy44IDcuN2MwIC4xIDAgLjEuMSAwbDQuMS00LjEtNy44LTcuOHoiIGZpbGw9IiMzMTQ4NmUiLz48L3N2Zz4=) no-repeat 50% 50%
}

#btn-close-modal:hover,
#btn-close-modal:focus,
#btn-close-modal:active {
	opacity: .6;
	background-color: rgba(0, 0, 0, 0) !important
}

@media screen and (min-width: 1024px) {
	#modal-content .modal-dialog {
		width: 90%;
		margin: 30px auto
	}

	#modal-content form p {
		text-align: end
	}

	#modal-content form label {
		text-align: left
	}

	#modal-content form input,
	#modal-content form select,
	#modal-content form textarea {
		margin: 0 20px;
		width: 100%
	}
}

blockquote {
	border: inherit
}

blockquote footer::before,
blockquote footer::after {
	content: normal
}

body {
	background-color: #000;
	color: #fff;
	font-family: var(--f-labeur)
}

.a42-wrapper>* {
	margin-bottom: 0
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	margin: -1px !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important
}

#svg-symbols {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden
}

.wrapper {
	margin: 0 1em
}

main {
	font-size: .9375em
}

.button {
	color: #000;
	text-decoration: none;
	padding: 1em 1.5em;
	position: relative;
	transition: .2s;
	overflow: hidden;
	border: 3px solid rgba(0, 0, 0, 0)
}

.button::before,
.button::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -1
}

.button::before {
	background-color: var(--c-yellow)
}

.button::after {
	transform: translateY(100%);
	background-color: #000;
	transition: transform .3s ease-in-out
}

.button:hover {
	color: var(--c-yellow);
	border-color: var(--c-yellow)
}

.button:hover::after {
	transform: translateY(0)
}

h1 {
	font-family: var(--f-heading);
	font-weight: normal;
	color: var(--c-yellow);
	font-size: 3em
}

h1 span {
	display: block
}

h1 span::first-letter {
	font-weight: bold
}

h1 svg {
	fill: var(--c-yellow)
}

h2,
h3,
h4 {
	font-family: var(--f-heading);
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase
}

h2 {
	font-size: 3em;
	text-align: center
}

h3 {
	font-size: 1.8em;
	display: inline;
	color: #000;
	background-color: var(--c-yellow);
	line-height: 130%;
	padding: .2em;
	margin: 1em 0
}

h4 {
	color: var(--c-yellow);
	font-size: 1.25em
}

#header {
	padding-top: 4em;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: calc(100vh - 6em);
	overflow: hidden;
	position: relative
}

#header .background {
	position: absolute;
	width: 100%;
	opacity: .5;
	transform: translate(30%, -50%) scaleX(2);
	filter: blur(2px)
}

.underline {
	position: relative
}

.underline svg {
	display: block;
	transform: translateY(0.5em)
}

main p,
main li {
	line-height: 150%
}

main section,
main .section {
	margin: 2em 0
}

#qui-sommes-nous h2 {
	font-family: var(--f-heading2);
	text-transform: uppercase;
	color: var(--c-cyan);
	font-size: 2.1em;
	margin-bottom: 2em;
	text-align: left
}

#qui-sommes-nous .section {
	margin: 5em 0
}

#qui-sommes-nous .intro .col:nth-of-type(2) {
	display: none
}

#qui-sommes-nous .equipes h4 {
	position: relative;
	margin-top: 2.5em
}

#qui-sommes-nous .equipes h4:before {
	content: "";
	display: block;
	height: 4px;
	width: 60px;
	background-color: #fff;
	transform: translateY(-15px)
}

#qui-sommes-nous .equipes .col {
	margin: 4em auto;
	max-width: 320px
}

#qui-sommes-nous .equipes .picture {
	text-align: center
}

#qui-sommes-nous .equipes .picture img {
	border-radius: 50%
}

#qui-sommes-nous .nous-choisir .col {
	text-align: right
}

#qui-sommes-nous .nous-choisir .underline svg {
	display: inline
}

#qui-sommes-nous .nous-choisir .underline::after {
	transform: translateY(1em) scale(0.6)
}

#clients ul {
	margin: 0;
	padding: 0
}

#clients li {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10vw;
	font-size: 1.2rem;
	text-align: center
}

#clients li .num {
	display: block;
	color: #000;
	background-color: var(--c-yellow);
	font-family: var(--f-heading);
	font-size: 2rem;
	font-weight: bold;
	font-style: italic;
	width: fit-content;
	padding: .3em;
	margin: .8em 0 .4em 0
}

#clients .utilisateurs h3 {
	color: #000;
	background: var(--c-cyan);
	font-weight: normal;
	font-style: normal
}

#clients .utilisateurs .col {
	position: relative;
	padding-top: 2em;
	min-height: 140vw
}

#clients .utilisateurs .background {
	position: absolute;
	width: 100%;
	z-index: -1
}

#clients .utilisateurs .background svg {
	width: 100%;
	height: auto
}

#clients .utilisateurs blockquote {
	margin: 0;
	color: #000;
	padding: 1.5em 0 0 1em;
	min-height: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

#clients .utilisateurs blockquote p {
	background-color: var(--c-yellow);
	font-size: 5vw;
	color: #000;
	width: 70%
}

#clients .utilisateurs blockquote footer {
	display: flex;
	align-items: center
}

#clients .utilisateurs blockquote footer p {
	font-size: 1.5em;
	width: 40%;
	text-align: right;
	line-height: 100%
}

#clients .utilisateurs blockquote .portrait {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center
}

#clients .utilisateurs blockquote .portrait img {
	height: 100%
}

#footer {
	background-color: var(--c-dark-green);
	padding-bottom: 2em;
	position: relative;
	overflow: hidden
}

#footer .background {
	position: absolute;
	right: 0;
	width: 150vw;
	filter: blur(3px);
	opacity: .8;
	transform: translate(30%, -50%) rotate(20deg)
}

#footer .wrapper {
	position: relative
}

#footer .col {
	padding-top: 2em
}

#footer .col>ul>li {
	display: block;
	margin-bottom: 2em
}

#footer .title {
	margin-bottom: 2em
}

#footer h2 {
	font-weight: normal;
	font-style: normal;
	color: #000;
	background-color: var(--c-yellow);
	display: inline;
	padding: .1em;
	font-size: 2.8em
}

#footer .map {
	width: 90vmin;
	height: 90vmin;
	margin: 0 auto;
	overflow: hidden
}

#footer .map img {
	height: 100%
}

#footer svg {
	fill: #fff;
	height: 1.2em
}

#footer ul {
	margin: 0;
	padding: 0;
	display: inline
}

#footer ul span {
	display: block;
	color: var(--c-yellow)
}

#footer li {
	list-style-type: none;
	display: inline;
	font-size: 1.5rem;
	line-height: 160%
}

#valeurs {
	overflow: hidden
}

#valeurs .wrapper {
	position: relative;
	color: #000
}

#valeurs img {
	position: relative;
	width: 100%;
	min-width: 480px;
	height: auto;
	opacity: .6;
	left: 50%;
	transform: translateX(-50%)
}

#valeurs p {
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	max-width: 380px;
	text-align: center;
	margin: 0;
	font-size: 1.1em
}

#subscription {
	display: flex;
	flex-direction: row
}

#subscription h2,
#subscription h3 {
	font-family: var(--f-labeur);
	text-transform: none;
	font-style: normal
}

#subscription h3 {
	color: #fff;
	background-color: #000;
	line-height: normal;
	font-style: normal;
	text-align: center;
	font-size: medium
}

#subscription .col {
	flex: 1
}

#subscription .row {
	flex: 1;
	display: flex
}

#subscription .row-presentation {
	flex-direction: column;
	align-items: center;
	justify-content: center
}

#subscription .row-presentation h3 {
	margin: 5px
}

#subscription .bgform2 {
	display: none
}

@media screen and (min-width: 480px) {
	h1 {
		font-size: 3.625em
	}
}

@media screen and (min-width: 1024px) {
	.wrapper {
		width: 80vw;
		max-width: 1360px;
		margin: 0 auto
	}

	h1 {
		margin-top: 2.5em;
		font-size: 4.81em
	}

	.grid {
		display: flex
	}

	#qui-sommes-nous {
		font-size: 1.2em
	}

	#qui-sommes-nous .intro .col {
		max-width: calc(50% - 2em);
		padding: 2em
	}

	#qui-sommes-nous .intro .col:nth-of-type(2) {
		display: flex;
		align-items: center
	}

	#qui-sommes-nous .intro .picture {
		border-radius: 600px;
		overflow: hidden
	}

	#qui-sommes-nous .intro .picture img {
		width: 100%;
		height: auto
	}

	#qui-sommes-nous .equipes .col {
		max-width: calc(33% - 4em);
		padding: 2em
	}

	#qui-sommes-nous .nous-choisir .col {
		max-width: calc(33% - 4em);
		padding: 2em
	}

	#qui-sommes-nous .nous-choisir:nth-of-type(2) {
		margin-top: 4em
	}

	#qui-sommes-nous .nous-choisir:nth-of-type(3) {
		margin-top: 8em
	}

	#clients .adorent {
		margin-bottom: 8em
	}

	#clients .adorent h2 {
		max-width: 450px;
		margin: 2em auto 1em;
		font-size: 4em
	}

	#clients .adorent ul {
		display: flex
	}

	#clients .adorent li {
		width: calc(33% - 2em);
		padding: 0 2em
	}

	#clients .utilisateurs .col {
		max-width: calc(33% - 4em);
		margin: 2em;
		min-height: 35vw
	}

	#clients .utilisateurs blockquote {
		min-height: 25vw
	}

	#clients .utilisateurs blockquote p {
		font-size: min(1.2vw, 22px)
	}

	#footer .grid {
		justify-content: space-between
	}

	#footer .col {
		max-width: calc(50% - 4em);
		margin: 2em
	}

	#footer .col:nth-of-type(1) {
		max-width: 470px
	}

	#footer .map {
		width: auto;
		height: auto
	}

	#footer .map img {
		width: 100%;
		height: auto
	}

	#valeurs p {
		font-size: 2em;
		line-height: 150%
	}

	#modal-content {
		background-color: #caeafd;
		background-image: url(470263474e35d993fa57.jpg);
		background-repeat: no-repeat;
		background-size: cover
	}

	#modal-content form p {
		text-align: end
	}

	#modal-content form label {
		text-align: left
	}

	#modal-content form #city-container {
		width: 100%
	}

	#modal-content form input,
	#modal-content form select,
	#modal-content form textarea {
		margin: 0 20px;
		width: 100%
	}

	#subscription {
		flex-direction: row
	}

	#subscription #modal-btn:visited {
		color: #fff
	}

	#subscription .bgform2 {
		display: block;
		background-image: url('./img/fond-form2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom;
		min-height: 600px
	}
}

@media screen and (min-width: 1280px) {
	#qui-sommes-nous {
		font-size: 1.4em
	}

	#clients .utilisateurs blockquote {
		min-height: 22vw
	}

	#clients .utilisateurs blockquote p {
		font-size: min(1.1vw, 22px)
	}
}

.autocomplete {
	position: relative;
	display: inline-block;
	color: #000
}

.autocomplete input {
	border: 1px solid rgba(0, 0, 0, 0);
	padding: 10px;
	font-size: 16px
}

.autocomplete input[type=text] {
	width: 100%
}

.autocomplete input[type=submit] {
	background-color: #1e90ff;
	color: #fff
}

.autocomplete .autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	top: 100%;
	left: 0;
	right: 0
}

.autocomplete .autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4
}

.autocomplete .autocomplete-items div:hover {
	background-color: #e9e9e9
}

.autocomplete .autocomplete-active {
	background-color: #1e90ff !important;
	color: #fff
}