/**
 * Vauban Onboarding — Modal Simulateur de revenus (tunnel, étapes >= 2).
 *
 * Styles extraits depuis includes/frontend/form-renderer-partials/modal-simulator.php
 * (chantier 2026-06-06 « CSS/JS inline -> fichiers dédiés », v8.4.676).
 *
 * Règles :
 * - Couleurs thématisées via tokens --vt-* (mode clair/sombre automatique).
 * - Les littéraux conservés (dégradé de marque, voiles blanc-sur-foncé) vivent
 *   sur des cartes à couleur fixe (texte blanc) qui ne basculent pas avec le thème
 *   — même approche que le simulateur public propre (includes/vitrine/.../simulateur.css).
 * - Classes de présentation .vauban-sim-* ; les hooks JS (#pop_*, .pop-opt,
 *   .pop-occ-btn) restent des marqueurs dédiés (cf. CLAUDE.md règle DS 4).
 *
 * @package Vauban_Onboarding
 */

/* ===== Overlay & conteneur ===== */
.vauban-sim-modal-overlay {
	display: none; /* ouverture/fermeture pilotées en JS (modal.style.display). */
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 99999999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.vauban-sim-modal-content {
	background: var(--vt-surface-1, #f1f5f9);
	width: 100%;
	max-width: 900px;
	border-radius: 24px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 95vh;
	animation: vaubanFadeIn 0.3s ease-out;
}

/* ===== En-tête + bouton fermer ===== */
.vauban-sim-modal-header {
	display: flex;
	justify-content: flex-end;
	padding: 15px 20px 0;
}

.vauban-sim-modal-close {
	background: transparent;
	border: none;
	color: var(--vt-muted, #64748b);
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s;
}

.vauban-sim-modal-close:hover,
.vauban-sim-modal-close:focus-visible {
	color: var(--vt-text, #1e293b);
}

.vauban-sim-modal-body {
	padding: 10px 30px 30px;
	overflow-y: auto;
}

/* ===== Adresse prise en compte ===== */
.vauban-sim-address {
	display: none; /* affichage piloté en JS quand une adresse est connue. */
	background: var(--vt-info-bg, #eff6ff);
	border-left: 4px solid var(--vt-info, #3b82f6);
	padding: 12px 15px;
	border-radius: 6px;
	margin-bottom: 25px;
}

.vauban-sim-address__label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--vt-info-strong, #1e40af);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vauban-sim-address__value {
	margin: 5px 0 0;
	font-size: 13px;
	color: var(--vt-info-strong, #1e3a8a);
	font-weight: 500;
}

/* ===== Grille 2 colonnes (paramètres / résultats) ===== */
.vauban-sim-modal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.vauban-sim-params__title {
	color: var(--vt-text-soft, #334155);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 0;
	margin-bottom: 25px;
}

/* ===== Ligne Type / Surface / Capacité ===== */
.vauban-sim-row {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}

.vauban-sim-field {
	flex: 1;
}

.vauban-sim-field--narrow {
	flex: 0 0 80px;
	width: 80px;
}

.vauban-sim-field__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--vt-muted, #64748b);
	margin-bottom: 5px;
}

.vauban-sim-field__select {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--vt-border, #cbd5e1);
	border-radius: 6px;
	font-size: 13px;
	color: var(--vt-text-soft, #475569);
}

.vauban-sim-field__control {
	position: relative;
}

.vauban-sim-field__input {
	width: 100%;
	padding: 8px 25px 8px 8px;
	border: 1px solid var(--vt-border, #cbd5e1);
	border-radius: 6px;
	font-size: 13px;
}

.vauban-sim-field__unit {
	position: absolute;
	right: 5px;
	top: 9px;
	font-size: 10px;
	color: var(--vt-muted, #94a3b8);
}

/* ===== Blocs de paramètres ===== */
.vauban-sim-block {
	margin-bottom: 25px;
}

.vauban-sim-block--tight {
	margin-bottom: 10px;
}

.vauban-sim-block__label {
	display: block;
	font-size: 13px;
	color: var(--vt-text-soft, #475569);
	margin-bottom: 10px;
}

.vauban-sim-block__label--strong {
	font-weight: 600;
	margin-bottom: 8px;
}

.vauban-sim-hint {
	font-size: 11px;
	color: var(--vt-muted, #94a3b8);
	margin-top: 5px;
}

/* ===== Options de valorisation ===== */
.vauban-sim-options-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.vauban-sim-option {
	font-size: 13px;
	color: var(--vt-muted, #64748b);
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.vauban-sim-option input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

/* ===== Prix moyen par nuit (ADR) ===== */
.vauban-sim-adr-control {
	position: relative;
	display: flex;
	align-items: center;
}

.vauban-sim-adr-input {
	width: 100%;
	padding: 12px 45px 12px 15px;
	border: 1px solid var(--vt-border, #cbd5e1);
	border-radius: 8px;
	font-size: 16px;
	color: var(--vt-text, #1e293b);
	font-weight: 600;
	background: var(--vt-inset, #f1f5f9);
}

.vauban-sim-adr-suffix {
	position: absolute;
	right: 40px;
	color: var(--vt-muted, #94a3b8);
	font-weight: 500;
	pointer-events: none;
}

/* ===== Taux d'occupation (boutons preset) ===== */
.vauban-sim-occ-row {
	display: flex;
	gap: 10px;
}

.vauban-sim-occ-btn {
	flex: 1;
	padding: 10px 8px;
	border: 2px solid var(--vt-border, #e2e8f0);
	background: var(--vt-surface-1, #fff);
	color: var(--vt-muted, #64748b);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.3;
	transition: all 0.2s;
}

.vauban-sim-occ-btn.active {
	border-color: var(--vt-info, #3b82f6);
	background: var(--vt-info-bg, #eff6ff);
	color: var(--vt-info-strong, #1d4ed8);
}

.vauban-sim-occ-btn__pct {
	font-size: 16px;
}

.vauban-sim-occ-btn__sub {
	font-size: 10px;
	font-weight: 400;
	opacity: 0.8;
}

.vauban-sim-days-input {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid var(--vt-border, #cbd5e1);
	border-radius: 8px;
	font-size: 16px;
	color: var(--vt-text-soft, #475569);
}

/* ===== Conformité location courte durée : avertissement « jours > plafond » ===== */
/* Note sobre, fond ambre translucide via token --vt-warning-bg (mode sombre
   automatique) + texte au token de texte (contraste préservé). Affichée/masquée
   via l'attribut [hidden] piloté en JS — d'où la règle [hidden] dédiée. */
.vauban-sim-days-legal-warning {
	display: block;
	margin-top: 6px;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--vt-warning-bg, rgba(245, 158, 11, 0.15));
	color: var(--vt-text, #334155);
	font-size: 12px;
	line-height: 1.45;
}

.vauban-sim-days-legal-warning[hidden] {
	display: none;
}

/* ===== Conformité location courte durée : bandeau plafond légal ===== */
.vauban-sim-regulation-note {
	border: 1px solid var(--vt-border, #e2e8f0);
	border-radius: 10px;
	background: var(--vt-surface-1, #f8fafc);
	padding: 12px 14px;
	margin: 0 0 20px;
}

.vauban-sim-regulation-note[hidden] {
	display: none;
}

/* Plafond réellement appliqué : filet d'accent à gauche, sobre. */
.vauban-sim-regulation-note[data-active="1"] {
	border-left-width: 3px;
	border-left-color: var(--vt-text-soft, #475569);
}

.vauban-sim-regulation-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--vt-muted, #64748b);
}

.vauban-sim-regulation-text {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--vt-text, #334155);
	line-height: 1.5;
}

.vauban-sim-regulation-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 12px;
	border: 1px solid var(--vt-border, #cbd5e1);
	border-radius: 8px;
	background: var(--vt-surface-2, #ffffff);
	color: var(--vt-text, #334155);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.vauban-sim-regulation-btn:hover,
.vauban-sim-regulation-btn:focus-visible {
	background: var(--vt-surface-1, #f8fafc);
	border-color: var(--vt-muted, #94a3b8);
}

/* ===== Carte de résultat (dégradé de marque, texte blanc fixe) ===== */
.vauban-sim-result-card {
	background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
	border-radius: 16px;
	padding: 25px;
	text-align: center;
	color: #fff;
	margin-bottom: 25px;
	box-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.3);
}

.vauban-sim-result-amount {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 4px;
	transition: transform 0.1s ease-out;
	display: inline-block;
}

.vauban-sim-result-sublabel {
	font-size: 13px;
	opacity: 0.9;
	margin-bottom: 14px;
}

.vauban-sim-result-range {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding: 12px;
}

.vauban-sim-result-range__title {
	font-size: 10px;
	opacity: 0.7;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vauban-sim-result-range__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.vauban-sim-result-range__cap {
	font-size: 10px;
	opacity: 0.6;
}

.vauban-sim-result-range__val {
	font-size: 18px;
	font-weight: 700;
	transition: transform 0.1s ease-out;
	display: inline-block;
}

.vauban-sim-result-range__sep {
	width: 40px;
	height: 2px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
}

.vauban-sim-result-range__note {
	font-size: 9px;
	opacity: 0.55;
	margin-top: 6px;
}

.vauban-sim-result-foot {
	font-size: 10px;
	opacity: 0.6;
	margin-top: 8px;
}

/* ===== Décomposition revenu brut / commission ===== */
.vauban-sim-breakdown {
	background: var(--vt-inset, #e2e8f0);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 25px;
}

.vauban-sim-breakdown__row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}

.vauban-sim-breakdown__row:not(:last-child) {
	margin-bottom: 15px;
}

.vauban-sim-breakdown__label {
	color: var(--vt-muted, #64748b);
}

.vauban-sim-breakdown__value {
	color: var(--vt-text-soft, #334155);
	font-weight: 600;
	transition: transform 0.1s ease-out;
	display: inline-block;
}

.vauban-sim-breakdown__value--danger {
	color: var(--vt-danger-strong, #ef4444);
}

/* ===== Accordéon « Comment est calculé l'ADR ? » ===== */
.vauban-sim-adr-help {
	background: var(--vt-surface-1, #f8fafc);
	border: 1px solid var(--vt-border, #e2e8f0);
	border-radius: 10px;
	margin-top: 15px;
}

.vauban-sim-adr-help__summary {
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--vt-text-soft, #334155);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vauban-sim-adr-help__chevron {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}

.vauban-sim-adr-help__body {
	padding: 0 16px 16px;
}

.vauban-sim-adr-help__list {
	margin: 0;
	padding-left: 18px;
	font-size: 11px;
	color: var(--vt-text-soft, #475569);
	line-height: 1.7;
}

.vauban-sim-adr-help__formula {
	margin: 8px 0 0;
	font-size: 10px;
	color: var(--vt-muted, #94a3b8);
}

/* ===== Disclaimer ===== */
.vauban-sim-disclaimer {
	margin: 20px 0 0;
	font-size: 10px;
	color: var(--vt-muted, #64748b);
	line-height: 1.5;
	text-align: center;
}

/* ===== Bouton télécharger PDF (dégradé succès, texte blanc fixe) ===== */
.vauban-sim-pdf-btn {
	width: 100%;
	margin-top: 20px;
	padding: 14px 20px;
	background: linear-gradient(135deg, var(--vt-success, #10b981) 0%, var(--vt-success, #059669) 100%);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
	transition: all 0.2s;
}

.vauban-sim-pdf-btn:hover,
.vauban-sim-pdf-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}