/* formulaire-prix.css — dépôt d'un tarif par un visiteur.
 *
 * Une seule colonne, un champ par ligne, libellé au-dessus. C'est la
 * disposition qui se remplit le plus vite et la seule qui tienne sans
 * réaménagement sur un téléphone, d'où viennent la majorité des visites.
 *
 * Les cibles tactiles font au moins 44px de haut, les états d'erreur ne
 * reposent pas sur la seule couleur (bordure épaissie + texte), et le focus
 * reste visible partout : ces trois points sont ce qui distingue un formulaire
 * utilisable d'un formulaire abandonné.
 */

/* 820px, soit la largeur de la colonne de texte des autres pages : 1302px de
   conteneur, moins la colonne latérale de 365px et sa gouttière. Un formulaire
   pleine largeur donnerait des champs de 1300px, illisibles et disgracieux. */
.form-prix-page {
	max-width: 820px;
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
}

@media (min-width: 700px) {
	.form-prix-page {
		padding: 0;
	}
}

.form-prix-intro {
	margin: 0 0 1.75rem;
	padding: .9rem 1.1rem;
	border-left: 3px solid #61CD81;
	background: #F6F7FC;
	font-size: .92rem;
	line-height: 1.5;
}

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

.form-prix fieldset {
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.form-prix legend {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: #0A1339;
}

.form-prix .legend-note {
	font-weight: 400;
	font-size: .85rem;
	opacity: .6;
}

.champ {
	margin: 0 0 1.35rem;
}

.champ > label {
	display: block;
	margin: 0 0 .35rem;
	font-weight: 600;
	font-size: .95rem;
	color: #0A1339;
}

.champ abbr {
	color: #C0392B;
	text-decoration: none;
	border: 0;
}

/* Les flèches natives du champ nombre viennent se loger à droite, exactement
   où se trouve le symbole euro. Elles ne servent à rien sur un montant qui se
   saisit au clavier : on les retire plutôt que de déplacer l'unité. */
.form-prix input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.form-prix input[type="number"]::-webkit-outer-spin-button,
.form-prix input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.form-prix input[type="text"],
.form-prix input[type="number"],
.form-prix select {
	width: 100%;
	min-height: 48px;
	padding: .6rem .8rem;
	border: 1px solid #C7CAD3;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: #0A1339;
}

.form-prix select {
	/* Sans cela, Safari impose sa propre hauteur et casse l'alignement. */
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230A1339' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: 12px;
}

.form-prix input:focus-visible,
.form-prix select:focus-visible,
.form-prix button:focus-visible,
.form-prix a:focus-visible {
	outline: 3px solid #0A1339;
	outline-offset: 2px;
}

.aide {
	margin: .35rem 0 0;
	font-size: .82rem;
	line-height: 1.45;
	opacity: .7;
}

/* --- Erreurs ------------------------------------------------------------ */

.form-prix-erreurs {
	margin: 0 0 1.75rem;
	padding: 1rem 1.2rem;
	border: 2px solid #C0392B;
	border-radius: 6px;
	background: #FDF3F2;
}

.form-prix-erreurs h2 {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	color: #A5301F;
}

.form-prix-erreurs ul {
	margin: 0;
	padding-left: 1.1rem;
}

.form-prix-erreurs a {
	color: #A5301F;
}

/* La bordure épaissie double le signal : l'erreur ne repose jamais sur la seule
   couleur, invisible pour une partie des visiteurs. */
.champ-erreur input,
.champ-erreur select {
	border-color: #C0392B;
	border-width: 2px;
}

.erreur {
	margin: .35rem 0 0;
	font-size: .85rem;
	font-weight: 600;
	color: #A5301F;
}

/* --- Deux champs de front, au-delà du téléphone ------------------------- */

.champ-duo {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.champ-duo {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Prix : montant + période ------------------------------------------- */

.champ-prix {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: stretch;
}

.prix-montant {
	position: relative;
	flex: 1 1 9rem;
	display: flex;
	align-items: center;
}

.prix-montant span {
	position: absolute;
	right: .9rem;
	font-weight: 600;
	pointer-events: none;
}

.prix-montant input {
	padding-right: 2.2rem;
}

/* Bascule mois / an. Les boutons radio restent VISIBLES : la version précédente
   les masquait et coloriait toute la cellule en bleu foncé, si bien qu'on ne
   savait plus lequel des deux était choisi ni qu'il s'agissait d'un choix. Le
   fond reste blanc, le texte noir, et c'est la pastille qui porte la couleur. */
.prix-periode {
	display: flex;
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid #C7CAD3;
	border-radius: 6px;
	overflow: hidden;
}

.periode-choix {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 1rem;
}

.periode-choix + .periode-choix {
	border-left: 1px solid #C7CAD3;
}

.prix-periode input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0 .55em 0 0;
	accent-color: #61CD81;
	cursor: pointer;
}

.prix-periode label {
	margin: 0;
	color: #0A1339;
	font-size: .92rem;
	font-weight: 400;
	cursor: pointer;
}

/* Le choix retenu se signale aussi par la graisse : la couleur seule ne suffit
   pas à qui la distingue mal. */
.prix-periode input[type="radio"]:checked + label {
	font-weight: 700;
}

.prix-periode input[type="radio"]:focus-visible {
	outline: 3px solid #0A1339;
	outline-offset: 2px;
}

/* --- Cases à cocher ------------------------------------------------------ */

.cases {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cases li {
	position: relative;
	margin: 0 0 .5rem;
	padding: 0;
}

/* styles.css pose une puce ronde en position absolue sur tout li de
   .section-edito, avec une spécificité supérieure à « .cases li::before ».
   Il faut donc reprendre son préfixe pour la neutraliser. */
.section-edito .cases li::before,
.section-edito .cases li::after {
	content: none;
}

/* La case et son libellé forment un seul bloc cliquable : viser une case de
   16px au pouce est le premier motif d'abandon sur ce type de formulaire. */
.cases label {
	display: block;
	padding: .8rem 1rem .8rem 2.9rem;
	border: 1px solid #C7CAD3;
	border-radius: 6px;
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
}

/* « top » et « left » explicites : sans eux, une boîte en position absolue reste
   à sa position statique, que le moindre alignement hérité déplace. La case
   partait ainsi au milieu du cadre, par-dessus le texte d'aide. */
.cases input[type="checkbox"] {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: #61CD81;
}

.cases input:checked + label {
	border-color: #61CD81;
	background: rgba(97, 205, 129, .09);
}

.cases input:focus-visible + label {
	outline: 3px solid #0A1339;
	outline-offset: 2px;
}

/* Jamais de <span> ici : styles.css colore et souligne tout span qui n'est pas
   un bouton, ce qui transformait cette aide en faux lien vert par-dessus la
   case à cocher. Un <small> est neutre. */
small.case-aide {
	display: block;
	margin-top: .15rem;
	font-weight: 400;
	font-size: .82rem;
	color: inherit;
	text-decoration: none;
	opacity: .7;
}

.facultatif {
	font-weight: 400;
	font-size: .85rem;
	opacity: .6;
}

/* --- Envoi et confirmation ---------------------------------------------- */

.form-prix-envoi {
	margin: 2rem 0 0;
}

.form-prix-envoi .bouton {
	width: 100%;
	min-height: 52px;
	font-size: 1.02rem;
}

.form-prix-envoi .aide {
	text-align: center;
	margin-top: .6rem;
}

.form-prix-merci {
	margin: 0 0 2rem;
	padding: 1.3rem 1.5rem;
	border: 2px solid #61CD81;
	border-radius: 8px;
	background: rgba(97, 205, 129, .09);
}

.form-prix-merci h2 {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
}

.form-prix-merci p {
	margin: 0 0 .8rem;
}

.form-prix-merci p:last-child {
	margin-bottom: 0;
}

/* Le piège à robots doit rester dans le flux pour être rempli par un automate,
   tout en étant hors de vue et hors du parcours au clavier. display:none le
   ferait ignorer par une partie d'entre eux. */
.form-prix-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* --------------------------------------------------------------------------
 * Fil d'Ariane
 *
 * styles.css numérote tout ol de .section-edito et lui pose une pastille en
 * absolu : sans ces règles, le fil d'Ariane s'affiche « 1. Accueil 2. … »
 * à droite du titre. constructeur.css les porte déjà pour les pages marque,
 * mais il n'est pas chargé ici.
 * -------------------------------------------------------------------------- */

.section-cta-titre .container {
	flex-direction: column;
	gap: .5rem;
}

.section-cta-titre .fil-ariane ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35em;
	margin: 0;
	padding: 0;
	font-size: .85rem;
	counter-reset: none;
}

.section-cta-titre .fil-ariane li {
	position: static;
	margin: 0;
	padding: 0;
}

.section-cta-titre .fil-ariane li::before {
	content: "›";
	width: auto;
	height: auto;
	margin: 0 .35em 0 0;
	position: static;
	background: none;
	border-radius: 0;
	color: inherit;
	opacity: .55;
}

.section-cta-titre .fil-ariane li:first-child::before {
	content: none;
}

.section-cta-titre .fil-ariane [aria-current="page"] {
	opacity: .7;
}

/* --------------------------------------------------------------------------
 * Barre d'envoi collante
 *
 * Le formulaire dépasse la hauteur d'un écran de téléphone : sans cela, le
 * bouton n'est atteignable qu'au prix d'un défilement complet, et le visiteur
 * qui hésite ne voit jamais ce qu'il lui reste à faire.
 * -------------------------------------------------------------------------- */

.form-prix-envoi {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin: 2rem 0 0;
	padding: .9rem 1rem 1rem;
	background: rgba(255, 255, 255, .96);
	border-top: 1px solid #E9EAEE;
	box-shadow: 0 -4px 16px rgba(10, 19, 57, .07);
}

@supports (backdrop-filter: blur(6px)) {
	.form-prix-envoi {
		background: rgba(255, 255, 255, .82);
		backdrop-filter: blur(6px);
	}
}

/* Le bouton reste cliquable et atteignable au clavier : il n'est pas
   « disabled », il est signalé incomplet. Le clic conduit au champ manquant. */
.bouton-inactif {
	opacity: .55;
	filter: saturate(.4);
}

.form-prix-envoi [data-etat-envoi] {
	margin: .5rem 0 0;
	text-align: center;
}


/* --------------------------------------------------------------------------
 * Téléphone
 *
 * .container du site ne donne que 15px de marge et passe en flex : sans ces
 * règles, les champs touchent le bord de l'écran et la barre d'envoi collante
 * déborde de la colonne.
 * -------------------------------------------------------------------------- */

@media (max-width: 699px) {
	.form-prix-envoi {
		margin-left: -1rem;
		margin-right: -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.champ-prix {
		flex-direction: column;
	}

	.prix-periode label {
		flex: 1 1 0;
		justify-content: center;
	}

	.form-prix legend {
		font-size: 1.05rem;
	}
}