@import url('https://fonts.googleapis.com/css2?family=Montserrat: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:var(--_textdecoration-a);
		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;
	}

	figure{
		& figcaption{
			font-size: 0.9rem;
			text-align: center;
		}
	}

	img {
		height: auto;
		font-style: italic;
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: var(--img-fit, contain);

		&[onclick]{
			cursor: pointer;
		}
	}


	h1, .h1{
		color:var(--c-title-h1);
		font-size: clamp(32px, 3.5vw, 36px);
		line-height: 1em;
		text-transform: uppercase;
		letter-spacing: -2px;
		text-wrap: balance;
		margin-bottom: 0.5rem;
	}
	.h2, h2 {
		color:var(--c-title-h2);
		font-size: clamp(26px,3vw,30px);
		line-height: 1em;
		margin:2rem 0 0.5rem 0;
		letter-spacing: -2px;
		text-wrap: balance;
		margin-bottom: 0.25rem;
	}
	.h3, h3{
		font-family: var(--mf-primary);
		color:var(--c-title-h3);		
		font-size: clamp(20px,1.5vw,24px);
		line-height: 1em;
		letter-spacing: -1px;
		text-wrap: balance;
		margin-bottom: 0.25rem;
	}
	.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;
	}
	p{
		margin-top: 0;
	}

	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);
	}

	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;}

	/* grilles auto... */
	.auto-grid{
		--min-column-size:22rem;
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));
	}
	.flexible-grid{
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;

		& > *{
			flex: 1;
		}
	}
	.scroll-snap-grid{
		--gap: 1rem;
		display: grid;
		gap: var(--gap);
		grid-auto-flow: column;
		grid-auto-columns: 33%;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		scroll-padding: var(--gap);

		& > *{
			scroll-snap-align: start;
		}
	}

	.oy_hidden {
		overflow-y: hidden;
	}

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

		&.dialog-sm{
			max-width: 768px;
			height: fit-content;
		}
		&.dialog-md{
			max-width: 999px;
		}
		&.dialog-lg{
			max-width: 1280px;
		}
		& .main_dialog_content{
			overflow-y: scroll;
			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;
			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;
		}
		@media (max-width:480px) {
			width: 85vw;
			min-width: unset !important;
		}
	}

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

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

		& .container{
			width:min(var(--w-container), 100%);	
		}
	}

	.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;
		}	
	}

/* HEADER */

	#header {

		& .header__wrapper{

			& .header__top{
				--_minh:35px;
				--_clr-a:#FFF;
				--_clr-a-hover:var(--mc-secondary);
				display: flex;
				align-items: center;
				min-height: var(--_minh);
				padding: 0.25rem 1rem;
				background-color: var(--mc-primary-dark);

				& .container{
					display: flex;
					align-items: center;
					justify-content: space-between;

					& div:nth-child(1){
						color:#FFF;
						font-weight: lighter;
						font-size: 0.9rem;
						padding-left: 70px;
					}
					& div:nth-child(2){
						display: flex;
						align-items: center;
						justify-content: end;
						gap: 1rem;
					}
				}
			}
			& .header__body{
				--_border-bottom: 5px;
				position: relative;
				border-bottom: var(--_border-bottom) solid var(--mc-primary);
				
				& > .wrapper{
					display: grid;
					grid-template-columns: 150px 1fr;
					align-items: end;
					padding-top: 0;
					padding-bottom: 0;
				}

				& .bloc_logo{
					display: flex;
					justify-content: start;
					padding-top: 1.5rem;
					padding-bottom: 0.5rem;

					& img {
						display: block;
						height: 70px;
						object-fit: contain;
					}
				}
				& .slogan{

					& img{
						position: absolute;
						top: 0;
						width: 150px;
						aspect-ratio: 1;
						object-fit: scale-down;
						translate:-50% 10%;
					}
				}

				& .coords{
					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.html) 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;
					}
					}
				}

			}			
		}
		
		& .socials_mobile{
			display: none;
		}
		& .socials{
			display: flex;
			flex-flow: row wrap;
			gap:1rem;
			margin: 0;
		}

		& .nav_mobile{
			display: none;
			padding-right: 1rem;

			& a{
				font-size: 1.5rem;
			}
		}

		@media (max-width:1200px){
			
			& .nav_mobile{
				display: flex;
				gap: 2rem;
				justify-content: end;
			}
			& .header__wrapper{
				& .header__top{
					& .container{
						& div:nth-child(1){
							padding-left: unset;
						}
					}
				}
				& .header__body{
					& > .wrapper{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					& .bloc_logo{	
						padding-inline: 2rem;
					}
				}
			}

		}
		@media (max-width:768px){
			& .header__wrapper{	
				& .header__top{
					display: none;
				}			
				& .header__body{
					& .bloc_logo{						
						justify-content: start;
						padding: 0;
						
						& .logo {
							padding: 0.5rem;

							& img{
								width:unset;
							}
						}
					}
					
					& .slogan{
						& img{
							display: none;
						}
					}
				}
			}
			& .coords {
				display: none;
			}
			/* & .socials_mobile{
				display: unset;
			}
			& .socials{
				position: absolute;
				top: calc(var(--_minh) + 0.25rem);
				right: 0;
				z-index: 101;
				translate: 99% 0;
				display: flex;
				flex-flow: column;
				gap: 0.25rem;
				margin-top: 0;
				padding: 1rem;
				background-color: #fff;

				&.show{
					translate: 0 0;

					& a{
						color:var(--mc-primary);
					}
				}
			} */
			
		}
	}


/* FOOTER */

	.footer{
		--_h_sep:20px;
		--c-title-h1:var(--mc-over-primary);
		--_clr-a:#FFF;
		position: relative;
		margin-top: 0;
		background:linear-gradient(to top, var(--mc-primary-dark) 0%, var(--mc-primary) 100%);
		color:var(--mc-over-primary);

		& .topfooter{
			position: relative;
			height:300px;
			background: url(../images/topfooter.webp);
			background-size: cover;
			--c-title:var(--mc-white);
			isolation: isolate;
			
			&::before{
				content: '';
				display: block;
				position: absolute;
				inset:0;
				z-index: -1;
				background-color: rgba(0, 0, 0, 0.7);
			}		
			& .wrapper{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;

				& .titre{
					font-weight: 700;
					color: var(--c-title);
					font-size: 2rem;
				}
				& .texte{
					font-weight: 600;
					font-size: 1.5rem;
				}
				& .lien{
					margin-top: 1rem;
				}
			}
		}
		& .middlefooter{
			& .wrapper{

				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-areas:
					'section2 infos'
				;
				gap:2rem;
				padding: 2rem 0 2rem 0;

				& .box_pages_section{

					& .h5{
						margin-top: 0;
					}

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

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

						& li{
							&::before{
								content:'>';
								display: inline-flex;
							}
						}
					}

				}
				& .box_infos{
					grid-area: infos;

					& .nom{
						font-size: 1.5rem;
						font-weight: 600;
					}
					& .tel{
						display: flex;
						align-items: center;
						gap: 1rem;
						

						& a{
							font-size: 1.5rem;
							font-weight: 600;
						}
					}
					& .infos__legales{
						display: grid;
						margin-top: 0.25rem;
						font-size: 0.9rem;
					}
				}
			}
		}
		& .bottomfooter{			
			--_clr-a-hover:var(--mc-secondary);

			& .socials{
				display: flex;
				flex-direction: row;
				justify-content: center;
				width: 100%;
				gap: 2rem;
				font-size: 1.5rem;
			}
		}

		@media (max-width: 999px) {
			& .topfooter{
				&::after{
					--_bg-direction:to top;
				}
			}
			& .middlefooter{				
				& .wrapper{				
					grid-template-columns: 1fr;
					grid-template-areas:
					'section2'
					'section3'
					'infos'
					;
					place-items: center;

					& .box_infos{
						& .tel{
							margin: 2rem;
							justify-content: center;
						}
					}

				}
			}
		}
		@media (max-width: 768px) {
			& .wrapper{				
				grid-template-columns: auto;
				grid-template-areas:
				'section2'
				'section3'
				'infos'
			;
			justify-content: center;
			text-align: center;
			}
		}
	}

	.copyright{
		& .wrapper{
			padding: 1rem 0;
			text-align: center;

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

		@media (max-width: 768px) {
			font-size: 0.8rem;
			padding-bottom: 2rem;
		}
	}

/* NAVIGATION */

	@media (min-width:1200px) {
		#section-nav{			
			background-color: var(--mc-primary);
		}
		.main_nav{
			position: relative;
			display: flex;
			justify-content: start;
			align-items: center;
			margin-top: 0px;
			/*margin-bottom: 60px;*/

			& .main_nav_toggle{
				display: none;
			}

			& > ul {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap:1.5rem;
				width: 100%;
				margin: 0;

				& > li {
					--_clr-a:var(--mc-text);
					display: inline-flex;
					position: relative;
					line-height: 22px;
					text-align: left;
					vertical-align: top;
					border: 0px solid #999;
					margin-right: 15px;
					
					&::after{
						content: '';
						display: block;
						width: 100%;
						height: 2px;
						position: absolute;
						top: 0;
						background-color: var(--mc-secondary);
						opacity: 0;
						visibility: hidden;
						translate: 0 20px;
						transition: all 0.5s ease;
					}

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

						&:not(.special, .logo) {
							padding-bottom: 1rem !important;
						}						
						&.special{
							padding: 1.5rem 2rem 1rem;
							background-color: var(--mc-primary);
							color: var(--mc-over-primary);
						}
						& span {
							white-space: nowrap;

							& span.soustitre{
								flex-direction: column;
								align-items: start;
								line-height: 1em;
							}
						}
						& > span {
							display: flex;
							flex-direction: column;
						}
					}
					&:has(ul){
						& > a::after {
							content: '\f107';
							font-family: 'Fontawesome';
							vertical-align: unset;
							border: 0 none;
							margin-left:0.25rem;
						}
					}
					& > ul {
						position: absolute;
						z-index: 1000;
						bottom: 0;
						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) translateY(100%);

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

							&:hover {
								background-color: transparent;

								& > ul {
									transform: translateX(0px);
									visibility: visible;
									opacity: 1;
								}
							}

							& a {
								display: block;
								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:hover > a::before,
		.main_nav ul > li > a.active::before {
			visibility: visible;
			width: 100%;
			/*-webkit-transform: scaleX(1);
			transform: scaleX(1);*/
		}


		.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{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 2000;
			padding: 60px 1rem 1rem;
			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{
				translate: 10% 0;
				opacity: 1;
				visibility: visible;
			}
			& .main_nav_toggle{
				display: flex;
				justify-content: end;
				width:calc(100% - (2 * 10%));
				font-size: 2rem;
			}
			
			& ul{
				padding: 0;
			}
			& > ul{
				display: flex;
				flex-direction: column;

				& > li{


					& a{
						display: block;
						padding:0.25rem;
					}

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

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

	}

/* SLIDER */

	.slider{
		--swiper-pagination-color:var(--mc-primary-light);
		--swiper-pagination-bullet-inactive-color:var(--mc-grey);
	}

	#sliderHome{
		--_h_slider:70vh;
		--_w_form:100%;
		position: relative;
		isolation: isolate;
		
		&::before{
			content:'';
			position: absolute;
			z-index: 1;
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, var(--mc-primary) 50%, #FFF 80%);
		}
		&::after{
			content: '';
			position: absolute;
			z-index: 2;
			bottom: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 50px;
			background-color: var(--mc-primary-dark);
			clip-path: polygon(0 0, 100% 60%, 100% 100%, 0% 100%);
		}
		& .bloc_slider{
			position: relative;
			width: 100%;

			& .goToContent{
				position: absolute;
				bottom: 1rem;
				left: 0;
				right: 0;
				z-index: 1000;
				display: flex;
				align-items: center;
				justify-content: center;

				& a{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 40px;
					background-color: #fff;
					border-radius: 10px;
				}
			}
		}		
		& > .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: transparent;
				background-repeat: no-repeat;
				background-size: cover;

				
				&::before{
					content:'';
					position: absolute;
					z-index: 3;
					display: block;
					width: 100%;
					height: 100%;
					background: linear-gradient(to right, var(--mc-primary) 0%, transparent 50%, #FFF 100%)
				}
	
				& img{
					--img-fit:cover;
					width: 100%;
					height: var(--_h_slider);
				}
	
				& .item_wrapper{
					position: relative;
					height: var(--_h_slider);
				}
	
				& .caption{
					height: var(--_h_slider);
	
					& .caption_inner{
						position: absolute;
						z-index: 10;
						left:1rem;
						top: 30%;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: start;
						padding-left: 2rem;
		
						& .surtitre{
							max-width: 70%;
							margin-bottom: 1rem;
							font-size: clamp(1rem,2.5vw,1.2rem);
							line-height: 1.1em;
							font-weight: 600;
							color:#FFF;
							text-shadow: 1px 2px 10px #000;

							&::before{
								content: '';
								display: inline-block;
								width: 15px;
								height: 15px;
								margin-right: 0.5rem;
								background-color: var(--mc-secondary);
							}
						}
						& .titre{
							max-width: 70%;
							font-size: clamp(2rem,5vw,3rem);
							line-height: 1.1em;
							font-weight: 800;
							color:#FFF;
							text-shadow: 1px 2px 10px #000;
							/*Animation*/
								opacity: 0;
								transform: translateY(1rem);
  								transition: opacity 1s ease, transform 1s ease;
						}
						& .texte{
							max-width: 70%;
							font-size: clamp(1rem,3vw,1.8rem);
							color:#FFF;
							line-height: 1.2em;
							text-shadow: 1px 2px 10px #000;
							/*Animation*/
								opacity: 0;
						}
						& .liens{
							margin-top: 1rem;
							margin-bottom: 3rem;
							max-width: 70%;
							/*Animation*/
								opacity: 0;
						}
					}
				}

				&.swiper-slide-active{
					
					& .caption{
						background-color: red;
						
						& .caption_inner{
							& .titre{
								opacity: 1;
								transform: translateY(0px);
							}
							& .texte{
								opacity: 1;
							}
							& .liens{
								opacity: 1;
							}
						}
					}
				}
			}
			& .swiper-button-next::after, & .swiper-button-prev::after{
				display: none;
			}
			& .autoplay-progress {
				position: absolute;
				right: 16px;
				bottom: 16px;
				z-index: 10;
				width: 48px;
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				color: var(--swiper-theme-color);
			  }
		  
			& .autoplay-progress svg {
				--progress: 0;
				position: absolute;
				left: 0;
				top: 0px;
				z-index: 10;
				width: 100%;
				height: 100%;
				stroke-width: 4px;
				stroke: var(--swiper-theme-color);
				fill: none;
				stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
				stroke-dasharray: 125.6;
				transform: rotate(-90deg);
			}
		}
		
		@media (max-width:999px){
			--_h_slider: 40vh;

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

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

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

							& .caption_inner{
								inset:0;
								width: unset;
								justify-content: center;
								align-items: center;
								margin: 0;
								padding: 0;

								& *{
									text-align: center;
									max-width: unset;
								}
								& .lien{
									display: none;
								}
							}
						}
					}
					& .autoplay-progress{
						display: none;
					}
				}
			}
		}

	}

/* BLOC INTRO HOME */

	.banner_info {
		position: relative;
		padding: 2rem;
		background-color: #f5f5f5;	

		& .inner {	
			display: grid;
			grid-template-columns: 210px auto;
			grid-template-rows: auto;
			grid-template-areas: 
				'livraison titre'
				'livraison soustitre'
				'livraison avantages'
			;
			width: 80%;
			margin: auto;

			& .livraison{
				grid-area: livraison;
				& img{
					rotate:-10deg;
				}
			}
			& .titre {
				grid-area: titre;
				text-align: center;
				font-size: 35px;
				text-transform: uppercase;
				letter-spacing: -1.5px;
				font-weight: bold;
				line-height: 1.1em;
			}
			& .soustitre {
				grid-area: soustitre;
				text-align: center;
				font-size: 24px;
				text-transform: uppercase;
				letter-spacing: -1px;
				line-height: 1.1em;
			}
			& .avantages {
				grid-area: avantages;
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-wrap: wrap;
				margin-top: 15px;
				font-family: var(--mf-cursive);

				& li {
					font-size: 1.5rem;
					padding-bottom: 5px;
					border-bottom: 2px solid #f8f8f8;
					transition: 0.5s;
					letter-spacing: -0.2px;

					&:hover {
						border-bottom: 2px solid var(--mc-primary);
						cursor: default;
					}

					& .fa{
						color:var(--mc-primary);
					}
				}
			}
		}
		

		@media (max-width:999px){
			& .inner{
				width: 100%;
			}
		}
		@media (max-width:768px){
			& .inner{
				display: flex;
				flex-direction: column;
				align-items: center;
				grid-template-areas: unset;
				width: 100%;
				
				& .titre {
					font-size: 25px;
				}
				& .soustitre {
					font-size: 12px;
					line-height: 2em;
				}
				& .avantages{
					flex-direction: column;
				}
			}
		}
	}
	
	.page_home .banner_info .titre span,
	.page_home .banner_info .soustitre span {
		color: #ea202e;
	}

/* PAGES */

	.pg{
		padding-bottom: 3rem;	

		:has(.surtitre) .h2{
			margin-top: 0;
		}
		& h1{
			display: flex;
			align-items: center;
			gap: 0.5rem;

			&:not(:empty)::before{
				content: '';
				display: inline-flex;
				background: url(../images/custom.svg) no-repeat center;
				width: 30px;
				height: 30px;
				background-size: contain;
			}
		}
		& h3{
			--c-title-h3:var(--mc-primary);
			display: flex;
			align-items: baseline;
			gap: 0.5rem;
			margin-bottom: 0.5rem;
			font-weight: 500;

			&:not(:empty)::before{
				content: '';
				display: inline-flex;
				width: 10px;
				height: 10px;
				background-color: var(--mc-primary);
			}
		}

		& .pg_header{
			--_height:35vh;
			position: relative;
			height: var(--_height);
			
			&::after{
				content: '';
				position: absolute;
				z-index: 2;
				bottom: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 50px;
				background-color: var(--mc-primary-dark);
				clip-path: polygon(0 0, 100% 60%, 100% 100%, 0% 100%);
			}
			& img{
				width:100%;
				height: var(--_height);
				object-fit:cover;
			}
		}

		& .surtitre{
			display: flex;
			align-items: center;
			font-weight: 500;
			color: var(--mc-primary);

			&::before{
				content: '';
				display: inline-block;
				width: 15px;
				height: 15px;
				background-color: var(--mc-secondary);
				margin-right:0.5rem;
			}
		}

		@media (max-width:768px) {
			& .pg_header{
				--_height:15vh;
			}
			:has(.surtitre) .h2{
				margin-top: 0.5rem;
				margin-bottom: 1rem;
			}
		}
	}	

	#contenu_page{
		min-height: 50vh;

		& .texte{			
			color:var(--c-text);

			& p{				
				color:var(--c-text);
			}
			& a{
				--_clr-a:var(--mc-primary-dark);
				text-decoration: underline;

				&:hover{
					text-decoration: none;
				}
			}
			& ul{
				list-style-type: disc;
				padding-left: 1rem;
				margin-left: 1rem;
			}
		}
	}

	.body_home{
		/* & #header{
			& .header__wrapper{
				& .header__body{
					& > .wrapper{
						& .bloc_logo{					
							justify-content: center;
						}
					}
				}
			}
		} */
		& .contenu{
			background:linear-gradient(to bottom, #F8F8F8, #FFFFFF 100px);
		}
	}
	.page_home{

		& .h2{
			--c-title-h2:var(--mc-primary);
		}

		& #home__avis{
			background-color: #f8f8f8;
			padding-top: 3rem;
			padding-bottom: 5rem;

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

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

				& .item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;

					& .visuel {
						display: flex;
						justify-content: center;
						margin-bottom: 0.5rem;

						& img{
							width: 150px;
							height: 100px;
							object-fit: scale-down;
						}
					}
					& .auteur{
						padding: 1rem;
						color:var(--mc-primary);
					}
				}
		}
		}

	}

	

/* BLOC PAGE */

	.pg_home .home_section .home_section_ligne_item{
		position: relative;
		overflow: hidden;
		/* overflow-x: hidden; */
		z-index: 2;
		--c-text:var(--mc-text);
	}

	.home_section .home_section_ligne:first-child{padding-top:0;}
	.home_section .home_section_ligne_item.format_1{padding-bottom: 0;}


	/* FORMAT 1 
		TITRE TEXTE SIMPLE */

		.format_1{padding: 2em 0;}
		.format_1 .soustitre{font-weight: bold;}
	/* FORMAT 4 
		FORMULAIRE DE CONTACT */
		.item-format-contact{
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-template-rows: repeat(4,auto) 1fr;
			grid-template-areas: 
				'surtitre form'
				'titre form'
				'soustitre form'
				'texte form'
				'lien form'
			;
			gap:1rem;

				&.form_pos_left{
					grid-template-areas: 
					'form surtitre'
					'form titre'
					'form soustitre'
					'form texte'
					'form lien'
				};
				&.form_pos_top{
					grid-template-areas: 
					'form'
					'surtitre'
					'titre'
					'soustitre'
					'texte'
					'lien'
				};
				&.form_pos_bottom{
					grid-template-areas: 
					'surtitre'
					'titre'
					'soustitre'
					'texte'
					'lien'
					'form'
				};
		
			& .surtitre{
				grid-area: surtitre;
			}
			& .titre{
				grid-area: titre;
			}
			& .soustitre{
				grid-area: soustitre;
			}
			& .texte{
				grid-area: texte;
			}
			& .lien{
				grid-area: lien;
			}
			& .form{
				grid-area: form;
				padding: 0;
			}

			@media (max-width: 768px) {
				display: flex;
				flex-direction: column;

				& .form{
					width: min(450px, 100%);
					margin-inline:auto;
				}
			}
		}
	/* FORMAT 6 
		BANDEAU IMAGE */
		.item-format6{
			position: relative;
			--c-text:white;

			& .wrapper{
				position: relative;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				height: var(--height,300px);
				background-color: #DDD;
				isolation: isolate;
			}
			& .visuel{
				position: absolute;
				z-index: -1;
				display: block;
				width: 100%;
				height: 100%;
				&::before{
					content:'';
					position: absolute;
					display: block;
					width: 100%;
					height: 100%;
					background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);

				}
				& img{
					width: 100%;
					height: 100%;
					object-fit: var(--img-fit);
					object-position: bottom center;
				}
			}
			& .titre{
				color:var(--c-text);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			& .texte{				
				color:var(--c-text);
			}
		}

	/* FORMAT 2 
		TITRE + VISUEL DROITE/GAUCHE */
		.home_section .item-format2{
			/* display: grid; */
			gap: 2.5rem;

			& .bloc_contenu{
				display: flex;
				flex-direction: column;
	
				&.top-left{
					justify-content: start;
					align-items: start;	
				}
				&.top-center{
					justify-content: start;
					align-items: center;	
				}
				&.top-right{		
					justify-content: start;
					align-items: end;
				}
				&.center-left{
					justify-content: center;
					align-items: start;	
				}
				&.center-center{
					justify-content: center;
					/* align-items: center;	 */
				}
				&.center-right{
					justify-content: center;
					align-items: end;		
				}
				&.bottom-left{
					justify-content: end;
					align-items: start;	
				}
				&.bottom-center{
					justify-content: end;
					align-items: center;		
				}
				&.bottom-right{
					justify-content: end;
					align-items: end;	
				}
			}
			& .titre{
				/* color: var(--c-title); */
				grid-area: 1 / 2 / 2 / 3;
			}
			& .soustitre{
				margin:1em 0;
				font-size: 1.3em;
				grid-area: 2 / 2 / 3 / 3;
			}
			& .visuel{
				grid-area: 1 / 1 / 4 / 2;			
				display: grid;
				width: 100%;
				height: 100%;
				justify-content: center;
				align-items: center;

				img{
					width: var(--img-width, 100%);
					height: var(--img-height, auto);
					object-fit: var(--img-fit, scale-down);
				}
	
				&.top-left{			
					align-items: start;	
					justify-content: start;
				}
				&.top-center{		
					align-items: start;		
					justify-content: center;
				}
				&.top-right{		
					align-items: start;		
					justify-content: end;
				}
				&.center-left{			
					align-items: center;	
					justify-content: start;
				}
				&.center-center{		
					align-items: center;		
					justify-content: center;
				}
				&.center-right{		
					align-items: center;		
					justify-content: end;
				}
				&.bottom-left{			
					align-items: end;	
					justify-content: start;
				}
				&.bottom-center{		
					align-items: end;		
					justify-content: center;
				}
				&.bottom-right{		
					align-items: end;		
					justify-content: end;
				}
	
			}
			& .texte{
				grid-area: 3 / 2 / 4 / 3;
			}
			& .lien{
				grid-area: 4 / 1 / 5 / 5;
				margin:1em 0;
			}

			@media (max-width: 1200px) {
				& .visuel {
					& img{
						height: min(250px, 40vh) !important;
					}
				}
			}
		}		

		/*img à droite*/
			.home_section .item-format2-droite{
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 1em;
				row-gap: 0.5em;
				
				& .titre{
					grid-area: 1 / 1 / 2 / 3;
				}
				& .soustitre{
					margin:0 0 1em 0;
					font-size: 1.3em;
					grid-area: 2 / 1 / 3 / 3;
				}
				& .visuel{
					grid-area: 1 / 2 / 4 / 3;
					display: grid;
					justify-content: center;
				}
				& .texte{
					grid-area: 3 / 1 / 4 / 2;
				}

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

		/*img au dessus*/
			.home_section .item-format2-dessus{
				display: grid;
				grid-template-columns: 1fr;
				column-gap: 1em;
				row-gap: 0.5em;
				
				& .titre{
					margin-top:0.5em;
					grid-area: 2 / 1 / 3 / 3;
				}
				& .soustitre{
					margin: 0;
					font-size: 1.3em;
					grid-area: 3 / 1 / 3 / 3;
				}
				& .visuel{
					grid-area: 1 / 1 / 2 / 3;
				}
				& .texte{
					grid-area: 4 / 1 / 4 / 3;
				}
			}
		/*img entre titre et texte*/
			.home_section .item-format2-entre{
				display: grid;
				grid-template-columns: 1fr;
				column-gap: 1em;
				row-gap: 0.5em;
				
				& .titre{
					margin-top:0.5em;
					grid-area: 1 / 1 / 2 / 3;
				}
				& .soustitre{
					margin: 0;
					font-size: 1.3em;
					grid-area: 3 / 1 / 3 / 3;
				}
				& .visuel{
					grid-area: 2 / 1 / 3 / 3;
				}
				& .texte{
					grid-area: 4 / 1 / 4 / 3;
				}
			}
		
		/*img en dessous*/
			.home_section .item-format2-dessous{
				display: flex;
				flex-direction: column;
				column-gap: 1em;
				row-gap: 0.5em;
				
				& .titre{
					margin-top:0.5em;
					order: 1;
				}
				& .soustitre{
					order: 2;
					margin: 0;
					font-size: 1.3em;
				}
				& .visuel{
					order: 4;
				}
				& .video{
					order: 4;
				}
				& .texte{
					order: 3;
				}
			}
		

		/* STRUCTURE AVEC COLONNES */
			.home_section {
				& .item-format2.col_structure{
					display: flex;
					flex-flow: row wrap;
				}

				@media (max-width:768px) {
					& .item-format2.col_structure{
						flex-direction: column !important;
					}
				}
			}
			.home_section .item-format2.col_1-1{
				flex-flow: row wrap;
			}
			.home_section .item-format2.col_1-1 > div:nth-child(1){
				flex:1;
			}
			.home_section .item-format2.col_1-1 > div:nth-child(2){
				flex:1;
			}
			.home_section .item-format2.col_2-1 > div:nth-child(1){
				flex:1;
			}
			.home_section .item-format2.col_2-1 > div:nth-child(2){
				flex:3;
			}
			.home_section .item-format2.col_1-2 > div:nth-child(1){
				flex:3;
			}
			.home_section .item-format2.col_1-2 > div:nth-child(2){
				flex:1;
			}
			/* 66 - 33 */
			.home_section .item-format2.col_66-33 > div:nth-child(1){
				flex:1;
			}
			.home_section .item-format2.col_66-33 > div:nth-child(2){
				flex:2;
			}
			/* 33 - 66 */
			.home_section .item-format2.col_33-66 > div:nth-child(1){
				flex:1;
			}
			.home_section .item-format2.col_33-66 > div:nth-child(2){
				flex:2;
			}
			.home_section .col_structure.item-format2-droite{
				flex-flow: row-reverse wrap;
			}

		.home_section .item-format2-bgimg{
			display:flex;
			flex-direction: column;
			justify-content: center;
			width:100%;
			background-size:cover;
			height:var(--bg-height,300px);
			background-image: var(--bg-image, 'none');
		}
		.home_section .item-format2-bgimg h1{
			padding-left: 0 !important;
		}
		.home_section .item-format2-bgimg .visuel{
			display: none;
		}
		.home_section .item-format2-bgimg .infos{
			width: 100%;
		}
		
	/* FORMAT 3 
		GALERIE PHOTO */

		.format_3 h2{
			margin-bottom: 1em;
			color: var(--c-title);
		}
		.format_3 .lien{text-align: center;}
		.galerie_carousel{overflow-x: hidden;}
		
		.items-format3.type-1{/*mosaique 3 col*/
			display: grid;
			grid-template-columns: repeat(3, 1fr);
		}
		.items-format3.type-1 .item{flex:1;padding:1em;}
		.items-format3 .item img{
			width:100%;
			height:var(--img-h);
			object-fit:cover;
			transition: transform 0.3s;}

		.items-format3.type-2{/*mosaique 4 col*/
			display: grid;
			grid-template-columns: repeat(4, 1fr);
		}
		.items-format3.type-2 .item{
			padding:1em;
		}

		.items-format3.type-3{/*carousel 1/2/3 col*/
			display: flex;
		}
		.items-format3.type-3 .item{
			padding:1em;
		}

		.items-format3 a{
			position: relative;
			display: block;
			overflow: hidden;
			line-height: 0;
		}
		.items-format3 a::before{
			content:'';
			display: block;
			position: absolute;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.3);
			opacity: 0;
			transition: opacity 0.25s ease-in-out;
		}
		.items-format3 a:hover::before{
			opacity: 1;
		}
		.items-format3 a::after{
			content:'\f002';
			font-family: var(--mf-icon-primary);
			position: absolute;
			inset: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			color:#FFF;
			font-size: 5em;
			opacity: 0;
			transition: all 0.25s ease-in-out;
		}
		.items-format3 a:hover::after{
			font-size: 2em;
			opacity: 1;
		}

		.home_section .home_section_ligne .item-common h2{font-size: 26px;letter-spacing: 1px !important;}


	/* FORMAT 5 
		PAVES */
		
		/* VERSION SIMPLE */
		.format_5{
			--bgc:var(--mc-grey-light-light);
			--c:var(--mc-secondary);
			--c-text:var(--mc-text);
			--c-title:var(--mc-primary);
			

			& .simple{
				display: block;
				padding-top: 2rem;
				/* box-shadow: 0 0 0 100vmax;
				clip-path: inset(0 -100vmax); */

				& .h1{
					position: relative;
					padding: 0;
					color:inherit;

					& span{
						position: relative;
						display: inline-flex;
						padding:1rem;
						background-color: var(--bgc);
						z-index: 2;
					}
				}
				& .liste{
					display: grid;
					grid-template-columns: repeat(var(--nb_col),1fr);	
					gap:var(--_gap, 1rem);					
				}
				& .item{
					position:relative;
					display: flex;
					flex: 1;
					flex-direction: column;
					align-items: center;
					padding: 1rem;
					margin: 1em auto;
					text-align: center;
					background-color: #FFF;
					color: var(--c-title) ,var(--mc-primary);
					border: 2px solid #FFF;
					--border-color-hover:#e5e5e5;

					&:hover img{
						opacity: 0.9;
					}
					& .wrapper{
						z-index:2;
					}
					& .span_img{
						order:1;
						position: relative;
						display: flex;
						width: 100%;
						justify-content: center;

						& img{
							display: block;
							width: var(--_img-width,200px);
							height: var(--_img-height,200px);
							object-fit: var(--_img-object-fit,contain);
							margin:auto;
							transition:all 0.3s;
						}
					}
					& .titre{order:2;
						display: block;
						margin-top: 0.25rem;
						padding:0.5em 1em 0.5em 0.5em;
						font-family: var(--mf-primary);
						color:var(--c-title);
						font-size: 1.5em;
						text-align: center;
						line-height: 1em;

						&::before{
							display: none;
						}
					}
					& .texte{order:3;
						color:var(--c-text);
						line-height: 1.2em;
						font-size: 1em;
						padding:0 0.5em 1em 0.5em;
						margin-top: 0;
					}
					& .lien{order:4;
						display: flex;
						justify-content: center;
						padding: 0 auto 2em auto;
						margin-top: auto;
						width: 100%;
					}
				}

				@media (max-width: 990px) {
					& .liste{
						--nb_col:2 !important;
					}
				}
				@media (max-width: 640px) {
					& .liste{
						--nb_col:1 !important;
					}
				}
			}
			& :not(.simple){
				& .lien{
					margin-top: 1rem;
				}
			}


		}

		/* VERSION avancée avec texte hover image*/
		.format_5 .special{display: block;}
		.format_5 .special .item{
			position:relative;
			overflow:hidden;
			text-align: center;
			display: flex;
			flex: 1;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			margin: 1em 2em;
			border-radius: 10px;
		}
		.format_5 .special .liste{display: flex;justify-content: space-around;align-items: start;flex-wrap: wrap;}
		.format_5 .special img{display: block;width: 100%;height: 448px;object-fit: cover;margin:0;transition:all 0.3s;}
		.format_5 .special .infos{position: absolute;bottom:0;left: 0;right: 0;transform: translateY(67%);padding:0.5em;transition: transform 0.3s ease-in-out;
			background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 97%);
			background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 97%);
			background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 97%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
		}
		.format_5 .special .titre{margin-top: 1em;text-transform: uppercase;font-size: 1.3em;color:var(--mc-white);font-family: var(--mf-primary), sans-serif;letter-spacing: 5px;
			
		}
		.format_5 .special .texte{min-height: 60px;line-height: 1.2em;color:var(--mc-white);font-size: 0.9rem;}
		.format_5 .special .lien{margin-top: 1.5em;}
		.format_5 .special .item:hover .infos{transform: translateY(0%);transition: transform 0.3s ease-in-out;}
		.format_5 .special .item:hover img{opacity: 0.9;}




	/* FORMAT 8 */

		.format_8{position: relative;}
		.format_8 h2{
			margin-bottom: 1em;
			color: var(--c-title);
		}
		.format_8 iframe{border:0;}

	/* FORMAT 12 TEMOIGNAGES */
		
		.format_12 .apres_texte{
			display: flex;
			flex-direction: column;

			& .titre{
				order: 1;
			}
			& .texte{
				order: 2;
			}
			& .section_liste_temoignages{
				order: 3;
			}
		}
		.liste_temoignages .item{
			height: auto !important;
			overflow: hidden;
			margin-bottom: 1rem;
		}
		.liste_temoignages .item{
			& .wrapper{
				display: grid;
				grid-auto-columns: max-content max-content 1fr;
				grid-template-areas: 
					'auteur note date'
					'texte texte texte'
				;
				align-items: center;
				gap:1em;
				padding: 1em 2em;
				height: calc(100% - 1em);
				background-color: #f8f8f8;
				border-radius: 15px;
				background: #f8f8f8;
				transition: transform 250ms ease-in-out;
				
			}
			& .note{
				grid-area: note;
				font-size: 1.2rem;
				min-width: 110px;

				& .fa-star{
					color: darkgoldenrod;
				}
				& .half-star{
					color: darkgoldenrod;
				}
			}
			& .auteur{
				grid-area: auteur;
				font-weight: bold;
			}
			& .texte{
				grid-area: texte;
				font-style: italic;
				margin-top: 0;
				font-size: 0.9em;
			}
			& .date{
				grid-area: date;
				font-size: 0.8em;
			}

			@media (max-width: 768px) {
				& .wrapper{
					grid-template-areas: 
						'auteur auteur auteur'
						'note date date'
						'texte texte texte'
					;
				}
			}

		}

		/* COLONNES */
		.liste_temoignages.colonne{
			display: grid;
			gap:1.5em;
		}
		.liste_temoignages.colonne.items_2{
			grid-template-columns: 1fr 1fr;
		}
		.liste_temoignages.colonne.items_3{
			grid-template-columns: 1fr 1fr 1fr;
		}
		.liste_temoignages.colonne.items_4{
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}
		/* CAROUSEL */

	/* RESPONSIVE */

		@media (max-width: 1024px) {
			.home_section .items-format3 .liste{flex-wrap: wrap;}
			.home_section .items-format3 .item a img{width: unset;max-width: 400px;}

			.items-format9{
				display: flex;
				justify-content: space-around;				
			}
		}
		@media (max-width: 990px) {
			.items-format3:where(.type-1,.type-2){				
				display: flex !important;
				flex-wrap: wrap;
				justify-content: center;
			}
			.items-format3:where(.type-1,.type-2) .item{
				text-align: center;
				flex:none !important;
			}

			.liste_agences{
				gap: 2em;
			}
		}
		@media (max-width: 768px) {
			
			
			.home_section .home_section_ligne .item-common h2{
				font-size: 1.5em;
			}


			/* FORMAT 3 */
			.home_section .items-format3 .item{text-align: center;}
			.items-format3.type-1,
			.items-format3.type-2{				
				grid-template-columns: repeat(1, 1fr);
			}

			/* FORMAT 2 */
			.home_section .item-format2{
				column-gap:unset;
			}
			.home_section .item-format2 .visuel, .home_section .item-format2 .infos{width: 100%;transform: unset;}
			.home_section .item-format2 .infos{padding: 2em 0;}
			.home_section .item-format2 .visuel{
				grid-area: 3 / 1 / 4 / 4;
			}
			.home_section .item-format2 .texte{
				grid-area: 4 / 1 / 5 / 5;
			}
			.home_section .item-format2 .lien{
				grid-area: 5 / 1 / 6 / 6;
			}

			.format_5 .special .liste{flex-direction: column;align-items: unset;}
			.format_5 .special .infos{transform:translateY(0);}

			
			
			/* FORMAT 9 */
			.items-format9{
				flex-wrap: wrap;
				justify-content: center;
			}
			.items-format9 .item::after{
				content: '';
				display: block;
				height: 1px;
				width: 100%;
				background-color: var(--mc-lightgrey);
				margin:2em 0;
			}
			/* FORMAT 11 */
			.format_11 .counters{
				padding-inline: 0;
				flex-direction: column;
			}
			/* FORMAT 14 */
			.format_14 .wrapper > div{
				display: flex;
				flex-direction: column;
			}
		}
		@media (max-width: 580px) {
			.items-format3.type-1,
			.items-format3.type-2{				
				grid-template-columns: repeat(1, 1fr);
			}
		}

		@media (max-width: 480px) {
			.home_section .items-format3 h2{font-size: 24px;}
			.home_section .items-format3 .item a{padding-left: 0.5em;padding-right: 0.5em;}
			.home_section .items-format3 .item a img{width: unset;max-width: calc(100% - 1em);--img-h:unset !important;}

			
		}
	/**/




/* 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(var(--_nb_cell), 1fr);
		column-gap: 2rem;
		row-gap: 2rem;
		margin-top: 3rem;

		& li{

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

				& .categorie {
					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%);
						}
					}

				}
				& .infos{
					display: flex;	
					flex-direction: column;align-items: center;

					& .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-primary);
								white-space: nowrap;						
							}
						}
					}
					& .lien{
						--_h:40px;
						display: flex;
						justify-content: end;
						align-items: end;
						width: 100%;
						height: 50px;

						& 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: 0 50% 50% 50%;
							rotate: -45deg;
							transition: all 0.25s;

							& i{
								rotate: 45deg;
							}
						}
					}
				}
			}

			&:hover{
				& .wrapper{
					& .visuel img{
						scale:1.05;
					}
					& .lien{
						--_h:45px;
					}
				}
			}
		}

		@media (max-width:999px){
			--_nb_cell:3;
			--_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: 200px 1fr 200px 50px;
			grid-template-rows: auto;
			gap: 1rem;
			margin-top: 1rem;
			margin-bottom: 1rem;
			position: relative;
			border: 1px solid #ccc;
			border-radius: 15px;
			padding: 1em;

			& .visuel{
				& .categorie {
					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;
				}

			}
			& .infos{

				& .titre{
					margin-bottom: 1rem;

					& a{
						color: var(--mc-primary);
						font-weight: 700;
					}

				}
				& .details{
					display: grid;
					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{mask:url(../images/icons/081-dashboard-3.svg) no-repeat;-webkit-mask:url(../images/icons/081-dashboard-3.svg) no-repeat;}
						& .icone-boite{mask:url(../images/icons/081-gearshift.svg) no-repeat;-webkit-mask:url(../images/icons/081-gearshift.svg) no-repeat;}
						& .icone-energie{mask:url(../images/icons/081-gas-station.svg) no-repeat;-webkit-mask:url(../images/icons/081-gas-station.svg) no-repeat;}
						& .icone-moteur{mask:url(../images/icons/081-engine.svg) no-repeat;-webkit-mask:url(../images/icons/081-engine.svg) no-repeat;}
						& .icone-co2{mask:url(../images/icons/co2.svg) no-repeat;-webkit-mask:url(../images/icons/co2.svg) no-repeat;}
						& .icone-annee{width: 18px;height: 18px;mask:url(../images/icons/calendar.svg) no-repeat;-webkit-mask:url(../images/icons/calendar.svg) no-repeat;}
					}

				}
				
			}
			& .tarif{
				position: relative;
				display: flex;
				justify-content: center;
				font-size: 1.5rem;
				font-weight: 700;
				color:var(--mc-primary);

				&: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: 0 50% 50% 50%;
					rotate: -45deg;
					transition: all 0.25s;

					& i{
						rotate: 45deg;
					}
				}
			}

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

		@media (max-width: 768px) {

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

			& .special{
				display: none;
			}
			& .item{
				grid-template-columns: 1fr;

				& .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);

		& .item{
			padding-right: 0.5rem;

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


/* FORM */

	form {

		& fieldset{
			padding-top: 1rem;
		}

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

			&:has(input[required]) label::after,
			&:has(textarea[required]) label::after {
				content: '*';
				padding-left: 0.25rem;
				color:var(--mc-primary);
			}
			& .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: 40px;
				padding: 0 40px 0 20px;
				font-family: var(--mf-primary);
			}
			& input[type='tel']{
				width:min(200px, 100%);
			}
			& input[type='email']{
				width:min(350px, 100%);
			}
			& 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: 100px;
				padding: 10px 40px 0 20px;
			}
			& .cp{
				width:140px;
			}
			& *:focus:invalid {
				color: var(--mc-primary);
				border: none;
				border-bottom: 1px solid var(--mc-primary);
			}
			&.ligne_checkbox{
				--_clr-a:var(--mc-primary);
				--_clr-a-hover:var(--mc-secondary);

				& .champ{
					flex-direction: row;
					gap: 0.5rem;
				}
				& input[type='checkbox']{
					outline: 2px solid transparent;
				}
			}
		}
		& .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: 40px;
				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 */
	
	.pg_temoignages {
		& .liste_temoignages {
			overflow: hidden;/* Prevent AOS overflow*/
			display: grid;
			grid-template-columns: 1fr;

			& li {
				padding: 0;
				padding: 1rem 2rem;
				font-style: italic;
				border-bottom: 1px solid #999;
				display: grid;
				grid-template-columns: 1fr auto;
				grid-template-areas: 
					'texte texte'
					'auteur date'
				;
				gap: 1em;

				&:target{
					outline: 2px solid var(--mc-primary-light);
					border-radius: 20px;
					background: var(--mc-grey-light-light);
					scale: 1.05;
				}
				& .auteur {
					order:2;
					display: block;
					margin-top: 1.5em;
					font-style: normal;
					font-weight: normal;
				}
				& .texte {
					order:1;
					font-style: normal;

					& .titre{
						font-weight: 700;
					}
					& .infos{						
						font-size: 0.9rem;
					}
					& a{
						color:var(--mc-primary-dark);
					}
				}
				& .date{
					order:3;
				}
				& blockquote {
					quotes: '\201c' '\201d';
					display: flex;
					align-items: center;
					padding: 1em;
					position: relative;
					font-size: 1em;
					line-height: 1em;
					border-radius: 5px;
					font-style: italic;
					&::before {
						content: open-quote;
						position: absolute;
						top: 0;
						left: 0;
						translate: -100% 0;
						font-size: 2.5rem;
						font-weight: bold;
						color:var(--mc-primary);
					}
					&::after {					
						content: close-quote;
						position: absolute;
						bottom: 0;
						right: 0;
						translate: 100% 0;
						font-size: 2.5rem;
						font-weight: bold;
						color:var(--mc-primary);
					}
				}
			}
		}
		& .bloc_filtres {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			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;
				}
			}
		}
	}

/* 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);
		border-radius: 5px;
		visibility: hidden;
		opacity: 0;

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

		&:hover{
			scale:1.05;
		}
	}

/* RAPPEL */

	.bloc_rappel{
		& .bloc_wrapper{
			max-width: 480px;
		}

		& .intro{
			display:flex;
			margin-top:2rem;
			gap:1rem;
		}

		& form{
			max-width: 380px;
			margin:2rem auto;

			& .ligne{
				margin-bottom: 1rem;
			}
			& .ligne_submit{
				& button{
					margin-top: 0;
				}
			}
		}
	}

	#btn_rappel_flottant {
		position: fixed;
		left: 100%;
		top: 50%;
		transform: translateX(-63%) rotate(-90deg);
		background-color: var(--mc-secondary);
		color: var(--mc-over-secondary);
		padding: 10px 15px;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
		font-size: 14px;
		z-index: 1000;
		width: fit-content;
		white-space: nowrap;

		@media (max-width: 768px) {
			left: 1rem;
			top: unset;
			bottom: 1rem;
			transform: unset;
			visibility: hidden;
			opacity: 0;
			
		}
		&.show{
			visibility: visible;
			opacity: 1;
		}
		&:hover{
			scale:1.05;
		}
	}

/* KEYFRAMES */

@keyframes wobbleVertical {
    0% {
        transform: translateX(-63%) rotate(-90deg); /* Position initiale */
    }
    15% {
        transform: translateX(-58%) rotate(-93deg); /* Mouvement vers la droite et inclinaison */
    }
    30% {
        transform: translateX(-68%) rotate(-87deg); /* Mouvement vers la gauche et inclinaison */
    }
    45% {
        transform: translateX(-61%) rotate(-91deg); /* Retour vers le centre légèrement */
    }
    60% {
        transform: translateX(-65%) rotate(-89deg); /* Retour vers l'autre côté */
    }
    75% {
        transform: translateX(-63%) rotate(-90.5deg); /* Petit mouvement de réajustement */
    }
    100% {
        transform: translateX(-63%) rotate(-90deg); /* Retour à la position initiale */
    }
}

._anim_wooble {
    animation: wobbleVertical 2s ease-in-out infinite; /* Applique l'animation */
    animation-delay: 8s; /* Attente avant chaque cycle */
}


/**/