/**
 * Menu LARGE — méga menu desktop + menu mobile, à partir du même markup.
 * Les valeurs reprennent le rendu JetMenu en place avant bascule
 * (relevé du 06/08/2026) pour que le changement soit invisible à l'écran.
 *
 * Ouverture : CSS seul en desktop (:hover / :focus-within), classes posées par
 * le JS en mobile. Aucun attribut [hidden] sur un contenu affichable, pour que
 * l'arbre d'accessibilité reste cohérent avec ce qui est à l'écran.
 */

.lmenu {
	--lmenu-text: #3b3b3b;
	--lmenu-accent: #4b6eb4;
	--lmenu-panel-bg: #f9f9f9;
	--lmenu-rule: #4b6eb4;
	--lmenu-hair: #ededed;
	--lmenu-filet: rgba(75, 110, 180, .22);
	--lmenu-font: "Inter", sans-serif;
	--lmenu-gap: 36px;
	--lmenu-item-pad-v: 6px;
	--lmenu-item-pad-h: 19px;
	/* Marge intérieure de la boîte du panneau. Le JS la lit pour caler la boîte :
	   c'est la seule source, ne pas la redéfinir ailleurs.
	   ⚠️ 20 px et non 28 : depuis le 14/08 la boîte s'arrête AUX BORDS de la
	   grille du header, sa marge est donc prise sur le texte. Les 16 px rendus
	   sont ce qui permet aux cinq colonnes de « La Ligue » d'y tenir. */
	--lmenu-box-pad: 20px;

	position: relative;
	display: flex;
	align-items: center;
}

.lmenu *,
.lmenu *::before,
.lmenu *::after {
	box-sizing: border-box;
}

.lmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lmenu li {
	margin: 0;
}

.lmenu button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Le kit Elementor stylise TOUT bouton au survol et au focus
   (.elementor-kit-4 button:hover — fond vert, texte blanc, bordure).
   Ces trois classes pèsent (0,3,0) et reprennent la main sans !important. */
.lmenu .lmenu__expand,
.lmenu .lmenu__expand:hover,
.lmenu .lmenu__expand:focus,
.lmenu .lmenu__expand:active,
.lmenu .lmenu__burger,
.lmenu .lmenu__burger:hover,
.lmenu .lmenu__burger:focus,
.lmenu .lmenu__burger:active,
.lmenu .lmenu__close,
.lmenu .lmenu__close:hover,
.lmenu .lmenu__close:focus,
.lmenu .lmenu__close:active {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--lmenu-text);
	text-decoration: none;
}

.lmenu .lmenu__expand:hover,
.lmenu .lmenu__close:hover,
.lmenu .lmenu__burger:hover {
	color: var(--lmenu-accent);
}

/* Focus visible seulement au clavier, sans le contour épais par défaut. */
.lmenu button:focus {
	outline: none;
}

.lmenu button:focus-visible {
	outline: 2px solid var(--lmenu-accent);
	outline-offset: 2px;
}

.lmenu .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Barre de premier niveau
 * ------------------------------------------------------------------ */

.lmenu__bar {
	display: flex;
	align-items: center;
	gap: var(--lmenu-gap);
}

.lmenu__top-row {
	position: relative;
	display: flex;
	align-items: center;
}

/* L'entrée courante ou survolée est soulignée sous son seul libellé. */
.lmenu__top-row::after {
	content: "";
	position: absolute;
	left: var(--lmenu-item-pad-h);
	right: var(--lmenu-item-pad-h);
	bottom: -6px;
	height: 2px;
	background: var(--lmenu-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.lmenu__top-item.is-current > .lmenu__top-row::after,
.lmenu__top-item:hover > .lmenu__top-row::after,
.lmenu__top-item:focus-within > .lmenu__top-row::after {
	transform: scaleX(1);
}

.lmenu__top-link {
	display: inline-block;
	padding: var(--lmenu-item-pad-v) 0 var(--lmenu-item-pad-v) var(--lmenu-item-pad-h);
	color: var(--lmenu-text);
	font-family: var(--lmenu-font);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.3;
	text-decoration: none;
	transition: color .2s ease;
}

.lmenu__top-item:not(.has-panel) .lmenu__top-link {
	padding-right: var(--lmenu-item-pad-h);
}

.lmenu__top-arrow {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--lmenu-item-pad-h) 0 6px;
	color: var(--lmenu-text);
	transition: color .2s ease;
}

.lmenu__top-arrow svg {
	display: block;
	width: 14px;
	height: 14px;
}

.lmenu__top-item.is-current > .lmenu__top-row .lmenu__top-link {
	color: var(--lmenu-accent);
}

/* ------------------------------------------------------------------ *
 * Colonnes du panneau
 * ------------------------------------------------------------------ */

/* La boîte du panneau tient à la largeur de ses colonnes (voir `.lmenu__panel`) :
   l'intérieur ne pose donc plus de largeur, seulement sa marge intérieure.
   La première colonne n'a pas de retrait à gauche, si bien que son texte tombe
   exactement sur le bord intérieur de la boîte — et, à la position posée par le
   JS, sur la grille du site, donc sous le logo. */
.lmenu__panel-inner {
	padding: 30px var(--lmenu-box-pad) 34px;
	/* Le panneau ne dépasse jamais l'écran : au-delà il défile, avec
	   l'ascenseur de la charte. Sans ça, sur un portable 13 pouces, le bas de
	   la colonne des commissions était inatteignable. */
	max-height: calc(100vh - 190px);
	overflow-y: auto;
}

/* Chaque colonne prend la largeur de SON contenu : un libellé tient sur une
   seule ligne tant que la rangée entre dans la largeur du site.
   ⚠️ Ne PAS revenir à une largeur de colonne plafonnée (c'était
   `grid-template-columns: repeat(auto-fit, minmax(200px, 252px))`) : les
   intitulés longs — « Lutter contre les violences dans le sport »,
   « Commission Sportive et d'Organisation Régionale » — passaient alors sur
   deux lignes alors que la moitié droite du panneau était vide.
   `flex-wrap: nowrap` est délibéré : quand la rangée ne tient plus (écran
   étroit, ou une entrée plus longue ajoutée au menu), les colonnes se
   resserrent et les libellés reviennent sur deux lignes — dégradation
   progressive. En `wrap`, la dernière colonne tomberait d'un bloc sous les
   autres, en laissant un grand vide au-dessus. */
.lmenu__cols {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	/* Les colonnes prennent toutes la hauteur de la rangée : leur filet gauche
	   court alors jusqu'en bas. En « start », chaque filet s'arrêtait à la fin
	   de sa propre liste — des traits de six longueurs différentes, c'est ce
	   qui donnait l'impression de vrac. */
	align-items: stretch;
}

/* `flex: 0 1 auto` = largeur du contenu, sans étirement, et rétrécissement
   seulement si la rangée déborde. Pas de `min-width: 0` : le plancher reste le
   mot le plus long, sinon un intitulé serait coupé en plein milieu. */
.lmenu__col {
	flex: 0 1 auto;
	/* Chaque pixel d'espacement est pris au texte : à 1440 px les cinq colonnes
	   de « La Ligue » sont ce qui décide si un intitulé tient sur une ligne.
	   16 px (au lieu de 24 à l'origine, puis 20) rendent 36 px aux libellés. */
	padding: 0 16px;
	border-left: 1px solid var(--lmenu-filet);
}

/* Les colonnes de bout affleurent le bord intérieur de la boîte : leur retrait
   ferait doublon avec la marge de la boîte, et il est pris sur le texte. */
.lmenu__col:first-child {
	border-left: 0;
	padding-left: 0;
}

.lmenu__col:last-child {
	padding-right: 0;
}

/* Rubrique sans sous-rubrique : liste simple. Au-delà de six entrées, elle se
   répartit sur deux colonnes de texte plutôt que d'étirer le panneau — sans
   toucher au HTML, donc sans rien changer pour le suivi d'audience. */
.lmenu__cols--flat .lmenu__col {
	padding-left: 0;
	border-left: 0;
}

/* Deux colonnes seulement à partir de 7 entrées : à 2 entrées (Performance),
   couper la liste en deux donnait un lien de chaque côté d'une gouttière.
   Sans prise en charge de :has(), la liste reste sur une colonne — le panneau
   est plus haut, jamais cassé. */
.lmenu__cols--flat .lmenu__links:has(> .lmenu__link-item:nth-child(7)) {
	columns: 2;
	column-gap: 24px;
	/* Sans cette largeur, le bloc à deux colonnes prend toute la place offerte
	   et coupe les libellés en deux ; en `max-content`, il vaut exactement deux
	   fois l'entrée la plus longue. */
	width: max-content;
}

.lmenu__cols--flat .lmenu__link-item {
	break-inside: avoid;
}

/* Une hauteur est réservée au titre : toutes les listes démarrent à la même
   ligne, même quand un intitulé passe sur deux lignes. */
.lmenu__col-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	min-height: 52px;
	padding-bottom: 8px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--lmenu-rule);
}

.lmenu__col-title {
	color: var(--lmenu-text);
	font-family: var(--lmenu-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	transition: color .2s ease;
}

a.lmenu__col-title:hover,
a.lmenu__col-title:focus {
	color: var(--lmenu-accent);
}

.lmenu__links {
	padding: 0;
}

/* Un 4e niveau n'a pas de trait : il est en retrait sous son parent. */
.lmenu__links .lmenu__links {
	border: 0;
	padding: 2px 0 4px 14px;
}

.lmenu__link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lmenu__link {
	display: block;
	color: var(--lmenu-text);
	font-family: var(--lmenu-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	transition: color .2s ease;
}

a.lmenu__link:hover,
a.lmenu__link:focus,
.lmenu__link-item.is-current > .lmenu__link-row > .lmenu__link {
	color: var(--lmenu-accent);
}

.lmenu__link-item.has-sub > .lmenu__link-row > .lmenu__link {
	font-weight: 700;
}

/* Chrome mobile masqué par défaut. */
.lmenu__expand,
.lmenu__burger,
.lmenu__close,
.lmenu__overlay {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Desktop — panneau déroulant
 * ------------------------------------------------------------------ */

/* Sur un écran de portable, la grille du header se resserre (1346 px à 1366,
   1260 px à 1280) alors que le contenu du panneau, lui, ne rétrécit pas : la
   marge intérieure de la boîte devient la variable d'ajustement. On la resserre
   pour rendre cette place aux intitulés — mesuré sur un 1366 px, la largeur de
   portable la plus répandue : 6 intitulés coupés à 20 px de marge, aucun à 12. */
@media (min-width: 1025px) and (max-width: 1439px) {

	.lmenu {
		--lmenu-box-pad: 12px;
	}
}

@media (min-width: 1025px) {

	/* Le panneau s'ouvre sous la BARRE DU HEADER, pas sous le <nav>.
	   Le nav ne fait que 33 px de haut et il est centré verticalement à côté
	   du logo : ancré sur lui, le panneau retombait 31 px trop haut et
	   recouvrait le bas du logo. Le décalage est mesuré par le JS.

	   ⚠️ Les cinq panneaux ont la MÊME boîte, aux bords exacts de la grille du
	   header Elementor (`e-con-inner` : 38 → 1403 sur un écran de 1440, soit du
	   bord du logo au bout de la barre de menu). Consigne de Thomas du
	   14/08/2026, « la même organisation que le header ». Un panneau ne se cale
	   donc plus sous sa rubrique — c'était l'état du 12/08, où « Performance »
	   n'ouvrait qu'une vignette de 220 px collée à droite, que la ligue a
	   signalée comme peu visible.
	   ⚠️ Ne PAS élargir la boîte au-delà de la grille pour gagner de la place :
	   à 28 px de marge elle mesurait 8 → 1431 sur un écran de 1440, ce qui est
	   le bandeau pleine largeur, refusé le 12/08. La place se prend sur les
	   marges (voir `--lmenu-box-pad` et le retrait des colonnes), pas sur les
	   bords. La largeur est posée par le JS (`--lmenu-panel-w`). */
	.lmenu__panel {
		position: absolute;
		top: calc(100% + var(--lmenu-panel-top, 0px));
		left: var(--lmenu-panel-left, 0px);
		/* Sans JS, la boîte retombe sur la largeur de son contenu, bornée par le
		   <nav> : dégradation, jamais de panneau plus large que l'écran. */
		width: var(--lmenu-panel-w, max-content);
		max-width: var(--lmenu-panel-w, 100%);
		z-index: 9999;
		background: var(--lmenu-panel-bg);
		border: 1px solid var(--lmenu-hair);
		box-shadow: 0 16px 32px rgba(59, 59, 59, .07);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}

	/* Pont de survol : le panneau étant décollé de la barre, la souris
	   traverse une bande vide en descendant vers lui. Ce pseudo-élément
	   appartient au panneau, donc au <li> : le survol ne se perd pas.
	   Il disparaît avec le panneau (visibility), pas de zone fantôme. */
	.lmenu__panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--lmenu-panel-top, 0px);
	}

	.lmenu__col--long > .lmenu__links {
		column-count: 2;
		column-gap: 20px;
	}

	.lmenu__col--long > .lmenu__links > .lmenu__link-item {
		break-inside: avoid;
	}

	.lmenu__top-item.has-panel:hover > .lmenu__panel,
	.lmenu__top-item.has-panel:focus-within > .lmenu__panel,
	.lmenu__top-item.has-panel.is-open > .lmenu__panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.lmenu__top-item.has-panel:hover > .lmenu__top-row .lmenu__top-link,
	.lmenu__top-item.has-panel:focus-within > .lmenu__top-row .lmenu__top-link,
	.lmenu__top-item.has-panel:hover > .lmenu__top-row .lmenu__top-arrow,
	.lmenu__top-item.has-panel:focus-within > .lmenu__top-row .lmenu__top-arrow,
	.lmenu__top-item:not(.has-panel) .lmenu__top-link:hover,
	.lmenu__top-item:not(.has-panel) .lmenu__top-link:focus {
		color: var(--lmenu-accent);
	}
}

/* ------------------------------------------------------------------ *
 * Tablette et mobile — tiroir + accordéon
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {

	.lmenu {
		display: block;
	}

	.lmenu__burger {
		display: block;
		padding: 6px;
		color: var(--lmenu-text);
	}

	.lmenu__burger-bars {
		display: block;
		width: 26px;
	}

	.lmenu__burger-bars i {
		display: block;
		height: 3px;
		margin: 5px 0;
		border-radius: 2px;
		background: currentColor;
	}

	.lmenu__drawer {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100000;
		width: min(88vw, 380px);
		height: 100%;
		padding: 56px 0 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
		transform: translateX(100%);
		transition: transform .28s ease, visibility .28s;
		visibility: hidden;
	}

	.lmenu.is-open .lmenu__drawer {
		transform: translateX(0);
		visibility: visible;
	}

	.lmenu__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba(0, 0, 0, .45);
	}

	.lmenu__overlay[hidden] {
		display: none;
	}

	.lmenu__close {
		display: block;
		position: absolute;
		top: 12px;
		right: 12px;
		padding: 8px;
		color: var(--lmenu-text);
	}

	.lmenu__close svg {
		display: block;
		width: 22px;
		height: 22px;
	}

	.lmenu__bar {
		display: block;
	}

	.lmenu__top-item {
		border-bottom: 1px solid var(--lmenu-hair);
	}

	/* Le soulignement bleu appartient à la barre : dans le tiroir, les entrées
	   sont déjà séparées par un filet, il ferait doublon. */
	.lmenu__top-row::after {
		display: none;
	}

	.lmenu__top-row,
	.lmenu__link-row,
	.lmenu__col-head {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		padding: 0;
		border: 0;
	}

	.lmenu__top-link {
		flex: 1 1 auto;
		padding: 14px 8px 14px 20px;
		font-size: 17px;
	}

	.lmenu__top-arrow {
		display: none;
	}

	.lmenu__expand {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 52px;
		color: var(--lmenu-text);
	}

	.lmenu__expand .lmenu__chevron {
		display: block;
		width: 18px;
		height: 18px;
		transition: transform .2s ease;
	}

	.lmenu__expand[aria-expanded="true"] .lmenu__chevron {
		transform: rotate(90deg);
	}

	/* Accordéon : replié tant que le JS n'a pas ouvert.
	   ⚠️ Une colonne de panneau PLAT n'a pas de titre, donc pas de bouton pour
	   la déplier : sa liste doit rester visible dès l'ouverture du panneau.
	   Sans cette exception, Compétitions, Se former et Performance s'ouvrent
	   sur du vide en mobile.
	   ⚠️ Le repli s'écrit avec :not(.is-expanded), il n'y a PAS de règle
	   « display: block » en face. Opposer les deux ne marchait pas : le
	   sélecteur des colonnes pèse (0,4,0) — le :not() compte son argument —
	   contre (0,3,0) pour le dépliage, donc le masquage gagnait et les
	   colonnes de 2e niveau se marquaient ouvertes (chevron pivoté,
	   aria-expanded="true") sans jamais montrer leurs liens. */
	.lmenu__top-item.has-panel:not(.is-expanded) > .lmenu__panel,
	.lmenu__link-item.has-sub:not(.is-expanded) > .lmenu__links,
	.lmenu__cols:not(.lmenu__cols--flat) .lmenu__col:not(.is-expanded) > .lmenu__links {
		display: none;
	}

	/* `max-width` est remis à plat en même temps que `width` : la variable de
	   largeur posée en desktop survivrait à un redimensionnement vers le
	   mobile et brider le tiroir à la grille du header. */
	.lmenu__panel {
		position: static;
		width: auto;
		max-width: none;
		padding: 0;
	}

	/* Dans le tiroir, le panneau est un simple bloc de l'accordéon : ni largeur
	   de grille, ni recentrage, ni ascenseur propre (il défilerait à
	   l'intérieur du tiroir, qui défile déjà). */
	.lmenu__panel-inner {
		width: auto;
		margin: 0;
		padding: 0;
		max-height: none;
		overflow: visible;
		background: #f9f9f9;
	}

	.lmenu__cols,
	.lmenu__col,
	.lmenu__cols--flat .lmenu__col,
	.lmenu__col--long {
		display: block;
		width: auto;
		padding: 0;
		border-left: 0;
	}

	/* Même forme de sélecteur que la règle desktop (qui porte un :has()),
	   sinon elle pèse plus lourd et la liste reste sur deux colonnes dans le
	   tiroir. La largeur est reprise aussi : en `max-content`, les lignes du
	   tiroir s'arrêteraient à la fin du texte, filet de séparation compris. */
	.lmenu__cols--flat .lmenu__links,
	.lmenu__cols--flat .lmenu__links:has(> .lmenu__link-item:nth-child(7)) {
		columns: 1;
		width: auto;
	}

	.lmenu__col-head {
		border-bottom: 1px solid var(--lmenu-hair);
	}

	.lmenu__col-title {
		flex: 1 1 auto;
		padding: 13px 8px 13px 32px;
		font-size: 16px;
		font-weight: 700;
	}

	.lmenu__links,
	.lmenu__cols--flat .lmenu__links {
		border: 0;
		padding: 0;
	}

	.lmenu__link-item {
		border-bottom: 1px solid var(--lmenu-hair);
	}

	.lmenu__link-item:last-child {
		border-bottom: 0;
	}

	.lmenu__link {
		flex: 1 1 auto;
		padding: 12px 8px 12px 44px;
		font-size: 15px;
		line-height: 1.35;
	}

	.lmenu__links .lmenu__links {
		padding: 0;
		background: #f2f2f2;
	}

	.lmenu__links .lmenu__links .lmenu__link {
		padding-left: 58px;
	}

	.lmenu__cols--flat .lmenu__link {
		padding-left: 32px;
	}

	/* Le tiroir est ouvert : on bloque le défilement de la page. */
	body.lmenu-locked {
		overflow: hidden;
	}
}