:root {
	/* couleur sidebar */
	--color-5: #694f61;
	--color-6: #694f61;
	--color-7: #261d1d;
	--color-8: #831717;
	--color-9: #8e2c2c;
	--color-10: #983f3f;
	--color-11: #f2dede;
	--rouge-bordeau: #6d071a;

	--primary-color: #831717;
	--secondary-color: #ffd77f;
	--doré: #d4af37;
	--texte: #222;
	--gris-clair: #f8f8f8;
	--white-color: #eceef0;
	--black-color: #212536;
	--grey-color: #6c757d;
	--nearly-grey: #ced6de;

	--primary-text: #4f8f70;
	--secondary-text: #e9fff3;
	--white-text-white: #ffffff;
	--black-text-black: #000000;
	--quote-bg-color: #f7f7f7;
	--not-white: #f2f0ef;

	--color-primary-dark: #5a0f0f;
	--color-primary-light: #a32020;
	--color-black: #1a1a1a;
	--color-gray-dark: #2d2d2d;
	--color-gray: #4a4a4a;
	--color-gray-light: #f5f5f5;

	/*
    Rubik principalement utilisé pour :
    le contenu des
    le contenu des tableaux
    les légendes
     */
	--primary-font-regular:
		"Roboto", "Source Sans Pro", "Segoe UI", Roboto, Arial, sans-serif;
	--primary-font-bold:
		"Roboto", "Source Sans Pro", "Segoe UI", Roboto, Arial, sans-serif;
	/*
    Kanit principalement utilisé pour :
    les titres
    les sous-titres
    les titres des menus
    les titres des tableaux
     */
	--secondary-font-regular:
		"OpenSans", "Source Sans Pro", "Segoe UI", Roboto, Arial, sans-serif;
	--secondary-font-bold:
		"Bahnschrift SemiBold", "Source Sans Pro", "Segoe UI", Roboto, Arial,
		sans-serif;

	--description-font-family: "Times New Roman", Arial;

	/* Minuteur d'inactivite : geometrie, palette d'urgence et rythme vertical
	   du dialog « Session bientot verrouillee » (portage fidele du mobile).
	   Le JS ne pilote que --progress et une classe d'etat ; toute valeur
	   visuelle vit ici. */
	--countdown-card-radius: 24px;
	--countdown-card-padding: 24px;

	--countdown-gap-badge-title: 24px;
	--countdown-gap-title-subtitle: 8px;
	--countdown-gap-subtitle-ring: 24px;
	--countdown-gap-ring-actions: 24px;

	--countdown-badge-size: 62px;
	--countdown-icon-size: 34px;

	--countdown-ring-size: 116px;
	--countdown-ring-stroke: 8px;
	--countdown-ring-circumference: 339.29; /* 2*PI*((116-8)/2), pose une fois */
	--countdown-track: var(--color-gray-light);

	--countdown-green: #43a047; /* fraction > 0.5 */
	--countdown-orange: #ef6c00; /* 0.25 < fraction <= 0.5 */
	--countdown-bordeaux: var(--color-8); /* fraction <= 0.25 */

	--countdown-title-size: 17px;
	--countdown-title-color: var(--color-8);
	--countdown-subtitle-size: 14px;
	--countdown-muted: #888686; /* sous-titre et « restantes » */
	--countdown-num-size: 28px;
	--countdown-label-size: 12px;

	--countdown-btn-height: 48px;
	--countdown-btn-radius: 16px;

	--progress: 1; /* 1 = anneau plein, 0 = vide ; pilote par le ticker */
	--countdown-color: var(--countdown-green); /* etat par defaut : vert */
	--countdown-ring-transition: stroke-dashoffset 0.9s linear, stroke 0.35s ease;
}

.amount-waited {
	color: #808080;
}

.amount-debit {
	color: red;
}

.amount-credit {
	color: rgb(0, 128, 15);
}

/* police des navbar et sidebar */
body {
	font-family: var(--secondary-font-regular) serif;
}

/* police du contenu tu tableau */
body .ui-widget {
	font-family: var(--primary-font-regular) serif !important;
}

body .ui-input-icon-right > i:last-of-type {
	top: 1rem !important;
}

/* ajuster la longueur des lignes de tableau */
td {
	padding-top: 12px;
	padding-bottom: 12px;
}

.bg-dashboard-2 {
	background-color: var(--color-2);
}

.bg-dashboard-3 {
	background-color: var(--color-3);
}

.bg-dashboard-5 {
	background-color: var(--color-5);
}

.bg-dashboard-8 {
	background-color: var(--color-8);
}

.bg-white-1 {
	color: #fff;
}

.bg-badge {
	color: #fff;
	background-color: var(--color-5);
}

/* TITRES */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--secondary-font-bold) serif;
	margin-top: 5px;
	margin-bottom: 5px;
}

h1,
h2 {
	color: var(--color-8);
}

table,
.table-content {
	font-family: var(--primary-font-regular) serif;
}

caption,
.legend {
	font-family: var(--primary-font-bold), serif;
}

.menu-title {
	font-family: var(--secondary-font-bold), serif;
}

/*********** STYLES MODERNES UI-DIALOG ***********/

/* Conteneur principal du dialog - Style cohérent avec UI-PANEL */
.ui-dialog {
	resize: none !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
	box-sizing: border-box !important;
	position: fixed !important;
	z-index: 1100 !important;
	left: 50vw !important;
	top: 50vh !important;
	transform: translate(
		-50%,
		-50%
	) !important; /* Centrage horizontal et vertical */
	max-height: 80vh !important; /* 80vh max garantit minimum 10vh d'espace en haut */
}

/* Positionnement spécifique pour les pages avec sidebar/navbar (dashboard client/admin) */
.wrapper .ui-dialog {
	/* Décalage pour compenser visuellement la sidebar (250px) et navbar (60px) */
	left: calc(50vw + 125px) !important; /* 125px = sidebar (250px) / 2 */
	top: calc(50vh + 30px) !important; /* 30px = navbar (60px) / 2 */
}

/* Masquer les poignées de redimensionnement de PrimeFaces */
.ui-dialog .ui-resizable-handle {
	display: none !important;
}

.ui-dialog.ui-resizable .ui-dialog-content {
	box-sizing: inherit !important;
}

/* Titlebar du dialog - Style cohérent avec UI-PANEL */
.ui-dialog .ui-dialog-titlebar {
	background: #ffffff !important;
	border: none !important;
	border-bottom: 2px solid #f8f9fa !important;
	padding: 20px 32px !important;
	color: #333333 !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	border-radius: 16px 16px 0 0 !important;
}

/* Titre du dialog */
.ui-dialog .ui-dialog-title {
	color: #333333 !important;
	font-weight: 700 !important;
}

/* Bouton de fermeture (X) du dialog */
.ui-dialog .ui-dialog-titlebar-icon {
	color: #831717 !important;
	transition: all 0.3s ease !important;
	border-radius: 4px !important;
}

.ui-dialog .ui-dialog-titlebar-icon:hover {
	color: #5c0f0f !important;
	background: rgba(131, 23, 23, 0.1) !important;
}

/* Contenu du dialog */
.ui-dialog .ui-dialog-content {
	background: #ffffff !important;
	padding: 32px !important;
	color: #333333 !important;
	border: none !important;
	overflow-y: auto !important;
	max-height: calc(80vh - 140px) !important;
}

/* Footer du dialog (boutons) */
.ui-dialog .ui-dialog-buttonpane {
	background: #f8f9fa !important;
	border-top: 1px solid #e5e7eb !important;
	padding: 16px 32px !important;
	text-align: right !important;
	border-radius: 0 0 16px 16px !important;
}

/* corrige le problème des dropdowns et autres composants qui ne s'affichent pas dans les dialogs */
.ui-selectonemenu-panel,
.ui-autocomplete-panel,
.ui-datepicker,
.ui-calendar-panel,
.ui-overlaypanel {
	z-index: 1150 !important;
}

/* Responsive pour les dialogs */
@media (max-width: 768px) {
	.wrapper .ui-dialog,
	.ui-dialog {
		width: 90% !important;
		min-width: 90% !important;
		max-width: 90% !important;
		height: auto !important;
		max-height: 80vh !important; /* Cohérent avec desktop - 80vh max */
		/* Mobile : centrage parfait vertical et horizontal (même UX que desktop) */
		left: 50% !important;
		top: 50vh !important; /* Centré verticalement */
		transform: translate(
			-50%,
			-50%
		) !important; /* Centrage horizontal et vertical */
		z-index: 1100 !important; /* Au-dessus de la navbar sticky (z-index: 1030) */
	}

	.ui-dialog .ui-dialog-titlebar {
		padding: 16px 24px !important;
		font-size: 1.3rem !important;
	}

	.ui-dialog .ui-dialog-content {
		padding: 24px !important;
		max-height: calc(80vh - 140px) !important;
	}

	.ui-dialog .ui-dialog-buttonpane {
		padding: 12px 24px !important;
	}
}

@media (min-width: 769px) {
	.ui-dialog {
		max-width: 60% !important;
		min-width: 400px !important;
		width: auto !important;
		height: auto !important;
	}

	.ui-dialog .ui-dialog-content {
		max-height: calc(80vh - 140px) !important;
		/* Hauteur max desktop moins titlebar/footer (~140px) */
	}
}

/*********** Correction classes Bootstrap conflictuelles ***********/

.ui-dialog.position-absolute {
	position: fixed !important;
}

/* Sur mobile, annuler les classes Bootstrap (top-20, start-20) qui décalent le dialog */
@media (max-width: 768px) {
	.ui-dialog.position-absolute,
	.ui-dialog.top-20,
	.ui-dialog.start-20 {
		position: fixed !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
	}
}

/* -----------------------------------------------------------Notification dropdown----------------------------------------- */

.dropdown-menu {
	padding: 0.5rem !important;
}

.notification-dropdown {
	width: 400px;
	max-height: 300px;
	overflow-y: auto;
}

/* Media Queries pour rendre le menu responsive */
@media (max-width: 768px) {
	.notification-dropdown {
		min-width: 200px;
		width: 100%;
	}

	.dropdown-item,
	.p\:commandLink {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.float-right {
		float: none !important;
		text-align: right;
		display: block;
	}

	.text-muted.text-sm {
		font-size: 0.9rem;
		display: block;
		width: 100%;
	}
}

/* ------------------------------------------------Custom PanelGrid------------------------------------- */

.panelGrid-label {
	text-align: left;
	vertical-align: middle;
	padding-right: 10px;
	/* Espacement entre le label et le champ */
}

.ui-panelgrid.showcase-text-align-center
	.ui-grid-responsive
	.ui-panelgrid-cell {
	text-align: center;
}

.customPanelGrid .ui-panelgrid-content {
	align-items: center;
}

.ui-tabs.ui-tabs-top > .ui-tabs-nav {
	padding: 0.2em 0.2em 0;
}

/*----------------------------- DATATABLE -----------------------------*/

.ui-datatable {
	width: 100%;
	margin-bottom: 1rem;
	color: #040404;
	border-collapse: collapse;
}

/* Style de l'en-tàªte */
.ui-datatable thead th {
	vertical-align: bottom;
	border-bottom: 2px solid #ebedf2;
	padding: 12px;
	text-align: left;
	background-color: #e9ecef;
	font-weight: bold;
}

/* Style des cellules normales */
.ui-datatable tbody td {
	padding: 12px;
	vertical-align: top;
	border-top: 1px solid #ebedf2;
}

.ui-datatable tbody tr {
	background-color: white;
	color: black !important;
	/* Fond blanc par défaut */
}

/* Striped rows */
.ui-datatable tbody tr:nth-of-type(odd) {
	background-color: #f2f2f2;
}

/* Hover effect */
.ui-datatable tbody tr.ui-widget-content:hover {
	color: #212529;
	background-color: #f2f2f2;
}

/* Mode sombre */
.ui-datatable.ui-widget {
	color: #fff;
}

.ui-datatable.ui-widget tbody td {
	border-color: #454d55;
}

.ui-datatable tbody tr.ui-datatable-even {
	background-color: #f8f9fa;
}

.tableau-journal thead th {
	text-align: center !important;
}

/* Option : Centrer aussi le contenu des cellules */
.tableau-journal tbody td {
	text-align: center !important;
}

/* Responsive */
@media (max-width: 768px) {
	.ui-datatable table {
		overflow-wrap: normal;
		width: 100%;
		table-layout: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		/* Améliorer le défilement sur mobile */
		overflow-x: auto;
		font-size: 10;
	}

	.ui-datatable thead th,
	.ui-datatable tbody td {
		white-space: nowrap;
		/* Empàªche le texte de se casser sur plusieurs lignes */
	}

	/* Masquer les champs de filtrage */
	.ui-datatable .ui-column-filter {
		display: none;
	}
}

/* -----------------------------Autre-------------------------------------- */

.ui-button {
	padding: 0;
}

.inline-elements > * {
	margin-right: 30px;
}

.inline-elements {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.inline-elements > * {
	margin-right: 20px;
	/* Espacement normal */
}

@media (max-width: 768px) {
	.inline-elements > * {
		margin-right: 0;
		/* Supprimer les marges à une taille d'écran réduite */
		margin-bottom: 10px;
		/* Ajouter un espacement par le bas pour les éléments en colonne */
		width: 100%;
		/* Prendre toute la largeur disponible */
	}
}

.input[type="date"] {
	width: 200px;
}

body .bouton-choisir {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
}

/* -------------------datepicker ---------------------------------- */

.ui-datepicker {
	z-index: 1000000 !important;
	max-width: 500px !important;
	width: auto !important;
}

.ui-datepicker table {
	width: 100% !important;
}

@media (max-width: 768px) {
	.ui-datepicker {
		z-index: 10000 !important;
		width: 100% !important;
		max-width: 320px !important;
		font-size: 14px !important;
	}

	.ui-datepicker .ui-datepicker-header,
	.ui-datepicker .ui-datepicker-calendar {
		width: 100% !important;
	}

	.ui-datepicker .ui-datepicker-calendar td,
	.ui-datepicker .ui-datepicker-calendar th {
		padding: 0px !important;
	}

	.ui-datepicker .ui-datepicker-title {
		font-size: 14px !important;
	}
}

/* Correction générale pour tous les écrans */

/* ------------------------------------growl------------------------------------------------------------ */

/* Ajustement général pour ui-growl */
@media (min-width: 769px) {
	.ui-growl {
		left: 50%;
		/* Positionnement au centre */
		transform: translateX(-50%);
		/* Centrage horizontal */
		max-width: 100%;
		/* Largeur maximale */
		width: auto !important;
		/* Réinitialisation de la largeur */
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
	.ui-growl {
		margin: 0 auto;
		/* Centrage horizontal */
	}
}

/* ---- mes cartes xhtml----------- */
#relvbanque\:dateDebut_panel {
	width: 500px !important;
	z-index: 10000 !important;
}

#relvbanque\:dateFin_panel {
	width: 500px !important;
	z-index: 10000 !important;
}

body .ui-menu .ui-menu-list .ui-widget-header {
	background: blue;
	padding: 0;
}

/*------ ------*/
/* Container des détails */
.details-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Style des items de détail */
.detail-item {
	display: flex;
	align-items: center;
	padding: 10px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	flex-wrap: wrap;
}

/* Icône des items de détail */
.detail-item i {
	margin-right: 10px;
	color: #145da0;
	/* Couleur personnalisée pour les icônes */
}

/* Libellé des items */
.detail-label {
	font-weight: bold;
	margin-right: 5px;
	color: #333;
}

/* Valeur des items */
.detail-value {
	color: #555;
	margin-left: auto;
	/* Aligne la valeur à droite */
	font-size: 1em;
}

/* Montant de la transaction */
.transaction-amount {
	font-size: 2em;
	color: #145da0;
	margin: 0;
	text-align: center;
	padding: 5px;
}

/* Divider */
.divider {
	border-top: 1px solid #e6e6e6;
	margin: 15px 0;
}

/* Panel des détails de la transaction */
.transaction-details-panel {
	background: #fff;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style du panel */
.custom-panel {
	padding: 20px;
	background: #f7f9fc;
	border-radius: 8px;
}

/* Bouton de fermeture (croix) */
.close-button {
	float: right;
	margin-top: -10px;
	margin-right: -10px;
	font-size: 1.2em;
	border: none;
	background: transparent;
	cursor: pointer;
}

/* Style pour les lignes impaires */
.ui-datatable tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

/* Style pour les lignes paires */
.ui-datatable tbody tr:nth-child(even) {
	background-color: #f8f9fa;
}

.content-wrapper {
	background-color: white;
}

.section-title {
	padding: 10px 2rem;
	margin-bottom: 15px;
}

/* .section-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background-color: grey;
    margin-top: 15px;
} */

/*------------------------------------------BLOCK UI-------------------------------------*/
/* Style pour le contenu du blockUI */
.ui-blockui-content {
	background-color: white;
	/* Fond blanc */
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	/* Ombre légà¨re */
	text-align: center;
}

/* Style pour l'overlay du blockUI */
.ui-blockui {
	background-color: rgba(0, 0, 0, 0.7);
	/* Fond semi-transparent */
}

/* Style de base pour le texte */
.blinking-text {
	font-size: 24px;
	font-weight: bold;
	color: var(--color-8);
	/* Couleur du texte */
	animation: blink 1s infinite;
	/* Animation de clignotement */
}

/* Définition de l'animation de clignotement */
@keyframes blink {
	0% {
		opacity: 1;
	}

	/* Texte visible */
	50% {
		opacity: 0;
	}

	/* Texte invisible */
	100% {
		opacity: 1;
	}

	/* Texte visible */
}

/* SHERPA ADMIN */

.nav-header {
	color: var(--secondary-color) !important;
}

.footer-table {
	width: 100%;
	border-collapse: collapse;
}

.label-cell {
	padding: 5px 10px;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}

.value-cell {
	padding: 5px 10px;
	text-align: right;
	border-bottom: 1px solid #ddd;
}

.main-sidebar {
	background-color: #283a5ae6;
}

/* SHERPA ADMIN */

.nav-header {
	color: var(--secondary-color) !important;
}

.footer-table {
	width: 100%;
	border-collapse: collapse;
}

.label-cell {
	padding: 5px 10px;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}

.value-cell {
	padding: 5px 10px;
	text-align: right;
	border-bottom: 1px solid #ddd;
}

.main-sidebar {
	background-color: #283a5ae6;
}

/* SHERPA ADMIN */

.nav-header {
	color: var(--secondary-color) !important;
}

.footer-table {
	width: 100%;
	border-collapse: collapse;
}

.label-cell {
	padding: 5px 10px;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}

.value-cell {
	padding: 5px 10px;
	text-align: right;
	border-bottom: 1px solid #ddd;
}

.main-sidebar {
	background-color: #283a5ae6;
}

/* SHERPA ADMIN */

.nav-header {
	color: var(--secondary-color) !important;
}

.footer-table {
	width: 100%;
	border-collapse: collapse;
}

.label-cell {
	padding: 5px 10px;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}

.value-cell {
	padding: 5px 10px;
	text-align: right;
	border-bottom: 1px solid #ddd;
}

.main-sidebar {
	background-color: #283a5ae6;
}

/************************************************Toggle Switch****************************/
/* Style du fond du toggle (slider) */
.ui-toggleswitch .ui-toggleswitch-slider {
	background-color: white !important;
	/* Couleur de fond fixe */
	border: 2px solid black !important;
}

/* Style du bouton lorsque le toggle est activé */
.ui-toggleswitch-checked .ui-toggleswitch-handler {
	background-color: var(--color-8) !important;
}

/* Style du bouton lorsque le toggle est desactivé */
.ui-toggleswitch-handler {
	background-color: rgb(130, 128, 128) !important;
}

.ui-toggleswitch.ui-toggleswitch-focus .ui-toggleswitch-slider {
	outline: none !important;
	box-shadow: none !important;
}

.ui-button-flat {
	color: black !important;
}

.ui-carousel-indicator.ui-state-highlight .ui-link {
	background-color: var(--color-8) !important;
}

/****************************photo de profil******/
.profile-grid {
	max-width: 500px;
	max-height: 350px;
	text-align: center;
}

@media (max-width: 769px) {
	.profile-grid {
		max-width: 100%;
		max-height: 100%;
	}
}

/*RELAYOUT CLIENT INTERFACE*/
.saving-account-list {
	margin: 60px;
}

#accordeon\:new-custom-saving-btn {
	margin: 20px;
}

#accordeon\:dialogs\:new-custom-saving-modal {
	width: 20% !important;
}

#accordeon\:dialogs\:new-custom-saving-modal_content {
	display: flex;
	flex-direction: column;
	align-items: start;
}

#accordeon\:dialogs\:new-custom-saving-modal_content div {
	display: flex;
	flex-direction: column;
	margin-left: 10%;
}

#accordeon\:dialogs\:new-custom-saving-modal_title {
	margin-left: 10%;
}

#accordeon\:dialogs\:fund-account-modal,
#accordeon\:dialogs\:withdraw-account-modal {
	width: 20% !important;
}

button.sherpa-btn-primary {
	background-color: #283a5a !important;
	border: none !important;
}

button.sherpa-btn-secondary {
	background-color: #8e2c2c !important;
	border: none !important;
}

.table-action-btn-container button {
	margin-left: 2% !important;
}

.swal2-toast {
	margin-top: 20%;
}

/************************************************Toggle Switch****************************/
/* Style du fond du toggle (slider) */
.ui-toggleswitch .ui-toggleswitch-slider {
	background-color: white !important;
	/* Couleur de fond fixe */
	border: 2px solid black !important;
}

/* Style du bouton lorsque le toggle est activé */
.ui-toggleswitch-checked .ui-toggleswitch-handler {
	background-color: var(--color-8) !important;
}

/* Style du bouton lorsque le toggle est desactivé */
.ui-toggleswitch-handler {
	background-color: rgb(130, 128, 128) !important;
}

.ui-toggleswitch.ui-toggleswitch-focus .ui-toggleswitch-slider {
	outline: none !important;
	box-shadow: none !important;
}

.ui-button-flat {
	color: black !important;
}

.ui-carousel-indicator.ui-state-highlight .ui-link {
	background-color: var(--color-8) !important;
}

/* RELAYOUT CLIENT INTERFACES */

/* header */

.main-header ul.ml-auto > li ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 110%;
	position: relative;
	right: 30%;
}

.main-header .navbar-nav {
	justify-content: space-between;
}

#form-language-selector\:language-selector {
	border: none;
}

.small-vertical-divider {
	border: 1px solid var(--grey-color);
	height: 23px;
}

/* dashboard */

#compte > .top-container > .title-and-bases-actions > h3 {
	color: var(--color-8);
}

.dashboard-card-title {
	color: var(--color-8);
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 5%;
}

.box-shadowed {
	box-shadow:
		rgba(14, 30, 37, 0.12) 0 2px 4px 0,
		rgba(14, 30, 37, 0.32) 0 2px 16px 0 !important;
}

.dashboard-card-column-flex-box {
	display: flex;
	flex-direction: column;
}

.dashboard-card-row-flex-box {
	display: flex;
	justify-content: space-between;
}

.big-title {
	font-size: 25px;
	letter-spacing: 1px;
	width: 23vh;
}

.small-title {
	font-size: 15px;
}

.dashboard-card {
	display: flex;
	flex-direction: column;
	border-radius: 30px !important;
	margin: 10px;
}

.dashboard-card:nth-child(1) {
	padding: 20px;
}

.dashboard-card:nth-child(2) {
	justify-content: center;
}

.solde-card {
	background-color: var(--not-white);
	padding: 20px;
	border-radius: 10px;
}

.btn-cards-and-operation > div:nth-child(1) {
	padding: 50px;
	border-radius: 50px;
	width: 95%;
	margin: 10px;
}

.btn-cards-and-operation
	> div:nth-child(1)
	> div:nth-child(2)
	> table
	tbody
	tr {
	border-bottom: 1px dashed var(--black-color);
}

.top-container {
	display: flex;
	/* margin-left: 2vh;
    margin-right: 2vh; */
	flex-direction: column;
}

button.custom-icon-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	padding: 30px;
	margin: 10px;
	border-radius: 30px;
	border: none;
}

button.custom-icon-btn i {
	color: var(--white-color);
	font-size: 25px;
}

button.custom-icon-btn span:nth-child(3) {
	background-color: var(--color-8);
	padding: 5px;
	border-radius: 10px;
}

button.custom-icon-btn span.big-title {
	color: var(--color-8);
	font-weight: bold;
}

.dashboard-transaction-graph {
	width: 95%;
}

.custom-icon-btn-container {
	display: flex;
	align-items: center;
}

/****************************photo de profil******/
.profile-grid {
	max-width: 500px;
	max-height: 350px;
	text-align: center;
}

@media (max-width: 769px) {
	.profile-grid {
		max-width: 100%;
		max-height: 100%;
	}
}

/****************************photo de profil******/
.profile-grid {
	max-width: 500px;
	max-height: 350px;
	text-align: center;
}

@media (max-width: 769px) {
	.profile-grid {
		max-width: 100%;
		max-height: 100%;
	}
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
	top: 25% !important;
}

/*****************************Additional*********************/
.table-header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	/* Permet de passer à la ligne si l’espace est insuffisant */
	gap: 1rem;
	/* Espace entre les éléments */
	padding: 0.5rem;
	width: 100%;
	box-sizing: border-box;
}

.filter-container {
	min-width: 0;
	/* Important pour empêcher le débordement */
}

.filter-container input {
	width: 100%;
	max-width: 300px;
	/* optionnel */
}

.export-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.credit-filter-area {
	display: flex;
	flex-wrap: wrap;
	/* Permet le passage à la ligne sur petits écrans */
	gap: 1rem;
	/* Espacement entre les éléments */
	align-items: center;
	/* Alignement vertical */
}

/* Sur petits écrans, les éléments passent à 100% de largeur */
@media (max-width: 768px) {
	.credit-filter-area > div {
		width: 100%;
	}

	/* Ajustement des menus déroulants */
	.credit-filter-area .ui-selectonemenu {
		width: 100% !important;
	}
}

/* Style de base pour le toolbar et ses groupes */
.ui-toolbar .ui-toolbar-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Alignement horizontal par défaut */
	gap: 1rem;
	/* Espacement entre les paires label+champ */
}

/* Conteneur pour chaque paire label + champ */
.ui-toolbar .ui-toolbar-group > * {
	display: flex;
	align-items: center;
	/* Alignement horizontal (desktop) */
	margin-bottom: 0.5rem;
}

/* Responsive : passage en colonne sur mobile */
@media (max-width: 768px) {
	.ui-toolbar .ui-toolbar-group > * {
		flex-direction: column;
		/* Label au-dessus, champ en dessous */
		align-items: flex-start;
		/* Alignement à gauche */
		width: 100%;
		/* Pleine largeur */
	}

	/* Espacement entre label et champ */
	.ui-toolbar .ui-toolbar-group .ui-outputlabel {
		margin-bottom: 0.25rem;
		margin-right: 0;
		/* Réinitialise la marge droite */
	}
}

/* Pour les écrans petits, réduire l'espacement */
@media (max-width: 768px) {
	.ui-toolbar .ui-button {
		margin-right: 0.25rem !important;
	}
}

@media (max-width: 400px) {
	.info-box {
		flex-direction: column;
		min-height: auto;
		padding: 1rem;
		text-align: center;
	}

	.info-box .info-box-content {
		padding: 0.5rem 0;
	}

	.info-box .info-box-icon {
		/* margin-bottom: 0.5rem; */
		font-size: 2.5rem;
	}

	.info-box .info-box-number,
	.info-box .info-box-text {
		font-size: 0.9rem;
		word-wrap: break-word;
	}
}

.admin-graphe {
	display: flex;
	justify-content: space-around;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Responsive : empile les cartes en colonne pour petit écran */
@media (max-width: 768px) {
	.admin-graphe {
		flex-direction: column;
		align-items: center;
	}

	.admin-graphe .card {
		width: 90% !important;
		height: auto !important;
	}
}

/* Conteneur principal en grille */
.card-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	/* Colonnes adaptatives */
	gap: 15px;
	padding: 10px;
}

/* Style des cartes */
.stats-card {
	background-color: #3d4d6a !important;
	color: white !important;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Titre de la carte */
.card-title {
	text-decoration: underline;
	font-weight: bold;
	font-size: 1.1em;
	display: block;
	margin-bottom: 10px;
}

/* Contenu de la carte */
.card-content {
	margin-bottom: 10px;
}

/* Barre de progression */
.progress-bar-custom {
	width: 100%;
	margin: 5px 0;
}

/* Barre de progression masquée (solde caché) : motif hachuré neutre, aucune fuite du pourcentage réel */
.progress-bar-masked .ui-progressbar-value {
	background: repeating-linear-gradient(
		45deg,
		var(--grey-color, #9aa2b1) 0,
		var(--grey-color, #9aa2b1) 6px,
		transparent 6px,
		transparent 12px
	) !important;
	opacity: 0.5;
}

.progress-bar-masked .ui-progressbar-label {
	display: none !important;
}

/* Valeurs chiffrées masquées en même temps que le solde */
.masked-value {
	letter-spacing: 2px;
	color: var(--grey-color, #9aa2b1);
}

/* Texte d'écart */
.ecart-text {
	font-size: 0.9em;
	opacity: 0.9;
}

/* Responsive : 2 colonnes sur tablettes */
@media (max-width: 1024px) {
	.card-grid-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 600px) {
	.card-grid-container {
		grid-template-columns: 1fr;
	}
}

.card-container-rh {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	margin-top: 10px;
}

.card-little {
	padding: 30px;
	border-radius: 30px;
	box-sizing: border-box;
	/* Ajout de transitions pour fluidité */
	transition: flex-basis 0.3s ease;
}

/* Grands écrans - valeurs par défaut */
.card-wide {
	flex: 1 1 calc(65% - 20px);
	min-width: 0;
	/* Important pour flexbox */
}

.card-narrow {
	flex: 1 1 calc(35% - 20px);
	min-width: 0;
}

/* Mobile - seulement sous 768px */
@media (max-width: 768px) {
	.card-container-rh > .card-little {
		flex-basis: 100% !important;
		min-width: 100%;
		/* Force le passage à 100% */
	}

	/* Réinitialisation spécifique au retour desktop */
	@media (min-width: 769px) {
		.card-wide {
			flex-basis: calc(65% - 20px) !important;
		}

		.card-narrow {
			flex-basis: calc(35% - 20px) !important;
		}
	}
}

.progress-container {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Espacement entre le titre et la barre */
	width: 100%;
}

.progress-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Espace entre la barre et le chiffre */
}

.progress-bar-custom {
	width: 95% !important;
	/* Force la largeur à 70% */
}

/* Conteneur principal */
.dashboard-buttons-container {
	display: flex;
	flex-wrap: wrap;
	/* Permet le retour à la ligne */
	gap: 30px;
	margin-top: 20px;
}

/* Style des boutons */
.custom-icon-btn {
	flex: 1;
	/* Tous les boutons prennent largeur égale */
	min-width: 200px;
	/* Largeur minimale avant passage en colonne */
	padding: 20px;
	border-radius: 15px;
	text-align: center;
	background: white;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive - empilement vertical */
@media (max-width: 768px) {
	.dashboard-buttons-container {
		flex-direction: column;
		gap: 15px;
	}

	.custom-icon-btn {
		width: 100%;
	}
}

.document-container {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px;
}

.document-preview {
	flex: 0 0 auto;
}

.document-actions {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cardPret {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px;
	background: #f9f9f9;
}

/* Toolbar specifique */
.responsive-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem;
	background: #f8f9fa;
	border-radius: 6px;
	margin-bottom: 1rem;
}

/* Groupes du toolbar */
.toolbar-group-left,
.toolbar-group-right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Conteneur des champs de date */
.toolbar-date-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Groupe label + datepicker */
.date-field-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 180px;
}

/* Labels des dates */
.date-label {
	font-weight: 500;
	color: #495057;
	font-size: 0.875rem;
	margin-bottom: 0.25rem;
}

/* Datepickers responsives */
/* .responsive-datepicker {
	width: 100% !important;
	max-width: 180px;
}

.responsive-datepicker .ui-datepicker {
	width: 100% !important;
}

.responsive-datepicker .ui-inputfield {
	width: 100% !important;
	min-width: 150px;
} */

/* Bouton de validation */
.validate-btn {
	min-width: 100px;
	align-self: flex-end;
	margin-bottom: 5px !important;
}

/* Responsive pour tablettes */
@media (max-width: 1024px) {
	.responsive-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.toolbar-group-left,
	.toolbar-group-right {
		justify-content: center;
	}

	.toolbar-date-container {
		justify-content: center;
		width: 100%;
	}

	.date-field-group {
		min-width: 160px;
	}
}

/* Responsive pour mobiles */
@media (max-width: 768px) {
	.responsive-toolbar {
		padding: 0.75rem;
		gap: 0.75rem;
	}

	.toolbar-date-container {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.date-field-group {
		min-width: 100%;
		max-width: 100%;
	}

	.validate-btn {
		align-self: stretch;
		margin-top: 0.5rem;
	}

	.toolbar-group-left,
	.toolbar-group-right {
		justify-content: stretch;
	}
}

/* Responsive pour très petits écrans */
@media (max-width: 480px) {
	.responsive-toolbar {
		padding: 0.5rem;
	}

	.date-field-group {
		margin-bottom: 0.5rem;
	}
}

/* Assure que les inputs ne débordent pas */

/* Styles pour les boutons d'exportation */
.toolbar-group-right .ui-button {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.toolbar-group-right {
		justify-content: center !important;
	}

	.toolbar-group-right .ui-button {
		min-width: 120px;
	}

	.ui-widget-header .ui-inputfield {
		width: 100%;
	}
}

.equal-height-container {
	display: flex;
	align-items: stretch;
}

.equal-height-container > div {
	display: flex;
	flex-direction: column;
}

.equal-height-container > div > * {
	flex: 1;
}

/**************** Styles pages d'offres*******************************/

body {
	background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

/* Enlever le gradient gris du body pour les pages simulateurs site vitrine uniquement */
body:has(main.container) {
	background: white !important;
}

/* Header Section */
.plans-header {
	text-align: center;
	margin: 0.5rem auto 1rem;
	max-width: 800px;
}

.plans-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(
		135deg,
		var(--color-8) 0%,
		var(--color-primary-dark) 100%
	);
	color: var(--white-text-white);
	padding: 0.5rem 1.5rem;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 1rem;
	box-shadow: 0 4px 15px rgba(131, 23, 23, 0.3);
}

.plans-title {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--color-black);
	margin-bottom: 1rem;
	letter-spacing: -1px;
}

.plans-subtitle {
	font-size: 1rem;
	color: var(--color-gray);
	line-height: 1.6;
}

/* Carte Plan */
.cardCustom {
	background: var(--white-text-white);
	border-radius: 24px;
	margin: 0.5rem;
	padding: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: visible;
	border: 2px solid transparent;
}

.cardCustom:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	border-color: var(--color-8);
}

/* En-tête de carte */
.card-header-custom {
	background: linear-gradient(
		135deg,
		var(--color-black) 0%,
		var(--color-gray-dark) 100%
	);
	color: var(--white-text-white);
	padding: 2rem;
	border-radius: 24px 24px 0 0;
	text-align: center;
	position: relative;
	overflow: hidden;

	/* 🟩 Ajouts pour le centrage vertical */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* centre verticalement */
	align-items: center;
	/* centre horizontalement */

	transition: height 0.3s ease;
}

.card-header-custom::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		45deg,
		transparent 30%,
		rgba(131, 23, 23, 0.1) 50%,
		transparent 70%
	);
	animation: shimmer 3s infinite;
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

.card-header-current {
	background: linear-gradient(
		135deg,
		var(--color-8) 0%,
		var(--color-primary-dark) 100%
	);
}

.card-title-offre {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	letter-spacing: -0.5px;
	position: relative;
	z-index: 1;
}

.card-description-offre {
	font-size: 0.95rem;
	opacity: 0.95;
	line-height: 1.5;
	position: relative;
	z-index: 1;
}

/* Corps de carte */
.card-body-custom {
	padding: 0.5rem;
}

/* Section Prix */
.price-section {
	text-align: center;
	padding: 0.5rem 0;
	border-bottom: 2px solid var(--color-gray-light);
	margin-bottom: 1.5rem;
}

.price-amount {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
}

.price-number {
	font-size: 2.5rem;
	font-weight: 800;
	background: linear-gradient(
		135deg,
		var(--color-8) 0%,
		var(--color-primary-dark) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.price-currency {
	font-size: 1rem;
	color: var(--color-gray);
	font-weight: 600;
}

.price-period {
	font-size: 0.875rem;
	color: var(--color-gray);
	margin-top: 0.25rem;
}

.min-balance {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--color-gray-dark);
}

.min-balance-amount {
	font-weight: 700;
	color: var(--color-8);
}

/* Boutons */
.btn-choose {
	width: 100%;
	padding: 1rem;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 12px;
	border: none;
	background: linear-gradient(
		135deg,
		var(--color-8) 0%,
		var(--color-primary-dark) 100%
	);
	color: var(--white-text-white);
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(131, 23, 23, 0.4);
	cursor: pointer;
}

.btn-choose:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(131, 23, 23, 0.5);
	background: linear-gradient(
		135deg,
		var(--color-primary-light) 0%,
		var(--color-8) 100%
	);
}

.btn-current {
	background: var(--color-gray-light);
	color: var(--color-gray);
	cursor: not-allowed;
	box-shadow: none;
}

/* Features */
.features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	font-size: 0.95rem;
	color: var(--color-gray-dark);
}

.feature-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: linear-gradient(
		135deg,
		var(--color-8) 0%,
		var(--color-primary-dark) 100%
	);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-text-white);
	font-weight: bold;
	font-size: 0.75rem;
}

.feature-highlight {
	font-weight: 700;
	color: var(--color-8);
}

/* Section Détails */
.details-section {
	border-top: 2px solid var(--color-gray-light);
	padding-top: 1.5rem;
}

.details-header {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-8);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.details-header-sup {
	margin-left: 10px;
	text-decoration: underline;
}

.rate-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-gray-light);
	font-size: 0.9rem;
}

.rate-item-sup {
	margin-left: 10px;
	margin-right: 10px;
}

.rate-label {
	color: var(--color-gray-dark);
}

.rate-value {
	font-weight: 700;
	color: var(--color-8);
	font-size: 1rem;
}

/* Accordéon */
.toggle-details {
	width: 100%;
	background: transparent;
	border: 2px solid var(--color-8);
	color: var(--color-8);
	font-weight: 700;
	padding: 0.75rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
	font-size: 0.95rem;
	border-radius: 10px;
}

.toggle-details:hover {
	background: var(--color-8);
	color: var(--white-text-white);
}

.MoreAdvantages {
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.5;
	}

	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.plans-title {
		font-size: 1.5rem;
	}

	.card-title-offre {
		font-size: 1rem;
	}

	.price-number {
		font-size: 2rem;
	}
}

/* Animation d'entrée */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.MoreAdvantages {
	transition: all 0.3s ease-in-out;
}

.toggle-container {
	text-align: center;
}

.toggle-container button {
	color: #283a5ae6;
	font-weight: bold;
	text-decoration: underline;
	border: none;
	background: none;
	cursor: pointer;
}

/*********** Style pour la page de creation de compte *********/
.section-title-custom {
	text-align: center;
	margin-bottom: 20px;
}

.section-title-custom h2 {
	font-size: 2.5rem;
	color: #2d3748;
	margin-bottom: 10px;
	font-weight: 700;
}

.section-title-custom p {
	font-size: 1.1rem;
	color: #4a5568;
}

.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	padding: 20px 0;
}

/* Style des cartes */
.account-card {
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position: relative;
	display: flex;
	flex-direction: column;
	border: 3px solid transparent;
}

.account-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, #831717, #c41e1e);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.account-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 60px rgba(131, 23, 23, 0.2);
}

.account-card:hover::before {
	transform: scaleX(1);
}

/* Header de la carte */
.card-header {
	background: linear-gradient(135deg, #831717 0%, #c41e1e 100%);
	padding: 30px 25px;
	position: relative;
	overflow: hidden;
}

.card-header::after {
	content: "";
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.1) 0%,
		transparent 70%
	);
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.5;
	}

	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

.card-icon {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 10px;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.card-title-creation {
	color: white;
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 1;
}

/* Body de la carte */
.card-body {
	padding: 25px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.card-description {
	line-height: 1.7;
	font-size: 0.95rem;
	text-align: center;
	margin-bottom: 20px;
	color: var(--black-text-black);
}

.card-features {
	background: #f7fafc;
	border-radius: 12px;
	padding: 18px;
	margin-top: auto;
	margin-bottom: 20px;
}

.feature-title {
	color: #831717;
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.feature-title::before {
	content: "✓";
	background: #831717;
	color: white;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}

.feature-list {
	list-style: none;
	font-size: 0.88rem;
	color: var(--black-text-black);
	line-height: 1.8;
}

.feature-list li {
	padding-left: 20px;
	position: relative;
	margin-bottom: 6px;
}

.feature-list li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: #831717;
	font-weight: bold;
	font-size: 1.1rem;
}

/* Bouton Commencer */
.btn-commencer {
	display: block;
	width: 100%;
	margin: 0 25px 25px 25px;
	padding: 16px;
	background: linear-gradient(135deg, #831717 0%, #c41e1e 100%);
	color: white;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.05rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(131, 23, 23, 0.4);
	position: relative;
	overflow: hidden;
}

.btn-commencer::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition:
		width 0.6s,
		height 0.6s;
}

.btn-commencer:hover::before {
	width: 400px;
	height: 400px;
}

.btn-commencer:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(131, 23, 23, 0.6);
}

.btn-commencer:active {
	transform: translateY(-1px);
}

.btn-text {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-icon {
	font-size: 1.2rem;
	transition: transform 0.3s ease;
}

.btn-commencer:hover .btn-icon {
	transform: translateX(5px);
}

/* Animations d'entrée */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.account-card {
	animation: fadeInUp 0.6s ease forwards;
	opacity: 0;
}

.account-card:nth-child(1) {
	animation-delay: 0.1s;
}

.account-card:nth-child(2) {
	animation-delay: 0.2s;
}

.account-card:nth-child(3) {
	animation-delay: 0.3s;
}

.account-card:nth-child(4) {
	animation-delay: 0.4s;
}

/* Effet de brillance sur la carte */
.card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transition: left 0.5s ease;
}

.account-card:hover .card-shine {
	left: 100%;
}

/* Responsive */
@media (max-width: 768px) {
	.section-title h2 {
		font-size: 2rem;
	}

	.cards-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.card-body {
		padding: 20px;
	}

	.btn-commencer {
		width: 100%;
		margin: 0 20px 20px 20px;
	}
}

/* ===================================================================
   Formulaire "Devenir Agent" (devenir-agent.xhtml) : stepper personnalisé
   et champs, indépendants du p:wizard/p:steps utilisés par creer-compte.xhtml
   =================================================================== */
.agent-form-wrap {
	background: #f9f9fa;
	border-radius: 10px;
	padding: 20px;
}

.required-asterisk {
	color: #d9534f;
	font-weight: bold;
	margin-left: 2px;
}

.agent-hint {
	margin-bottom: 20px;
	color: #666;
}

.agent-hint .pi {
	margin-right: 5px;
}

.agent-section-title {
	margin: 25px 0 10px 0;
	padding-bottom: 6px;
	border-bottom: 2px solid #e0e0e0;
	font-size: 1.05em;
	color: #333;
}

.agent-section-title.first {
	margin-top: 0;
}

.agent-upload-recap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 0.9em;
	color: #333;
}

.agent-upload-recap .pi-check-circle {
	color: #28a745;
}

.agent-cni-reset {
	margin-left: 8px;
	font-size: 0.9em;
}

.agent-engagement-box {
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: 6px;
	padding: 10px 15px;
	margin-top: 15px;
}

.agent-panel {
	margin-bottom: 20px;
}

/* Stepper */
.agent-stepper {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin: 10px 0 25px 0;
}

.agent-step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 90px;
}

.agent-step-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #e9e9e9;
	color: #777;
	font-weight: bold;
	font-size: 0.95em;
	border: 2px solid #e9e9e9;
	transition: all 0.25s ease;
}

.agent-step-label {
	font-size: 0.78em;
	color: #777;
	text-align: center;
	line-height: 1.15;
}

.agent-step-item.active .agent-step-circle {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.agent-step-item.active .agent-step-label {
	color: var(--primary-color);
	font-weight: bold;
}

.agent-step-item.completed .agent-step-circle {
	background: #fff;
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.agent-step-line {
	flex: 1 1 auto;
	height: 2px;
	background: #e9e9e9;
	margin-top: 17px;
	max-width: 60px;
}

.agent-step-line.completed {
	background: var(--primary-color);
}

/* Ligne indicatif pays + numéro de téléphone */
.agent-phone-row {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.agent-phone-indicatif {
	min-width: 110px;
	flex: 0 0 auto;
}

.agent-phone-input {
	flex: 1 1 auto;
}

/* Navigation entre étapes */
.agent-nav-bar {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.agent-btn-primary,
.agent-btn-secondary {
	border-radius: 6px !important;
}

/* Optimisation mobile */
@media (max-width: 600px) {
	.agent-form-wrap {
		padding: 12px;
	}

	#formAgent .ui-panelgrid-cell,
	#formAgentPieces .ui-panelgrid-cell {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	#formAgent .ui-panelgrid,
	#formAgentPieces .ui-panelgrid {
		width: 100%;
	}

	#formAgent input.ui-inputfield,
	#formAgent select.ui-selectonemenu,
	#formAgent textarea.ui-inputfield,
	#formAgentPieces input.ui-inputfield {
		font-size: 16px;
		/* évite le zoom automatique de Safari iOS au focus */
		min-height: 44px;
	}

	.agent-phone-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.agent-phone-indicatif {
		flex: 1 1 100px;
		min-width: 90px;
	}

	.agent-phone-input {
		flex: 1 1 160px;
	}

	.agent-step-item {
		width: 62px;
	}

	.agent-step-label {
		font-size: 0.68em;
	}

	.agent-step-line {
		max-width: 24px;
	}

	.agent-nav-bar {
		position: sticky;
		bottom: 0;
		background: #f9f9fa;
		padding: 10px 0;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
		z-index: 5;
	}

	.agent-nav-bar .ui-button {
		flex: 1 1 auto;
	}
}

/* Onglet actif dans les tabviews */
.ui-tabs-header.ui-state-active a {
	color: var(--rouge-bordeau) !important;
	font-weight: bold;
}

.ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
	border-color: var(--rouge-bordeau) !important;
}

/* Désactive ou personnalise le bleu du hover / focus */
.ui-tabs-header.ui-state-hover a,
.ui-tabs-header.ui-state-focus a {
	color: var(--rouge-bordeau) !important;
	background: none !important;
	box-shadow: none !important;
}

/* Pour tous les boutons PrimeFaces de type submit */
button[type="submit"],
.ui-button[type="submit"],
.ui-button.ui-state-default[type="submit"] {
	background-color: var(--color-8) !important;
	/* rouge vif */
	border: none !important;
	color: #fff !important;
	font-weight: 600;
}

/* Effet au survol */
button[type="submit"]:hover,
.ui-button[type="submit"]:hover {
	background-color: #b71c1c !important;
	/* rouge foncé */
	color: #fff !important;
}

/* Désactive l'effet bleu focus */
button[type="submit"]:focus,
.ui-button[type="submit"]:focus {
	box-shadow: none !important;
	outline: none !important;
}

/* Bouton primaire charte découplé du type HTML : applique le rendu rouge
   de .ui-button[type="submit"] à un bouton type="button" (ex. dialog
   d'inactivité « Rester connecté ») sans réintroduire de soumission JSF. */
.ui-button.btn-charte-primary,
.ui-button.btn-charte-primary.ui-state-default {
	background-color: var(--color-8) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600;
}

.ui-button.btn-charte-primary:hover,
.ui-button.btn-charte-primary.ui-state-hover {
	background-color: #b71c1c !important;
	color: #fff !important;
}

.ui-button.btn-charte-primary:focus {
	box-shadow: none !important;
	outline: none !important;
}

/* ============================================================
   Minuteur d'inactivite — dialog « Session bientot verrouillee »
   L'etat d'urgence est porte par UNE variable (--countdown-color) que
   consomment ensemble l'arc, le chiffre, l'icone et le fond du badge.
   Seule la classe d'etat change ; le reste suit.
   ============================================================ */
.session-countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 100%;
	padding: var(--countdown-card-padding);
	border-radius: var(--countdown-card-radius);
	background: #fff;
}

.session-countdown.is-orange {
	--countdown-color: var(--countdown-orange);
}

.session-countdown.is-bordeaux {
	--countdown-color: var(--countdown-bordeaux);
}

.session-countdown__badge {
	width: var(--countdown-badge-size);
	height: var(--countdown-badge-size);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--countdown-color);
	background: color-mix(in srgb, var(--countdown-color) 12%, #fff);
}

.session-countdown__badge svg {
	width: var(--countdown-icon-size);
	height: var(--countdown-icon-size);
}

.session-countdown__title {
	margin: var(--countdown-gap-badge-title) 0 0;
	font-size: var(--countdown-title-size);
	font-weight: 700;
	line-height: 1.3;
	color: var(--countdown-title-color);
}

.session-countdown__subtitle {
	margin: var(--countdown-gap-title-subtitle) 0 0;
	font-size: var(--countdown-subtitle-size);
	line-height: 1.4;
	color: var(--countdown-muted);
}

.session-countdown__ring-wrap {
	position: relative;
	margin-top: var(--countdown-gap-subtitle-ring);
	width: var(--countdown-ring-size);
	height: var(--countdown-ring-size);
}

.session-countdown__ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* depart 12h, drainage horaire */
	transform-origin: 50% 50%;
}

.session-countdown__track {
	fill: none;
	stroke: var(--countdown-track);
	stroke-width: var(--countdown-ring-stroke);
}

.session-countdown__progress {
	fill: none;
	stroke: var(--countdown-color);
	stroke-width: var(--countdown-ring-stroke);
	stroke-linecap: round;
	stroke-dasharray: var(--countdown-ring-circumference);
	stroke-dashoffset: calc(
		var(--countdown-ring-circumference) * (1 - var(--progress))
	);
	transition: var(--countdown-ring-transition);
}

.session-countdown__value {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.session-countdown__value > span:first-child {
	font-size: var(--countdown-num-size);
	font-weight: 700;
	color: var(--countdown-color);
}

.session-countdown__label {
	font-size: var(--countdown-label-size);
	color: var(--countdown-muted);
}

.session-countdown__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin-top: var(--countdown-gap-ring-actions);
}

.session-countdown__actions .session-countdown__btn-primary,
.session-countdown__actions .session-countdown__btn-secondary {
	width: 100%;
	justify-content: center;
	margin: 0 !important;
}

.session-countdown__actions .session-countdown__btn-primary {
	height: var(--countdown-btn-height);
	border-radius: var(--countdown-btn-radius) !important;
}

.session-countdown__actions .session-countdown__btn-secondary,
.session-countdown__actions .session-countdown__btn-secondary.ui-state-default {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--countdown-muted) !important;
	font-weight: 400 !important;
}

@media (prefers-reduced-motion: reduce) {
	.session-countdown__progress {
		transition: none; /* l'arc saute d'un cran/s, reste informatif */
	}
}

a:hover {
	color: var(--rouge-bordeau);
}

.ui-commandlink,
.ui-link {
	color: black !important;
	text-decoration: none !important;
}

.ui-commandlink:hover,
.ui-link:hover {
	color: var(--color-8) !important;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
	border-color: var(--color-8) !important;
	background: var(--color-8) !important;
}

/* Surcharge globale du style des boutons outlined */
/* EXCLUT les boutons de pagination qui doivent garder leur style par défaut */
.ui-button-outlined:not(.ui-paginator-page):not(.ui-paginator-next):not(
		.ui-paginator-prev
	):not(.ui-paginator-first):not(.ui-paginator-last) {
	/* color: var(--color-8) !important; */
	border-color: #800020 !important;
}

.ui-button-outlined:not(.ui-paginator-page):not(.ui-paginator-next):not(
		.ui-paginator-prev
	):not(.ui-paginator-first):not(.ui-paginator-last):hover {
	background-color: rgba(128, 0, 32, 0.1) !important;
	/* bordeaux clair translucide */
	color: #800020 !important;
	border-color: #800020 !important;
}

/* Exception : Supprimer les bordures rouges pour les boutons de pagination du dataTable */
/* Réinitialise complètement le style pour éviter le style outlined */
.ui-paginator span,
.ui-paginator a,
.ui-paginator button,
.ui-paginator .ui-state-default,
.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-last,
.ui-datatable .ui-paginator span,
.ui-datatable .ui-paginator a,
.ui-datatable .ui-paginator button,
.ui-datatable .ui-paginator .ui-state-default,
.ui-datatable .ui-paginator .ui-paginator-page,
.ui-datatable .ui-paginator .ui-paginator-next,
.ui-datatable .ui-paginator .ui-paginator-prev,
.ui-datatable .ui-paginator .ui-paginator-first,
.ui-datatable .ui-paginator .ui-paginator-last {
	border: none !important;
	border-color: transparent !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #333333 !important;
	padding: 0.429em 0.857em !important;
	min-width: 2.5em !important;
	text-align: center !important;
	font-weight: normal !important;
}

/* État hover pour les boutons de pagination - sans bordure */
.ui-paginator .ui-paginator-page:not(.ui-state-disabled):hover,
.ui-paginator .ui-paginator-next:not(.ui-state-disabled):hover,
.ui-paginator .ui-paginator-prev:not(.ui-state-disabled):hover,
.ui-paginator .ui-paginator-first:not(.ui-state-disabled):hover,
.ui-paginator .ui-paginator-last:not(.ui-state-disabled):hover {
	background: #e0e0e0 !important;
	border: none !important;
	border-color: transparent !important;
	color: #000000 !important;
}

/* Page active dans la pagination (seulement la page sélectionnée) - sans bordure */
.ui-paginator .ui-paginator-page.ui-state-active,
.ui-paginator .ui-paginator-page.ui-state-active span,
.ui-paginator .ui-paginator-page.ui-state-active a {
	background: var(--color-8) !important;
	border: none !important;
	border-color: transparent !important;
	color: #ffffff !important;
}

/* Numéros de page NON actifs - doivent être noirs*/
.ui-paginator .ui-paginator-page:not(.ui-state-active),
.ui-paginator .ui-paginator-page:not(.ui-state-active) span,
.ui-paginator .ui-paginator-page:not(.ui-state-active) a,
.ui-datatable .ui-paginator .ui-paginator-page:not(.ui-state-active),
.ui-datatable .ui-paginator .ui-paginator-page:not(.ui-state-active) span,
.ui-datatable .ui-paginator .ui-paginator-page:not(.ui-state-active) a {
	color: #333333 !important;
}

/* Boutons désactivés de la pagination - sans bordure */
.ui-paginator .ui-state-disabled,
.ui-paginator .ui-state-disabled span,
.ui-paginator .ui-state-disabled a {
	background: transparent !important;
	border: none !important;
	border-color: transparent !important;
	color: #cccccc !important;
	cursor: default !important;
	opacity: 0.6 !important;
}

/*!* Surcharge globale du style de p:tab *!!* Texte actif ou survolé *!*/
/*.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,*/
/*.ui-tabs .ui-tabs-nav li.ui-state-hover a {*/
/*    color: #800020 !important;*/
/*}*/

/*!* Bordure de l’onglet actif *!*/
/*.ui-tabs .ui-tabs-nav li.ui-tabs-selected {*/
/*    border-color: #800020 !important;*/
/*}*/

/*!* Ligne de surbrillance (barre colorée sous l'onglet actif) *!*/
/*.ui-tabs .ui-tabs-nav li.ui-tabs-selected:after {*/
/*    background-color: #800020 !important;*/
/*}*/

/*********** STYLES  UI-PANEL ***********/

/* Neutraliser les conteneurs directs de p:panel (h:panelGroup) */
div:has(> .ui-panel):not(.ui-tabs-panel):not(.ui-accordion-content):not(
		.ui-wizard-content
	):not(.ui-dialog),
span:has(> .ui-panel) {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: auto !important;
	width: 100% !important;
}

.ui-panel {
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 16px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	margin-bottom: 24px !important;
	overflow: hidden !important;
}

.ui-panel .ui-panel-titlebar {
	background: #ffffff !important;
	border: none !important;
	border-bottom: 2px solid #f8f9fa !important;
	padding: 20px 32px !important;
	color: #333333 !important;
	font-weight: 700 !important;
	font-size: 1.6rem !important;
	border-radius: 16px 16px 0 0 !important;
}

.ui-panel .ui-panel-title {
	color: #333333 !important;
	font-weight: 700 !important;
	font-size: 18px !important;
}

.ui-panel .ui-panel-content {
	background: #ffffff !important;
	padding: 20px !important;
	color: #333333 !important;
	border: none !important;
}

/* Boutons dans le titlebar (toggle, close, etc.) */
.ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon {
	color: #831717 !important;
	transition: all 0.3s ease !important;
}

.ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon:hover {
	color: #5c0f0f !important;
	background: rgba(131, 23, 23, 0.1) !important;
}

/* Responsive pour les panels */
@media (max-width: 768px) {
	.ui-panel .ui-panel-titlebar {
		padding: 16px 20px !important;
		font-size: 1.4rem !important;
	}

	.ui-panel .ui-panel-content {
		padding: 16px !important;
	}
}

/*********** STYLES MESSAGES SIMULATEURS ***********/

/* Message d'erreur */
.message-error {
	color: #c62828 !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
}

/* Message de succès */
.message-success {
	color: #2e7d32 !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
}

/* Style pour h:outputLink dans les panels - Bouton outlined centré */
.ui-panel .ui-panel-content a {
	display: inline-block !important;
	padding: 12px 24px !important;
	color: #800020 !important;
	border: 2px solid #800020 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	margin: 20px auto !important;
	text-align: center !important;
}

.ui-panel .ui-panel-content a:hover {
	background-color: rgba(128, 0, 32, 0.1) !important;
	color: #800020 !important;
	border-color: #800020 !important;
	transform: translateY(-2px) !important;
}

/* Alignement par défaut des panels  */
.ui-panel .ui-panel-content {
	text-align: left !important;
}

/* Centrer uniquement les liens et boutons d'action dans les panels */
.ui-panel .ui-panel-content > a,
.ui-panel .ui-panel-content > .ui-outputpanel > a,
.ui-panel .ui-panel-content .ui-button {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

/*********** COMPATIBILITÉ UI-DIALOG + UI-PANEL ***********/

.ui-dialog .ui-panel {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
}

/* Masquer le titlebar des panels dans les dialogs  */
.ui-dialog .ui-panel .ui-panel-titlebar {
	display: none !important;
}

/* Le contenu du panel reste visible avec un padding */
.ui-dialog .ui-panel .ui-panel-content {
	background: transparent !important;
	padding: 16px !important;
	border: none !important;
}

/* Sur mobile, réduire  le padding pour optimiser l'espace */
@media (max-width: 768px) {
	.ui-dialog .ui-panel .ui-panel-content {
		padding: 12px !important;
	}
}

/*********** STYLE HOVER GLOBAL DATATABLE - ROUGE BORDEAUX ***********/

/* Hover effet rouge bordeaux pour tous les dataTables de l'application */
.ui-datatable tbody tr.ui-widget-content:hover,
.ui-datatable tbody tr:hover {
	background-color: rgba(131, 23, 23, 0.1) !important;
	/* Rouge très clair/rose pâle */
}

.ui-datatable tbody tr.ui-widget-content:hover td,
.ui-datatable tbody tr:hover td {
	color: #831717 !important;
	/* Rouge bordeaux */
}

/*********** STYLES SPINNERS (INPUTNUMBER) - ROUGE BORDEAUX ***********/

/* Boutons spinners des inputNumber (flèches haut/bas) */
.ui-spinner .ui-spinner-button,
.ui-inputnumber-button,
.ui-inputnumber-button-up,
.ui-inputnumber-button-down {
	background: #831717 !important;

	background-color: #831717 !important;
	background-image: none !important;
	border-color: #831717 !important;
	color: #ffffff !important;
	transition: all 0.3s ease !important;
}

/* Hover des boutons spinners */
.ui-spinner .ui-spinner-button:hover,
.ui-inputnumber-button:hover:not(:disabled),
.ui-inputnumber-button-up:hover:not(:disabled),
.ui-inputnumber-button-down:hover:not(:disabled) {
	background: #5c0f0f !important;
	background-color: #5c0f0f !important;
	border-color: #5c0f0f !important;
}

/* Icônes des spinners (flèches) */
.ui-spinner .ui-spinner-button .ui-icon,
.ui-inputnumber-button .ui-icon {
	color: #ffffff !important;
}

/*********** STYLES SELECTONEMENU (DROPDOWN) - ROUGE BORDEAUX ***********/

/* Bouton trigger du selectOneMenu (flèche dropdown) - AVEC CLASSE */
.red-dropdown .ui-selectonemenu-trigger,
.red-dropdown .ui-selectonemenu .ui-selectonemenu-trigger {
	background: #831717 !important;
	background-color: #831717 !important;
	background-image: none !important;
	border-color: #831717 !important;
	color: #ffffff !important;
	transition: all 0.3s ease !important;
}

/* Hover du trigger selectOneMenu - AVEC CLASSE */
.red-dropdown .ui-selectonemenu-trigger:hover,
.red-dropdown
	.ui-selectonemenu:not(.ui-state-disabled)
	.ui-selectonemenu-trigger:hover {
	background: #5c0f0f !important;
	background-color: #5c0f0f !important;
	border-color: #5c0f0f !important;
}

/* Icône de la flèche dropdown - AVEC CLASSE */
.red-dropdown .ui-selectonemenu-trigger .ui-icon,
.red-dropdown .ui-selectonemenu-trigger .ui-icon-triangle-1-s {
	color: #ffffff !important;
}

/* Optimisation de l'espace pour afficher le texte complet du label - AVEC CLASSE */
.red-dropdown .ui-selectonemenu-trigger {
	width: 2em !important;
}

.red-dropdown .ui-selectonemenu-label {
	width: calc(100% - 2em) !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: normal !important;
	padding-right: 0.5em !important;
	color: #333333 !important;
}

/* Style outlined pour les boutons "Choisir" des p:fileUpload */

.bouton-choisir2.ui-fileupload-choose,
.bouton-choisir2 .ui-fileupload-choose,
.bouton-choisir2.ui-button,
.bouton-choisir2 .ui-button {
	color: var(--color-8) !important;
	border-color: #800020 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	/* Supprimer les gradients du thème */
	transition: all 0.3s ease !important;
	min-width: fit-content !important;
	/* Empêcher le bouton de se rétrécir */
	width: auto !important;
	/* Largeur automatique selon le contenu */
}

/* Empêcher la troncature du texte interne du bouton */
.bouton-choisir2 .ui-button-text,
.bouton-choisir2.ui-button .ui-button-text {
	overflow: visible !important;
	text-overflow: clip !important;
	/* Pas de "..." */
	white-space: nowrap !important;
	/* Le texte reste sur une ligne */
}

/* Hover du bouton "Choisir" */
.bouton-choisir2.ui-fileupload-choose:hover,
.bouton-choisir2 .ui-fileupload-choose:hover,
.bouton-choisir2.ui-button:hover:not(:disabled),
.bouton-choisir2 .ui-button:hover:not(:disabled) {
	background-color: rgba(128, 0, 32, 0.1) !important;
	color: #800020 !important;
	border-color: #800020 !important;
}

/* ========================================
DIALOGS DE NOTIFICATION
   ======================================== */
/* Permettre le retour à la ligne dans les dialogs de notification */
.ui-dialog .ui-datatable.table tbody td,
.ui-dialog .ui-datatable.table thead th {
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

/* Largeur spécifique pour les dialogs de notification (desktop) */
@media (min-width: 769px) {
	.ui-dialog.notification-dialog {
		max-width: 75% !important;
		width: 65% !important;
		min-width: 400px !important;
		max-height: 80vh !important;
	}
}

/* Surcharge spécifique pour mobile */
@media (max-width: 768px) {
	.ui-dialog .ui-datatable.table tbody td,
	.ui-dialog .ui-datatable.table thead th {
		white-space: normal !important;
	}

	/* Gestion des DataTables larges dans les dialogs : scroll horizontal */
	.ui-dialog .ui-datatable-tablewrapper,
	.ui-dialog .ui-datatable-scrollable-body-wrapper,
	.ui-dialog .ui-datatable-scrollable-wrapper {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		max-width: 100% !important;
	}

	/* Masquer le header dupliqué dans les DataTables avec scrollable="true" */
	.ui-dialog .ui-datatable-scrollable-body thead,
	.ui-dialog .ui-datatable-scrollable-body-table thead {
		display: none !important;
	}

	/* Réduction de la taille des colonnes pour optimiser l'espace (seulement header fixe et cellules) */
	.ui-dialog .ui-datatable-scrollable-header th,
	.ui-dialog .ui-datatable:not(.ui-datatable-scrollable) th,
	.ui-dialog .ui-datatable td {
		min-width: 80px !important;
		font-size: 0.85rem !important;
		padding: 8px 6px !important;
	}

	/* Forcer tous les dialogs avec notification-dialog à 90% */
	.ui-dialog.notification-dialog {
		width: 90% !important;
		max-width: 90% !important;
		min-width: 90% !important;
	}
}

/* Icônes dans le bouton fileUpload */
.bouton-choisir2 .ui-icon,
.bouton-choisir2.ui-button .ui-icon {
	color: var(--color-8) !important;
}

/* .ui-selectonemenu .ui-selectonemenu-trigger {
	background-color: var(--color-8) !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
	color: var(--white-text-white) !important;
}

.ui-selectonemenu .ui-selectonemenu-label {
	padding-right: 3rem !important;
}

.ui-panelgrid .ui-panelgrid-cell {
	padding: 0.75rem 1rem !important;
} */

/*********** SIMULATEUR DE CRÉDITS - STYLES UX/UI ***********/

/* Conteneur principal - Flexbox pour égaliser les hauteurs */
.simulator-container {
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

.simulator-container > div {
	display: flex;
}

/* Cards du simulateur */
.simulator-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	height: 100%;
	width: 100%;
}

/* Card résultats - centrer verticalement le contenu */
.simulator-results {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Card formulaire - accent rouge */
.simulator-form {
	border-top: 4px solid #831717;
}

/* Card résultats - accent rouge clair (nuance) */
.simulator-results {
	border-top: 4px solid #a94442;
	background: #fafbfc;
}

/* Conteneur des boutons - centrage */
.simulator-btn-container {
	text-align: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
}

/* Bouton principal Simuler */
.simulator-main-btn {
	background: linear-gradient(135deg, #831717 0%, #5c0f0f 100%) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 12px 32px !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(131, 23, 23, 0.3) !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
}

.simulator-main-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(131, 23, 23, 0.4) !important;
}

/* Bouton secondaire Souscrire */
.simulator-secondary-btn {
	background: transparent !important;
	color: #831717 !important;
	border: 2px solid #831717 !important;
	padding: 10px 28px !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
}

.simulator-secondary-btn:hover {
	background: #831717 !important;
	color: #ffffff !important;
}

/* Valeurs des résultats */
.result-value {
	color: #333333 !important;
	font-size: 1.1rem !important;
	font-weight: 600 !important;
}

.result-total {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
}

/* Panel différé */
.differe-panel {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed #e5e7eb;
}

/* Labels du formulaire */
.simulator-card .ui-outputlabel {
	font-weight: 500;
	color: #333333;
	font-size: 0.9rem;
}

/* Espacement des cellules */
.simulator-card .ui-panelgrid-cell {
	padding: 8px 4px !important;
}

/* Responsive mobile */
@media (max-width: 768px) {
	.simulator-card {
		padding: 16px;
	}

	.simulator-btn-container {
		margin-top: 16px;
		padding-top: 16px;
	}

	.simulator-main-btn {
		width: 100% !important;
		padding: 14px 24px !important;
	}

	.simulator-secondary-btn {
		width: 100% !important;
		padding: 12px 24px !important;
	}

	.result-value {
		font-size: 1rem !important;
	}

	.result-total {
		font-size: 1.1rem !important;
	}
}

@font-face {
	font-family: "Spartan-Regular";
	src: url("/auth/assets/fonts/spartan/static/Spartan-Regular.ttf");
}

@font-face {
	font-family: "Spartan-Bold";
	src: url("/auth/assets/fonts/spartan/static/Spartan-Bold.ttf");
}

@font-face {
	font-family: "DM Sans - Regular";
	src: url("/auth/assets/fonts/dm_sans/static/DMSans-Regular.ttf");
}

@font-face {
	font-family: "DM Sans - Bold";
	src: url("/auth/assets/fonts/dm_sans/static/DMSans-Bold.ttf");
}

.ui-selectonemenu-panel,
.ui-autocomplete-panel,
.ui-datepicker,
.ui-calendar-panel,
.ui-overlaypanel {
	z-index: 1150 !important;
}

.custom-grid .col-left {
	text-align: left;
	width: 50%;
}

.custom-grid .col-right {
	text-align: right;
	width: 50%;
}

/* ══════════════════════════════════════
   PrimeFaces global overrides
   ══════════════════════════════════════ */

/* Growl passe au-dessus uniquement quand un dialog modal est ouvert */
body:has(.ui-widget-overlay) .ui-growl {
	z-index: 9999 !important;
}

/* Responsive : growl pleine largeur sur petits écrans */
@media (max-width: 576px) {
	.ui-growl {
		width: calc(100% - 20px) !important;
		left: 10px !important;
		right: 10px !important;
		top: 10px !important;
	}
}