/* ============================================================================
   MODE CLAIR / SOMBRE — Thème Saluta / SprawLink
   ========================================================================== */

/* ----------------------------------------------------------------------
   Bouton flottant
   -------------------------------------------------------------------- */
.theme-toggle {
	position: fixed;
	left: 20px;
	bottom: 20px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #141417;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: #ffffff;
	cursor: pointer;
	z-index: 9000;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.theme-toggle:hover {
	transform: translateY(-2px);
	border-color: #fa4c69;
}

.theme-toggle-icon {
	position: absolute;
	display: flex;
	opacity: 0;
	transform: scale(0.6) rotate(-40deg);
	transition: opacity 220ms ease, transform 220ms ease;
}

.theme-toggle-icon svg {
	width: 20px;
	height: 20px;
}

/* En mode sombre (par défaut) : on montre le soleil — cliquer "va vers" le clair. */
.theme-toggle-icon--sun {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* En mode clair : on montre la lune — cliquer "revient vers" le sombre. */
html.theme-light .theme-toggle-icon--sun {
	opacity: 0;
	transform: scale(0.6) rotate(40deg);
}

html.theme-light .theme-toggle-icon--moon {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

html.theme-light .theme-toggle {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.1);
	color: #14141a;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ----------------------------------------------------------------------
   Mega menu — bascule automatique (déjà en variables CSS scopées
   sous #pr-nav, donc rien d'autre à faire ici que redéfinir ces
   variables pour le mode clair).
   -------------------------------------------------------------------- */
html.theme-light #pr-nav {
	--shadow: 0 24px 60px -12px rgba(15, 15, 20, 0.14), 0 4px 12px rgba(15, 15, 20, 0.05);
	--shadow-hover: 0 30px 70px -14px rgba(15, 15, 20, 0.18), 0 0 0 1px rgba(250, 76, 105, 0.15);
	--border-color: #ececec;
	--border-color-hover: rgba(250, 76, 105, 0.3);
	--bg: #ffffff;
	--bg-card: #ffffff;
	--text: #14141a;
	--text-muted: #6b6b76;
}

html.theme-light #pr-nav .mega-menu-card:hover {
	background: #fafafa;
}

/* ----------------------------------------------------------------------
   Formulaire de devis — même principe, variables scopées sous
   .devis-modal-overlay.
   -------------------------------------------------------------------- */
html.theme-light .devis-modal-overlay {
	--border-color: #ececec;
	--bg: #ffffff;
	--bg-elevated: #f7f7f8;
	--bg-input: #f2f2f4;
	--text: #14141a;
	--text-muted: #6b6b76;

	background-image:
		radial-gradient( circle at 12% 8%, rgba(250, 76, 105, 0.08), transparent 42% ),
		radial-gradient( circle at 88% 92%, rgba(250, 76, 105, 0.05), transparent 38% ),
		repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.02) 0px, rgba(0, 0, 0, 0.02) 1px, transparent 1px, transparent 64px );
}

html.theme-light .devis-modal-close {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------------------
   Base de secours pour le reste du site : si une section Elementor
   n'a PAS encore de surcharge dédiée dans theme-mode-overrides.css,
   ceci évite au moins un texte sombre illisible sur fond resté sombre.
   Ce n'est PAS une conversion automatique de vos sections — seulement
   un filet de sécurité minimal pour le texte courant.
   -------------------------------------------------------------------- */
html.theme-light body {
	color: #14141a;
}

@media (prefers-reduced-motion: reduce) {
	.theme-toggle,
	.theme-toggle-icon {
		transition-duration: 1ms !important;
	}
}