@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;500;700;800&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
:root 
{
	--blue : #2b4162;
	--border-radius: .4em;
	--transition_medium: all ease .6s;
}

* 
{
	box-sizing: border-box;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-family: 'Assistant', 'Plus Jakarta Sans', sans-serif;
	padding: 0;
	margin: 0;
	/* vertical-align: middle; */
	/* -webkit-font-smoothing: antialiased; */
	-webkit-font-smoothing: subpixel-antialiased;
}

html,
body 
{
	min-height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	text-align: center;
	scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 
{
	font-weight: 900;
}

li 
{
	text-align: left;
	margin-bottom: 0.5em;
}

a 
{
	text-decoration: none;
}

a:hover 
{
	text-decoration: underline;
}

.header 
{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #2b4162db;
	color: white;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	backdrop-filter: blur(3px);
}

.header * 
{
	color: white;
}

span.nom_site_enlevement_vehicule_gratuit 
{
	font-size: 1.4em;
	font-weight: 700;
	padding: 0.3em .4em;
	vertical-align: top;
	display: inline-block;
}

.header a.logo 
{
	float: left;
	background-image: url(images/logo_epaviste_depannage_enlevmeent_vehicule_gratuit_rapide.png);
	padding-left: 5em;
	height: 3em;
	/* background-color: red; */
	display: inline-block;
	background-position: left;
	background-size: contain;
	margin-left: 0.6em;
}

.header menu 
{
	display: inline-block;
	font-weight: 700;
	font-size: 1.3em;
	text-transform: uppercase;
}

.header item 
{
	padding: .4em;
}

.header a.home 
{}

.header menu a 
{
	padding: 0.5em;
	display: inline-block;
}

.header_contact_block 
{
	/* background-color: green; */
	display: inline-block;
	float: right;
	text-align: right;
	padding: 1em;
	margin-bottom: -2em;
	position: relative;
}

.header_contact_block span {
    vertical-align: middle;
}

.header_contact_block:before 
{
	display: inline-block;
	background-color: #ffffff;
	border-radius: 0.4em;
	width: 120%;
	height: 80%;
	content: '';
	/* padding: 1em; */
	transform: skewX(30deg) translate(-12px, -16px);
	position: absolute;
	z-index: -2;
	top: 1em;
	right: -3em;
}

.header_contact_block:after 
{
	display: inline-block;
	background-color: #711111;
	border-radius: 0.4em;
	width: 120%;
	height: 100%;
	content: '';
	/* padding: 1em; */
	transform: skewX(30deg) translate(-12px, -16px);
	position: absolute;
	z-index: -1;
	top: 1em;
	right: -6em;
}

.header_contact_block a 
{
	display: block;
}

.header_contact_block a.mailto 
{}

.header_contact_block a.call_now 
{}

.phone_bloc 
{
	font-weight: 900;
	background-color: var(--blue);
	color: white;
	width: 9.6em;
	font-size: 1.4em;
	padding: 0.5em;
	border-radius: var(--border-radius);
	margin: 1em auto;
	position: relative;
	font-weight: 900;
	padding-top: 0.2em;
	padding-left: 2.1em;
	display: block;
	text-decoration: none !important;
	transition: var(--transition_medium);
}

.phone_bloc:hover{
    transform: scale(1.1);
    box-shadow: #00000042 0 0.4em 0.4em;
}

.phone_bloc span.material-symbols-rounded 
{
	position: absolute;
	top: 0em;
	left: -0.2em;
	font-size: 2.8em;
	transition: var(--transition_medium);
	transform: scale(0.8) translate(0em, -0.1em);
}

.phone_bloc:hover span.material-symbols-rounded 
{
	transform: scale(1.1) translate(0em, 0em);
	filter: drop-shadow(0px 0.2em 6px #4d1515);
	/* box-shadow: #4d1515 0 0 1em; */
}

.phone_bloc span.material-symbols-rounded 
{
	position: absolute;
	left: 0;
	font-size: 2em;
	top: 0.1em;
	left: 0.1em;
	color: #de3206;
}

div#home 
{
	min-height: 60vh;
	position: relative;
	background-position: bottom center;
	background-color: #2859a2;
}

div#home * 
{
	color: white;
}

div#home .image 
{
	width: 100%;
	padding-top: 55%;
}

div#home h1 
{
	position: absolute;
	top: 30%;
	/* left: 50%; */
	transform: translate(20%, -50%);
	text-shadow: 0 0 0.4em black, 0 0 0.4em black, 0 0 0.4em #687584;
	width: 10em;
	text-align: left;
	font-size: 3em;
}

div#home .no_pieces_detachees 
{
	/* background-color: #571010a8; */
	display: inline-block;
	padding: 1em;
	position: absolute;
	top: 50%;
	right: 0;
	text-transform: uppercase;
	font-weight: bolder;
	width: 13em;
	font-size: 1.4em;
	/* position: relative; */
	z-index: 1;
}

.no_pieces_detachees span.material-symbols-rounded 
{
	color: #ffc726 !important;
	position: absolute;
	font-size: 3em;
	left: 8%;
	transform: translate(-100%, -50%);
	top: 38%;
	display: inline-block;
}

div#home .no_pieces_detachees::before 
{
	display: inline-block;
	background-color: #711111d9;
	border-radius: 0.4em;
	width: 170%;
	height: 60%;
	content: '';
	/* padding: 1em; */
	transform: skewX(30deg) translate(-56px, -1px);
	position: absolute;
	z-index: -1;
	top: 1em;
}

div#home .encart_bleu 
{
	/* position: absolute; */
	/* bottom: 0; */
	/* left: 0; */
	width: 100%;
	background-color: var(--blue);
	color: white;
	padding: 2em;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

div#home .encart_bleu * 
{
	color: white;
}

div#home .encart_bleu>div 
{
	display: inline-block;
	min-width: 13em;
	width: 30%;
	vertical-align: middle;
	/* font-size: 2.3em; */
	font-weight: bold;
	line-height: 1em;
}

div#home .encart_bleu .call_now 
{
	font-size: 1.4em;
	width: 12em;
	min-width: 7em;
	/* margin: auto; */
	text-align: center;
}

div#home .rapide_gratuit 
{
	font-size: 1.7em;
	width: 10em !important;
	min-width: 7em !important;
	line-height: 1.3em !important;
}

div#home .engagement 
{
	font-size: 2em;
	font-weight: 900;
}

div#home .sept_sept 
{}

div#home .gratuit 
{
	display: inline-block;
	width: 30%;
	min-width: 10em;
	/* background-color: #ff000036; */
	padding: 0.5em;
}

div#home a.call_now 
{}

div#home .phone_bloc.phone_rouge 
{
	background-color: white;
	color: var(--blue);
	/* font-size: 1.1em; */
	/* height: 1.8em; */
	/* padding-top: 0.2em; */
	/* padding-left: 1.4em; */
}

.phone_bloc.phone_rouge span.material-symbols-rounded 
{
	top: -0.07em;
}

div#home .phone_bloc.phone_rouge span.material-symbols-rounded 
{
	color: red;
}

div#services 
{
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

div#services>div 
{
	display: inline-block;
	width: 49.9%;
	padding: 1em;
	text-align: left;
	/* max-width: 40em; */
	vertical-align: middle;
}

.image_set {
    height: 100%;
}
.image_big {
    /* height: 25em; */
    padding-bottom: 60%;
    width: 100%;
    border: white 2px solid;
    white 4px border: solid;
}

.image_mini {
    width: 50%;
    /* height: 23em; */
    padding-bottom: 45%;
    display: inline-block;
    margin: -0.1em;
    border: white 4px solid;
}
.services_txt_wrapper 
{
	padding: 1em 9em;
	display: inline-block;
}

.services_txt_center 
{
	max-width: 30em;
	margin: 1em auto;
}

div#services h2,
div#services h3 
{
	color: var(--blue);
}

div#services h3 
{}

div#services p 
{
	margin: 0.7em 0;
}

.bt_preparer_enlevement 
{
	background-color: #711111;
	color: white;
	border-radius: var(--border-radius);
	display: inline-block;
	padding: .4em;
	padding-left: 3em;
	position: relative;
	display: block;
	width: 15em;
	font-size: 1.2em;
	font-weight: 600;
	margin: 1em auto;
}

.bt_preparer_enlevement img 
{
	position: absolute;
	top: 50%;
	left: 0em;
	transform: translateY(-50%);
}

div#services .image 
{
	height: 100%;
	height: 33em;
	border-radius: var(--border-radius);
	margin: 1em 0;
}

div#procedure 
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 2em;
}

.besoin_d_aide_wrapper 
{
	width: 50%;
	min-width: 20em;
}

.besoin_d_aide_wrapper .image 
{
	height: 20em;
	width: 100%;
	background-size: contain;
}

div#procedure .besoin_d_aide 
{}

div#procedure .aide_txt_wrapper 
{
	font-size: 2.1em;
	font-weight: 800;
	width: 13em;
	margin: auto;
	padding: 1em 0;
	max-width: 100%;
	padding: .4em;
}

div#procedure .phone_bloc.phone_rouge 
{}

div#procedure .procedure_texte_wrapper 
{
	background-color: #D9D9D9;
	border-radius: var(--border-radius);
	padding: 1em;
}

div#procedure .procedure_texte_wrapper h2,
div#procedure .procedure_texte_wrapper h3 
{
	color: #af1515;
	width: 31rem;
	margin: auto;
	max-width: 100%;
}

div#procedure h2 
{}

div#procedure h3 
{}

div#procedure ul.document_preparatifs 
{
	width: auto;
	display: block;
	margin: auto;
	width: 30em;
	padding: 2em;
	max-width: 100%;
	line-height: 1.2em;
}

ul.document_preparatifs a 
{
	color: blue;
	text-decoration: underline;
	font-weight: 800;
}

div#procedure li 
{}

.link_docs_wrapper 
{}

.link_docs_wrapper a.doc 
{
	display: inline-block;
	position: relative;
	height: 329px;
	background-color: red;
	width: 287px;
	border-radius: 0.7em;
	border: #3464ad 2px solid;
	margin: 1em;
	overflow: hidden;
	transform: scale(.9);
	transition: all ease .6s;
}

.link_docs_wrapper a.doc:hover 
{
	transform: scale(1);
	box-shadow: #264574 0 0.3em 1em;
}

.link_docs_wrapper img 
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.link_docs_wrapper .txt 
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	background-color: var(--blue);
	color: white;
	font-size: 1.3em;
	padding: .4em;
}

.link_docs_wrapper .txt .uppercase 
{
	text-transform: uppercase;
	margin-bottom: 0.7em;
}

div#contact 
{
	position: relative;
}

div#contact:before 
{
	content: '';
	background-color: #ffffff4f;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	display: block;
	z-index: 0;
}

div#contact>div 
{
	width: 49%;
	display: inline-block;
	vertical-align: top;
	padding: 2em;
	max-width: 35em;
}

div#contact .image 
{}

div#contact .text_wrapper 
{
	z-index: 1;
	position: relative;
}

div#contact .text_wrapper p 
{
	text-align: left;
	font-size: 1.1em;
	margin-bottom: 1.4em;
}

div#contact .text_wrapper h2 
{
	margin-bottom: 2em;
	font-weight: 600;
}

div#contact p 
{}

div#contact .phone_bloc.phone_contact 
{
	/* font-weight: 900; */
	background-color: white;
	color: var(--blue);
	/* width: 10em; */
	/* font-size: 1.4em; */
	/* padding: .4em; */
	/* border-radius: var(--border-radius); */
	/* display: inline-block; */
	margin-top: 1em;
}

div#contact .form_wrapper 
{
	/* padding: 2em; */
	z-index: 1;
	position: relative;
}

div#contact .form_wrapper h2 
{}

div#contact .form 
{}

div#contact .contact_form 
{
	width: 35em;
	margin: auto;
	max-width: 100%;
}

div#contact .input_wrapper 
{
	margin: 0.9em auto;
	width: 100%;
}

div#contact label 
{
	width: 11em;
	display: inline-block !important;
	text-align: right;
	padding-right: 1em;
	vertical-align: top;
	position: relative;
	top: .4em;
	min-width: 11em;
}

div#contact input,
textarea 
{
	padding: .4em;
	border-radius: var(--border-radius);
	border: navajowhite;
	width: 20em;
	width: calc(100% - 12em);
	min-width: 10em;
	max-width: 100%;
	font-size: 1em;
}

div#contact textarea 
{
	height: 9em;
}

div#contact input 
{}

div#contact .send_mail 
{
	background-color: var(--blue);
	display: inline-block;
	float: right;
	border-radius: var(--border-radius);
	padding: .4em 1em;
	color: white;
	position: relative;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
}

.send_mail span.material-symbols-outlined 
{
	vertical-align: middle;
	display: inline-block;
	transform: rotate(-45deg);
	font-size: 2.4em;
	display: inline-block;
	/* position: absolute; */
	margin-top: -.4em;
	margin-left: -0.5em;
	filter: drop-shadow(0px 0px 1px #3464ad) drop-shadow(0px 0px 1px #3464ad) drop-shadow(0px 0px 1px #3464ad) drop-shadow(0px 0px 1px #3464ad);
}

.confirm_mail {
    padding: 3em 0px;
}

.footer 
{
	padding: 1em;
}

.footer a 
{}

@media screen and (max-width:850px) 
{
	span.nom_site_enlevement_vehicule_gratuit,
	item.home,
	.header_contact_block 
	{
		display: none;
	}
.header a.logo {
    padding-left: 3em;
}
	
	div#home .encart_bleu>div 
	{
		width: 100% !important;
		display: block;
		max-width: 100%;
		min-width: unset;
		margin: 1em auto;
	}
	div#home .encart_bleu 
	{
		display: block;
	}
	div#home .no_pieces_detachees 
	{
		position: relative;
	}
	div#services 
	{
		display: block;
	}
	div#services .image 
	{
		width: 100%;
		height: 0;
		padding-top: 40%;
	}
	div#procedure 
	{
		display: block;
		text-align: center;
	}
	.besoin_d_aide_wrapper 
	{
		width: 100%;
	}
	div#contact>div 
	{
		width: 100%;
	}
	div#contact .contact_form 
	{
		width: 100%;
	}
	div#contact label 
	{
		text-align: center;
		padding: 0;
		margin-bottom: 0em;
		top: 0;
	}
	div#contact input,
	textarea 
	{
		width: 80%;
	}
	div#contact .input_wrapper 
	{
		width: 25em;
		max-width: 100%;
	}
	div#home h1 
	{
		top: 0;
		width: 100%;
		position: relative;
		transform: unset;
		padding: .4em;
		font-size: 2em;
		text-shadow: none;
	}
	.header 
	{
		display: block;
	}
	.header menu 
	{
		font-size: 1rem;
	}
	div#home .gratuit 
	{
		min-width: unset;
		width: 100%;
	}
	.services_txt_center 
	{
		/* max-width: 100%; */
		/* width: 100%; */
		padding: 2em;
	}
	div#services>div 
	{
		width: 100%;
	}
}