/**
 * Simulateur de budget Google Ads — anthony-magnin.com
 *
 * Reprend le système de design du site via les variables du thème
 * (--wp--preset--*), avec repli sur les valeurs de la palette pour que le rendu
 * tienne même si les styles globaux ne sont pas encore chargés.
 */

.amsa {
	--amsa-bleu: var( --wp--preset--color--custom-bleu, #3643bd );
	--amsa-orange: var( --wp--preset--color--custom-orange, #ff6c22 );
	--amsa-noir: var( --wp--preset--color--custom-noir, #000 );
	--amsa-blanc: var( --wp--preset--color--custom-blanc, #fff );
	--amsa-gris: var( --wp--preset--color--custom-gris, #f0eced );

	--amsa-police: var( --wp--preset--font-family--futura, Futura, "Futura PT", Avenir, sans-serif );
	--amsa-police-display: var( --wp--preset--font-family--hk-grotesk-wide, "HK Grotesk Wide" ), var( --wp--preset--font-family--futura, Futura ), sans-serif;
	--amsa-police-label: var( --wp--preset--font-family--terminal-grotesque, "Terminal Grotesque" ), var( --wp--preset--font-family--futura, Futura ), sans-serif;

	/* Dégradé repris à l'identique des boutons du site. */
	--amsa-degrade: linear-gradient( 135deg, #3535d0 0%, #ff5500 100% );

	/*
	 * Variante éclaircie, réservée au texte. Le dégradé des boutons fonctionne
	 * en aplat derrière du blanc, mais utilisé EN remplissage de texte sur fond
	 * sombre son bleu tombe à environ 2,5:1 de contraste. Ces deux teintes
	 * gardent le même mouvement bleu -> orange en restant au-dessus de 7:1.
	 */
	--amsa-degrade-texte: linear-gradient( 100deg, #96a2ff 0%, #ff8a4d 100% );

	/*
	 * Surfaces en verre SOMBRE, pas clair : le conteneur d'accueil est un
	 * dégradé qui passe du noir à l'orange. Un voile blanc translucide
	 * disparaîtrait côté orange. Un voile noir garantit un fond assez sombre
	 * pour du texte blanc sur toute la largeur, quel que soit l'arrière-plan.
	 */
	--amsa-surface: rgba( 0, 0, 0, 0.38 );
	--amsa-surface-haute: rgba( 0, 0, 0, 0.52 );
	--amsa-bordure: rgba( 255, 255, 255, 0.24 );
	--amsa-texte-doux: rgba( 255, 255, 255, 0.78 );
	--amsa-flou: saturate( 140% ) blur( 10px );

	--amsa-rayon: 20px;
	--amsa-rayon-pilule: 40px;

	font-family: var( --amsa-police );
	letter-spacing: -0.1px;
	color: var( --amsa-blanc );
	container-type: inline-size;
}

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

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

.amsa__kicker {
	font-family: var( --amsa-police-label );
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --amsa-orange );
	margin: 0 0 12px;
}

.amsa__titre {
	font-family: var( --amsa-police );
	font-size: clamp( 28px, 4vw, 44px );
	line-height: 1.125;
	letter-spacing: -0.1px;
	font-weight: 400;
	margin: 0 0 12px;
	color: var( --amsa-blanc );
}

.amsa__chapo {
	font-size: clamp( 16px, 1.6vw, 19px );
	line-height: 1.45;
	color: var( --amsa-texte-doux );
	max-width: 62ch;
	margin: 0 0 36px;
}

/* --------------------------------------------------------------- Formulaire */

.amsa__form {
	display: grid;
	grid-template-columns: minmax( 0, 2.2fr ) minmax( 0, 1fr ) auto;
	gap: 14px;
	align-items: end;
}

@container ( max-width: 720px ) {
	.amsa__form {
		grid-template-columns: 1fr;
	}
}

.amsa__champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.amsa__label {
	font-size: 13px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --amsa-texte-doux );
	font-family: var( --amsa-police-label );
}

.amsa__input,
.amsa__select {
	width: 100%;
	font-family: var( --amsa-police );
	font-size: 17px;
	letter-spacing: -0.1px;
	color: var( --amsa-blanc );
	background: var( --amsa-surface );
	backdrop-filter: var( --amsa-flou );
	-webkit-backdrop-filter: var( --amsa-flou );
	border: 1px solid var( --amsa-bordure );
	border-radius: 14px;
	padding: 15px 18px;
	transition: border-color 0.18s ease, background-color 0.18s ease;
	appearance: none;
}

.amsa__input::placeholder {
	color: rgba( 255, 255, 255, 0.34 );
}

.amsa__input:focus,
.amsa__select:focus {
	outline: none;
	border-color: var( --amsa-orange );
	background: var( --amsa-surface-haute );
}

.amsa__select {
	background-image: linear-gradient( 45deg, transparent 50%, rgba( 255, 255, 255, 0.6 ) 50% ), linear-gradient( 135deg, rgba( 255, 255, 255, 0.6 ) 50%, transparent 50% );
	background-position: calc( 100% - 20px ) calc( 50% + 2px ), calc( 100% - 14px ) calc( 50% + 2px );
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 42px;
	cursor: pointer;
}

.amsa__select option {
	background: var( --amsa-noir );
	color: var( --amsa-blanc );
}

/* ------------------------------------------------------------------ Bouton */

.amsa__bouton {
	font-family: var( --amsa-police );
	font-size: 17px;
	letter-spacing: -0.1px;
	font-weight: 400;
	color: var( --amsa-blanc );
	background: var( --amsa-degrade );
	border: 0;
	border-radius: var( --amsa-rayon-pilule );
	padding: 16px 36px;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.18s ease, filter 0.18s ease;
}

.amsa__bouton:hover:not( :disabled ) {
	filter: brightness( 1.12 );
	transform: translateY( -1px );
}

.amsa__bouton:disabled {
	opacity: 0.55;
	cursor: progress;
}

.amsa__bouton--fantome {
	background: transparent;
	border: 2px solid var( --amsa-blanc );
}

/* ------------------------------------------------------------------- États */

.amsa__etat {
	margin-top: 22px;
	font-size: 16px;
	color: var( --amsa-texte-doux );
	display: flex;
	align-items: center;
	gap: 10px;
}

.amsa__etat--erreur {
	color: var( --amsa-orange );
}

.amsa__spinner {
	width: 15px;
	height: 15px;
	border: 2px solid rgba( 255, 255, 255, 0.25 );
	border-top-color: var( --amsa-orange );
	border-radius: 50%;
	animation: amsa-tourne 0.7s linear infinite;
	flex: none;
}

@keyframes amsa-tourne {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.amsa__spinner {
		animation-duration: 2s;
	}
	.amsa__bouton:hover:not( :disabled ) {
		transform: none;
	}
	.amsa__resultat {
		animation: none;
	}
}

/* --------------------------------------------------------------- Résultat */

.amsa__resultat {
	margin-top: 40px;
	animation: amsa-apparait 0.35s ease both;
}

@keyframes amsa-apparait {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
}

.amsa__resultat[hidden] {
	display: none;
}

/*
 * Le chiffre clé est rempli par le dégradé de la marque. Posé directement sur
 * le conteneur en dégradé, il deviendrait illisible : on lui donne donc son
 * propre fond sombre, qui rétablit le contraste et laisse la signature visuelle.
 */
.amsa__budget {
	background: var( --amsa-surface-haute );
	backdrop-filter: var( --amsa-flou );
	-webkit-backdrop-filter: var( --amsa-flou );
	border: 1px solid var( --amsa-bordure );
	border-radius: var( --amsa-rayon );
	padding: 30px 32px 34px;
}

.amsa__budget-label {
	font-family: var( --amsa-police-label );
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --amsa-texte-doux );
	margin: 0 0 10px;
}

/* Le chiffre clé reprend le display et le dégradé du hero du site. */
.amsa__budget-chiffre {
	font-family: var( --amsa-police-display );
	font-size: clamp( 46px, 9vw, 92px );
	line-height: 1.05;
	letter-spacing: -0.1px;
	margin: 0;
	background: var( --amsa-degrade-texte );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Si background-clip:text n'est pas gérée, le texte doit rester visible. */
@supports not ( ( -webkit-background-clip: text ) or ( background-clip: text ) ) {
	.amsa__budget-chiffre {
		background: none;
		color: var( --amsa-blanc );
	}
}

.amsa__budget-precision {
	font-size: 17px;
	color: var( --amsa-texte-doux );
	margin: 10px 0 0;
}

/* ------------------------------------------------------------- Scénarios */

.amsa__scenarios {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 12px;
	margin-top: 30px;
}

@container ( max-width: 620px ) {
	.amsa__scenarios {
		grid-template-columns: 1fr;
	}
}

.amsa__scenario {
	background: var( --amsa-surface );
	backdrop-filter: var( --amsa-flou );
	-webkit-backdrop-filter: var( --amsa-flou );
	border: 1px solid var( --amsa-bordure );
	border-radius: var( --amsa-rayon );
	padding: 20px;
}

.amsa__scenario--central {
	background: var( --amsa-surface-haute );
	border-color: rgba( 255, 108, 34, 0.55 );
}

.amsa__scenario-nom {
	font-family: var( --amsa-police-label );
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var( --amsa-texte-doux );
	margin: 0 0 8px;
}

.amsa__scenario--central .amsa__scenario-nom {
	color: var( --amsa-orange );
}

.amsa__scenario-montant {
	font-size: 27px;
	line-height: 1.15;
	margin: 0 0 6px;
}

.amsa__scenario-detail {
	font-size: 14px;
	color: var( --amsa-texte-doux );
	margin: 0;
	line-height: 1.5;
}

/* ---------------------------------------------------------------- Plafond */

.amsa__plafond {
	margin-top: 26px;
	border-radius: var( --amsa-rayon );
	padding: 22px 24px;
	background: var( --amsa-surface );
	backdrop-filter: var( --amsa-flou );
	-webkit-backdrop-filter: var( --amsa-flou );
	border: 1px solid var( --amsa-bordure );
	border-left: 3px solid rgba( 255, 255, 255, 0.4 );
}

.amsa__plafond--alerte {
	background: rgba( 255, 108, 34, 0.1 );
	border-color: rgba( 255, 108, 34, 0.4 );
	border-left-color: var( --amsa-orange );
}

.amsa__plafond-titre {
	font-size: 18px;
	margin: 0 0 8px;
	line-height: 1.3;
}

.amsa__plafond-texte {
	font-size: 16px;
	line-height: 1.5;
	color: var( --amsa-texte-doux );
	margin: 0;
}

.amsa__plafond-texte strong {
	color: var( --amsa-blanc );
	font-weight: 400;
}

/* ------------------------------------------------------- Détail du calcul */

.amsa__detail {
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 1px;
	background: var( --amsa-bordure );
	border: 1px solid var( --amsa-bordure );
	border-radius: var( --amsa-rayon );
	overflow: hidden;
}

.amsa__donnee {
	/* Translucide comme les autres surfaces : un noir opaque tranchait sur le
	   dégradé. L'écart de 1px de la grille fait office de filet de séparation. */
	background: var( --amsa-surface-haute );
	backdrop-filter: var( --amsa-flou );
	-webkit-backdrop-filter: var( --amsa-flou );
	padding: 18px 20px;
}

.amsa__donnee-label {
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --amsa-texte-doux );
	font-family: var( --amsa-police-label );
	margin: 0 0 6px;
}

.amsa__donnee-valeur {
	font-size: 21px;
	margin: 0;
	line-height: 1.2;
}

/* ------------------------------------------------------------- Réglages */

.amsa__reglages {
	margin-top: 26px;
	border: 1px solid var( --amsa-bordure );
	background: var( --amsa-surface );
	backdrop-filter: var( --amsa-flou );
	-webkit-backdrop-filter: var( --amsa-flou );
	border-radius: var( --amsa-rayon );
	overflow: hidden;
}

.amsa__reglages summary {
	padding: 18px 22px;
	cursor: pointer;
	font-size: 16px;
	color: var( --amsa-blanc );
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	transition: background-color 0.18s ease;
}

.amsa__reglages summary:hover {
	background: var( --amsa-surface );
}

.amsa__reglages summary::-webkit-details-marker {
	display: none;
}

.amsa__reglages summary::after {
	content: "+";
	font-size: 22px;
	line-height: 1;
	color: var( --amsa-orange );
	flex: none;
}

.amsa__reglages[open] summary::after {
	content: "–";
}

.amsa__reglages-grille {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 16px;
	padding: 4px 22px 24px;
}

/* ------------------------------------------------------------------- CTA */

.amsa__cta {
	margin-top: 34px;
	padding: 28px;
	border-radius: var( --amsa-rayon );
	background: var( --amsa-surface-haute );
	backdrop-filter: var( --amsa-flou );
	-webkit-backdrop-filter: var( --amsa-flou );
	border: 1px solid var( --amsa-bordure );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.amsa__cta-texte {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
	max-width: 46ch;
}

.amsa__cta-texte span {
	display: block;
	color: var( --amsa-texte-doux );
	font-size: 16px;
	margin-top: 6px;
}

.amsa__cta .amsa__bouton {
	text-decoration: none;
	display: inline-block;
}

/* -------------------------------------------------------------- Provenance */

.amsa__source {
	margin-top: 28px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.42 );
}

.amsa__source a {
	color: rgba( 255, 255, 255, 0.62 );
	text-decoration: underline;
}

.amsa__source a:hover {
	color: var( --amsa-orange );
}