body {
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	margin: 0;
	background: #F0F2F5; /* Un gris légèrement bleuté plus moderne */
	padding-top: 50px;
}

h1 {
	/* inline-flex permet de garder la largeur du contenu (comme display: table) */
	/* tout en permettant l'alignement vertical via align-items */
	display: inline-flex; 
	align-items: center;
	gap: 8px; /* Espace entre l'icône et le texte */

	/* Centrage horizontal du bloc lui-même */
	margin-left: auto;
	margin-right: auto;
	display: flex; /* On utilise flex ici pour le centrage si le parent est un container flex */
	width: fit-content; /* SOLUTION CLÉ : Force le bloc à ne prendre que sa largeur réelle */

	position: relative;
	color: #F26522;
	-webkit-text-stroke: 1px #933E00;
	font-family: sans-serif;
}

h1 iconify-icon {
	font-size: 2em; /* 200% de la taille du texte */
	/* Le vertical-align n'est plus nécessaire grâce au flex du parent */
}

h1::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 100%;
	height: 12px;
	background-color: rgba(242, 149, 4, 0.34);
	z-index: -1;
}

h2 {
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	color: #1A1A1A;
	text-align: center;
}

h3 {
	display: block;			/* Transforme le h3 en bloc pour permettre le centrage */
	width: fit-content;		/* La largeur s'adapte au contenu, la bordure reste sous le texte */
	margin: 10px auto;		/* Centre l'élément horizontalement */
	font-size: 20px;
	color: #1A1A1A;
	border-bottom: thick double #32A1CE;
}

.point_etape {
	font-style: italic;
	color: #F26522;
	margin: -15px 0 15px;
	text-align: center;
}

/*************************************
**********LES ICÔNES DE MENU**********
*************************************/
	.disconnect,
	.nav_container_gauche {
		/* On retire le font-size d'ici pour que le texte reste normal */
		position: absolute;
		top: 10px;
		display: flex;
		align-items: center; /* Aligne verticalement le texte et l'icône */
	}

	.disconnect {
		right: 10px;
		text-decoration: none; /* Optionnel : enlève le soulignement */
	}

	/* On cible spécifiquement l'icône à l'intérieur du lien */
	.disconnect iconify-icon,
	.nav_container_gauche {
		font-size: 300%; /* Seule l'icône sera grande */
	}

	.nav_container_gauche {
		left: 10px;
		gap: 15px;
	}

	.nav_link,
	.disconnect {
		color: #F26522;
	}
/*************************************
**************************************
*************************************/

/*************************************
********LISTE DES UTILISATEURS********
*************************************/
	.liste_container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 20px;
	}

	/* Style de la liste des utilisateurs */
	.element_list {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	/* Style de chaque carte utilisateur */
	.element_card {
		background: #FFFFFF;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		padding: 20px;
		display: flex;
		align-items: center;
		gap: 20px;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.element_card:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	}

	/* Avatar de l'utilisateur */
	.element_icone {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #F26522;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 40px;
	}

	/* Informations de l'utilisateur */
	.element_info {
		flex: 1;
	}

	.liste_container .element_info p {
		margin: 5px 0;
	}

	.element_info h3 {
		margin: 0 0 5px 0;
		color: #2C3E50;
	}

	.element_info p {
		margin: 0;
		color: #7F8C8D;
		font-size: 14px;
	}

	/* Boutons d'action */
	.element_actions {
		display: flex;
		gap: 10px;
		/*! font-size: 200%; */
	}

	.btn-edit,
	.btn-delete,
	.btn-download {
		padding: 7px 8px 0 8px;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		font-weight: bold;
		transition: background-color 0.2s;
		font-size: 200%;
		color: #FFFFFF;
	}

	.btn-edit {
		background-color: #2ECC71;
	}

	.btn-edit:hover {
		background-color: #27AE60;
	}

	.btn-delete {
		background-color: #E74C3C;
	}

	.btn-delete:hover {
		background-color: #C0392B;
	}

	.btn-download {
		background-color: #5EA6F4;
	}

	.btn-download:hover {
		background-color: #1987FF;
	}

	/* Responsive */
	@media (max-width: 768px) {
		.element_card {
			flex-direction: column;
			text-align: center;
		}

		.element_actions {
			margin-top: 15px;
		}
	}
/*************************************
**************************************
*************************************/

.texte_vert_important {
	color: #006C13;
	font-weight: bold;
}

.texte_rouge_important {
	color: #FF0000;
	font-weight: bold;
}

/*********************
Erreur 404
*********************/
	.bloc_404 {
		text-align: center;
		font-size: 200%;
		line-height: 200%;
		max-width: 70%;
		margin: 0 auto;
	}

	@media only screen and (max-width: 760px), only screen and (max-device-width: 760px) {
		.bloc_404 img {
			width: 300px;
		}
	}
/*********************
**********************
*********************/

/*********************
******PAGINATION******
*********************/
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin: 20px 0;
	}

	.page-numbers {
		display: flex;
		gap: 5px;
	}

	.num-page, .btn-paginat {
		padding: 8px 12px;
		border: 1px solid #CCCCCC;
		text-decoration: none;
		color: #333333;
		border-radius: 4px;
		transition: background 0.3s;
	}

	.num-page.active {
		background-color: #F26522;
		color: #FFFFFF;
		font-weight: bold;
	}

	.num-page,
	.btn-paginat,
	.num-page.active {
		border-color: #F26522;
	}

	.num-page:hover:not(.active), .btn-paginat:hover {
		background-color: #F0F0F0;
	}
/*********************
**********************
*********************/