/* ============================================================================
   Menu mobile du site vitrine — groupes repliables et sous-catégories
   ----------------------------------------------------------------------------
   Le balisage est généré par scripts/sync-mobile-menu.php (une seule définition
   pour les 27 pages) ; le comportement vit dans assets/js/mobile-menu.js.

   Écrit en CSS ordinaire plutôt qu'en classes Tailwind : dix pages (erreurs,
   pages légales, « en construction ») ne chargent pas site.css, et une classe
   que Tailwind n'a pas vue dans le HTML au moment de la compilation n'existe
   tout simplement pas.
   ========================================================================== */

/* Menu ouvert : la page dessous ne défile plus, la barre devient opaque. */
html.mm-lock,
html.mm-lock body { overflow: hidden; }

#navbar.mm-open {
	background-color: rgba(5, 5, 5, 0.98);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Le panneau défile dans sa propre hauteur : sur un petit téléphone (568 px),
   treize liens ne tiennent pas, et ceux du bas seraient restés hors d'atteinte. */
#mobile-menu .mm-scroll {
	max-height: calc(100vh - 4rem);
	max-height: calc(100dvh - 4rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* Le bandeau de cookies, tant qu'il est affiché, recouvre le bas de l'écran :
	   il publie sa hauteur (--cookie-banner-h) pour que les derniers liens et le
	   bouton « Me contacter » restent atteignables en faisant défiler le panneau. */
	padding: 0.75rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--cookie-banner-h, 0px));
}

#mobile-menu:not(.hidden) .mm-scroll { animation: mmIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes mmIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) { #mobile-menu { display: none !important; } }

.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-list > li + li { margin-top: 0.15rem; }

/* Lignes de premier niveau : zone de toucher de 52 px, bien au-dessus des 44 px conseillés. */
.mm-link,
.mm-toggle {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: 0.25rem 0.9rem;
	border: 0;
	border-radius: 0.85rem;
	background: none;
	color: rgba(255, 255, 255, 0.9);
	font: inherit;
	font-size: 1.02rem;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s, color 0.2s;
}
.mm-link:hover,
.mm-toggle:hover,
.mm-link:active,
.mm-toggle:active { background-color: rgba(255, 255, 255, 0.05); color: #fff; }
.mm-toggle[aria-expanded="true"] { color: #18bfef; background-color: rgba(24, 191, 239, 0.06); }
.mm-link:focus-visible,
.mm-toggle:focus-visible,
.mm-sublink:focus-visible,
.mm-cta:focus-visible { outline: 2px solid #18bfef; outline-offset: 2px; }

.mm-label { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.mm-ico {
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.65rem;
	background: rgba(24, 191, 239, 0.1);
	color: #18bfef;
}
.mm-meta {
	margin-right: 0.65rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.72rem;
	font-weight: 600;
}
.mm-chev { flex: none; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.45); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.mm-toggle[aria-expanded="true"] .mm-chev { transform: rotate(180deg); color: #18bfef; }

/* Ouverture en douceur : la hauteur passe de 0fr à 1fr, sans mesurer le contenu en JavaScript. */
.mm-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.mm-group.is-open > .mm-panel { grid-template-rows: 1fr; }
/* Replié, le contenu quitte aussi l'ordre de tabulation (visibility), pas seulement l'écran. */
.mm-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.32s; }
.mm-group.is-open > .mm-panel > .mm-inner { visibility: visible; transition-delay: 0s; }

.mm-sub {
	list-style: none;
	margin: 0.1rem 0 0.45rem 1.5rem;
	padding: 0.15rem 0 0.15rem 0.85rem;
	border-left: 1px solid rgba(24, 191, 239, 0.28);
}
.mm-sublabel {
	margin: 0.6rem 0 0 1.5rem;
	padding: 0 0 0 0.85rem;
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.mm-sublink {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 0.8rem;
	border-radius: 0.65rem;
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.97rem;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s, color 0.2s;
}
.mm-sublink:hover,
.mm-sublink:active { background-color: rgba(255, 255, 255, 0.05); color: #fff; }

/* Page courante : repérée par le script (aria-current), jamais écrite à la main. */
.mm-link[aria-current="page"],
.mm-sublink[aria-current="page"] { color: #18bfef; font-weight: 600; }
.mm-sublink[aria-current="page"]::before {
	content: '';
	width: 6px;
	height: 6px;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: #18bfef;
}

.mm-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 1.1rem 0.25rem 0;
	border-radius: 999px;
	background: #18bfef;
	color: #001820;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s, box-shadow 0.3s;
}
.mm-cta:hover,
.mm-cta:active { background: #0a9cd0; box-shadow: 0 10px 24px -10px rgba(24, 191, 239, 0.6); }

.mm-social { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.9rem; }
.mm-social a {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.6);
	transition: background-color 0.2s, color 0.2s;
}
.mm-social a:hover,
.mm-social a:active { background-color: rgba(255, 255, 255, 0.08); color: #18bfef; }

@media (prefers-reduced-motion: reduce) {
	#mobile-menu:not(.hidden) .mm-scroll { animation: none; }
	.mm-panel, .mm-chev, .mm-inner { transition: none; }
}