@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700;900&family=Great+Vibes&family=Inter:wght@100..900&display=swap');

/* GLOBAL */	

	html{
		scroll-behavior: smooth;
		height: 100%;
		font-size:15px;
		background: var(--mc-white);
		overflow: scroll;
		scroll-padding-top: 100px;

		&.freezed{
			overflow: hidden;
		}
	}
	body{
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		max-width: 2000px;
		font-family: var(--mf-secondary);
		/* overflow-x: hidden; */
		margin:0 auto;
		color:var(--mc-text);
		background-color: #FFF;
		line-height: 1.5;
	}
	
	a{
		color:var(--_clr-a);
		text-decoration:none;
		transition: color 0.2s ease-in-out 0s;

		&:hover{
			text-decoration:none;
			color:var(--_clr-a-hover);
		}
		&:focus{
			text-decoration:none;
			color:var(--_clr-a-hover);
			box-shadow:none !important;
		}
		&.disabled {
			color:#AAAAAA !important;
			pointer-events: none;
		}
	}
	
	img,
	picture,
	svg {
		max-width: 100%;
		display: block;
	}

	img {
		height: auto;
		font-style: italic;
		background-repeat: no-repeat;
		background-size: cover;
	}


	h1, .h1{
		color:var(--c-title-h1);
		font-size: clamp(1.1rem, 2vw, 2rem);
		text-transform: uppercase;
	}
	.h2, h2 {
		margin:2rem 0 0.5rem 0;
		font-family: var(--mf-cursive);
		font-size: clamp(1.2rem,3vw,2rem);
		font-weight: 600;
		color:var(--c-title-h2);
	}
	.h3, h3{
		font-family: var(--mf-primary);
		color:var(--c-title-h3);
		font-size: 1.7em;
	}
	.h4, h4{
		font-family: var(--mf-primary);
		font-size: 1.5em;
		color:var(--c-title-h4);
	}
	.h5, h5{
		font-family: var(--mf-primary);
		font-size: 1.3em;
		color:var(--c-title-h5);
	}
	hr {
		display: block;
		height: 2px;
		background: #CCC;
		margin: 0 5px;
	}

	ul {
		list-style-type: none;
		padding: 0;

		&.ul_custom {
			list-style-type: square;
			margin-left: 25px;
		}
	}

	label {
		font-weight: normal;
	}

	input.form-control,
	select.form-control {
		height: calc(1.5em + .75rem + 10px);
	}

	.nodefaultstyle{
		appearance: none;
		border:0 none;
		background: none;
	}

	input.form-control,
	select.form-control,
	textarea.form-control {
		appearance: none;
		border:0 none;
		border-radius: 0;
		font-family: var(--font-main);
		font-size: 0.9em;
	}

	input.form-control:focus,
	select.form-control:focus,
	textarea.form-control:focus,
	input.form-control:focus-visible,
	select.form-control:focus-visible,
	textarea.form-control:focus-visible {
		-webkit-box-shadow: none;
		box-shadow: none;
		outline:unset;
	}

	.form-control::placeholder {
		color: red;
	}

	.form-control-inline {
		display: inline;
		width: auto;
	}

	.custom_select {
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
		text-overflow: ellipsis;

		&::after{
			content:"";
			position: absolute;
			top: 50%; 
			margin-top: -3px;
			right: 0;  
			display: block; 
			width: 0; height: 0;
			border-color: transparent;
			border-top-color: #444; 
			border-width: 6px;
			border-style: solid;
			pointer-events: none;
			transform: translateX(-150%);
		}

		& select {
			width: 100%;
			appearance: none;
		}
	}

		/* SPEC FORM FILTRES */
		.page_resultats .filtres .custom_select::after{
			transform: translateX(-75%);
		}

	@media (max-width: 767px) {	
		.custom_select{width: max-content;}
	}

	.d-none{display: none !important;}
	.inline-block{display: inline-block;}

	.text-center{text-align: center;}
	.text-left{text-align: left;}
	.text-right{text-align: right;}

	.oy_hidden {
		overflow-y: hidden;
	}

	dialog{
		border: 0;
		border-radius: 20px;
		height: 80vh;
		width: 75vw;
		margin-top: 10vh;
		margin-inline: auto;
		overflow: unset;	
		
		&.fit{
			width: fit-content;
			height: fit-content;
			min-width: 300px;
		}

		&.dialog-sm{
			max-width: 768px;
		}
		&.dialog-md{
			max-width: 999px;
		}
		&.dialog-lg{
			max-width: 1280px;
		}
		& .main_dialog_content{
			overflow-x: hidden;
			height: 100%;
		}
		
		&::backdrop{
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.9);
		}
		&[open] {
			animation: showDialog 1s ease normal;
			-webkit-animation: showDialog 1s ease normal;
		}
		&.closing {
			animation: closingDialog 0.5s ease normal;
			-webkit-animation: closingDialog 0.5s ease normal;
		}
		& .btn_close_dialog{
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			background-color: var(--mc-primary);
			color:#fff;
			border-radius: 50px;
			translate: 10px -10px;
		}

		@media (max-width:580px) {
			width: 85vw;
		}
	}

	@keyframes showDialog{
		from {
			transform: translateY(-200%);
		}
		to {
			transform: translateY(0%);
		}
	}
	@keyframes closingDialog{
		from {
			transform: translateY(0%);
		}
		to {
			transform: translateY(100vh);
		}
	}

	.alert{	
		--_clr_border:#CCC;	
		padding: 2rem 2rem;
		display: flex;
		justify-content: center;
		width: fit-content;
		margin-inline: auto;
		margin-bottom: 2rem;
		text-align: center;
		border: 2px solid var(--_clr_border);
		border-radius: 50px;

		&.alert-success{
			--_clr_border:var(--mc-primary-light);
		}
	}

	.container{
		max-width: unset;
		width:min(var(--w-container), calc(100% - 1.5em));
		margin-inline:auto;
	}

	.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {background-color: transparent;border:0 none;}
	.tooltip{letter-spacing: 0.5px;font-size: 14px;font-family:var(--mf-primary);}
	.annotation{font-size: 12px;font-style: italic;}

	.placeholder-img{object-fit: scale-down !important;opacity: 0.3;border: 1px solid #CFCFCF;}
	.ck-img-float-right{margin-bottom: 15px;margin-left: 15px;float:right;}
	.ck-img-float-left{margin-bottom: 15px;margin-right: 15px;float:left;}

	.splash_logo{
		position: absolute;top:30%;width: 100%;z-index:1000;text-align: center;
	}
	.splash_logo img{
		max-width: 200px;
	}

	@media (max-width: 768px) {
		html{
			overflow-x: hidden;
		}
		.h1:where(.text-left,.text-right){
			padding-inline: unset !important;
		}
	}

	@media (max-width: 480px) {
		.ck-img-float-right, .ck-img-float-left{float: none;
		display: flex;-ms-align-items: center;align-items: center;}
	}



	.fb{--main-color: #3B5A9A;}
	.tw{--main-color: #00AEF0;}
	.ig{--main-color: #D93175;}
	.lk{--main-color: #007BB6;}
	.yt{--main-color: #FF0000;}

	.divider-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		line-height: 0;

		& svg {
			position: relative;
			display: block;
			width: calc(100% + 1.3px);
			height: 29px;
		}
		& .shape-fill {
			fill: #FFFFFF;
		}	
	}

	/* FAKELINK */
		[data-fakelink]{
			cursor: pointer;
		}

/* HEADER */

	#header {

		& .header__wrapper{

			& .header__top{
				--_minh:35px;
				--_clr-a:var(--mc-primary-dark);
				--_clr-a-hover:var(--mc-white);
				display: flex;
				align-items: center;
				justify-content: end;
				gap: 1rem;
				min-height: var(--_minh);
				padding: 0.25rem 1rem;
				background-color: var(--mc-white);
			}
			& .header__body{
				position: relative;
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				justify-content: space-between;
				padding-top: 1rem;
				padding-bottom: 1rem;

				& .bloc_logo{
					--_w-logo:270px;
					width: var(--_w-logo);

					& .logo img {
						display: block;
						width: min(var(--_w-logo), 100% - 1em);
					}
				}
				& .slogan{
					& img{
						position: absolute;
						top: 0;
						width: 150px;
						aspect-ratio: 1;
						object-fit: scale-down;
						translate:-50% 10%;
					}
				}
				& .coords{
					display: none;
					color:var(--mc-text);
					position: relative;
					padding-right: 100px;
		
					&::after{
						content: '';
						position: absolute;
						top: -24%;
						right: 0;
						display: block;
						width: 100px;
						height: 100px;
						background: transparent url(../../images/call.jpg) right 10px no-repeat;
						background-size: contain;
					}		
					& .tel {
						font-size: 30px;
						text-align: right;
						padding-right: 45px;
						font-weight: 800;
		
						& .fa {
							color: var(--mc-primary-light);
						}
					}		
					& .rappel {
						text-align: right;
		
						& .fa {
							font-size: 18px;
						}		
						& .btn {
							margin-top: 0;
						}
					}
				}
			}
			& .header__footer{
				position: absolute;
				z-index: 100;
				display: flex;
				width: 100%;
				justify-content: end;
				
				& > div{
					display: inline-flex;
					padding:0.25rem 1rem;

					background-color: #000;
					color:#FFF;
				}
			}

		}
		
		& .socials_mobile{
			display: none;
		}
		& .socials{
			display: flex;
			flex-flow: row wrap;
			justify-content: end;
			gap:1rem;
			width: min(400px, 100%);
			margin: 0;
			padding: 0.25rem 0;
			border-bottom: 1px solid;
			border-image: linear-gradient(to left, black, white);
			border-image-slice: 1;

			&::before{
				content:'Suivez-nous sur ';
			}

			& a{
				--_clr-a:var(--mc-text);
				--_clr-a-hover:var(--mc-primary);
			}
		}
		& .nav_mobile{
			display: none;
			padding-right: 1rem;

			& > *{
				font-size: 1.5rem;
				cursor: pointer;
			}
			& .toggle_search{
				display: none;
			}
		}

		@media (max-width:1200px){
			& .nav_mobile{
				display: flex;
				justify-content: end;
				gap: 2rem;
			}
		}
		@media (max-width:768px){
			& .header__wrapper{
				& .header__top{
					display: none;
				}
				& .header__body{
					align-items: baseline;

					& .logo {
						display: flex;
						width: 100%;
						justify-content: center;
						padding: 1rem 0;

						& img{
							--_w-logo:50vw;
						}
					}
					& .slogan{
						& img{
							display: none;
						}
					}
				}
			}
			& .coords {
				display: none;
			}
			& .socials_mobile{
				display: none;
			}
			& .socials{
				display: none;
			}	
			& .header__footer{
				font-size: 0.8rem;
			}		
		}
	}


/* FOOTER */

	.footer{
		--_h_sep:20px;
		--c-title-h1:var(--mc-over-primary);
		position: relative;
		margin-top: 0rem;
		background-color: var(--mc-black);
		color:var(--mc-over-primary);

		& .topfooter{
			& img{
				width: 100%;
				height: 30vh;
				object-fit: cover;
			}
		}

		& .middlefooter{
			position: relative;
			background: var(--mc-black) url(/assets/images/carbon_fibre.png);
			&::before {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background: linear-gradient(-5deg, #000 70%, rgba(0,0,0,0.6));
				position: absolute;
				inset: 0;
				z-index: 0;
			}

			& .container{	
				position: relative;
				z-index: 1;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-areas:
					'section2 section3 infos '
				;
				gap:2rem;
				padding: 2rem 0 4rem 0;
			}
			

			& .box_pages_section{

				&.section_2{
					grid-area: section2;
				}
				&.section_3{
					grid-area: section3;
					
				}

				& ul{
					display: flex;
					flex-direction: column;
					gap: 0.25rem;

					& li{
						& a{
							position: relative;
							display: inline-flex;
							align-items: center;
							gap: 0.5rem;
							padding-bottom: 0.25rem;

							&::before {
								position: absolute;
								bottom: 0;
								left: 0;
								z-index: 999;
								visibility: hidden;
								width: 0%;
								height: 1px;
								content: '';
								-webkit-transition: all .3s ease-in-out 0s;
								transition: all .3s ease-in-out 0s;
								background-color: var(--mc-primary);
							}

							&:hover{
								& i{
									color: var(--mc-primary);
								}
								&::before{
									width: calc(100% + 2rem);									
									visibility: visible;
								}
							}
						}
					}
				}

			}
			& .box_infos{
				grid-area: infos;

				& .nom{
					padding: 1rem;
					border-radius: 15px;
					text-align: center;
					& img{
						display: inline-flex;
					}
				}
				& .infos{
					& .tel{
						display: flex;
						justify-content: center;
						font-size: 2rem;

						& .libelle{
							display: none;
						}
					}
				}
				& .reseausocial{
					display: flex;
					justify-content: center;
					gap: 1rem;
					margin: 0.25rem;
					font-size: 1.5rem;
				}
			}
		}

		@media (max-width: 999px) {
			& .middlefooter{		
				& .container{				
					grid-template-columns: 1fr 1fr;
					grid-template-areas:
						'section2 section3'
						'infos  infos'
					;
				}
			}
		}
		@media (max-width: 768px) {
			& .middlefooter{	
				& .container{				
					grid-template-columns: auto;
					grid-template-areas:
						'section2'
						'section3'
						'infos'
					;				
					justify-content: center;
					text-align: center;
				}
				& .box_infos{
					& .reseausocial{
						gap: 1rem;
						justify-content: center;
						font-size: 1.5rem;
					}
				}
			}
		}
	}

	.copyright{
		& .wrapper{
			padding: 1rem;
			text-align: center;
			font-size: 0.8rem;

			& p:first-child{
				font-size: 0.7rem;
			}
			& a{
				--_clr-a:var(--mc-primary-dark);
			}
		}
	}

	.mobile_sticky_footer{
		display: none;
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100vw;
		
		&::before{
			width: 100%;
			height: 100%;
			position: absolute;
			backdrop-filter: saturate(180%) blur(5px);
			backface-visibility: hidden;
			content: '';
			z-index: -1;
		}
		& ul{
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap:1rem;

			& li a{				
				font-size: 1.5rem;
				padding: 1rem;
				text-align: center;
				color:var(--mc-primary);
			}
		}
	}

/* NAVIGATION */

	@media (min-width:1200px) {
		.main_nav{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 0px;
			/*margin-bottom: 60px;*/

			& .main_nav_toggle{
				display: none;
			}
			& ul {
				position: relative;
				display: flex;
				gap:1.5rem;
				margin-bottom: 0;

				& > li {
					--_clr-a:var(--mc-text);
					display: inline-block;
					position: relative;
					line-height: 22px;
					text-align: left;
					vertical-align: top;
					border: 0px solid #999;
					margin-right: 15px;

					&:hover{
						& > a {
							text-decoration: none;
							color: var(--_clr-a);
						}	
						& > ul {
							-webkit-transform: translateX(0px);
							-moz-transform: translateX(0px);
							transform: translateX(0px);
							visibility: visible;
							opacity: 1;
						}
					}
					& > a {
						display: inline-flex;
						font-weight: 500;
						text-transform: uppercase;
						text-decoration: none;
						padding-top: 0.5rem;
						padding-bottom: 0.5rem;
						-webkit-transition: all 0.25s ease;
						-moz-transition: all 0.25s ease;
						transition: all 0.25s ease;

						&::before {
							position: absolute;
							bottom: 0;
							left: 0;
							z-index: 999;
							visibility: hidden;
							width: 0%;
							height: 2px;
							content: '';
							-webkit-transition: all .3s ease-in-out 0s;
							transition: all .3s ease-in-out 0s;
							background-color: var(--mc-secondary);
						}
						& span {
							white-space: nowrap;
						}
						& .soustitre {
							text-transform: none;
							font-size: 14px;
							letter-spacing: 1px;
						}
					}
					&:has(ul){
						& > a::after {
							margin-left:0.25rem;

							content: '\e313';
							font-family: 'Material Icons';
							font-size: 1.5rem;
							vertical-align: unset;
							border: 0 none;
						}
					}
					& > ul {
						position: absolute;
						z-index: 1000;
						top: 37px;
						left: -3px;
						display: flex;
						flex-direction: column;
						margin: 0px;
						padding: 0px;
						padding-top: 10px;
						padding-bottom: 10px;
						list-style-type: none;
						background-color: rgba(255, 255, 255, 0.9);
						text-align: left;
						border: 0 none;
						border-bottom: 1px solid #CCC;
						visibility: hidden;
						opacity: 0;
						box-shadow: none;
						border-radius: 0;
						transition: all 0.25s ease;
						transform: translateX(-10px);

						& li {
							position: relative;
							line-height: 1em;

							&:hover {
								background-color: transparent;

								& > ul {
									-webkit-transform: translateX(0px);
									-moz-transform: translateX(0px);
									transform: translateX(0px);
									visibility: visible;
									opacity: 1;
								}
							}
							& a {
								display: flex;
								align-items: center;
								padding: 8px 15px;
								color: #000;
								font-size: 0.95em;
								text-transform: none;
								letter-spacing: normal;
								white-space: nowrap;

								&:hover {
									text-decoration: none;
									background-color: transparent;
									color: var(--mc-secondary);
									-webkit-transition: all 0.25s ease;
									-moz-transition: all 0.25s ease;
									transition: all 0.25s ease;
								}
							}

							& ul {
								top: 0px;
								left: 100%;
								white-space: nowrap;
								visibility: hidden;
								opacity: 0;
								-webkit-transition: all 0.25s ease;
								-moz-transition: all 0.25s ease;
								transition: all 0.25s ease;
								-webkit-transform: translateX(-10px);
								-moz-transform: translateX(-10px);
								transform: translateX(-10px);
							}

						}
					}
				}
			}
		}

		.main_nav ul li.niv1:hover>a::before,
		.main_nav ul li.niv1>a.active::before {
			visibility: visible;
			width: 100%;
			/*-webkit-transform: scaleX(1);
			transform: scaleX(1);*/
		}	
		.main_nav ul>li


		.main_nav ul>li>ul {
			left: calc(13px);
		}

		.main_nav ul>li:first-child>ul {
			left: 0px;
		}

		.main_nav ul>li ul.dropdown-submenu {
			padding-top: 3px;
		}
	}

	@media (max-width:1200px) {

		/* .main_nav-icon {
			position: relative;
			width: 30px;
			height: 24px;
			margin-right: 1rem;			
			cursor: pointer;
			transition: all 0.3s ease;

			& .line {
				width: 30px;
				height: 4px;
				background-color: #333;
				margin: 4px 0;
				transition: transform 0.3s ease;
			}

			&.open{
				position: fixed;
				z-index: 2001;
				right: 1rem;
			}

			&.open .line:nth-child(1) {
				transform: translateY(8px) rotate(45deg);
			}			
			&.open .line:nth-child(2) {
				transform: scaleX(0);
			}			
			&.open .line:nth-child(3) {
				transform: translateY(-8px) rotate(-45deg);
			}
		} */
				
		.main_nav{
			position: fixed;
			top: 0;
			right: 0;
			z-index: 2000;
			padding: 60px 2rem 1rem 0.5rem;
			background: #fff;
			height: calc(100vh);
			box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
			translate: 100% 0;
			opacity: 0;
			visibility: hidden;
			transition: .3s all ease-in-out;
			

			&.open{
				width: 70vw;

				translate: 0 0;
				opacity: 1;
				visibility: visible;
			}
			
			& ul{
				padding: 0;
			}
			& > ul{
				display: flex;
				flex-direction: column;

				& > li{
					border-bottom: 1px solid #CCC;

					& a{
						display: flex;
						align-items: center;
						padding:0.5rem 0.25rem;
					}

					& > a{
						font-size: 1.125rem;
						font-weight: bold;
					}

					& > ul{
						position: relative;
						padding-left: 0.25rem;
					}
				}
			}
		}

	}

/* SLIDER */

	.slider{
		--swiper-pagination-color:var(--mc-primary-light);
		--swiper-pagination-bullet-inactive-color:var(--mc-grey);
	}
	#sliderHome{
		--_h_slider:400px;
		--_w_form:300px;
		position: relative;
		overflow: hidden;
		/*background: linear-gradient(to right, var(--mc-primary) 20%, var(--mc-white) 50%);*/

		& .bloc_slider{
			position: relative;
			width: 100%;
		}
		/* &:not(:has(.swiper-slide-active video)) .bloc_slider{			
			width: 70%;
		} */
		
		& > .container{	
			position: relative;		
			display: flex;
			flex-direction: row;
			align-items: center;
			gap:1rem;
		}

		& .sliderHome{
			height:var(--_h_slider);

			& .item{
				position: relative;
				width: 100%;
				background-image: var(--bg-image);
				background-color: #FFF;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: right;
				
				&::after{
					content: '';
					display: none;
					position: absolute;
					inset: 0;
					background: linear-gradient(to right, var(--mc-primary), transparent 50%);
				}	
				& img{
					width: 100%;
					height: var(--_h_slider);
					object-fit: cover;
				}	
				& .item_wrapper{
					position: relative;
					height: var(--_h_slider);
					background-size: cover;
				}	
				& .caption{
					height: var(--_h_slider);
					padding: 2rem;
	
					& .caption_inner{
						position: absolute;
						z-index: 5;
						left:0;
						right: 0;
						bottom: 0;
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: end;
						align-items: center;
						padding: 1.5rem 1rem 2.5rem 1rem;

						background-color: rgba(0,0,0,0.5);
		
						& .titre{
							max-width: 70%;
							font-size: clamp(1.2rem,5vw,3rem);
							line-height: 1.1em;
							font-weight: 400;
							color:#FFF;
							text-shadow: 1px 2px 10px #000;
						}
						& .texte{
							max-width: 70%;
							font-size: clamp(1rem,3vw,1.8rem);
							color:#FFF;
							line-height: 1.2em;
							text-shadow: 1px 2px 10px #000
						}
						& .lien{
							margin-top: 1rem;
							margin-bottom: 3rem;
							max-width: 70%;
						}
					}
				}
				& .front-video{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		
		&:has(.swiper-slide-active video) .bloc_formulaire{
			display: none;
		}
		
		@media (max-width:999px){
			--_h_slider: 35vh;

			/* &:not(:has(.swiper-slide-active video)) .bloc_slider{			
				width: 90%;
			} */

			& > .container{		
				width: 100%;
				flex-direction: column;
				margin: 0;
				gap: 0;
			}
			& .bloc_slider{
				width: 100%;

				& .sliderHome{
					& .item{
						background-size: contain;
						background-position: center;

						&::after{
							display: none;
						}
						& .caption{

							& .caption_inner{
								justify-content: center;
								align-items: center;
								margin: 0;
								padding-inline:0;

								& *{
									max-width: 80%;
									text-align: center;
								}
								& .titre{
									font-weight: 600;
								}
								& .lien{
									display: none;
								}
							}
						}
					}
					& .swiper-button-prev::after, & .swiper-button-next::after{
						display: none;
					}
				}
			}
			
		}

	}




/* BLOC MARQUES */

	.bloc_marques{
		--swiper-pagination-color:var(--mc-primary);
		--c-title-h2:var(--mc-primary);
		position: relative;
		margin:2rem 1rem;

		
		& .h2{
			font-family: var(--mf-cursive);
			text-align: center;
		}
		& ul{
			justify-content: center;
			& li{				
				display: flex;
				justify-content: center;
				transition: translate 0.25s;

				& a{
					width: 45px;
					height: 45px;
					padding: 1rem;
					border:1px solid #f5f5f5;
					border-radius: 10px;
				}				
				& .visuel img{
					width: 45px;
					aspect-ratio: 1 / 1;	
					object-fit: scale-down;
				}

				&:hover{		
					translate:0 -5%;	
				}
			}
		}
		& .swiper-pagination_marques{
			transform: translateX(0) !important;
		}

		@media (max-width: 999px) {
			& ul{
				justify-content: unset;
			}
		}
		@media (max-width:768px) {
			& ul{
				& li{			
					display: flex;
					justify-content: center;	
				}
			}
		}
	}
	

/* PAGES */

	.page{
		padding-bottom: 0rem;	

		& .pg_header{
			& img{
				width: 100%;
				height:250px;
				object-fit: cover;
			}
		}
	}	

	#contenu_page{
		min-height: 50vh;

		& .page_texte{
			& a{
				--_clr-a:var(--mc-primary-dark);
				text-decoration: underline;

				&:hover{
					text-decoration: none;
				}
			}
		}
	}

	.body_home{		
		& .contenu{
			background:linear-gradient(to bottom, #F8F8F8, #FFFFFF 100px);
		}
	}
	body:not(.body_home){
		& .header__footer{
			position: relative !important;
		}
	}

	.page_home{

		
		& .h2{
			--c-title-h2:var(--mc-black);
			margin-top: 5rem;

			text-transform: uppercase;

			&::before {
				background-color:  var(--mc-secondary);
				content: "";
				position: relative;
				display: inline-block;
				height: 5px;
				margin-inline: 1rem;
				vertical-align: middle;
				width: 100px;
			}
			&::after {
				background-color: var(--mc-primary);
				content: "";
				position: relative;
				display: inline-block;
				height: 5px;
				margin-inline: 1rem;
				vertical-align: middle;
				width: 100px;
			}
		}
		& #home__avis{
			background-color: #f8f8f8;
			padding-top: 3rem;
			padding-bottom: 5rem;

			& > .titre{
				text-align: center;
			}

			
		}
		
		& .home__news{
			& .item{
				& .wrapper{
					display: grid;
					grid-template-columns: 40% 60%;
					grid-template-rows:auto auto 1fr;
					gap: 2rem;
					grid-template-areas: 
						'titre titre'
						'visuel texte'
						'visuel lien'
					;
					& .titre{
						grid-area: titre;
						text-align: center;
					}
					& .visuel{
						grid-area: visuel;		
						display: inline-flex;
						justify-content: end;

						& picture{
							display: block;					
							width: min(400px, 100%);
						}
					}
					& .texte{
						grid-area: texte;	
						width: min(600px, 100%);
					}
					& .lien{
						grid-area: lien;
					}
				}
			}
		}

		@media (max-width:580px){
			& .home__news{
				& .item{
					& .wrapper{
						grid-template-columns: 1fr;
						grid-template-rows: auto;
						grid-template-areas: 
							'titre'
							'visuel'
							'texte'
							'lien'
						;
						justify-content: center;
					}
					& .titre{
						text-align: center;
					}
					& .texte{
						text-align: center;
					}
					& .lien{
						text-align: center;
					}
				}
			}
		}
		@media (max-width:580px){
			
			& .h2{
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 1rem;
				text-wrap: balance;
			}
		}
	}

	.page_resultats{
		margin-bottom: 5rem;

		& h1{
			line-height: 1.1;
			text-transform: uppercase;
			color: var(--mc-primary);

			& span:first-child{				
				font-size: 0.75em;	
				color: var(--mc-black);
			}
			& span:not(:first-child){
				display: block;
				font-size: 1.5em;
				color:var(--mc-primary);
			}
		}

		& > div{
			margin-top: 50px;
		}
		& > div:has(.filtres){
			display: flex;
			flex-direction: column;
			gap: 1rem;
			margin-bottom: 100px;
		}
		
		& h2{
			font-family: var(--mf-primary), sans-serif;
			font-size: 2rem;
			margin: 0;			
		}

		& .ligne_marque {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			margin-top: 5rem;

			& img{
				width: 80px;
				height: 80px;
				object-fit: scale-down;
			}
		}

		& .contact_resultat{
			width: min(800px, 100%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin:3rem auto;
			padding: 1.5rem;
			background-color: #f8f8f8;

			& p{
				margin: 0.25rem;
			}

			& .titre{
				font-family: var(--mf-cursive);
				font-size: 1.5rem;
			}
		}

		/* FILTRES */
			& .filtres {				
				position: relative;
				& .wrapper {
					background-color: var(--mc-grey-light-light);
					color: #fff;
					padding: 1rem;
					border-radius: 0px;

					& form {
						display: flex;
						flex-direction: row wrap;
						align-items: end;
						gap: 1em 2em;

						& select{
							background-color: #fff;
							border-radius: 10px;
							padding-left: 15px;
							padding-right: 35px;
						}
					}
					& .label_filtres {
						position: absolute;
						top: 0;
						padding: 0.25rem 1rem;
						
						font-size: 1.3rem;
						background: var(--mc-grey-light-light);
						color:var(--mc-grey);
						text-transform: uppercase;
						border-radius: 10px 10px 0 0;

						translate: 0 -75%;
					}
					& .ligne2 {
						display: flex;
						gap: 1em;
					}
					& .bloc {
						display: flex;
						flex-direction: column;

						&.bloc_boite{
							padding-bottom: 0.75rem;
						}

						& .wrapper {
							display: flex;
							flex-direction: row;

							& .range{
								text-align: right;
							}
						}
						& label {
							font-size: 0.9rem;
							padding: 0.25rem;
							color:var(--mc-grey);
						}
					}
					& .bloc_submit{
						text-align: center;

						& .btn{
							padding-top: 0.25rem;
							padding-bottom: 0.25rem;
						}
					}
				}
				& #form_filtres_mobile{
					flex-direction: column;
				}
				& .btn_show_filtres{
					display: none;
				}

				@media (max-width: 999px) {
					& > .wrapper {
						position: absolute;
						z-index: 100;
						width: calc(100% - 2.5rem);
						padding:1rem;
						translate: -120% 0;
						background-color: #f8f8f8;
						color: #000;
						transition: all 0.25s;
						border: 2px solid var(--mc-grey);
						margin: 0;
						left: 0;

						&.open{
							translate: 0 0;

							
						}
						& .label_filtres{
							position: relative;
							top: 0;
							padding: 0;
							text-transform: uppercase;
							font-size: 1.3rem;
							font-weight: bold;
							translate: 0 -50%;
							background-color: unset;
							color:var(--mc-primary);
						}
						& .bloc{
							flex-flow: row wrap;
							align-items: center;
							border-bottom: 1px solid #e1e1e1;
							padding-bottom: 0.25rem;

							& label{
								min-width: 100px;
								font-weight: bold;
							}
							& .label{
								min-width: 100px;
								font-weight: bold;
							}
						}
					}
					& .btn_show_filtres{
						display: flex;
						align-items: center;
					}
					
				}
				@media (max-width: 767px){
					
					& > .wrapper{
						& form{
							display: flex;
							flex-direction: column;
							gap: 0.25rem;
							width: 100%;

							& .bloc{
								flex-direction: column !important;
								align-items: start;		
								width: 100%;	
								& label{
									text-align: left;
								}						
								&:not(.bloc_boite) *{
									width: 100%;
								}
								&.bloc_boite{
									& > div{
										display: flex;
										margin-top: 0.5rem;

										& input{

										}
									}
								}
							}
						}
					}
					& .resultats{flex:0 0 100%;max-width: 100%;padding-left: 0;}
				}
			}
		

		

		@media (max-width: 768px) {
			& > div{
				grid-template-columns: 1fr !important;
				text-align: center;
			}

			& .contact_resultat{
				width:calc(100% - 1rem);
				padding: 1rem 0;

				& .contacts{
					display: flex;
					flex-direction: column;
					gap: 1rem;
				}
			}
		}
		
		
	}

	.pg_contact{
		& .formulaire{
			width: min(600px, 100%);
		}
	}

/* LISTE PRODUITS */

	.product_listing_home{
		position: relative;

		@media (max-width:768px){
			
		}
	}

	.liste_mosaique{
		--_nb_cell:4;
		--_img_height:180px;
		position: relative;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-template-columns: repeat(var(--_nb_cell),1fr);	
		justify-content: center;	
		column-gap: 2rem;
		row-gap: 2rem;
		margin-top: 3rem;

		

		& li{

			& .wrapper{
				position: relative;
				border: 0px solid #ccc;
				border-radius: 15px;
				padding: 1em;

				& .categorie {
					display: none;
					position: absolute;
					z-index:5;
					top: -0.5rem;
					left: -0.5rem;
					background-color: #fff;
					color: var(--mc-primary);
					padding: 0.25rem 1rem;
					text-transform: uppercase;
					font-weight: 700;
					border-top: 2px solid var(--mc-primary);
					border-bottom: 2px solid var(--mc-primary);
					rotate: -5deg;
				}
				& .visuel{
					height: var(--_img_height);
					margin-bottom: 0.5rem;
					overflow: hidden;

					& img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						transition: scale 0.25s;

						&.logo_marque{
							width: 80px;
							height: 100%;
							object-fit: scale-down;
							margin: auto;
							filter: opacity(20%);
						}
					}

				}

				& .titre{
					font-size: 1.1rem;
					font-weight: 700;
					line-height: 1.1em;
				}
				& .texte{
					font-size: 0.9rem;
					padding: 0.25rem;
				}
				& .tarifs{
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 1rem;
					width: 100%;

					& .prix_barre{
						position: relative;
						font-size: 1.4rem;
						font-weight: 700;
						color:var(--mc-primary-light);
						white-space: nowrap;

						&::after{
							content:'';
							position: absolute;
							top: 50%;
							left: -5%;
							width: 110%;
							height:2px;
							background-color: var(--mc-primary);
							rotate: -3deg;
						}
					}
					& .pourcent{
						color:var(--mc-primary-light);
					}
					& .prix{
						position: relative;
						font-size: 1.5rem;
						font-weight: 700;

						&.prix_utilitaire{								
							/* padding-top: 1rem; */
						}
						
						& sup{
							position: absolute;	
							font-size: 0.7rem;							
						}
						& .utilitaire_ttc{
							position: absolute;
							top: 0;
							translate: 0;
							white-space: nowrap;
							font-size: 0.9rem;
						}
						& .tarif{
							color:var(--mc-white);
							white-space: nowrap;						
						}
					}
				}
				& .lien{
					--_h:40px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 50px;

					& a{
						position: relative;
						display: flex;
						width: var(--_h);
						height: var(--_h);
						align-items: center;
						justify-content: center;
					}
				}
			}
			&:hover{
				& .wrapper{
					& .visuel img{
						scale:1.05;
					}
					& .lien{
						--_h:45px;
					}
				}
			}
		}
		&.selection{
			& li{
				& .wrapper{
					display: grid;
					grid-template-columns: 1fr 50px;
					grid-template-rows: minmax(3rem, auto) auto auto auto auto;
					grid-template-areas: 
					'titre titre'
					'visuel visuel'
					'visuel visuel'
					'texte texte'
					'tarifs lien'
					;

					& .visuel{
						grid-area: visuel;
					}
					& .titre{
						--c-title-h3:#000;
						grid-area: titre;
						margin-bottom: 0.5rem;
					}
					& .texte{
						grid-area: texte;
						
						& > div{
							position: absolute;
							display: inline-flex;
							padding: 0.25rem 0.75rem;

							background-color: #000;
							color:#FFF;
							
							translate: -10% -75%;
						}
					}
					& .tarifs{
						grid-area: tarifs;
						background-color: var(--mc-grey-light);
						color:var(--mc-black);

						& .prix{
							& .tarif{
								color:var(--mc-black);
							}
						}
					}
					& .lien{
						--_clr-a:var(--mc-white);
						grid-area: lien;
						background-color: var(--mc-primary);


					}
				}
			}
		}

		@media (max-width:1200px){
			--_nb_cell:2;
			--_img_height:150px;

		}
		@media (max-width:768px){
			--_nb_cell:2;
			--_img_height:150px;

			
		}
		@media (max-width:580px){
			--_nb_cell:1;
		}
	}

	.liste_produits_inline{

		& .special{
			font-size: 1.5rem;

			&:not(:first-child)::before{
				content: '';
				display: block;
				width: min(350px, 100% - 1rem);
				height: 2px;
				margin:2rem auto;
				background: linear-gradient(to right, var(--mc-white) 15%, var(--mc-primary), var(--mc-white) 85% );
			}

		}
		& .item{
			display: grid;
			grid-template-columns: 100px 1fr auto 150px 150px 50px;
			grid-template-rows: auto;
			gap: 1rem;
			align-items: center;
			margin-top: 1rem;
			margin-bottom: 1rem;
			padding: 1em;
			position: relative;

			border: 1px solid #ccc;
			border-radius: 15px;

			& .visuel{
				& .categorie {
					display: none;
					position: absolute;
					z-index: 5;
					top: -0.5rem;
					left: -0.5rem;
					background-color: #fff;
					color: var(--mc-primary);
					padding: 0.25rem 1rem;
					text-transform: uppercase;
					font-weight: 700;
					border-top: 2px solid var(--mc-primary);
					border-bottom: 2px solid var(--mc-primary);
					rotate: -5deg;
				}
				& a{
					display: flex;
					justify-content: center;
				}
				& img{
					height:50px;
					object-fit: contain;
				}

			}
			& .infos{

				& .titre{
					margin-bottom: 1rem;

					& a{
						--_clr-a:var(--mc-black);
						--_clr-a-hover:var(--mc-primary);
						font-weight: 700;
					}

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

					& .bloc_detail{
						display: flex;
						flex-direction: row;
						flex:1;
						gap: 0.25rem;
						font-size: 0.9rem;
					
						& .icone{display:inline-block;height: 18px;width: 18px;background-color: #000;}
						& .icone-km{-webkit-mask:url(/assets/images/icons/081-dashboard-3.svg) no-repeat;mask:url(/assets/images/icons/081-dashboard-3.svg) no-repeat;}
						& .icone-boite{-webkit-mask:url(/assets/images/icons/081-gearshift.svg) no-repeat;mask:url(/assets/images/icons/081-gearshift.svg) no-repeat;}
						& .icone-energie{mask:url(/assets/images/icons/081-gas-station.svg) no-repeat;-webkit-mask:url(/assets/images/icons/081-gas-station.svg) no-repeat;}
						& .icone-moteur{mask:url(/assets/images/icons/081-engine.svg) no-repeat;-webkit-mask:url(/assets/images/icons/081-engine.svg) no-repeat;}
						& .icone-co2{mask:url(/assets/images/icons/co2.svg) no-repeat;-webkit-mask:url(/assets/images/icons/co2.svg) no-repeat;}
						& .icone-annee{mask:url(/assets/images/icons/calendar.svg) no-repeat;-webkit-mask:url(/assets/images/icons/calendar.svg) no-repeat;}
					}

				}
				
			}
			& .divers{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			& .tarif{
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				font-size: 1.5rem;
				font-weight: 700;
				color:var(--mc-primary);

				& sup {
					position: absolute;
					font-size: 0.8rem;
					text-transform: uppercase;
				}
				&:has(.pourcent){
					flex-direction: column;
					align-items: center;
				}
				& .prix_barre{
					position: relative;
					display: flex;
					width: fit-content;
					font-size: 1.2rem;
					font-weight: 700;
					color:var(--mc-primary-light);

					&::after{
						content:'';
						position: absolute;
						top: 50%;
						left: -5%;
						width: 110%;
						height:2px;
						background-color: var(--mc-primary);
						rotate: -3deg;
					}
				}
				& .pourcent{
					position: absolute;
					top: 0;
					right: 50px;
					width: 50px;
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					color: #FFF;
					font-size: 0.8em;
					font-weight: bold;
					background: linear-gradient(to left, var(--mc-primary) 0%, var(--mc-primary-dark) 100%);
					translate: 50% -50%;
				}
			}
			& .lien{
				--_h: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;

				& a {
					position: relative;
					display: flex;
					width: var(--_h);
					height: var(--_h);
					align-items: center;
					justify-content: center;
					background-color: var(--mc-primary-light);
					color: var(--mc-over-primary-light);
					border-radius: 10px;
					transition: all 0.25s;
				}
			}

			&:hover{
				border-color: var(--mc-primary);
				& .lien{
					--_h:45px;
				}
			}
		}

		@media (max-width: 768px) {

			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;

			& .special{
				display: none;
			}
			& .item{
				grid-template-columns: 1fr 1fr;
				& .visuel{
					& img{
						height: 100px;
					}
				}

				& .infos{
					& .details{
						grid-template-columns: 1fr;
					}
				}
			}
		}
		@media (max-width: 580px) {
			display: grid;
			grid-template-columns: 1fr;
		}
	}
	

/* ARIANE */

	#ariane{
		
		padding: 1rem 0;
		background-color: var(--mc-grey-light-light);

		& .container{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.5rem;
		}

		& .item_back{
			display: flex;
			align-items: center;

			& i{
				display: inline-flex;
				align-items: center;
				font-size: 1rem;
			}
		}
		& .item{

			&::before{
				content: '/ ';
				color: var(--mc-primary-light);
				margin-right: 0.5rem;
				margin-left: 0.25rem;
			}
		}

		@media (max-width:768px){
			& .item:last-child{
				display: none;
			}
		}
	}

/* DEMANDE DEVIS */

	#cadre_demande_devis{
		
		& .header{
			& .logo{
				display: flex;
				justify-content: center;
				margin-bottom: 2rem;

				& img{
					width: 150px;
				}
			}
			& .titre{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-family: var(--mf-cursive);
				font-size: clamp(24px,3vw,40px);
				font-weight: bold;
				margin-bottom: 2rem;

				&::after {
					content: '';
					display: block;
					width: min(350px, 100% - 1rem);
					height: 2px;
					margin-inline: auto;
					background: linear-gradient(to right, var(--mc-white) 15%, var(--mc-primary), var(--mc-white) 85% );
				}
			}
		}
		& .content{
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 2rem;
		}
		
		& .resume {

			& .wrapper{
				position: sticky;
				top: 1rem;
				overflow: hidden;
				display: grid;
				gap: 1rem;
				grid-template-columns: 30% 1fr;
				grid-template-rows: auto 1fr;
				grid-template-areas: 'photo details' 'services services' 'tarif tarif';
				background: #f8f8f8;
				padding: 1rem 1rem 2rem 1rem;
				border-radius: 15px;

				&::before {
					content: '';
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 18px;
					background-color: var(--mc-primary);
					transform: rotate(-0.9deg) translateY(10px);
				}
			}
			& .resume_photo{
				grid-area: photo;
			}
			& .resume_services{
				grid-area: services;
			}
			& .resume_details{
				grid-area: details;

				& .titre_produit{
					font-size: 1.2em;
					font-weight: bold;
				}
			}
			& .resume_prix{				
				grid-area: tarif;
				display: flex;
				flex-direction: column;

				& .titre{
					order:1;
					font-size: 1.2rem;
					font-weight: 700;
					text-align: right;
				}
				& .valeur{
					order:2;
					font-size: 2rem;
					font-weight: bold;
					text-align: right;
					color: var(--mc-primary);
				}
				& .valeur_ht{
					order:3;
					display: none;
					text-align: right;
				}
				& .note{
					order:4;
					margin-top: 2rem;
					text-align: center;
					font-size: 0.8rem;
				}
				&.resume_prix_utilitaire{
					& .valeur{						
						order:3;
						font-size: 1rem;
						font-weight: normal;
					}
					& .valeur_ht{
						order:2;
						display: initial;
						font-size: 2rem;
						font-weight: bold;
						text-align: right;
						color: var(--mc-primary);
					}
				}
			}
			& .options .option{
				display: flex;
				gap: 1rem;
			}
		}
		& .form_devis_header{
			padding:1em;
			font-size:0.9em;
		}

		& .form_devis{
			& .cadre_submit{
				display: flex;
				justify-content: center;
			}
		}

		@media(max-width:999px){
			& .content{
				display: grid;
				grid-template-columns: auto;
				gap: 1rem;
			}
			& .resume {

				& .wrapper{
					display: flex;
					flex-direction: column;
				}
			
			}
		}
	}
/* FORM */

	form {

		& fieldset{
			padding-top: 1rem;
		}

		& .ligne{		
			position: relative;
			display: flex;
			flex-direction: column;
			margin-bottom: 1em;

			&:has(input[required]) label::after {
				content: '*';
			}
			& .champ{
				display: flex;
				flex-direction: column-reverse;
				width: 100%;

				&.champ_center{
					align-items: center;
				}
				&.champ_fullw{
					width: 100%;
				}
			}
			& label{
				display: block;
				margin-top: 0.75em;
				font-size: 0.9em;
			}
			& input:not([type='checkbox']){
				color: var(--mc-darkgrey);
				display: inline-flex;
				font-size: 14px;
				line-height: 1.3333333;
				transition: all .3s ease;
				border: 1px solid #b3b2c2;
				background: #fff 0 0 no-repeat padding-box;
				border-radius: 8px;
				height: 50px;
				padding: 0 40px 0 20px;
				font-family: var(--mf-primary);
			}
			& textarea{		
				font-family: var(--mf-primary);
				color: var(--mc-darkgrey);
				display: inline-flex;
				font-size: 14px;
				line-height: 1.3333333;
				transition: all .3s ease;
				border: 1px solid #b3b2c2;
				background: #fff 0 0 no-repeat padding-box;
				border-radius: 8px;
				height: 50px;
				padding: 10px 40px 0 20px;
			}
			& .cp{
				width:140px;
			}
			& *:focus:invalid {
				color: var(--mc-primary);
				border: none;
				border-bottom: 1px solid var(--mc-primary);
			}
		}
		& .ligne,
		& .ligne-inline > div{
			display: flex;
			flex-flow: row wrap;
			gap:0.5em;
		}
		& .ligne-inline:not(.ligne-inline2) div:nth-child(2){
			flex-grow: 1;
		}
		& .ligne_full{
			width: 100%;
		}
		& .ligne_submit{
			justify-content: center;
			text-align: center;
			margin: 2em;
		}

		&.form_anim{
			& .ligne input{
				color: var(--mc-darkgrey);
				display: inline-flex;
				font-size: 14px;
				line-height: 1.3333333;
				transition: all .3s ease;
				border: 1px solid #b3b2c2;
				background: #fff 0 0 no-repeat padding-box;
				border-radius: 8px;
				height: 50px;
				padding: 0 40px 0 20px;

				&:focus-visible{
					box-shadow: 0 1px 1px rgba(0,0,0,.2);
				}
			}
			& .champ{
				position: relative;
			}
			& label {
				color: var(--mc-darkgrey);
				cursor: pointer;
				display: inline-block;
				font-weight: 400;
				margin: 0;
				position: absolute;
				transition: all .2s ease;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 90%;
				letter-spacing: 0;
				top: 50%;
				left: 20px;
				translate: 0 -50%;
				font-size: 14px;
				opacity: 1;
				pointer-events: none;
			}
			& select {
				color: var(--mc-darkgrey);
				display: inline-flex;
				font-size: 14px;
				line-height: 1.3333333;
				transition: all .3s ease;
				border: 1px solid #b3b2c2;
				background: #fff 0 0 no-repeat padding-box;
				border-radius: 8px;
				height: 50px;
				padding: 0 40px 0 20px;
				appearance:none;
			}

			& .ligne select ~ label,
			& .ligne input:focus-visible ~ label,
			& .ligne textarea:focus-visible ~ label,
			& input:not(:placeholder-shown) ~ label,			
			& .ligne textarea:not(:placeholder-shown) ~ label{
				color:var(--mc-primary);
				top:0;
				left: 20px;
				background:#fff;
				padding:5px 10px;
				font-size:12px;
				text-align:center;
				translate: -10px -50%;
			}
			& .ligne select ~ i.icon,
			& .ligne input ~ i.icon{
				position: absolute;
				top: 50%;
				right: 20px;			
				translate: 0 -50%;
				color:#ababab;
				cursor:pointer;
			}
		}
		& .confidentialite{
			font-size: 0.8rem;
		}

	}	

	@media (max-width: 768px) {
		form .ligne, form .ligne-inline > div{
			flex-direction: column;
		}
		form.form_w_pwdlvl .passwd_level{
			right: 1em;
		}
		form.form_anim .ligne select ~ i.icon, form.form_anim .ligne input ~ i.icon{
			right: 2em;
		}
		form .ligne_submit{
			margin: 2em 0;
		}
	}

/* TEMOIGNAGES */
	
	
	.liste_temoignage{
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
		gap: 2rem;
		margin-top: 2rem;

		& .item{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-areas: 
				'visuel'
				'auteur'
				'titre'
				'texte'
				'modele'
			;
			gap: 0.5rem;

			& .visuel {
				grid-area: visuel;
				display: none;
				justify-content: center;
				margin-bottom: 0.5rem;

				& img{
					width: 150px;
					height: 100px;
					object-fit: scale-down;
				}
			}
			& .auteur{
				grid-area: auteur;
				font-weight: 600;

				& .note{
					color:goldenrod;
					
					& i{
						font-size: 1.4rem;
					}
				}

				& .date{
					color:var(--mc-secondary);
					font-style: italic;
					font-size: 0.8rem;
					font-weight: 400;
				}
			}
			& .titre{
				grid-area: titre;
				display: none;
			}
			& .texte{
				grid-area: texte;
				padding: 1rem;
				font-style: italic;
				border:1px solid #CCC;
				border-radius: 10px;

				& a{
					color: var(--mc-primary);
				}
			}
			& .modele{
				grid-area: modele;
				font-size: 0.8rem;
			}
		}
	}

	.pg_temoignages {
		& .liste_temoignage {
			overflow: hidden;/* Prevent AOS overflow*/

			/*& li {
				padding: 0;
				padding: 1rem 2rem;
				font-style: italic;
				border-bottom: 1px solid #999;
				display: flex;
				align-items: center;
				flex-direction: column-reverse;
				gap: 1em;

				&:target{
					outline: 2px solid var(--mc-primary-light);
					border-radius: 20px;
					background: var(--mc-grey-light-light);
					scale: 1.05;
				}

				& .titre {
					display: block;
					margin-top: 1.5em;
					font-style: normal;
					font-weight: normal;
				}
				& .texte {
					font-style: normal;
					& .titre{
						font-weight: 700;
					}
					& .infos{						
						font-size: 0.9rem;
					}
					& a{
						color:var(--mc-primary-dark);
					}
				}
				& blockquote {
					quotes: '\201c' '\201d';
					display: flex;
					align-items: center;
					padding: 1em;
					position: relative;
					font-size: 0.9em;
					line-height: 1.5em;
					border-radius: 5px;
					font-style: italic;
					background-color: #f8f8f8;
					border-radius: 10px;

					&::before {
						content: open-quote;
						position: absolute;
						top: 0;
						left: 0;
						translate: -150% 0;
						font-size: 2.5rem;
						font-weight: bold;
						color:var(--mc-primary);
					}
					&::after {					
						content: close-quote;
						position: absolute;
						bottom: 0;
						right: 0;
						translate: 125% 0;
						font-size: 2.5rem;
						font-weight: bold;
						color:var(--mc-primary);
					}
				}
			}*/
		}
		& .bloc_filtres {
			display: none;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 1px solid var(--mc-black);
			padding: 1em;

			& .wrapper{
				display: flex;
				align-items: center;
				gap:1rem;
				width: min(500px, 100%);

				& > div{
					white-space: nowrap;
				}
			}
		}
	}


	.pg_temoigner{
		& .wrapper{
			width:min(800px, 100%);
		}
	}

	

	@media (max-width: 999px) {
		.pg_temoignages {
			& .liste_temoignages {
				grid-template-columns: auto;
				& li{
					flex-direction: column;
				}
			}
		}
	}
/* RAPPEL */

	.bloc_rappel{
		width:500px;

		& .ligne{
			width: min(300px, 100%);
		}
	}
/* BACK TO TOP */

	#back-to-top {
		position: fixed;
		z-index: 20;
		bottom: 1rem;
		right: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 36px;
		height: 36px;
		font-size: 1rem;
		font-weight: 700;
		text-decoration: none;
		transition: all 0.25s ease;
		background-color:var(--mc-primary);
		color: var(--mc-over-primary);
		visibility: hidden;
		opacity: 0;

		&.show{
			visibility: visible;
			opacity: 1;			
		}

		&:hover{
			scale:1.05;
		}
	}

/* OVERRIDE */

#baguetteBox-overlay .full-image img{
	max-width: 90% !important;
	max-height: 90% !important;
}

/**/