/* ============================================================
 * ACTILAB — Menu mobile unifié (Max Mega Menu)
 * ------------------------------------------------------------
 * Principe : en mobile (<=767px, breakpoint aligné avec le thème
 * ET le réglage MMM "responsive_breakpoint"), seul le menu
 * "Menu Actilab" (Max Mega Menu) est affiché. L'off-canvas maison
 * du thème mymedi et son burger sont désactivés.
 * Toute la personnalisation Actilab vit ICI (thème enfant),
 * jamais dans le parent ni dans le CSS Customizer.
 * ============================================================ */

/* ---------- Desktop : pastilles Particulier / Professionnel ----
 * Migré depuis mymedi/style.css (fin de fichier) pour survivre
 * aux mises à jour du thème parent. Inchangé visuellement. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-particulier > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-pro > a.mega-menu-link {
	color: #fff !important;
	border-radius: 10px;
	padding: 8px 22px;
	margin: 4px 6px;
	/* Annule le height:40px / line-height:40px du CSS généré MMM :
	 * hauteur pilotée par le padding (8+24+8 = 40px, aligné aux voisins). */
	height: auto;
	line-height: 24px;
}
/* Particulier : vert */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-particulier > a.mega-menu-link {
	background: #0D8A6F !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-particulier > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-particulier.mega-toggle-on > a.mega-menu-link {
	background: #0B755E !important;
}
/* Professionnel : bleu du theme */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-pro > a.mega-menu-link {
	background: #103178 !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-pro > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-pro.mega-toggle-on > a.mega-menu-link {
	background: #0C265E !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-particulier,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-pro {
	margin: 4px 10px;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.actilab-particulier > ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.actilab-particulier > ul.mega-sub-menu ul.mega-sub-menu {
	background: #0d8a6f !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ================= MOBILE (<=767px) : TOP BAR =====================
 * Le thème la masque (.hidden-phone) : on l'affiche en version
 * compacte "téléphone seul", centrée, aux couleurs de la marque. */
@media only screen and (max-width: 767px) {

	.ts-header .header-top.hidden-phone {
		display: block !important;
		background: #103178;
		border: 0;
		padding: 0;
	}
	.ts-header .header-top.hidden-phone .container {
		display: block;
		text-align: center;
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.ts-header .header-top.hidden-phone .container > *:not(strong) {
		display: none !important;
	}
	.ts-header .header-top.hidden-phone a[href^="tel:"] {
		color: #fff !important;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

} /* fin MOBILE : TOP BAR */

/* ================= MOBILE (<=767px) : BARRE LOGO ==================
 * Architecture standard e-commerce : [burger] [logo] [recherche+CTA].
 * Le burger custom pilote le toggle MMM natif (header-mobile.js). */
@media only screen and (max-width: 767px) {

	.ts-header .header-middle .container {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	/* Burger custom (bouton.visible-phone du template enfant).
	 * Spécificité renforcée : le parent impose
	 * ".header-sticky .container > .visible-phone" en table-cell. */
	.ts-header .header-sticky .header-middle .container > .actilab-burger.visible-phone {
		display: inline-flex !important;
		order: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}
	.ts-header .header-middle .actilab-burger span {
		display: block;
		width: 24px;
		height: 3px;
		border-radius: 2px;
		background: #FF9923;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	.ts-header .header-middle .actilab-burger.open span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	.ts-header .header-middle .actilab-burger.open span:nth-child(2) {
		opacity: 0;
	}
	.ts-header .header-middle .actilab-burger.open span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	.ts-header .header-middle .logo-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		order: 2;
	}
	.ts-header .header-middle .logo-wrapper .logo {
		text-align: center;
	}
	/* Logo mobile : 240px (CSS Customizer) -> 150px, jamais supprimé. */
	.ts-header .header-middle .logo-wrapper .logo img.mobile-logo {
		width: 150px !important;
		max-width: 40vw;
		height: auto;
	}
	/* Slogan : desktop uniquement. */
	.ts-header .header-middle .logo-wrapper .logo-tagline {
		display: none !important;
	}
	/* header-right dissous (display:contents) : ses enfants deviennent
	 * des items directs de la barre -> grille 2 rangées :
	 * [burger][logo][recherche] / [CTA catalogue pleine largeur]. */
	.ts-header .header-middle .header-right {
		display: contents;
	}
	/* CTA catalogue : 2e rangée, pastille pleine largeur centrée. */
	.ts-header .header-middle .header-right > div:first-child {
		order: 4;
		flex: 1 1 100%;
		text-align: center;
	}
	.ts-header .header-middle .header-right > div:first-child a {
		display: block;
		background: #103178;
		color: #fff !important;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		white-space: nowrap;
		padding: 10px 13px;
		border-radius: 8px;
	}
	/* Loupe du thème : masquée (toggle mort + panneau display:none),
	 * SAUF si Algolia n'a pas monté (body.no-algolia, voir JS). */
	.ts-header .header-middle .header-right .search-button.search-icon {
		display: none !important;
	}
	body.no-algolia .ts-header .header-middle .header-right .search-button.search-icon {
		display: block !important;
	}
	/* Bouton Algolia (monté en JS) : taille adaptée. */
	.ts-header .header-middle .container > div:has(.ais-AutocompleteDetachedSearchButton) {
		order: 3;
		flex: 0 0 auto;
	}
	.ts-header .header-middle .ais-AutocompleteDetachedSearchButton {
		padding: 6px 10px;
		font-size: 13px;
		max-width: 40vw;
	}
	.ts-header .header-middle .ais-AutocompleteDetachedSearchButtonIcon svg {
		width: 18px;
		height: 18px;
	}

} /* fin MOBILE : BARRE LOGO */

/* ================= MOBILE (<=767px) : STICKY ======================
 * Le CSS Customizer masque .header-middle quand sticky (règle legacy
 * pensée desktop : ne garder que la rangée menu). Sur mobile ça ne
 * laisse qu'une rangée vide de 19px. Comportement standard e-commerce :
 * barre logo compacte collée (burger+logo+recherche, sans CTA),
 * rangée menu masquée sauf panneau ouvert. */
@media only screen and (max-width: 767px) {

	.sticky-wrapper.is-sticky .header-middle.has-icon-menu-sticky-header {
		display: block !important;
	}
	.sticky-wrapper.is-sticky .header-top.hidden-phone {
		display: none !important;
	}
	/* CTA catalogue : pas dans la barre collée. */
	.sticky-wrapper.is-sticky .header-middle .header-right > div:first-child {
		display: none !important;
	}
	/* Rangée menu : masquée en sticky, SAUF panneau ouvert
	 * (classe posée par header-mobile.js avant l'ouverture). */
	.sticky-wrapper.is-sticky .header-bottom.hidden-phone {
		display: none !important;
	}
	body.actilab-menu-open .sticky-wrapper.is-sticky .header-bottom.hidden-phone,
	body.mega-menu-primary-mobile-open .sticky-wrapper.is-sticky .header-bottom.hidden-phone {
		display: block !important;
	}
	/* Logo sticky du thème (img.sticky-logo, même fichier) : même taille. */
	.sticky-wrapper.is-sticky .header-middle .logo-wrapper .logo img.sticky-logo {
		width: 150px !important;
		max-width: 40vw;
		height: auto;
	}

} /* fin MOBILE : STICKY */

/* Très petits écrans (<=480px) : recherche en icône seule pour
 * tenir le budget 360px : [burger 44][logo ~140][CTA+loupe]. */
@media only screen and (max-width: 480px) {

	.ts-header .header-middle .ais-AutocompleteDetachedSearchButtonPlaceholder,
	.ts-header .header-middle .ais-AutocompleteDetachedSearchButtonQuery {
		display: none !important;
	}
	.ts-header .header-middle .ais-AutocompleteDetachedSearchButton {
		max-width: none;
	}

} /* fin TRES PETITS ECRANS */

/* ================= MOBILE (<=767px) : MENU ================= */
@media only screen and (max-width: 767px) {

	/* 1. Rangée header du menu : visible en mobile.
	 * Remplace le hack global ".header-bottom.hidden-phone" qui
	 * traînait dans le CSS Customizer (à supprimer là-bas). */
	.ts-header .header-bottom.hidden-phone {
		display: block !important;
		padding: 0;
		border: 0;
	}
	.ts-header .header-bottom.hidden-phone .menu-wrapper,
	.ts-header .header-bottom.hidden-phone .menu-wrapper .ts-menu,
	.ts-header .header-bottom.hidden-phone .menu-wrapper center {
		display: block;
		padding: 0;
	}

	/* 2. Off-canvas maison désactivé (vieux "Menu mobile"). */
	#group-icon-header.mobile-menu-wrapper {
		display: none !important;
	}

	/* 3. Bottom-bar : on garde les raccourcis (home, wishlist,
	 * panier...), on retire uniquement le burger de l'off-canvas. */
	#ts-group-icons-header .ts-group-meta-icon-toggle {
		display: none !important;
	}

	/* 4. Toggle MMM natif : invisible mais PRÉSENT en layout.
	 * Le burger custom (barre logo) déclenche son click via JS.
	 * Surtout pas de display:none : le JS MMM refuse show/hide
	 * quand le toggle est :hidden (gardes is(":visible")). */
	#mega-menu-wrap-primary .mega-menu-toggle {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: 0 !important;
		opacity: 0 !important;
		pointer-events: none !important;
		overflow: hidden !important;
	}

	/* 5. Pastilles N1 pleine largeur dans le panneau mobile. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-particulier,
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-pro {
		margin: 6px 12px;
	}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-particulier > a.mega-menu-link,
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.actilab-pro > a.mega-menu-link {
		display: block;
		text-align: center;
	}

	/* 6. Sous-menus du panneau mobile : fond clair lisible
	 * (le fond vert plein du desktop est illisible en accordéon). */
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.actilab-particulier > ul.mega-sub-menu,
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.actilab-particulier > ul.mega-sub-menu ul.mega-sub-menu {
		background: #ffffff !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.actilab-particulier > ul.mega-sub-menu a.mega-menu-link {
		color: #0D8A6F !important;
	}

	/* 7. Panneau mobile scrollable : ne passe plus sous la bottom-bar. */
	#mega-menu-wrap-primary #mega-menu-primary {
		max-height: calc(100dvh - 220px);
		max-height: calc(100vh - 220px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}