/* Module RECUPAL : menu mobile (burger + panneau overlay). */

/* Burger : visible uniquement en mobile, au-dessus du header sticky Elementor.
   Tous les resets en !important pour battre la bordure/accent du thème sur
   les <button>. */
.rcp-burger,
.rcp-burger:hover,
.rcp-burger:focus,
.rcp-burger:focus-visible,
.rcp-burger:active {
	display: none !important;
	position: fixed;
	top: 26px;
	right: 15px;
	z-index: 999991;
	width: 42px !important;
	height: 38px !important;
	min-width: 42px !important;
	box-sizing: border-box !important;
	padding: 8px !important;
	background: none !important;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

.rcp-burger span {
	display: block !important;
	width: 26px !important;
	height: 3px !important;
	min-height: 3px !important;
	border-radius: 2px !important;
	background: #198A37 !important;
	transition: transform 0.25s, opacity 0.25s;
}

/* Les états :hover/:active doivent être répétés ici : la règle de base les
   cible avec display none !important à spécificité (0,2,0) ; sans eux, le
   burger disparaissait sous le doigt au moment du tap et le click n'était
   jamais délivré (menu impossible à ouvrir en mobile). */
@media (max-width: 767px) {
	.rcp-burger,
	.rcp-burger:hover,
	.rcp-burger:focus,
	.rcp-burger:focus-visible,
	.rcp-burger:active {
		display: flex !important;
	}
}

/* Barre d'admin WordPress (local) : decale le burger. */
.admin-bar .rcp-burger {
	top: 60px;
}

/* Burger ancre DANS le header (deplace par le JS du module) : position
   absolute centree verticalement, il suit le header partout (hauteur
   responsive, barre d'admin, masquage au scroll par opacity/transform).
   Place apres la regle .admin-bar pour la battre a specificite egale. */
.rcp-header .rcp-burger {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
}

/* Menu ouvert : le burger se transforme en croix (les 3 traits pivotent),
   il reste en place dans le header et sert de bouton fermer (toggle). */
body:has(.rcp-menu-mobile.est-ouvert) .rcp-burger span:nth-child(1) {
	transform: translateY(9.5px) rotate(45deg);
}

body:has(.rcp-menu-mobile.est-ouvert) .rcp-burger span:nth-child(2) {
	opacity: 0;
}

body:has(.rcp-menu-mobile.est-ouvert) .rcp-burger span:nth-child(3) {
	transform: translateY(-9.5px) rotate(-45deg);
}

/* Panneau overlay : SOUS le header (z-index 999) : le header reste visible
   et identique a l'ouverture, le panneau glisse derriere lui et son contenu
   apparait en dessous. Le burger (dans le header) devient croix et ferme. */
.rcp-menu-mobile {
	position: fixed;
	inset: 0;
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.rcp-menu-mobile.est-ouvert {
	opacity: 1;
	pointer-events: auto;
}

.rcp-menu-mobile__fond {
	position: absolute;
	inset: 0;
	background: rgba(34, 43, 84, 0.35);
}

.rcp-menu-mobile__panneau {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 0 0 24px 24px;
	/* Le haut du panneau vit DERRIERE le header : le contenu demarre sous
	   lui (--rcp-panneau-top = bas du header, posee par le JS a l'ouverture). */
	padding: calc(var(--rcp-panneau-top, 100px) + 24px) 22px 34px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	transform: translateY(-14px);
	transition: transform 0.3s ease;
}

.rcp-menu-mobile.est-ouvert .rcp-menu-mobile__panneau {
	transform: translateY(0);
}


.rcp-menu-mobile__liste {
	list-style: none;
	margin: 0;
	padding: 0 6px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.rcp-menu-mobile__lien {
	display: flex;
	align-items: center;
	gap: 22px;
	text-decoration: none;
}

.rcp-menu-mobile__picto {
	width: 58px;
	height: 52px;
	object-fit: contain;
	flex: none;
}

.rcp-menu-mobile__libelle {
	display: flex;
	flex-direction: column;
	font-family: Aptos, Arial, sans-serif;
	font-size: 19px;
	line-height: 1.3;
}

.rcp-menu-mobile__libelle strong {
	font-weight: 700;
}

.rcp-menu-mobile__lien--vert .rcp-menu-mobile__libelle {
	color: #198A37;
}

.rcp-menu-mobile__lien--bleu .rcp-menu-mobile__libelle {
	color: #2FB3E8;
}

.rcp-menu-mobile__lien--navy .rcp-menu-mobile__libelle {
	color: #222B54;
}

/* Nuances maquette : seconde ligne coloree specifiquement. */
.rcp-menu-mobile__lien--vert .rcp-menu-mobile__libelle span {
	color: #2FB3E8;
}

.rcp-menu-mobile__liste li:first-child .rcp-menu-mobile__lien--vert .rcp-menu-mobile__libelle span {
	color: #198A37;
}