/**
 * Oktimus — Comportement des sous-menus repliés (feature navigation/adaptive).
 *
 * Posé par `data-okt-nav-collapse="accordion|drilldown"` sur une nav rendue en
 * présentation repliée (typiquement la nav verticale DANS un panneau offcanvas).
 *
 * IMPORTANT — le survol est NEUTRALISÉ à la source : `Adaptive.php` retire les
 * directives `data-wp-on--pointerenter/leave` du balisage AVANT l'hydratation, si
 * bien que les sous-menus n'obéissent QU'AU CLIC, quel que soit le réglage
 * « ouvrir au survol / au clic » du bloc. Ici on ne pilote donc plus rien via le
 * survol : l'accordéon suit l'état natif `aria-expanded` (basculé au clic, cf.
 * `nav-collapse.js` qui élargit la cible de clic à toute la ligne) et le drilldown
 * suit la piste construite par le moteur JS.
 *
 * Cette feuille est un OVERRIDE opt-in : on assume `!important` pour gagner de
 * façon fiable sur le flyout absolu natif et sur le thème.
 */

:root {
	--okt-arrow-fallback-external: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E" );
}

[data-okt-nav-collapse] {
	--okt-collapse-dur: 300ms;
	--okt-collapse-ease: cubic-bezier( 0.4, 0.15, 0.2, 1 );
	--okt-collapse-indent: 1em;
	--okt-collapse-max: 45rem;
	--okt-collapse-sep: var(
		--wp--preset--color--line,
		rgba( 128, 128, 128, 0.22 )
	);
}

/* ===================================================================== *
 *  Mise en page — la nav repliée est une liste pleine largeur, en flux   *
 * ===================================================================== */

[data-okt-nav-collapse] .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	margin: 0;
	padding: 0;
}
[data-okt-nav-collapse] .wp-block-navigation__container > .wp-block-navigation-item,
[data-okt-nav-collapse]
	.wp-block-navigation__submenu-container
	> .wp-block-navigation-item {
	width: 100%;
}

/* Espacement RÉGULIER : on neutralise le block-gap du layout flex (sinon de grands
   écarts irréguliers entre les lignes). Les lignes se suivent, séparées par la
   bordure ; l'espacement vient du padding SYMÉTRIQUE de chaque ligne. */
[data-okt-nav-collapse],
[data-okt-nav-collapse] .wp-block-navigation__container,
[data-okt-nav-collapse] .wp-block-navigation__submenu-container,
[data-okt-nav-collapse] .wp-block-navigation-item.has-child {
	gap: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
}
/* Pas de marge résiduelle sur les items ni leurs contenus (le thème peut en poser). */
[data-okt-nav-collapse] .wp-block-navigation-item,
[data-okt-nav-collapse] .wp-block-navigation-item__content {
	margin: 0;
}

/* Reset commun — neutralise le flyout absolu natif (position/fond/bordure). */
[data-okt-nav-collapse] .wp-block-navigation__submenu-container {
	position: static !important;
	inset: auto !important;
	z-index: auto !important;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	transform: none !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
/* Flyout imbriqué (niveau ≥2) : le cœur le pousse à droite (≥782px) → on annule. */
[data-okt-nav-collapse]
	.wp-block-navigation__submenu-container
	.wp-block-navigation__submenu-container {
	left: auto !important;
	top: auto !important;
}
[data-okt-nav-collapse]
	.wp-block-navigation__submenu-container
	.wp-block-navigation__submenu-container::before {
	content: none !important;
}

/* Ligne d'un item parent : [libellé … chevron] ; le sous-menu passe DESSOUS,
   sur toute la largeur (flex-wrap). */
[data-okt-nav-collapse] .wp-block-navigation-item.has-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
[data-okt-nav-collapse]
	.wp-block-navigation-item.has-child
	> .wp-block-navigation-item__content {
	flex: 1 1 auto;
	min-width: 0;
}
/* Le porteur du chevron est TOUJOURS `.submenu-icon` (bouton en mode survol,
   span en mode clic) → on l'aligne à droite dans les deux cas. */
[data-okt-nav-collapse]
	.wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-icon {
	flex: 0 0 auto;
	margin-inline-start: auto;
}
[data-okt-nav-collapse]
	.wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}

/* Lignes confortables et alignées — cible tactile ≥ 44px. */
[data-okt-nav-collapse] .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0.5em;
	text-align: start;
}
[data-okt-nav-collapse]
	.wp-block-navigation-item.has-child
	> .wp-block-navigation-item__content {
	cursor: pointer;
}

/* Séparateurs discrets ENTRE items (top-level et imbriqués), jamais en fin de liste. */
[data-okt-nav-collapse] .wp-block-navigation-item {
	border-block-end: 1px solid var( --okt-collapse-sep );
}
[data-okt-nav-collapse] .wp-block-navigation-item:last-child,
[data-okt-nav-collapse]
	.wp-block-navigation__submenu-container
	> .wp-block-navigation-item:last-child {
	border-block-end: 0;
}

/* Chevron : dimension/alignement stables quel que soit le mode. */
[data-okt-nav-collapse] .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

/* « Lien simple une fois replié » (méga oktimusMegaCollapse) : pas de dépliage,
   la ligne EST un lien (chevron + conteneur masqués, cf. nav-collapse.js). */
[data-okt-nav-collapse]
	.oktimus-collapse-plainlink
	> .wp-block-navigation__submenu-icon,
[data-okt-nav-collapse]
	.oktimus-collapse-plainlink
	> .wp-block-navigation__submenu-container {
	display: none !important;
}

/* ===================================================================== *
 *  Lien vers la page parente (option oktimusCollapseParentLink)          *
 * ===================================================================== */

/* Variante « entrée en tête » : ligne DISTINCTE, démarquée des sous-liens et
   du méga (teinte + filet + icône + libellé « Voir … »). */
[data-okt-nav-collapse] .oktimus-collapse-parent {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	min-height: 2.75rem;
	padding-block: 0.5em;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}
[data-okt-nav-collapse] .oktimus-collapse-parent-icon__svg,
[data-okt-nav-collapse] .oktimus-collapse-parent__svg {
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var( --okt-arrow-glyph-external, var( --okt-arrow-fallback-external ) ) center / contain no-repeat;
	mask: var( --okt-arrow-glyph-external, var( --okt-arrow-fallback-external ) ) center / contain no-repeat;
}

[data-okt-nav-collapse] .oktimus-collapse-parent__svg {
	width: 0.95em;
	height: 0.95em;
	opacity: 0.8;
}
[data-okt-nav-collapse] .oktimus-collapse-parent:hover,
[data-okt-nav-collapse] .oktimus-collapse-parent:focus-visible {
	text-decoration: underline;
}
/* Accordéon : l'entrée est un <li> enveloppe teinté ; drilldown : un <a> direct
   en tête de panneau, avec filet de séparation. */
[data-okt-nav-collapse] .oktimus-collapse-parent-item {
	background: rgba( 127, 127, 127, 0.06 );
	background: color-mix( in srgb, currentColor 6%, transparent );
}
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__panel
	> .oktimus-collapse-parent {
	border-block-end: 1px solid var( --okt-collapse-sep );
	background: rgba( 127, 127, 127, 0.06 );
	background: color-mix( in srgb, currentColor 6%, transparent );
	padding-inline: 0.25em;
}

/* Variante « icône d'accès » : petit lien ↗ dans la ligne du parent (avant le
   chevron). Le libellé/la ligne ouvre ; seule l'icône navigue. */
[data-okt-nav-collapse]
	.wp-block-navigation-item.has-child
	> .oktimus-collapse-parent-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35em;
	margin-inline-start: 0.25em;
	color: inherit;
	opacity: 0.55;
	transition: opacity var( --okt-collapse-dur ) var( --okt-collapse-ease );
}
[data-okt-nav-collapse]
	.wp-block-navigation-item.has-child
	> .oktimus-collapse-parent-icon:hover,
[data-okt-nav-collapse]
	.wp-block-navigation-item.has-child
	> .oktimus-collapse-parent-icon:focus-visible {
	opacity: 1;
}
[data-okt-nav-collapse] .oktimus-collapse-parent-icon__svg {
	width: 1.05em;
	height: 1.05em;
}

/* Indicateurs de focus clavier (a11y) pour les contrôles maison — le thème n'en
   pose pas forcément sur ces éléments injectés. */
[data-okt-nav-collapse] .oktimus-drilldown__back:focus-visible,
[data-okt-nav-collapse] .oktimus-collapse-parent:focus-visible,
[data-okt-nav-collapse] .oktimus-collapse-parent-icon:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	border-radius: 2px;
}

/* ===================================================================== *
 *  Accordéon — dépliage EN PLACE, piloté par `aria-expanded` natif       *
 *  (le sélecteur frère `~` est fiable dans les DEUX modes de rendu du    *
 *  cœur : bouton-icône en survol, bouton-libellé + span-icône en clic).  *
 * ===================================================================== */

[data-okt-nav-collapse="accordion"] .wp-block-navigation__submenu-container {
	overflow: hidden !important;
	max-height: 0;
	opacity: 0;
	visibility: hidden !important;
	padding-inline-start: var( --okt-collapse-indent ) !important;
	transition: max-height var( --okt-collapse-dur ) var( --okt-collapse-ease ),
		opacity var( --okt-collapse-dur ) var( --okt-collapse-ease ),
		visibility 0s linear var( --okt-collapse-dur );
}

[data-okt-nav-collapse="accordion"]
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .wp-block-navigation__submenu-container {
	max-height: var( --okt-collapse-max );
	opacity: 1;
	visibility: visible !important;
	transition: max-height var( --okt-collapse-dur ) var( --okt-collapse-ease ),
		opacity var( --okt-collapse-dur ) var( --okt-collapse-ease );
}

/* Passe de MESURE (nav-collapse.js, measureAccordion) : le moteur lève les plafonds le
   temps de lire la hauteur réelle de chaque sous-menu. La classe ne survit jamais à une
   frame. `45rem` ne reste qu'un repli PRÉ-JS. */
[data-okt-nav-collapse="accordion"].okt-collapse-measuring
	.wp-block-navigation__submenu-container {
	max-height: none !important;
	transition: none !important;
}

/* Chevron accordéon : pointe vers le BAS au repos, pivote vers le HAUT à l'ouverture
   (langage visuel « accordéon »). !important → indépendant de l'ordre de chargement. */
[data-okt-nav-collapse="accordion"] .wp-block-navigation__submenu-icon svg {
	transition: transform var( --okt-collapse-dur ) var( --okt-collapse-ease );
}
[data-okt-nav-collapse="accordion"]
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	> svg,
[data-okt-nav-collapse="accordion"]
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .wp-block-navigation__submenu-icon
	svg {
	transform: rotate( 180deg ) !important;
}

/* Sous-menus imbriqués DANS un méga (page-list, sans bouton bascule) : toujours
   visibles — le méga montre tout son contenu, il ne se replie pas en accordéon. */
[data-okt-nav-collapse]
	.oktimus-mega__inner
	.wp-block-navigation__submenu-container {
	max-height: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
}

/* ===================================================================== *
 *  Drilldown — niveaux aplatis en panneaux frères (moteur nav-collapse)  *
 * ===================================================================== */

/* Les <ul> déplacés dans la piste sont TOUJOURS rendus (le glissement gère
   l'affichage, pas `aria-expanded`) → on force visible / en flux. */
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__track
	.wp-block-navigation__container,
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__panel
	.wp-block-navigation__submenu-container {
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	padding-inline-start: 0 !important;
}

[data-okt-nav-collapse="drilldown"] .oktimus-drilldown {
	position: relative;
	overflow: hidden;
	/* La fenêtre est un flex-item de la nav (colonne, align-items:flex-start) et ses
	   panneaux sont en absolu (aucune largeur intrinsèque) → on force la pleine largeur,
	   sans quoi elle s'effondrerait à 0. */
	width: 100%;
	align-self: stretch;
	box-sizing: border-box;
	transition: height var( --okt-collapse-dur ) var( --okt-collapse-ease );
}

/* La piste n'est qu'un conteneur : les panneaux sont positionnés en ABSOLU dans la
   fenêtre (position:relative) et empilés à la même origine. */
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__track {
	position: static;
	width: 100%;
}

[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__panel {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	/* Hors champ à droite par défaut ; `reposition()` (JS) place le courant à 0. */
	transform: translateX( 100% );
	transition: transform var( --okt-collapse-dur ) var( --okt-collapse-ease );
}

/* Chevron des parents : pointe vers la DROITE (on entre dans un niveau). */
[data-okt-nav-collapse="drilldown"]
	.wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-icon
	svg {
	transform: rotate( -90deg ) !important;
}

/* Ligne « Retour » synthétisée en tête de chaque sous-panneau. */
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__back {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	min-height: 2.75rem;
	padding-block: 0.5em;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: start;
	background: transparent;
	border: 0;
	border-block-end: 1px solid var( --okt-collapse-sep );
	cursor: pointer;
	opacity: 0.75;
	transition: opacity var( --okt-collapse-dur ) var( --okt-collapse-ease );
}
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__back:hover,
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__back:focus-visible {
	opacity: 1;
}
/* Chevron « Retour » : pointe vers la GAUCHE (chevron bas pivoté). */
[data-okt-nav-collapse="drilldown"] .oktimus-drilldown__back-chevron {
	display: inline-block;
	flex: 0 0 auto;
	width: 0.7em;
	height: 0.7em;
	background-color: currentColor;
	-webkit-mask: var( --wp--custom--arrow--glyph--prev, var( --okt-arrow-fallback-prev ) ) center / contain no-repeat;
	mask: var( --wp--custom--arrow--glyph--prev, var( --okt-arrow-fallback-prev ) ) center / contain no-repeat;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-okt-nav-collapse] *,
	[data-okt-nav-collapse] *::before,
	[data-okt-nav-collapse] *::after {
		transition: none !important;
	}
}