/* ==========================================================================
   Menu mobile — plein écran sur le crème du site, version épurée (07/10/2026).
   Contenu ajouté par inc/menu-mobile.php ; rien n'est modifié dans Blocksy,
   seulement surchargé ici (ses règles dynamiques sont en 1-1-0 : on monte d'un
   cran, et `!important` sur les seules variables qu'il pose lui-même).
   ========================================================================== */

html #offcanvas {
	--soform-menu-encre: var(--theme-palette-color-1, #17120f);
	--soform-menu-texte-2: var(--theme-palette-color-4, #8c7f74);
	--soform-menu-page: var(--theme-palette-color-8, #f6f0ea);
	--soform-menu-filet: rgba(23, 18, 15, 0.14);
	--soform-menu-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--side-panel-width: 100vw !important;
	--theme-box-shadow: none !important;
}

html #offcanvas .ct-panel-inner {
	background-color: var(--soform-menu-page) !important;
	/* Le grain des sections : le menu est une page du site, pas une fenêtre. */
	background-image: url("../../../../uploads/2026/08/soform-texture-grain.png");
	background-size: 100px 100px;
	color: var(--soform-menu-encre);
}

/* --- Fermeture ---------------------------------------------------------- */

html #offcanvas .ct-panel-actions {
	padding: 20px 20px 0;
}

html #offcanvas .ct-toggle-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--soform-menu-encre);
	--theme-icon-color: var(--soform-menu-encre);
	transition: transform 0.4s var(--soform-menu-ease);
}

html #offcanvas .ct-toggle-close:hover,
html #offcanvas .ct-toggle-close:focus-visible {
	transform: rotate(90deg);
}

html #offcanvas .ct-panel-content[data-device="mobile"] {
	padding: 0 32px 36px;
}

/* Le bloc d'action se cale en bas de l'écran, sous le pouce : la hauteur de
   la zone = l'écran moins la barre de fermeture (20 + 44 px) et le bas. */
html #offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - 64px - 36px);
	/* Deux enfants, les liens et le pied : l'un en haut, l'autre en bas.
	   (`margin-top: auto` sur le pied est neutralisé par Blocksy.) */
	justify-content: space-between;
	padding: 0;
}

/* --- Les liens : grands, aérés, sans ornement --------------------------- */

html #offcanvas .mobile-menu {
	align-self: stretch;
	width: 100%;
	margin-top: clamp(24px, 6vh, 56px);
}

html #offcanvas .mobile-menu > ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
}

html #offcanvas .mobile-menu > ul > li {
	margin: 0;
	border: 0;
}

html #offcanvas .mobile-menu > ul > li > a {
	/* Blocksy étire le lien sur toute la ligne : le trait de la page courante
	   doit suivre le mot, pas la largeur de l'écran. */
	display: inline-block;
	width: fit-content !important;
	padding: 10px 0 !important;
	font-family: "Plus Jakarta Sans", var(--theme-font-family, sans-serif);
	font-size: clamp(26px, 7.6vw, 30px) !important;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.4px;
	text-transform: none;
	color: var(--soform-menu-encre) !important;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 calc(100% - 8px);
	background-size: 0 1px;
	background-repeat: no-repeat;
	transition: background-size 0.5s var(--soform-menu-ease);
}

/* La page où l'on est, et le survol : un trait fin sous le mot. */
html #offcanvas .mobile-menu > ul > li.current-menu-item > a,
html #offcanvas .mobile-menu > ul > li > a:hover,
html #offcanvas .mobile-menu > ul > li > a:focus-visible {
	background-size: 100% 1px;
}

/* --- Pied : une action, une ligne --------------------------------------- */

.soform-menu__pied {
	align-self: stretch;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: auto;
	padding-top: 40px;
}

.soform-menu__bouton,
.soform-menu__bouton:hover,
.soform-menu__bouton:focus,
.soform-menu__bouton:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 6px 6px 6px 24px;
	border-radius: 999px;
	background-color: var(--soform-menu-encre);
	font-size: 15px;
	font-weight: 500;
	color: var(--soform-menu-page);
	text-decoration: none;
}

.soform-menu__puce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background-color: var(--soform-menu-page);
	color: var(--soform-menu-encre);
	font-size: 16px;
	transition: transform 0.4s var(--soform-menu-ease);
}

.soform-menu__bouton:hover .soform-menu__puce,
.soform-menu__bouton:focus-visible .soform-menu__puce {
	transform: translateX(3px);
}

.soform-menu__liens {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 16px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.soform-menu__liens a {
	padding-block: 12px;
	color: var(--soform-menu-texte-2);
	text-decoration: none;
	transition: color 0.3s ease;
}

.soform-menu__liens a:hover,
.soform-menu__liens a:focus-visible {
	color: var(--soform-menu-encre);
}

/* --- Entrée : un fondu doux, les liens d'abord -------------------------- */

@keyframes soform-menu-entree {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

html #offcanvas.active .mobile-menu > ul > li,
html #offcanvas.active .soform-menu__pied {
	animation: soform-menu-entree 0.8s var(--soform-menu-ease) both;
}

html #offcanvas.active .mobile-menu > ul > li:nth-child(1) { animation-delay: 0.08s; }
html #offcanvas.active .mobile-menu > ul > li:nth-child(2) { animation-delay: 0.13s; }
html #offcanvas.active .mobile-menu > ul > li:nth-child(3) { animation-delay: 0.18s; }
html #offcanvas.active .mobile-menu > ul > li:nth-child(4) { animation-delay: 0.23s; }
html #offcanvas.active .mobile-menu > ul > li:nth-child(5) { animation-delay: 0.28s; }
html #offcanvas.active .mobile-menu > ul > li:nth-child(n + 6) { animation-delay: 0.33s; }
html #offcanvas.active .soform-menu__pied { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
	html #offcanvas.active .mobile-menu > ul > li,
	html #offcanvas.active .soform-menu__pied {
		animation: none;
	}

	html #offcanvas .ct-toggle-close,
	html #offcanvas .mobile-menu > ul > li > a,
	.soform-menu__puce {
		transition: none;
	}
}