/**
 * Mégamenu V2 — présentation du panneau greffé sur core/navigation-submenu.
 *
 * Ne définit AUCUNE boîte (fond, bordure, radius, padding) : le conteneur de
 * sous-menu natif et le thème gouvernent l'apparence — c'est tout l'intérêt de
 * l'attache native. On ne fait qu'élever le contexte d'empilement et régler la
 * LARGEUR / la JUSTIFICATION du conteneur natif, plus les couleurs surchargées.
 *
 * Port des overrides « durement acquis » d'oktimus (z-index, position static,
 * plancher de largeur) + presets de largeur alignés sur le bloc legacy pour la
 * parité visuelle des items migrés. Chargée à la demande (SubmenuExtension).
 */

/* Contexte de positionnement : la nav ancre le panneau (le conteneur natif est
   position:absolute). Sans cela il se placerait par rapport à l'item étroit. */
.wp-block-navigation:has(.skp-has-mega) {
	position: relative;
}

/* Élévation à l'ouverture : bat le z-index:2 natif du conteneur de sous-menu et
   échappe au contexte d'empilement volé par un bloc frère (will-change /
   transform / sticky). Couvre survol, focus clavier et état ouvert. */
.wp-block-navigation:has(.skp-has-mega:hover),
.wp-block-navigation:has(.skp-has-mega:focus-within),
.wp-block-navigation:has(.skp-has-mega .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
	position: relative;
	z-index: 20;
}

/* L'item mega ne doit pas ancrer le panneau (le natif pose position:relative sur
   tout .wp-block-navigation-item) → le conteneur se cale sur la nav. */
.skp-has-mega {
	position: static !important;
}

/* Le conteneur de sous-menu NATIF devient le panneau : on ne touche qu'à sa
   largeur / son placement, jamais à sa boîte (héritée).

   GARDE-FOUS viewport : un panneau ne doit JAMAIS déborder de l'écran ni créer
   d'ascenseur horizontal. La largeur EFFECTIVE (--skp-mega-w) borne le préréglage
   à l'espace utile du viewport moins une gouttière par côté — le PADDING GLOBAL
   du thème (surchargeable via --skp-mega-gutter). La POSITION est bornée par
   clamp() en coordonnées de la nav (l'ancre du panneau) grâce à deux métriques
   que calc() ne peut pas connaître, posées par assets/js/mega-native.js :
     --skp-mega-vp-width : largeur UTILE du viewport (hors barre de défilement,
                           que 100vw inclut à tort) ;
     --skp-mega-nav-left : offset gauche de la nav dans le viewport.
   TANT QUE ces mesures manquent (avant l'exécution du script différé, ou JS
   coupé), le panneau est PARQUÉ dans la boîte de la nav — cf. la règle
   `:not([data-skp-mega-ready])` plus bas : aucun débordement possible, même
   au premier paint. */
.skp-has-mega > .wp-block-navigation__submenu-container {
	--skp-mega-gutter-l: var(--skp-mega-gutter, var(--wp--style--root--padding-left, 1rem));
	--skp-mega-gutter-r: var(--skp-mega-gutter, var(--wp--style--root--padding-right, 1rem));
	--skp-mega-vpw: var(--skp-mega-vp-width, 100vw);
	--skp-mega-navl: var(--skp-mega-nav-left, 0px);
	/* Espace horizontal exploitable (viewport moins les gouttières). */
	--skp-mega-avail: calc(var(--skp-mega-vpw) - var(--skp-mega-gutter-l) - var(--skp-mega-gutter-r));
	/* Largeur effective : préréglage relevé au plancher (--skp-mega-min, aligné
	   sur la propriété min-width ci-dessous) puis borné à l'espace disponible —
	   les bornes de position raisonnent ainsi sur la largeur RÉELLEMENT rendue. */
	--skp-mega-w: min(max(var(--skp-mega-size, var(--wp--custom--content-size-menu, 720px)), var(--skp-mega-min, 22rem)), var(--skp-mega-avail));
	/* Bornes de position, en coordonnées de la nav : gouttière gauche ↔ droite. */
	--skp-mega-left-min: calc(var(--skp-mega-gutter-l) - var(--skp-mega-navl));
	--skp-mega-left-max: calc(var(--skp-mega-vpw) - var(--skp-mega-gutter-r) - var(--skp-mega-w) - var(--skp-mega-navl));
	/* Plancher : jamais plus large que l'espace utile. */
	min-width: min(var(--skp-mega-min, 22rem), var(--skp-mega-avail));
	max-width: var(--skp-mega-avail);
}

/* Presets de largeur (parité bloc legacy) : chaque preset ne fournit que
   --skp-mega-size ; la règle partagée applique la largeur BORNÉE --skp-mega-w.
   `!important` requis : le cœur pose `.wp-block-navigation .has-child
   .wp-block-navigation__submenu-container{width:0}` à spécificité identique
   (0,3,0) qui gagnerait à l'ordre source — le conteneur custom du bloc legacy
   n'avait pas cette concurrence, le natif si. */
.skp-has-mega[data-skp-mega-width] > .wp-block-navigation__submenu-container {
	width: var(--skp-mega-w) !important;
}
.skp-has-mega[data-skp-mega-width="content"] > .wp-block-navigation__submenu-container {
	--skp-mega-size: var(--wp--custom--content-size-menu, 720px);
}
/* contentextra = variante « étendue » de content (toggle « Taille étendue ») :
   contenu élargi, entre content et wide. */
.skp-has-mega[data-skp-mega-width="contentextra"] > .wp-block-navigation__submenu-container {
	--skp-mega-size: var(--wp--custom--content-extra-size-menu, 1080px);
}
.skp-has-mega[data-skp-mega-width="wide"] > .wp-block-navigation__submenu-container {
	--skp-mega-size: var(--wp--custom--wide-size-menu, 1400px);
}
.skp-has-mega[data-skp-mega-width="extrawide"] > .wp-block-navigation__submenu-container {
	--skp-mega-size: 1800px;
}
.skp-has-mega[data-skp-mega-width="custom"] > .wp-block-navigation__submenu-container {
	--skp-mega-size: var(--skp-mega-custom-width, 600px);
}
/* full = pleine largeur de la nav, HORS garde de position (la nav est en flux,
   donc déjà dans le viewport ; le conteneur nav doit occuper la largeur voulue
   de l'en-tête ; sinon régler la nav, ou utiliser un preset fixe). Déclaré APRÈS
   la règle partagée (même spécificité) pour l'emporter à l'ordre source. */
.skp-has-mega[data-skp-mega-width="full"] > .wp-block-navigation__submenu-container {
	width: 100% !important;
	max-width: none;
	left: 0;
	right: auto;
}

/* GARDE-FOU de position (panneaux flottants, hors `full`) : la position VOULUE —
   bord gauche de la nav par défaut, ou la justification choisie — est bornée aux
   gouttières du viewport. Le centrage entre dans le calc de `left` (et non plus
   via `translate`, qui décalerait APRÈS la borne) ; la propriété `translate`
   reste libre pour composer avec les effets (qui pilotent `transform`). */
.skp-has-mega:not([data-skp-mega-width="full"]) > .wp-block-navigation__submenu-container {
	left: clamp(var(--skp-mega-left-min), var(--skp-mega-left-desired, 0px), var(--skp-mega-left-max));
	right: auto;
	translate: none;
}
/* Justification = position voulue avant borne (défaut / "left" : 0px = bord
   gauche de la nav). Les % se résolvent contre la nav (bloc englobant). */
.skp-has-mega[data-skp-mega-justify="center"] > .wp-block-navigation__submenu-container {
	--skp-mega-left-desired: calc((100% - var(--skp-mega-w)) / 2);
}
.skp-has-mega[data-skp-mega-justify="right"] > .wp-block-navigation__submenu-container {
	--skp-mega-left-desired: calc(100% - var(--skp-mega-w));
}

/* PARCAGE avant métriques : tant que mega-native.js n'a pas posé ses mesures
   (drapeau `data-skp-mega-ready` sur la nav, à la première passe), les bornes
   ci-dessus raisonnent sur des replis qui supposent la nav au bord gauche du
   viewport — faux sur une nav décalée, d'où un panneau (même FERMÉ, il reste en
   layout) qui pouvait déborder et faire clignoter l'ascenseur horizontal au
   chargement. En attendant les mesures, on contraint le panneau DANS la boîte
   de la nav (en flux, donc jamais hors viewport) : aucune scrollbar possible
   avant le JS, et dégradation sans JS = panneau borné à la nav, utilisable.
   Spécificité (0,4,0) : bat les règles flottantes ci-dessus SANS !important,
   et laisse donc gagner les resets !important de la présentation repliée. */
.wp-block-navigation:not([data-skp-mega-ready]) .skp-has-mega > .wp-block-navigation__submenu-container {
	left: 0;
	right: auto;
	translate: none;
	min-width: 0;
	max-width: 100%;
}

/* ===================================================================== *
 *  Écart + pont de survol — dropdowns de PREMIER niveau (flottants)      *
 *  Méga V2 ET sous-menus classiques (dans une nav contenant un méga).    *
 * ===================================================================== */

/* Un panneau collé à l'intitulé n'est pas esthétique. On ouvre le déroulé un peu
   plus bas (`--skp-submenu-gap`, IDENTIQUE méga ↔ classique) via `margin-top` (et non
   `top`) : décalage RELATIF, insensible à l'ancre (item pour un classique, conteneur
   pour un méga) et composable avec `translate` (centrage) / `transform` (effets).
   PREMIER niveau seulement (enfant direct du conteneur racine) : les flyouts
   imbriqués gardent leur cascade latérale native. Hors présentation repliée. */
.wp-block-navigation:has(.skp-has-mega):not([data-skp-nav-collapse])
	.wp-block-navigation__container
	> .wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-container {
	margin-top: var(--skp-submenu-gap, 0.5rem);
}

/* PONT de survol. Porté par l'INTITULÉ (largeur de l'item), PAS par le panneau : un
   pont large recouvrirait les items voisins ; étroit, il peut être généreux en hauteur
   sans risque. Affiché UNIQUEMENT quand l'item est survolé (donc aucune zone morte
   quand le menu est fermé). Il comble l'écart intitulé→panneau QUELLE QUE SOIT sa
   taille — nécessaire car l'ancrage du panneau au conteneur fait varier l'écart selon
   les lignes de la nav (nav qui passe à la ligne : écart plus grand). Survoler ce
   pseudo (il fait partie de l'intitulé) garde l'item `:hover` → le panneau reste
   ouvert. Peint AVANT le panneau (ordre DOM) → n'intercepte aucun clic du panneau.
   Exclut « ouvrir au clic » (pas d'ouverture au survol → pas de pont nécessaire). */
.wp-block-navigation:has(.skp-has-mega):not([data-skp-nav-collapse])
	.wp-block-navigation__container
	> .wp-block-navigation-item.has-child:not(.open-on-click)
	> .wp-block-navigation-item__content {
	position: relative;
}
.wp-block-navigation:has(.skp-has-mega):not([data-skp-nav-collapse])
	.wp-block-navigation__container
	> .wp-block-navigation-item.has-child:not(.open-on-click):hover
	> .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	/* couvre l'écart (marge + base) avec marge de sécurité ; étroit donc sans danger */
	height: calc(var(--skp-submenu-gap, 0.5rem) + 0.75rem);
}

/* Panneau interne : hérite du fond/texte du conteneur natif (couleurs overlay) ;
   les surcharges du bloc arrivent en variables inline `--skp-mega-panel-*`. */
.skp-mega__panel {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	/* Bloc englobant du bouton d'édition (pastille `.skp-edit-btn`, positionnée en
	   absolu par skp-core). */
	position: relative;
}
.skp-mega__inner {
	background-color: var(--skp-mega-panel-bg, transparent);
	color: var(--skp-mega-panel-text, inherit);
	/* CONTENEUR DE REQUÊTE : le panneau devient la boîte de référence de son contenu, pour
	   que les options responsive en mode « Conteneur » (paliers `cq-{px}` de skp-blocks)
	   mesurent SA largeur et non celle de la fenêtre — un panneau de 720px dans une nav
	   repliée en tiroir doit se comporter comme une colonne étroite.
	   Posé sur `__inner` et non sur `__panel` pour deux raisons : c'est l'élément que
	   l'effet morph CLONE (le clone emporte donc le conteneur, et les requêtes continuent
	   de matcher dans la scène `.skp-megamorph`), et la pastille d'édition vit dans
	   `__panel` HORS de `__inner` — elle échappe ainsi au `contain: layout` induit.
	   Sûr ici : `__inner` est en `width: 100%` d'un panneau à largeur imposée
	   (`--skp-mega-w`), il n'est jamais dimensionné par son contenu. */
	container-type: inline-size;
	container-name: skp-mega;
}

/* Bouton d'édition (skp-core `Modules\EditAffordance`) : apparence de base fournie par
   la feuille `skp-edit-affordance` ; ici on ne pilote que la RÉVÉLATION au survol/focus
   du panneau (réservé aux éditeurs — rendu serveur conditionnel). */
.skp-mega__panel:hover .skp-edit-btn,
.skp-mega__panel:focus-within .skp-edit-btn {
	opacity: 1;
	pointer-events: auto;
}

/* Lien de repli : toujours masqué. En présentation repliée (feature
   `adaptive-submenus` de skp-blocks), le panneau n'est pas déployé : c'est la LIGNE
   qui navigue, via le marqueur `data-skp-collapse-plainlink` posé au serveur
   (SubmenuExtension) et lu par le moteur nav-adaptive. Cet élément reste donc un
   simple porteur d'URL, sans affichage propre. */
.skp-mega__collapsed-link {
	display: none;
}

/* ===================================================================== *
 *  Présentation repliée — feature `adaptive-submenus` (skp-blocks)       *
 *  Le conteneur de sous-menu natif est déjà remis EN FLUX par la feuille *
 *  nav-adaptive ; ici on neutralise la largeur / justification flottante *
 *  et on EMPILE les colonnes du panneau (largeur étroite en replié).     *
 * ===================================================================== */

[data-skp-nav-collapse] .skp-has-mega > .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	max-width: none !important;
	translate: none !important;
	left: auto !important;
	right: auto !important;
}

/* Le contenu du panneau (contenu libre du CPT) peut utiliser DEUX mécanismes
   multi-colonnes qui ne s'empilent pas seuls avant leur propre point de rupture :
   core/columns (flex) ET les groupes en grille (is-layout-grid). En présentation
   repliée on force UNE seule colonne pour les deux, + la pleine largeur des enfants. */
[data-skp-nav-collapse] .skp-mega__inner .wp-block-columns {
	flex-direction: column !important;
}
[data-skp-nav-collapse] .skp-mega__inner .wp-block-columns > .wp-block-column {
	flex-basis: 100% !important;
	width: 100% !important;
	min-width: 0 !important;
}
/* Groupes/rangées en grille (core « Grille », requêtes, galeries…) → 1 colonne. */
[data-skp-nav-collapse] .skp-mega__inner .is-layout-grid {
	grid-template-columns: 1fr !important;
}
/* Contenu en « pleine largeur » (alignfull) dans le panneau : on neutralise le
   débordement par marges négatives, sans objet dans une liste repliée étroite. */
[data-skp-nav-collapse] .skp-mega__inner .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}