/**
 * Simulateur de devis - Comptabilité Taxis
 *
 * Les couleurs et typographies reprennent les variables globales du kit
 * Elementor du site ; les valeurs de repli correspondent à la charte actuelle.
 */

.ctd-simulateur {
	/* Charte du site */
	--ctd-accent: var( --e-global-color-85dd5c9, #103e7d );
	--ctd-accent-fonce: var( --e-global-color-d535f71, #013a51 );
	--ctd-second: var( --e-global-color-2cdb540, #ffa500 );
	--ctd-bleu-clair: var( --e-global-color-dd8c5cb, #dff2fb );
	--ctd-texte: var( --e-global-color-6eac881, #2c2c2c );
	--ctd-gris: var( --e-global-color-text, #7a7a7a );
	--ctd-bord: var( --e-global-color-5d0cbab, #e4e4e4 );
	--ctd-bord-champ: #69727d;
	--ctd-fond: var( --e-global-color-066975f, #f6f4f2 );

	--ctd-police-titre: var( --e-global-typography-secondary-font-family, "Gabarito" ), sans-serif;
	--ctd-police-texte: var( --e-global-typography-text-font-family, "Open Sans" ), sans-serif;

	--ctd-rayon: 8px;
	--ctd-rayon-champ: 3px;
	--ctd-rayon-bouton: 5px;

	box-sizing: border-box;
	max-width: 980px;
	margin: 0 auto;
	color: var( --ctd-texte );
	font-family: var( --ctd-police-texte );
	font-size: 16px;
	line-height: 1.5;
}

.ctd-simulateur *,
.ctd-simulateur *::before,
.ctd-simulateur *::after {
	box-sizing: border-box;
}

/* --- En-tête --- */

.ctd-entete {
	margin-bottom: 24px;
	text-align: center;
}

.ctd-simulateur .ctd-titre {
	margin: 0 0 8px;
	font-family: var( --ctd-police-titre );
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	color: var( --ctd-accent );
}

.ctd-sous-titre {
	margin: 0;
	font-size: 16px;
	color: var( --ctd-gris );
}

/* --- Grille principale --- */

.ctd-grille {
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: 24px;
	align-items: start;
}

@media (max-width: 860px) {
	.ctd-grille {
		grid-template-columns: 1fr;
	}
}

.ctd-colonne-saisie {
	background: #fff;
	border: 1px solid var( --ctd-bord );
	border-radius: var( --ctd-rayon );
	padding: 24px;
}

/* --- Champs --- */

.ctd-champ {
	margin-bottom: 20px;
}

.ctd-champ:last-child {
	margin-bottom: 0;
}

.ctd-label {
	display: block;
	margin-bottom: 7px;
	font-family: var( --ctd-police-texte );
	font-size: 15px;
	font-weight: 600;
	color: var( --ctd-texte );
}

.ctd-requis {
	color: #d63638;
}

.ctd-aide {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var( --ctd-gris );
}

.ctd-select-wrap {
	position: relative;
}

.ctd-select-wrap::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var( --ctd-accent );
	border-bottom: 2px solid var( --ctd-accent );
	transform: rotate( 45deg );
	pointer-events: none;
}

.ctd-select,
.ctd-input {
	width: 100%;
	padding: 10px 16px;
	font-family: var( --ctd-police-texte );
	font-size: 16px;
	line-height: 1.5;
	color: var( --ctd-texte );
	background: #fff;
	border: 1px solid var( --ctd-bord-champ );
	border-radius: var( --ctd-rayon-champ );
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s, box-shadow .15s;
}

.ctd-select {
	padding-right: 40px;
	cursor: pointer;
}

.ctd-select:focus,
.ctd-input:focus,
.ctd-nombre:focus {
	outline: none;
	border-color: var( --ctd-accent );
	box-shadow: 0 0 0 3px rgba( 16, 62, 125, .12 );
}

.ctd-input::placeholder {
	color: var( --ctd-gris );
}

.ctd-input.ctd-erreur {
	border-color: #d63638;
	box-shadow: 0 0 0 3px rgba( 214, 54, 56, .1 );
}

textarea.ctd-input {
	resize: vertical;
	min-height: 80px;
}

/* --- Boutons oui / non --- */

.ctd-toggle-groupe {
	display: inline-flex;
	border: 1px solid var( --ctd-bord-champ );
	border-radius: var( --ctd-rayon-champ );
	overflow: hidden;
}

.ctd-toggle {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.ctd-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ctd-toggle span {
	display: block;
	padding: 10px 28px;
	font-size: 15px;
	font-weight: 500;
	color: var( --ctd-gris );
	background: #fff;
	transition: background .15s, color .15s;
}

.ctd-toggle + .ctd-toggle span {
	border-left: 1px solid var( --ctd-bord-champ );
}

.ctd-toggle input:checked + span {
	background: var( --ctd-accent );
	color: #fff;
}

.ctd-toggle input:focus-visible + span {
	box-shadow: inset 0 0 0 2px rgba( 16, 62, 125, .4 );
}

/* --- Compteur --- */

.ctd-compteur {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var( --ctd-bord-champ );
	border-radius: var( --ctd-rayon-champ );
	overflow: hidden;
}

.ctd-simulateur .ctd-compteur-btn,
.ctd-simulateur .ctd-compteur-btn:focus {
	width: 46px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	font-family: var( --ctd-police-texte );
	color: var( --ctd-accent );
	background: var( --ctd-fond );
	border: 0;
	cursor: pointer;
	transition: background .15s;
}

.ctd-simulateur .ctd-compteur-btn:hover {
	background: var( --ctd-bleu-clair );
}

.ctd-simulateur .ctd-compteur-btn:disabled {
	color: #adb5bd;
	cursor: not-allowed;
}

.ctd-nombre {
	width: 76px;
	padding: 10px 6px;
	font-family: var( --ctd-police-texte );
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: var( --ctd-texte );
	background: #fff;
	border: 0;
	border-left: 1px solid var( --ctd-bord-champ );
	border-right: 1px solid var( --ctd-bord-champ );
	appearance: textfield;
	-moz-appearance: textfield;
}

.ctd-nombre::-webkit-outer-spin-button,
.ctd-nombre::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Carte prix --- */

.ctd-colonne-resultat {
	position: sticky;
	top: 24px;
}

@media (max-width: 860px) {
	.ctd-colonne-resultat {
		position: static;
	}
}

.ctd-carte-prix {
	position: relative;
	padding: 26px 22px 22px;
	text-align: center;
	color: #fff;
	background: var( --ctd-accent );
	border-radius: var( --ctd-rayon );
}

.ctd-badge-promo {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var( --ctd-accent-fonce );
	background: var( --ctd-second );
	border-radius: 100px;
}

.ctd-prix-label {
	margin: 0 0 4px;
	font-size: 13px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .72 );
}

.ctd-prix {
	margin: 0;
	line-height: 1.1;
}

.ctd-prix-barre {
	display: block;
	margin-bottom: 2px;
	font-size: 17px;
	color: rgba( 255, 255, 255, .6 );
	text-decoration: line-through;
}

.ctd-prix-montant {
	display: block;
	font-family: var( --ctd-police-titre );
	font-size: 46px;
	font-weight: 400;
	letter-spacing: -.5px;
	transition: opacity .15s;
}

.ctd-prix-montant.ctd-maj {
	opacity: .35;
}

.ctd-prix-unite {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: rgba( 255, 255, 255, .78 );
}

.ctd-prix-ttc {
	margin: 8px 0 0;
	font-size: 14px;
	color: rgba( 255, 255, 255, .82 );
}

.ctd-detail {
	margin: 18px 0 0;
	padding: 16px 0 0;
	list-style: none;
	text-align: left;
	border-top: 1px solid rgba( 255, 255, 255, .2 );
}

.ctd-detail li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 9px;
	font-size: 14px;
	color: rgba( 255, 255, 255, .9 );
}

.ctd-detail li span:last-child {
	font-weight: 600;
	white-space: nowrap;
}

.ctd-detail li.ctd-detail-promo span {
	color: var( --ctd-second );
}

.ctd-annuel {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: rgba( 255, 255, 255, .78 );
}

.ctd-mention {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba( 255, 255, 255, .62 );
}

/* --- Boutons d'action ---
 * Sélecteurs doublés (.ctd-simulateur .x) : le kit Elementor stylise tous les
 * <button> du site avec une spécificité supérieure à une simple classe.
 */

.ctd-simulateur .ctd-cta,
.ctd-simulateur .ctd-cta:focus {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 13px 18px;
	font-family: var( --ctd-police-texte );
	font-size: 15px;
	font-weight: 500;
	color: var( --ctd-accent-fonce );
	background: var( --ctd-second );
	border: 2px solid var( --ctd-second );
	border-radius: var( --ctd-rayon-bouton );
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}

.ctd-simulateur .ctd-cta:hover {
	background: #fff;
	border-color: #fff;
	color: var( --ctd-accent );
}

.ctd-simulateur .ctd-cta:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.ctd-simulateur .ctd-cta:disabled:hover {
	background: var( --ctd-second );
	border-color: var( --ctd-second );
	color: var( --ctd-accent-fonce );
}

/* --- Étape coordonnées --- */

.ctd-coordonnees {
	margin-top: 24px;
	padding: 26px;
	background: #fff;
	border: 1px solid var( --ctd-bord );
	border-radius: var( --ctd-rayon );
}

.ctd-simulateur .ctd-coordonnees-titre {
	margin: 0 0 20px;
	font-family: var( --ctd-police-titre );
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	color: var( --ctd-accent );
}

.ctd-lignes {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0 18px;
}

.ctd-lignes > .ctd-champ {
	grid-column: 1 / -1;
}

.ctd-lignes > .ctd-moitie {
	grid-column: auto;
}

@media (max-width: 600px) {
	.ctd-lignes {
		grid-template-columns: 1fr;
	}

	.ctd-lignes > .ctd-moitie {
		grid-column: 1 / -1;
	}
}

.ctd-consentement {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --ctd-gris );
	cursor: pointer;
}

.ctd-consentement input {
	margin-top: 3px;
	flex: 0 0 auto;
	accent-color: var( --ctd-accent );
}

.ctd-consentement a {
	color: var( --ctd-accent );
	text-decoration: underline;
}

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

.ctd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-top: 20px;
}

.ctd-simulateur .ctd-cta-envoi,
.ctd-simulateur .ctd-cta-envoi:focus {
	width: auto;
	min-width: 230px;
	margin-top: 0;
	color: #fff;
	background: var( --ctd-accent );
	border-color: var( --ctd-accent );
}

.ctd-simulateur .ctd-cta-envoi:hover {
	background: #fff;
	border-color: var( --ctd-accent );
	color: var( --ctd-accent );
}

.ctd-simulateur .ctd-cta-envoi:disabled:hover {
	background: var( --ctd-accent );
	border-color: var( --ctd-accent );
	color: #fff;
}

.ctd-simulateur .ctd-lien-retour,
.ctd-simulateur .ctd-lien-retour:focus {
	padding: 0;
	font-family: var( --ctd-police-texte );
	font-size: 14px;
	color: var( --ctd-gris );
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.ctd-simulateur .ctd-lien-retour:hover {
	color: var( --ctd-accent );
}

.ctd-message {
	margin: 16px 0 0;
	padding: 12px 16px;
	font-size: 14.5px;
	border-radius: var( --ctd-rayon-champ );
	background: #fdecea;
	color: #a3262e;
}

.ctd-message.ctd-message-info {
	background: var( --ctd-bleu-clair );
	color: var( --ctd-accent );
}

/* --- Confirmation --- */

.ctd-succes {
	margin-top: 24px;
	padding: 36px 24px;
	text-align: center;
	background: var( --ctd-bleu-clair );
	border: 1px solid var( --ctd-bord );
	border-radius: var( --ctd-rayon );
}

.ctd-succes-icone {
	width: 58px;
	height: 58px;
	margin: 0 auto 18px;
	font-size: 28px;
	line-height: 58px;
	color: #fff;
	background: var( --ctd-accent );
	border-radius: 50%;
}

.ctd-simulateur .ctd-succes-titre {
	margin: 0 0 10px;
	font-family: var( --ctd-police-titre );
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	color: var( --ctd-accent );
}

.ctd-succes p {
	margin: 0;
	font-size: 15.5px;
	color: var( --ctd-texte );
}

/* Un display défini par le thème ne doit jamais réafficher un bloc masqué. */
.ctd-simulateur [hidden] {
	display: none !important;
}

/* --- Forfait : prestations incluses --- */

.ctd-forfait {
	margin: 16px 0 0;
	padding: 14px 0 0;
	text-align: left;
	border-top: 1px solid rgba( 255, 255, 255, .2 );
}

.ctd-simulateur .ctd-forfait-titre {
	margin: 0;
	font-family: var( --ctd-police-titre );
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
}

.ctd-simulateur .ctd-forfait-sous-titre {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba( 255, 255, 255, .7 );
}

.ctd-simulateur .ctd-forfait-liste {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ctd-simulateur .ctd-forfait-liste li {
	position: relative;
	margin: 0 0 5px;
	padding: 0 0 0 22px;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba( 255, 255, 255, .92 );
	list-style: none;
}

.ctd-simulateur .ctd-forfait-liste li::before {
	content: "\2713";
	position: absolute;
	left: 2px;
	top: 0;
	font-weight: 700;
	color: var( --ctd-second );
}

/* --- Remise mensuelle --- */

.ctd-prix-remise {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --ctd-second );
}

.ctd-note-remise {
	margin: 12px 2px 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --ctd-gris );
}

/* --- Aperçu dans l'éditeur Elementor --- */

.elementor-editor-active .ctd-colonne-resultat {
	position: static;
}