/* CLC Navigation — habillage du bloc Navigation de WordPress.
   ============================================================================

   Remplace le CSS additionnel du thème. Deux parties indépendantes :

     A. MODE ORDINATEUR (>= 600 px) — l'habillage du survol, en quatre
        variantes exclusives choisies dans Réglages > CLC Blocks. La variante
        active est portée par une classe sur <body> : clc-nav-v1, v4, v5, v6.
        Aucune classe = barre non habillée.

     B. MODE MOBILE (< 600 px) — la correction de l'overlay de navigation.
        Celle-ci s'applique TOUJOURS, quelle que soit la variante : ce n'est
        pas un choix esthétique mais un correctif (voir § B).

   Accroches attendues, à poser dans l'onglet « Avancé » de chaque bloc
   Navigation de l'en-tête :
     .clc-nav-principale  — le menu principal (Evenements, Loisirs, …)
     .clc-nav-utilitaire  — le menu de la barre jaune (Agenda, Contact, …)

   600 px est le point de bascule « is-responsive » du bloc Navigation de
   core : au-dessus la barre est horizontale, en dessous elle passe en
   overlay. Ne pas désynchroniser les media queries de ce fichier de cette
   valeur.

   Jetons réglables depuis Réglages > CLC Blocks, périmètre « Navigation » :
     --clc-nav-accent  couleur de la puce au survol
     --clc-nav-shadow  couleur de l'ombre dure
     --clc-nav-lift    élévation au survol, en px
*/

:root {
	--clc-nav-accent: #fed647;
	--clc-nav-encre: #111111;
	--clc-nav-papier: #ffffff;
	--clc-nav-shadow: rgba( 17, 17, 17, 0.85 );
	--clc-nav-lift: 2px;
	--clc-nav-rayon: 12px;
	--clc-nav-trait: 1.5px;
	--clc-nav-ecart: 8px; /* espace entre la barre et le panneau */

	/* Plan du panneau déroulant.
	   L'en-tête arrive AVANT le contenu dans le DOM : sans z-index, un
	   panneau en « auto » passe sous n'importe quel élément positionné
	   du contenu qui le suit — les flèches du carrousel d'événements
	   (z-index: 2) l'ont montré. 100 passe largement au-dessus du
	   contenu tout en restant loin sous le bandeau cookies (99 999),
	   la barre d'administration (99 999) et l'overlay mobile de core
	   (100 000).
	   Volontairement posé sur le PANNEAU et non sur le <nav> : un
	   z-index sur le nav créerait un contexte d'empilement qui
	   emprisonnerait l'overlay mobile et le ferait repasser sous le
	   contenu. */
	--clc-nav-z: 100;
}

/* ══════════════════════════════════════════════════════════════════════════
   A. MODE ORDINATEUR
   ══════════════════════════════════════════════════════════════════════════ */

@media ( min-width: 600px ) {

	/* ── A.1 Socle commun aux quatre variantes ────────────────────────── */

	.clc-nav-principale .wp-block-navigation-item {
		position: relative;
	}

	/* Le rayon et la transformation sont posés DÈS LE REPOS, à leur valeur
	   finale pour le rayon et à l'identité pour la transformation (2.5.16).
	   Avec « border-radius: 0 » au repos, le survol faisait changer la
	   géométrie de la boîte en même temps qu'il déclenchait une transition
	   de transform : le navigateur promeut alors l'entrée sur sa propre
	   couche graphique, et il arrivait qu'une image soit composée avant que
	   le nouveau masque d'angles ne soit pris en compte — le rectangle
	   apparaissait brièvement à quatre angles droits avant que deux ne
	   s'arrondissent. Rien n'est visible au repos (fond et bordure
	   transparents) : seul le survol change de couleur, d'ombre et de
	   position. C'est exactement ce qui met la barre utilitaire à l'abri du
	   même défaut — elle porte son rayon en permanence.
	   Les variantes ci-dessous redéclarent le même rayon au survol : c'est
	   désormais redondant, et volontairement conservé pour qu'une variante
	   future puisse le changer sans avoir à rouvrir ce socle. */
	.clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 6px 14px !important;
		border: var( --clc-nav-trait ) solid transparent;
		border-radius: 0 var( --clc-nav-rayon ) 0 var( --clc-nav-rayon );
		background-color: transparent;
		transform: translateY( 0 );
		position: relative;
		z-index: 2;
	}

	/* Le panneau s'ancre SOUS la barre. C'est la règle qui corrige le défaut
	   d'origine : ancré à « top: 0 », un panneau de 200 px posé sur une entrée
	   de 94 px recouvrait l'entrée voisine. */
	.clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
		top: 100% !important;
		bottom: auto !important;
		left: 0 !important;
		right: auto !important;
		margin: var( --clc-nav-ecart ) 0 0 !important;
		min-width: 210px !important;
		padding: 6px 0 !important;
		background-color: var( --clc-nav-papier ) !important;
		border: var( --clc-nav-trait ) solid var( --clc-nav-encre ) !important;
		/* Motif « surface » du design system : coin haut-gauche à 0. */
		border-radius: 0 var( --clc-nav-rayon ) var( --clc-nav-rayon ) var( --clc-nav-rayon ) !important;
		box-shadow: 4px 4px 0 var( --clc-nav-shadow ) !important;
		z-index: var( --clc-nav-z ) !important;
	}

	/* Pont invisible sur l'écart : sans lui, le pointeur qui descend vers le
	   panneau sort de l'élément de liste et core referme le sous-menu.
	   Le pont est un descendant du panneau, donc de l'élément de liste :
	   « pointerleave » ne se déclenche pas. */
	.clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc( -1 * var( --clc-nav-ecart ) - 2px );
		height: calc( var( --clc-nav-ecart ) + 2px );
	}

	/* Entrées du panneau */
	.clc-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 8px 20px !important;
		border: 0 !important;
		background-color: transparent !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.clc-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
		background-color: color-mix( in srgb, var( --clc-nav-accent ) 35%, transparent ) !important;
	}

	/* Focus clavier distinct du survol (écart D-13 du design system). */
	.clc-nav-principale .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var( --clc-nav-encre );
		outline-offset: 3px;
	}

	@media ( prefers-reduced-motion: no-preference ) {
		.clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
			transition:
				background-color 0.1s ease,
				border-color 0.1s ease,
				box-shadow 0.1s ease,
				transform 0.1s ease,
				color 0.1s ease;
		}
	}

	/* ── A.2 Barre utilitaire (barre jaune) ───────────────────────────────
	   Traitement constant, indépendant de la variante : cette barre est plus
	   petite, posée sur le jaune, et n'a pas de sous-menu. Une puce blanche
	   discrète suffit et ne concurrence pas le menu principal. */

	.clc-nav-utilitaire .wp-block-navigation-item {
		border: 1px solid transparent;
		border-radius: 0 8px 0 8px;
	}

	.clc-nav-utilitaire .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 4px 10px !important;
	}

	.clc-nav-utilitaire .wp-block-navigation-item:hover {
		background-color: var( --clc-nav-papier );
		border-color: var( --clc-nav-encre );
		box-shadow: 2px 2px 0 var( --clc-nav-shadow );
		transform: translateY( -1px );
	}

	.clc-nav-utilitaire .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var( --clc-nav-encre );
		outline-offset: 2px;
	}

	@media ( prefers-reduced-motion: no-preference ) {
		.clc-nav-utilitaire .wp-block-navigation-item {
			transition:
				background-color 0.1s ease,
				border-color 0.1s ease,
				box-shadow 0.1s ease,
				transform 0.1s ease;
		}
	}

	/* ══════════════════════════════════════════════════════════════════════
	   VARIANTE 1 — Puce unifiée, panneau détaché
	   Le même survol pour toutes les entrées ; les entrées à sous-menu
	   ouvrent en plus un panneau posé sous la barre.
	   ══════════════════════════════════════════════════════════════════════ */

	body.clc-nav-v1 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item:is(
		:hover,
		:focus-within,
		:has( > .wp-block-navigation-submenu__toggle[aria-expanded="true"] )
	) > .wp-block-navigation-item__content {
		background-color: var( --clc-nav-accent );
		border-color: var( --clc-nav-encre );
		/* Motif « élément d'appel » du design system. */
		border-radius: 0 var( --clc-nav-rayon ) 0 var( --clc-nav-rayon );
		box-shadow: 3px 3px 0 var( --clc-nav-shadow );
		transform: translateY( calc( -1 * var( --clc-nav-lift ) ) );
	}

	/* ══════════════════════════════════════════════════════════════════════
	   VARIANTE 4 — Surlignage au marqueur
	   Réemploie la géométrie exacte du composant .clc-surligne : un dégradé
	   plein posé en fond de la boîte EN LIGNE du libellé. Volontairement pas
	   un pseudo-élément en position absolue — voir l'en-tête de
	   css/clc-surlignage.css pour le pourquoi.
	   ══════════════════════════════════════════════════════════════════════ */

	body.clc-nav-v4 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		background-image: linear-gradient( var( --clc-nav-accent ), var( --clc-nav-accent ) );
		background-repeat: no-repeat;
		background-size: 0 var( --clc-surligne-epaisseur, 0.34em );
		background-position: 0 var( --clc-surligne-hauteur, 0.74em );
		padding: 0 0.12em;
		margin: 0 -0.12em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	body.clc-nav-v4 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item:is(
		:hover,
		:focus-within,
		:has( > .wp-block-navigation-submenu__toggle[aria-expanded="true"] )
	) > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		background-size: 100% var( --clc-surligne-epaisseur, 0.34em );
	}

	@media ( prefers-reduced-motion: no-preference ) {
		body.clc-nav-v4 .clc-nav-principale .wp-block-navigation-item__label {
			transition: background-size 0.22s cubic-bezier( 0.22, 0.61, 0.36, 1 );
		}
	}

	/* Le mode contrasté de Windows remplace les couleurs : le trait
	   disparaîtrait sans compensation (même traitement que .clc-surligne). */
	@media ( forced-colors: active ) {
		body.clc-nav-v4 .clc-nav-principale .wp-block-navigation-item:hover .wp-block-navigation-item__label {
			background: none;
			text-decoration: underline;
			text-decoration-thickness: 0.14em;
			text-underline-offset: 0.12em;
		}
	}

	/* ══════════════════════════════════════════════════════════════════════
	   VARIANTE 5 — Panneau pleine largeur
	   Le panneau ne s'ancre plus sur une entrée mais sur la barre entière :
	   le recouvrement latéral n'existe plus par construction, et les sept
	   entrées de « Loisirs » cessent d'être un cas particulier.
	   ══════════════════════════════════════════════════════════════════════ */

	body.clc-nav-v5 .clc-nav-principale .wp-block-navigation__container {
		position: relative;
	}

	body.clc-nav-v5 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item {
		position: static;
	}

	body.clc-nav-v5 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item:is(
		:hover,
		:focus-within,
		:has( > .wp-block-navigation-submenu__toggle[aria-expanded="true"] )
	) > .wp-block-navigation-item__content {
		background-color: var( --clc-nav-accent );
		border-color: var( --clc-nav-encre );
		border-radius: 0 var( --clc-nav-rayon ) 0 var( --clc-nav-rayon );
		box-shadow: 3px 3px 0 var( --clc-nav-shadow );
	}

	body.clc-nav-v5 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		min-height: 118px !important;
		margin-top: 10px !important;
		padding: 14px 18px !important;
		display: block !important;
		columns: 3;
		column-gap: 18px;
	}

	body.clc-nav-v5 .clc-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item {
		break-inside: avoid;
	}

	body.clc-nav-v5 .clc-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 6px 8px !important;
	}

	/* ══════════════════════════════════════════════════════════════════════
	   VARIANTE 6 — Inversion d'encre
	   Le fond devient noir : la règle « jamais de blanc sur jaune » du design
	   system est respectée, le blanc n'apparaît que sur l'encre.
	   ══════════════════════════════════════════════════════════════════════ */

	body.clc-nav-v6 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item:is(
		:hover,
		:focus-within,
		:has( > .wp-block-navigation-submenu__toggle[aria-expanded="true"] )
	) > .wp-block-navigation-item__content {
		background-color: var( --clc-nav-encre );
		color: var( --clc-nav-papier );
		border-color: var( --clc-nav-encre );
		border-radius: 0 var( --clc-nav-rayon ) 0 var( --clc-nav-rayon );
		box-shadow: 3px 3px 0 var( --clc-nav-accent );
		transform: translateY( calc( -1 * var( --clc-nav-lift ) ) );
	}

	/* Le chevron suit l'encre du libellé. */
	body.clc-nav-v6 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content svg,
	body.clc-nav-v6 .clc-nav-principale .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle svg {
		fill: currentColor;
	}

	body.clc-nav-v6 .clc-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
		background-color: var( --clc-nav-accent ) !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   B. MODE MOBILE — correction de l'overlay de navigation
   ══════════════════════════════════════════════════════════════════════════

   S'applique quelle que soit la variante retenue : c'est un correctif, pas
   un choix esthétique.

   WordPress 7.1 : la classe « disable-default-overlay », posée par la
   fonctionnalité « Navigation Overlay » quand l'overlay est une partie de
   modèle personnalisée, désactive TOUTES les règles mobiles du bloc
   Navigation de core — elles sont écrites
   « .is-menu-open:where(:not(.disable-default-overlay)) … ».
   Les sous-menus resteraient donc en « position: absolute » alors que le
   store Interactivity les force tous en « aria-expanded=true » dès
   l'ouverture : ils s'empileraient au même point et déborderaient du
   panneau. On reproduit ici les règles mobiles manquantes.

   RÉGLAGE ÉDITEUR ASSOCIÉ — les blocs Navigation imbriqués dans la partie de
   modèle de l'overlay doivent avoir « Ouvrir les sous-menus au clic »
   DÉSACTIVÉ. Sinon l'entrée parente est rendue en <button> et sa page
   devient inatteignable, alors que le sous-menu est de toute façon déplié en
   permanence par les règles ci-dessous.
*/

/* B.1 — Les sous-menus reviennent dans le flux */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__overlay-container
	.wp-block-navigation__submenu-container {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	width: auto;
	min-width: 0;
	height: auto;
	max-height: none;
	opacity: 1;
	visibility: visible;
	overflow: visible;
	border: none;
	box-shadow: none;
	margin: 0;
	background: transparent !important;
	animation: none !important;
	transition: none !important;
	gap: inherit;
	padding: 0.25rem 0 0 1.25rem;
}

/* B.2 — Empilement vertical */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__overlay-container :is(
		.wp-block-navigation__container,
		.wp-block-navigation__submenu-container,
		.wp-block-navigation-item
	) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* B.3 — Aucun effet de survol dans l'overlay.
   Le doigt n'a pas de survol, et un :hover rémanent après un tap ferait
   réapparaître un habillage de la partie A par-dessus le menu aplati. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__overlay-container :is(
		.wp-block-navigation-item,
		.wp-block-navigation-item:hover,
		.wp-block-navigation-item:focus-within
	) {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}

/* B.4 — Le chevron n'a plus de sens : tout est déplié.
   Couvre les deux formes du marqueur : le <span> quand le bloc est en
   « ouvrir au clic », le <button> quand il est en « ouvrir au survol ». */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__overlay-container
	.wp-block-navigation__submenu-icon {
	display: none !important;
}

/* B.5 — Hiérarchie de lecture des entrées parentes.
   Le sous-menu étant toujours déplié, l'entrée parente joue le rôle
   d'intitulé de section. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__overlay-container
	.wp-block-navigation-item.has-child
	> :is( a, button ).wp-block-navigation-item__content {
	font-weight: 600;
}

/* B.6 — 100vh casse le scroll sur iOS */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__overlay-container > .wp-block-group {
	min-height: 100dvh !important;
}

/* B.7 — Un seul burger sur mobile.
   Les liens de la barre utilitaire sont déjà repris dans la première carte
   de l'overlay principal. */
@media ( max-width: 599px ) {
	.clc-nav-utilitaire {
		display: none !important;
	}
}