/*
 * La Riviera Secondary : formulaire de dépôt de bien. Concept A, "papeterie chaleureuse".
 * 100 % scopé sous .ls-form. Aucune règle globale.
 * Polices : Inter (champs) + Cormorant Garamond italique (uniquement les numéros de blocs).
 */

.ls-form {
	--ls-terra: #822907;
	--ls-brown: #8A4726;
	--ls-beige: #EFE6DA;
	--ls-beige-soft: #F8F3EC;
	--ls-ink: #1B1B1B;
	--ls-muted: #5E5750;
	--ls-placeholder: #6B6B6B;
	--ls-line: #8A8178;
	--ls-hair: #E3D8CA;
	--ls-error: #B3261E;
	--ls-ring: rgba(130, 41, 7, .18);
	--ls-font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ls-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

	counter-reset: ls-block;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 28px 20px 32px;
	background: #fff;
	border: 1px solid var(--ls-hair);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(60, 35, 15, .05), 0 24px 48px -28px rgba(80, 40, 10, .28);
	color: var(--ls-ink);
	font-family: var(--ls-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.ls-form *,
.ls-form *::before,
.ls-form *::after {
	box-sizing: border-box;
}

.ls-form fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Neutralise les styles de thème sur les textes du formulaire (label/legend/p/span en capitales, etc.). */
.ls-form .ls-label,
.ls-form .ls-opt,
.ls-form .ls-hint,
.ls-form .ls-choice,
.ls-form .ls-choice__text,
.ls-form .ls-check,
.ls-form .ls-check span,
.ls-form .ls-block__title {
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	font-style: normal;
}

/* ---------- Blocs titrés ---------- */
.ls-form .ls-block {
	counter-increment: ls-block;
	margin: 0 0 40px;
	padding: 0;
}

.ls-form .ls-block__title {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 24px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--ls-hair);
	color: var(--ls-ink);
	font-family: var(--ls-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

/* La prise de risque : numéro en italique serif terracotta, comme sur du papier à lettres. */
.ls-form .ls-block__title::before {
	content: counter(ls-block, decimal-leading-zero);
	content: counter(ls-block, decimal-leading-zero) / "";
	color: var(--ls-terra);
	font-family: var(--ls-serif);
	font-size: 38px;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
}

.ls-form .ls-block__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.ls-form .ls-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.ls-form .ls-field {
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* ---------- Labels, aides ---------- */
.ls-form .ls-label {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	color: var(--ls-ink);
	font-family: var(--ls-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.ls-form .ls-opt {
	color: var(--ls-muted);
	font-weight: 400;
}

.ls-form .ls-hint {
	display: block;
	margin: 8px 0 0;
	color: var(--ls-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* ---------- Champs ---------- */
.ls-form .ls-input {
	display: block;
	width: 100%;
	max-width: none;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	background-color: #fff;
	border: 1px solid var(--ls-line);
	border-radius: 8px;
	box-shadow: none;
	color: var(--ls-ink);
	font-family: var(--ls-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ls-form textarea.ls-input {
	height: auto;
	min-height: 140px;
	padding: 14px 16px;
	resize: vertical;
}

.ls-form .ls-input::placeholder {
	color: var(--ls-placeholder);
	opacity: 1;
}

.ls-form .ls-input:hover {
	border-color: var(--ls-brown);
}

.ls-form .ls-input:focus,
.ls-form .ls-input:focus-visible {
	border-color: var(--ls-terra);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--ls-terra), 0 0 0 4px var(--ls-ring);
}

.ls-form .ls-select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23822907' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px 16px;
	cursor: pointer;
	text-overflow: ellipsis;
}

/* Quartier : grisé tant que l'émirat n'est pas choisi (repli propre sans :has()). */
.ls-form:has(#ls_emirate option[value=""]:checked) .ls-field--area .ls-select:not(:focus) {
	background-color: #F1EBE3;
	color: var(--ls-placeholder);
	border-color: #A89F95;
}

/* ---------- Cartes-radio ---------- */
.ls-form .ls-choices {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.ls-form .ls-choices--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ls-form .ls-choice {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.ls-form .ls-choice input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ls-form .ls-choice__text {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 12px 44px 12px 16px;
	background: #fff;
	border: 1px solid var(--ls-line);
	border-radius: 12px;
	color: var(--ls-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ls-form .ls-choice__text::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #fff center / 12px 12px no-repeat;
	border: 1.5px solid var(--ls-line);
	border-radius: 50%;
	transition: background-color .15s ease, border-color .15s ease;
}

.ls-form .ls-choice:hover .ls-choice__text {
	background: var(--ls-beige-soft);
	border-color: var(--ls-brown);
}

.ls-form .ls-choice input:checked + .ls-choice__text {
	background: var(--ls-beige);
	border-color: var(--ls-terra);
	box-shadow: 0 0 0 1px var(--ls-terra);
	color: var(--ls-ink);
}

.ls-form .ls-choice input:checked + .ls-choice__text::after {
	background-color: var(--ls-terra);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: var(--ls-terra);
}

.ls-form .ls-choice input:focus-visible + .ls-choice__text {
	outline: 2px solid var(--ls-terra);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px var(--ls-ring);
}

.ls-form .ls-choice input:user-invalid + .ls-choice__text {
	border-color: var(--ls-error);
	box-shadow: 0 0 0 1px var(--ls-error);
}

/* ---------- Upload photos ---------- */
.ls-form .ls-file {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 120px;
	margin: 0;
	padding: 24px 20px;
	background: var(--ls-beige-soft);
	border: 1.5px dashed var(--ls-line);
	border-radius: 12px;
	color: var(--ls-muted);
	font-family: var(--ls-font);
	font-size: 14px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.ls-form .ls-file:hover {
	background: var(--ls-beige);
	border-color: var(--ls-terra);
}

.ls-form .ls-file:focus-visible {
	outline: 2px solid var(--ls-terra);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px var(--ls-ring);
}

.ls-form .ls-file::file-selector-button {
	height: 44px;
	margin: 0 16px 0 0;
	padding: 0 20px;
	background: #fff;
	border: 1px solid var(--ls-terra);
	border-radius: 8px;
	color: var(--ls-terra);
	font-family: var(--ls-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Consentement + envoi ---------- */
.ls-form .ls-actions {
	display: grid;
	gap: 24px;
	padding-top: 28px;
	border-top: 1px solid var(--ls-hair);
}

.ls-form .ls-check {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: 44px;
	margin: 0;
	color: var(--ls-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.ls-form .ls-check input {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	background: #fff center / 16px 16px no-repeat;
	border: 1px solid var(--ls-line);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.ls-form .ls-check input:hover {
	border-color: var(--ls-brown);
}

.ls-form .ls-check input:checked {
	background-color: var(--ls-terra);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.5 2.5 5-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: var(--ls-terra);
}

.ls-form .ls-check input:focus-visible {
	outline: 2px solid var(--ls-terra);
	outline-offset: 3px;
}

.ls-form .ls-check input:user-invalid {
	border-color: var(--ls-error);
	box-shadow: 0 0 0 1px var(--ls-error);
}

.ls-form .ls-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 240px;
	height: 56px;
	margin: 0;
	padding: 0 32px;
	background: var(--ls-terra);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: #fff;
	font-family: var(--ls-font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.ls-form .ls-submit:hover {
	background: var(--ls-brown);
	color: #fff;
}

.ls-form .ls-submit:focus-visible {
	outline: 3px solid var(--ls-terra);
	outline-offset: 3px;
}

/* ---------- Erreurs : bord + icône + message (pas la couleur seule) ---------- */
.ls-form .ls-input:user-invalid {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M8 1.6L15 14H1z' fill='none' stroke='%23B3261E' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.6M8 11.7v.1' stroke='%23B3261E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	border-color: var(--ls-error);
	box-shadow: 0 0 0 1px var(--ls-error);
}

.ls-form .ls-select:user-invalid {
	padding-right: 72px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M8 1.6L15 14H1z' fill='none' stroke='%23B3261E' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.6M8 11.7v.1' stroke='%23B3261E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23822907' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 42px center, right 16px center;
	background-size: 16px 16px, 16px 16px;
}

.ls-form .ls-input:user-invalid:focus {
	box-shadow: 0 0 0 1px var(--ls-error), 0 0 0 4px rgba(179, 38, 30, .16);
}

.ls-form .ls-field:has(:user-invalid)::after {
	content: "Vérifiez ce champ.";
	display: block;
	margin-top: 8px;
	color: var(--ls-error);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* ---------- Desktop ---------- */
@media (min-width: 640px) {
	.ls-form {
		padding: 48px 48px 48px;
	}

	.ls-form .ls-block__title {
		margin-bottom: 28px;
	}

	.ls-form .ls-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}

	.ls-form .ls-grid--2 > .ls-field--full {
		grid-column: 1 / -1;
	}

	.ls-form .ls-choices--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ls-form .ls-submit {
		display: inline-flex;
		width: auto;
		padding: 0 40px;
	}
}

@media (max-width: 420px) {
	.ls-form .ls-choice__text {
		padding-right: 38px;
	}

	.ls-form .ls-choice__text::after {
		right: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ls-form *,
	.ls-form *::before,
	.ls-form *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Les blocs conditionnels (flow.js) restent masqués malgré les display:grid ci-dessus. */
.ls-form [hidden] {
	display: none !important;
}