/* =========================================================================
   phsmw-nav.css — navigation mobile (menu burger)
   -------------------------------------------------------------------------
   ADDITIF : ne modifie aucune règle existante. Sur grand écran, le header
   reste exactement tel qu'il est aujourd'hui. En dessous de 992 px, les
   liens basculent dans un panneau latéral pour éviter le désordre.
   ========================================================================= */

/* ---------- Bouton burger (injecté par phsmw-nav.js) ---------- */

.nav-burger {
	display: none;              /* masqué sur grand écran */
	align-items: center;
	justify-content: center;
	width: 44px;                /* cible tactile confortable */
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
}

.site-header:not(.site-header--admin) .nav-burger {
	border-color: rgba(26, 26, 26, .18);
}

.nav-burger__barres,
.nav-burger__barres::before,
.nav-burger__barres::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

.nav-burger__barres::before,
.nav-burger__barres::after {
	content: "";
	position: absolute;
}

.nav-burger__barres {
	position: relative;
}

.nav-burger__barres::before { transform: translateY(-7px); }
.nav-burger__barres::after  { transform: translateY(7px); }

/* Croix quand le menu est ouvert */
.nav-burger[aria-expanded="true"] .nav-burger__barres          { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger__barres::before  { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__barres::after   { transform: rotate(-45deg); }

/* ---------- Voile derrière le panneau ---------- */

.nav-voile {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 1040;
}

.nav-voile.is-open {
	opacity: 1;
	visibility: visible;
}

/* ---------- Bascule mobile ---------- */

@media (max-width: 991px) {

	.nav-burger {
		display: inline-flex;
	}

	/* Le conteneur ne se bagarre plus pour la place */
	.site-header .header-conteneur {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.site-header .nav-actions {
		display: flex;
		align-items: center;
		gap: 10px;
		flex: 0 0 auto;
	}

	/* Les liens deviennent un panneau latéral */
	.site-header .nav-principale {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(82vw, 340px);
		margin: 0;
		padding: 88px 24px 32px;
		list-style: none;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		background: #fff;
		box-shadow: -12px 0 32px rgba(26, 26, 26, .18);
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.16, 1, .3, 1);
		overflow-y: auto;
		z-index: 1050;
	}

	.site-header--admin .nav-principale {
		background: #1a1a1a;
	}

	.site-header .nav-principale.is-open {
		transform: translateX(0);
	}

	.site-header .nav-principale li {
		width: 100%;
	}

	.site-header .nav-principale .nav-link {
		display: block;
		width: 100%;
		padding: 14px 12px;
		border-radius: 8px;
		font-size: 1.05rem;
		border-bottom: 1px solid rgba(26, 26, 26, .08);
	}

	.site-header--admin .nav-principale .nav-link {
		border-bottom-color: rgba(255, 255, 255, .1);
	}

	.site-header .nav-principale .nav-link:hover,
	.site-header .nav-principale .nav-link:focus-visible {
		background: rgba(192, 138, 62, .1);
	}

	/* Le soulignement animé n'a pas de sens en liste verticale */
	.site-header .nav-principale .nav-link::after {
		display: none;
	}

	/* Le bouton d'action principal reste visible dans le header */
	.site-header .btn-or {
		padding: 10px 14px;
		font-size: .9rem;
		white-space: nowrap;
	}
}

/* Très petits écrans : on laisse la priorité au burger */
@media (max-width: 420px) {
	.site-header .btn-or {
		display: none;
	}

	/* ...mais on le réaffiche dans le panneau (ajouté par le JS) */
	.nav-principale .nav-cta-mobile {
		display: block;
		margin-top: 16px;
		text-align: center;
	}
}

.nav-principale .nav-cta-mobile {
	display: none;
}

/* ---------- Verrouillage du défilement quand le menu est ouvert ---------- */

body.nav-ouverte {
	overflow: hidden;
}

/* ---------- Préférences utilisateur ---------- */

@media (prefers-reduced-motion: reduce) {
	.site-header .nav-principale,
	.nav-voile,
	.nav-burger__barres,
	.nav-burger__barres::before,
	.nav-burger__barres::after {
		transition: none;
	}
}