/**
 * Saintity Occitanie : Devis — configurateur.
 * Réutilise les tokens du thème (var(--gold) etc.) avec fallbacks si le
 * plugin est utilisé sur un autre thème.
 */

.sd {
	--sd-bg: var(--bg, #F4EDDF);
	--sd-surface: var(--surface, #FFFBF3);
	--sd-ink: var(--ink, #2A1C12);
	--sd-muted: var(--muted, #6b5b48);
	--sd-gold: var(--gold, #C49F3C);
	--sd-goldsoft: var(--goldsoft, #DBC58A);
	--sd-line: var(--line, #E6DAC4);
	--sd-radius: 16px;
	position: relative;
	padding: clamp(84px, 12vh, 140px) var(--pad, clamp(18px, 5vw, 40px)) clamp(56px, 9vh, 96px);
	background: var(--sd-bg);
	color: var(--sd-ink);
	font-family: var(--font-body, system-ui, sans-serif);
	overflow: hidden;
}

.sd__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1200px 600px at 80% -10%, rgba(181, 136, 47, 0.10), transparent 60%),
		repeating-linear-gradient(135deg, rgba(181, 136, 47, 0.05) 0 2px, transparent 2px 22px);
	pointer-events: none;
}

.sd__inner {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

/* --- En-tête & barre d'étapes --- */

.sd__eyebrow {
	display: inline-block;
	font-family: var(--font-mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sd-gold);
	margin-bottom: 0.8rem;
}

.sd h1,
.sd__success h2 {
	font-family: var(--font-display, sans-serif);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-size: clamp(2rem, 5vw, 3.1rem);
	margin: 0 0 1.6rem;
	text-wrap: balance;
}

.sd__em {
	font-family: var(--font-serif, serif);
	font-style: italic;
	color: var(--sd-gold);
	white-space: nowrap; /* « en 3 min » ne se coupe jamais en fin de ligne */
}

.sd__steps {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 2.2rem;
	padding: 0;
	counter-reset: sd;
}

.sd__steps li {
	flex: 1;
	counter-increment: sd;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--sd-muted);
	padding-top: 0.7rem;
	border-top: 3px solid var(--sd-line);
	transition: color 0.3s, border-color 0.3s, flex-grow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sd__steps li::before {
	content: counter(sd);
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--sd-line);
	color: var(--sd-ink);
	font-family: var(--font-mono, monospace);
	font-size: 0.72rem;
	transition: background 0.3s, color 0.3s;
}

.sd__steps li.is-active {
	color: var(--sd-ink);
	border-color: var(--sd-gold);
}
.sd__steps li.is-active::before {
	background: var(--sd-gold);
	color: #fff;
}
.sd__steps li.is-done {
	border-color: var(--sd-goldsoft);
}
.sd__steps li.is-done::before {
	content: "✓";
	background: var(--sd-goldsoft);
	color: var(--sd-ink);
}
/* Mobile : seule l'étape en cours affiche son libellé et s'élargit pour lui faire
   place ; les autres se rétractent sur leur pastille. Le libellé glisse via max-width
   (animable, contrairement à display) au même rythme que l'élargissement. */
.sd__steps li { flex: 1 1 auto; min-width: 0; }
.sd__steps li.is-active { flex: 3 1 auto; } /* place au libellé sans que la barre se lise comme « presque fini » */
.sd__steps li span {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	max-width: 0;
	opacity: 0;
	transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.sd__steps li.is-active span { max-width: 16ch; opacity: 1; }

@media (min-width: 620px) {
	.sd__steps li,
	.sd__steps li.is-active { flex: 1; }
	.sd__steps li span { max-width: none; opacity: 1; transition: none; }
}

/* --- Panneaux --- */

.sd__panel[hidden] { display: none; }
.sd__panel {
	animation: sd-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sd-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sd__panel { animation: none; }
	.sd__steps li,
	.sd__steps li span { transition: none; }
}

.sd__lead {
	font-size: 1.02rem;
	color: var(--sd-muted);
	margin: 0 0 1.6rem;
	max-width: 52ch;
}

.sd__lead[data-needs-lead] {
	max-width: none;
	text-wrap: pretty;
}

/* --- Champs --- */

.sd__field { margin: 0 0 1.4rem; border: 0; padding: 0; min-width: 0; }
.sd__field legend { padding: 0; }
.sd__field > label:not(.sd-dropzone),
.sd__field > .sd__field-label,
.sd__field legend {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
}
.sd__req { color: var(--sd-gold); }

.sd input[type="tel"],
.sd input[type="text"],
.sd input[type="email"],
.sd input[type="number"],
.sd input[type="search"] {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 12px;
	background: var(--sd-surface);
	color: var(--sd-ink);
	font: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sd textarea {
	width: 100%;
	min-height: 140px;
	padding: 1rem 1.15rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 14px;
	background: var(--sd-surface);
	color: var(--sd-ink);
	font: inherit;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.sd input:focus,
.sd textarea:focus {
	outline: none;
	border-color: var(--sd-gold);
	box-shadow: 0 0 0 3px rgba(181, 136, 47, 0.16);
}

/* Téléphone : indicatif figé (France) + numéro sur une seule ligne */
.sd__phone { display: flex; gap: 8px; }
.sd__dial {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 0.9rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 12px;
	background-color: color-mix(in srgb, var(--sd-surface) 60%, var(--sd-line));
	color: var(--sd-ink);
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	user-select: none;
}
.sd__phone input { flex: 1; min-width: 0; }

/* Validation instantanée : la bordure du champ dit tout. Pas d'icône,
   pas d'encart, pas de message qui pousse la mise en page. */
.sd .sd__phone.is-valid input { border-color: #4E8A4B; }
.sd .sd__phone.is-invalid input { border-color: #B4462F; }
.sd .sd__phone.is-valid input:focus { box-shadow: 0 0 0 3px rgba(78, 138, 75, 0.16); }
.sd .sd__phone.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(180, 70, 47, 0.16); }

/* Le code postal est court : il ne mérite pas la moitié de la ligne. */
@media (min-width: 560px) {
	.sd__row:has(.sd__field--cp) { grid-template-columns: 1fr 9rem; }
}

/* --- Lieu : recherche de commune (même anatomie que la carte de l'accueil) --- */
/* display:flex l'emporterait sur [hidden] : les trois états sont pilotés par setLieu(). */
.sd__search[hidden], .sd-communes[hidden], .sd__chip[hidden], .sd__search-clear[hidden] { display: none; }
.sd__search { position: relative; display: flex; align-items: center; }
.sd__search-icon { position: absolute; left: 16px; display: flex; color: var(--sd-gold); pointer-events: none; }
/* « .sd input[type=search] » (0-2-1) l'emporterait sur « .sd .sd__search-input » : on repasse par le type. */
.sd input.sd__search-input { padding-left: 46px; padding-right: 42px; }
.sd__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sd__search-clear {
	position: absolute; right: 10px;
	background: none; border: 0; padding: 4px 8px;
	font-size: 22px; line-height: 1; color: var(--sd-muted); cursor: pointer;
}
.sd__search-clear:hover { color: var(--sd-ink); }

/* Résultats : un panneau posé sous le champ, une commune par ligne avec son verdict.
   La liste flottait sous forme de pastilles : le formulaire sautait à chaque frappe. */
.sd-communes {
	position: absolute; z-index: 6;
	top: calc(100% + 6px); left: 0; right: 0;
	max-height: 17rem; overflow-y: auto;
	display: flex; flex-direction: column;
	padding: 6px;
	background: var(--sd-surface);
	border: 1.5px solid var(--sd-line);
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba(42, 28, 18, 0.14);
}
.sd-commune {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
	width: 100%; padding: 9px 10px;
	background: none; border: 0; border-radius: 8px;
	font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--sd-ink);
	text-align: left; cursor: pointer;
}
.sd-commune__cp { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8rem; font-weight: 500; color: var(--sd-muted); }
.sd-commune__zone { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: var(--sd-muted); }
.sd-commune:hover, .sd-commune:focus-visible { background: rgba(181, 136, 47, 0.12); outline: none; }
.sd-commune.is-out .sd-commune__name { color: var(--sd-muted); }

/* Commune retenue : une puce, pas un formulaire. */
.sd__chip {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--sd-gold);
	border-radius: 12px;
	background: rgba(181, 136, 47, 0.10);
	font-size: 0.95rem;
}
.sd__chip-cp { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85rem; color: var(--sd-muted); }
.sd__chip-zone { font-size: 0.85rem; font-weight: 600; color: var(--sd-gold); }
.sd__chip.is-out { border-color: #B4462F; background: rgba(180, 70, 47, 0.08); }
.sd__chip.is-out .sd__chip-zone { color: #B4462F; }
.sd__chip-edit {
	margin-left: auto;
	background: none; border: 0; padding: 0.3rem 0.2rem;
	font: inherit; font-size: 0.85rem; font-weight: 600;
	color: var(--sd-gold); text-decoration: underline; cursor: pointer;
}
.sd__chip-edit:focus-visible { outline: 2px solid var(--sd-gold); outline-offset: 2px; border-radius: 6px; }

/* --- Photos jointes : Zone Drag & Drop et prévisualisation --- */

.sd__field--photos {
	margin-top: 1.6rem;
}

.sd-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2.2rem 1.6rem;
	border: 2px dashed var(--sd-line);
	border-radius: var(--sd-radius, 16px);
	background: var(--sd-surface);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
	outline: none;
}
.sd-dropzone:hover {
	border-color: var(--sd-gold);
	background: color-mix(in srgb, var(--sd-gold) 4%, var(--sd-surface));
	box-shadow: 0 8px 24px -10px rgba(181, 136, 47, 0.18);
}
.sd-dropzone:focus-visible {
	border-color: var(--sd-gold);
	box-shadow: 0 0 0 3px rgba(181, 136, 47, 0.22);
}

/* État dragover (survol de fichier) */
.sd-dropzone.is-dragover {
	border-color: var(--sd-gold);
	border-style: solid;
	background: color-mix(in srgb, var(--sd-gold) 10%, var(--sd-surface));
	transform: scale(1.01);
	box-shadow: 0 12px 32px -8px rgba(181, 136, 47, 0.28);
}
.sd-dropzone__drag-state {
	display: none;
}
.sd-dropzone.is-dragover .sd-dropzone__icon,
.sd-dropzone.is-dragover .sd-dropzone__body {
	display: none;
}
.sd-dropzone.is-dragover .sd-dropzone__drag-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	animation: sd-drag-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sd-drag-pop {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}
.sd-dropzone__drag-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sd-gold);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	font-weight: 700;
	animation: sd-bounce 0.8s ease infinite alternate;
}
@keyframes sd-bounce {
	from { transform: translateY(-3px); }
	to { transform: translateY(3px); }
}
.sd-dropzone__drag-text {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--sd-gold);
}

/* Input file réel masqué visuellement mais accessible */
.sd-dropzone__input {
	position: absolute;
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	clip: rect(0, 0, 0, 0);
}

/* Icône badge centrale */
.sd-dropzone__icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sd-gold) 12%, var(--sd-surface));
	color: var(--sd-gold);
	display: grid;
	place-items: center;
	margin-bottom: 0.9rem;
	transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}
.sd-dropzone:hover .sd-dropzone__icon {
	transform: translateY(-2px) scale(1.05);
	background: var(--sd-gold);
	color: #fff;
}

/* Corps textuel */
.sd-dropzone__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
}
.sd-dropzone__title {
	margin: 0;
	font-size: 0.98rem;
	color: var(--sd-ink);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
}
.sd-dropzone__prompt {
	font-weight: 600;
}
.sd-dropzone__sep {
	color: var(--sd-muted);
	font-weight: 400;
	font-size: 0.9rem;
}

/* Bouton stylisé "Parcourir vos fichiers" */
.sd-dropzone__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.45rem 1.05rem;
	border-radius: 999px;
	background: var(--sd-gold);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 12px -3px rgba(181, 136, 47, 0.45);
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sd-dropzone:hover .sd-dropzone__btn {
	background: color-mix(in srgb, var(--sd-gold) 85%, #000);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -3px rgba(181, 136, 47, 0.6);
}

.sd-dropzone__meta {
	margin: 0;
	font-size: 0.82rem;
	color: var(--sd-muted);
}

/* État plein (6 photos atteintes) */
.sd-dropzone.is-full {
	opacity: 0.65;
	cursor: not-allowed;
	border-style: solid;
}
.sd-dropzone.is-full:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--sd-line);
	background: var(--sd-surface);
}
.sd-dropzone.is-full .sd-dropzone__icon {
	transform: none;
	background: color-mix(in srgb, var(--sd-line) 40%, var(--sd-surface));
	color: var(--sd-muted);
}
.sd-dropzone.is-full .sd-dropzone__btn {
	background: var(--sd-muted);
	box-shadow: none;
	transform: none;
}

/* Galerie des photos sélectionnées */
.sd-photos-wrap {
	margin-top: 1.2rem;
	padding: 1rem 1.15rem;
	border: 1.5px solid var(--sd-line);
	border-radius: var(--sd-radius, 16px);
	background: var(--sd-surface);
	animation: sd-photo-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sd-photos-wrap[hidden] {
	display: none;
}
.sd-photos-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--sd-line);
}
.sd-photos-count {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--sd-gold);
}
.sd-photos-tip {
	font-size: 0.8rem;
	color: var(--sd-muted);
}

.sd-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
	gap: 0.85rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sd-photo {
	position: relative;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	border: 1.5px solid var(--sd-line);
	background: var(--sd-surface);
	box-shadow: 0 4px 12px -4px rgba(42, 28, 18, 0.12);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	animation: sd-photo-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sd-photo-in {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}
.sd-photo:hover {
	transform: translateY(-2px);
	border-color: var(--sd-gold);
	box-shadow: 0 8px 18px -4px rgba(181, 136, 47, 0.28);
}
.sd-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sd-photo__name {
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	padding: 1.1rem 0.4rem 0.25rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}
.sd-photo__remove {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(42, 28, 18, 0.75);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.18s, transform 0.18s;
	padding: 0;
	z-index: 2;
}
.sd-photo__remove:hover {
	background: #b52a2a;
	transform: scale(1.12);
}

.sd__hint,
.sd-hint {
	font-size: 0.82rem;
	color: var(--sd-muted);
	margin: 0.5rem 0 0;
	font-style: italic;
}
.sd__hint[data-zone-hint] { color: var(--sd-gold); font-style: normal; }

.sd__legal,
.sd__consent span {
	font-size: 0.82rem;
	color: var(--sd-muted);
	line-height: 1.5;
}

.sd__row {
	display: grid;
	gap: 1.2rem;
}
/* display:grid l'emporterait sur [hidden] : la ligne d'identité masquée
   (prénom + nom en mode pro) resterait visible. */
.sd__row[hidden] { display: none; }
@media (min-width: 560px) {
	.sd__row { grid-template-columns: 1fr 1fr; }
}

/* --- Pilules de choix (statut, créneaux) --- */

.sd__choices .sd__grid,
.sd__profil { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sd__grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.sd__pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 999px;
	background: var(--sd-surface);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, transform 0.15s;
	font-size: 0.92rem;
}
.sd__pill input { position: absolute; opacity: 0; pointer-events: none; }
.sd__pill:hover { transform: translateY(-1px); }
.sd__pill:has(input:checked) {
	border-color: var(--sd-gold);
	background: rgba(181, 136, 47, 0.10);
	font-weight: 600;
}
.sd__pill:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(181, 136, 47, 0.18); }

/* --- Cases à cocher (canal de recontact) : carte avec un vrai carré coché,
   pour que le « plusieurs réponses possibles » se lise au premier regard. --- */
.sd__check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.75rem 1.1rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 12px;
	background: var(--sd-surface);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	font-size: 0.92rem;
}
.sd__check input { position: absolute; opacity: 0; pointer-events: none; }
.sd__check::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 6px;
	background: var(--sd-surface);
	display: grid;
	place-items: center;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	transition: background 0.2s, border-color 0.2s;
}
.sd__check:hover::before { border-color: var(--sd-gold); }
.sd__check:has(input:checked) {
	border-color: var(--sd-gold);
	background: rgba(181, 136, 47, 0.10);
	font-weight: 600;
}
.sd__check:has(input:checked)::before {
	content: "✓";
	background: var(--sd-gold);
	border-color: var(--sd-gold);
	color: #fff;
}
.sd__check:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(181, 136, 47, 0.18); }

/* --- Étape 2 : catégories --- */

.sd-cat {
	border: 1.5px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	margin-bottom: 0.9rem;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-cat.is-active {
	border-color: var(--sd-gold);
	box-shadow: 0 10px 30px -18px rgba(42, 28, 18, 0.4);
}

.sd-cat__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-display, sans-serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sd-ink);
	text-align: left;
}
.sd-cat__mark {
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 6px;
	background: var(--sd-surface);
	position: relative;
	transition: background 0.2s, border-color 0.2s;
}
/* Enfant direct : une section imbriquée garde sa propre coche. */
.sd-cat.is-active > .sd-cat__toggle > .sd-cat__mark {
	background: var(--sd-gold);
	border-color: var(--sd-gold);
}
.sd-cat.is-active > .sd-cat__toggle > .sd-cat__mark::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

.sd-cat__body {
	padding: 0.2rem 1.3rem 1.3rem;
	border-top: 1px solid var(--sd-line);
}
.sd-cat__body[hidden] { display: none; }

.sd-group { margin-top: 1.1rem; }
.sd-group__label { font-weight: 600; font-size: 0.92rem; margin: 0 0 0.7rem; }

/* --- Section repliable (ex : Vitres) --- */

/* Reprend l'habillage .sd-cat, en un cran plus discret (elle est imbriquée). */
.sd-section { margin: 1.1rem 0 0; }
.sd-section > .sd-cat__toggle { padding: 0.85rem 1rem; font-size: 1rem; }
.sd-section__body { padding: 0.2rem 1rem 1rem; }
/* Une section se déplie, elle ne se coche pas : flèche plutôt que case. */
.sd .sd-section > .sd-cat__toggle > .sd-cat__mark,
.sd .sd-section.is-active > .sd-cat__toggle > .sd-cat__mark,
.sd.is-pro .sd-section.is-active > .sd-cat__toggle > .sd-cat__mark {
	border: 0;
	background: none;
}
.sd .sd-section > .sd-cat__toggle > .sd-cat__mark::after,
.sd .sd-section.is-active > .sd-cat__toggle > .sd-cat__mark::after,
.sd.is-pro .sd-section.is-active > .sd-cat__toggle > .sd-cat__mark::after {
	content: "▾";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: currentColor;
	font-size: 1rem;
	transition: transform 0.2s;
}
.sd .sd-section.is-active > .sd-cat__toggle > .sd-cat__mark::after { transform: rotate(180deg); }
.sd-section__body .sd-group:first-child { margin-top: 0.9rem; }

.sd-opts { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* Compteurs et cartes : une ligne par option (le filet pointillé les sépare). */
.sd-opts--single,
.sd-opts--quantity { flex-direction: column; }

.sd-opt {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.95rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 999px;
	background: var(--sd-bg);
	cursor: pointer;
	font-size: 0.9rem;
	transition: border-color 0.2s, background 0.2s;
}
.sd-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-opt:has(input:checked) {
	border-color: var(--sd-gold);
	background: rgba(181, 136, 47, 0.12);
	font-weight: 600;
}
.sd-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(181, 136, 47, 0.18); }

.sd-opt--card {
	display: flex;
	align-items: flex-start;
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	width: 100%;
}
.sd-opt--card .sd-opt__txt { display: flex; flex-direction: column; gap: 0.2rem; }
.sd-opt--card small { font-weight: 400; color: var(--sd-muted); font-size: 0.8rem; }

.sd-opt-holder { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
/* Option qui déplie ses détails : elle prend toute la ligne, sa pastille garde sa taille. */
.sd-opt-holder:has(> .sd-details:not([hidden])) { flex-basis: 100%; }
.sd-opt-holder > .sd-opt--card,
.sd-opt-holder > .sd-qty,
.sd-opt-holder > .sd-details { align-self: stretch; }
.sd-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	padding: 0.2rem 0 0.4rem 1rem;
	border-left: 2px solid var(--sd-goldsoft);
	margin-left: 0.3rem;
}
.sd-sub[hidden] { display: none; }
.sd-opt--sub { padding: 0.4rem 0.75rem; font-size: 0.82rem; }

/* --- Quantités --- */

.sd-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px dashed var(--sd-line);
}
.sd-qty:last-child { border-bottom: 0; }
.sd-qty__label { font-size: 0.92rem; }
.sd-qty__ctrl { display: inline-flex; align-items: center; gap: 0.4rem; }
.sd-qty__btn {
	width: 2rem;
	height: 2rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 8px;
	background: var(--sd-surface);
	color: var(--sd-ink);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.sd-qty__btn:hover { border-color: var(--sd-gold); }
/* La règle générique « .sd input[type=number] { width: 100% } » l'emporterait
   sur une classe seule : on remonte la spécificité pour garder un compteur compact. */
.sd input.sd-qty__input {
	width: 3.6rem;
	flex: none;
	text-align: center;
	padding: 0.4rem !important;
	-moz-appearance: textfield;
}
.sd-qty__input::-webkit-outer-spin-button,
.sd-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Superficie (option cochée qui demande des m²) --- */

.sd-area {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--sd-muted);
	padding-left: 1rem;
	border-left: 2px solid var(--sd-goldsoft);
	margin-left: 0.3rem;
}
.sd-area[hidden] { display: none; }
.sd input.sd-area__input {
	width: 6rem;
	flex: none;
	text-align: center;
	padding: 0.35rem !important;
	-moz-appearance: textfield;
}
.sd-area__input::-webkit-outer-spin-button,
.sd-area__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Détails d'une option retenue : quantité, mesure, variantes --- */

.sd-details {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.3rem 0 0.5rem 1rem;
	border-left: 2px solid var(--sd-goldsoft);
	margin-left: 0.3rem;
}
.sd-details[hidden] { display: none; }
/* Dans un bloc de détails, la mesure et les précisions n'ont plus besoin de leur propre filet. */
.sd-details .sd-area,
.sd-details .sd-item__prec { padding-left: 0; border-left: 0; margin-left: 0; }
.sd-details .sd-qty { padding: 0; border-bottom: 0; justify-content: flex-start; }
.sd-area { flex-wrap: wrap; }
.sd-area__nsp { margin-left: 0.4rem; }
.sd input.sd-area__input:disabled { opacity: 0.45; }
.sd-variant { display: flex; flex-direction: column; gap: 0.35rem; }
.sd-variant__label { font-size: 0.8rem; font-weight: 600; color: var(--sd-muted); }
.sd-opt small { font-weight: 400; color: var(--sd-muted); font-size: 0.8rem; margin-left: 0.3rem; }
.sd-opt--card small { margin-left: 0; }

/* Badge « 2 choix » sur la catégorie. */
.sd-cat__toggle > span:first-child { flex: 1; }
.sd-cat__count {
	flex: none;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: rgba(181, 136, 47, 0.14);
	color: var(--sd-ink);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
}
.sd-cat__count[hidden] { display: none; }

/* Recherche de prestation. */
.sd-find { position: relative; margin: 0 0 1rem; }
.sd input.sd-find__input { width: 100%; }
.sd-find__results {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.55rem;
}
.sd-find__results[hidden] { display: none; }
.sd-find__hit {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 999px;
	background: var(--sd-surface);
	color: var(--sd-ink);
	font: inherit;
	font-size: 0.86rem;
	cursor: pointer;
}
.sd-find__hit:hover { border-color: var(--sd-gold); }
.sd-find__hit small { color: var(--sd-muted); font-size: 0.75rem; }

/* --- Liste : menu déroulant + quantité, précisions par élément --- */

.sd-items__picker { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sd-items__select {
	flex: 1 1 12rem;
	/* Chevron dessiné : le natif ignore le padding et reste collé au bord. */
	-webkit-appearance: none;
	appearance: none;
	padding: 0.55rem 2.6rem 0.55rem 0.9rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 10px;
	background: var(--sd-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b5882f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 12px 8px;
	color: var(--sd-ink);
	font: inherit;
	font-size: 0.92rem;
}
.sd-items__select:focus-visible { outline: none; border-color: var(--sd-gold); box-shadow: 0 0 0 3px rgba(181, 136, 47, 0.18); }
.sd-items__add {
	padding: 0.55rem 1.1rem;
	border: 1.5px solid var(--sd-gold);
	border-radius: 10px;
	background: transparent;
	color: var(--sd-gold);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.sd-items__add:hover { background: var(--sd-gold); color: #fff; }
.sd-items__rows { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }
.sd-item {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--sd-line);
	border-radius: 12px;
	background: var(--sd-surface);
}
.sd-item__head { display: flex; align-items: center; gap: 0.6rem; }
.sd-item__label { font-size: 0.92rem; font-weight: 600; flex: 1; }
.sd-item__remove {
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--sd-muted);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}
.sd-item__remove:hover { color: var(--sd-ink); background: color-mix(in srgb, var(--sd-line) 45%, transparent); }
.sd-item__prec { padding-left: 1rem; border-left: 2px solid var(--sd-goldsoft); margin-left: 0.3rem; }

/* --- Consentement (harmonisé avec le composant de coche .sd__check et .sd-cat__mark) --- */

.sd__consent {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1.2rem;
	cursor: pointer;
	user-select: none;
}
.sd__consent input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
	margin: 0;
}
.sd__consent::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.12rem;
	border: 1.5px solid var(--sd-line);
	border-radius: 6px;
	background: var(--sd-surface);
	display: grid;
	place-items: center;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sd__consent:hover::before {
	border-color: var(--sd-gold);
}
.sd__consent:has(input:checked)::before {
	content: "✓";
	background: var(--sd-gold);
	border-color: var(--sd-gold);
	color: #fff;
}
.sd__consent:has(input:focus-visible)::before {
	box-shadow: 0 0 0 3px rgba(181, 136, 47, 0.22);
}
.sd__consent a { color: var(--sd-gold); text-decoration: underline; text-underline-offset: 2px; }

.sd__turnstile { margin: 1.2rem 0; }
.sd__turnstile:empty { margin: 0; }

/* --- Erreur --- */

.sd__error {
	margin-top: 1.2rem;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	background: #fbeaea;
	border: 1.5px solid #e3b7b7;
	color: #8a2b2b;
	font-size: 0.9rem;
}
.sd__error[hidden] { display: none; }

/* --- Navigation --- */

.sd__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.sd__btn[hidden] { display: none; }
.sd__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.6rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
	text-decoration: none;
}
.sd__btn--gold {
	background: var(--sd-gold);
	color: #fff;
	margin-left: auto;
}
.sd__btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(181, 136, 47, 0.9); }
.sd__btn--gold:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.sd__btn--ghost {
	background: none;
	border-color: var(--sd-line);
	color: var(--sd-ink);
}
.sd__btn--ghost:hover { border-color: var(--sd-ink); }

/* --- Honeypot --- */

.sd__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Succès --- */

.sd__success {
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
	padding: 2rem 0;
	animation: sd-in 0.5s ease both;
}
.sd__success[hidden] { display: none; }
.sd__success-mark {
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sd-gold);
	color: #fff;
	font-size: 1.8rem;
}
.sd__success p { color: var(--sd-muted); margin: 0 0 1.6rem; font-size: 1.05rem; }

/* ===================================================================== *
 * Identité PROFESSIONNEL — bascule sombre + rideau cinématique
 * ===================================================================== */

/* Couche de fond claire (par défaut) / sombre (pro), en crossfade. */
.sd__bg,
.sd__bgpro {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.sd__bgpro {
	opacity: 0;
	background:
		radial-gradient(1200px 620px at 82% -12%, rgba(216, 188, 114, 0.16), transparent 60%),
		repeating-linear-gradient(135deg, #241811 0 26px, #1c120b 26px 52px);
}

/* Palette sombre appliquée quand la section porte .is-pro. */
.sd.is-pro {
	--sd-bg: #1c120b;
	--sd-surface: #241811;
	--sd-ink: var(--onDark, #F4EDDF);
	--sd-muted: color-mix(in srgb, var(--onDark, #F4EDDF) 60%, transparent);
	--sd-line: rgba(216, 188, 114, 0.22);
	color: var(--onDark, #F4EDDF);
}
.sd.is-pro .sd__bg { opacity: 0; }
.sd.is-pro .sd__bgpro { opacity: 1; }

/* Accents dorés plus clairs sur fond sombre. */
.sd.is-pro .sd__eyebrow,
.sd.is-pro .sd__em { color: var(--goldsoft, #DBC58A); }
.sd.is-pro .sd-cat__toggle { color: var(--onDark, #F4EDDF); }
.sd.is-pro input::placeholder,
.sd.is-pro textarea::placeholder { color: color-mix(in srgb, var(--onDark, #F4EDDF) 42%, transparent); }

/* Étapes : le doré actif passe en doré clair sur sombre. */
.sd.is-pro .sd__steps li.is-active { border-color: var(--goldsoft, #DBC58A); }
.sd.is-pro .sd__steps li.is-active::before { background: var(--goldsoft, #DBC58A); color: var(--dark, #2A1C12); }

/* Options cochées : voile doré clair. */
.sd.is-pro .sd-opt:has(input:checked),
.sd.is-pro .sd__pill:has(input:checked),
.sd.is-pro .sd__check:has(input:checked) {
	border-color: var(--goldsoft, #DBC58A);
	background: rgba(216, 188, 114, 0.16);
}
.sd.is-pro .sd__check:has(input:checked)::before,
.sd.is-pro .sd__consent:has(input:checked)::before {
	background: var(--goldsoft, #DBC58A);
	border-color: var(--goldsoft, #DBC58A);
	color: var(--dark, #2A1C12);
}
.sd.is-pro .sd-cat.is-active > .sd-cat__toggle > .sd-cat__mark {
	background: var(--goldsoft, #DBC58A);
	border-color: var(--goldsoft, #DBC58A);
}
.sd.is-pro .sd-cat.is-active > .sd-cat__toggle > .sd-cat__mark::after {
	color: var(--dark, #2A1C12);
}
.sd.is-pro .sd__consent a {
	color: var(--goldsoft, #DBC58A);
}

/* Mode Pro sombre : dropzone et photos */
.sd.is-pro .sd__field--photos > .sd__field-label {
	color: var(--onDark, #F4EDDF);
}
.sd.is-pro .sd-dropzone {
	border-color: var(--sd-line);
	background: var(--sd-surface);
}
.sd.is-pro .sd-dropzone:hover {
	border-color: var(--goldsoft, #DBC58A);
	background: color-mix(in srgb, var(--goldsoft, #DBC58A) 5%, var(--sd-surface));
	box-shadow: 0 8px 24px -10px rgba(219, 197, 138, 0.22);
}
.sd.is-pro .sd-dropzone.is-dragover {
	border-color: var(--goldsoft, #DBC58A);
	background: color-mix(in srgb, var(--goldsoft, #DBC58A) 12%, var(--sd-surface));
	box-shadow: 0 12px 32px -8px rgba(219, 197, 138, 0.32);
}
.sd.is-pro .sd-dropzone__icon {
	background: rgba(219, 197, 138, 0.14);
	color: var(--goldsoft, #DBC58A);
}
.sd.is-pro .sd-dropzone:hover .sd-dropzone__icon {
	background: var(--goldsoft, #DBC58A);
	color: var(--dark, #2A1C12);
}
.sd.is-pro .sd-dropzone__btn {
	background: var(--goldsoft, #DBC58A);
	color: var(--dark, #2A1C12);
	box-shadow: 0 4px 12px -3px rgba(219, 197, 138, 0.35);
}
.sd.is-pro .sd-dropzone:hover .sd-dropzone__btn {
	background: #f4eedd;
	box-shadow: 0 6px 16px -3px rgba(219, 197, 138, 0.55);
}
.sd.is-pro .sd-dropzone__drag-icon {
	background: var(--goldsoft, #DBC58A);
	color: var(--dark, #2A1C12);
}
.sd.is-pro .sd-dropzone__drag-text {
	color: var(--goldsoft, #DBC58A);
}
.sd.is-pro .sd-photos-wrap {
	border-color: var(--sd-line);
	background: var(--sd-surface);
}
.sd.is-pro .sd-photos-head {
	border-bottom-color: var(--sd-line);
}
.sd.is-pro .sd-photos-count {
	color: var(--goldsoft, #DBC58A);
}
.sd.is-pro .sd-photo {
	border-color: var(--sd-line);
	background: var(--sd-surface);
}
.sd.is-pro .sd-photo:hover {
	border-color: var(--goldsoft, #DBC58A);
	box-shadow: 0 8px 18px -4px rgba(219, 197, 138, 0.35);
}

/* Le CTA doré reste lisible : léger halo doré clair au survol. */
.sd.is-pro .sd__btn--gold:hover { box-shadow: 0 12px 26px -14px rgba(216, 188, 114, 0.7); }

/* --- Onde de lumière de bascule (léger, cinématique, sans écran de coupure) --- */
/* Une bande de lumière dorée traverse la section une fois pendant que la palette
 * se fond dessous. Remplace l'ancien rideau plein écran, jugé trop lourd. */

.sd__sweep {
	position: absolute;
	inset: 0;
	z-index: 30;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
}
.sd__sweep.is-run { opacity: 1; }
.sd__sweep::before {
	content: "";
	position: absolute;
	top: -25%;
	left: 0;
	width: 42%;
	height: 150%;
	transform: translateX(-180%) skewX(-14deg);
	background: linear-gradient(90deg,
		transparent,
		rgba(216, 188, 114, 0.10) 28%,
		rgba(216, 188, 114, 0.42) 48%,
		rgba(255, 251, 243, 0.34) 54%,
		rgba(216, 188, 114, 0.12) 72%,
		transparent);
	filter: blur(8px);
}
.sd__sweep.is-run::before {
	animation: sd-sweep 0.78s cubic-bezier(0.5, 0, 0.15, 1) both;
}
@keyframes sd-sweep {
	from { transform: translateX(-180%) skewX(-14deg); }
	to   { transform: translateX(430%) skewX(-14deg); }
}

/* Morphing doux des couleurs pendant la bascule (activé le temps de l'onde). */
.sd.sd-morph,
.sd.sd-morph .sd-cat,
.sd.sd-morph .sd__pill,
.sd.sd-morph .sd-opt,
.sd.sd-morph .sd-qty__btn,
.sd.sd-morph input,
.sd.sd-morph textarea,
.sd.sd-morph .sd__steps li,
.sd.sd-morph .sd__steps li::before,
.sd.sd-morph .sd-cat__toggle {
	transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sd__bg, .sd__bgpro { transition: none; }
	.sd__sweep { display: none; }
}

/* --- Ajustement du corps sur la page /devis/ --- */
/* Sur /devis/ le configurateur gère lui-même son espace haut (padding-top ≥ 84px)
 * et la barre CTA mobile est masquée. Le header réutilise le style global du thème. */
body.sd-devis-page { padding-top: 0; padding-bottom: 0; }

/* --- Tokens de palette pro pour le configurateur --- */
body.sd-pro-active,
body.saintity-pro.sd-devis-page {
	--bg: #1c120b;
	--surface: #241811;
	--ink: var(--onDark, #F4EDDF);
	--muted: color-mix(in srgb, var(--onDark, #F4EDDF) 62%, transparent);
	--gold: var(--goldsoft, #DBC58A);
	--line: rgba(216, 188, 114, 0.22);
	--dark: #150d07;
	--darksurface: #241811;
	background: #1c120b;
	transition: background 0.5s ease;
}

/* --- Bandeau de reprise d'un devis en cours --- */
.sd__resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.4rem;
	padding: 1.1rem 1.3rem;
	margin-bottom: 1.8rem;
	border: 1.5px solid var(--sd-gold);
	border-radius: var(--sd-radius);
	background: color-mix(in srgb, var(--sd-gold) 8%, var(--sd-surface));
	animation: sd-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sd__resume[hidden] { display: none; }
.sd__resume p { margin: 0; font-size: 0.95rem; color: var(--sd-ink); max-width: 46ch; }
.sd__resume strong { font-family: var(--font-display, sans-serif); }
.sd__resume-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sd__resume .sd__btn { padding: 0.7rem 1.25rem; }

/* --- Ajustements mobile --- */

@media (max-width: 559px) {
	/* Cibles tactiles : 44px minimum (WCAG 2.5.8). */
	.sd__pill, .sd__check { min-height: 44px; }
	.sd-commune, .sd__chip-edit { min-height: 44px; }
	.sd-commune { align-items: center; }
	.sd__consent { padding: 0.4rem 0; }
	.sd__consent::before { width: 1.35rem; height: 1.35rem; }

	.sd-dropzone { padding: 1.6rem 1.1rem; }
	.sd-dropzone__title { flex-direction: column; gap: 0.35rem; }
	.sd-dropzone__sep { display: none; }
	.sd-dropzone__btn { min-height: 44px; padding: 0.6rem 1.25rem; font-size: 0.92rem; width: 100%; }
	.sd-photos { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }

	/* Le CTA principal prend toute la largeur : cible franche, parcours lisible. */
	.sd__nav { gap: 0.8rem; }
	.sd__nav .sd__btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
	.sd__nav .sd__btn--gold { margin-left: 0; order: -1; } /* action principale au-dessus du retour */

	/* Le retour est une action rare et réversible : lien discret, pas un second
	   bouton de même poids que le CTA. La cible tactile reste pleine largeur. */
	.sd__nav .sd__btn--ghost {
		background: none;
		border-color: transparent;
		color: var(--sd-muted);
		font-weight: 500;
		min-height: 44px;
		padding: 0.6rem 1rem;
	}
	.sd__nav .sd__btn--ghost:hover { border-color: transparent; color: var(--sd-ink); }
}

/* Aperçu dans « Devis → Parcours » : le formulaire seul, sans l'habillage du site. */
body.sd-preview .site-header,
body.sd-preview .site-footer,
body.sd-preview #wpadminbar { display: none !important; }
html:has(body.sd-preview) { margin-top: 0 !important; }