html, body 
	{
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
				
	/* Avoid blurring by not applying transforms to text-level elements */
	h1,h2,h3,h4,h5,h6,p,span,label,a,button,input,td,th,strong,em {
		transform: none !important;
		-webkit-transform: none !important;
		backface-visibility: hidden !important;
		-webkit-backface-visibility: hidden !important;
	}

	/* Tables responsive fallback for cases where class was applied on <table> */
	.table.table-responsive, table.table-responsive {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Slight touch target improvements */
	.btn { min-height: 36px; }
	/* Prevent image upscaling blurriness */
	img { image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }

	#barre_laterale_d{
		background: white;
		padding: 10px;
		width: 240px !important;
		border: 2px ridge #d9cfcf;
		padding:5px !important
	}


	#barre_laterale_d input textarea{
		width:100%
	}

	input[name="test_connexion"]{
		color:white;
		background:red
	}

	input[name="numeroClient_C"]{

	}

	.btn-info{
		background-color:#08C5D1;
		color:white;
		font-weight: bold;
	}

	.btn-info:hover{
		background-color:white
		color:#286090;
	}

	.btn-info-context{
		background:#7D4FFE;
		color:white;
		border:2px solid #a49d9d;
		border-top-left-radius: 50px;  /* Arrondi du coin supérieur gauche */  
		border-bottom-left-radius: 50px; /* Arrondi du coin inférieur gauche */  
		cursor: pointer;
		transition: all 0.3s ease; /* Animation fluide */
		transform: scale(0.8); /* Réduire la taille du bouton */
	}

	.btn-info-context:hover{
		background:#7D4FFE;
		color:white;
		border:2px solid #a49d9d;
		transform: scale(1); /* Rétablir la taille normale au survol */
	}		


	.btn-cacher-contexte{
		background:red;
		color:white;
		border:2px solid #a49d9d;
		border-top-right-radius: 100px; 
		border-bottom-right-radius: 100px;
		cursor: pointer;
		font-size: 16px;
		font-weight: bold;
		transition: all 0.3s ease; /* Animation fluide */
		transform: scale(0.8); /* Réduire la taille du bouton */
	}

	.btn-cacher-contexte:hover {
		border:2px solid #a49d9d;
		transform: scale(1); /* Rétablir la taille normale au survol */
	}

	legend{
		background: #286090 !important;
	}

	.btn-primary{
		background: #286090;
	}

	.btn-warning{
		background:red;
		color:white
	}
	.btn{
		border-radius:0
	}

	/* Modal */
	.modal-header{
		background:#286090;
		color:white
	}

	.modal-header .close{
		color:white !important;
		background:transparent !important;
		border:1px solid white !important
	}

	.modal-header legend{
		background:transparent !important;
		font-size:14px;
		text-align:right
	}

	.modal-footer .btn-default{
		border: solid #286090 !important;
		color: #286090 !important;

	}

	.modal-title{
		font-size:16px !important
	}

	@media (max-width: 1199px) {
		.main{
			margin-left:0 !important
		}
	}


	td input[readonly]{
		background: #f7f7f7 !important;
	}

	#barre_laterale_d input{
		color:black !important;
		font-size:12px;
		font-weight:700
	}

	#barre_laterale_d .form-control{
		font-weight: 700;
		font-size: 12px;
	}

	.sr-only{
		display:none;
	}

	table{
		background-color:white !important
	}

	.table th:hover {
		background-color: none !important;   
	}

	.table tr:hover{
		font-style: normal !important;
	}
	.table td:hover{
		font-style: normal !important;
	}
	.table {
		--bs-table-color: null !important;
		--bs-table-striped-color:null !important
	/* --bs-table-color: yellow; */
	}

	.table{
		--bs-table-bg: null !important;
	}

	thead tr{
		color:black
	}

	fieldset legend,form legend{
		background:#286090
	}

	legend{
		background:#027be3
	}

	#barre_laterale_d input{
		width:100%;
		text-align:left;
		border:none;
	}

	#barre_laterale_d .form-control{
		font-size:12px !important
	}

	footer{
		background:transparent;
		color:black !important
	}

	.filter-option-inner-inner{
		background-color : #D4D3DC !important;
	}


	.table > thead
	{
		background-color: #5c656a;
		color:white !important;
	}
	
	thead{
		font-size: 13px;
	}

	thead tr {
		color: white;
	}

	th {
		background-color: #027BE3;
		color: white;
	}


	#barre_laterale_d{
		max-height: calc(100vh - 106px);
		overflow: auto;
	}

	#barre_laterale_d input textarea{
		width:100%
	}

	.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
		text-align:center; 
		font-weight: bold; 
		background-color:#696969; 
	}

	h6 a{
		text-decoration: underline;
	}

	h6 a:hover{
		background-color:#08C5D1;
		color:white;
		text-decoration: none;
	}

	.mb-2 textarea{
		font-size:9pt; width:100%;
		border: 1px solid #767676;
	}

	.mb-2 .text-center{
		font-size:9pt;
		font-weight:bold;
		background-color: orange; /*#6c757d;*/
		color: white;
	}

	.image-container img {
		transition: filter 0.3s ease-in-out;
	}

	.image-container img:hover {
		filter: grayscale(100%);
	}

	.photo-container img {
		transition: transform 0.3s ease-in-out;
		cursor:pointer;
	}

	.photo-container img:hover {
		transform: scale(1.1);
		cursor:pointer;
	}

	.initials {  
		display: inline-block; /* Nécessaire pour appliquer border-radius */  
		width: 25px; /* Largeur du cercle */  
		height: 25px; /* Hauteur du cercle, doit être égale à la largeur */  
		background-color: #4caf50; /* Couleur de fond */  
		border-radius: 15%; /* Pour arrondir complètement l'élément */  
		color: #fff; /* Couleur du texte */  
		text-align: center; /* Centrer le texte */  
		line-height: 25px; /* Aligner verticalement le texte */ 
	}

	/* Style commun (desktop par défaut) */
	#a_deconnect, 
	#a_actualiser {
		font-size: 11pt; 
		border: 1px solid #7D4FFE; 
		border-radius: 5px; 
		padding: 4px 10px; 
		background-color: #7D4FFE; 
		color: white; 
		font-weight: bold;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 36px;        /* hauteur fixe */
		line-height: 1;      /* éviter que le texte déborde */
	}

	/* Hover */
	#a_deconnect:hover, 
	#a_actualiser:hover {
		background-color: white !important;
		color: #7D4FFE !important;
		border-color: #7D4FFE !important;
	}

	#a_deconnect:hover i, 
	#a_actualiser:hover i {
		color: #7D4FFE !important;
	}


	#sidebar-nav .nav-link i{
		color: #fff !important;
	}

	#sidebar-nav .nav-link:hover i{
		color: #696969 !important;
	}

	.legend-title {
		color: #2c3e50;
		font-weight: 600;
		padding-bottom: 10px;
		border-bottom: 2px solid #3498db;
		text-align: center;
		white-space: normal !important;     /* permet le retour à la ligne */
		word-wrap: break-word !important;   /* force la coupure si un mot est trop long */
		overflow-wrap: break-word !important;
	}

	/*Spinner responsive*/
	.spinner-responsive {
		padding-top: 20px;
		text-align: center;
		color: #7d4ffe;
	}

	.spinner-responsive i {
		font-size: clamp(2rem, 8vw, 5rem) !important;
		animation: fa-spin 2s infinite linear;
	}
	
	/* Styles responsives pour SweetAlert */
	.responsive-swal-popup {
		border-radius: 12px !important;
		box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
	}

	.responsive-swal-title {
		font-size: clamp(16px, 4vw, 18px) !important;
		line-height: 1.4 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		text-align: center !important;
		padding: 10px 15px !important;
		margin-bottom: 15px !important;
	}

	.responsive-swal-html {
		font-size: clamp(14px, 3.5vw, 16px) !important;
		line-height: 1.4 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* Scrollbar personnalisée pour le défilement */
	.responsive-swal-title::-webkit-scrollbar,
	.responsive-swal-html::-webkit-scrollbar {
		width: 6px;
	}

	.responsive-swal-title::-webkit-scrollbar-track,
	.responsive-swal-html::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.responsive-swal-title::-webkit-scrollbar-thumb,
	.responsive-swal-html::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 3px;
	}

	.responsive-swal-title::-webkit-scrollbar-thumb:hover,
	.responsive-swal-html::-webkit-scrollbar-thumb:hover {
		background: #a8a8a8;
	}
	
	#lienLogo{
		width:100px;
	}

	/* Media queries spécifiques pour SweetAlert */
	@media (max-width: 576px) {
		.responsive-swal-popup {
			margin: 10px !important;
			width: calc(100vw - 20px) !important;
			max-width: calc(100vw - 20px) !important;
		}
		
		.responsive-swal-title {
			font-size: 16px !important;
			padding: 8px 10px !important;
		}
		
		.swal2-actions {
			flex-direction: column !important;
			gap: 10px !important;
		}
		
		.swal2-confirm,
		.swal2-cancel {
			width: 100% !important;
			margin: 0 !important;
		}
		
		#lienLogo{
			width:30px;
		}
	}

	@media (max-width: 400px) {
		.responsive-swal-popup {
			padding: 15px !important;
		}
		
		.responsive-swal-title {
			font-size: 15px !important;
			padding: 5px 8px !important;
		}
		
		#lienLogo{
			width:30px;
		}
	}

	
	/* Classe pour cacher sur mobile et afficher sur grand écran */
	.hide-on-mobile {
		display: none;
	}

	/* Classe pour positionner à l'extrême droite */
	.view-end {
		margin-left: auto;
		white-space: nowrap;
	}
	
	/* Style pour tous les éléments disabled */
	.form-control:disabled,
	.form-select:disabled,
	.form-check-input:disabled,
	.btn:disabled,
	input:disabled,
	select:disabled,
	textarea:disabled {
		background-color: #e5e7e6 !important;
		font-weight: bold !important;
	}

	/* Style pour tous les éléments readonly */
	.form-control[readonly],
	input[readonly],
	select[readonly],
	textarea[readonly] {
		background-color: #e5e7e6 !important;
		font-weight: bold !important;
	}
	
	/* Affichage sur grand écran */
	@media (min-width: 768px) {
		.hide-on-mobile {
			display: inline;
		}
	}
	
	/* Garantir que tous les éléments restent sur la même ligne */
	.card-header h5 {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
	}

	.card-header h5 i,
	.card-header h5 .hide-on-mobile,
	.card-header h5 .view-end {
		flex-shrink: 0;
		white-space: nowrap;
	}
	
	
	/* === Correctifs affichage textes et tables === */
	body, h1, h2, h3, h4, h5, h6, p, span, a, label, td, th, strong, em, button, input {
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		transform: none !important;
	}

	small {
		display: inline;     
		white-space: normal !important;     /* permet le retour à la ligne */
		word-wrap: break-word !important;   /* force la coupure si un mot est trop long */
		overflow-wrap: break-word !important;
		text-align:center;
	}



	/* Tables responsive fallback - web par défaut */
	.table.table-responsive, table.table-responsive {
		display: table;
		width: 100%;
	}

	#btn_sidebar{
		margin-left:15px; 
		margin-right:25px;
	}

	#btn_sidebar:hover{
		background-color: #E4E4E4 !important;
	}

	.photoId{
		width: 30px !important;
		height: 30px !important;
		object-fit: cover;
	}
	
	.logo img {
		width: 120px;   /* choisis la taille qui te convient */
		height: auto;   /* conserve les proportions */
		max-height: 50px; /* empêche que ça déborde trop en hauteur */
		object-fit: contain; /* évite les déformations */
	}
	
	/* Styles pour les sélecteurs mobiles */
	.mobile-select {
		max-width: 100%;
		word-wrap: break-word;
	}
	
	.photo-vide{
		color: #ccc; 
		font-size: 30px !important;
	}
	
	/* Couleurs spécifiques */
	.color-1 { background-color: #726a57; }
	.color-2 { background-color: orange; }
	.color-3 { background-color: red; }
	
	.form-control, .form-select, .form-control-plaintext{
		border: 1px solid #333533 !important;
	}
	
	/* Animation pour les progress bars */
	.progress-bar {
		transition: width 1s ease-in-out;
	}

	
	.progress {
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid #333533;
		height: 20px !important;
	}

	.progress-bar {
		font-weight: 500;
		font-size: 0.8rem;
	}
	
	#link_maps{
		text-decoration-line: underline; 
	}
	
	#link_maps i{
		color: red !important;
	}
	
	#link_maps:visited{
		color: #ff00ff !important;
	}
	
		
	/* En mobile : scroll horizontal */
	@media (max-width: 768px) {
	  /* Transformation du tableau en cartes sur mobile */
		.table-responsive table, 
		.table-responsive thead, 
		.table-responsive tbody, 
		.table-responsive th, 
		.table-responsive td, 
		.table-responsive tr { 
			display: block; 
		}
		
		.table-responsive thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		.table-responsive tr { 
			border: 1px solid #ccc; 
			margin-bottom: 1rem;
			border-radius: 0.25rem;
			padding: 0.5rem;
		}
		
		.table-responsive td button{
			font-size: 1.8rem !important;
			font-weight: bold !important;
		}
		
		.table-responsive td { 
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
			white-space: normal;
			text-align: left;
			display: flex;
			align-items: center;
			min-height: 2.5rem;
		}
		
		.table-responsive td:before { 
			content: attr(data-label);
			position: absolute;
			top: 50%;
			left: 0.5rem;
			width: 45%; 
			padding-right: 10px; 
			transform: translateY(-50%);
			font-weight: bold;
			white-space: nowrap;
		}
		
		/* Styles spécifiques pour les colonnes importantes */
		.table-responsive td:nth-of-type(1) {
			padding-left: 0.5rem;
			display: block;
			text-align: center;
			border-bottom: none;
		}
		
		.table-responsive td:nth-of-type(1):before {
			display: none;
		}
		
		.table-responsive td:nth-of-type(2) {
			padding-left: 0.5rem;
			display: block;
			text-align: center;
			border-bottom: none;
		}
		/**/
		.table-responsive td:nth-of-type(2):before {
			display: none;
		}
		
		/* Cacher les colonnes moins importantes sur mobile */
		.table-responsive td.d-none.d-md-table-cell {
			display: none;
		}
		
		.photoId{
			width: 50px !important;
			height: 50px !important;
		}
		
		.btn-info, .btn-info i, .btn-sm, .btn-sm i{
			font-size: 1.5rem !important;
		}
		
		.btn-info-context i, .btn-cacher-contexte i{
			font-size: 1.5rem !important;
		}
		
		#lienLogo{
			width:30px;
		}
				
		.logo img {
			width: 70px !important;
			height: auto !important;
			max-height: 40px;
			margin-left:-37px;
		}
		
		#a_deconnect{
			margin-left:-120px;
			margin-right:20px;
		}
		
		#a_deconnect, 
		#a_actualiser {
			font-size: 1.5rem !important;
			
			border-radius: 50%;
			width: 20px;       /* taille uniforme (carré rond) */
			height: 20px;
			padding: 0;
		}
		
		#a_deconnect {
			background-color: #7d4ffe;
			border: 1px solid #7d4ffe;
			color: #fff;
		}
		
		#a_actualiser {
			background-color: #fff;
			border: 1px solid #7d4ffe;
			color: #7d4ffe;
		}
		
		#header{
			border-bottom:1px solid #000;
		}

		#a_deconnect i, 
		#a_actualiser i {
			font-size: 1.2rem !important;
		}
		
		
		#a_deconnect span, #a_actualiser span {
			display: none !important; /* Cache le texte sur mobile */
		}
		
		.photo-vide{
			font-size: 4rem !important;
		}
		
		.legend-title{
			
			color: #fff !important;
		}
		
		h4 i{
			font-size: 1.6rem !important;
		}
		
		#a_deconnect i, #a_actualiser i{
			font-weight:bold;
			font-size: 1.5rem !important;  
		}
	  
		#btn_filtre, #btn_filtre span, #btn_filtre i{
			font-size: 1.8rem !important; 
		}
	  
		.btn_autre, .btn_autre span, .btn_autre i, marquee{
			font-size: 1.8rem !important; 
		}
		
		#link_maps, #link_maps i{
			font-size:1.8rem !important;
		}
	  
		body{
			background-color : #EBF2FA !important;
		}
		
		body, p, span, a, label, td, th, small, small i, textarea {
			font-size: 1.6rem !important;
			font-weight: 600 !important;
		}
	  
		h1, input, select { font-size: 2.1rem !important; font-weight: 800 !important; }
		h2, h2 i { font-size: 2rem !important; font-weight: 700 !important; }
		h3, h4, h5, h6 { font-size: 1.8rem !important; font-weight: 600 !important; }
		h3 i, h4 i, h5 i, h6 i { font-size: 1.8rem !important; font-weight: 600 !important; }
	   
		.h4 { font-size: 1.8rem !important; font-weight: 600 !important; }
		
	  
		legend, legend i {font-size:2.1rem !important;}
		
		input[type="text"], input[type="file"], .mobile-select{
			border: 1px solid gray;
		}
		
		.form-control-plaintext, .etatRdv{
			font-size: 1.8rem !important;
		}
		

		/* Agrandissement de l’icône menu mobile */
		.toggle-sidebar-btn {
			font-size: 2rem; /* plus grande en mobile */
			cursor: pointer;
		}
	  
		#bell{
			color: #2c3e50 !important; 
		}
	  
		.bi-bell{
			font-size: 2.5rem !important; 
		
		}
	  
		#span_notification{
			font-size: 1.3rem !important;   
		}
	  
		#div_numero strong{
			font-size: 1.8rem !important;
		}
		
		#h4_titre, #h4_titre i{
			font-size: 2rem !important;
		}
		
		#id_titre_page{
			font-size: 2rem !important;
			word-wrap: break-word !important;
			overflow-wrap: break-word !important;
		}
		
		.message-text {
            background-color: #e5e7e6;
            border: 1px solid #000;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
            font-size: 0.9rem;
            line-height: 1.4;
            max-height: 150px;
            overflow-y: auto;
			box-sizing: border-box; /* Important pour inclure le padding dans la largeur */
        }
		
		.ml-2 i{
			font-size: 2rem !important;
		}
	}

	/* Menu mobile en bas d'écran */
	.mobile-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1001;
		background-color: #FAFAFA;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		padding: 8px 0;
		display: none;
	}

	.mobile-nav-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.mobile-nav-item {
		flex: 1;
		text-align: center;
	}

	.mobile-nav-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-decoration: none;
		color: #2c3e50;
		padding: 5px 0;
		font-size: 0.5rem;
	}

	.mobile-nav-icon {
		font-size: 2.0rem !important;
		margin-bottom: 4px;
	}
	
	.mobile-nav-label{
		font-size: 10pt !important;
	}
	
	.mobile-nav-icon:active, .mobile-nav-icon:focus-visible {
		color:#5784BA !important;
	}
	
	.mobile-nav-label:active, .mobile-nav-label:focus-visible{
		color:#5784BA !important;
	}

	/* Styles pour le menu burger */
	.burger-menu-container {
		position: relative;
	}

	.burger-icon {
		font-size: 1.8rem !important;
	}

	.burger-dropdown-menu {
		position: absolute;
		bottom: 100%;
		right: 10px; /* Changé de left:50% à right:10px pour aligner à droite */
		transform: none; /* Supprimé le translateX */
		background-color: #FAFAFA;
		border-radius: 8px;
		box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
		padding: 10px;
		min-width: 180px; /* Légèrement plus large pour les libellés longs */
		display: none;
		flex-direction: column;
		z-index: 1002;
		margin-bottom: 10px;
	}

	.burger-dropdown-menu.show {
		display: flex;
	}

	.burger-menu-item {
		display: flex;
		align-items: center;
		padding: 12px 15px; /* Plus d'espace */
		text-decoration: none;
		color: #2c3e50;
		border-bottom: 1px solid #eee;
		white-space: nowrap; /* Empêche le texte de passer à la ligne */
	}

	.burger-menu-item:last-child {
		border-bottom: none;
	}

	.burger-menu-item i {
		margin-right: 12px;
		font-size: 1.5rem !important;
		font-weight: 500;
		min-width: 20px; /* Largeur fixe pour l'icône */
	}

	.burger-menu-item span {
		font-size: 1.5rem !important;
		font-weight: 500; /* Plus gras pour mieux lire */
	}

	/* Overlay pour fermer le menu en cliquant ailleurs */
	.burger-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: transparent;
		z-index: 1000;
		display: none;
	}

	.burger-overlay.show {
		display: block;
	}

	/* Alternative : Aligner à gauche avec un décalage */
	/* Si vous préférez aligner à gauche plutôt qu'à droite */
	.burger-dropdown-menu.left-aligned {
		left: 10px; /* Pour aligner à gauche */
		right: auto;
		transform: none;
	}

	/* Pour les très petits écrans, on s'assure que le menu ne dépasse pas */
	@media (max-width: 360px) {
		.burger-dropdown-menu {
			right: 5px;
			min-width: 160px;
		}
	  
		.burger-menu-item {
			padding: 10px 12px;
		}
	  
		.burger-menu-item span {
			font-size: 0.85rem;
		}
	}

	/* Cacher le menu desktop sur mobile */
	@media (max-width: 991.98px) {
		.desktop-menu {
			display: none;
		}
	  
		.mobile-bottom-nav {
			display: block;
		}
	  
		/* Ajuster le contenu principal pour éviter qu'il soit caché par le menu */
		.main {
			padding-bottom: 70px !important;
		}
	  
	  /* Masquer le bouton sidebar en mode mobile */
		#btn_sidebar {
			display: none !important;
		}
	  
		/* Ajustements pour le header quand le bouton est masqué */
		.header .d-flex.align-items-center.justify-content-between {
			margin-left: 10px;
		}
	}

	/* Sur desktop, cacher le menu mobile */
	@media (min-width: 992px) {
		.mobile-bottom-nav {
			display: none !important;
		}
	  
		.desktop-menu {
			display: block;
		}
	  
		#btn_sidebar {
			display: inline-block !important;
		}
	}