/**
 * Vauban Onboarding — Bouton de bascule de thème (clair / sombre).
 *
 * Sobre, noir & blanc (icône en currentColor), sans emoji. Couleurs 100 %
 * tokenisées (--vt-*) avec repli = valeur claire historique → le mode clair
 * est strictement inchangé, le mode sombre s'active automatiquement.
 *
 * L'icône affichée (lune en clair = « passer au sombre », soleil en sombre =
 * « passer au clair ») est choisie en PUR CSS via html[data-theme] +
 * prefers-color-scheme : aucun JS requis pour l'état visuel.
 *
 * @package VaubanOnboarding
 */

.vbn-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 9px;
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	background: var(--vt-surface-1, #ffffff);
	color: var(--vt-muted, #667085);
	border: 1px solid var(--vt-border, #e4e7ec);
	box-shadow: var(--vt-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.05));
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vbn-theme-toggle:hover {
	color: var(--vt-text, #101828);
	border-color: var(--vt-border-strong, #d0d5dd);
}

.vbn-theme-toggle:focus-visible {
	outline: none;
	box-shadow: var(--vt-focus-ring, 0 0 0 3px rgba(79, 70, 229, 0.25));
}

.vbn-theme-toggle svg {
	width: 17px;
	height: 17px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Icônes : la lune par défaut (clair → propose le sombre). */
.vbn-theme-toggle .vbn-ti {
	display: none;
	line-height: 0;
}
.vbn-theme-toggle .vbn-ti-moon {
	display: inline-flex;
}

/* Sombre explicite → soleil. */
html[data-theme="dark"] .vbn-theme-toggle .vbn-ti-moon {
	display: none;
}
html[data-theme="dark"] .vbn-theme-toggle .vbn-ti-sun {
	display: inline-flex;
}

/* Auto + OS sombre → soleil. */
@media (prefers-color-scheme: dark) {
	html[data-theme="auto"] .vbn-theme-toggle .vbn-ti-moon {
		display: none;
	}
	html[data-theme="auto"] .vbn-theme-toggle .vbn-ti-sun {
		display: inline-flex;
	}
}

/* Variante posée sur le dégradé indigo de marque (en-tête du disclaimer).
   White-alpha invariant : même rendu en clair et en sombre. */
.vbn-theme-toggle--on-brand {
	background: var(--vt-topbar-chip-bg, rgba(255, 255, 255, 0.15));
	color: var(--vt-on-dark-text-full, rgba(255, 255, 255, 0.92));
	border-color: var(--vt-topbar-chip-border, rgba(255, 255, 255, 0.28));
	box-shadow: none;
}
.vbn-theme-toggle--on-brand:hover {
	background: var(--vt-topbar-chip-bg-hover, rgba(255, 255, 255, 0.26));
	color: #ffffff;
	border-color: var(--vt-topbar-chip-border-hover, rgba(255, 255, 255, 0.45));
}

/* Le bouton est rendu dans un dock invisible puis déplacé au boot. */
.vauban-onboarding-theme-dock {
	display: none;
}

/* Desktop ET mobile : bouton ancré dans le header du menu (coin supérieur droit),
   à l'écart des widgets flottants du bas (accessibilité Elementor, cookies…). Le
   header est en flex align-items:center -> centrage vertical automatique. */
.vauban-sidebar-header .vbn-theme-toggle--sidebar {
	flex: 0 0 34px;
	align-self: center;
	margin-left: auto;
}

/* Repli (mode embed sans header) : bouton dans la barre d'actions du formulaire. */
.vauban-form-actions .vbn-theme-toggle--actions {
	order: 3;
	flex: 0 0 34px;
	align-self: center;
	margin: 0;
}

@media (max-width: 768px) {
	/* Contact : ligne dédiée pleine largeur (après la rangée Retour / Suivant). */
	.vauban-form-actions.vauban-form-actions--mobile-fixed .vauban-contact-btn {
		order: 10 !important;
		flex: 0 0 100% !important;
		width: auto !important;
		margin-bottom: 0 !important;
	}
}