/**
 * Le menu de navigation, sur deux niveaux.
 *
 * Deux mises en page pour un seul menu WordPress : un accordéon dans le
 * panneau du téléphone, un panneau en colonnes sur ordinateur. Le point de
 * bascule est celui de Blocksy — 1000 px — et non un nôtre : au-dessus, le
 * thème sert `[data-device="desktop"]` ; en dessous, le panneau hors champ.
 *
 * Les couleurs viennent des jetons de la charte, déjà servis par le thème.
 * Les valeurs de repli ne sont là que pour la page de commande, servie sans
 * la feuille de la boutique.
 */

/* =========================================================
   Le panneau du téléphone
   ========================================================= */

@media (max-width: 999.98px) {

	/*
	 * ⚠️ Le panneau de Blocksy est réglé **en sombre** — `rgba(18,21,25,.98)`
	 * sur `.ct-panel-inner`, avec un texte clair. Tant qu'il ne portait que
	 * cinq liens, cela se voyait à peine ; la maquette validée, elle, était
	 * sur fond blanc. Les couleurs qui suivent supposent donc un fond clair :
	 * il est posé ici, avec tout ce qui doit changer de couleur en même temps.
	 * Retirer cette règle sans retirer les autres rend le panneau illisible —
	 * c'est exactement ce qui est arrivé le 25/08 en fin de journée.
	 */
	/*
	 * ⚠️ Le sélecteur est volontairement long : Blocksy peint le panneau avec
	 * `[data-header*="type-1"] #offcanvas .ct-panel-inner`, plus spécifique
	 * qu'un simple `#offcanvas .ct-panel-inner`. Un fond blanc écrit court
	 * ne s'appliquait pas — le panneau restait sombre et le texte, illisible.
	 * Pas d'`!important` : il suffit d'être plus précis que lui.
	 */
	[data-header] #offcanvas.ct-panel .ct-panel-inner {
		background: #fff;

		/*
		 * Les couleurs de lien de Blocksy sont réglées pour son panneau
		 * sombre : elles sont claires. Les redéfinir ici, sur le conteneur,
		 * vaut pour **tous** les liens du panneau — y compris ceux qu'on
		 * n'habille pas. Les peindre un par un laissait forcément passer
		 * quelque chose.
		 */
		--theme-link-initial-color: var(--lupeo-ink, #1A1A1A);
		--theme-link-hover-color: var(--lupeo-teal-deep, #005A55);
		--theme-text-color: var(--lupeo-ink-2, #4A453E);
		color: var(--lupeo-ink-2, #4A453E);
	}

	/*
	 * Le défilement du panneau est celui de Blocksy, sans rien y ajouter.
	 *
	 * ⚠️ Le 25/08/2026, chaque tentative de l'« améliorer » — hauteurs
	 * contraintes, `overflow` déplacé, verrou de défilement désarmé, classe
	 * `flexy` empruntée — a fini par casser l'ouverture du panneau. On ne
	 * touche plus à sa mécanique : on l'habille, rien de plus.
	 */


	#offcanvas .ct-toggle-close,
	#offcanvas .ct-toggle-close svg {
		color: var(--lupeo-ink, #1A1A1A);
		fill: currentColor;
	}

	/* L'entête : le badge, le mot, la croix. Le gabarit vient du PHP ;
	   le script le glisse ici, avant le bouton de fermeture. */
	/*
	 * Le mot « Menu », en face de la croix. Écrit en CSS faute de mieux : le
	 * thème ne prévoit pas de titre pour ce panneau, et le poser en
	 * JavaScript revenait à toucher au panneau — ce qui a coûté cher.
	 */
	#offcanvas .ct-panel-actions::before {
		content: "Menu";
		margin-right: auto;
		font-family: var(--lupeo-display, "Manrope", sans-serif);
		font-weight: 700;
		font-size: 22px;
		letter-spacing: -.025em;
		color: var(--lupeo-ink, #1A1A1A);
	}

	#offcanvas .ct-panel-actions {
		border-bottom: 1px solid var(--lupeo-line, #E6DFD4);
		padding-bottom: 14px;
	}

	/* --- Premier niveau ------------------------------------------------ */

	#offcanvas .mobile-menu > ul > li {
		border-bottom: 1px solid var(--lupeo-line-2, #F0EBE3);
	}

	#offcanvas .mobile-menu > ul > li > .ct-menu-link,
	#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {
		font-family: var(--lupeo-display, "Manrope", sans-serif);
		font-weight: 700;
		font-size: 19px;
		letter-spacing: -.02em;
		color: var(--lupeo-ink, #1A1A1A);
		padding: 17px 20px;
	}

	/* Le parent et son bouton de dépliage tiennent sur une seule ligne :
	   toucher le libellé déplie, toucher le chevron aussi. */
	#offcanvas .mobile-menu .ct-sub-menu-parent {
		display: flex;
		align-items: center;
	}

	#offcanvas .mobile-menu .ct-sub-menu-parent > .ct-menu-link {
		flex: 1 1 auto;
	}

	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
		flex: none;
		padding: 0 20px 0 6px;
		color: var(--lupeo-mute, #6F6A62);
		background: none;
		border: 0;
		transition: transform .22s ease, color .22s ease;
	}

	#offcanvas .mobile-menu > ul > li.dropdown-active > .ct-sub-menu-parent > .ct-menu-link {
		color: var(--lupeo-teal-deep, #005A55);
	}

	#offcanvas .mobile-menu > ul > li.dropdown-active > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
		transform: rotate(180deg);
		color: var(--lupeo-teal, #007C75);
	}

	/* --- Second niveau -------------------------------------------------- */

	/*
	 * Le fond et les filets se posent sur les liens, pas sur le `<ul>` :
	 * c'est le `<ul>` dont Blocksy anime la hauteur au dépliage, et une
	 * marge intérieure fausserait la hauteur qu'il mesure.
	 */
	/*
	 * Pas de fond différent pour le second niveau : c'est le **retrait** qui
	 * dit la hiérarchie, comme des marches. Un aplat de couleur en plus du
	 * décalage faisait deux signaux pour une seule information.
	 */
	#offcanvas .mobile-menu .sub-menu .ct-menu-link {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 13px 20px 13px 40px;
		font-size: 16.5px;
		color: var(--lupeo-ink-2, #4A453E);
		border-bottom: 1px solid var(--lupeo-line-2, #F0EBE3);
	}

	#offcanvas .mobile-menu .sub-menu > li:last-child .ct-menu-link {
		border-bottom: 0;
	}

	#offcanvas .mobile-menu .sub-menu .lupeo-i {
		color: var(--lupeo-teal, #007C75);
	}

	/* « Tout voir » n'a pas d'icône : son libellé se cale malgré tout sur
	   ceux des rayons, sinon la colonne de texte se casse en bas de liste. */
	#offcanvas .mobile-menu .sub-menu .lupeo-menu-tout .ct-menu-link {
		padding-left: 78px;
		color: var(--lupeo-teal-deep, #005A55);
		font-weight: 600;
	}

	#offcanvas .mobile-menu .lupeo-menu-compte {
		margin-left: auto;
		font-size: 13px;
		line-height: 1.5;
		color: var(--lupeo-mute, #6F6A62);
		background: #fff;
		border: 1px solid var(--lupeo-line, #E6DFD4);
		border-radius: 999px;
		padding: 1px 9px;
	}

	/* --- Le bouton du haut ---------------------------------------------- */

	#offcanvas .mobile-menu > ul > li.lupeo-menu-cta {
		border-bottom: 1px solid var(--lupeo-line-2, #F0EBE3);
		padding: 16px 20px;
	}

	#offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		padding: 14px;
		border-radius: var(--lupeo-r-s, 10px);
		background: var(--lupeo-teal, #007C75);
		color: #fff;
		font-family: var(--lupeo-sans, Inter, sans-serif);
		font-weight: 600;
		font-size: 16px;
		letter-spacing: 0;
	}

	/* L'encadré du panneau d'ordinateur n'a pas de sens ici : le bouton du
	   haut dit déjà la même chose, et le répéter allongerait la liste. */
	#offcanvas .mobile-menu .lupeo-menu-encart {
		display: none;
	}
}

/* =========================================================
   Le panneau d'ordinateur
   ========================================================= */

@media (min-width: 1000px) {

	/*
	 * ⚠️ Le panneau s'ouvre **sous le mot qui l'ouvre**, aligné à son bord
	 * gauche. Ancré au conteneur de l'en-tête, il partait se coller au bord
	 * droit de la page : pour « Réparation », il s'affichait à 600 px du
	 * libellé, et la souris quittait l'élément avant d'y arriver. Tous les
	 * panneaux s'ouvrent donc de la même façon, chacun sous le sien.
	 */
	.header-menu-1 > ul > li.lupeo-menu-mega {
		position: relative;
	}

	/*
	 * ⚠️ L'ouverture ne peut pas être laissée au script du thème. Blocksy
	 * pose la classe `ct-active` au survol et la retire dès que le pointeur
	 * quitte **le libellé** : le panneau se refermait avant qu'on ait pu
	 * descendre dedans, donc rien n'y était cliquable (constaté le 25/08).
	 *
	 * `:hover` sur le `<li>`, lui, reste vrai tant que le pointeur est sur
	 * n'importe lequel de ses descendants — le panneau en fait partie. On
	 * garde `ct-active` en second sélecteur : les deux ouvrent, aucun ne
	 * ferme l'autre. `:focus-within` ouvre au clavier.
	 */
	.header-menu-1 > ul > li.lupeo-menu-mega:hover > .sub-menu,
	.header-menu-1 > ul > li.lupeo-menu-mega:focus-within > .sub-menu,
	.header-menu-1 > ul > li.lupeo-menu-mega.ct-active > .sub-menu {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu {
		left: 0;
		right: auto;
		transform: none;
		padding: 22px;
		border-radius: 0 0 var(--lupeo-r-l, 20px) var(--lupeo-r-l, 20px);
		background: #fff;

		/* Même raison qu'au téléphone : le déroulant du thème est sombre,
		   ses couleurs de lien sont donc claires. */
		--theme-link-initial-color: var(--lupeo-ink-2, #4A453E);
		--theme-link-hover-color: var(--lupeo-ink, #1A1A1A);
		box-shadow: var(--lupeo-ombre-2, 0 22px 44px -22px rgba(0, 90, 85, .34));
		columns: 1;
		column-gap: 18px;
	}

	.header-menu-1 > ul > li.lupeo-mega-c1 > .sub-menu {
		width: min(320px, calc(100vw - 40px));
	}

	.header-menu-1 > ul > li.lupeo-mega-c2 > .sub-menu {
		columns: 2;
		width: min(600px, calc(100vw - 40px));
	}

	.header-menu-1 > ul > li.lupeo-mega-c3 > .sub-menu {
		columns: 3;
		width: min(880px, calc(100vw - 40px));
	}

	/* Un rayon ne doit jamais être coupé entre deux colonnes. */
	.header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu > li {
		break-inside: avoid;
		width: auto;
	}

	.header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .ct-menu-link {
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 8px 10px;
		border-radius: var(--lupeo-r-s, 10px);
		font-size: 15px;
		color: var(--lupeo-ink-2, #4A453E);
	}

	.header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .ct-menu-link:hover {
		background: var(--lupeo-cream, #FAF7F2);
		color: var(--lupeo-ink, #1A1A1A);
	}

	.header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .lupeo-i {
		width: 21px;
		height: 21px;
		flex: none;
		color: var(--lupeo-teal, #007C75);
	}

	.header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .lupeo-menu-tout .ct-menu-link {
		padding-left: 42px;
		color: var(--lupeo-teal-deep, #005A55);
		font-weight: 600;
	}

	.header-menu-1 .lupeo-menu-compte {
		margin-left: auto;
		font-size: 12.5px;
		color: var(--lupeo-mute, #6F6A62);
		font-variant-numeric: tabular-nums;
	}

	/*
	 * ⛔ L'encadré ne s'affiche plus. Il portait le panneau à 1 180 px : ouvert
	 * sous « Pièces détachées », il sortait de l'écran par la droite. Et il
	 * répétait le bouton « Trouver mes pièces », qui est déjà dans la barre,
	 * à quelques centimètres. L'élément de menu reste en base : le rendre
	 * visible demande seulement de retirer cette règle.
	 */
	.header-menu-1 .lupeo-menu-encart {
		display: none;
	}

	/*
	 * Sous 1 180 px, trois colonnes ouvertes sous un libellé du milieu de la
	 * barre dépasseraient l'écran : deux colonnes suffisent.
	 */
	@media (max-width: 1179.98px) {
		.header-menu-1 > ul > li.lupeo-mega-c3 > .sub-menu {
			columns: 2;
			width: min(600px, calc(100vw - 40px));
		}
	}

	.header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu > li.lupeo-menu-encart > .ct-menu-link {
		display: block;
		padding: 20px;
		border-radius: var(--lupeo-r-m, 14px);
		background: var(--lupeo-teal-soft, #E2EFEE);
	}

	.header-menu-1 .lupeo-menu-encart .lupeo-menu-nom {
		display: block;
		font-family: var(--lupeo-display, "Manrope", sans-serif);
		font-size: 17px;
		font-weight: 700;
		letter-spacing: -.02em;
		color: var(--lupeo-ink, #1A1A1A);
		margin-bottom: 6px;
	}

	.header-menu-1 .lupeo-menu-encart .lupeo-menu-texte {
		display: block;
		font-size: 14.5px;
		line-height: 1.5;
		color: var(--lupeo-teal-deep, #005A55);
		margin-bottom: 14px;
	}

	.header-menu-1 .lupeo-menu-encart .lupeo-menu-bouton {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 11px;
		border-radius: var(--lupeo-r-s, 10px);
		background: var(--lupeo-teal, #007C75);
		color: #fff;
		font-weight: 600;
		font-size: 14.5px;
	}

	.header-menu-1 .lupeo-menu-encart .lupeo-i {
		width: 19px;
		height: 19px;
		color: currentColor;
	}

	/* --- Le bouton de la barre ------------------------------------------- */

	.header-menu-1 > ul > li.lupeo-menu-cta {
		order: 99;
		align-self: center;
		margin-left: 10px;
	}

	.header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link {
		display: flex;
		align-items: center;
		gap: 8px;
		line-height: 1.2;
		background: var(--lupeo-teal, #007C75);
		color: #fff;
		border-radius: var(--lupeo-r-s, 10px);
		padding: 10px 15px;
		font-weight: 600;
	}

	/*
	 * Le survol du thème repeint le libellé dans sa couleur de lien : sur le
	 * fond turquoise du bouton, le texte devenait illisible. Les variables
	 * de Blocksy sont remises à blanc en même temps que la couleur, sinon
	 * c'est la sienne qui l'emporte.
	 */
	.header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link,
	.header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link:hover,
	.header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link:focus {
		color: #fff;
		--theme-link-initial-color: #fff;
		--theme-link-hover-color: #fff;
	}

	.header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link:hover {
		background: var(--lupeo-teal-deep, #005A55);
	}

	.header-menu-1 > ul > li.lupeo-menu-cta .lupeo-i {
		width: 19px;
		height: 19px;
		flex: none;
	}
}

/* Le trait des icônes du menu : `lupeo-boutique.css` porte le jeu commun mais
   n'est servi que sur les pages de la boutique — le menu, lui, est partout. */
.ct-header .lupeo-i,
#offcanvas .lupeo-i {
	width: 24px;
	height: 24px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lupeo-menu-nom {
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
		transition: none;
	}
}