#home_search_applicateurs {

	background-color: var(--blue);

	.search_applicateurs {
		color: #fff;
		padding-top: clamp(1.8rem, 2vw, 3.6rem);
		padding-bottom: clamp(1.8rem, 2vw, 3.6rem);
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 1.4rem;

		h2 {
			font-size: clamp(2.2rem, 2.2vw, 3.8rem);
			color: #fff;
			line-height: 1.1;
			margin-bottom: clamp(2.2rem, 2.2vw, 3.8rem);
		}

		#search_applicateurs_form {
			display: flex;
			margin-bottom: 1.2rem;
			margin-right: 1.4rem;

			input {
				border-radius: clamp(.6rem,.6vw,1rem);
				border: 1px solid rgba(240, 240, 240, 0.15);
				height: clamp(3.6rem, 3.6vw, 5.6rem);
				height: auto;
				max-width: 25rem;
				margin-right: clamp(1rem, 1.2vw, 1.6rem);
				background-color: transparent;
				color: #fff;
			}

			button[type="submit"] {
				display: flex;
				font-family: 'Inter', sans-serif;
                align-items: center;
				padding: clamp(.4rem, 2vw, 1.6rem) clamp(.5rem, 2vw, 1.8rem);
				border-radius: .8rem;
				background-color: var(--yellow);
				color: var(--blue);
				font-size: 1.5rem;
				font-weight: 500;
				line-height: 1.4;

				span {
					display: none;
				}

				&:hover,
				&:focus-within {
					background-color: var(--blue-sky);
					color: #fff;

					svg path {
						stroke: #fff;
					}
				}
			}
		}

		#results_applicateurs {

			.item-container {
				padding-bottom: 2.1rem;
				border-bottom: 1px solid rgba(240, 240, 240, 0.15);
			}

			span {
				display: block;
			}
			svg {
				width: 1.3rem;
				height: max-content;
				margin-right: 0.8rem;
			}
			p {
				margin-bottom: 0.1rem;
			}
			.item-title p {
				margin-top: 1.8rem;
				font-weight: 800;
				font-size: 1.8rem;
				line-height: 1.4;

				span {
					font-size: 1.4rem;
					text-transform: capitalize;
				}
			}
			.item-address,
			.item-tel {
				display: flex;
				margin-top: 1.2rem;
				font-weight: 300;
				font-size: 1.6rem;
				line-height: 1.2;
			}

			.item-tel {
				font-weight: 600;
			}

			.item-btns {
				display: flex;
				gap: 0.8rem;
				margin-top: 2.1rem;

				a {
					font-size: 1.4rem;
					line-height: 1.2;
					color: var(--blue);
					background-color: #fff;
					border-radius: 0.5rem;
					padding: 1rem;

					&:first-child {
						background-color: var(--yellow);
					}

					&:hover,
					&:focus-within {
						color: #fff;
						background-color: var(--blue-sky);
					}
				}
			}


			.no-result {
				margin-top: 2.1rem;
				text-align: center;

				.tlx-no-result-txt {
					font-style: italic;
					font-size: 1.4rem;
				}

				.tlx-question {
					font-size: 1.4rem;
					font-weight: 800;
					font-size: 1.8rem;
					color: var(--yellow);
					padding: 1.4rem 1rem;
				}

				a {
					margin-top: 1.4rem;
					font-size: 1.4rem;
					line-height: 1.2;
					color: #fff;
					background-color: var(--brown);
					border-radius: 0.5rem;
					padding: 1rem;
					display: inline-flex;

					&:hover,
					&:focus-within {
						color: #fff;
						background-color: var(--blue-sky);
					}
				}
			}
		}
	}

	.map_applicateurs {
		background-color: #F9F9F9;
		position: relative;

		svg {
			display: block;
			max-width: 100%;
            height: auto;

			path {
				cursor: pointer;
			}

			path.actif,
			path:hover {
				fill: var(--blue-sky);
			}
		}


	}

	@media screen and (min-width: 48em) {
		display: flex;
		justify-content: end;

		.search_applicateurs,
		.map_applicateurs {
			width: 50%;
		}

		.search_applicateurs {
			max-width: 64rem;
			padding-right: 8.33vw;

			#search_applicateurs_form button[type="submit"] {
				span {
					display: inline-block;
				}
                svg {
                	margin-left: 1rem;
                }
            }
		}

		.map_applicateurs svg#tlx_map_home {
			width: 93%;
			max-width: 89.2rem;
            height: auto;
            min-height: 100%;
		}
	}
}


.map_applicateurs-modal,
.list-applicateurs {
	color: var(--blue);

	.item-title {
		font-size: 1.8rem;
		font-weight: 800;
		display: flex;
		flex-direction: column;
		margin-bottom: 1.2rem;

		span {
			display: inline-block;
			margin-right: auto;
			text-transform: uppercase;
			color: #fff;
			font-size: 1.2rem;
			padding: 0.4rem;
			border-radius: 0.4rem;
			line-height: 1;
			margin-top: 0.8rem;
			margin-bottom: 0.8rem;

			&.concession {
				background: var(--blue-sky);
			}

			&.applicateur_agree {
				background: var(--brown);
			}
		}

		.dep-subtitle {
			font-size: 1.6rem;
			font-style: italic;
			font-weight: 400;
			line-height: 1.2;
		}
	}

	.item-address,
	.item-tel {
		display: flex;
		align-items: start;
		font-size: 1.2rem;
	}

	.item-tel p {
		font-weight: 600;
	}

	svg {
		width: 1.4rem;
		height: auto;
		margin-right: .8rem;
		margin-top: 0.4rem;

		path {
			fill: var(--yellow);
		}
	}

	.item-btns {
		margin-bottom: clamp(1rem, 1.7vw, 3rem);
		display: flex;
		align-items: center;
		gap: 0.8rem;

		a {
			font-size: 1.4rem;
			line-height: 1.2;
			color: var(--blue);
			background-color: #ececec;
			border-radius: 0.5rem;
			padding: 1rem;

			&:first-child {
				background-color: var(--yellow);
			}

			&:hover,
			&:focus-within {
				color: #fff;
				background-color: var(--blue-sky);
			}
		}
	}
}

.map_applicateurs-modal {
	border-radius: clamp(.6rem, 1.2vw, 2rem);
	padding: clamp(1rem, 1.7vw, 3rem) clamp(.6rem, 1.2vw, 2rem) 0;
	background-color: #fff;
	position: absolute;
	top: 1rem;
	left: clamp(.6rem, 1.7vw, 2.2rem);
	z-index: 20;
	transition: all .3s !important;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.10);
	max-width: 32.4rem;

	&:not(.actif) {
		/*display: none;*/
		opacity: 0;
		margin-top: -1.5rem;
	}

	body.archive.post-type-archive-applicateurs & {
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 80%;
	}

	.no-result {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding-left: 1rem;
		padding-right: 1rem;

		.tlx-no-result-txt {
			font-size: 1.4rem;
			font-style: italic;
			margin-top: clamp(1rem, 1.7vw, 3rem);
			margin-bottom: clamp(1.5rem, 1.4vw, 2.4rem);
		}

		.tlx-question {
			font-size: 1.8rem;
			font-weight: 800;
			margin-bottom: clamp(1.5rem, 1.4vw, 2.4rem);
		}

		.tlx-btn-contact {
			margin-bottom: clamp(1rem, 1.7vw, 3rem);
		}

		.tlx-btn-contact a {
			background-color: var(--brown);
			color: #fff;
			display: block;
			border-radius: .4rem;
			padding: 1rem;

			&:hover,
			&:focus-within {
				background-color: var(--blue-sky);
			}
		}
	}

	button.close {
		position: absolute;
		top: 1.2rem;
		right: 1.2rem;
		padding: .6em 0.9em;
        background: #fcc;
        color: #d9013b;
        border-radius: 0.4rem;
        font-size: 1.4rem;
        font-weight: 500;

		&:hover {
			background: #d9013b;
			color: #fff;
		}
	}
}

body.archive {

	&.post-type-archive-applicateurs,
	&.tax-departement-desservi {

		.entry-content h2 {
			color: var(--blue);
	        font-size: clamp(1.7rem, 1.65vw, 3rem);
	        font-weight: 700;
	        line-height: 1.2;
	        text-transform: uppercase;
		}
		.entry-content h3 {
			color: var(--blue-sky);
	        font-size: clamp(1.6rem, 1.1vw, 2rem);
	        font-weight: 600;
	        line-height: 1.2;
		}
		.entry-content p,
		.entry-content li {
			color: #525769;
	        font-size: clamp(1.4rem, 0.88vw, 1.6rem);
	        font-weight: 400;
	        line-height: 1.8;

	        a {
	        	color: var(--blue);

	        	&:hover,
	        	&:focus-within {
	        		color: var(--yellow);
	        	}
	        }
		}

		.breadcrumbs {
			margin-bottom: clamp(4.2rem,7vw,13.4rem);
		}

		 main > *:not(#content_header) {
			max-width: 128rem;
			margin-left: auto;
			margin-right: auto;
			
		}

		.map_applicateurs {
			position: relative;
			margin-top: clamp(4.2rem,7vw,13.4rem);

			.map_applicateurs-title {
				font-size: clamp(2.1rem,3vw,3rem);
				font-weight: 700;
				color: var(--blue);
			}
		}
	}

	.list-applicateurs {
		display: flex;
		flex-wrap: wrap;
		margin-top: 5.4rem;
		margin-bottom: 4.2rem;
		gap: 2rem;
		padding-left: 2rem;
		padding-right: 2rem;

		.item-container {
			border-radius: 2rem;
			border: 1px solid var(--blue);
			padding: clamp(1.5rem,1.7vw,3rem) clamp(1.2rem,1.2vw,2rem) clamp(1.2rem,1.2vw,2rem);
			width: 100%;
		}

		@media screen and (min-width: 48em) {
			.item-container {
				width: calc(50% - 1rem);
			}
		}

		@media screen and (min-width: 62em) {
			gap: 4rem;
			padding-left: 0;
			padding-right: 0;
			.item-container {
				max-width: 40rem;
				width: calc(33.33% - 2.7rem);
			}
		}
	}

	.map_applicateurs-the_map {
		margin-bottom: clamp(6.4rem,6vw,11.6rem);
		background-color: #f8f8f8;
		border-radius: 2rem;
		margin-top: 3.4rem;
		overflow: hidden;

		svg#tlx_map {
			display: block;
			margin: -7vw auto -21vw;
			transition: all .3s;	
			width: 90%;
		}

		&.active svg#tlx_map {
			margin: 3.4rem auto;
		}
	}

	.map_applicateurs-the_map svg#tlx_map path {
		cursor: pointer;
		transition: all .2s;

		&:hover,
		&.actif {
			fill: var(--blue-sky);
		}
	}

}

body.post-type-archive-applicateurs,
body.tax-departement-desservi,
body.single-applicateurs {

	h1 {
		color: var(--blue);
		font-weight: 900;
		font-size: clamp(2.9rem, 4.16vw, 5rem);
		line-height: 1.1;
		width: 64%;
		min-width: 30rem;
		max-width: 81rem;
		position: relative;
		margin-bottom: clamp(3.4rem, 4.5vw, 8.4rem);

		&:before,
		&:after {
            font-size: 4rem;
            font-weight: 700;
            display: inline-block;
            color: var(--yellow);
            content: '|';
		}

		&:before {
            transform: translate(-3rem, -2rem) rotate(32deg);
			position: absolute;
			top: 0;
			left: 0;
		}
		
		&:after {
            transform: translate(.7rem, 1.4rem) rotate(32deg);
		}

		@media screen and (min-width: 62em) {
			h1.title-applicateurs {
				min-width: 41.2rem;
			}
		}
	}
}

body.single-applicateurs {

	.fancybox-image {
		max-width: 100%;
	}

	.slick-dots li button:before {
		content: '';
		background-color: #DBDBDB;
		width: 0.8rem;
		height: 0.8rem;
		top: 0.4rem;
		left: 0.4rem;
		opacity: 1;
	}

	.slick-dots li.slick-active button:before {
		background-color: var(--yellow);
	}

	.container-applicateurs {
        max-width: 128rem;
        margin: auto;
        padding-top: clamp(4.2rem, 7vw, 13.6rem);
        padding-bottom: clamp(3.8rem, 4.9vw, 9.4rem);
        padding-left: 1.7rem;
        padding-right: 1.7rem;
	}

	.card_datas,
	.applicateur-link_website,
	.infos_applicateur-map iframe,
	.services_applicateurs-list li {
		overflow: hidden;
		border-radius: 2rem;
	}

	#infos_applicateur,
	#services_applicateurs,
	.container-applicateurs article,
	#gallery_applicateur {
		margin-bottom: clamp(4.2rem, 5.4vw, 9.4rem);
	}

	.container-applicateurs h2 {
		font-size: clamp(2.1rem, 3vw, 3rem);
		color: var(--blue);
		text-transform: uppercase;
		line-height: 1.2;
		margin-bottom: clamp(2rem, 2.3vw, 4rem);
	}

	#infos_applicateur {

		.infos_applicateur-card_datas {
			display: flex;
            flex-direction: column;
            gap: 2rem;

            a.applicateur-link_website {
            	color: var(--blue);
            	background-color: var(--yellow);
            	border-radius: 2rem;
            	display: flex;
            	justify-content: center;
            	align-items: center;
            	font-weight: 800;
            	font-size: 1.6rem;
            	line-height: 1;
            	padding: 1.8rem;
            	margin-bottom: clamp(3.4rem, 4.5vw, 8.4rem);

            	svg {
            		margin-left: 1rem;
            	}

            	&:hover,
            	&:focus-within {
            		color: #fff;
            		background-color: var(--blue-sky);

            		svg path {
            			stroke: white;
            		}
            	}
            }
		}

		.card_datas {
			background-color: var(--blue);
			color: #fff;
			padding: clamp(1.7rem, 2.5vw, 4.2rem) clamp(1.7rem, 2.5vw, 4.2rem) clamp(1.5rem, 2.3vw, 3.6rem);
			flex: 1;

			.applicateur_type {
				border-radius: 0.4rem;
				padding: 0.5rem 0.7rem;
				text-transform: uppercase;
				color: #fff;
				font-size: 1.2rem;
				background-color: var(--blue-sky);
				display: inline-flex;
				line-height: 1;
				margin-bottom: 1.2rem;

				&.applicateur_agree {
					background-color:var(--brown);
				}
			}

			.applicateur_name {
				font-weight: 800;
				font-size: 2.2rem;
				line-height: 1.2;
				margin-bottom: 1.6rem;
			}

			.applicateur_address {
				margin-bottom: 1.4rem;

				p {
					display: flex;
					align-items: center;
				}

				svg {
					width: 1.5rem;
					height: auto;
					margin-right: 1rem;
				}

				svg path {
					fill: var(--yellow);
				}
			}

			.applicateur_telephone {
				font-size: 1.6rem;
				font-weight: 600;
				display: flex;
				align-items: center;

				svg {
					width: 1.6rem;
					height: auto;
					margin-right: 1rem;
				}

				svg path {
					fill: var(--yellow);
				}
			}

			.applicateur_horaires {
				margin: clamp(1.7rem, 2vw, 3.2rem) 0;
				padding: 1rem 0;
				border-top: 1px solid rgba(255,255,255,.14);
				border-bottom: 1px solid rgba(255,255,255,.14);

				.row_horaire {
					display: flex;
					justify-content: space-between;
					font-weight: 300;
					font-size: 1.4rem;
					margin: 0.8rem 0;
				}
			}

			.applicateur_actions {
				display: flex;
				flex-wrap: wrap;
				gap: 0.8rem;
			}

			a {
				font-size: 1.4rem;
				line-height: 1.2;
				color: var(--blue);
				background-color: #fff;
				border-radius: 0.5rem;
				padding: 1rem;

				&[href*="tel:"] {
					background-color: var(--yellow);
				}

				&:hover,
				&:focus-within {
					color: #fff;
					background-color: var(--blue-sky);
				}
			}
		}

		.infos_applicateur-map p,
		.infos_applicateur-map iframe {
			width: 100%;
			margin-bottom: 0;
			display: block;
			height: 100%;
		}

		.infos_applicateur-map iframe {
			min-height: 36rem;
		}

		@media screen and (min-width: 48em) {
			display: flex;
			gap: 2rem;

			.infos_applicateur-card_datas {
				min-width: 36rem;
				flex: 1;

				a.applicateur-link_website {
					margin-bottom: 0;
				}
			}

			.infos_applicateur-map {
				width: 63%;
			}
		}
	}

	article p,
	article li {
		color: #525769;
        font-size: clamp(1.4rem, 0.88vw, 1.6rem);
        font-weight: 400;
        line-height: 1.8;

        a {
        	color: var(--blue);

        	&:hover,
        	&:focus-within {
        		color: var(--yellow);
        	}
        }
	}

	#services_applicateurs {
		.services_applicateurs-list {
			display: flex;
			flex-wrap: wrap;
			gap: clamp(1.4rem, 1.7vw, 2.1rem);
			justify-content: center;
			/*margin-left: -1.7rem;*/
			/*margin-right: -1.7rem;*/

			li {
				position: relative;
				max-width: 41.2rem;
				width: 100%;

				&:before {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 10.23%, rgba(0, 0, 0, 0.50) 88.59%);
				}

				img,
				picture {
					display: block;
				}

				@media screen and (min-width: 48em) {
					width: 48%;
                    max-width: max-content;
				}

				@media screen and (min-width: 62em) {
					width: 32.1%;
				}
			}
		}

		.item-content {
			position: absolute;
			left: clamp(1.7rem, 2.5vw, 4rem);
			bottom: clamp(1.7rem, 2.5vw, 4rem);
			display: flex;
			flex-direction: column;
			
			h3 {
				color: #fff;
				line-height: 1.1;
				font-size: 2.5rem;
				margin-bottom: clamp(1.7rem, 2.5vw, 3.2rem);
			}

			a {
				display: inline-block;
				padding: 1.6rem 1.8rem;
				border-radius: 0.8rem;
				color: #fff;
				font-size: 1.4rem;
				line-height: 1.2;
				margin-right: auto;

				&:hover,
				&:focus-within {
					background-color: var(--blue) !important;
				}
			}
		}
	}

}

html.modal-opened,
html.modal-opened body {
	overflow: hidden;
}

#contact_form_applicateur {
	position: fixed;
	z-index: 20;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.21);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.25s;

	html:not(.modal-opened) & {
		display: none;
	}

	html.modal-opened.visible & {
		opacity: 1;
	}

	.contact_form_applicateur-container {
		position: relative;
		width: clamp(34rem, 34vw, 64rem);
		background-color: #fff;
		box-shadow: 0 0 .4rem rgba(0,0,0,.34);
		border-radius: 2rem;
		padding: clamp(1.7rem, 2.5vw, 4.2rem) clamp(1.7rem, 2.5vw, 4.2rem) clamp(1.5rem, 2.3vw, 3.6rem);
		transition: margin-top 0.25s, opacity 0.25s;

		html:not(.visible) & {
			margin-top: -2rem;
			opacity: 0;
		}

		h2 {
			font-size: clamp(2.1rem, 3vw, 3rem);
        	color: var(--blue);
		}

		label {
        	color: #525769;
		}

		button.tlx-close-modal {
			position: absolute;
	        top: 2.1rem;
	        right: 2.1rem;
	        padding: .6em 0.9em;
	        background: #fcc;
	        color: #d9013b;
	        border-radius: 0.4rem;
	        font-size: 1.4rem;
	        font-weight: 500;

	        &:hover{
	            background: #d9013b;
            	color: #fff;
	        }
		}
	}
}

pre {
	color: #000 !important;
}