/* ---------------------------------------------------------------------------
 * mobile-overlay.css — Navigation mobile full-screen (CSS pur + JS vanilla).
 * Active uniquement < 1240px. Le menu desktop (≥ 1240px) n'est pas affecté.
 * Animations modernes : révélation en cercle (clip-path), cascade des liens,
 * micro-interactions, halos or dérivants. Tout neutralisé en reduced-motion.
 * ------------------------------------------------------------------------- */

/* Neutralise l'ancien panneau .main-nav slide-down sur mobile :
 * il est remplacé par l'overlay et ne doit plus être ni visible ni tabulable. */
@media (max-width: 1239px) {
	.main-nav { display: none !important; }
}

/* L'overlay n'existe qu'en mobile ; masqué en desktop. */
@media (min-width: 1240px) {
	.mobile-overlay { display: none !important; }
}

/* Burger : légère mise en avant à l'état ouvert (micro-interaction). */
.nav-toggle { transition: transform .3s ease; }
.nav-toggle[aria-expanded="true"] { transform: scale(1.08) rotate(90deg); }

/* --- Conteneur plein écran -------------------------------------------- */
.mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	color: var(--white);
	background: linear-gradient(135deg, var(--green3), var(--green) 58%, var(--green2));
	overflow-y: auto;
	/* Révélation en cercle depuis le coin du burger (haut-droite). */
	clip-path: circle(0% at calc(100% - 48px) 42px);
	transition: clip-path .42s cubic-bezier(.22, .61, .36, 1);
}
.mobile-overlay.is-open {
	clip-path: circle(150% at calc(100% - 48px) 42px);
	transition: clip-path .55s cubic-bezier(.22, .61, .36, 1);
	will-change: clip-path; /* posé seulement pendant l'ouverture */
}
/* Un overlay avec l'attribut [hidden] (état initial serveur / après fermeture)
 * ne s'affiche pas et sort de l'ordre de tabulation. */
.mobile-overlay[hidden] { display: none; }
body.mobile-overlay-open { overflow: hidden; }

/* Halos or du fond en très lente dérive (pseudo-élément, clippé avec l'overlay). */
.mobile-overlay::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	background:
		radial-gradient(circle at 82% 18%, rgba(193,154,62,.30), transparent 45%),
		radial-gradient(circle at 8% 90%, rgba(232,217,173,.22), transparent 42%);
	animation: overlay-halo-drift 12s ease-in-out infinite alternate;
}
@keyframes overlay-halo-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(2%, -2%, 0) scale(1.08); }
}

/* --- En-tête (logo + fermer) ------------------------------------------ */
.mobile-overlay__header {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px var(--pad);
}
.mobile-overlay__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--goldsoft); }
.mobile-overlay__logo .brand__mark { width: 40px; height: 40px; font-size: 20px; }
.mobile-overlay__logo .socorif-logo-custom { max-height: 44px; width: auto; }
.mobile-overlay__brandname { font-family: var(--font-heading); font-size: 22px; letter-spacing: 1px; color: var(--white); }
.mobile-overlay__close {
	width: 48px; height: 48px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border: none; border-radius: 50%; cursor: pointer;
	background: var(--gold); color: var(--green3);
	transition: background .15s, transform .3s ease;
}
.mobile-overlay__close:hover { background: var(--goldsoft); transform: rotate(90deg); }
.mobile-overlay__close .socorif-icon-custom { width: 22px; height: 22px; }

/* --- Navigation ------------------------------------------------------- */
.mobile-overlay__nav { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px var(--pad); }
.mobile-overlay__menu { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 520px; text-align: center; }
.mobile-overlay__item { margin: 0 0 6px; }

/* Entrée en cascade des items (fondu + translateY, delay progressif ~70ms). */
.mobile-overlay__item {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .4s ease-out, transform .4s ease-out;
	transition-delay: 0ms; /* fermeture : tout repart ensemble */
}
.mobile-overlay.is-open .mobile-overlay__item {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}

.mobile-overlay__link {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 28px; line-height: 1.2;
	color: var(--white); text-decoration: none;
	padding: 8px 10px; border-radius: 8px;
	transition: color .15s, transform .2s ease;
}
.mobile-overlay__link:hover, .mobile-overlay__link:focus-visible { color: var(--goldsoft); transform: scale(1.04); }

.mobile-overlay__row { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.mobile-overlay__toggle {
	width: 40px; height: 40px; flex-shrink: 0;
	border: 1px solid rgba(232,217,173,.4); border-radius: 50%;
	background: transparent; color: var(--goldsoft);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.mobile-overlay__toggle:hover { background: rgba(255,255,255,.08); }
.mobile-overlay__chevron { display: inline-flex; transition: transform .3s ease; }
.mobile-overlay__toggle[aria-expanded="true"] .mobile-overlay__chevron { transform: rotate(180deg); }

/* Sous-menu indenté, dépliage animé (grid-template-rows 0fr → 1fr). */
.mobile-overlay__submenu {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .3s ease, opacity .3s ease;
}
.mobile-overlay__submenu.is-open { grid-template-rows: 1fr; opacity: 1; }
.mobile-overlay__submenu[hidden] { display: none; } /* replié = hors tabulation */
.mobile-overlay__sublist {
	overflow: hidden; min-height: 0; /* requis pour le collapse 0fr */
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.mobile-overlay__submenu.is-open .mobile-overlay__sublist { margin: 8px 0 4px; }
.mobile-overlay__sublink {
	display: inline-block;
	font-size: 17px; color: rgba(255,253,248,.86); text-decoration: none;
	padding: 7px 10px; border-radius: 6px;
	transition: color .15s, transform .2s ease;
}
.mobile-overlay__sublink:hover, .mobile-overlay__sublink:focus-visible { color: var(--goldsoft); transform: scale(1.04); }

/* --- Pied : carte de visite ------------------------------------------- */
.mobile-overlay__footer {
	position: relative;
	padding: 18px var(--pad) 28px;
	border-top: 1px solid rgba(232,217,173,.18);
	display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.mobile-overlay__cta { width: 100%; max-width: 180px; justify-content: center; }
.mobile-overlay__contacts { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.mobile-overlay__contact { color: var(--goldsoft); font-weight: 600; font-size: 15px; text-decoration: none; }
.mobile-overlay__contact:hover, .mobile-overlay__contact:focus-visible { color: var(--white); }

/* --- Focus visible sur tout l'interactif ------------------------------ */
.mobile-overlay a:focus-visible,
.mobile-overlay button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--gold);
	border-radius: 8px;
}

/* --- prefers-reduced-motion : TOUT à 0 -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nav-toggle,
	.mobile-overlay,
	.mobile-overlay *,
	.mobile-overlay::before {
		transition-duration: 0ms !important;
		transition-delay: 0ms !important;
		animation: none !important;
	}
	/* Révélation instantanée (pas de cercle) : l'overlay apparaît net. */
	.mobile-overlay { clip-path: none !important; }
}