:root {
	--padd		: 2.5vw;
	--padd15d	: calc(var(--padd) * 0.66);
	--padd2d	: calc(var(--padd) * 0.5);
	--padd3d	: calc(var(--padd) * 0.33);
	--padd15m	: calc(var(--padd) * 1.5);
	--padd2m	: calc(var(--padd) * 2);
	--padd3m	: calc(var(--padd) * 3);

	--form	: 25vw;
	--main	: calc(100vw - var(--form));
}

/* ========================================================================== */

main {
	background-color: #095D60; color: white;
	display: grid; grid-template-columns: var(--main) var(--form);
	justify-items: center; align-items: flex-start;
	min-height: 100vh;
	position: relative;
	/* scroll-behavior: smooth;
    -ms-scroll-chaining: none;
    overscroll-behavior: none; */
}

h1, h2 { line-height: 1.33em; margin-bottom: var(--padd15d); }
main h1 { font-size: 1.6em; }
main h2 { font-size: 1.5em; }

.regular { font-weight: 333; }

section { position: relative; z-index: 100; }

.lato { font-family: "Lato", sans-serif; }

/* ========================================================================== */

.btn {
	cursor: pointer;
	width: calc((var(--form) - var(--padd)) / 2); height: max(2.5vw, 40px);
	background-color: #CF4925; color: white;
	border: 2px solid #CF4925;
	border-radius: 25px;
	display: flex; justify-content: center; align-items: center;
	margin-left: var(--padd2d);
	transition: all 0.3s ease;
	font-weight: 300;
}
.btn:hover { background-color: white; color: black; }

main .splide__pagination__page.is-active { background: white; opacity: 1; }
main .splide__arrow { border-radius: unset; opacity: 1; }
main .splide__arrow svg { display: none; }
main .splide__arrow--prev { background: url(../images/prev.svg) no-repeat center/contain; }
main .splide__arrow--next { background: url(../images/next.svg) no-repeat center/contain; }

/* ========================================================================== */

#content {
	padding: var(--padd15m); padding-right: 0;
	width: 100%;
}
#content > div { margin-bottom: var(--padd15d); }

#baseline {
	display: grid; grid-template-columns: 0.75fr 1.25fr;
	grid-gap: var(--padd);
}
#baseline .logo { width: max(220px, 17.5vw); margin-bottom: var(--padd); }
#baseline .text ul { padding-inline-start: 1em; list-style: none; margin-top: 15vw; }
#baseline .text li { line-height: 1.5em; margin-bottom: 1em; position: relative; }
#baseline .text li:before {
	content: ' ';
	width: 0.5em; height: 0.5em;
	position: absolute; top: 0.5em; left: -1em;
	background-color: #B10F5C;
	border-radius: 50%;
}

/* @media (min-width: 1024px) { */
	#baseline .text .text_title {
	width: 33vw;
    background-color: #CF4925;
    position: absolute;
    z-index: 0;
    padding: 1.5vw 4vw;
    left: 0;
	font-weight: 900;
}

.text_subtitle {
    width: 33vw;
    background-color: #B10F5C;
    position: absolute;
    z-index: -1;
    padding: 1.5vw 4vw 1vw 4vw;
    left: 0;
    font-weight: 900;
    margin-top: 9vw;
}
/* } */


.patch-offre {
	position: absolute;
	width: fit-content;
	right: 30.5vw;
    top: 43.5vw;
}

.slide-accroche {
	position: absolute;
	width: fit-content;
	right: 25.5vw;
    top: 12vw;
	z-index: 1;
}

.slide-accroche img {
	width: 16vw;
}

.bloc-jpo {
	background-color: #B10F5C;
	color: white;
	font-weight: bold;
	padding: 0.7vw 1vw;
}

.bloc-jpo span {
	font-size: 1.2vw;
}

@media (min-width: 1920px) {
	.patch-offre {
		top: 36.5vw;
	}
}

.patch-offre img {
	width: 12vw;
}

#baseline .splide { height: calc(100% - var(--padd2m)); align-self: flex-end; }

#bdv { position: relative; margin-top: 5vw; } 
#bdv .container {
	display: grid; grid-template-columns: 1.25fr 0.75fr;
	grid-gap: var(--padd);
	justify-content: center; align-items: center;
}
#bdv .address {
	padding-left: 1em;
	border-left: 3px solid #E69A16;
	margin-bottom: 0;
}

footer {
	display: flex; align-items: center; justify-content: space-between;
	background: linear-gradient(to left, #DDDDDD, #FFFFFF);
	color: #424242;
}
footer > img { width: max(180px, 9.5vw); }
footer .btn { background-color: #B10F5C; border-color: #B10F5C; margin-left: 0; }
footer .btn > svg { margin-right: 10px; }
footer .btn:hover > svg, footer .btn:hover > svg * { fill: black; }
footer .modal_container {
	width: 60%;
}
footer .modal_container > span {
	display: inline-block;
	margin-right: 10px;
}

/* ========================================================================== */

#formulaire {
	width: var(--form);
	padding: var(--padd2d) var(--padd);
	text-align: center;
	box-shadow: 2.5px 2.5px 10px #707070;
	background-color: white; color: black;
	display: flex; flex-direction: column;
	justify-content: center;
}
#formulaire h2 {
	margin: auto;
	padding-bottom: var(--padd3d); margin-bottom: var(--padd3d);
	border-bottom: 1px solid #095D60;
}
#confirmation {
	padding: var(--padd2m) 0;
	text-align: center;
	margin-bottom: 0;
}
#confirmation .btn { width: 80%; }
.formLeads input, .formLeads select {
	width: 100%; height: max(2.5vw, 40px);
	margin-bottom: var(--padd3d);
	border-radius: 5px;
	background-color: #E5EDED;
	padding-left: var(--padd2d); color: #696F6F; 
}
::placeholder { color: #696F6F; font-style: italic; font-weight: 333; }
#container_date { margin-top: 5px; }
#container_date > div { display: grid; grid-template-columns: 47.5% 47.5%; grid-gap: 5%; width: 100%; }
#container_date label { width: 100%; }
.formLeads { font-size: 90%; }
.formLeads i { margin-bottom: var(--padd2d); }
.formLeads .mab_radio { margin-top: var(--padd2d); }
.formLeads .mab_radio__label { text-align: left; padding-left: var(--padd3d); }
.formLeads .mab_radio__control {
	width: 30px; height: 30px;
	background-color: transparent;
	border-color: #095D60; border-radius: 5px;
}
.formLeads .mab_radio input:checked + .mab_radio__control { background-color: #095D60; }
#formulaire .btn {
	width: 50%; height: max(2.5vw, 40px);
	margin: calc(var(--padd) * 0.66) auto;
	letter-spacing: 0.1em; line-height: 1em;
}
#heure {
	background: #E5EDED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg id='Groupe_2221' data-name='Groupe 2221' transform='translate(-50 -1745)'%3E%3Cg id='Ellipse_10' data-name='Ellipse 10' transform='translate(50 1745)' fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='6' cy='6' r='6' stroke='none'/%3E%3Ccircle cx='6' cy='6' r='5.5' fill='none'/%3E%3C/g%3E%3Cpath id='Tracé_3942' data-name='Tracé 3942' d='M56,1746.217v3.273l1.923.9' transform='translate(0 1.51)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 5%/12px;
	text-indent: 0.5em;
}

.formLeads #date {
	padding: 0 0.5vw;
}

@media (min-width: 1025px) {
	input[name="date"] { text-indent: 0.5em; }
}
/* uniquement pour safari */
@media not all and (min-resolution:.001dpcm) {
	#heure {
		text-indent: 20px;
	}
	input[name="date"] { text-indent: 0; width: 100%; }
	input[type="date"]::before{
		content: attr(placeholder);
		white-space: pre;
		padding-left: 0;
	}
	input[type="date"]:focus::before {
		content:""!important;
	}
}
@media(max-width: 1024px) {
	input[type="date"]::before{
		content: attr(placeholder);
		white-space: pre;
		padding-left: 0.5em;
	}
	input[type="date"]:focus::before {
		content:""!important;
	}
}
input[name="date"] { position: relative; min-width: 99%;}
input[name="date"]::-webkit-calendar-picker-indicator {
	position: absolute; left: 6px; right: 0;
	width: 24px; padding-right: 75%;
	cursor: pointer;
	content:"";
	/* filter: invert(1); */
}

/* ========================================================================== */

.vegetations { position: absolute; z-index: 1; }

#content > .vegetations {
	width: 62.5vw;
	position: absolute; top: 0; right: 0;
	transform: translate(25%, -30%);
}
#bdv > .vegetations {
	width: max(200px, 14vw);
	position: absolute; top: 0; right: 0;
	transform: translateY(-50%) rotate(-3.33deg);
}

/* ========================================================================== */

@media (min-width: 1024px) {

	.mobile { display: none; }

	/* ========================================================================== */
	
	#baseline .text { padding-bottom: var(--padd15m); }

	footer {
		padding: var(--padd2d) var(--padd15m);
		padding-right: calc(var(--form) + var(--padd15m));
	}

	/* ========================================================================== */

	#formulaire { min-height: 100vh; right: 0; }
}

/* ========================================================================== */

@media (max-width: 1024px) {

	#cta_mobile {
		position: fixed; left: 0; bottom: var(--padd2d);
		background-color: #CF4925; color: white; width: calc(100% - var(--padd));
		z-index: 100;
	}
	footer { position: relative; z-index: 200; }

	body, html { overflow-x: hidden; }

	.desktop { display: none; }

	:root {
		--padd	: 30px;

		--form	: 90vw;
	}

	main {
		grid-template-columns: 1fr;
	}

	/* ========================================================================== */

	.mab_slider__open { display: none; }

	#content { padding: var(--padd15m) var(--padd); }

	#content > .vegetations {
		width: 120vw; max-width: unset;
		transform: translate(10vw, -30%);
	}

	#baseline .text ul { margin-top: 50vw; }

	#baseline .text .text_title {
    	width: 100%;
    	padding: 5.5vw 10vw;
		text-align: center;
	}

	#baseline .text.info {
		margin-top: -32vw;
	}

	#baseline .text.logo {
		margin-top: 5vw;
	}

	#baseline .text .text_subtitle {
        width: 100%;
        padding: 5.5vw 10vw;
		margin-top: 32vw;
		background-color: inherit;
    }

	main h1 {
    	font-size: 1.5em;
	}

	.slide-accroche img {
    	width: 55vw;
	}

	.slide-accroche {
	    right: inherit;
    	top: 95vw;
    	left: 2vw;
	}

	.patch-offre img {
    	width: 40vw;
	}

	.patch-offre {
    	right: 2vw;
    	top: 250vw;
	}

	.bloc-jpo {
		text-align: end;
		padding: 5vw 5vw 2vw 2vw;
	}

	#baseline .vegetations {
		width: max(200px, 14vw);
    	position: relative;
		top: 5vw;
        left: 0;
        right: unset;
        transform: translate(-40%, -75%) rotate(-3.33deg);
	}

	.bloc-jpo span { font-size: 3.3vw; line-height: 4.5vw;}

	#baseline { grid-template-columns: 1fr; }
	#baseline .logo { display: block; margin: var(--padd2m) auto var(--padd); }
	#baseline .splide { height: 80vw; width: 120%; margin-left: -10%; }
	#baseline .splide .splide__slide { background-position: center !important; }

	#bdv { padding-top: var(--padd15m); margin-top: 0vw; }
	#bdv h2 { text-align: center; margin-top: 7vw;}
	#bdv .container { grid-template-columns: 1fr; }
	#bdv > .vegetations {
		top: 0; left: 0;
		right: unset;
		transform: translate(-40%, -75%) rotate(-3.33deg);
	}

	footer {
		padding: var(--padd15m) var(--padd);
		flex-direction: column;
	}
	footer .logo { margin-bottom: var(--padd15m); }
	footer .modal_container {
		display: flex; flex-direction: column;
		justify-content: center; align-items: center;
		width: 99%;
	}
	footer .modal_container > span { margin: 0; margin-bottom: var(--padd2d); }
	footer .btn { margin-top: var(--padd); }

	/* ========================================================================== */

	#formulaire {
		width: var(--form);
		padding: var(--padd) var(--padd2d);
		margin-bottom: var(--padd15m);
	}
	#formulaire .btn { margin-bottom: 0; }
}

@media (max-width: 400px) {
	.slide-accroche {
	    right: inherit;
    	top: 105vw;
    	left: 2vw;
	}

	#baseline .text ul {
        margin-top: 80vw;
    }

	#baseline .text .text_subtitle {
        width: 100%;
        padding: 5.5vw 10vw;
        margin-top: 42vw;
	}
}

@media (max-width: 370px) {
	.slide-accroche {
    	top: 115vw;
	}

	#baseline .text ul {
        margin-top: 100vw;
    }

	#baseline .text .text_subtitle {
        margin-top: 55vw;
	}
}