/**
 * OBR Outils Déménagement — styles front.
 * Les couleurs passent par des variables CSS : le thème du site reste maître
 * sur les polices, et l'accent est paramétrable depuis l'administration.
 */

.obr-outil {
	--obr-accent: #1b44c0;
	--obr-accent-texte: var( --obr-accent );
	--obr-accent-btn: var( --obr-accent );
	--obr-accent-btn-texte: #ffffff;
	--obr-fond: #ffffff;
	--obr-fond-doux: #f6f7f9;
	--obr-bordure: #e2e5ea;
	--obr-texte: #16202c;
	--obr-texte-doux: #5b6875;
	--obr-champ-fond: #dae5ff;
	--obr-champ-bordure: #dae5ff;
	--obr-champ-bordure-focus: #8cacf9;
	--obr-champ-fond-focus: #ffffff;
	--obr-champ-texte: #072440;
	--obr-radius: 12px;
	--obr-ombre: 0 1px 2px rgba( 16, 24, 40, 0.06 ), 0 8px 24px rgba( 16, 24, 40, 0.06 );

	box-sizing: border-box;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	color: var( --obr-texte );
	font-family: inherit;
	line-height: 1.55;
}

.obr-outil *,
.obr-outil *::before,
.obr-outil *::after {
	box-sizing: inherit;
}

/*
 * Le site obr-transport.fr n'a pas de mode sombre (aucune règle
 * « prefers-color-scheme » dans le thème) : ses champs de formulaire
 * gardent toujours le même fond clair (#DAE5FF), quel que soit le réglage
 * système du visiteur. Le module suit donc cette palette fixe plutôt que
 * de s'adapter à un thème sombre du système — sans quoi le texte des
 * champs devient clair sur un fond que le thème impose toujours clair,
 * donc illisible.
 */

/* Titres ------------------------------------------------------------- */

.obr-titre {
	margin: 0 0 8px;
	font-size: clamp( 1.4rem, 1.1rem + 1.2vw, 2rem );
	line-height: 1.25;
	color: var( --obr-texte );
}

.obr-soustitre {
	margin: 0 0 24px;
	color: var( --obr-texte-doux );
}

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

.obr-grille {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 16px;
	margin-bottom: 16px;
}

.obr-champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.obr-champ > label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var( --obr-texte );
}

.obr-outil input:not( [type="button"] ):not( [type="submit"] ):not( [type="checkbox"] ):not( [type="radio"] ),
.obr-outil select,
.obr-outil textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var( --obr-champ-bordure );
	border-radius: 10px;
	background: var( --obr-champ-fond );
	color: var( --obr-champ-texte );
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.obr-outil input:not( [type="button"] ):not( [type="submit"] ):not( [type="checkbox"] ):not( [type="radio"] )::placeholder,
.obr-outil textarea::placeholder {
	color: #4a5f80;
	opacity: 1;
}

.obr-outil input:focus:not( [type="button"] ):not( [type="submit"] ):not( [type="checkbox"] ):not( [type="radio"] ),
.obr-outil select:focus,
.obr-outil textarea:focus {
	outline: none;
	background: var( --obr-champ-fond-focus );
	border-color: var( --obr-champ-bordure-focus );
	color: var( --obr-champ-texte );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --obr-accent ) 25%, transparent );
}

.obr-outil .est-invalide {
	border-color: #dc2626;
}

.obr-aide {
	color: var( --obr-texte-doux );
	font-size: 0.8rem;
}

.obr-requis {
	color: #dc2626;
}

.obr-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	color: var( --obr-texte-doux );
	font-size: 0.9rem;
	cursor: pointer;
}

.obr-check input {
	margin-top: 3px;
	accent-color: var( --obr-accent-btn );
	flex: 0 0 auto;
}

.obr-check--rgpd {
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid var( --obr-bordure );
	border-radius: 10px;
	background: var( --obr-fond-doux );
}

.obr-fieldset {
	margin: 0 0 20px;
	padding: 16px;
	border: 1px solid var( --obr-bordure );
	border-radius: var( --obr-radius );
	background: var( --obr-fond-doux );
}

.obr-fieldset legend {
	padding: 0 8px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --obr-texte-doux );
}

/* Boutons ------------------------------------------------------------ */

.obr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.obr-btn:active {
	transform: translateY( 1px );
}

.obr-btn--principal {
	background: var( --obr-accent-btn );
	color: var( --obr-accent-btn-texte );
}

.obr-btn--principal:hover {
	opacity: 0.9;
	color: var( --obr-accent-btn-texte );
}

.obr-btn--ghost {
	background: transparent;
	border-color: var( --obr-bordure );
	color: var( --obr-texte );
}

.obr-btn--ghost:hover {
	background: var( --obr-fond-doux );
}

/*
 * Les thèmes imposent souvent une couleur de lien avec une spécificité
 * supérieure à celle de nos classes (ex. « .elementor-kit-10 a », 0-2-0),
 * ce qui rendait le texte des boutons-liens invisible sur son propre fond.
 * On remonte donc la spécificité (0-2-1) pour tous les états du lien.
 */
.obr-outil a.obr-btn--principal,
.obr-outil a.obr-btn--principal:link,
.obr-outil a.obr-btn--principal:visited,
.obr-outil a.obr-btn--principal:hover,
.obr-outil a.obr-btn--principal:focus,
.obr-outil a.obr-btn--principal:active {
	background: var( --obr-accent-btn );
	color: var( --obr-accent-btn-texte );
	text-decoration: none;
}

.obr-outil a.obr-btn--ghost,
.obr-outil a.obr-btn--ghost:link,
.obr-outil a.obr-btn--ghost:visited,
.obr-outil a.obr-btn--ghost:hover,
.obr-outil a.obr-btn--ghost:focus,
.obr-outil a.obr-btn--ghost:active {
	color: var( --obr-texte );
	text-decoration: none;
}

.obr-outil a.obr-btn--principal:hover {
	opacity: 0.9;
}

.obr-btn[disabled],
.obr-btn.est-occupe {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Calculateur de volume ---------------------------------------------- */

.obr-volume__pieces {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.obr-piece {
	border: 1px solid var( --obr-bordure );
	border-radius: var( --obr-radius );
	background: var( --obr-fond );
	overflow: hidden;
}

.obr-piece__titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	background: var( --obr-fond-doux );
}

.obr-piece__titre::-webkit-details-marker {
	display: none;
}

.obr-piece__titre::after {
	content: "＋";
	margin-left: auto;
	color: var( --obr-texte-doux );
	font-size: 1.1rem;
}

.obr-piece[open] .obr-piece__titre::after {
	content: "−";
}

.obr-piece__compteur {
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --obr-bordure );
	color: var( --obr-texte-doux );
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.obr-piece__compteur.est-actif {
	background: var( --obr-accent-btn );
	color: var( --obr-accent-btn-texte );
}

.obr-piece__liste {
	margin: 0;
	padding: 8px 16px 16px;
	list-style: none;
}

.obr-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var( --obr-bordure );
}

.obr-item:last-child {
	border-bottom: none;
}

.obr-item__label {
	display: flex;
	flex-direction: column;
	font-size: 0.95rem;
}

.obr-item__label small {
	color: var( --obr-texte-doux );
	font-size: 0.78rem;
}

.obr-stepper {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var( --obr-bordure );
	border-radius: 999px;
	overflow: hidden;
	background: var( --obr-fond );
}

.obr-stepper__btn {
	width: 38px;
	height: 38px;
	border: none;
	background: transparent;
	color: var( --obr-texte );
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.obr-stepper__btn:hover {
	background: var( --obr-fond-doux );
}

/*
 * Le compteur du calculateur (pastille blanche avec boutons +/-) suit un
 * habillage différent des champs de saisie classiques : on force son fond
 * et son texte pour qu'il ne récupère ni le fond lavande des champs
 * ci-dessus, ni celui imposé par le thème sur tous les <input>.
 */
.obr-outil .obr-stepper__input {
	width: 52px;
	padding: 8px 0;
	border: none;
	border-left: 1px solid var( --obr-bordure );
	border-right: 1px solid var( --obr-bordure );
	border-radius: 0;
	background: var( --obr-fond ) !important;
	color: var( --obr-texte ) !important;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.obr-outil .obr-stepper__input::-webkit-outer-spin-button,
.obr-outil .obr-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.obr-outil .obr-stepper__input.est-rempli {
	color: var( --obr-accent-texte ) !important;
	font-weight: 700;
}

/* Blocs de résultat --------------------------------------------------- */

.obr-volume__resultat,
.obr-tarif__resultat {
	padding: 22px;
	border: 1px solid var( --obr-bordure );
	border-radius: var( --obr-radius );
	background: var( --obr-fond-doux );
	box-shadow: var( --obr-ombre );
	text-align: center;
}

.obr-volume__resultat {
	position: sticky;
	bottom: 12px;
}

.obr-resultat__chiffre {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin-bottom: 6px;
}

.obr-resultat__valeur {
	color: var( --obr-accent-texte );
	font-size: clamp( 1.8rem, 1.2rem + 2.4vw, 2.8rem );
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.obr-resultat__unite,
.obr-resultat__separateur {
	color: var( --obr-texte-doux );
	font-size: 1.1rem;
	font-weight: 600;
}

.obr-resultat__legende {
	margin: 0 0 16px;
	color: var( --obr-texte-doux );
	font-size: 0.92rem;
}

.obr-resultat__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.obr-detail {
	max-width: 460px;
	margin: 18px auto;
	padding: 0;
	list-style: none;
	text-align: left;
}

.obr-detail li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px dashed var( --obr-bordure );
	color: var( --obr-texte-doux );
	font-size: 0.9rem;
}

.obr-detail li:last-child {
	border-bottom: none;
}

.obr-mention {
	max-width: 560px;
	margin: 0 auto 18px;
	color: var( --obr-texte-doux );
	font-size: 0.82rem;
	font-style: italic;
}

/* Formules ------------------------------------------------------------ */

.obr-formules {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 10px;
}

.obr-formule {
	display: block;
	position: relative;
	cursor: pointer;
}

.obr-formule input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.obr-formule__corps {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 14px;
	border: 1.5px solid var( --obr-bordure );
	border-radius: 10px;
	background: var( --obr-fond );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.obr-formule__corps small {
	color: var( --obr-texte-doux );
	font-size: 0.82rem;
}

.obr-formule input:checked + .obr-formule__corps {
	border-color: var( --obr-accent-texte );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --obr-accent ) 20%, transparent );
}

.obr-formule input:focus-visible + .obr-formule__corps {
	outline: 2px solid var( --obr-accent-texte );
	outline-offset: 2px;
}

/* Formulaire de devis -------------------------------------------------- */

.obr-etapes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.obr-etape {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 160px;
	padding: 10px 14px;
	border: 1px solid var( --obr-bordure );
	border-radius: 999px;
	color: var( --obr-texte-doux );
	font-size: 0.88rem;
	font-weight: 600;
}

.obr-etape span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --obr-bordure );
	color: var( --obr-texte-doux );
	font-size: 0.8rem;
}

.obr-etape.est-active {
	border-color: var( --obr-accent-texte );
	color: var( --obr-texte );
}

.obr-etape.est-active span {
	background: var( --obr-accent-btn );
	color: var( --obr-accent-btn-texte );
}

.obr-form__etape {
	display: none;
}

.obr-form__etape.est-active {
	display: block;
	animation: obr-apparition 0.25s ease;
}

@keyframes obr-apparition {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.obr-form__etape.est-active {
		animation: none;
	}
	.obr-btn:active {
		transform: none;
	}
}

.obr-form__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 20px;
}

.obr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.obr-message {
	margin: 16px 0 0;
	padding: 0;
	font-size: 0.92rem;
}

.obr-message--erreur {
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba( 220, 38, 38, 0.1 );
	color: #b91c1c;
}

.obr-message--info {
	color: var( --obr-texte-doux );
}

.obr-succes {
	padding: 28px 22px;
	border: 1px solid var( --obr-accent-texte );
	border-radius: var( --obr-radius );
	background: var( --obr-fond-doux );
	text-align: center;
}

.obr-succes p {
	margin: 0;
	color: var( --obr-texte );
	font-size: 1.05rem;
}

/* Mobile --------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.obr-item {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.obr-form__nav {
		justify-content: stretch;
	}

	.obr-form__nav .obr-btn {
		flex: 1 1 auto;
	}

	.obr-volume__resultat {
		position: static;
	}
}