/*
 * Points de rupture : ceux du kit Elementor du site, tablette sous 1124 px,
 * mobile sous 767 px (et non 1024 px, la valeur par defaut d'Elementor).
 *
 * Mega-menu leger : le sous-menu « Solutions & realisations » du menu principal
 * s'affiche en panneau a deux colonnes, avec un bandeau en bas.
 *
 * Les entrees portent leurs classes dans Apparence > Menus (script
 * _tools/menu/menu-principal.php) : mega-solutions (item de premier niveau),
 * mega-titre, mega-col-1, mega-col-2, mega-lien, mega-bas.
 *
 * SmartMenus (menu Elementor) ouvre un sous-menu en lui posant
 * aria-expanded="true" et un display:block en ligne : la grille ne s'applique qu'a
 * ce moment-la, sans quoi le panneau resterait visible ferme. Sur mobile, le menu
 * deroulant reste une liste, seuls les titres de colonne y sont mis en forme.
 */

.elementor-nav-menu--main .mega-solutions > .sub-menu[aria-expanded="true"] {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row dense;
	column-gap: 18px;
	width: 600px !important;
	min-width: 0 !important;
	max-width: calc(100vw - 32px) !important;
	padding: 18px !important;
	background: #FFFFFF;
	border: 1px solid #EEF0F3;
	border-radius: 16px;
	box-shadow: 0 24px 50px -18px #0F294740;
}

.elementor-nav-menu--main .mega-solutions > .sub-menu > .mega-col-1 {
	grid-column: 1;
}

.elementor-nav-menu--main .mega-solutions > .sub-menu > .mega-col-2 {
	grid-column: 2;
}

.elementor-nav-menu--main .mega-solutions > .sub-menu > .mega-bas {
	grid-column: 1 / -1;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #EEF0F3;
}

.elementor-nav-menu--main .mega-solutions > .sub-menu a.elementor-sub-item {
	padding: 8px 12px !important;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.35;
	white-space: normal;
}

/* Titres de colonne. */
.elementor-nav-menu--main .mega-solutions .mega-titre > a.elementor-sub-item {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #005654;
	background: #E0F2F1;
}

.elementor-nav-menu--main .mega-solutions .mega-titre > a.elementor-sub-item:hover,
.elementor-nav-menu--main .mega-solutions .mega-titre > a.elementor-sub-item:focus-visible {
	color: #FFFFFF;
	background: #007371;
}

/* « Voir tout » en bas de colonne. */
.elementor-nav-menu--main .mega-solutions .mega-lien > a.elementor-sub-item {
	margin-top: 4px;
	font-weight: 600;
}

.elementor-nav-menu--main .mega-solutions .mega-lien > a.elementor-sub-item::after,
.elementor-nav-menu--main .mega-solutions .mega-bas > a.elementor-sub-item::after {
	content: "\00a0\2192";
}

.elementor-nav-menu--main .mega-solutions .mega-bas > a.elementor-sub-item {
	font-weight: 600;
}

/* Menu deroulant (mobile, tablette) : titres de colonne en intertitres. */
.elementor-nav-menu--dropdown .mega-solutions .mega-titre > a {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* =====================================================================
 * Variante « widget Méga menu » d'Elementor Pro (classe hc-mega), en-tete
 * genere par _tools/menu/entete-mega-menu.php. Chaque panneau est un conteneur
 * .mm-panneau ; ses liens sont du HTML (mm-surtitre, mm-liste, mm-titre,
 * mm-desc, mm-tout, mm-bas).
 * ===================================================================== */

/* !important : le widget pose ses valeurs par defaut avec un selecteur plus precis. */
.elementor-widget-mega-menu.hc-mega {
	--n-menu-title-color-normal: #007371 !important;
	--n-menu-title-color-hover: #FFFFFF !important;
	--n-menu-title-color-active: #005654 !important;
	--n-menu-title-font-size: 16px !important;
	--n-menu-title-padding: 10px 14px !important;
	--n-menu-title-space-between: 2px !important;
	--n-menu-dropdown-indicator-size: 10px !important;
	--n-menu-dropdown-indicator-color-normal: #007371 !important;
	--n-menu-dropdown-indicator-color-hover: #FFFFFF !important;
	--n-menu-dropdown-indicator-color-active: #FFFFFF !important;
	--n-menu-title-distance-from-content: 10px !important;
}

.hc-mega .e-n-menu-title {
	font-family: Roboto, sans-serif;
	font-weight: 500;
	border-radius: 8px;
	transition: background .2s;
}

/* Le widget redeclare ses variables de couleur sur chaque item : couleurs posees
   directement sur le texte et la fleche. */
.hc-mega .e-n-menu-title-text {
	color: #007371 !important;
}

.hc-mega .e-n-menu-dropdown-icon svg {
	width: 10px;
	height: 14px;
	fill: #007371 !important;
}

.hc-mega .e-n-menu-dropdown-icon {
	margin-inline-start: 2px;
}

/* Pas de mise en avant de la page courante ; « Aide en ligne » (lien externe de
   prise en main a distance) en gras. */
.hc-mega a[href*="898.tv"] .e-n-menu-title-text {
	font-weight: 700;
}

@media (min-width: 1125px) {
	/* Le menu prend l'espace entre le logo et les icones, items alignes a droite,
	   contre LinkedIn et Instagram. */
	.elementor-element.hc-mega {
		flex: 1 1 auto;
		margin-inline-end: 20px;
	}

	.elementor-widget-mega-menu.hc-mega {
		--n-menu-heading-justify-content: flex-end !important;
	}

	.hc-mega .e-n-menu-heading {
		justify-content: flex-end;
	}

	.hc-mega .e-n-menu-title:hover,
	.hc-mega .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"]) {
		background: #007371;
	}

	.hc-mega .e-n-menu-title:hover .e-n-menu-title-text,
	.hc-mega .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"]) .e-n-menu-title-text {
		color: #FFFFFF !important;
	}

	.hc-mega .e-n-menu-title:hover svg,
	.hc-mega .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"]) svg {
		fill: #FFFFFF !important;
	}

	.hc-mega .mm-panneau {
		--padding-top: 22px;
		--padding-right: 22px;
		--padding-bottom: 18px;
		--padding-left: 22px;
		background: #FFFFFF;
		border: 1px solid #EEF0F3;
		border-radius: 16px;
		box-shadow: 0 24px 50px -18px #0F294740;
	}
}

.hc-mega .mm-surtitre {
	margin: 0 0 6px;
	padding: 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #42A8A5;
}

.hc-mega .mm-liste {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-mega .mm-liste a {
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
	transition: background .2s;
}

.hc-mega .mm-liste a:hover,
.hc-mega .mm-liste a:focus-visible {
	background: #F2F9F8;
}

.hc-mega .mm-titre {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #1F2937;
}

.hc-mega .mm-liste a:hover .mm-titre {
	color: #005654;
}

.hc-mega .mm-desc {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.45;
	color: #6B7280;
}

.hc-mega .mm-tout {
	margin: 6px 0 0;
	padding: 0 10px;
}

.hc-mega .mm-tout a,
.hc-mega .mm-bas a {
	font-size: 14px;
	font-weight: 600;
	color: #007371;
	text-decoration: none;
}

.hc-mega .mm-tout a::after,
.hc-mega .mm-bas a::after {
	content: "\00a0\2192";
}

.hc-mega .mm-tout a:hover,
.hc-mega .mm-bas a:hover {
	text-decoration: underline;
}

.hc-mega .mm-bas {
	margin: 0;
	padding: 12px 10px 0;
	border-top: 1px solid #EEF0F3;
}

/* Icones des reseaux toujours cote a cote, menu toujours sur une ligne. */
@media (min-width: 1125px) {
	.elementor-location-header .elementor-widget-social-icons {
		flex-shrink: 0;
	}

	.elementor-location-header .elementor-social-icons-wrapper {
		display: flex;
		flex-wrap: nowrap;
	}

	.hc-mega .e-n-menu-heading {
		flex-wrap: nowrap !important;
	}
}

/* Petits ecrans d'ordinateur (1125 a 1320 px) : logo et items resserres. */
@media (min-width: 1125px) and (max-width: 1320px) {
	.elementor-location-header .elementor-widget-theme-site-logo img {
		max-width: 210px;
	}

	.hc-mega .e-n-menu-title {
		padding: 10px 9px !important;
	}

	.hc-mega .e-n-menu-title-text {
		font-size: 15px !important;
	}

	.elementor-element.hc-mega {
		margin-inline-end: 12px;
	}
}

/* Menu deroulant (tablette, mobile) : bouton menu sarcelle a droite, panneau
   blanc a lignes separees, fleches en pastilles bien cliquables, contenus a plat. */
@media (max-width: 1124px) {
	.elementor-widget-mega-menu.hc-mega {
		--n-menu-toggle-icon-color: #007371 !important;
		--n-menu-toggle-icon-color-hover: #005654 !important;
		--n-menu-toggle-icon-color-active: #005654 !important;
		--n-menu-toggle-icon-size: 26px !important;
		--n-menu-toggle-align: flex-end !important;
		/* Sans ecart entre l'item et son panneau : il laissait voir la page dessous. */
		--n-menu-title-distance-from-content: 0px !important;
	}

	.hc-mega .e-n-menu-content {
		background: #FFFFFF;
	}

	.hc-mega .e-n-menu-toggle {
		margin-inline-start: auto;
		padding: 8px;
		border-radius: 10px;
		transition: background .2s;
	}

	.hc-mega .e-n-menu-toggle:hover,
	.hc-mega .e-n-menu-toggle[aria-expanded="true"] {
		background: #E0F2F1;
	}

	.hc-mega .e-n-menu-toggle svg {
		fill: #007371 !important;
	}

	.hc-mega .e-n-menu-wrapper {
		background: #FFFFFF;
		border-top: 1px solid #EEF0F3;
		box-shadow: 0 18px 30px -16px #0F294740;
	}

	.hc-mega .e-n-menu-heading > .e-n-menu-item {
		border-bottom: 1px solid #EEF0F3;
	}

	.hc-mega .e-n-menu-title {
		width: 100%;
		justify-content: space-between;
		padding: 8px 12px 8px 20px;
		border-radius: 0;
	}

	.hc-mega .e-n-menu-title-container {
		flex: 1 1 auto;
	}

	.hc-mega .e-n-menu-title-text {
		font-size: 17px;
	}

	.hc-mega .e-n-menu-dropdown-icon {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px !important;
		height: 40px !important;
		flex: 0 0 40px;
		border-radius: 10px !important;
		background: #E0F2F1 !important;
		transition: background .2s;
	}

	.hc-mega .e-n-menu-dropdown-icon svg {
		width: 13px;
		height: 18px;
	}

	.hc-mega .e-n-menu-dropdown-icon[aria-expanded="true"] {
		background: #007371 !important;
	}

	.hc-mega .e-n-menu-dropdown-icon[aria-expanded="true"] svg {
		fill: #FFFFFF !important;
	}

	/* Le panneau garde sinon la largeur « ajustee au contenu » du bureau. */
	.hc-mega .e-n-menu-content > .e-con,
	.hc-mega .mm-panneau .e-con {
		--width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.hc-mega .mm-panneau {
		--padding-top: 10px;
		--padding-right: 12px;
		--padding-bottom: 14px;
		--padding-left: 12px;
		background: #F7F8FA;
	}

	.hc-mega .mm-surtitre {
		margin-top: 6px;
	}
}

/* Tablette : les colonnes du panneau restent cote a cote. */
@media (min-width: 768px) and (max-width: 1124px) {
	.hc-mega .mm-panneau > .e-con {
		--flex-direction: row !important;
		flex-direction: row !important;
	}

	.hc-mega .mm-panneau > .e-con > .e-con {
		--width: auto !important;
		width: auto !important;
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

/* Telephone : liste compacte, sans les descriptions. */
@media (max-width: 767px) {
	.hc-mega .mm-desc {
		display: none;
	}

	.hc-mega .mm-liste a {
		padding: 9px 10px;
	}

	.hc-mega .mm-titre {
		font-size: 15.5px;
		font-weight: 500;
	}
}