/* ==========================================================================
   SOUS-MENUS MOBILES/TABLETTE EN ACCORDEON / "MENU ASCENSEUR"
   --------------------------------------------------------------------------
   Le clone mobile de la navigation (ul.mobile-navigation, genere par
   js/common.js) affichait ses sous-menus (AI magination, arcade) toujours
   deployes. Ce fichier habille visuellement l'accordeon pilote par
   js/mobile-submenu-accordion.js : l'ouverture/fermeture (hauteur) reste
   geree en JS (jQuery slideToggle), ce fichier ne fait que neutraliser les
   styles desktop qui gardent sinon le sous-menu invisible, dessiner la
   fleche indicateur et le curseur.

   PAS de @media ici, volontairement : ul.mobile-navigation sert a la fois
   sous 960px ET au mode tablette tactile (.is_tablet, iPad/Android detecte
   par user-agent dans js/common.js), qui peut s'activer a des largeurs
   >=960px (palier "Tablet Landscape", cf. css/udt_media_queries.css). Ces
   regles ne s'appliquent de toute facon qu'a l'interieur de
   ul.mobile-navigation, qui reste display:none partout ailleurs -- donc
   aucun effet sur le panneau desktop (survol + glissement lateral, cf.
   js/submenu-mask.js), entierement inchange.

   A charger APRES css/style.css (comme css/desktop-menu-toggle.css).
   ========================================================================== */

/* Lien declencheur : curseur main + place pour la fleche */
header nav#primary-nav ul.mobile-navigation > li.pl-has-mobile-submenu > a.nav-text {
	position: relative;
	cursor: pointer;
}

/* Fleche indicateur (chevron CSS pur, pas d'image) */
header nav#primary-nav ul.mobile-navigation > li.pl-has-mobile-submenu > a.nav-text::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	margin-bottom: 2px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s ease;
	vertical-align: middle;
}

header nav#primary-nav ul.mobile-navigation > li.pl-has-mobile-submenu.pl-mobile-submenu-open > a.nav-text::after {
	transform: rotate(-135deg);
	margin-bottom: -2px;
}

/* Etat replie par defaut : evite un "flash" de contenu ouvert avant que
   le JS n'ait fini de s'initialiser (celui-ci prend ensuite la main via
   le style inline de jQuery, qui a priorite sur cette regle). */
header nav#primary-nav ul.mobile-navigation li ul.sub-menu,
header nav#primary-nav ul.mobile-navigation li ul.children {
	display: none;
}

/* Neutralise le systeme desktop (survol + glissement lateral, cf.
   style.css ~L177 et ~L161) qui rend sinon CE MEME sous-menu invisible
   et non cliquable en permanence (visibility:hidden, pointer-events:none,
   transform:translateX(-100%)) tant que le <li> n'a pas la classe
   ".submenu-open" ou n'est pas survole -- deux etats qui n'ont pas de
   sens tactile sur mobile/tablette. L'ouverture/fermeture reelle
   (affichage) est entierement pilotee par js/mobile-submenu-accordion.js. */
header nav#primary-nav ul.mobile-navigation li ul.sub-menu,
header nav#primary-nav ul.mobile-navigation li ul.children {
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	transition: none !important;
}

/* Filet de securite : si un sous-menu mobile/tablette se retrouve malgre
   tout enveloppe par le masque desktop (js/submenu-mask.js), on neutralise
   son positionnement absolu pour qu'il reste dans le flux et pousse bien
   le reste du menu vers le bas au lieu de se superposer dessus. */
header nav#primary-nav ul.mobile-navigation .sub-menu-mask {
	position: static !important;
	width: auto !important;
	overflow: visible !important;
}