/* =========================================================================
   ANSET — habillage des formulaires Fluent Forms
   Style repris du formulaire de résiliation existant :
   champs remplis sans bordure, labels bleu marine en Outfit, bouton plein.
   ========================================================================= */

.fluentform {
	--anset-bleu: #004c92;
	--anset-encre: #12375c;
	--anset-champ: rgba(0, 76, 146, 0.05);
	--anset-champ-actif: rgba(0, 76, 146, 0.09);
	--anset-rouge: #e30613;
	--anset-gris: #5a6b82;
	--anset-trait: #d8e1ec;
}

/* ---------- en-tête du formulaire ---------- */
.anset-form-tete {
	text-align: center;
	margin-bottom: 2rem;
}

.anset-form-titre {
	font-family: "Outfit", "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	color: var(--anset-bleu);
	line-height: 1.12;
	margin: 0 0 0.6rem;
}

.anset-form-chapeau {
	color: var(--anset-gris);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 54ch;
	margin: 0 auto;
}

/* ---------- titres de section ---------- */
.fluentform .anset-section {
	font-family: "Outfit", "Poppins", sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--anset-encre);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 2.2rem 0 0.2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--anset-trait);
}

.fluentform .anset-section .anset-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--anset-champ);
	color: var(--anset-bleu);
	font-size: 0.85rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.fluentform .anset-aide {
	color: var(--anset-gris);
	font-size: 0.92rem;
	margin: 0.2rem 0 1.3rem 2.3rem;
}

/* ---------- encarts ---------- */
.fluentform .anset-encart {
	background: var(--anset-champ);
	border-radius: 10px;
	padding: 0.9rem 1.1rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--anset-gris);
	margin: 1.2rem 0 0;
}

.fluentform .anset-encart strong {
	color: var(--anset-encre);
}

/* ---------- libellés ---------- */
.fluentform .ff-el-input--label label {
	font-family: "Outfit", "Poppins", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--anset-encre);
	line-height: 1.3;
	margin-bottom: 0.45rem;
}

.fluentform .ff-el-is-required.asterisk-right label:after {
	color: var(--anset-rouge);
	font-weight: 700;
}

.fluentform .ff-el-help-message {
	color: var(--anset-gris);
	font-size: 0.83rem;
	margin-top: 0.35rem;
	line-height: 1.45;
}

/* ---------- champs : remplis, sans bordure ---------- */
.fluentform .ff-el-form-control {
	background: var(--anset-champ);
	border: none;
	border-radius: 10px;
	padding: 0.82rem 1rem;
	color: var(--anset-encre);
	font-size: 16px;
	line-height: 1.5;
	box-shadow: none;
	transition: background 0.15s, box-shadow 0.15s;
	min-height: 48px;
}

.fluentform .ff-el-form-control:focus {
	background: var(--anset-champ-actif);
	box-shadow: 0 0 0 2px var(--anset-bleu);
	outline: none;
}

.fluentform textarea.ff-el-form-control {
	min-height: 130px;
	resize: vertical;
}

.fluentform .ff-el-form-control::placeholder {
	color: #9aa9bd;
}

/* ---------- choix : cartes cliquables ---------- */
.fluentform .ff-el-form-check {
	margin-bottom: 0.55rem;
}

.fluentform .ff-el-form-check label.ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--anset-champ);
	border: 1.5px solid transparent;
	border-radius: 10px;
	padding: 0.85rem 1rem;
	min-height: 48px;
	cursor: pointer;
	transition: 0.15s;
	color: var(--anset-encre);
	font-weight: 500;
	margin: 0;
}

.fluentform .ff-el-form-check label.ff-el-form-check-label:hover {
	border-color: var(--anset-bleu);
}

.fluentform .ff-el-form-check input:checked + label.ff-el-form-check-label,
.fluentform .ff-el-form-check label.ff-el-form-check-label:has(input:checked) {
	border-color: var(--anset-bleu);
	background: rgba(0, 76, 146, 0.12);
	color: var(--anset-bleu);
	font-weight: 600;
}

.fluentform .ff_list_inline .ff-el-form-check {
	display: block;
	margin-right: 0;
}

@media (min-width: 620px) {
	.fluentform .ff_list_inline .ff-el-form-check {
		display: inline-block;
		width: calc(33.333% - 0.4rem);
		margin-right: 0.5rem;
		vertical-align: top;
	}
	.fluentform .ff_list_inline .ff-el-form-check:nth-child(3n) {
		margin-right: 0;
	}
}

/* ---------- dépôt de fichiers ---------- */
.fluentform .ff-el-input--content .ff_upload_btn,
.fluentform .ff-upload-button {
	background: var(--anset-champ);
	border: 1.5px dashed #b7c6d9;
	border-radius: 10px;
	color: var(--anset-encre);
	font-weight: 600;
	padding: 1.1rem 1rem;
	width: 100%;
	min-height: 56px;
	transition: 0.15s;
	cursor: pointer;
}

.fluentform .ff-el-input--content .ff_upload_btn:hover,
.fluentform .ff-upload-button:hover {
	background: var(--anset-champ-actif);
	border-color: var(--anset-bleu);
	color: var(--anset-bleu);
}

.fluentform .ff-uploaded-list .ff-upload-preview {
	border-radius: 8px;
	border-color: var(--anset-trait);
}

/* ---------- bouton d envoi ---------- */
.fluentform .ff-btn-submit {
	background: var(--anset-bleu);
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 0.95rem 2.2rem;
	font-size: 1rem;
	font-weight: 600;
	min-height: 50px;
	cursor: pointer;
	transition: filter 0.15s;
}

.fluentform .ff-btn-submit:hover {
	filter: brightness(1.12);
}

.fluentform .ff-btn-submit:focus-visible {
	outline: 3px solid var(--anset-bleu);
	outline-offset: 3px;
}

/* ---------- messages ---------- */
.fluentform .ff-el-is-error .ff-el-form-control {
	box-shadow: 0 0 0 2px var(--anset-rouge);
}

.fluentform .error.text-danger {
	color: var(--anset-rouge);
	font-size: 0.85rem;
	margin-top: 0.3rem;
}

.ff-message-success {
	background: rgba(15, 123, 95, 0.08);
	border: 1px solid rgba(15, 123, 95, 0.3);
	border-radius: 10px;
	padding: 1.3rem 1.5rem;
	color: #0f7b5f;
	font-size: 1rem;
	line-height: 1.6;
}

/* ---------- espacements ---------- */
.fluentform .ff-el-group {
	margin-bottom: 1.35rem;
}

.fluentform .ff-t-container {
	gap: 1.2rem;
}

/* ---------- confort tactile ---------- */
@media (max-width: 620px) {
	.fluentform .ff-t-container {
		flex-direction: column;
		gap: 0;
	}
	.fluentform .ff-t-cell {
		width: 100% !important;
		flex: 0 0 100% !important;
		padding: 0 !important;
	}
	.fluentform .anset-aide {
		margin-left: 0;
	}
	.fluentform .ff-btn-submit {
		width: 100%;
	}
}

/* ---------- les choix occupent toute la largeur disponible ---------- */
.fluentform .ff_list_inline,
.fluentform .ff-el-input--content:has(> .ff-el-form-check) {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.fluentform .ff_list_inline,
	.fluentform .ff-el-input--content:has(> .ff-el-form-check) {
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	}
	.fluentform .ff_list_inline .ff-el-form-check {
		display: block;
		width: auto;
		margin-right: 0;
	}
}

.fluentform .ff-el-form-check {
	margin: 0;
}

.fluentform .ff-el-form-check label.ff-el-form-check-label {
	justify-content: flex-start;
	width: 100%;
}

/* l aide passe sous le champ, en clair */
.fluentform .ff-el-tooltip {
	display: none;
}

/* ---------- la zone de dépôt occupe toute la largeur ---------- */
.fluentform .ff_file_upload_holder {
	display: block;
	width: 100%;
}

.fluentform .ff_upload_btn.ff-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--anset-champ);
	border: 1.5px dashed #b7c6d9;
	border-radius: 10px;
	color: var(--anset-encre);
	font-weight: 600;
	padding: 1.15rem 1rem;
	min-height: 58px;
	transition: 0.15s;
	cursor: pointer;
}

.fluentform .ff_upload_btn.ff-btn:hover {
	background: var(--anset-champ-actif);
	border-color: var(--anset-bleu);
	color: var(--anset-bleu);
}

/* =========================================================================
   Choix de contrat : en ligne, avec pictogrammes
   Les icônes viennent de Font Awesome 5, déjà fourni par Elementor.
   ========================================================================= */
.fluentform .anset-choix-icones {
	display: grid;
	gap: 0.55rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
	.fluentform .anset-choix-icones {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fluentform .anset-choix-icones .ff-el-form-check {
	margin: 0;
}

.fluentform .anset-choix-icones label.ff-el-form-check-label {
	flex-direction: column;
	gap: 0.45rem;
	text-align: center;
	padding: 0.95rem 0.5rem;
	min-height: 88px;
	justify-content: center;
	font-size: 0.93rem;
}

/* le pictogramme, choisi selon la valeur de l option */
.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="Automobile"]) label:before,
.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="Habitation"]) label:before,
.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="2 roues"]) label:before,
.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="Autre"]) label:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1;
	display: block;
	color: var(--anset-bleu);
	opacity: 0.75;
	transition: opacity 0.15s;
}

.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="Automobile"]) label:before { content: "\f1b9"; }
.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="Habitation"]) label:before { content: "\f015"; }
.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="2 roues"]) label:before  { content: "\f21c"; }
.fluentform .anset-choix-icones .ff-el-form-check:has(input[value="Autre"]) label:before     { content: "\f059"; }

.fluentform .anset-choix-icones .ff-el-form-check:has(input:checked) label:before {
	opacity: 1;
}

/* le bouton radio lui-même n apporte rien ici : la carte fait office de choix */
.fluentform .anset-choix-icones input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fluentform .anset-choix-icones input[type="radio"]:focus-visible + label {
	outline: 3px solid var(--anset-bleu);
	outline-offset: 2px;
}

/* ---------- correction : la grille porte sur les options, pas sur le groupe ---------- */
.fluentform .ff-el-group.anset-choix-icones {
	display: block;
}

.fluentform .anset-choix-icones .ff-el-input--content {
	display: grid;
	gap: 0.55rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
	.fluentform .anset-choix-icones .ff-el-input--content {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* =========================================================================
   Immatriculation : mise en avant, à la manière d une plaque
   ========================================================================= */
.fluentform .anset-champ-immat {
	background: rgba(0, 76, 146, 0.04);
	border: 1px solid rgba(0, 76, 146, 0.14);
	border-radius: 12px;
	padding: 1.1rem 1.2rem;
	margin-bottom: 1.6rem;
}

.fluentform input.anset-immat {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	font-size: 1.15rem;
	text-align: center;
	max-width: 15rem;
	background: #fff;
	border: 2px solid var(--anset-bleu);
}

.fluentform input.anset-immat::placeholder {
	letter-spacing: 0.08em;
	font-weight: 400;
	color: #b7c6d9;
}

@media (max-width: 620px) {
	.fluentform input.anset-immat {
		max-width: none;
	}
}

/* =========================================================================
   Recherche du véhicule par l immatriculation
   ========================================================================= */
.anset-immat-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem 1rem;
	margin-top: 0.7rem;
}

.anset-immat-bouton {
	appearance: none;
	background: var(--anset-bleu, #004c92);
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 0.7rem 1.3rem;
	font-family: inherit;
	font-size: 0.94rem;
	font-weight: 600;
	min-height: 46px;
	cursor: pointer;
	transition: filter 0.15s;
	flex: none;
}

.anset-immat-bouton:hover:not(:disabled) {
	filter: brightness(1.12);
}

.anset-immat-bouton:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.anset-immat-bouton:focus-visible {
	outline: 3px solid var(--anset-bleu, #004c92);
	outline-offset: 3px;
}

.anset-immat-message {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	flex: 1 1 14rem;
}

.anset-immat-message--attente {
	color: #5a6b82;
}

.anset-immat-message--succes {
	color: #0f7b5f;
	font-weight: 500;
}

.anset-immat-message--erreur,
.anset-immat-message--attention {
	color: #a3401a;
}

/* le champ qui vient d être rempli s éclaire brièvement */
.fluentform .anset-rempli {
	animation: anset-eclat 1.5s ease;
}

@keyframes anset-eclat {
	0%   { background: rgba(15, 123, 95, 0.22); }
	100% { background: rgba(0, 76, 146, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
	.fluentform .anset-rempli {
		animation: none;
	}
}

@media (max-width: 620px) {
	.anset-immat-bouton {
		width: 100%;
	}
}

/* =========================================================================
   Formulaires longs : le bouton d envoi reste accessible
   Sur une page unique de plusieurs milliers de pixels, on ne doit jamais
   perdre de vue comment terminer.
   ========================================================================= */
.fluentform .ff-el-group.ff-text-left.ff_submit_btn_wrapper,
.fluentform .ff_submit_btn_wrapper {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background: #fff;
	border-top: 1px solid var(--anset-trait, #d8e1ec);
	margin: 2rem -1rem 0;
	padding: 1rem;
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 620px) {
	.fluentform .ff_submit_btn_wrapper {
		margin-inline: 0;
		padding-inline: 0;
	}
	.fluentform .ff_submit_btn_wrapper .ff-btn-submit {
		width: 100%;
	}
}

/* rappel des champs obligatoires, à côté du bouton */
.fluentform .ff_submit_btn_wrapper:before {
	content: "Les champs marqués d’une * sont obligatoires.";
	font-size: 0.82rem;
	color: var(--anset-gris, #5a6b82);
	margin-right: auto;
	align-self: center;
	line-height: 1.4;
}

@media (max-width: 620px) {
	.fluentform .ff_submit_btn_wrapper {
		flex-direction: column;
		gap: 0.7rem;
		align-items: stretch;
	}
	.fluentform .ff_submit_btn_wrapper:before {
		margin-right: 0;
	}
}