/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 22 2025 | 14:37:15 */
/* === INDEX ===
 * 1. ROOT
 * 2. FONTS STYLE
	 * 2.001 TAILLES
	 * 2.002 COULEURS
 * 3. MENU DE NAVIGATION ET FOOTER
	 * 3.001 HEADER
	 * 3.002 FOOTER
 * 4. INTERACTIONS
	 * 4.001 BOUTONS
 * 5. ESPACEMENTS
	 * 5.001 LARGEUR DU SITE
	 * 5.002 ESPACEMENT CONTENU INTÉRIEUR
 * 6. ÉLÉMENTS
 * 7. ACCESSIBILITY
*/

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root {
	/* Color palette */
	--blanc: #fff;
			
	/* Font */
	--font-paragraphe: neue_montreallight;
	--font-titre: neue_montreallight;
	--font-base: 16px;
	--big-text: calc(var(var(--font-base) * 2));
	--small-text: calc(var(var(--font-base) / 2));

	/* Borders */
    --border-blanc: 1px solid var(--blanc);
	--border-width: 1px;
	
	/* Height */
	--height-base: 0px;
	
	/* Couleurs */
	--bleu: #00bae3;
	--bleu-rgb: rgba(0,186,227,1);
	--mauve: #772683;
	--mauve-rgb: rgba(119,38,131,1);
	--rouge: #f8384d;
	--rouge-rgb: rgba(248,56,77,1);
	--bleu-profond: #001d48;
	--bleu-profond-rgb: 0, 29, 72;
	--gris-1:#f7f7f7; /*gris presque blanc*/
	--gris-2:#eaeaea; /*gris très pâle*/
	--gris-3:#b6b6b6; /*gris foncé*/
	--blanc: white;
	
}

div.tooltip.porto-tooltip-wrap {display: none !important;}


/**** 2. FONTS STYLE ****/
    h1, h2, h3, h4, h5, h6, p, li, ol, ul, div {
        font-family: "Inter", sans-serif !important;
        font-optical-sizing: auto !important;
        font-style: normal;
		color: var(--bleu-profond);
    }

	.surtitre {
		margin-bottom: clamp(8px, 3vw, 16px) !important;
		padding-bottom: clamp(8px, 3vw, 16px) !important;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-color: var(--bleu-profond);
	}
	.surtitre p {
		text-transform: uppercase;
		margin-bottom: clamp(8px, 3vw, 16px);
	}
	.surtitre + .vc_row,
	.surtitre + div > .vc_row {
	  padding-top: 0 !important;
	}


	/* 2.001 TAILLES */
	h1, .niveau-1 h2, .niveau-1 p {
	  font-weight: 500 !important;
	  font-size: clamp(48px, 8vw, 130px) !important;
	  line-height: clamp(52px, 8.5vw, 140px) !important;
	  letter-spacing: clamp(-1px, -0.3vw, -3px) !important;
	}
.header-accueil .niveau-1 p {
	font-size: clamp(72px, 9vw, 220px) !important;
	line-height: clamp(90px, 11vw, 170px) !important;
	letter-spacing: clamp(-1px, -0.5vw, -3px) !important;
	font-weight: 500 !important;
}

	h2, .h2, .single-product h2.product_title.entry-title, .overlay h2, .single-product .cta h2 {
	  font-weight: 500 !important;
	  font-size: clamp(36px, 5vw, 68px) !important;
	  line-height: clamp(40px, 5.5vw, 75px) !important;
	  letter-spacing: clamp(-1px, -0.3vw, -3px) !important;
	  text-transform: none !important;
	}
	.single-product h2 {
		font-size: clamp(16px, 5vw, 28px) !important;
		line-height: clamp(22px, 5vw, 30px) !important;
		font-weight: 500 !important;
		text-transform: uppercase !important;
	}
	h3, .niveau-3 h1, .niveau-3 h2, .niveau-3 p {
	  font-weight: 400 !important;
	  font-size: clamp(28px, 4vw, 48px) !important;
	  line-height: clamp(34px, 4.3vw, 52px) !important;
	  letter-spacing: clamp(-0.5px, -0.2vw, -3px) !important;
	}

	h4 {
	  font-weight: 400;
	  font-size: clamp(16px, 2.8vw, 28px) !important;
	  line-height: clamp(22px, 3vw, 30px) !important;
	  letter-spacing: 0px;
	  text-transform: uppercase;
	  margin-top: 32px !important;
	  margin-bottom: 16px !important;
	}
	.surtitre p {
	  font-weight: 400;
	  font-size: clamp(14px, 2.5vw, 17px);
	  line-height: clamp(19px, 2.7vw, 22px);
	  letter-spacing: 0px;
	}


	p, .single-product ul.products .woocommerce-loop-product__title,
	.woocommerce-product-details__short-description p, .single-product .page-wrapper .product-summary-wrap .description p,
	.product-catalog h3.porto-heading.post-title, ul.products h3, h3.woocommerce-loop-product__title {
	  font-weight: 400 !important;
	  font-size: clamp(16px, 2.8vw, 28px) !important;
	  line-height: clamp(22px, 3vw, 30px) !important;
	  letter-spacing: 0px;
	}

	.cmplz-body p {
		font-size: clamp(12px, 2.8vw, 18px) !important;
		line-height: 110% !important;
	}

	.defilez {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.defilez a::before {
	  content: "\f063"; /* fa-arrow-down */
	  font-family: "Font Awesome 6 Free";
	  font-weight: 900 !important;
	  font-size: clamp(12px, 2vw, 15px) !important;
	  line-height: 1 !important;
	  display: inline-block;
	  color: inherit;
	  margin-right: 8px;
	  transition: transform 0.3s ease;
	  transform-origin: center;
		color: white;
	}

	/* Animation au hover du lien */
	.defilez a:hover::before {
	  animation: bounceArrow 0.6s ease infinite;
	}

	@keyframes bounceArrow {
	  0%, 100% {
		transform: translateY(0);
	  }
	  50% {
		transform: translateY(-5px);
	  }
	}

	.defilez p {
		font-family: 'Inter', sans-serif;
		font-size: clamp(12px, 2vw, 15px) !important;
		line-height: 105% !important;
		font-weight: 400 !important;
	}

	/* 2.002 COULEURS */
	.bg-degrade {
	    background: var(--bleu-rgb);
	    background: linear-gradient(90deg, var(--bleu-rgb) 0%, var(--mauve-rgb) 50%, var(--rouge-rgb) 100%);
	}
	.bg-gris1 {background-color: var(--gris-1);}
	.bg-bleu {background-color: var(--bleu);}
	.bg-blanc {background-color: white;}
	.bleu {color: var(--bleu);}
	.bleu-profond {color: var(--bleu-profond);}
	.text-degrade, .text-degrade h1, .text-degrade h2, .text-degrade h3, 
	.text-degrade h4, .text-degrade h5, .text-degrade h6, .text-degrade p, .text-degrade li, .text-degrade ol, 
	.slogan-footer p, .single-product .page-wrapper .product_title, .single-product h2, .slide-application h3, .toggle > label {
	    background: linear-gradient(90deg, var(--bleu-rgb) 0%, var(--mauve-rgb) 50%, var(--rouge-rgb) 100%);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    background-clip: text;
	    color: transparent;
	    font-weight: bold; /* Optionnel : pour plus d'impact */ 
		width: fit-content;
	}
	#footer-boxed p a {color: var(--gris-3) !important;}
	#footer-boxed p a:hover {color: var(--bleu-profond) !important;}

	/* overlay sur mes images en arrière-plan */
	.overlay {
	  position: relative;
	  background-blend-mode: overlay;
	}

	.overlay::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	  background-color: var(--bleu-profond); /* ou rgba(0, 42, 76, 0.6) */
	  z-index: 0;
	  pointer-events: none;
	  mix-blend-mode: multiply;
	  opacity: 70%;
	}

	.overlay > * {
	  position: relative;
	  z-index: 1;
	}


	/* couleur de texte si */
	.bg-degrade h1, .bg-degrade h2, .bg-degrade h3, .bg-degrade h4, .bg-degrade h5, .bg-degrade h6, .bg-degrade .surtitre p,
	.overlay h1, .overlay h2, .overlay h3, .overlay h4, .overlay h5, .overlay h6, .overlay .surtitre p, .overlay p, .overlay h2,
	.vc_row.vc_row-has-fill * {
		color: white !important;
	}
	.overlay h2 {-webkit-text-fill-color: white;}
	.bg-degrade .surtitre, .overlay .surtitre {border-color: white !important;}


/**** 3. MENU DE NAVIGATION ET FOOTER ****/
li.wpml-ls-menu-item, li.wpml-ls-menu-item span.wpml-ls-native {
    color: var(--bleu-profond) !important;
}
ul#menu-principal-en {
    right: 0 !important;
    position: absolute;
}

		/** BREADCRUMB BANNER **/
		.page-top ul.breadcrumb li {
			font-size: calc(10px + 2 * ((100vw - 320px) / 1120)) !important;
			color: white;
			line-height: calc(13px + 2 * ((100vw - 320px) / 1120)) !important;
		}
		#breadcrumbs-boxed {
		  width: 100vw; /* Utilise toute la largeur de la fenêtre */
		  max-width: 100vw !important;
		  margin-left: calc(-50vw + 50%); /* Centrer le contenu à l'intérieur de l'écran */
		  background: linear-gradient(90deg, var(--bleu-rgb) 0%, var(--mauve-rgb) 50%, var(--rouge-rgb) 100%); /* Dégradé */
		  padding: clamp(15px, 3vw, 30px) 0; /* Espacement autour du contenu */
		  color: white; /* Texte en blanc */
		}
		.separator {
			display: inline-flex;
			height: 1.2em;
			vertical-align: middle;
			border-left: 1px solid var(--porto-normal-bc);
			margin-left: 5px;
			margin-right: 5px;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-end;
			align-content: center;
		}
		@media (max-width: 900px) {
			#breadcrumbs-boxed {padding-left: 15px; padding-right: 15px;}
		}

		#breadcrumbs-boxed .inner-container {
		  max-width: 1320px; /* Max-width pour éviter que le texte ne se dilate trop */
		  margin: 0 auto;
		  padding: 0 20px; /* Un peu de padding pour l'intérieur */
		  text-align: center; /* Centrer le texte */
		}

		#breadcrumbs-boxed .breadcrumbs-wrap {
		  margin-bottom: 20px; /* Espacement du breadcrumb */
		}

		#breadcrumbs-boxed .breadcrumb {
		  display: inline-block;
		  font-size: 14px;
		  color: rgba(255, 255, 255, 0.8); /* Blanc légèrement transparent */
		}

		#breadcrumbs-boxed .breadcrumb li {
		  display: inline;
		}

		#breadcrumbs-boxed .breadcrumb li::after {
		  content: " / ";
		  margin: 0 5px;
		  color: rgba(255, 255, 255, 0.5); /* Séparateur des liens en breadcrumb */
		}

		#breadcrumbs-boxed .breadcrumb li:last-child::after {
		  content: "";
		}

		#breadcrumbs-boxed .page-title {
		  font-size: clamp(32px, 5vw, 56px); /* Taille du titre responsive */
		  font-weight: 700; /* Gras pour le titre */
		  color: white; /* Titre en blanc */
		}

		#breadcrumbs-boxed .page-top {
			background-color: transparent;
			padding: 0px;
		}

				.page-top ul.breadcrumb > li .delimiter {
				  display: none;
				}


		/** MARGE ENTRE BREADCRUMB ET CONTENU DE LA PAGE **/
		/*.single-product*/ 
		main.site-main.m-b-lg.m-t {
			margin-top: 0px !important;
		}

		.main-content {
			padding-top: 0px !important;
			padding-bottom: 0px !important;
		}

	/* 3.001 HEADER */

	/* 3.002 FOOTER */
	@media (max-width: 900px) {
		footer#footer {
			padding-left: 15px;
			padding-right: 15px;
		}
	}
	.slogan-footer {
		padding-bottom: 15px !important;
	}
	.sub-footer-gmc {
		border-top: 1px solid var(--gris-3);
		padding-top: 15px !important;
	}
	.slogan-footer .wpb_content_element, .sub-footer-gmc .wpb_content_element {
		margin: 0px;
	}

	.sub-footer-gmc > .vc_column_container.col-md-6:last-of-type {
		text-align: right;
		padding-right: 0px;
	}
	@media (max-width: 768px) {
		.sub-footer-gmc > .vc_column_container.col-md-6:last-of-type {
			text-align: left;
			padding-top: calc(var(--bs-gutter-x) / 2);
		}
	}


	.slogan-footer p {
	  font-family: 'Inter', sans-serif;
	  font-weight: 500;
	  font-size: clamp(20px, 3.5vw, 30px);         /* fluide entre mobile et desktop */
	  line-height: clamp(24px, 3.8vw, 36px);        /* respect du look serré mais lisible */
	  letter-spacing: clamp(-1px, -0.3vw, -2px);    /* toujours un peu négatif mais fluide */
	}

	.sub-footer-gmc p {
	  font-family: 'Inter', sans-serif !important;
	  font-weight: 400 !important;
	  font-size: clamp(11px, 2vw, 13px) !important;           /* fluide mais commence petit (mobile) */
	  line-height: clamp(14px, 2.2vw, 15px) !important;        /* suffisant pour une lecture rapide */
	  letter-spacing: 0;
	  color: var(--gris-3);
	}
	#footer .vc_column_container.col-md-12, #footer .vc_row, #footer .vc_row .vc_column_container.col-md-6 {
		padding-left: 0px;
		padding-right: 0px;
	}
	.social .wpb_wrapper {
		display: flex;
		justify-content: flex-end;
	}
	.social .vc_column_container.col-md-6 {
		width: max-content;
		display: inline-flex;
		justify-content: flex-end;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.vc_row.social {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.social p {
		background: none;
		-webkit-text-fill-color: unset;
		color: var(--bleu-profond);
		font-weight: 400 !important;
		font-size: clamp(14px, 2.2vw, 20px) !important;
		line-height: clamp(22px, 3vw, 30px) !important;
		margin-right: 16px;
	}


/**** 4. INTERACTIONS ****/
html, body {
  scroll-behavior: smooth !important;
}


	/* 4.001 BOUTONS */

/**** 5. ESPACEMENTS ****/

	/* 5.001 LARGEUR DU SITE */


	/* 5.002 ESPACEMENT CONTENU INTÉRIEUR */

		.archive main.site-main.m-b-lg.m-t, 
		.single-product main.site-main.m-b-lg.m-t {
			margin-bottom: 0px !important;
		}

		/* espacement pour chaque rangée */
		.vc_row.has-bg .wpb_wrapper {
		  padding-top: clamp(32px, 3vw, 60px);
		  padding-bottom: clamp(32px, 3vw, 60px);
		}

		.vc_row:not(.has-bg) {
		  padding-top: clamp(32px, 3vw, 60px);
		  padding-bottom: clamp(32px, 3vw, 60px);
		}

		/* gutter - gap */
		.row {--bs-gutter-x: clamp(32px, 3vw, 64px); !important}

		/* margin par défaut */
		.wpb_content_element {
		  margin-bottom: clamp(16px, 2vw, 32px);
		}

		.wpb_content_element:first-of-type {
		  margin-top: 0;
		}

		.wpb_content_element:last-of-type {
		  margin-bottom: 0;
		}


/**** 6. ÉLÉMENTS ****/

		/* Gestion de l'affichage des blocs */
		.applications-colonnes .vc_column-inner::before {
			content: none !important;
			display: none !important;
		}

		.applications-colonnes > .vc_column_container > .wpb_wrapper {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
			column-gap: 32px;
			row-gap: 0px;
			/* ou juste : gap: 32px; */
		}
		.vc_row.wpb_row.vc_inner.row.applications-colonnes {padding-top: 0px; padding-bottom: 0px;}

		@media (min-width: 400px) {
			.produit-application h3 {height: 300px !important;}
		}

		@media (min-width: 1024px) {
			.applications-colonnes > .vc_column_container > .wpb_wrapper {
				grid-template-columns: repeat(2, 1fr); /* Tablette */
				width: 100%;
				box-sizing: border-box;
			}
			.produit-application h3 {height: 410px !important;}
		}

		@media (min-width: 1470px) {
			.applications-colonnes > .vc_column_container > .wpb_wrapper {
				grid-template-columns: repeat(4, 1fr); /* Laptop & Desktop */
				width: 100%;
				box-sizing: border-box;
			}
			.produit-application h3 {height: 480px !important;}
		}
		@media (min-width: 1920px) {
			.produit-application h3 {height: 450px;}
		}

		/* Bloc principal "Applications" */
		.produit-application h3 {
			position: relative;
			background-color: var(--gris-1);
			border-radius: clamp(12px, 3vw, 25px);
			border: 1px solid var(--gris-1);
			font-weight: 700 !important;
			font-size: clamp(16px, 5vw, 28px) !important;
			line-height: clamp(22px, 5vw, 30px) !important;
			letter-spacing: 0px !important;
			text-transform: uppercase;
			text-decoration: none !important;
			padding-top: clamp(140px, 18vw, 225px);
			padding-left: clamp(16px, 10vw, 32px);
			padding-right: clamp(16px, 10vw, 32px);
			padding-bottom: clamp(16px, 10vw, 32px);
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 8px; /* pour espacer le texte du bouton */
		}

		/* Bordure dégradée */
		.produit-application h3:hover {
			border: 1px solid transparent;
			background-image: 
				linear-gradient(white, white),
				linear-gradient(90deg, var(--bleu-rgb), var(--mauve-rgb), var(--rouge-rgb));
			background-origin: border-box;
			background-clip: padding-box, border-box;
		}

		/* Texte dégradé */
		.produit-application h3:hover .applications {
			background: linear-gradient(90deg, var(--bleu-rgb), var(--mauve-rgb), var(--rouge-rgb));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		/* Apparence du bouton */
		.btn-wrapper {
			opacity: 0;
			transform: translateY(10px);
			transition: opacity 0.3s ease, transform 0.3s ease;
			pointer-events: none;
			display: flex;
			justify-content: center;
			width: 100%;
		}
		/* Apparition au hover */
		.produit-application h3:hover .btn-wrapper {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}

		/* Bouton lui-même – dégradé vers bleu profond opaque */
		.btn-gradient {
			position: relative;
			display: inline-block;
			padding: 14px 20px;
			border-radius: 999px;
			background: linear-gradient(90deg, var(--bleu-rgb), var(--mauve-rgb), var(--rouge-rgb));
			font-family: "Inter", sans-serif !important;
			font-size: clamp(12px, 2.8vw, 17px);
			line-height: clamp(10px, 2.8vw, 15px);
			font-weight: 400 !important;
			color: white !important;
			text-decoration: none !important;
			text-transform: none !important;
			transition: background 0.3s ease;
			overflow: hidden;
			z-index: 1;
		}
		.btn-gradient span {
			position: relative;
			z-index: 2;
		}
		/* HOVER du bouton */
		.btn-gradient:hover {color: white;}
		.btn-gradient::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0%;
			height: 100%;
			background: var(--bleu-profond);
			transition: width 0.6s ease, filter 0.3s ease 0.6s, opacity 0.3s ease 0.6s;
			z-index: 1;
			filter: blur(15px);
			opacity: 0.6;
		}
		.btn-gradient:hover::after {
			width: 100%;
			filter: blur(0px);
			opacity: 1;
		}

				.vc_btn3, .vc_btn3-container {margin-bottom: 0px;}
				/* Bouton inversé avec effet dégradé au hover */
				/* Appliquer à toutes les classes concernées */
				.btn-gradient-inverse {
					position: relative;
					display: inline-block;
					padding: 14px 20px;
					border-radius: 999px;
					background-color: var(--bleu-profond);
					color: white !important;
					font-family: "Inter", sans-serif !important;
					font-size: clamp(12px, 2.8vw, 17px) !important;
					line-height: clamp(10px, 2.8vw, 15px) !important;
					font-weight: 400;
					text-decoration: none;
					text-transform: none;
					transition: color 0.3s ease;
					overflow: hidden;
					box-sizing: border-box;
					z-index: 0;
				}

				/* IMPORTANT : permet au texte de rester visible */
				.btn-gradient-inverse:hover {
				  color: white !important;
				  position: relative;
				  z-index: 2;
				}

				/* Dégradé animé en background */
				.btn-gradient-inverse::before {
				  content: "";
				  position: absolute;
				  top: 0;
				  left: 0;
				  width: 0%;
				  height: 100%;
				  background: linear-gradient(90deg, var(--bleu-rgb), var(--mauve-rgb)); /* sans rouge */
				  transition: width 0.6s ease;
				  z-index: 1;
				}

				/* Activation du dégradé */
				.btn-gradient-inverse:hover::before {
				  width: 100%;
				}

				/* version bouton bakery */
				/* Bouton WPBakery : style initial */
				.vc_btn3.vc_btn3-color-grey,.reset-button-wrapper .btn-primary,
				.page-wrapper .porto-gb-d55dce4bca12e9cbab8d5e3728822356, input.gform_button.button, input#gform_submit_button_4, input#gform_submit_button_3, input#gform_submit_button_2, input#gform_submit_button_1 {
					display: inline-block !important;
					padding: 14px 24px !important;
					border-radius: 999px !important;
					background-color: var(--bleu-profond);
					background-image: linear-gradient(90deg, var(--bleu-rgb), var(--mauve-rgb), var(--rouge-rgb));
					background-size: 0% 100%;
					background-repeat: no-repeat;
					background-position: left center;
					color: white !important;
					font-family: 'Inter', sans-serif !important;
					font-size: clamp(12px, 2.8vw, 17px) !important;
					font-weight: 400;
					text-decoration: none !important;
					text-transform: none;
					border: none;
					transition: background-size 0.6s ease, background-color 0.4s ease;
					overflow: hidden;
				}

				/* Hover : déploiement progressif du dégradé */
				.vc_btn3.vc_btn3-color-grey:hover,.reset-button-wrapper .btn-primary:hover,
				.page-wrapper .porto-gb-d55dce4bca12e9cbab8d5e3728822356:hover, input.gform_button.button:hover, input#gform_submit_button_4:hover, input#gform_submit_button_3:hover, input#gform_submit_button_2:hover, input#gform_submit_button_1:hover {
					background-size: 100% 100%;
					background-color: transparent; /* pour laisser le dégradé apparaître */
					border: none !important;
				}

				/* version bouton bakery blanc vers dégradé
				BOUTON INVERSE ou VC_BUTTON dans une section avec image de fond ou overlay
				État par défaut — fond blanc, texte bleu profond */
				.overlay button.vc_general.vc_btn3, .overlay .vc_btn3.vc_btn3-color-grey {
					background-color: white;
					color: var(--bleu-profond) !important;
				}

				/* Hover — fond transparent, dégradé visible, texte blanc */
				.overlay button.vc_general.vc_btn3:hover, .overlay .vc_btn3.vc_btn3-color-grey:hover {
					color: white !important;
				}




	/* Image du bloc principal "Applications" */
	.produit-application h3::before {
	  content: "";
	  position: absolute;
	  top: 10%;
	  left: 50%;
	  transform: translateX(-50%);
	  width: clamp(75px, 9vw, 150px);
	  height: clamp(75px, 9vw, 150px);
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: center;
	  transition: background-image 0.3s ease, transform 0.3s ease;
	}
	.produit-application.granulaires h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-noix-Default.svg');
	}
	.produit-application.granulaires:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-noix-Hover.svg');
	}
	.produit-application.poudre h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-poudre-Default.svg');
	}
	.produit-application.poudre:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-poudre-Hover.svg');
	}
	.produit-application.fromage h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-fromage-Default.svg');
	}
	.produit-application.fromage:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-fromage-Hover.svg');
	}
	.produit-application.pateux h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-pateux-Default.svg');
	}
	.produit-application.pateux:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-pateux-Hover.svg');
	}
	.produit-application.collants h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-collant-Default.svg');
	}
	.produit-application.collants:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-collant-Hover.svg');
	}
	.produit-application.liquide h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-liquide-Default.svg');
	}
	.produit-application.liquide:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-liquide-Hover.svg');
	}
	.produit-application.moussants h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-mousse-Default.svg');
	}
	.produit-application.moussants:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-mousse-Hover.svg');
	}
	.produit-application.saumure h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-saumure-Default.svg');
	}
	.produit-application.saumure:hover h3::before {
	  background-image: url('/wp-content/uploads/2025/04/Icon-saumure-Hover.svg');
	}

		/* SLIDER CATÉGORIE ACCUEIL */
		/* Boîte générale */
		.sp-wcsp-slider-area .sp-wcsp-cat-item {
		  background: #fff;
		  border-radius: clamp(12px, 3vw, 25px);
		  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		  transition: box-shadow 0.3s ease;
		  overflow: hidden;
		  padding: 10px;
		}

		.sp-wcsp-slider-area .sp-wcsp-cat-item:hover {
		  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
		  transform: none !important;
		}
		.sp-wcsp-slider-area #sp-wcsp-slider-section-8178 .sp-wcsp-cat-item .sp-wcsp-cat-thumbnail {margin-top: clamp(16px, 3vw, 32px) !important; max-height: 320px;}

		/* Conteneur flex vertical avec ordre : Titre > Image > Bouton */
		.sp-wcsp-cat-item-thumb-content {
		  display: flex;
		  flex-direction: column;
		  justify-content: flex-start;
		  align-items: flex-start;
		  padding: 0px 16px;
		  height: 100%;
		  min-height: calc((clamp(22px, 4.2vw, 30px) * 6) + 300px + 7%) !important;
		  background: white;
		  border-radius: clamp(12px, 3vw, 25px) !important;
		  position: relative;
		  gap: 5px;
		}
		@media (max-width: 1280px) {
			.sp-wcsp-cat-item-thumb-content {
				min-height: 500px !important;
			}
		}



		/* Titre toujours en premier */
		.sp-wcsp-cat-item-thumb-content > .sp-wcsp-cat-details {
		  order: 1;
		  width: 100%;
		  z-index: 2;
			min-height: calc((18px + (28 - 18) * ((100vw - 320px) / (1440 - 320))) * 5);
		}

		.sp-wcsp-cat-details-content {
		  display: flex;
		  flex-direction: column;
		  align-items: flex-start;
		  justify-content: flex-start;
		  flex: 1; /* Important pour pousser le bouton vers le bas */
		  padding: 8px;
		  height: calc(clamp(18px, 4vw, 28px) * 5);
		}

		/* Titre */
		.sp-wcsp-cat-name {
		  padding-bottom: 10px;
		  width: 100%;
		  text-align: left !important;
		}

		.sp-wcsp-cat-name a {
		  margin: 0;
		  color: var(--bleu-profond) !important;
			font-size: calc(18px + (28 - 18) * ((100vw - 320px) / (1440 - 320))) !important;
		  /*font-size: clamp(18px, 2.5vw, 28px) !important;*/
			line-height: calc(22px + 8 * ((100vw - 320px) / 1120)) !important;
		  /*line-height: clamp(22px, 2.7vw, 30px) !important;*/
		  font-weight: 600;
		  font-style: normal;
		  font-family: 'Inter', sans-serif;
		  text-decoration: none;
		  text-transform: uppercase !important;
		  text-align: left !important;
		}
		/* Taille minimale */
		@media (max-width: 320px) {
		  .sp-wscp-cat-name {font-size: 18px; line-height: 22px !important;}
		}

		/* Taille maximale */
		@media (min-width: 1440px) {
		  .sp-wscp-cat-name {font-size: 28px; line-height: 30px !important;}
		}


		/* Image au centre et en 2e */
		.sp-wcsp-cat-item-thumb-content > .sp-wcsp-cat-thumbnail {
		  order: 2;
		  width: 100%;
		  display: flex;
		  justify-content: center;
		}

		.sp-wcsp-cat-thumbnail img {
		  max-height: 90%;
		  width: auto;
		  object-fit: contain;
		  margin: 0 auto;
		}

		/* ZOOM IMAGE AU HOVER DE LA CARTE */
		.sp-wcsp-cat-thumbnail, .sp-wcsp-cat-item .sp-wcsp-cat-thumbnail {
		  overflow: visible !important;
		}

		.sp-wcsp-cat-thumbnail img {
		  transition: transform 0.5s ease;
		  transform-origin: center center;
		}

		.sp-wcsp-cat-item:hover .sp-wcsp-cat-thumbnail img {
		  transform: scale(1.25);
		}

		/* NAVIGATION SOUS CARROUSEL */
		.sp-wcsp-pagination span {
			background: var(--gris-3) !important;
		}
		.sp-wcsp-pagination span.swiper-pagination-bullet-active {
			background: var(--rouge) !important;
		}

		/* Cache le bouton original du plugin */
		.sp-wcsp-shop-now,
		.sp-wcsp-text-center {
		  display: none !important;
		}

		/* === Bouton dynamique injecté via JS/PHP === */
		.btn-dynamic {
		  order: 3;
		  margin-top: auto;
		  margin-bottom: 16px !important;
		  padding: 14px 24px;
		  border-radius: 999px;
		  background-color: var(--bleu-profond);
		  background-image: linear-gradient(90deg, var(--bleu-rgb), var(--mauve-rgb), var(--rouge-rgb));
		  background-size: 0% 100%;
		  background-repeat: no-repeat;
		  background-position: left center;
		  color: white;
		  font-family: 'Inter', sans-serif;
		  font-size: clamp(12px, 2.8vw, 17px);
		  font-weight: 400;
		  text-align: center;
		  opacity: 0;
		  visibility: hidden;
		  transform: translateY(10px);
		  transition: background-size 0.6s ease, background-color 0.4s ease;
		  cursor: pointer;
		  text-decoration: none;
		  overflow: hidden;
		}

		/* Affiche seulement au hover */
		.sp-wcsp-cat-item:hover .btn-dynamic {
		  opacity: 1;
		  visibility: visible;
		  transform: translateY(0);
		}
		.sp-wcsp-cat-item a.btn-dynamic:hover {
		  color: white !important;
		  background-size: 100% 100%;
		  background-color: transparent; /* pour laisser le dégradé apparaître */
		  border: none !important;
		}

		/* === Flèches de navigation === */
		.sp-wcsp-slider-area .sp-wcsp-button-prev,
		.sp-wcsp-slider-area .sp-wcsp-button-next {
		  width: 40px;
		  height: 40px;
		  background-color: rgba(0,26,114,0.8);
		  color: #fff;
		  border-radius: 50%;
		  transition: background-color 0.3s ease;
		}

		.sp-wcsp-slider-area .sp-wcsp-button-prev:hover,
		.sp-wcsp-slider-area .sp-wcsp-button-next:hover {
		  background-color: #001A72;
		}

		.sp-wcsp-slider-area.nav-top-right .sp-wcsp-button {
		  top: -60px;
		  right: 0;
		  position: absolute;
		}

		/* Nettoyage global */
		.sp-wcsp-slider-area {
		  position: relative;
		  padding-top: 20px;
		}

		.sp-wcsp-slider-area .sp-wcsp-section-title {
		  display: none;
		}

	/* Header accueil */
	.header-accueil {
		min-height: 700px;
		height: 75vh;
		display: flex;
		justify-content: flex-start;
		align-content: flex-end;
		background-position: right !important;
	}
	.header-accueil .niveau-1 {
		margin-top: auto;
		margin-bottom: 10vh;
	}
	.header-accueil .defilez {
		border-top: 1px solid white;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		padding-top: 32px;
	}
	@media (max-width: 1024px) {
		.header-accueil {
			background-position: 70% !important;
		}
	}

		/* SLIDER DE LOGOS */
		/* Carrousel global */
		.slider-client {
		  position: relative;
		  width: 100vw;
		  overflow: hidden;
		  height: auto;
		  z-index: 2;
		  padding: 0;
		  box-sizing: border-box;
		}

		/* WPBakery inner row */
		.vc_row.slider-client {
		  padding-top: 0 !important;
		}
		.slider-client .vc_column-inner {
		  height: auto !important;
		  display: flex;
		  align-items: center;
		  padding: 0 !important;
		}

		/* Animation de la rangée */
		.slider-client .wpb_wrapper {
		  display: flex !important;
		  align-items: center !important;
		  justify-content: flex-start;
		  gap: 60px !important;
		  padding: 0 !important;
		  margin: 0 !important;
		  height: 100%;
		  box-sizing: border-box;
		  white-space: nowrap;
		  will-change: transform;
		}

		/* Bloc contenant chaque logo */
		.slider-client .wpb_single_image {
		  display: flex !important;
		  align-items: center;
		  justify-content: center;
		  flex: 0 0 auto !important;
		  margin: 0 !important;
		  padding: 0 !important;
		  height: 100%;
		  box-sizing: border-box;
		}

		/* Conteneur intermédiaire généré par WPBakery */
		.slider-client .wpb_single_image .wpb_wrapper {
		  display: flex !important;
		  align-items: center;
		  justify-content: center;
		  margin: 0 !important;
		  padding: 0 !important;
		  height: 100%;
		  box-sizing: border-box;
		}

		/* Conteneur direct de l'image */
		.slider-client .vc_single_image-wrapper {
		  display: flex !important;
		  align-items: center;
		  justify-content: center;
		  margin: 0 !important;
		  padding: 0 !important;
		  height: 100%;
		  box-sizing: border-box;
		}

		/* Image elle-même */
		.slider-client img {
		  display: block;
		  max-height: 100px;
		  height: auto;
		  width: auto;
		  object-fit: contain;
		  margin: 0 auto;
		  padding: 0;
		}

		/* Pseudo-éléments éventuels (effet de masquage sur les bords) */
		.slider-client::before,
		.slider-client::after {
		  content: '';
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  width: 20px;
		  z-index: 2;
		  pointer-events: none;
		}

		.slider-client::before {
		  left: 0;
		  background: linear-gradient(to right, #fff 0%, transparent 100%);
		}

		.slider-client::after {
		  right: 0;
		  background: linear-gradient(to left, #fff 0%, transparent 100%);
		}


				/* --- PRODUITS --- */
				.porto-tb-meta {
					font-size: calc(11px + 1 * ((100vw - 320px) / 1120)) !important;
					line-height: calc(12px + 3 * ((100vw - 320px) / 1120));
					color: var(--gris-3) !important;
					margin-bottom: 16px;
					min-height: calc(3 * ((12px + 3 * ((100vw - 320px) / 1120))));
				}
				.product-catalog h3.porto-heading.post-title {
					min-height: calc(2 * clamp(22px, 3vw, 30px));
				}

				.description.woocommerce-product-details__short-description h2 {
					border-top: 1px solid var(--bleu-profond);
					width: 100%;
					padding-top: 60px;
					margin-top: 60px;
				}
				.single-product .cta, .single-product .fullwidth, .fullwidth {
					left: calc(50% - 51.45vw + var(--porto-scroll-w, 0px) / 2 + var(--bs-gutter-x) / 2);
					padding-left: calc((100vw - 100% - var(--porto-scroll-w, 0px) - var(--bs-gutter-x)) / 2) !important;
					padding-right: calc((100vw - 100% - var(--porto-scroll-w, 0px) - var(--bs-gutter-x)) / 2) !important;
					overflow: hidden;
				}
				body.single-product #breadcrumbs-boxed .page-title, body.single-post .page-title-wrap {
					display: none;
				}
				body.single-product #breadcrumbs-boxed .breadcrumbs-wrap, body.single-post #breadcrumbs-boxed .breadcrumbs-wrap {margin-bottom: 0px;}

				/* - Produits connexes - */
				.single-product .bg-gris1.fullwidth .product-inner {
					background-color: white;
					padding: 32px;
					border-radius: clamp(12px, 3vw, 25px);
				}
				.single-product ul.products .woocommerce-loop-product__title, 
				.single-product .product-content {text-align: center !important;}

				.single-product ul.products .woocommerce-loop-product__title {
					padding-top: 32px;
				}

				.single-product h2.sp-linked-heading {
					text-align: center !important;
					/*width: 100%;*/
					border: none;
					margin-left: auto;
					margin-right: auto;
				}
				.single-product ul.products li.product-col {max-width: 25%;}

				.yith-wcwl-add-button, .yith-wcwl-add-to-wishlist {display: none;}
				li.product:hover .product-image {box-shadow: none !important;}
				li.product-outimage_aq_onimage .product-image .inner:after {background: none !important;}

				li.product-outimage_aq_onimage .add-links .quickview {
					background-image: linear-gradient(90deg, var(--bleu-rgb), var(--mauve-rgb), var(--rouge-rgb));
					color: white;
				}
				.single-product .product-content a:hover {color: var(--bleu-profond);}

				li, .porto-cp-attr-table td, .porto-cp-attr-table th, .toggle > .toggle-content > p {
					  font-weight: 400 !important;
					  font-size: clamp(14px, 2.2vw, 20px) !important;
					  line-height: clamp(22px, 3vw, 30px) !important;
					  letter-spacing: 0px !important;
					  padding-bottom: clamp(13px, 1.8vw, 16px) !important;
					}
				.toggle > .toggle-content {
					padding: 20px;
				}

				/* attributs */
				.single-product thead {
					display: none;
				}
				.attribute-grid {
				  display: grid;
				  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
				  gap: clamp(16px, 2vw, 32px);
				  padding: 24px 0;
				}

				.attribute-column {
				  display: flex;
				  flex-direction: column;
				  gap: 12px;
				}

				.attribute-title {
					font-weight: 700;
					font-size: clamp(14px, 1.5vw, 18px);
					color: var(--bleu-profond);
					display: inline-block; /* ou block selon ton besoin */
					background-color: var(--gris-1); /* remplace avec ta vraie couleur */
					padding: clamp(4px, 1.5vw, 8px) clamp(6px, 1.5vw, 12px);
					text-transform: uppercase;
				}
				@media (max-width: 900px) {
					.attribute-title {margin-top: 16px;}
				}
				h2.product_title.entry-title.show-product-nav.nom-produit {margin-bottom: clamp(16px, 2vw, 32px);}

				.attribute-items > div {
				  font-family: 'Inter', sans-serif;
				  font-size: clamp(13px, 1.5vw, 16px);
				  line-height: 1.4;
				  color: var(--bleu-profond);
				}

				.product-images .product-image-slider.owl-carousel .img-thumbnail {
					border-radius: clamp(12px, 3vw, 25px);
					overflow: hidden;
				}
				.product-images .img-thumbnail .inner {border: none;}
				.product-thumbnails.thumbnails .owl-item .img-thumbnail {
					border-radius: clamp(12px, 3vw, 25px);
					overflow: hidden;
					border: 1px solid var(--bleu-profond) !important;
					aspect-ratio: 1 / 1;
				}
				.product-thumbs-slider.owl-carousel .owl-item img {
					width: 100%;
					aspect-ratio: 1 / 1;
					object-fit: cover;
				}

				.attribute-items div {
					padding: clamp(14px, 1.5vw, 18px);
					border-bottom: 1px solid var(--bleu-profond);
				}

				.product-description {
					border-bottom: 1px solid var(--bleu-profond);
					padding-bottom: clamp(16px, 2vw, 32px);
					margin-bottom: clamp(16px, 2vw, 32px);
				}

				/*=== CATÉGORIE DE PRODUITS ===*/
				.category-image {display: none;}
				.product_title.show-product-nav {padding-bottom: 35px;}

				.product-catalog ul.products li.product-col {
					max-width: calc(33.33% - 16px);
					/*min-height: 450px;*/
					background-color: white;
					margin-left: 8px;
					margin-right: 8px;
					border-radius: clamp(12px, 3vw, 25px);
					padding: 32px;
				}
				@media screen and (max-width: 1024px) and (min-width: 900px) {
					.product-catalog ul.products li.product-col {
						max-width: calc(50% - 16px);
					}
				}
				@media screen and (max-width: 900px) {
					.product-catalog ul.products li.product-col {
						max-width: 100%;
					}
				}

				.bg-blanc.product-sidebar.vc_column_container.col-md-3 {
					box-shadow: 5px 0 10px 0px rgba(var(--bleu-profond-rgb), 0.15);
				}
				.vc_column_container.product-sidebar {
					padding-top: clamp(32px, 3vw, 64px);
					padding-bottom: clamp(32px, 3vw, 64px);
				}
				.product-catalog.vc_column_container {
					padding-top: clamp(32px, 3vw, 64px);
					padding-bottom: clamp(32px, 3vw, 64px);
				}
				.product-catalog .porto-section.custom-product {
					background-color: white;
					padding: 32px;
					border-radius: clamp(12px, 3vw, 25px);
					text-align: center;
				}

				.woocommerce .woocommerce-widget-layered-nav-list:not(.filter-item-list) li a, .woocommerce .woocommerce-widget-layered-nav-list:not(.filter-item-list) li span, .woocommerce .yith-woo-ajax-navigation ul.yith-wcan-label li a, .woocommerce .yith-woo-ajax-navigation ul.yith-wcan-label li span, .woocommerce-page .woocommerce-widget-layered-nav-list:not(.filter-item-list) li a, .woocommerce-page .woocommerce-widget-layered-nav-list:not(.filter-item-list) li span, .woocommerce-page .yith-woo-ajax-navigation ul.yith-wcan-label li a, .woocommerce-page .yith-woo-ajax-navigation ul.yith-wcan-label li span {
					border: none;
					padding: 8px 0px;
					text-align: left;
					font-weight: 400;
					color: var(--bleu-profond);
					font-size: calc(15px + 2 * ((100vw - 320px) / 1120)) !important;
					line-height: calc(13px + 2 * ((100vw - 320px) / 1120)) !important;
				}
				h3.widget-title {
					font-size: calc(15px + 2 * ((100vw - 320px) / 1120)) !important;
					line-height: calc(13px + 2 * ((100vw - 320px) / 1120)) !important;
					font-weight: bold;
				}
				ul.products h3 {
					padding-top: clamp(16px, 3vw, 32px);
					white-space: pre-wrap !important;
				}
				.product-col .add-links-wrap {
					display: none;
				}
				h3.woocommerce-loop-product__title:hover, 
				.product-catalog ul.products li.product-col:hover h3.woocommerce-loop-product__title,
				ul.produits-filtrés li.product-col:hover h3 {
					background: linear-gradient(90deg, var(--bleu-rgb) 0%, var(--mauve-rgb) 50%, var(--rouge-rgb) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					color: transparent;
					font-weight: bold;
					width: fit-content;
					text-align: center !important;
					/*margin: auto;*/
				}
				.page-links span.current, .pagination span.current {background-color: var(--bleu-profond); border-color: var(--bleu-profond);}
				a.page-numbers {color: var(--bleu-profond);}

				/* APPLICATIONS / SECTEURS */

				.parent-pageid-8304 .page .wpb-content-wrapper > .vc_row:first-of-type /*anglais*/ {
					min-height: calc(2 * clamp(52px, 8.5vw, 140px) + 2 * clamp(32px, 3vw, 60px));
					display: flex;
					align-items: center;
				}


ul.produits-filtrés li {
  max-width: 300px;
  height: auto;
  list-style: none;
  text-align: center !important;
  font-weight: 400;
  font-size: clamp(16px, 2.8vw, 28px);
  line-height: clamp(22px, 3vw, 30px);
  letter-spacing: 0px;
}
ul.produits-filtrés li .product-inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 300px;
    padding: 16px;
    overflow: hidden;
}
ul.product h3,
ul.product h3,
ul.produits-filtrés li h3 {
	text-align: center !important;
	text-wrap: auto;
}
ul.produits-filtrés li .product-image {
    margin-bottom: 32px;
}

/* Masquer la catégorie */
ul.produits-filtrés li span.category-list {
  display: none;
}

/* Initialisation slick */
ul.produits-filtrés.slick-initialized {
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
}

/* Slides actifs dans slick */
ul.produits-filtrés.slick-initialized li {
  display: inline-block !important;
  width: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  min-width: 280px;
  box-sizing: border-box;
}


				/* FAQ */
				.toggle > label {
					width: 100% !important;
					border-left: none;
					color: transparent;
					font-size: clamp(16px, 2.8vw, 28px) !important;
					line-height: clamp(22px, 3vw, 30px) !important;
					font-weight: normal;
				}
				section.vc_do_toggle.toggle {background-color: var(--gris-1);}
				.toggle > label:hover {background: transparent !important;}
				section.toggle label:hover {
				  background: none !important;
				  -webkit-background-clip: initial !important;
				  -webkit-text-fill-color: var(--bleu-profond) !important; /* ou une autre couleur directe */
				  color: var(--bleu-profond) !important; /* fallback */
				}
				.toggle.active label {
					-webkit-text-fill-color: unset !important;
					background-color: var(--porto-primary-color) !important;
					/*background: none !important;*/
					-webkit-background-clip: unset !important;
					color: var(--porto-primary-color-inverse) !important; /* ou blanc ou noir selon ton contraste */
				}



		/* BLOGUE */
		span.porto-tb-meta.tb-meta-comments.porto-gb-9571c370f6633b72dfb3c05ba0ab1b9b, 
		span.porto-tb-meta.tb-meta-category.porto-gb-1ec839677d86bcc4b375502a08469d61, 
		span.porto-tb-meta.tb-meta-author.porto-gb-099e0006cacb80241edb21b01ea220f8 {
			display: none !important;
		}
		.porto-tb-meta {
			min-height: unset !important;
		}
		.page-wrapper .porto-gb-d55dce4bca12e9cbab8d5e3728822356 {
			background-color: var(--bleu-profond) !important;
			padding: 14px 24px !important;
			font-family: 'Inter', sans-serif !important;
			font-size: clamp(12px, 2.8vw, 17px) !important;
			font-weight: 400 !important;
			text-decoration: none !important;
			text-transform: none !important;
		}
.single-post span.meta-author, .single-post span.meta-cats {display: none;}

/* Background overley vidéo */
.section-video .video-overlay {
    background: none !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 29, 72, 0.5) !important;
}

/**** 6. ACCESSIBILITY ****/
:focus {
  outline: 3px solid var(--bleu); /* exemple de couleur visible */
  outline-offset: 2px;
}


/***** 7. CARRIÈRE *****/
article.aol_ad.type-aol_ad {
    padding-top: clamp(32px, 3vw, 96px) !important;
}