/* =============================================================================
   Haltemis — menu mobile en modale
   Référence : frame « Menu drawer — 92j-14 » du .fig — panneau beige #FFD9BB,
   coins arrondis, padding 24, gap 16, entrées PJS 700 15 px marron, bouton
   Académie gold en pied.
   ============================================================================= */

/* --- Bouton hamburger ------------------------------------------------------
   Posé à DROITE du bouton Académie, dans la colonne CTA. Celui de Beaver
   Builder reste au milieu, dans la colonne de navigation : masqué plutôt que
   supprimé, pour ne pas casser le markup du module. */

.hal-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;               /* cible tactile confortable */
	height: 44px;
	padding: 10px;
	margin-left: 12px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.hal-burger span {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background-color: var(--hal-creme, #FCF8F1);
	transition: transform 220ms ease, opacity 180ms ease;
}

.hal-burger:hover,
.hal-burger:focus-visible {
	background-color: rgba(252, 248, 241, .14);
}

/* Croix quand la modale est ouverte : le bouton dit où on en est. */
.hal-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hal-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hal-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 992px) {
	.hal-burger { display: flex; }

	/* Le hamburger natif de BB et la liste inline disparaissent : c'est la
	   modale qui porte la navigation. */
	.hal-header .fl-menu-mobile-toggle,
	.hal-header .hal-nav { display: none !important; }

	/* En mobile, BB conserve les largeurs de colonne du desktop : la colonne
	   CTA restait à 20 % (94 px), trop étroite pour le bouton ET le hamburger,
	   qui se superposaient. La barre repasse en flex : le logo prend ce qu'il
	   faut, le bloc de droite se dimensionne sur son contenu. */
	.hal-header .fl-col-group {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
	}

	.hal-header .fl-col {
		width: auto !important;
		max-width: none !important;
		clear: none !important;
	}

	.hal-header__logo { flex: 1 1 auto; }
	.hal-header__nav  { flex: 0 0 0; }
	.hal-header__cta  { flex: 0 0 auto; }

	.hal-header__cta .fl-col-content {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* Le hamburger est un frère des colonnes, dernier élément de la barre. */
	.hal-header .fl-col-group > .hal-burger {
		flex: 0 0 auto;
		order: 99;
	}

	/* Le module bouton de BB est un bloc pleine largeur : sans width auto il
	   occupe toute la colonne et le hamburger se superpose à lui. */
	.hal-header__cta .fl-module-button {
		width: auto !important;
		flex: 0 0 auto;
		margin: 0 !important;
	}

	.hal-header__cta .fl-button-wrap { width: auto; }

	/* Le bouton Académie se resserre pour laisser la place au hamburger. */
	.hal-header__cta a.fl-button {
		padding-left: 14px !important;
		padding-right: 14px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}
}

/* --- Modale ---------------------------------------------------------------- */

.hal-modale {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: stretch;
	justify-content: center;
	/* Le fond ferme la modale au clic : encore faut-il pouvoir l'atteindre.
	   Avec 12 px de marge, la zone à viser était une bordure de la largeur d'un
	   trait — inutilisable au doigt. On dégage une vraie prise : 64 px sous le
	   panneau et 28 px sur les côtés, soit plus que la cible tactile de 44 px
	   recommandée. Le haut reste court pour que le hamburger, qui ferme aussi,
	   demeure au même endroit qu'à l'ouverture. */
	padding: 12px 28px 64px;
	background-color: rgba(78, 32, 4, .55);   /* marron de la charte, pas un noir neutre */
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 220ms ease;
}

.hal-modale.est-ouverte { opacity: 1; }

.hal-modale[hidden] { display: none; }

.hal-modale__panneau {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 24px;
	border-radius: 8px;
	background-color: var(--hal-beige, #FFD9BB);
	/* Fade seul : pas de glissement ni d'échelle. */
	opacity: 0;
	transition: opacity 200ms ease;
}

.hal-modale.est-ouverte .hal-modale__panneau {
	opacity: 1;
}



/* Le clic atterrissait sur le <path> du SVG et non sur le bouton : la croix
   ne fermait rien. Le SVG devient transparent au pointeur, le bouton reçoit
   le clic. Même précaution sur les barres du hamburger. */
.hal-burger span {
	pointer-events: none;
}

.hal-modale__liste {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hal-modale__liste a {
	display: block;
	font-family: var(--hal-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hal-marron, #5B2020);
	text-decoration: none;
	padding: 6px 0;
}

/* Les liens du design system portent une transition globale : neutralisée ici.
   Dans une modale pleine page, une animation par lien parasite la lecture. */
.hal-modale__liste a,
.hal-modale__cta {
	transition: none !important;
}

/* Soulignement au survol et sur la page courante, instantané. */
.hal-modale__liste a:hover,
.hal-modale__liste a:focus-visible,
.hal-modale__liste a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
}

.hal-modale__cta {
	align-self: flex-start;
	margin-top: auto;          /* poussé en pied de modale */
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 8px;
	border: 2px solid transparent;
	background-color: var(--hal-gold, #FFC201);
	color: var(--hal-marron, #5B2020);
	font-family: var(--hal-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* Même inversion au survol que les boutons du site (spec PDF du 17/07). */
.hal-modale__cta:hover,
.hal-modale__cta:focus-visible {
	background-color: #FFFDF6;
	border-color: var(--hal-gold, #FFC201);
	color: var(--hal-marron, #5B2020);
}

.hal-modale :focus-visible {
	outline: 2px solid var(--hal-marron, #5B2020);
	outline-offset: 2px;
}

/* Le fond ne défile pas derrière la modale. */
body.hal-modale-active { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.hal-modale,
	.hal-modale__panneau,
	.hal-burger span { transition: none; }
}

/* --- Le hamburger ferme ce qu'il a ouvert (refonte du 19/08/2026) ---------
 *
 * L'overlay est en `z-index: 9999`; le hamburger, laissé en `static`, passait
 * dessous dès l'ouverture et devenait injoignable. D'où la croix séparée
 * d'origine, posée dans le panneau — mais à 319-353 x 22-56, elle recouvrait
 * presque exactement la zone du hamburger (311-355 x 34-78) : sur un téléphone,
 * le doigt tombait au hasard sur l'un ou l'autre.
 *
 * On remonte donc le hamburger au-dessus de l'overlay pendant l'ouverture. Il
 * s'anime déjà en croix via [aria-expanded="true"] : un seul bouton, une seule
 * cible de 44 px, au même endroit à l'ouverture comme à la fermeture. */
body.hal-modale-active .hal-burger {
	position: relative;
	z-index: 10000;
}

/* La barre du milieu disparaît en croix : sur le fond clair du panneau, les
   deux barres restantes doivent virer au marron pour rester lisibles. */
body.hal-modale-active .hal-burger span {
	background-color: var(--hal-marron, #5B2020);
}

/* --- Focus visible cohérent (19/08/2026) ---------------------------------
   À l'ouverture, le focus part sur la première entrée : le contour bleu par
   défaut du navigateur s'affichait alors en travers du panneau crème. On garde
   un focus parfaitement visible — il est indispensable au clavier — mais dans
   la palette du site. */
.hal-modale__liste a:focus-visible,
.hal-modale__cta a:focus-visible {
	outline: 2px solid var(--hal-marron, #5B2020);
	outline-offset: 3px;
	border-radius: 4px;
}