@layer pages {	/*- Définit une couche nommée pages dans le système de cascade CSS. Cela permet de mieux organiser les styles et de gérer les priorités entre différentes couches.*/

/* === Base === */
	* {
		box-sizing: border-box;	/*- Applique le modèle de boîte border-box à tous les éléments : padding et bordures inclus dans la largeur/hauteur.*/
	}
	
	body.page-liste-comptes {
		margin: 0;	/*Supprime les marges par défaut du corps de la page.*/
		font-family: 'Segoe UI', sans-serif;	/*Définit la police principale de la page.*/
		/*background: linear-gradient(135deg, #a3d5ff, #e0f7ff);	/*Applique un dégradé en arrière-plan du haut gauche vers le bas droit.*/
		/*display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		color: #003366;	/*Définit la couleur du texte principale en bleu foncé.*/
		padding: 0;
	}

/* === Titres === */
	h2 {
		color: #4a4a4a;	/*- Change la couleur des titres <h2> en gris foncé.*/
	}


/* === Formulaires === */

	.form-container {
		background: #fff;	/*Fond blanc*/
		padding: 2rem;	/*Espacement interne.*/
		border-radius: 12px;	/*Coins arrondis.*/
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);	/*Ombre portée douce.*/
		max-width: 700px;	/*Centrage horizontal avec largeur maximale.*/

		margin: auto;
	}
	
	.form-group {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
		margin-bottom: 15px;
		display: flex;
		align-items: center;	   /* icône et label bien centrés verticalement */
		justify-content: space-between;
		gap: 10px;	/* espace entre l’icône et le bloc checkbox+texte */
		margin-bottom: 15px;
	}
	
	.form-group input {
		width: 100%;
		padding: 10px 10px 10px 35px;
		border: 1px solid #ccc;
		border-radius: 8px;
		font-size: 1rem;
		transition: border-color 0.3s;
	}
	
	.form-group select {
		padding: 10px 10px 10px 35px;
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 100%;
		font-size: 16px;
		transition: border-color 0.3s;
		color: #888;	/* Texte gris par défaut */
	}
	/* Dès qu’une valeur différente de "" est choisie → texte en noir */
	.form-group select:not(:has(option[value=""]:checked)) {
	  color: #000;
	}
	/*.form-group select:valid {
		color: #000; /* Texte noir une fois une option valide sélectionnée 
	} 
	*/
	.form-group select option[value=""]{
		color: #888; /* Option vide affichée en gris */
	}
	/* Toute autre valeur en noir */
	.form-group select option:not([value=""]) {
	  color: #000;
	}
	.form-group i {
		margin-right: 10px;
		color: #555;
		font-size: 1.2em;
	}
	
	/* Champs texte / select : largeur 100% */
	.form-group select,
	.form-group input:not([type="checkbox"]) {
		width: 100%;
	}
			

	.form-container {	/* Marge intérieure*/
		padding-left: 40px;
		padding-right: 40px;
	}
	
	.form-group-textarea i {
	  align-self: flex-start;
	  margin-top: 10px;
	}
	/* textarea avec icône comme les inputs */
	.input-with-icon textarea {
	  width: 100%;
	  min-height: 80px;         /* plus grand que input */
	  padding: 10px 10px 10px 44px; /* laisse de la place pour l’icône */
	  box-sizing: border-box;
	  border-radius: 8px;
	  border: 1px solid #ccc;
	  font-size: 1rem;
	  font-family: inherit;     /* même police que les autres champs */
	  resize: vertical;         /* l’utilisateur peut agrandir en hauteur */
	}

	/* cas spécial pour form-group-textarea : garder l’alignement propre */
	.form-group-textarea {
	  align-items: flex-start;  /* évite que l’icône flotte au milieu */
	}
	/* Icône dans le bloc textarea : positionnée en haut à gauche */
	.form-group-textarea .input-with-icon i {
	  top: 12px; /* distance depuis le haut */
	  transform: none; /* annule le centrage vertical */
	}

/* le label devient un mini-flex qui contient checkbox + texte */
	/* Label contenant la checkbox */
	.label-block {
	  display: inline-flex;
	  align-items: center;   /* centre la checkbox et le texte entre eux */
	  gap: 6px;
	  cursor: pointer;
	  white-space: nowrap;  /* empêche le retour à la ligne */
	}

	/* icône : garantir qu'elle reste à côté du texte, ne se rétracte pas */
	.label-block i {
	  display: inline-block;
	  flex: 0 0 auto;          /* ne grandit pas, ne rétrécit pas */
	  margin-right: 6px;       /* fallback si gap est ignoré */
	  line-height: 1;
	  font-size: 1.2em;
	  position: static;        /* annule tout positionnement absolu externe */
	}

	/* label : affichage en ligne pour éviter tout chevauchement */
	.label-block label {
	  display: inline-block;
	  margin: 0;
	  padding: 0;
	}


	.form-group label {
		font-weight: bold;
		margin: 0;
	}

	/* Checkbox : largeur automatique, texte à côté */
	.checkbox-input {
	  width: auto;
	  margin: 0;
	  flex: 0 0 auto;   /* ne grandit pas, ne rétrécit pas */
	  transform: scale(1.2); /* optionnel, juste esthétique */
	}
	
	
	
	/* wrapper qui reproduit le rendu "icône dans le champ" */
	.input-with-icon {
	  position: relative;
	  width: 100%;
	}

	/* icône positionnée à l'intérieur, toujours verticalement centrée */
	.input-with-icon i {
	  position: absolute;
	  left: 12px;
	  top: 50%;
	  transform: translateY(-50%);
	  pointer-events: none;
	  font-size: 1.2em;
	  color: #555;
	}

	/* champ / select standard (utilise padding-left pour faire de la place à l'icône) */
	.input-with-icon input[type="text"],
	.input-with-icon select {
	  width: 100%;
	  height: 44px;
	  padding-left: 44px;
	  box-sizing: border-box;
	  border-radius: 8px;
	  border: 1px solid #ccc;
	}

	/* Pour la checkbox : on lui donne l'apparence et la hauteur d'un champ */
	.checkbox-field {
	  display: flex;
	  align-items: center;
	  height: 44px;            /* même hauteur que les autres champs */
	  padding-left: 44px;      /* laisse la place pour l'icône absolue */
	  border-radius: 8px;
	  border: 1px solid transparent; /* tu peux mettre la même bordure que les inputs si tu veux */
	  background: transparent; /* ou #fff si tu veux que la zone soit blanche */
	  cursor: pointer;
	  gap: 8px;
	  box-sizing: border-box;
	}

	/* checkbox interne */
	.checkbox-field .checkbox-input {
	  width: auto;
	  margin: 0;
	  flex: 0 0 auto;
	  transform: scale(1.12);
	}
	
	/*=== Boutons ===*/
	.button-row {
	  display: flex;
	  justify-content: center;       /* centre horizontalement */
	  gap: 20px;                     /* espace entre les boutons */
	  margin-top: 20px;
	  width: 100%;
	}

	.form-btn {
	  flex: 0 0 200px;               /* largeur fixe (ajustable) */
	  height: 44px;                  /* même hauteur que les champs */
	  border-radius: 8px;
	  font-size: 1rem;
	  font-family: inherit;
	  cursor: pointer;
	  border: none;
	  transition: background-color 0.3s;
	  text-align: center;
	}

	/* Bouton Valider */
	.submit-btn {
	  background-color: #0078d7;
	  color: white;
	}

	.submit-btn:hover {
	  background-color: #005fa3;
	}

	/* Bouton Annuler */
	.cancel-btn {
	  background-color: #f0f0f0;
	  color: #333;
	  border: 1px solid #ccc;
	}

	.cancel-btn:hover {
	  background-color: #e0e0e0;
	}




/* === Tableaux === */
	#table-comptes {
		width: 100%;
		table-layout: auto;	/*Tableau prend toute la largeur et ajuste les colonnes automatiquement.*/
	}

	#table-comptes th,
	#table-comptes td {
		white-space: nowrap;	/*Empêche le retour à la ligne dans les cellules du tableau.*/
	}



/* === Modale === */
	.modal {	/*Fenêtre modale : invisible par défaut, position fixe, fond semi-transparent.*/
		display: none;
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		/*background-color: rgba(255, 0, 0, 0.5); /* rouge transparent test pour voir si modal est bien stylisé*/
	}

	.modal-content {	/*Contenu de la modale : centrée, taille fixe, fond blanc, arrondi, ombre, animation d’apparition, défilement vertical.*/
		position: relative;
		margin: 5% auto;
		width: 800px;
		height: 600px;
		background: white;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		animation: zoomIn 0.3s ease-in-out;
		overflow-y: auto;
	}

	.modal-content iframe {	/*Iframe dans la modale : prend toute la place, sans bordure.*/
		width: 100%;
		height: 100%;
		border: none;
	}
	





	}
	.container {
		display: flex;	/*Mise en page en flexbox.*/
		flex-wrap: nowrap;	/*Empêche le retour à la ligne.*/
		border-radius: 12px;
		gap: 40px;	/*Espacement entre les éléments.*/
		align-items: flex-start;	/*Alignement en haut.*/
	}
	
	.liste-comptes {
		flex: 2;	/*Prend deux fois plus d’espace que .formulaire-ajout*/
		max-width: 80%;	/*Largeur maximale et défilement horizontal si nécessaire.*/
		overflow-x: auto;
	}
	

	.recherche-comptes {
		margin-bottom: 20px;	/*Ajoute un espace sous la barre de recherche.*/
	}

	#recherche {	/*Style du champ de recherche : largeur, padding, bord, arrondi, ombre légère.*/
		width: 100%;
		padding: 12px 16px;
		font-size: 1em;
		border: 1px solid #ccc;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	}

	.table.dataTable {	/*Style général du tableau : fond blanc, arrondi, ombre.*/
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}

	.table.dataTable th {	/*En-têtes du tableau : fond violet clair, texte gris foncé.*/
		background-color: #e0d7f5;
		color: #333;
	}
  
	.formulaire-ajout {	/*Formulaire d’ajout : largeur fixe, fond blanc, padding, arrondi, ombre, position fixe en haut de la page (sticky).*/
	flex: 1;
	min-width: 300px;
	max-width: 20%;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	position: sticky;
	top: 20px;
	}

	.nom a {	/*Style des liens dans les noms : gras, violet, sans soulignement.*/
		font-weight: bold;
		font-size: 1.1em;
		color: #6c5ce7;
		text-decoration: none;
	}

	.etablissement,
	.solde {	/*Style des infos d’établissement et solde : texte gris.*/
		font-size: 1em;
		color: #444;
	}

	.actions {
		text-align: right;	/*Aligne les actions à droite.*/
	}

	.actions a {	/*Style des liens d’action : espacement, taille, padding, arrondi.*/
		margin-left: 12px;
		text-decoration: none;
		font-size: 1.2em;
		padding: 6px;
		border-radius: 4px;
	}

	.actions a:hover {	/*Fond gris clair au survol.*/
		background-color: #eee;
	}

	details {	/*- Style des blocs <details> : fond bleu clair, padding, arrondi, ombre.*/
		margin-top: 15px;
		background: #f0f7ff;
		padding: 12px;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	}

	details summary {	/*Style du résumé : texte gras, curseur pointeur, couleur gris foncé.*/
		font-weight: bold;
		cursor: pointer;
		color: #4a4a4a;
	}

	.ajout-client input {	/*Style des champs de formulaire : bloc, espacement, padding, largeur, bord, arrondi.*/
		display: block;
		margin: 8px 0;
		padding: 10px;
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 6px;
	}



	.close {	/*Bouton de fermeture : positionné en haut à droite, curseur pointeur, taille de texte.*/
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 24px;
		cursor: pointer;
		color: #333;
	}
	.confirmation-banner {	/*Bannière de confirmation : position fixe centrée, fond vert clair, texte vert foncé, padding, arrondi, ombre, animation de disparition.*/
		position: fixed;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #d4edda;
		color: #155724;
		padding: 12px 20px;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		font-weight: bold;
		z-index: 2000;
		animation: fadeOut 4s forwards;
	}

	@keyframes fadeOut {	/*Animation pour faire disparaître la bannière après un certain temps.*/
	0%   { opacity: 1; }
	80%  { opacity: 1; }
	100% { opacity: 0; display: none; }
	}
	
	@keyframes zoomIn {	/*Animation pour agrandir la modale progressivement.*/	/*- Applique le modèle de boîte border-box à tous les éléments : padding et bordures inclus dans la largeur/hauteur.*/
		from { transform: scale(0.8); opacity: 0; }
		to { transform: scale(1); opacity: 1; }	
	}

	@media (max-width: 768px) {
	  .container {
		flex-direction: column;
		gap: 20px;
	  }

	  .formulaire-ajout {
		position: static;
		max-width: 100%;
	  }

	  .liste-comptes {
		max-width: 100%;
	  }

	  .modal-content {
		width: 90%;
		height: auto;
	  }
	}
	:root {
	  --primary-color: #0078d7;
	  --primary-hover: #005fa3;
	  --text-dark: #4a4a4a;
	  --bg-light: #f0f7ff;
	  --shadow-light: rgba(0, 0, 0, 0.05);
	}
	.submit-btn {
	  background-color: var(--primary-color);
	}
	.submit-btn:hover {
	  background-color: var(--primary-hover);
	}
	
	.fade-in {
	  animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
	  from { opacity: 0; transform: translateY(10px); }
	  to { opacity: 1; transform: translateY(0); }
	}
	@media (max-width: 768px) {
	  .form-group {
		padding: 0 20px;
	  }
	}
}