.contenu form {
	margin: 24px auto;
	max-width: 600px;

	background: #FFFFFF;
	border: 1px solid #E8EEF5;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
	padding: 20px;
}

.contenu form.form_grand {
	max-width: 800px;
}

.contenu form p {
	color: #64748B;
	margin: 0 0 16px;
}

.contenu form ol,
.contenu form ul,
.contenu form li {
	margin: 10px 0 10px 5px;
}

.contenu form fieldset {
	border: 1px solid #E8EEF5;
	padding: 10px;
}

.contenu form legend {
	padding: 0 10px;
	font-weight: 700;
	font-size: 1.05rem;
	color: #1E293B;
}

.form_de_connexion {
	display: flex;
	justify-content: space-between;
	align-items: center; /* Aligne les deux blocs l'un par rapport à l'autre */
}

.form_de_connexion form {
	flex: 0 0 48%; /* Ne grandit pas, ne rétrécit pas, base de 48% */
	/* Pas besoin de float */
}

.form_de_connexion .boutons_navigation {
	flex: 0 0 48%;
	display: flex;
	flex-direction: column;
	align-items: center; /* Centre les boutons à l'intérieur */
}

.ligne_formulaire {
	padding: 14px 0;
	margin-bottom: 0;
	display: flow-root;
}

.ligne_formulaire:last-child {
	border-bottom: 0;
}

.ligne_formulaire:hover {
	background-color: transparent;
}

.ligne_formulaire label {
	font-weight: 600;
	display: block;
	margin-bottom: 8px;
	color: #35556f;
}

.ligne_formulaire label,
.ligne_formulaire label ul li {
	color: #35556f;
}

input,
textarea,
select {
	width: 100%;
	background-color: #F8FBFF;
	border: 1px solid #D7E0EA;
	border-radius: 12px;
	box-shadow: none;
	font-size: 14px;
	padding: 12px 14px;
	color: #1E293B;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
	box-sizing: border-box;
}

input:hover,
textarea:hover,
select:hover {
	border-color: #b9c8d8;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: #2563EB;
	background-color: #fff;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

/* Style des options désactivées dans un select */
select option:disabled {
	color: #CCD1D8;
}

input {
	vertical-align: middle;
}

@media only screen and (max-width: 680px), only screen and (max-device-width: 680px) {
	input,
	textarea,
	select {
		width: 100%;
	}
}

input[type=radio],
input[type=checkbox] {
	width: 20px;
}

.bouton_envoi {
	background-color: color-mix(in srgb, var(--bleu-fgaac), #FFFFFF 30%);
	border: 0;
	color: #fff;
	font-weight: 700;
	height: auto;               /* Laisse la hauteur s'adapter */
	min-height: 48px;           /* Garde un aspect généreux au minimum */
	margin-top: 18px;
	width: auto;                /* Supprime les 250px fixes */
	display: inline-block;      /* Permet au bouton de coller au contenu */
	padding: 0 30px;            /* Ajoute de l'espace à gauche et à droite du texte */
	border-radius: 14px;
	box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	cursor: pointer;            /* Ajoute la main au survol (indispensable) */
}

.bouton_envoi:hover {
	border: 0;
	cursor: pointer;
	transform: translateY(-1px);
	box-shadow: 0 14px 26px rgba(37, 99, 235, 0.28);
	background-color: color-mix(in srgb, var(--bleu-fgaac), #FFFFFF 10%);
}

.bouton_envoi:active {
	transform: translateY(0);
}

.bouton_envoi:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 10px 20px rgba(37, 99, 235, 0.22);
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.bouton_envoi {
		width: 100%;
		max-width: 100%;
	}

	form input[type=submit] {
		max-width: 100%;
	}
}

input[type="radio"] + label span {
	border-radius: 999px;
}

.afficher_erreur_formulaire {
	border: 1px solid #fecaca;
	background: #fff1f2;
	color: #b91c1c;
	font-weight: 600;
	padding: 16px 18px;
	margin: 20px 0;
	border-radius: 12px;
}

/*************************************
Debut - Personnalisation des checkbox
*************************************/
label.container_checkbox iconify-icon {
	font-size: 150%;
}

label.container_checkbox {
	color: #000000;
	font-weight: normal;
}

.container_checkbox {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-top: 20px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left;
	width: 28%;
}

@media only screen and (max-width: 890px), only screen and (max-device-width: 890px) {
	.container_checkbox {
		width: 38%;
	}
}

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
	.container_checkbox {
		width: 90%;
	}
}

/* Hide the browser's default checkbox */
.container_checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #D6D6D6;
	border: solid 1px #C1C1C1;
	border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.container_checkbox:hover input ~ .checkmark {
	background-color: #C1C1C1;
}

/* When the checkbox is checked, add a blue background */
.container_checkbox input:checked ~ .checkmark {
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.container_checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.container_checkbox .checkmark:after {
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/***********************************
Fin - Personnalisation des checkbox
***********************************/

/***********************************
Début - Boutons radios
***********************************/
input[type="radio"] {
	opacity: 0;
	position: absolute;
}

input[type="radio"] + label {
	color: black;
	cursor: pointer;
}

input[type="radio"] + label span {
	padding: 0 8px;
	cursor: pointer;
	background-color: #FFFFFF;
	border: 1px solid #CAC7C7;
	float: left;
}

input[type="radio"]:checked + label span{
	background-color: #359884;
	border-color: #1D5D50;
	color: white;
}

.groupe_radio .texte_priorite {
	margin: 0 5px;
}

.groupe_radio {
	display: inline-flex;
	line-height: 30px;
}
/***********************************
Fin - Boutons radios
***********************************/

.afficher_erreur_formulaire {
	border: 1px solid;
	color: #FF0000;
	font-weight: bold;
	padding: 20px;
	margin: 20px 0;
}

.avec_select_date_trois_cases select {
	max-width: 110px;
}

.bouton_envoi_simu {
	margin: 30px auto 0 auto;
	text-align: center;
	display: flex;
	justify-content: center;
	font-size: 200%;
	padding: 10px 20px;
	border-radius: 10px;
	border: 1px solid #3A67B7;
}

.bouton_envoi_simu:hover {
	cursor: pointer;
}

/*************************************
Debut - Personnalisation des checkbox
*************************************/
	label.container_checkbox iconify-icon {
		font-size: 150%;
	}

	label.container_checkbox {
		color: #000000;
		font-weight: normal;
		/* width: 44%; */
	}

	.container_checkbox {
		display: block;
		position: relative;
		padding-left: 30px;
		margin-top: 20px;
		margin-bottom: 12px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		float: left;
		width: 99%;
	}

	@media only screen and (max-width: 890px), only screen and (max-device-width: 890px) {
		.container_checkbox {
			width: 38%;
		}
	}

	@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
		.container_checkbox {
			width: 90%;
		}
	}

	/* Hide the browser's default checkbox */
	.container_checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	/* Create a custom checkbox */
	.checkmark {
		position: absolute;
		top: 1px;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #D6D6D6;
		border: solid 1px #C1C1C1;
	}

	/* On mouse-over, add a grey background color */
	.container_checkbox:hover input ~ .checkmark {
		background-color: #C1C1C1;
	}

	/* When the checkbox is checked, add a blue background */
	.container_checkbox input:checked ~ .checkmark {
		background-color: #2196F3;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}

	/* Show the checkmark when checked */
	.container_checkbox input:checked ~ .checkmark:after {
		display: block;
	}

	/* Style the checkmark/indicator */
	.container_checkbox .checkmark:after {
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/*.container_checkbox:nth-child(even) {
		color: #959595;
	}*/

	/*******************************************
	Début - Personnalisation checkbox glissante
	*******************************************/
		:root {
			--switch-width: 50px;
			--switch-height: 26px;
			--switch-bg-off: #E2E8F0;      /* Gris doux moderne pour l'état désactivé */
			--switch-bg-on: #10B981;       /* Vert émeraude pro pour l'état activé */
			--thumb-size: 20px;
			--thumb-color: #FFFFFF;
		}

		/* Le conteneur principal */
		.checkbox_label {
			display: inline-block;
			width: var(--switch-width);
			height: var(--switch-height);
			position: relative;
			cursor: pointer;
		}

		/* On cache l'input visuellement mais on le garde accessible pour le clavier (Tab) */
		.checkbox_label input {
			opacity: 0;
			width: 0;
			height: 0;
		}

		/* La piste (le fond du switch) */
		.switch_slider {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background-color: var(--switch-bg-off);
			border-radius: calc(var(--switch-height) / 2);
			transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* La pastille blanche (le bouton qui glisse) */
		.switch_slider::after {
			content: "";
			position: absolute;
			height: var(--thumb-size);
			width: var(--thumb-size);
			left: 3px;
			bottom: 3px;
			background-color: var(--thumb-color);
			border-radius: 50%;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
			/* Une transition cubic-bezier donne un effet de glissement beaucoup plus dynamique */
			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* ---- ÉTATS ---- */

		/* Changement de couleur du fond quand coché */
		.checkbox_label input:checked + .switch_slider {
			background-color: var(--switch-bg-on);
		}

		/* Déplacement de la pastille via transform (plus performant que 'left') */
		.checkbox_label input:checked + .switch_slider::after {
			transform: translateX(calc(var(--switch-width) - var(--thumb-size) - 6px));
		}

		/* Focus pour l'accessibilité (quand on navigue au clavier) */
		.checkbox_label input:focus-visible + .switch_slider {
			outline: 2px solid #2563EB;
			outline-offset: 2px;
		}
	/*******************************************
	Fin - Personnalisation checkbox glissante
	*******************************************/
/***********************************
Fin - Personnalisation des checkbox
***********************************/

/*************************************
Debut - les permissions
*************************************/
	.permissions {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.permission_item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		padding: 12px 15px;
		border: 1px solid #DDDDDD;
		border-radius: 8px;
		background: #FAFAFA;
		gap: 15px;

		opacity: 0.5; /* Effet "grisé" quand c'est décoché */
		transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
	}

	/* Dès que la checkbox à l'intérieur est cochée, on repasse à 100% */
	.permission_item:has(input:checked) {
		opacity: 1;
		background: #FFFFFF; /* Optionnel : fond plus blanc pour faire ressortir l'item actif */
		border-color: #10B981; /* Optionnel : bordure verte assortie à votre switch */
	}

	.permission_text {
		flex: 1;
	}

	.permission_text h4 {
		margin: 0 0 5px;
		font-size: 15px;
	}

	.permission_text p {
		margin: 0;
		font-size: 13px;
		color: #666;
		line-height: 1.4;
	}

	@media screen and (max-width: 768px) {
		.permissions {
			grid-template-columns: 1fr;
		}
	}
/*************************************
**************************************
*************************************/

/*************************************
Debut - Champ obligatoire
*************************************/
	.champ_obligatoire input,
	.champ_obligatoire select,
	.champ_obligatoire textarea,
	.champ_obligatoire .cke,
	.champ_obligatoire .container_checkbox input ~ .checkmark,
	.permission_item.champ_obligatoire:has(input) {
		border: 2px solid #FF0000;
	}

	.champ_obligatoire label,
	.champ_obligatoire .permission_text h4,
	.champ_obligatoire .permission_text p {
		color: #FF0000;
	}
/*************************************
**************************************
*************************************/


/*******************************************************************************
  STYLE UNIQUE POUR LE SIMULATEUR PAR ÉTAPES (Isolé via .formulaire_simu)
********************************************************************************/
/* Cache par défaut tout sauf l'étape active */
.etape_formulaire { display: none; }
.etape_formulaire.active { display: block; }
.btn_suivant.masque, .bouton_envoi_simu.masque { display: none !important; }
.boutons_etape { margin-top: 15px; display: flex; gap: 10px; }

/* Force la dissimulation totale de toutes les étapes non-actives */
.formulaire_simu fieldset.etape_formulaire {
	display: none !important; 
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
	padding: 24px 30px;
	max-width: 650px;
	margin: 30px auto;
	box-sizing: border-box;
}

/* Affiche uniquement l'étape active */
.formulaire_simu fieldset.etape_formulaire.active {
	display: block !important;
	animation: apparitionDouce 0.3s ease-out forwards;
}

@keyframes apparitionDouce {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Correction des labels et champs internes */
.formulaire_simu .ligne_formulaire_salaire {
	padding: 10px 0;
}

.formulaire_simu .ligne_formulaire_salaire label {
	font-size: 1.05rem;
	font-weight: 600;
	color: #1E293B;
	margin-bottom: 12px;
}

/* Alignement parfait des dates sur une ligne horizontale */
.formulaire_simu .avec_select_date_trois_cases {
	display: flex !important;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.formulaire_simu .avec_select_date_trois_cases label {
	width: 100%;
}

.formulaire_simu .avec_select_date_trois_cases input,
.formulaire_simu .avec_select_date_trois_cases select {
	flex: 1;
	min-width: 80px;
	max-width: none !important;
}

/* Zone d'action des boutons */
.formulaire_simu .boutons_etape {
	margin-top: 25px;
	padding-top: 15px;
	border-top: 1px solid #F1F5F9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
}

/* Override global des boutons du simulateur */
.formulaire_simu .btn_suivant,
.formulaire_simu .btn_precedent,
.formulaire_simu .bouton_envoi_simu {
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 0 24px !important;
	border-radius: 10px !important;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 46px !important;
}

.formulaire_simu .btn_suivant,
.formulaire_simu .bouton_envoi_simu {
	background: #2179B4 !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 12px rgba(33, 121, 180, 0.2) !important;
	margin-left: auto !important;
}

.formulaire_simu .btn_suivant:hover,
.formulaire_simu .bouton_envoi_simu:hover {
	background: #1A6292 !important;
}

.formulaire_simu .btn_precedent {
	background: #F1F5F9 !important;
	color: #475569 !important;
	border: 1px solid #E2E8F0 !important;
}

.formulaire_simu .btn_precedent:hover {
	background: #E2E8F0 !important;
	color: #1E293B !important;
}

/* Dissimulation stricte des boutons invalides */
.formulaire_simu .masque {
	display: none !important;
}

@media screen and (max-width: 600px) {
	.formulaire_simu fieldset.etape_formulaire {
		padding: 20px;
		margin: 15px;
	}
	.formulaire_simu .boutons_etape {
		flex-direction: column-reverse;
	}
	.formulaire_simu .btn_suivant,
	.formulaire_simu .btn_precedent,
	.formulaire_simu .bouton_envoi_simu {
		width: 100% !important;
	}
}

/*************************************
Debut - les permissions
*************************************/
	/* Bloque le scroll de la page principale tant que le modal est là */
	.rgpd_adherents_overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(15, 23, 42, 0.85); /* Fond très sombre pour bien masquer le site */
		backdrop-filter: blur(8px); /* Floute le site en arrière-plan */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999; /* Priorité maximale absolue */
	}

	.rgpd_adherents_card {
		background: #FFFFFF;
		padding: 2.5rem;
		border-radius: 16px;
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
		width: 90%;
		max-width: 80%;
		padding: 10px;
		position: relative;
	}

	.rgpd_adherents_card h2 {
		margin-top: 0;
		color: var(--bleu-fgaac);
		font-size: 2rem;
		background: none;
		border-radius: 0;
		border-top: 0;
		border-left: 0;
		border-right: 0;
		box-shadow: none;
	}

	.rgpd_adherents_card h3 {
		color: var(--orange-fgaac);
		font-size: 1.6rem;
	}

	.rgpd_adherents_card p {
		color: #4b5563;
		font-size: 0.95rem;
		line-height: 1.5;
		margin-bottom: 2rem;
	}

	.rgpd_adherents_checkbox_group {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		text-align: left;
		margin-bottom: 2rem;
	}

	.rgpd_adherents_checkbox_group input {
		margin-top: 0.2rem;
		width: 18px;
		height: 18px;
		cursor: pointer;
	}

	.rgpd_adherents_checkbox_group label {
		font-size: 0.9rem;
		color: #374151;
		cursor: pointer;
		user-select: none;
	}

	/* Positionnement du bouton X en haut à droite */
	.rgpd_adherents_close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background: none;
		border: none;
		font-size: 1.75rem;
		font-weight: bold;
		color: #9CA3AF;
		cursor: pointer;
		transition: color 0.2s, transform 0.2s;
		line-height: 1;
	}

	.rgpd_adherents_close:hover {
		color: #EF4444;
		transform: scale(1.1);
	}
/*************************************
**************************************
*************************************/