/**
 * Briques optionnelles : simulateurs, comparateur, estimation.
 *
 * Ces composants reprennent les jetons du thème : changer la palette dans
 * tokens.css les met à jour sans y toucher.
 */

/* ---------- Simulateurs (financement, estimation) ---------- */
.si-simulateur {
	background: var(--si-color-primary);
	color: #fff;
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-7) var(--si-space-5);
}
.si-simulateur__intro { max-width: 64ch; margin: 0 auto var(--si-space-6); text-align: center; }
.si-simulateur__titre {
	color: #fff;
	font-size: var(--si-text-3xl);
	margin-bottom: var(--si-space-3);
}
.si-simulateur__chapeau { color: rgba(255, 255, 255, 0.78); font-size: var(--si-text-sm); margin: 0; }

.si-simulateur__corps {
	display: grid;
	/* Le panneau n'offre que 264 px sur un téléphone : sans le `min()`, la
	   colonne resterait à 320 px et pousserait la page hors de l'écran. */
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--si-space-5);
	align-items: start;
	max-width: var(--si-container);
	margin-inline: auto;
}

.si-simulateur__champs {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-5);
}
.si-simulateur__champs label { color: rgba(255, 255, 255, 0.9); }
.si-simulateur__champs .si-muted { color: rgba(255, 255, 255, 0.55); font-weight: 400; }
.si-simulateur__champs input,
.si-simulateur__champs select {
	background: #fff;
	border-color: transparent;
	font-size: var(--si-text-base);
}

.si-simulateur__resultat {
	background: #fff;
	color: var(--si-color-ink);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-6) var(--si-space-5);
	box-shadow: var(--si-shadow-lg);
}
.si-simulateur__label {
	font-size: var(--si-text-xs);
	letter-spacing: var(--si-tracking-wide);
	text-transform: uppercase;
	color: var(--si-color-accent-texte);
	font-weight: 600;
	text-align: center;
	margin-bottom: var(--si-space-2);
}
.si-simulateur__montant {
	font-family: var(--si-font-heading);
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	color: var(--si-color-primary);
	text-align: center;
	margin: 0 0 var(--si-space-5);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.si-simulateur__reperes { margin-top: var(--si-space-5); }
.si-simulateur__reperes ul { list-style: none; margin: var(--si-space-3) 0 0; padding: 0; display: grid; gap: var(--si-space-2); }
.si-simulateur__reperes li {
	display: flex; justify-content: space-between; gap: var(--si-space-3);
	font-size: var(--si-text-sm); align-items: baseline;
}
.si-simulateur__manque { color: #b4232b; }
.si-simulateur__ok { color: var(--si-color-success); }

.si-simulateur__validation { margin-top: var(--si-space-5); }
.si-simulateur__validation summary { cursor: pointer; list-style: none; }
.si-simulateur__validation summary::-webkit-details-marker { display: none; }
.si-simulateur__form { margin-top: var(--si-space-4); }
.si-simulateur__mention {
	font-size: var(--si-text-xs);
	color: var(--si-color-muted);
	text-align: center;
	margin: var(--si-space-5) 0 0;
	line-height: 1.6;
}

/* ---------- Parcours par étapes (estimation) ---------- */
.si-etapes { max-width: 760px; margin-inline: auto; }
.si-etapes__progression {
	display: flex; gap: var(--si-space-2); margin-bottom: var(--si-space-6);
	list-style: none; padding: 0;
}
.si-etapes__progression li {
	flex: 1; height: 4px; border-radius: 2px;
	background: rgba(255, 255, 255, 0.22);
}
.si-etapes__progression li.is-done { background: var(--si-color-accent); }
.si-etape { display: none; }
.si-etape.is-active { display: block; }
.si-etape__titre { color: #fff; font-size: var(--si-text-xl); margin-bottom: var(--si-space-4); }
.si-etape__aide { color: rgba(255, 255, 255, 0.7); font-size: var(--si-text-sm); margin-bottom: var(--si-space-4); }

.si-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--si-space-3); }
.si-choix label {
	display: block; text-align: center; cursor: pointer;
	padding: var(--si-space-4) var(--si-space-3);
	border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--si-radius-lg);
	color: #fff; font-weight: 600; font-size: var(--si-text-sm);
	transition: border-color var(--si-transition), background var(--si-transition);
}
.si-choix label:hover { border-color: var(--si-color-accent); }
.si-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.si-choix input:checked + span { color: var(--si-color-primary); }
.si-choix label:has(input:checked) { background: var(--si-color-accent); border-color: var(--si-color-accent); color: var(--si-color-primary); }

.si-etapes__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--si-space-3); margin-top: var(--si-space-6); }
.si-etapes__actions .si-btn { max-width: 100%; }

/* ---------- Comparateur ---------- */
.si-comparateur { overflow-x: auto; }
.si-comparateur table { border-collapse: collapse; width: 100%; min-width: 640px; }
.si-comparateur th,
.si-comparateur td {
	border-bottom: var(--si-border);
	padding: var(--si-space-3);
	text-align: left;
	font-size: var(--si-text-sm);
	vertical-align: top;
}
.si-comparateur thead th { background: var(--si-color-surface); position: sticky; top: 0; }
.si-comparateur tbody th {
	color: var(--si-color-muted); font-weight: 400;
	width: 200px; background: #fff;
}
.si-comparateur__media img { border-radius: var(--si-radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.si-comparateur__titre { font-weight: 600; color: var(--si-color-primary); display: block; margin-top: var(--si-space-2); }
.si-comparateur__prix { font-size: var(--si-text-lg); font-weight: 600; }
.si-comparateur__retirer {
	background: none; border: 0; color: var(--si-color-danger);
	cursor: pointer; font-size: var(--si-text-xs); padding: 0;
}
.si-comparateur__mieux { font-weight: 700; color: var(--si-color-success); }

/* Place que la barre prend en bas de l'écran. Elle sort du flux : sans réserve
   équivalente sur le corps de page, la pagination et les liens légaux finissent
   dessous, hors d'atteinte puisque la page est déjà en butée. */
:root { --si-compare-bar-hauteur: 84px; }
@media (max-width: 640px) { :root { --si-compare-bar-hauteur: 180px; } }

.si-compare-bar {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
	background: var(--si-color-primary); color: #fff;
	/* Une bulle de discussion vit dans le coin : les boutons s'en écartent,
	   sinon ils passent dessous et deviennent inatteignables. */
	padding: var(--si-space-3) clamp(var(--si-space-5), 8vw, 108px) var(--si-space-3) var(--si-space-5);
	display: none; align-items: center; justify-content: space-between; gap: var(--si-space-4);
	box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.18);
}
.si-compare-bar__actions { display: flex; align-items: center; gap: var(--si-space-3); }
@media (max-width: 640px) {
	.si-compare-bar {
		flex-wrap: wrap;
		justify-content: center;
		padding: var(--si-space-3) var(--si-space-4) calc(var(--si-space-3) + 64px);
	}
}
.si-compare-bar.is-visible { display: flex; }
.si-compare-bar__count { font-size: var(--si-text-sm); }
/* La réserve va au pied de page, pas au corps : posée sur le corps, elle
   ajoutait une bande blanche sous le pied, et la barre semblait flotter en
   dehors du site. */
body:has(.si-compare-bar.is-visible) .si-footer {
	padding-bottom: calc(var(--si-space-5) + var(--si-compare-bar-hauteur));
}

/* Sur une fiche, la barre d'appel occupe déjà le bas de l'écran : le
   comparateur se pose au-dessus d'elle plutôt que de la recouvrir — c'est le
   seul moyen de contact sur mobile. */
@media (max-width: 1000px) {
	body.single-bien .si-compare-bar,
	body.single-programme .si-compare-bar { bottom: 76px; }
	body.single-bien:has(.si-compare-bar.is-visible),
	body.single-programme:has(.si-compare-bar.is-visible) {
		padding-bottom: calc(var(--si-compare-bar-hauteur) + 76px);
	}
}

/* ---------- Alertes e-mail ---------- */
.si-alerte {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--si-space-6); align-items: center;
	background: var(--si-color-surface); border-radius: var(--si-radius-lg);
	padding: var(--si-space-6); margin-block: var(--si-space-7);
}
@media (max-width: 782px) { .si-alerte { grid-template-columns: minmax(0, 1fr); } }
.si-alerte h2 { margin: 0 0 var(--si-space-2); font-size: var(--si-text-xl); }
.si-alerte p { margin: 0; color: var(--si-color-muted); font-size: var(--si-text-sm); }
.si-alerte__resume {
	margin-top: var(--si-space-3) !important; font-weight: 600; color: var(--si-color-ink) !important;
}
.si-alerte__champs { display: flex; flex-wrap: wrap; gap: var(--si-space-2); }
.si-alerte__champs input[type="email"] { flex: 1 1 200px; }
.si-alerte__rgpd {
	display: flex; align-items: flex-start; gap: var(--si-space-2);
	margin-top: var(--si-space-3); font-size: var(--si-text-xs); color: var(--si-color-muted); line-height: 1.5;
}
.si-message {
	padding: var(--si-space-4) var(--si-space-5); border-radius: var(--si-radius);
	margin: var(--si-space-5) 0 0; font-size: var(--si-text-sm);
}
.si-message--ok { background: #e9f6ec; color: #17612f; }
.si-message--ko { background: #fdeceb; color: #8a1f1f; }

/* ---------- Autocomplétion d'adresse ---------- */
.si-adresse { position: relative; margin-bottom: var(--si-space-5); }
.si-adresse input[type="text"] { width: 100%; }
.si-adresse__liste {
	position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
	list-style: none; margin: 0; padding: 4px;
	background: #fff; color: var(--si-color-ink);
	border-radius: var(--si-radius); box-shadow: var(--si-shadow-md); max-height: 260px; overflow-y: auto;
}
.si-adresse__liste li { padding: 9px 12px; border-radius: var(--si-radius); cursor: pointer; font-size: var(--si-text-sm); }
.si-adresse__liste li:hover, .si-adresse__liste li.is-actif { background: var(--si-color-surface); }
.si-simulateur__source {
	margin-top: var(--si-space-4); font-size: var(--si-text-xs); line-height: 1.6; opacity: .8;
}

/* ---------- Espace client ---------- */
.si-espace-lien {
	font-size: var(--si-text-sm); font-weight: 600; text-decoration: none;
	color: var(--si-color-primary); border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.si-espace-lien:hover { border-bottom-color: var(--si-color-accent); }

.si-espace__entete {
	display: flex; flex-wrap: wrap; gap: var(--si-space-4);
	align-items: flex-end; justify-content: space-between; margin-bottom: var(--si-space-6);
}
.si-espace__entete h1 { margin: 0; }
.si-espace__entete p { margin: var(--si-space-1) 0 0; }

.si-espace__nav {
	display: flex; flex-wrap: wrap; gap: var(--si-space-2);
	border-bottom: var(--si-border); margin-bottom: var(--si-space-6);
}
.si-espace__onglet {
	padding: var(--si-space-3) var(--si-space-4); text-decoration: none;
	font-size: var(--si-text-sm); font-weight: 600; color: var(--si-color-muted);
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.si-espace__onglet:hover { color: var(--si-color-primary); }
.si-espace__onglet.is-actif { color: var(--si-color-primary); border-bottom-color: var(--si-color-accent); }

.si-espace__portes { display: grid; gap: var(--si-space-5); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.si-espace__panneau {
	background: var(--si-color-base); border: var(--si-border);
	border-radius: var(--si-radius-lg); padding: var(--si-space-5); margin-bottom: var(--si-space-5);
}
.si-espace__panneau h2 { font-size: var(--si-text-xl); margin: 0 0 var(--si-space-2); }
.si-espace__panneau > p.si-muted { margin: 0 0 var(--si-space-4); font-size: var(--si-text-sm); }
.si-espace__panneau--accent { background: var(--si-color-surface); }
.si-espace__panneau--sortie { border-color: var(--si-color-line); }

.si-espace__form { display: grid; gap: var(--si-space-4); }
.si-espace__form .si-field-row { gap: var(--si-space-4); }
/* Champ leurre : invisible à l'œil, atteignable par un robot. */
.si-espace__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.si-espace__case {
	display: flex; align-items: flex-start; gap: var(--si-space-2);
	font-size: var(--si-text-xs); color: var(--si-color-muted); line-height: 1.5; font-weight: 400;
}
.si-espace__case input { width: auto; margin-top: 2px; }

.si-espace__aide { margin: var(--si-space-2) 0 0; font-size: var(--si-text-xs); color: var(--si-color-muted); }
.si-espace__bas { margin: var(--si-space-4) 0 0; font-size: var(--si-text-sm); }
.si-espace__discret { font-size: var(--si-text-xs); color: var(--si-color-muted); }

.si-espace__renvoi { margin-top: var(--si-space-5); font-size: var(--si-text-sm); }
.si-espace__renvoi summary { cursor: pointer; color: var(--si-color-muted); }
.si-espace__renvoi .si-espace__form { margin-top: var(--si-space-4); max-width: 420px; }

.si-espace__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--si-space-3); }
.si-espace__ligne {
	display: flex; flex-wrap: wrap; gap: var(--si-space-3);
	align-items: center; justify-content: space-between;
	padding: var(--si-space-4); border: var(--si-border); border-radius: var(--si-radius);
}
.si-espace__ligne--pile { flex-direction: column; align-items: flex-start; }
.si-espace__ligne-texte { display: grid; gap: var(--si-space-1); }
.si-espace__ligne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--si-space-3); }
.si-espace__ligne-actions form { display: flex; align-items: center; gap: var(--si-space-2); }
.si-espace__message { margin: 0; font-size: var(--si-text-sm); color: var(--si-color-muted); }

.si-espace__vide {
	padding: var(--si-space-6); text-align: center; color: var(--si-color-muted);
	background: var(--si-color-surface); border-radius: var(--si-radius); font-size: var(--si-text-sm);
}

.si-espace__bien { display: flex; flex-direction: column; gap: var(--si-space-2); }
.si-espace__retirer {
	background: none; border: none; padding: 0; cursor: pointer;
	font-size: var(--si-text-xs); color: var(--si-color-danger); text-decoration: underline;
}

.si-espace__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--si-space-4); margin: 0; }
.si-espace__danger {
	margin-top: var(--si-space-5); padding: var(--si-space-5);
	border: 1px solid var(--si-color-danger); border-radius: var(--si-radius); display: grid; gap: var(--si-space-4);
}
.si-espace__danger h3 { margin: 0; font-size: var(--si-text-lg); }
.si-espace__danger p { margin: 0; font-size: var(--si-text-sm); }
.si-espace__danger form { display: grid; gap: var(--si-space-4); justify-items: start; }
.si-btn--danger { background: var(--si-color-danger); color: #fff; }
.si-btn--danger:hover { background: #8a1f1f; color: #fff; }

/* Invitation à créer un compte, posée après un ajout aux favoris. */
.si-invite {
	/* Au-dessus des barres fixes du bas : peint dessous, l'encart montrait sa
	   première ligne et cachait justement le lien et la croix de fermeture. */
	position: fixed; z-index: 96; left: var(--si-space-4); right: var(--si-space-4); bottom: var(--si-space-4);
	max-width: 420px; margin-inline: auto;
	display: flex; align-items: center; gap: var(--si-space-3);
	padding: var(--si-space-4); background: var(--si-color-primary); color: #fff;
	border-radius: var(--si-radius-lg); box-shadow: var(--si-shadow-lg); font-size: var(--si-text-sm);
}
.si-invite p { margin: 0; flex: 1; }
.si-invite a { color: #fff; font-weight: 600; white-space: nowrap; }
.si-invite__fermer {
	background: none; border: none; color: #fff; cursor: pointer;
	font-size: var(--si-text-lg); line-height: 1; padding: 0 var(--si-space-1); opacity: .7;
}
.si-invite__fermer:hover { opacity: 1; }

/* Sur une fiche, la barre d'appel occupe le bas de l'écran : l'encart monte
   d'autant, sans quoi il s'ouvre exactement derrière elle. */
@media (max-width: 1000px) {
	body.single-bien .si-invite,
	body.single-programme .si-invite { bottom: calc(76px + var(--si-space-4)); }
}

/* ---------- Ce bien, à crédit ---------- */
.si-credit {
	background: var(--si-color-primary);
	color: #fff;
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-6);
	margin-block: var(--si-space-6);
}
.si-credit .si-block__title { color: #fff; margin-top: 0; }
.si-credit__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--si-space-6);
	align-items: center;
	margin-top: var(--si-space-5);
}
@media (min-width: 860px) {
	.si-credit__corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--si-space-7); }
}
.si-credit__champs { display: grid; gap: var(--si-space-4); }
.si-credit__champs label {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--si-space-3);
	margin-bottom: 6px;
	font-size: var(--si-text-sm); font-weight: 600; color: rgb(255 255 255 / .88);
}
.si-credit__part { font-weight: 500; color: rgb(255 255 255 / .6); font-size: var(--si-text-xs); }
/* Le symbole de devise vit dans le champ : l'acquéreur tape un montant, pas une unité. */
.si-credit__saisie { position: relative; }
.si-credit__saisie input { width: 100%; padding-right: 46px; }
.si-credit__saisie span {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	color: var(--si-color-muted); font-size: var(--si-text-sm); pointer-events: none;
}
.si-credit__champs input,
.si-credit__champs select { background: #fff; color: var(--si-color-ink); border-color: transparent; }

.si-credit__resultat { display: grid; gap: var(--si-space-5); justify-items: center; }
.si-credit__anneau { position: relative; width: min(240px, 70vw); }
.si-credit__anneau svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.si-credit__piste { stroke: rgb(255 255 255 / .12); }
.si-credit__arc { transition: stroke-dasharray .35s ease, stroke-dashoffset .35s ease; }
.si-credit__arc--capital { stroke: #fff; }
.si-credit__arc--notaire { stroke: var(--si-color-accent); }
.si-credit__arc--interets { stroke: rgb(255 255 255 / .45); }
.si-credit__centre {
	position: absolute; inset: 0;
	display: grid; align-content: center; justify-items: center; gap: 2px;
	text-align: center;
}
.si-credit__label { font-size: var(--si-text-xs); color: rgb(255 255 255 / .7); }
.si-credit__mensualite { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; line-height: 1.1; }

.si-credit__legende { width: 100%; max-width: 380px; margin: 0; display: grid; gap: 2px; }
.si-credit__ligne {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--si-space-4);
	padding: 9px 0;
	border-bottom: 1px solid rgb(255 255 255 / .14);
	font-size: var(--si-text-sm);
}
.si-credit__ligne:last-child { border-bottom: 0; }
.si-credit__ligne dt {
	display: flex; align-items: baseline; gap: 8px; margin: 0;
	color: rgb(255 255 255 / .82);
}
/* La pastille rappelle la couleur de la part dans l'anneau. */
.si-credit__ligne dt::before {
	content: ""; flex: none;
	width: 10px; height: 10px; border-radius: 50%;
	background: currentColor;
}
.si-credit__ligne--capital dt::before { background: #fff; }
.si-credit__ligne--notaire dt::before { background: var(--si-color-accent); }
.si-credit__ligne--interets dt::before { background: rgb(255 255 255 / .45); }
.si-credit__ligne dd { margin: 0; font-weight: 700; }
.si-credit__mention { margin: var(--si-space-5) 0 0; font-size: var(--si-text-xs); color: rgb(255 255 255 / .6); line-height: 1.5; }

/* ---------- Estimation : un parcours d'un seul tenant ----------
   Tous les champs de toutes les étapes suivent la même règle : même hauteur,
   même arrondi, même couleur d'étiquette. Les cases à cocher et les champs de
   saisie ne se ressemblaient pas d'un écran à l'autre. */
.si-etape label,
.si-etape legend { color: #fff; }
.si-etape__champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--si-space-4);
}
.si-etape__champs--espace { margin-top: var(--si-space-5); }
.si-etape__champs > div { display: grid; align-content: start; gap: 6px; }
.si-etape__champs label { font-size: var(--si-text-sm); font-weight: 600; }
.si-etape input[type="text"],
.si-etape input[type="number"],
.si-etape input[type="email"],
.si-etape input[type="tel"],
.si-etape select {
	width: 100%;
	min-height: 46px;
	border-radius: var(--si-radius-full);
	border: 1px solid transparent;
	background: #fff;
	color: var(--si-color-ink);
	padding-inline: var(--si-space-4);
}
.si-etape textarea { border-radius: var(--si-radius-lg); }
.si-etape__sous-titre {
	margin: var(--si-space-5) 0 var(--si-space-2);
	font-size: var(--si-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--si-tracking-wide);
	color: rgb(255 255 255 / .65);
}
/* Une case à cocher est une réponse, pas un champ : même hauteur que les
   autres, mais une pilule qui se coche. */
/* Les cases se rangent côte à côte, sur toute la largeur restante : empilées
   dans une colonne de la grille, elles formaient deux barres l'une sur l'autre
   et déséquilibraient l'étape. */
.si-etape__champs > .si-etape__cases,
.si-etape__cases {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--si-space-3);
	grid-column: 2 / -1;
	align-self: end;
}
@media (max-width: 760px) {
	/*
	 * Les deux sélecteurs, pas seulement le court : « .si-etape__champs >
	 * .si-etape__cases » l'emportait sur la version mobile, les cases restaient
	 * en colonne 2, et une colonne 2 forcée empêchait la grille de se replier —
	 * l'étape « Ses dimensions » débordait alors de l'écran d'un téléphone.
	 */
	.si-etape__champs > .si-etape__cases,
	.si-etape__cases { grid-column: 1 / -1; }
}

/* Sur téléphone, chaque réponse tient la largeur : un pouce ne vise pas un
   bouton de cent seize pixels dans un coin. */
@media (max-width: 640px) {
	.si-etape__champs { grid-template-columns: minmax(0, 1fr); }
	.si-choix { grid-template-columns: minmax(0, 1fr); }
	.si-etapes__actions { flex-direction: column-reverse; align-items: stretch; }
	.si-etapes__actions .si-btn { width: 100%; min-height: 48px; }
	.si-etape__cases { flex-direction: column; align-items: stretch; }
	.si-case { justify-content: flex-start; }
}
.si-case {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 46px;
	padding: 0 var(--si-space-4);
	border-radius: var(--si-radius-full);
	background: rgb(255 255 255 / .1);
	border: 1px solid rgb(255 255 255 / .22);
	font-weight: 500; font-size: var(--si-text-sm);
	cursor: pointer;
}
.si-case:hover { background: rgb(255 255 255 / .16); }
.si-case input { width: auto; min-height: 0; accent-color: var(--si-color-accent); }
.si-etape__consent { color: rgb(255 255 255 / .75); margin-top: var(--si-space-4); }
.si-etape__consent label { font-weight: 400; margin: 0; color: rgb(255 255 255 / .75); }
.si-estimation__resultat { max-width: 640px; margin-inline: auto; }
.si-simulateur__montant--petit { font-size: 1.6rem; }
.si-estimation__actions { margin-top: var(--si-space-5); }
.si-estimation__tiret { font-size: .5em; vertical-align: middle; }
.si-etape__retour { color: #fff; border-color: rgb(255 255 255 / .4); }
.si-etape__retour:hover { color: #fff; border-color: rgb(255 255 255 / .7); }

/* ---------- Page d'estimation : le contenu sous le parcours ---------- */
.si-estim-hero { background: var(--si-color-surface); border-bottom: var(--si-border); padding-block: var(--si-space-6) var(--si-space-7); }
.si-estim-hero__inner { display: grid; justify-items: start; gap: var(--si-space-2); }
.si-estim-hero__inner .si-breadcrumb { width: 100%; }
.si-estim-hero__inner .si-breadcrumb .si-container { padding: 0; max-width: none; }
.si-estim-hero__titre { margin: 0; font-size: clamp(30px, 3.6vw, 46px); }
.si-estim-hero__intro { margin: var(--si-space-2) 0 0; color: var(--si-color-muted); max-width: 66ch; font-size: var(--si-text-lg); }
.si-estim-texte { margin-inline: auto; margin-bottom: var(--si-space-6); }

.si-estim-methode, .si-estim-facteurs, .si-estim-faq { padding-block: var(--si-space-8); }
.si-estim-facteurs { background: var(--si-color-surface); }
.si-estim-bloc__sur { display: block; text-align: center; color: var(--si-color-accent); }
.si-estim-bloc__titre { margin: var(--si-space-2) 0 0; text-align: center; font-size: clamp(26px, 3.2vw, 42px); }
.si-estim-bloc__chapeau {
	margin: var(--si-space-5) auto 0;
	max-width: 68ch;
	text-align: center;
	color: var(--si-color-muted);
	line-height: 1.65;
}

/* Trois étapes numérotées, à égalité : aucune n'est plus importante. */
/* Trois étapes qui se lisent comme un parcours : un gros chiffre, un titre, une
   phrase. Le chiffre porte la progression, pas une puce décorative. */
.si-estim-etapes {
	list-style: none;
	margin: var(--si-space-7) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--si-space-5);
	counter-reset: si-etape;
}
.si-estim-etapes li {
	position: relative;
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-7) var(--si-space-6) var(--si-space-6);
	text-align: left;
	counter-increment: si-etape;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.si-estim-etapes li::before {
	content: counter(si-etape);
	position: absolute;
	top: calc(var(--si-space-5) * -1);
	left: var(--si-space-6);
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 999px;
	background: var(--si-color-primary);
	color: #fff;
	font-family: var(--si-font-heading);
	font-size: 20px;
	font-weight: 700;
	box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--si-color-primary) 70%, transparent);
}
.si-estim-etapes li:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--si-color-primary) 30%, transparent);
	box-shadow: 0 16px 34px -26px rgb(16 24 40 / .5);
}
.si-estim-etapes h3 { margin: var(--si-space-2) 0 var(--si-space-3); font-size: var(--si-text-lg); }
.si-estim-etapes p { margin: 0; color: var(--si-color-muted); line-height: 1.65; }

/* Six facteurs, trois par rangée : la grille se termine toujours pleine. */
.si-estim-cartes {
	margin-top: var(--si-space-7);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--si-space-5);
}
.si-estim-carte {
	display: grid;
	align-content: start;
	gap: var(--si-space-3);
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-6);
	text-align: left;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.si-estim-carte:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--si-color-accent) 45%, transparent);
	box-shadow: 0 18px 36px -28px rgb(16 24 40 / .55);
}
.si-estim-carte__icone {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--si-color-accent) 16%, transparent);
	color: var(--si-color-accent-texte, var(--si-color-primary));
}
.si-estim-carte__icone svg { width: 23px; height: 23px; }
.si-estim-carte h3 { margin: 0; font-size: var(--si-text-lg); line-height: 1.3; }
.si-estim-carte p { margin: 0; color: var(--si-color-muted); line-height: 1.65; }

@media (max-width: 1000px) {
	.si-estim-etapes,
	.si-estim-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.si-estim-etapes,
	.si-estim-cartes { grid-template-columns: minmax(0, 1fr); }
	.si-estim-etapes li { padding-top: var(--si-space-6); }
	.si-estim-etapes li::before { position: static; margin-bottom: var(--si-space-3); }
}

/* Une question par carte, la réponse au clic : la page reste courte, et chaque
   question se distingue au lieu de se fondre dans une liste de traits. */
.si-faq { margin-top: var(--si-space-6); display: grid; gap: var(--si-space-3); }
.si-faq__item {
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding-inline: var(--si-space-5);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.si-faq__item[open] {
	border-color: color-mix(in srgb, var(--si-color-primary) 28%, transparent);
	box-shadow: 0 16px 34px -30px rgb(16 24 40 / .55);
}
.si-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--si-space-4);
	padding-block: var(--si-space-5);
	font-weight: 600;
	font-size: var(--si-text-lg);
	color: var(--si-color-primary);
	cursor: pointer;
	list-style: none;
}
.si-faq__item summary:hover { color: var(--si-color-accent-texte, var(--si-color-primary)); }
.si-faq__item summary::-webkit-details-marker { display: none; }
.si-faq__item summary::after {
	content: "";
	flex: none;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--si-color-surface);
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
	background-size: 12px 1.7px, 1.7px 12px;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform .2s ease, background-size .2s ease;
}
.si-faq__item[open] summary::after { background-size: 12px 1.7px, 0 0; transform: rotate(180deg); }
.si-faq__item p { margin: 0 0 var(--si-space-5); color: var(--si-color-ink-soft); line-height: 1.7; max-width: 74ch; }
/* Le retour sur le résultat vise une ancre : sans cette marge, l'en-tête
   flottant coupe le titre. */
.si-simulateur, .si-estimation__resultat { scroll-margin-top: calc(var(--si-entete-rond-hauteur, 96px) + var(--si-space-4)); }

/* ---------- Estimation, commune par commune ---------- */

.si-estim-marche, .si-estim-biens, .si-estim-communes { padding-block: var(--si-space-8); }
.si-estim-marche { background: var(--si-color-surface); }

/* Deux chiffres, jamais plus : maison et appartement. Ils portent la page, donc
   ils se lisent de loin et disent d'où ils viennent. */
.si-estim-prix {
	margin-top: var(--si-space-7);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--si-space-5);
	max-width: 860px;
	margin-inline: auto;
}
.si-estim-prix__carte {
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-6);
	text-align: center;
}
.si-estim-prix__carte h3 { margin: 0; font-size: var(--si-text-lg); }
.si-estim-prix__montant {
	margin: var(--si-space-3) 0 0;
	font-family: var(--si-font-heading);
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.1;
	color: var(--si-color-primary);
}
.si-estim-prix__unite { font-size: var(--si-text-base); color: var(--si-color-muted); }
.si-estim-prix__detail { margin: var(--si-space-3) 0 0; color: var(--si-color-muted); font-size: var(--si-text-sm); }
.si-estim-marche__source {
	margin: var(--si-space-6) auto 0;
	max-width: 68ch;
	text-align: center;
	color: var(--si-color-muted);
	font-size: var(--si-text-sm);
}

.si-estim-biens .si-grid { margin-top: var(--si-space-7); }
.si-estim-biens__tout { margin: var(--si-space-6) 0 0; text-align: center; }

/* La liste des communes est un maillage, pas un menu : des jetons compacts qui
   tiennent sur deux lignes plutôt qu'une colonne interminable. */
.si-estim-communes { background: var(--si-color-surface); }
.si-estim-communes__liste {
	list-style: none;
	margin: var(--si-space-6) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--si-space-3);
}
.si-estim-communes__liste a {
	display: inline-block;
	padding: var(--si-space-2) var(--si-space-4);
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.si-estim-communes__liste a:hover {
	border-color: color-mix(in srgb, var(--si-color-accent) 55%, transparent);
	color: var(--si-color-accent-texte, var(--si-color-primary));
}

/* L'appel au vendeur, sous les résultats d'une commune. */
.si-estim-appel {
	margin-top: var(--si-space-7);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--si-space-5);
	background: var(--si-color-surface);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-6);
}
.si-estim-appel h2 { margin: 0; font-size: var(--si-text-xl); }
.si-estim-appel p { margin: var(--si-space-2) 0 0; color: var(--si-color-muted); max-width: 60ch; }
.si-estim-appel__action { margin: 0; }