/**
 * Parcours de devis — styles publics.
 *
 * Les couleurs et la police proviennent de la charte du thème, injectées en
 * variables par Formulaire::rendre(). Chaque variable porte une valeur de repli
 * pour que le parcours reste lisible sur n'importe quel thème.
 *
 * Langage visuel du site : angles vifs, filets de 1 px, aucune ombre.
 */

.cb-devis {
	--cb-espace: 1.5rem;
	max-width: 44rem;
	margin-inline: auto;
	font-family: var(--cb-police, inherit);
	color: var(--cb-couleur-encre, #1d2327);
}

.cb-devis h2 {
	font-size: clamp( 1.375rem, 4vw, 1.75rem );
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0 0 var(--cb-espace);
}

/* --- Progression -------------------------------------------------------- */

.cb-devis__progression {
	height: 3px;
	background: var(--cb-couleur-filet, #dcdcde);
	margin-bottom: 0.6rem;
}

.cb-devis__jauge {
	height: 100%;
	background: var(--cb-couleur-primaire, #2c3338);
	transition: width 200ms ease;
}

.cb-devis__compteur {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cb-couleur-ardoise, #50575e);
	margin: 0 0 var(--cb-espace);
}

/* --- Choix -------------------------------------------------------------- */

.cb-devis__choix {
	display: grid;
	gap: 0.75rem;
	margin-bottom: var(--cb-espace);
}

@media (min-width: 30em) {
	.cb-devis__choix { grid-template-columns: repeat(2, 1fr); }
}

.cb-devis__option {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-height: 56px;
	padding: 0.9rem 1.1rem;
	text-align: left;
	background: #fff;
	border: 1px solid var(--cb-couleur-filet, #dcdcde);
	border-radius: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.cb-devis__option:hover {
	border-color: var(--cb-couleur-primaire, #2c3338);
	background: var(--cb-couleur-brume, #f6f7f7);
}

.cb-devis__option.est-actif {
	border-color: var(--cb-couleur-primaire, #2c3338);
	border-width: 2px;
	background: var(--cb-couleur-brume, #f6f7f7);
}

.cb-devis__option-titre { font-weight: 500; }

.cb-devis__option-detail {
	font-size: 0.8125rem;
	color: var(--cb-couleur-primaire, #2c3338);
}

/* --- Champs ------------------------------------------------------------- */

.cb-devis__champ { margin: 0 0 1rem; }

.cb-devis__champ label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

.cb-devis__saisie {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--cb-couleur-filet, #8c8f94);
	border-radius: 0;
	background: #fff;
	font: inherit;
	color: inherit;
}

.cb-devis__saisie:focus {
	outline: 3px solid var(--cb-couleur-azur, #2271b1);
	outline-offset: 1px;
	border-color: var(--cb-couleur-primaire, #2271b1);
}

.cb-devis__surface {
	display: block;
	font-size: clamp( 2rem, 7vw, 2.75rem );
	font-weight: 500;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.5rem;
}

.cb-devis__curseur {
	width: 100%;
	margin-bottom: var(--cb-espace);
	accent-color: var(--cb-couleur-primaire, #2c3338);
}

.cb-devis__aide {
	font-size: 0.9375rem;
	color: var(--cb-couleur-ardoise, #50575e);
	margin: 0 0 1rem;
}

.cb-devis__intro { margin: var(--cb-espace) 0 1rem; font-weight: 500; }

/* --- Options et cases --------------------------------------------------- */

.cb-devis__options {
	border: 1px solid var(--cb-couleur-filet, #dcdcde);
	padding: 1rem 1.1rem;
	margin: 0 0 var(--cb-espace);
}

.cb-devis__options legend {
	padding-inline: 0.4rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cb-couleur-ardoise, #50575e);
}

.cb-devis__case {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.35rem 0;
	font-size: 0.9375rem;
	cursor: pointer;
}

.cb-devis__case--rgpd {
	margin: 1rem 0;
	font-size: 0.875rem;
	color: var(--cb-couleur-ardoise, #50575e);
}

.cb-devis__case input { margin-top: 0.25rem; flex: 0 0 auto; }

/* --- Estimation --------------------------------------------------------- */

.cb-devis__estimation {
	padding: 1.5rem;
	margin-bottom: var(--cb-espace);
	background: var(--cb-couleur-brume, #f6f7f7);
	border-left: 3px solid var(--cb-couleur-primaire, #2c3338);
}

.cb-devis__surtitre {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--cb-couleur-primaire, #2c3338);
}

.cb-devis__montant {
	margin: 0 0 0.75rem;
	font-size: clamp( 1.75rem, 6vw, 2.5rem );
	font-weight: 500;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.cb-devis__mention {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--cb-couleur-ardoise, #50575e);
}

/* --- Navigation et envoi ------------------------------------------------ */

.cb-devis__navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: var(--cb-espace);
}

.cb-devis__suivant,
.cb-devis__envoyer {
	min-height: 48px;
	padding: 0.9rem 2rem;
	background: var(--cb-couleur-primaire, #2c3338);
	color: #fff;
	border: 1px solid var(--cb-couleur-primaire, #2c3338);
	border-radius: 0;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.cb-devis__envoyer { width: 100%; }

.cb-devis__suivant:hover,
.cb-devis__envoyer:hover {
	background: var(--cb-couleur-encre, #1d2327);
	border-color: var(--cb-couleur-encre, #1d2327);
}

.cb-devis__suivant[disabled],
.cb-devis__envoyer[disabled] { opacity: 0.5; cursor: not-allowed; }

.cb-devis__retour {
	min-height: 44px;
	padding: 0.5rem 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--cb-couleur-ardoise, #50575e);
	text-decoration: underline;
	cursor: pointer;
}

.cb-devis__erreurs {
	margin: 1rem 0;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid #b32d2e;
	background: #fcf0f1;
	color: #8a2424;
	font-size: 0.9375rem;
}

.cb-devis__erreurs p { margin: 0 0 0.35rem; }
.cb-devis__erreurs p:last-child { margin-bottom: 0; }

/* Piège à automates : hors flux et hors lecteurs d'écran, jamais « display:none »
   que certains robots savent détecter. */
.cb-devis__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Confirmation ------------------------------------------------------- */

.cb-devis__merci {
	padding: 2rem 1.5rem;
	border: 1px solid var(--cb-couleur-filet, #dcdcde);
	background: var(--cb-couleur-brume, #f6f7f7);
}

.cb-devis__reference {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.cb-devis__secours {
	padding: 1rem 1.25rem;
	border: 1px solid var(--cb-couleur-filet, #dcdcde);
}

@media (prefers-reduced-motion: reduce) {
	.cb-devis__jauge { transition: none; }
}

/* =========================================================================
 * Formulaires courts : contact et rappel
 * ====================================================================== */

.cb-form {
	max-width: 34rem;
	font-family: var(--cb-police, inherit);
	color: var(--cb-couleur-encre, #1d2327);
}

.cb-form--rappel {
	padding: 1.5rem;
	background: var(--cb-couleur-brume, #f6f7f7);
	border: 1px solid var(--cb-couleur-filet, #dcdcde);
}

.cb-form__titre {
	margin: 0 0 .35rem;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -.02em;
}

.cb-form__aide {
	margin: 0 0 1rem;
	font-size: .9375rem;
	color: var(--cb-couleur-ardoise, #50575e);
}

.cb-form__champ { margin: 0 0 1rem; }

.cb-form__champ label {
	display: block;
	margin-bottom: .3rem;
	font-size: .9375rem;
	font-weight: 500;
}

.cb-form__saisie {
	width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	border: 1px solid var(--cb-couleur-filet, #8c8f94);
	border-radius: 0;
	background: #fff;
	font: inherit;
	color: inherit;
}

.cb-form__saisie:focus {
	outline: 3px solid var(--cb-couleur-azur, #2271b1);
	outline-offset: 1px;
	border-color: var(--cb-couleur-primaire, #2271b1);
}

textarea.cb-form__saisie { min-height: 8rem; }

.cb-form__case {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0 0 1rem;
	font-size: .875rem;
	color: var(--cb-couleur-ardoise, #50575e);
}

.cb-form__case input { margin-top: .25rem; flex: 0 0 auto; }

.cb-form__envoyer {
	width: 100%;
	min-height: 48px;
	padding: .9rem 2rem;
	background: var(--cb-couleur-primaire, #2c3338);
	color: #fff;
	border: 1px solid var(--cb-couleur-primaire, #2c3338);
	border-radius: 0;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.cb-form__envoyer:hover {
	background: var(--cb-couleur-encre, #1d2327);
	border-color: var(--cb-couleur-encre, #1d2327);
}

.cb-form__envoyer[disabled] { opacity: .5; cursor: not-allowed; }

.cb-form__retour {
	margin: 0 0 1rem;
	padding: .9rem 1.1rem;
	font-size: .9375rem;
	border-left: 3px solid;
}

.cb-form__retour--erreur { border-color: #b32d2e; background: #fcf0f1; color: #8a2424; }
.cb-form__retour--succes { border-color: var(--cb-couleur-succes, #1f6b4c); background: #edf7f2; color: #14513a; }
.cb-form__retour p { margin: 0 0 .35rem; }
.cb-form__retour p:last-child { margin-bottom: 0; }