/*
 * En-tête MATRYS : pilule flottante (ordinateur et tablette), barre blanche bord à bord
 * sur mobile, tiroir hors champ (off-canvas Astra) redessiné. Squelette issu du
 * chantier Indiya Charms, généralisé : jetons --mx-* de style.css, aucune couleur en dur.
 *
 * Réglages Astra attendus (import-astra-settings) : mobile-header-type off-canvas,
 * off-canvas-slide right, header-mobile-items.popup = [mobile-menu, button-1], menu
 * affecté à l'emplacement mobile_menu (sinon WordPress liste toutes les pages),
 * mobile-header-breakpoint 1200.
 *
 * Structure Astra 4.x :
 *   #masthead .ast-primary-header-bar .ast-builder-grid-row-container   (ordinateur : la pilule)
 *   #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row     (mobile : pas de container, la ligne fait pilule)
 *   #ast-mobile-popup                                                    (tiroir, rendu HORS de #masthead)
 */
:root {
	--mx-accent-pale: color-mix(in srgb, var(--mx-accent) 8%, transparent);
	--mx-ligne: color-mix(in srgb, var(--mx-titre) 12%, transparent);
}

/* La barre primary devient transparente, la pilule est le conteneur interne. */
#masthead .ast-primary-header-bar {
	background: transparent !important;
	border: 0;
	padding: 14px var(--ast-container-default-xlg-padding, 3em) 0;
}

#masthead .ast-primary-header-bar .ast-builder-grid-row-container {
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid color-mix(in srgb, var(--mx-titre) 8%, transparent);
	border-radius: 999px;
	min-height: 72px;
	padding: 0 12px 0 28px;
	box-shadow: var(--mx-ombre);
}

#masthead .ast-primary-header-bar .ast-builder-grid-row {
	min-height: 72px;
}

/* Menu : soulignement fuchsia animé, pas de fond sur hover. */
#masthead .main-header-menu > .menu-item > .menu-link {
	position: relative;
	padding-top: 6px;
	padding-bottom: 6px;
	background: none;
}

#masthead .main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 1em;
	right: 100%;
	bottom: 2px;
	height: 1.5px;
	background: var(--mx-accent);
	transition: right .3s var(--mx-ease);
}

#masthead .main-header-menu > .menu-item:hover > .menu-link::after,
#masthead .main-header-menu > .current-menu-item > .menu-link::after,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link::after {
	right: 1em;
}

/* Sous-menus arrondis */
#masthead .main-header-menu .sub-menu {
	border-radius: var(--mx-r-s);
	border: 1px solid var(--mx-ligne);
	box-shadow: var(--mx-ombre);
	/* pas d'overflow hidden : il coupait le sous-menu de 3e niveau (« Par couleur »),
	   positionné en dehors de la boîte de son parent. Les coins arrondis sont posés
	   sur les premiers et derniers items à la place. */
}
#masthead .main-header-menu .sub-menu > .menu-item:first-child > .menu-link { border-radius: var(--mx-r-s) var(--mx-r-s) 0 0; }
#masthead .main-header-menu .sub-menu > .menu-item:last-child > .menu-link { border-radius: 0 0 var(--mx-r-s) var(--mx-r-s); }
/* Flyout de 3e niveau : à droite du parent, aligné en haut, visible au survol et au focus clavier. */
#masthead .main-header-menu .sub-menu .menu-item-has-children > .sub-menu {
	top: -1px;
	left: 100%;
	margin-left: 4px;
}
#masthead .main-header-menu .sub-menu .menu-item-has-children:hover > .sub-menu,
#masthead .main-header-menu .sub-menu .menu-item-has-children:focus-within > .sub-menu,
#masthead .main-header-menu .sub-menu .menu-item-has-children.ast-menu-hover > .sub-menu {
	visibility: visible;
	opacity: 1;
	display: block;
}

/* Bouton header : pilule compacte */
#masthead .ast-builder-button-wrap .ast-custom-button {
	padding: .8em 1.3em;
	font-size: 14px;
	line-height: 1;
}

/* Sticky Astra Pro : garde la pilule décollée du haut de fenêtre. */
#masthead.ast-header-sticked .ast-primary-header-bar,
#masthead .ast-primary-header-bar.ast-header-sticked {
	padding-top: 12px;
	box-shadow: none;
	background: transparent !important;
}

/* Topbar (above) : fine, gris, bordure basse discrète. */
#masthead .ast-above-header-bar {
	font-size: 13px;
	color: var(--mx-texte);
}

#masthead .ast-above-header-bar a {
	color: inherit;
}

#masthead .ast-above-header-bar a:hover {
	color: var(--mx-accent);
}

/* Mobile / tablette : pilule plus basse, padding réduit.
   Astra ne rend PAS .ast-builder-grid-row-container dans l'en-tête mobile
   (#ast-mobile-header) : la ligne .ast-builder-grid-row est directement dans
   .ast-primary-header-bar. C'est donc la ligne qui porte la pilule (fond blanc,
   rayon, ombre), sinon la barre reste transparente sur le dégradé. */
@media (max-width: 1200px) {
	#masthead .ast-primary-header-bar {
		padding: 8px 16px 0;
	}

	#masthead .ast-primary-header-bar .ast-builder-grid-row-container {
		min-height: 64px;
		padding: 0 8px 0 20px;
	}

	#masthead .ast-primary-header-bar .ast-builder-grid-row {
		min-height: 64px;
	}

	/* Sticky Astra Pro pose un max-width inline calculé au chargement : sans effet
	   voulu ici, la barre reste pleine largeur et c'est la ligne qui fait pilule. */
	#masthead #ast-mobile-header .ast-primary-header-bar.ast-sticky-active,
	#masthead #ast-mobile-header .ast-primary-header-bar.ast-header-sticked {
		max-width: none !important;
		margin: 0 !important;
	}

	#masthead #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row {
		background: rgba(255, 255, 255, .92);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border: 1px solid color-mix(in srgb, var(--mx-titre) 8%, transparent);
		border-radius: 999px;
		padding: 0 8px 0 20px;
		box-shadow: var(--mx-ombre);
	}
}

/* Mobile (< 768 px) : plus de pilule, barre blanche pleine largeur bord à bord,
   filet bas discret. La pilule reste réservée à l'ordinateur et à la tablette. */
@media (max-width: 767px) {
	#masthead .ast-primary-header-bar {
		padding: 0 !important;
		background: rgba(255, 255, 255, .96) !important;
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-bottom: 1px solid color-mix(in srgb, var(--mx-titre) 8%, transparent);
	}

	#masthead #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row {
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 64px;
		padding: 0 12px 0 20px;
	}

	/* Sticky Astra Pro : il pose un max-width inline (largeur moins gouttières) et
	   margin auto, ce qui recréerait une barre flottante ; on la garde bord à bord. */
	#masthead.ast-header-sticked .ast-primary-header-bar,
	#masthead .ast-primary-header-bar.ast-header-sticked,
	#masthead .ast-primary-header-bar.ast-sticky-active {
		padding-top: 0;
		max-width: none !important;
		margin: 0 !important;
		background: rgba(255, 255, 255, .96) !important;
		box-shadow: var(--mx-ombre);
	}
}

/* ------------------------------------------------------------------
   Tiroir hors champ (off-canvas Astra, < 1200 px).
   Le popup #ast-mobile-popup est rendu hors de #masthead : aucune règle
   desktop ci-dessus ne s'y applique. Préfixe #ast-mobile-popup pour passer
   au-dessus des sélecteurs Astra à 4 classes (.ast-mobile-popup-content
   .ast-builder-menu-mobile .main-header-menu .sub-menu, etc.).
   Réglages Astra posés : mobile-header-type off-canvas, glisse droite,
   fond blanc, menu 45 sur l'emplacement mobile_menu.
   ------------------------------------------------------------------ */
#ast-mobile-popup .ast-mobile-popup-inner {
	border-radius: var(--mx-r) 0 0 var(--mx-r);
	box-shadow: -20px 0 60px -30px color-mix(in srgb, var(--mx-titre) 45%, transparent);
	max-width: 400px;
}

#ast-mobile-popup.ast-mobile-popup-full-width .ast-mobile-popup-inner {
	border-radius: 0;
	max-width: none;
}

#ast-mobile-popup .ast-mobile-popup-overlay {
	background: color-mix(in srgb, var(--mx-titre) 45%, transparent);
}

/* Barre de fermeture : croix bleu nuit dans un rond crème. */
#ast-mobile-popup .ast-mobile-popup-header {
	padding: 16px 16px 0;
}

#ast-mobile-popup .menu-toggle-close {
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--mx-fond-2);
	color: var(--mx-titre);
}

#ast-mobile-popup .menu-toggle-close:hover,
#ast-mobile-popup .menu-toggle-close:focus-visible {
	background: var(--mx-rose-pale);
	color: var(--mx-accent);
}

#ast-mobile-popup .menu-toggle-close .ast-close-svg {
	width: 20px;
	height: 20px;
}

/* Contenu : gouttière latérale, menu en colonne. */
#ast-mobile-popup .ast-mobile-popup-content,
#ast-mobile-popup .ast-desktop-popup-content {
	padding: 8px 24px 32px;
}

#ast-mobile-popup .ast-builder-menu-mobile .main-header-menu {
	display: block;
}

#ast-mobile-popup .main-header-menu .menu-item {
	position: relative;
}

#ast-mobile-popup .main-header-menu > .menu-item > .menu-link {
	display: block;
	padding: 14px 8px 14px 0;
	font-family: var(--ast-heading-font-family, inherit);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: var(--mx-titre);
	border-bottom: 1px solid var(--mx-filet);
	background: none;
}

#ast-mobile-popup .main-header-menu > .current-menu-item > .menu-link,
#ast-mobile-popup .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--mx-accent);
}

/* Gouttière droite réservée à la flèche uniquement sur les items à enfants ;
   le chevron inline qu'Astra injecte dans chaque lien (.ast-icon.icon-arrow) est masqué. */
#ast-mobile-popup .main-header-menu .menu-item-has-children > .menu-link {
	padding-right: 44px;
}

#ast-mobile-popup .main-header-menu .menu-link .ast-icon.icon-arrow {
	display: none;
}

/* Flèche des sous-menus : calée sur la hauteur du lien (pas sur celle du li,
   qui contient le sous-menu déplié), rotation à l'ouverture. */
#ast-mobile-popup .main-header-menu .menu-item-has-children > .ast-menu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	width: 44px;
	height: 55px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mx-titre);
	background: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
}

#ast-mobile-popup .main-header-menu .sub-menu .menu-item-has-children > .ast-menu-toggle {
	height: 43px;
}

#ast-mobile-popup .main-header-menu .ast-menu-toggle .ast-arrow-svg {
	width: 14px;
	height: auto;
	transition: transform .25s var(--mx-ease);
}

#ast-mobile-popup .main-header-menu .ast-menu-toggle.ast-submenu-expanded .ast-arrow-svg,
#ast-mobile-popup .main-header-menu .ast-menu-toggle[aria-expanded="true"] .ast-arrow-svg {
	transform: rotate(180deg);
}

/* Sous-menus : bloc crème arrondi, liens Inter, 3e niveau indenté. */
#ast-mobile-popup .main-header-menu .sub-menu {
	position: static;
	width: auto;
	margin: 8px 0 12px;
	padding: 8px 16px;
	background: var(--mx-fond-2);
	border-radius: var(--mx-r-s);
	box-shadow: none;
	border: 0;
}

#ast-mobile-popup .main-header-menu .sub-menu .sub-menu {
	margin: 4px 0 8px 12px;
	padding: 0 0 0 12px;
	background: none;
	border-left: 2px solid color-mix(in srgb, var(--mx-titre) 12%, transparent);
	border-radius: 0;
}

#ast-mobile-popup .main-header-menu .sub-menu .menu-link {
	display: block;
	padding: 10px 8px 10px 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--mx-texte);
	border-bottom: 1px solid color-mix(in srgb, var(--mx-titre) 8%, transparent);
	background: none;
}

#ast-mobile-popup .main-header-menu .sub-menu .menu-item:last-child > .menu-link {
	border-bottom: 0;
}

#ast-mobile-popup .main-header-menu .sub-menu .current-menu-item > .menu-link {
	color: var(--mx-accent);
}

/* Groupe « Par couleur » : intitulé en petites capitales, non cliquable. */
#ast-mobile-popup .main-header-menu .mx-menu-groupe > .menu-link {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mx-texte);
	pointer-events: none;
	border-bottom: 0;
}

#ast-mobile-popup .main-header-menu .mx-menu-groupe > .ast-menu-toggle {
	pointer-events: auto;
}

/* Bouton Contact : pilule fuchsia pleine largeur sous le menu.
   Markup Astra : a.ast-custom-button-link > div.ast-custom-button (c'est le div qui porte le fond). */
#ast-mobile-popup .ast-header-button-1 {
	padding: 24px 0 0;
	justify-content: stretch;
}

#ast-mobile-popup .ast-builder-button-wrap {
	padding: 0;
	width: 100%;
}

#ast-mobile-popup .ast-builder-button-wrap .ast-custom-button-link {
	display: block;
	width: 100%;
	padding: 0;
	text-decoration: none;
}

#ast-mobile-popup .ast-builder-button-wrap .ast-custom-button {
	display: block;
	width: 100%;
	padding: 16px 24px;
	border-radius: 999px;
	background: var(--mx-accent);
	color: var(--mx-fond);
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

#ast-mobile-popup .ast-builder-button-wrap .ast-custom-button-link:hover .ast-custom-button,
#ast-mobile-popup .ast-builder-button-wrap .ast-custom-button-link:focus-visible .ast-custom-button {
	background: var(--mx-accent-2);
	color: var(--mx-fond);
}

/* Rayons et boutons : complément aux réglages Astra (999px déjà posé sur le bouton global). */
.ast-container img.mx-r,
.wp-block-image.mx-r img {
	border-radius: var(--mx-r);
}

@media (prefers-reduced-motion: reduce) {
	#masthead .main-header-menu > .menu-item > .menu-link::after {
		transition: none;
	}
}

/* Logo SVG : largeur 100 % du lien (borné à la largeur Astra), hauteur au ratio ;
   en en-tête collant réduit, Astra impose max-height 55 px, on le garde. */
.site-logo-img .custom-logo-link img,
.site-logo-img img.custom-logo {
	width: 100%;
	max-width: 190px;
	height: auto;
}
.ast-sticky-main-shrink #masthead .ast-sticky-shrunk .site-logo-img img,
.ast-sticky-header-shrink .ast-sticky-shrunk .site-logo-img img {
	max-height: 55px !important;
	width: 100%;
}