/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 15 2025 | 19:43:32 */
/* ==== SÉLECTEUR DE LANGUE ==== */
.wpml-ls-item-en > a::before { content: "En"; }
.wpml-ls-item-fr > a::before { content: "Fr"; }
.wpml-ls-item-es > a::before { content: "Es"; }

.wpml-ls-item > a span {display: none;}



/* FIN SÉLECTEUR DE LANGUE */

.menu-principal ul li {
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}
.porto-wide-sub-menu .menu-item {
    padding-bottom: clamp(13px, 1.8vw, 16px) !important;
}

/* TOP MENU */

@media screen and (max-width: 991px) {
	.top-menu, .mobile-hide {display: none !important;}
}
@media screen and (min-width: 991px) {
	.desktop-hide, .apropos-burger {display: none !important;}
	ul.sub-menu.porto-narrow-sub-menu.pos-left {display: none;}
}

.vc_row.top-menu {
    padding-top: 0px !important;
    padding-bottom: 4px !important;
}
.top-menu .wpb_wrapper.vc_column-inner {
    flex-direction: row-reverse;
}
.top-menu ul {margin-right: 0.875rem !important;}
.top-menu li.menu-item {padding: 0px !important;}

.top-menu .top-links > li.menu-item > a {
    padding-top: 8px !important;
    padding-bottom: 0px !important;
    height: auto;
    color: white !important;
    font-weight: 400 !important;
    font-size: 15px !important;
	line-height: 100% !important;
    text-transform: inherit;
}
.top-menu .top-links > li.menu-item > a:hover {color: var(--bleu-profond) !important;}

/* FIN TOP MENU */

#header .main-menu {width: auto; position: absolute; right: 0;}

.mega-menu.show-arrow>li.has-sub>a:after {
    content: "\f063" !important;
    font-family: 'FontAwesome' !important;
}

.vc_row.wpb_row.top-row.studio-reveal-header.menu-principal .menu-title.closed, .vc_row.wpb_row.top-row.studio-reveal-header.menu-principal a, .vc_row.wpb_row.top-row.studio-reveal-header.menu-principal li.wpml-ls-menu-item a, .vc_row.wpb_row.top-row.studio-reveal-header.menu-principal li.wpml-ls-menu-item, #header .main-menu>li.menu-item a, .custom-megamenu-wrapper li.vc_tta-tab, .custom-megamenu-wrapper li.vc_tta-tab ul.product-list-by-category li, .mega-menu .wpb_content_element li, .mega-menu .wpb_content_element li a {
	font-size: clamp(14px, 2.5vw, 17px) !important;
	line-height: clamp(19px, 2.7vw, 22px) !important;
	font-weight: 400 !important;
}

.vc_row.wpb_row.top-row.studio-reveal-header.menu-principal {
    padding: unset;
}

#header.header-builder-p .header-main .container>div {display: contents !important;}
.vc_row.wpb_row.top-row.studio-reveal-header.menu-principal .menu-title.closed, .vc_row.wpb_row.top-row.studio-reveal-header.menu-principal a, .vc_row.wpb_row.top-row.studio-reveal-header.menu-principal li.wpml-ls-menu-item a, .vc_row.wpb_row.top-row.studio-reveal-header.menu-principal li.wpml-ls-menu-item, #header .main-menu>li.menu-item a {
    color: var(--bleu-profond) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    text-transform: none;
    letter-spacing: 0px !important;
}
li.menu-item {padding-bottom: unset;}


/* ====== MÉGAMENU - APPLICATIONS ====== */
li.granular, li.powdered, li.foaming, li.cheese, li.pastes, li.sticky, li.liquid, li.solid {
	display: flex !important;
	align-items: center;
	padding: clamp(8px, 2.5vw, 16px);
}

li.granular::before, li.powdered::before, li.foaming::before, li.cheese::before, li.pastes::before, li.sticky::before, li.liquid::before, li.solid::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-right: 12px;
}
li.granular::before {background-image: url('/wp-content/uploads/2025/04/Icon-noix-Hover.svg');}
li.powdered::before {background-image: url('/wp-content/uploads/2025/04/Icon-poudre-Hover.svg');}
li.foaming::before {background-image: url('/wp-content/uploads/2025/04/Icon-mousse-Hover.svg');}
li.cheese::before {background-image: url('/wp-content/uploads/2025/04/Icon-fromage-Hover.svg');}
li.pastes::before {background-image: url('/wp-content/uploads/2025/04/Icon-pateux-Hover.svg');}
li.sticky::before {background-image: url('/wp-content/uploads/2025/04/Icon-collant-Hover.svg');}
li.liquid::before {background-image: url('/wp-content/uploads/2025/04/Icon-liquide-Hover.svg');}
li.solid::before {background-image: url('/wp-content/uploads/2025/04/Icon-saumure-Hover.svg');}

/* === FIN MENU APPLICATION === */



/*=== MÉGA MENU MACHINES === */
.mega-menu>li.menu-item:hover .popup {top: calc(100% - 3px) !important;}

/* Desktop uniquement : on laisse le JS gérer l’ouverture */
@media (min-width: 992px) {
	/* Masquer tous les sous-mégamenus par défaut "anti-flash" */
  .custom-megamenu-wrapper {
    display: none !important;
    visibility: hidden;
    opacity: 0;
  }
	/* Quand le JS l’ouvre */
  .custom-megamenu-wrapper[aria-hidden="false"] {
    display: block !important;
    visibility: visible;
    opacity: 1;
  }
}

/* Fallback CSS au survol – desktop uniquement, périphériques avec vrai hover */
@media (min-width: 992px) and (hover: hover) {
  li.menu-item-has-children:hover > .custom-megamenu-wrapper,
  .has-megamenu:hover > .custom-megamenu-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
	li.has-megamenu a {padding-left: 250px !important;}
	li.has-megamenu ul li a {padding-left: unset !important;}
}

/* Mobile : on laisse Porto afficher le contenu dans l’accordéon */
@media (max-width: 991.98px) {
  .custom-megamenu-wrapper {
    display: block !important;
    visibility: visible;
    opacity: 1;
    position: static !important;   /* évite left/top calculés */
    width: auto !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none;               /* optionnel : look mobile plus simple */
  }
}


/* Bloc container du mega menu */
.custom-megamenu-wrapper {
  position: absolute;
  top: auto; /* calculé en JS */
  right: auto; /* Éviter le conflit */
  width: auto; /* Fixé en JS */
  max-width: none; /* Pas de contrainte Bootstrap */
  padding: 0px 32px;
  background: #fff;
  z-index: 999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Aligner le contenu WPBakery dans le mégamenu */
.custom-megamenu-wrapper .vc_row {
  margin: 0 auto;
  padding: 0 30px;
}
.custom-megamenu-wrapper .vc_row.wpb_row.row.top-row .vc_tta-container {
    width: 100%;
}

/* Affiche au hover du parent menu */
li.menu-item-has-children:hover > .custom-megamenu-wrapper,
.has-megamenu:hover > .custom-megamenu-wrapper {
  display: block;
}


/* Facultatif : désactive la largeur forcée si trop grande */
@media (max-width: 991px) {
  .custom-megamenu-wrapper {
    position: static;
    width: 100%;
    padding: 0;
    box-shadow: none;
  }
}

.no-link > a {
  pointer-events: none;
  cursor: default;
  color: transparent;
}

/* TABS */
.has-megamenu .vc_tta-panel-body {
    padding-left: 32px !important;
}

@media screen and (max-width: 990px) {
	.has-megamenu .vc_tta-panel-body {padding-left: unset !important;}
	#header .mobile-toggle {
		cursor: pointer;
		padding: 7px 13px;
		text-align: center;
		font-size: 13px;
		vertical-align: middle;
		margin: 8px 0 8px 1em;
		line-height: 20px;
		border-radius: 100%;
		right: 0px !important;
		position: relative;
		margin-right: 0px !important;
		margin-left: auto;
		background-color: transparent !important;
		border: 1px solid var(--bleu-profond);
	}
	
}

.custom-megamenu-wrapper .vc_tta-panel-body,
.custom-megamenu-wrapper .vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels,
.custom-megamenu-wrapper .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active>a,
.custom-megamenu-wrapper .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a {
    background-color: transparent !important;
	border: none !important;
}

/* nom des tabs */
.custom-megamenu-wrapper li.vc_tta-tab a, 
.custom-megamenu-wrapper .vc_tta.vc_general .vc_tta-tab.vc_active>a,
.custom-megamenu-wrapper .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a,
.custom-megamenu-wrapper ul.product-list-by-category {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.custom-megamenu-wrapper li.vc_tta-tab a span, 
.custom-megamenu-wrapper .vc_tta.vc_general .vc_tta-tab.vc_active>a span,
.custom-megamenu-wrapper .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a span {
	color: var(--bleu-profond) !important;
}

.custom-megamenu-wrapper ul li a span.vc_tta-title-text {
    background: none !important;
    color: var(--bleu-profond) !important;
    -webkit-text-fill-color: var(--bleu-profond) !important;
    font-weight: 400 !important;
    line-height: 110% !important;
}
.custom-megamenu-wrapper ul li a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

		/* Soulignement uniquement au hover OU si actif */
		.vc_tta-tabs.vc_tta-tabs-position-left .vc_tta-tab > a:hover::after,
		.vc_tta-tabs.vc_tta-tabs-position-left .vc_tta-tab.vc_active > a::after {
		  content: "" !important;
		  position: absolute !important;
		  bottom: -2px;
		  left: 0 !important;
		  width: 100% !important;
		  height: 2px !important;
		  background: linear-gradient(90deg, var(--bleu-rgb) 0%, var(--mauve-rgb) 50%, var(--rouge-rgb) 100%);
		  transform: scaleX(1);
		}

		/* Ne rien afficher par défaut */
		.vc_tta-tabs.vc_tta-tabs-position-left .vc_tta-tab > a::after {
		  content: "";
		  position: absolute;
		  bottom: -2px;
		  left: 0;
		  width: 100%;
		  height: 2px;
		  background: transparent;
		  transform: scaleX(0);
		  transition: transform 0.3s ease-in-out;
		}

				/* État par défaut : aucune bordure */
				.product-list-by-category li a {
				  position: relative;
				  display: inline-block;
				  text-decoration: none;
				}

				.product-list-by-category li a::after {
				  content: "";
				  position: absolute;
				  bottom: -2px;
				  left: 0;
				  width: 100%;
				  height: 2px;
				  background: linear-gradient(90deg, var(--bleu-rgb) 0%, var(--mauve-rgb) 50%, var(--rouge-rgb) 100%);
				  transform: scaleX(0);
				  transform-origin: left;
				  transition: transform 0.3s ease-in-out;
				}

				/* Au hover uniquement */
				.product-list-by-category li a:hover::after {
				  transform: scaleX(1);
				}



		/***fin des bordures***/

/* contenu du tab */
.surtitre-menu, .custom-megamenu-wrapper .vc_tta-tabs-container:before {
	background: linear-gradient(
		90deg,
		var(--bleu-rgb) 0%,
		#1999d4 40%, /* bleu moyen */
		#3d5ca7 80%, /* bleu foncé avec une teinte mauve */
		var(--mauve-rgb) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-weight: bold;
	width: fit-content;
	text-transform: uppercase;
	font-weight: 600;
	font-size: clamp(14px, 2.5vw, 17px) !important;
	line-height: clamp(19px, 2.7vw, 22px) !important;
	letter-spacing: 0px;
}
/* EN (langue par défaut) */
.custom-megamenu-wrapper .vc_tta-tabs-container:before {content: "Machine types";}

/* FR */
html[lang="fr-FR"] .custom-megamenu-wrapper .vc_tta-tabs-container:before {content: "Types de machines";}

/* ES */
html[lang="es-ES"] .custom-megamenu-wrapper .vc_tta-tabs-container:before {content: "Tipos de máquinas";}


/*.custom-megamenu-wrapper .vc_tta-shape-rounded:not(.vc_tta-o-no-fill) .vc_tta-panel.vc_active .vc_tta-panel-body {padding-top: 25px !important;}*/
.custom-megamenu-wrapper .vc_tta.vc_general .vc_tta-panel-body>:last-child {padding: unset !important;}
.bg-image-menu {
	background-repeat: no-repeat !important;
    background-size: cover !important;
	background-position: center center !important;
	border-radius: 0px !important;
}


@media (min-width: 992px) {
  #header,
  #header .header-main,
  #header .container,
  #header .porto-wrap-container { overflow: visible !important; }

  .custom-megamenu-wrapper { z-index: 10030 !important; }
}



/*============================*/

@media (min-width: 1280px) /*1160px*/{
	.has-megamenu .vc_tta-tabs-container {max-width: 33% !important;}
}

@media screen and (min-width: 1280px) /*1160px*/and (max-height: 800px) {
	.has-megamenu .vc_tta-tabs.vc_tta-tabs-position-left .vc_tta-panels-container {overflow-y: scroll; overflow-x: hidden;}
}

@media (max-width: 1280px) /*1160px*/ {
	.bg-image-menu {display: none !important;}
	.model.col-md-2-5 {width: auto !important;}
}

/* ===========================================================
   MOBILE & TABLET (burger) — vraies sous‑menus ON, wrapper OFF
   + flèche Porto cliquable
   =========================================================== */
@media (max-width: 991.98px) {
	
	.mobile-toggle i.fas.fa-bars {color: var(--bleu-profond) !important;}

  /* 1) Couper totalement le wrapper custom (ne doit pas recevoir de clics) */
  .custom-megamenu-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    z-index: auto !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  /* 2) Forcer l'affichage des sous‑menus Porto natifs dans le burger */
  ul.sub-menu.porto-narrow-sub-menu.pos-left {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 3) Masquer les items “placeholder” du mégamenu en burger */
  .mobile-nav-wrap .insert-megamenu,
  .mobile-nav-wrap .no-link,
  .mobile-nav-wrap .mobile-hide {
    display: none !important;
  }

  /* 4) S’assurer que les vraies entrées (marquées desktop-hide) sont visibles */
  .mobile-nav-wrap .desktop-hide {
    display: list-item !important;
  }

  /* 5) Flèche d’accordéon : cliquable + bleue + espace à droite */
/*  .mobile-nav-wrap .menu-item-has-children.has-sub {
    display: flex;
    align-items: center;
    position: relative;
  }

  .mobile-nav-wrap .menu-item-has-children.has-sub > .arrow {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }*/
  .mobile-nav-wrap .accordion-menu li.menu-item > a {
    position: relative;
    padding-right: 36px !important; /* espace pour la flèche */
  }
  .mobile-nav-wrap .accordion-menu .arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    position: absolute;
    right: 8px; top: 50% !important;
    transform: translateY(-50%);
    color: var(--bleu-profond) !important;
    pointer-events: auto !important; /* clé: l'accordéon Porto écoute le clic ici */
    z-index: 2;
  }
}

/* === MOBILE/TABLET — alignement parfait des flèches + scroll dans le menu === */
@media (max-width: 991.98px) {
  /* 1) La flèche doit être centrée sur CHAQUE ligne et rester cliquable */
  .mobile-nav-wrap .accordion-menu li.menu-item { 
    position: relative;               /* -> référentiel pour la flèche */
  }
  .mobile-nav-wrap .accordion-menu li.menu-item > a {
    display: flex;
	align-items: center !important;
	gap: 10px;
    padding-right: 14px 16px !important;   /* réserve l'espace flèche */
    line-height: 1.25;                 /* cohérent multi-lignes */
	min-height: 48px; /* hit area confortable et constante */
  }
  .mobile-nav-wrap .accordion-menu li.menu-item > a > .arrow {
    /* positionnée par rapport au <li> grâce à position:relative ci-dessus */
    position: static !important;      /* plus d'absolu */
    transform: none !important;
    margin-left: auto !important;     /* pousse à droite */
    width: 22px; 
    height: 22px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--bleu-profond) !important;
    pointer-events: auto !important;  /* Porto capte le clic ici */
    /*z-index: 2;*/
  }
	/* Optionnel : rotation si Porto ajoute une classe "open"/"active" */
	.mobile-nav-wrap .accordion-menu li.open > a > .arrow,
	.mobile-nav-wrap .accordion-menu li.active > a > .arrow {
		transform: rotate(180deg) !important;
	}

  /* 2) Défilement fluide du panneau mobile (iOS inclus) */
  :root { --cg-mobile-header: 96px; }  /* ajuste si ton header est plus haut */
  #nav-panel .accordion-menu,
  .mobile-nav-wrap .accordion-menu {
    max-height: calc(100vh - var(--cg-mobile-header));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* inertie iOS */
  }

  /* 3) Petit confort : évite que le dernier item colle au bord du viewport */
  #nav-panel .accordion-menu > li:last-child > a { margin-bottom: 14px; }
}

/* ============================ */


/* === MINI PATCH - 03-09-2025 === */
/* Kill du popup étroit de Porto sur les items avec megamenu custom (desktop) */
@media (min-width: 992px) {
  #header .main-menu > li.has-megamenu > .popup,
  #header .main-menu > li.has-megamenu:hover > .popup,
  #header .main-menu > li.has-megamenu.is-mega-open > .popup {
    display: none !important;
  }

  /* Par sécurité, on masque aussi le "placeholder" si Porto tente de l'afficher hors contexte */
  #header .main-menu > li.has-megamenu .insert-megamenu.no-link {
    display: none !important;
  }

  /* Visibilité du wrapper custom gouvernée par [aria-hidden] */
  .custom-megamenu-wrapper { display: none; visibility: hidden; opacity: 0; }
  .custom-megamenu-wrapper[aria-hidden="false"] {
    display: block !important; visibility: visible; opacity: 1;
  }
}
/* === FIN PATCH 03-09-2025 === */