/**
 * Vauban — Composant Stepper (`<input type="number">` + flèches ▲▼).
 *
 * @version 1.0.0 (2026-06-06)
 *
 * Habille les champs nombre équipés par assets/js/components/vauban-stepper.js :
 * masque les flèches natives (non stylables) et pose deux boutons ▲▼ cohérents
 * avec la charte. Scopé aux classes `.vauban-stepper*` → aucun effet ailleurs.
 *
 * THÈME : couleurs via variables locales `--vstp-*` aliasant les tokens
 * sémantiques `--vt-*` (mode sombre automatique là où ils sont chargés) AVEC un
 * repli littéral clair (charte indigo) pour les surfaces sans couche de thème.
 * Aucune couleur thématisée codée en dur hors du bloc de variables ci-dessous.
 */

/* =============================================================================
 * 1. Wrapper + variables
 * ========================================================================== */
.vauban-stepper {
	--vstp-bg: var(--vt-surface-1, #FFFFFF);
	--vstp-bg-hover: var(--vt-inset, #F5F3FF);
	--vstp-fg: var(--vt-text-soft, #667085);
	--vstp-border: var(--vt-border, #D0D5DD);
	--vstp-accent: var(--vt-primary, #4F46E5);
	position: relative;
	display: block;
	width: 100%;
}

/* L'input garde le style de son espace ; on standardise juste la largeur (pour
 * aligner les boutons à droite) et on réserve la place à droite. */
.vauban-stepper__input {
	width: 100%;
	box-sizing: border-box;
	padding-right: 42px !important;
}

.vauban-stepper--has-suffix .vauban-stepper__input {
	padding-right: 66px !important;
}

/* Masque les flèches natives (Chrome/Safari + Firefox). */
.vauban-stepper__input::-webkit-outer-spin-button,
.vauban-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vauban-stepper__input {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* =============================================================================
 * 2. Suffixe d'unité optionnel (m², pers., €…)
 * ========================================================================== */
.vauban-stepper__suffix {
	position: absolute;
	top: 50%;
	right: 42px;
	transform: translateY(-50%);
	font-size: 0.82rem;
	line-height: 1;
	color: var(--vstp-fg);
	pointer-events: none;
	white-space: nowrap;
}

/* =============================================================================
 * 3. Boutons ▲▼
 * ========================================================================== */
.vauban-stepper__btns {
	position: absolute;
	top: 50%;
	right: 7px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.vauban-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 15px;
	padding: 0;
	margin: 0;
	line-height: 0;
	border: 1px solid var(--vstp-border);
	border-radius: 5px;
	background: var(--vstp-bg);
	color: var(--vstp-fg);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vauban-stepper__btn:hover {
	background: var(--vstp-bg-hover);
	color: var(--vstp-accent);
	border-color: var(--vstp-accent);
}

.vauban-stepper__btn:active {
	transform: translateY(0.5px);
}

.vauban-stepper__btn svg {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.vauban-stepper__btn { transition: none; }
	.vauban-stepper__btn:active { transform: none; }
}