.montant_negatif {
	color: #FF0000 !important;
}

.montant_positif {
	color: #008922;
}

.tableau_des_operations,
.tableau_des_tiers,
.tableau_des_recurrences,
.tableau_de_recherche {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #F9F9F9;
}

.tableau_des_operations tr,
.tableau_des_tiers tr,
.tableau_des_recurrences tr,
.tableau_de_recherche tr {
	border-top: 1px solid #F2F2F2;
	border-bottom: 1px solid #F2F2F2;
}

.tableau_des_tiers th {
	text-align: left;
}

.tableau_des_operations td,
.tableau_des_operations th,
.tableau_des_tiers .col_tiers,
.tableau_des_tiers .col_solde_pointe,
.tableau_des_tiers .col_type {
	text-align: right;
}

.col_actions {
	text-align: right !important;
}

.tableau_des_operations td,
.tableau_des_operations th,
.tableau_des_tiers td,
.tableau_des_tiers th,
.tableau_des_recurrences td,
.tableau_des_recurrences th,
.tableau_de_recherche td,
.tableau_de_recherche th {
	padding: 10px 7px;
}

.tableau_des_operations .col_date,
.tableau_des_operations .col_rapproche,
.tableau_de_recherche .col_rapproche,
.tableau_des_operations .col_pointage {
	text-align: center;
}

.tableau_des_operations td.col_date,
.tableau_de_recherche td.col_date,
.tableau_des_tiers td.col_date {
	color: #9D3434;
}

.tableau_des_operations .col_tiers iconify-icon,
.tableau_des_operations .col_solde_pointe iconify-icon {
	font-size: 200%;
}

.tableau_des_tiers .col_date,
.tableau_de_recherche .col_date,
.tableau_des_operations .col_date,
.tableau_des_operations .col_debit,
.tableau_des_tiers .col_debit,
.tableau_de_recherche .col_debit,
.tableau_des_operations .col_credit,
.tableau_des_operations .col_solde,
.tableau_des_operations .col_actions,
.tableau_des_tiers .col_total,
.tableau_des_tiers .col_type,
.tableau_des_tiers .col_actions {
	width: 7%;
}

.tableau_des_operations .col_rapproche,
.tableau_de_recherche .col_rapproche,
.tableau_des_operations .col_pointage {
	width: 3%;
}

.tableau_des_operations .col_rapproche,
.tableau_des_tiers .col_rapprochement,
.tableau_de_recherche .col_rapproche,
.tableau_des_operations .col_pointage {
	color: #A8A8A8;
}

.tableau_des_operations td.col_pointage .container_checkbox {
	margin-top: -10px;
}

.tableau_des_operations .col_tiers {
	text-align: left;
}

.tableau_des_operations .col_solde_pointe {
	text-align: center;
}

.tableau_des_operations tr.alterna_tr,
.tableau_des_tiers tr.alterna_tr {
	background-color: #FFFFFF;
}

.tableau_des_tiers tr.alterna_total {
	background-color: #B6F2FC;
	font-weight: bold;
	border: 1px solid red;
}

.tableau_des_tiers tr.alterna_colonne {
	border-left: 1px solid red;
	border-right: 1px solid red;
}

.tableau_des_tiers tr.alterna_colonne td.col_actions {
  color: #A8A8A8;
}

.tableau_des_operations .tableau_le_solde,
.tableau_des_operations tr:last-child {
	background-color: #E5EEF9;
	color: #0049D6;
}

.tableau_des_operations td.rubrique_dans_tableau,
.tableau_des_tiers td.rubrique_dans_tableau,
.tableau_des_recurrences td.rubrique_dans_tableau {
	position: -webkit-sticky; /* Support Safari iOS */
	position: sticky;
	top: -1px; /* On le décale d'un pixel pour forcer l'intersection */
	z-index: 10; /* S'assure que la date passe au-dessus du reste du contenu */
	text-align: left;
	background-color: #D3E0F3;
	color: #000000;
	transition: all 0.3s ease; /* C'est ici que l'animation se joue */
}

.tableau_des_operations .tableau_le_solde,
.tableau_des_operations tr:last-child,
.tableau_des_operations td.rubrique_dans_tableau,
.tableau_des_tiers td.rubrique_dans_tableau,
.tableau_des_recurrences td.rubrique_dans_tableau {
	font-weight: bold;
	border-top: 1px solid #B9C5D5;
	border-bottom: 1px solid #B9C5D5;
}

.tableau_des_operations th,
.tableau_des_tiers th,
.tableau_des_recurrences th,
.tableau_de_recherche th {
	background-color: #164194;
}

.tableau_des_operations td,
.tableau_de_recherche td,
.tableau_des_recurrences td,
.tableau_des_operations th,
.tableau_de_recherche th,
.tableau_des_recurrences th {
	text-align: left;
}

.tableau_des_operations th,
.tableau_des_tiers th,
.tableau_de_recherche th,
.tableau_des_recurrences th,
.tableau_des_operations th a,
.tableau_des_tiers th a,
.tableau_des_recurrences th a,
.tableau_de_recherche th a {
	color: #FFFFFF;
}

.tableau_des_operations td.col_compte_concerne {
	font-style: italic;
	color: #930075;
	min-width: 95px;
	font-size: 85%;
}

.texte_notes,
.texte_recurrences {
	opacity: 0.5;
	font-size: 80%;
	margin: 5px 0;
}

.texte_notes {
	font-style: italic;
}

.texte_recurrences {
	color: #0072D7;
	text-align: right;
	padding-right: 20px;
}

.liste_dernieres_occurences {
	color: #007CFF;
	font-style: italic;
}

@media (max-width: 768px) {
	.tableau_des_operations {
		width: 100%;
		display: table;
	}

	.tableau_des_tiers .col_type {
		display: none;
	}

	.tableau_des_operations .col_date {
		width: 50px;
		padding: 0;
	}

	.tableau_des_operations td.rubrique_dans_tableau {
		font-size: 80%;
		padding: 4px;
	}

	.texte_notes,
	.texte_recurrences {
		font-size: 60%;
	}
}

/* Style pour le bouton ouvrir popup */
.openPopupBtn {
	padding: 10px 20px;
	color: #FFFFFF;
	border: 1px solid;
	cursor: pointer;
	margin-right: 10px;
}

.openPopupBtn iconify-icon {
	font-size: 200%;
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.openPopupBtn .none_smartphone {
		display: none;
	}
}

.equilibrage {
	background-color: #1C82D7;
}

#validationSuiviPointage {
	background-color: #058805;
}

.ajout_operation,
.ajout_recurrence {
	background-color: #0C426F;
}

/* Le conteneur du popup */
.popup {
	display: none;
	position: fixed;
	z-index: 20;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
}

/* Contenu du popup */
.popup-content {
	background-color: white;
	margin: 20px auto;
	padding: 20px;
	border: 1px solid #888888;
	width: 80%;
	max-width: 600px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	border-radius: 10px;
}

@media only screen and (max-width: 680px), only screen and (max-device-width: 680px) {
	.popup-content {
		padding: 0;
		width: 100%;
	}
}

/* Le bouton fermer */
.close {
	color: #AAAAAA;
	float: right;
	font-size: 28px;
	font-weight: bold;
	margin: -20px -15px;
}

@media only screen and (max-width: 680px), only screen and (max-device-width: 680px) {
	.close {
		margin: 10px 5px 0 0;
	}
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.les_actions {
	display: inline-flex;
	position: fixed;
	bottom: 10px;
	left: 10px;
	z-index: 10;
}

tr.tableau_ope_r {
	font-style: italic;
	box-shadow: inset 0 0 15px #FF37372B;
}

.selected-row {
	background-color: #E5E5E5 !important;
	box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
}

.total_periode {
	background-color: #D3E0F3;
	font-weight: bold;
}

.total_periode td:first-child {
	text-align: right;
	padding-right: 20px;
}

@media (max-width: 768px) {
	/* Éléments à masquer */
	.tableau_des_operations tr:first-child,
	.tableau_des_recurrences tr:first-child,
	.tableau_des_operations tr.selectable-row .col_date,
	.tableau_des_recurrences tr.selectable-row .col_date,
	.tableau_des_tiers .col_type,
	.texte_notes, 
	.texte_recurrences {
		display: none;
	}

	/* La ligne de tableau devient un conteneur Flex */
	.tableau_des_operations tr.selectable-row,
	.tableau_des_recurrences tr.selectable-row,
	.tableau_des_operations .col_tiers,
	.tableau_des_recurrences .col_tiers,
	.tableau_des_operations .col_solde_pointe,
	.tableau_des_operations tr td.rubrique_dans_tableau,
	.tableau_des_recurrences tr td.rubrique_dans_tableau {
		font-size: 120%;
	}

	/* La ligne de tableau devient un conteneur Flex */
	.tableau_des_operations tr.selectable-row,
	.tableau_des_recurrences tr.selectable-row {
		display: flex;
		flex-wrap: wrap; /* Permet aux actions de passer dessous si besoin */
		padding: 10px;
		position: relative;
	}

	/* Nom du Tiers (Colonne de gauche) */
	.tableau_des_operations tr.selectable-row .col_tiers,
	.tableau_des__recurrences tr.selectable-row .col_tiers {
		padding: 0;
		margin-right: 117px; /* Evite que le texte ne chevauche les montants à droite */
	}

	/* Montants & Solde (Positionnés à droite) */
	.tableau_des_operations td.montant_negatif,
	.tableau_des_recurrences td.montant_negatif,
	.tableau_des_operations td.montant_positif,
	.tableau_des_recurrences td.montant_positif,
	.tableau_des_operations tr.selectable-row td.col_solde {
		position: absolute;
		right: 15px;
		width: auto;
		padding: 0;
	}

	/* Solde de la ligne (petit et en dessous du montant) */
	.tableau_des_operations tr.selectable-row td.col_solde {
		top: 65px; 
		font-size: 60%;
		opacity: 0.5;
		color: #888888;
		font-style: italic;
	}

	/* Style du crédit positif */
	.tableau_des_operations td.montant_positif:not(:empty),
	.tableau_des_recurrences td.montant_positif:not(:empty) {
		background-color: #DDEDFF;
		padding: 3px 6px !important;
		margin-right: -3px;
		border-radius: 6px;
	}

	/* Bloc Actions (Icones) */
	.tableau_des_operations tr.selectable-row td.col_actions,
	.tableau_des_recurrences tr.selectable-row td.col_actions {
		width: 100%; /* Prend toute la largeur pour s'aligner proprement */
		margin: 8px 0 -8px 0; /* Espace pour ne pas coller au texte du dessus */
		font-size: 110%;
	}

	/* Rubriques (Dates) et Solde Global */
	.tableau_des_operations tr td.rubrique_dans_tableau,
	.tableau_des_recurrences tr td.rubrique_dans_tableau {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 8px 15px;
		background-color: #D3E0F3;
	}

	.tableau_des_operations tr.tableau_le_solde {
		display: flex;
		flex-direction: column;
	}

	/* On cible la ligne (TR) qui contient la rubrique */
	.tableau_des_operations tr:has(.rubrique_dans_tableau),
	.tableau_des_recurrences tr:has(.rubrique_dans_tableau) {
		display: table-row; /* Annule le display: flex de la media query */
	}

	/* On cible la cellule qui contient le montant (+3 370,16 €) */
	.tableau_des_operations tr.tableau_le_solde td.col_debit {
		width: 100%;
		margin-top: 5px;
		margin-left: -15px;
	}

	/* On cache les cellules vides inutiles sur cette ligne en mobile */
	.tableau_des_recurrences tr.tableau_le_solde td:last-child {
		display: none;
	}

	.tableau_des_operations tr.selectable-row td.col_actions,
	.tableau_des_recurrences tr.selectable-row td.col_actions {
		display: flex;
		padding-left: 0; 
	}

	/* On s'assure que le conteneur du solde occupe toute la largeur et aligne à droite */
	.tableau_des_operations tr.tableau_le_solde td.col_solde {
		width: 100%;
		box-sizing: border-box;
	}

	/* La cellule elle-même */
	.tableau_des_operations td.rubrique_dans_tableau,
	.tableau_des_recurrences td.rubrique_dans_tableau {
		min-width: 100vw;
        display: table-cell !important;
	}

	.tableau_des_operations .col_solde {
		text-align: right;
	}

	.tableau_des_operations .col_pointage {
		margin-left: 50%;
		transform: translateX(-50%);
		width: fit-content; /* S'assure que la cellule ne prend que la place nécessaire */
	}

	/*********************************
	*******POUR LES RECURRENCES*******
	*********************************/
	/* On transforme le TR en conteneur Flex */
	.tableau_des_recurrences tr.selectable-row {
		display: flex;
		flex-wrap: wrap; /* Permet le passage à la ligne */
		padding: 12px 15px;
		position: relative;
	}

	/* --- LIGNE 1 : Tiers et Montant --- */
	.tableau_des_recurrences tr.selectable-row .col_tiers {
		flex: 1; /* Prend tout l'espace disponible */
		text-align: left;
		font-size: 110%;
		padding: 0;
		order: 1;
	}

	.tableau_des_recurrences tr.selectable-row .col_debit,
	.tableau_des_recurrences tr.selectable-row .col_credit {
		width: auto;
		text-align: right;
		padding: 0;
		order: 2;
	}

	/* --- LIGNE 2 : Détails (sous le débit) --- */
	/* On crée un bloc qui contient le nombre et le compte */
	/* On utilise une marge gauche auto pour le pousser à droite */
	.tableau_des_recurrences tr.selectable-row .col_nombre_recurrence,
	.tableau_des_recurrences tr.selectable-row .col_compte_concerne {
		/*! display: inline-block; */
		order: 4;
		font-size: 85%;
		margin-top: 60px;
		padding: 0;
	}

	/* Pour forcer col_actions à passer à la ligne à gauche */
	.tableau_des_recurrences tr.selectable-row .col_actions {
		flex-basis: 100%; /* Force le retour à la ligne pour le bloc suivant si besoin */
		display: flex;
		margin-top: -35px !important;
		order: 5;
	}

	/* --- AJUSTEMENTS DE STRUCTURE --- */
	
	/* Masquer les colonnes inutiles en mobile */
	.tableau_des_recurrences tr.selectable-row .col_date,
	.tableau_des_recurrences tr.selectable-row .col_frequence {
		display: none;
	}

	/* Aligner le bloc "Nombre + Compte" sous le montant */
	/* On utilise un petit hack : un conteneur invisible ou du margin-left */
	.tableau_des_recurrences tr.selectable-row .col_nombre_recurrence {
		margin-left: auto; /* Pousse vers la droite */
		padding-right: 5px;
	}

	/* Style spécifique pour le compte (italique violet) */
	.tableau_des_recurrences td.col_compte_concerne {
		width: auto;
		min-width: 0;
	}


	/* On cible la cellule qui contient le nom du compte */
	.tableau_des_recurrences td.col_compte_concerne::before {
		content: " sur "; /* Le texte à ajouter */
	}

	.tableau_des_recurrences td.col_compte_concerne {
		text-transform: lowercase;
	}

	/* On ajoute " fois" après le contenu de la cellule */
	.tableau_des_recurrences td.col_nombre_recurrence::after {
		content: " X";
	}

	/* Mais on le cache si la cellule contient une icône (l'infini) */
	.tableau_des_recurrences td.col_nombre_recurrence:has(iconify-icon)::after {
		content: ""; 
	}

	.tableau_des_tiers td.col_date {
		font-size: 80%;
	}

	/*********************************
	**********POUR LES TIERS**********
	*********************************/
	.tableau_des_tiers th,
	.tableau_des_tiers th a {
		text-align: left !important;
	}

	.tableau_des_tiers th a {
			display: block;
		font-size: 140%;
	}

	.tableau_des_tiers th {
		vertical-align: top;
	}
}