/******************************
Pour le tableau simu PSC
******************************/
	.table-container {
		width: 100%;
		margin: 30px auto;
		overflow-x: auto; /* Permet le défilement horizontal fluide sur mobile */
		background: #FFFFFF;
		border-radius: 8px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
		border: 1px solid #E2E8F0;
		-webkit-overflow-scrolling: touch; /* Défilement fluide iOS */
	}

	.tableau_simu_cotisations_sociales {
		width: 100%;
		border-collapse: collapse;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #334155;
		min-width: 750px;
	}

	.tableau_simu_cotisations_sociales th,
	.tableau_simu_cotisations_sociales td {
		padding: 12px 16px;
		border-bottom: 1px solid #E2E8F0;
		border-right: 1px solid #F1F5F9;
		text-align: center;
		vertical-align: middle;
	}

	.tableau_simu_cotisations_sociales th:first-child {
		text-align: left;
		font-weight: 600;
	}

	/* En-tête principal du tableau */
	.tableau_simu_cotisations_sociales tr:nth-child(2) th,
	.tableau_simu_cotisations_sociales tr:nth-child(3) th {
		background-color: #F8FAFC;
		color: #475569;
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-weight: 700;
	}

	/* Titres de catégories (Base socle, options, etc.) */
	.tableau_simu_titre_intermediaire {
		background-color: #ECF5FC !important;
		color: #1E3A8A !important; /* Bleu pro / corporate */
		font-size: 16px !important;
		font-weight: 700 !important;
		text-align: left !important;
		padding: 15px !important;
		border-left: 4px solid #2563EB;
	}

	/* Lignes de sous-titres */
	.tableau_simu_cotisations_sociales_details_ligne_titre th {
		text-align: left;
		background-color: #F1F5F9;
		color: #64748B;
		font-weight: 600;
		font-size: 13px;
	}

	/* Lignes de données (Détails) */
	.tableau_simu_cotisations_sociales_details {
		background-color: #FFFFFF;
	}

	.tableau_simu_cotisations_sociales_details:hover {
		background-color: #F8FAFC;
	}

	.montant-important {
		color: #16A34A;
		font-weight: 600;
	}

	/* Zones grisées */
	.tableau_simu_cotisations_sociales_gris {
		background-color: #F8FAFC;
		color: #94a3b8;
		font-style: italic;
		font-size: 13px;
	}

	/* Lignes de Totaux */
	.tableau_caa_result_simu_total {
		background-color: #F8FAFC;
	}

	.tableau_caa_result_simu_total th {
		color: #1E293B;
		font-weight: 700;
		font-size: 14px;
	}

	.tableau_caa_result_simu_total th:last-child,
	.tableau_caa_result_simu_total tr th:nth-child(4) {
		color: #1E3A8A;
		font-size: 15px;
	}

	@media (max-width: 768px) {
		.tableau_simu_cotisations_sociales {
			font-size: 13px;
		}

		.tableau_simu_cotisations_sociales th,
		.tableau_simu_cotisations_sociales td {
			padding: 10px 8px;
		}
	}
/******************************
*******************************
******************************/

/******************************
Pour le tableau lié a la page
de l'appli notation
******************************/
	.table_dl_notations {
		border-collapse: collapse;
		width: 100%;
		table-layout: fixed; /* clé importante */
	}

	.table_dl_notations td,
	.table_dl_notations th {
		border: 1px solid #B5B4B4;
		padding: 10px;
		text-align: center;
		vertical-align: middle;
	}

	.notation_version_0 {
		color: #FF0000;
		font-weight: bold;
	}
	.notation_version_1 {
		color: #0A9302;
	}
/******************************
*******************************
******************************/

/***********************************
Pour le tableau du simulateur de CAA
***********************************/
	/* --- Variables de design --- */
	:root {
		--primary-color: #2563EB;
		--primary-light: #EFF6FF;
		--text-main: #0F172A;
		--text-muted: #64748B;
		--bg-light: #F8FAFC;
		--border-color: #E2E8F0;
		--success-bg: #DCFCE7;
		--success-text: #166534;
		--radius: 12px;
	}

	.simu_section {
		background: #FFFFFF;
		border: 1px solid var(--border-color);
		border-radius: var(--radius);
		padding: 24px;
		margin-bottom: 24px;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	}

	.simu_section h3 {
		margin-top: 0;
		color: var(--text-main);
		font-size: 1.15rem;
		font-weight: 700;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
	}

	.simu_section h3::before {
		content: "";
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: var(--primary-color);
		border-radius: 4px;
		margin-right: 10px;
	}

	.simu_table_container {
		width: 100%;
		overflow-x: auto;
	}

	.simu_table_result {
		width: 100%;
		border-collapse: collapse;
		text-align: left;
		font-size: 0.9rem;
		white-space: nowrap;
	}

	.simu_table_result th, .simu_table_result td {
		padding: 12px 14px;
		border-bottom: 1px solid var(--border-color);
	}

	.simu_table_result thead th {
		background-color: var(--bg-light);
		color: var(--text-muted);
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		border-bottom: 2px solid var(--border-color);
	}

	.simu_table_result .simu_row_total.simu_text_bold td, 
	.simu_table_result .simu_row_total.simu_text_bold th {
		font-weight: 700;
		background-color: var(--bg-light);
		border-top: 2px solid var(--text-main);
	}

	.simu_table_result .simu_row_total.simu_text_muted td {
		background-color: var(--bg-light);
		color: var(--text-muted);
		font-size: 0.85rem;
	}

	.simu_row_average th, .simu_row_average td {
		background-color: var(--primary-light) !important;
		color: var(--primary-color);
		font-weight: 700;
	}
	.simu_highlight { font-size: 1.05rem; }
	.simu_cell_disabled { background-color: #F1F5F9 !important; }

	@media (min-width: 768px) {
		.simu_grid_container {
			display: grid;
			width: 100%;
			gap: 24px;
			box-sizing: border-box;
		}

		/* Force 3 colonnes strictement identiques en largeur */
		.simu_grid_3_columns {
			grid-template-columns: repeat(3, 1fr);
		}

		/* Force 2 colonnes strictement identiques en largeur (Échelon) */
		.simu_grid_2_columns {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Séparateurs verticaux entre les colonnes */
		.simu_grid_item {
			display: flex;
			flex-direction: column;
			border-right: 1px solid var(--border-color);
			padding-right: 20px;
		}

		.simu_grid_item:last-child {
			border-right: none;
			padding-right: 0;
		}
	}

	/* Éléments internes de la grille */
	.simu_grid_item {
		display: flex;
		flex-direction: column;
	}

	.simu_grid_label {
		font-size: 0.85rem;
		color: var(--text-muted);
		font-weight: 500;
		margin-bottom: 8px;
		min-height: 32px; /* Garde les valeurs alignées si un texte passe sur 2 lignes */
	}

	.simu_grid_value {
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--text-main);
	}

	.simu_date_badge, .simu_info_badge {
		display: inline-block;
		padding: 4px 8px;
		border-radius: 6px;
		font-size: 0.75rem;
		font-weight: 600;
		margin-top: 6px;
	}
	.simu_date_badge {
		background-color: var(--primary-light);
		color: var(--primary-color);
	}
	.simu_info_badge {
		background-color: var(--success-bg);
		color: var(--success-text);
	}

	@media (max-width: 767px) {
		.simu_grid_container {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}
		.simu_grid_item {
			border-right: none;
			padding-right: 0;
			border-bottom: 1px dashed var(--border-color);
			padding-bottom: 12px;
		}
		.simu_grid_item:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}
		.simu_grid_label {
			min-height: auto;
			margin-bottom: 4px;
		}
		.simu_date_badge, .simu_info_badge {
			display: block;
			text-align: center;
		}
	}

	.simu_text_bold { font-weight: 700; }
	.simu_text_muted { color: var(--text-muted); }
	.simu_text_center { text-align: center; }
/******************************
*******************************
******************************/

/***************************************
Pour le tableau du simulateur d'echelons
***************************************/
	.simu_echelon_container {
		width: 100%;
		font-family: system-ui, sans-serif;
		color: var(--text-main, #1e293b);
	}

	.simu_echelon_header, .simu_echelon_row {
		display: grid;
		grid-template-columns: 80px 1fr 150px 100px;
		align-items: center;
		padding: 12px 16px;
		border-bottom: 1px solid var(--border-color, #e2e8f0);
	}

	.simu_echelon_header {
		background-color: var(--bg-light, #f8fafc);
		color: var(--text-muted, #64748b);
		font-size: 0.75rem;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 0.05em;
		border-bottom: 2px solid var(--border-color, #e2e8f0);
	}

	.simu_badge_palier {
		font-weight: 700;
		color: var(--primary-color, #2563eb);
	}

	.simu_type_event { color: var(--text-muted, #64748b); font-size: 0.9rem; }
	.simu_texte_bold { font-weight: 700; }

	.simu_row_active {
		background-color: var(--success-bg, #f0fdf4);
		border-left: 4px solid var(--success-text, #16a34a);
	}

	.simu_row_active .simu_badge_palier, .simu_row_active .simu_type_event { color: var(--success-text, #16a34a); }

	.simu_row_nao {
		background-color: #F8FAFC;
	}

	.simu_nao_title { font-style: italic; color: #94A3B8; }
	.simu_italic_muted { font-style: italic; color: #94A3B8; }

	.container_presentation_options {
		display: flex;
		gap: 20px;
		margin-top: 15px;
		flex-wrap: wrap;
		font-family: Arial, sans-serif;
	}

	.bloc_categorie {
		flex: 1;
		min-width: 280px;
		background-color: #F8FAFC;
		border: 1px solid #E2E8F0;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	}

	.titre_categorie {
		font-weight: bold;
		font-size: 1.1em;
		margin-bottom: 12px;
		padding-bottom: 6px;
		color: #1E293B;
	}

	.categorie_responsable {
		border-top: 4px solid #0EA5E9;
	}

	.categorie_non_responsable {
		border-top: 4px solid #64748B;
	}

	.liste_options {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.carte_option {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: 1px solid #EDF2F7;
		border-radius: 6px;
		padding: 10px 12px;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.carte_option:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}

	.badge_option {
		background-color: #F1F5F9;
		color: #475569;
		font-size: 0.85em;
		font-weight: bold;
		padding: 4px 8px;
		border-radius: 4px;
		margin-right: 12px;
		white-space: nowrap;
		border: 1px solid #CBD5E1;
	}

	.categorie_responsable .badge_option {
		background-color: #E0F2FE;
		color: #0369A1;
		border-color: #BAE6FD;
	}

	.texte_option {
		font-size: 0.95em;
		color: #334155;
		line-height: 1.4;
	}

	@media (max-width: 767px) {
		.simu_echelon_header {
			display: none;
		}

		.simu_echelon_row {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 6px;
			background: #FFFFFF;
			border: 1px solid var(--border-color, #e2e8f0);
			border-radius: var(--radius, 8px);
			margin-bottom: 12px;
			padding: 16px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.05);
			position: relative;
		}

		.simu_echelon_row > div {
			text-align: left;
		}

		.simu_badge_palier {
			position: absolute;
			top: 16px;
			right: 16px;
			background: var(--primary-light, #EFF6FF);
			padding: 4px 10px;
			border-radius: 20px;
			font-size: 0.8rem;
		}

		.simu_italic_muted {
			display: none;
		}

		.simu_row_active .simu_badge_palier {
			background: #BBF7D0;
		}

		.simu_date_event::before {
			content: "Date : ";
			color: var(--text-muted, #64748B);
			font-size: 0.8rem;
			font-weight: normal;
		}

		.simu_taux_event {
			font-size: 1.2rem;
			color: var(--primary-color, #2563EB);
		}

		.simu_taux_event::before {
			content: "Taux : ";
			font-size: 0.85rem;
			font-weight: normal;
			color: var(--text-muted, #64748B);
		}
	}
/******************************
*******************************
******************************/

/**********************************
Pour le formulaire avec les boutons
**********************************/
	/* On cache toutes les étapes par défaut et on retire les bordures natives des fieldsets */
	.simu_step {
		display: none;
		border: none;
		padding: 0;
		margin: 0;
	}

	/* On affiche uniquement l'étape qui possède la classe .active */
	.simu_step.active {
		display: block; 
	}

	.simu_step_actions {
		display: flex;
		justify-content: space-between; /* Aligne le bouton Retour à gauche et Suivant à droite */
		gap: 1rem;
		margin-top: 2rem;
	}

	/* Si le bouton "Retour" est absent, on pousse le bouton "Suivant" à droite */
	.simu_step_actions .simu_btn_next:only-child,
	.simu_step_actions .simu_btn_submit:only-child {
		margin-left: auto;
	}

	.simu_form {
		max-width: 860px;
		margin: 0 auto;
		padding: 1rem;
		color: #0F172A;
	}

	.simu_field {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		margin-bottom: 1rem;
	}

	.simu_field label {
		font-weight: 600;
	}

	.simu_modern_input,
	.simu_modern_select {
		width: 100%;
		min-height: 48px;
		border: 1px solid #cbd5e1;
		border-radius: 14px;
		padding: .8rem .95rem;
		background: #FFF;
		color: #0F172A;
		transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
	}

	.simu_modern_input:focus,
	.simu_modern_select:focus {
		outline: none;
		border-color: #2563EB;
		box-shadow: 0 0 0 4px rgba(37,99,235,.12);
	}

	.simu_choice_grid {
		display:grid;
		grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
		gap:.8rem;
	}

	.simu_choice_grid.simu_compact {
		grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
	}

	.simu_choice_card {
		position: relative;
		display: block;
		cursor: pointer;
		text-align: center;
	}

	.simu_choice_card input {
		position: absolute;
		opacity: 0;
		inset: 0;
	}

	.simu_choice_content,
	.simu_toggle_ui {
		display: flex;
		flex-direction: column;
		gap: .2rem;
		min-height: 72px;
		justify-content: center;
		padding: 1rem 1rem;
		border: 1px solid #DBE2EA;
		border-radius: 16px;
		background: linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
		transition: all .2s ease;
	}

	.simu_choice_title {
		font-weight: 700;
		font-size: 1rem;
	}

	.simu_choice_sub {
		font-size: .92rem;
		color: #64748B;
	}

	.simu_choice_card input:checked + .simu_choice_content,
	.simu_toggle_card input:checked + .simu_toggle_ui {
		border-color: #2563EB;
		background: linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
		box-shadow: 0 0 0 4px rgba(37,99,235,.10);
	}

	.simu_choice_card:hover .simu_choice_content,
	.simu_toggle_card:hover .simu_toggle_ui {
		transform: translateY(-1px);
		border-color: #94A3B8;
	}

	.simu_choice_card input:focus-visible + .simu_choice_content,
	.simu_toggle_card input:focus-visible + .simu_toggle_ui,
	.simu_modern_input:focus-visible,
	.simu_modern_select:focus-visible {
		outline: 3px solid rgba(37,99,235,.25);
		outline-offset: 2px;
	}

	.simu_toggle_card {
		display: block;
		cursor: pointer;
		position: relative;
	}

	.simu_toggle_card input {
		position: absolute;
		opacity: 0;
	}

	.simu_date_grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0,1fr));
		gap: .8rem;
	}

	.simu_btn_prev,
	.simu_btn_next,
	.simu_btn_submit {
		min-height: 46px;
		padding: .75rem 1.1rem;
		border-radius: 14px;
		border: 1px solid transparent;
		font-weight: 700;
		cursor: pointer;
		transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
	}

	.simu_btn_prev {
		background: #F1F5F9;
		color: #475569;
		border: 1px solid #E2E8F0;
	}

	.simu_btn_next,
	.simu_btn_submit {
		background: #2179B4;
		color: #FFFFFF;
		box-shadow: 0 8px 18px rgba(37,99,235,.18);
	}

	.simu_btn_prev:hover {
		background: #E2E8F0;
		color: #1E293B;
	}

	.simu_btn_next:hover,
	.simu_btn_submit:hover {
		background: #1A6292;
	}

	.simu_btn_prev:hover,
	.simu_btn_next:hover,
	.simu_btn_submit:hover {
		transform: translateY(-1px);
	}

	.simu_is_hidden {
		display: none !important;
	}

	.simu_hint_fixed {
		margin-top: .5rem;
		color: #334155;
		font-size: .95rem;
	}

	@media (max-width: 720px) {
		.simu_choice_grid,
		.simu_choice_grid.simu_compact,
		.simu_date_grid {
			grid-template-columns: 1fr;
		}
	}
/******************************
*******************************
******************************/