* {
			  font-family: 'Comfortaa', cursive !important;
		
			}

			 #loginForm, 
             #interfacePrincipale, 
             #formPreRempli, 
             #bloc_qaForm, 
             #chatContainer_assistant, 
             #registerForm {
      display: none;
    }
			body {
					background: #f4f4f4;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					padding-top: 10px;
					margin: 0;
			}
			
			/* ===== STYLES GÉNÉRAUX POUR TOUS LES FORMULAIRES ===== */

			form {
			width: 100%;
			max-width: 350px;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 15px;
			padding: 20px;
			box-sizing: border-box;
			}

			h3 {
			color: #333;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			margin-top: 30px;
			margin-bottom: 30px;
			text-transform: uppercase;
			letter-spacing: 1px;
			line-height:25px;
			}

			input {
				height: 40px !important;
				resize: vertical;
				border-radius:6px;
				border: 1px solid #aaa;
				width:90%;
				padding:10px;
				margin-bottom:25px;
			}

	

			 /* rouge si pattern non respecté */
			#code4:invalid { border-color: #e3342f; }  





			/* Inputs + Textareas */
			input[type="text"],
			input[type="email"],
			input[type="password"],
			input[type="tel"],
			
			textarea {
			width: 100%;
			padding: 10px;
			font-size: 14px;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-sizing: border-box;
			margin-bottom: 10px;
			}




			#code_acces {
			position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 15px;
					width: 90%;
			padding: 10px;
			padding-bottom: 15px;
			font-size: 16px;
			font-weight:bold;
			border-radius: 10px;
			box-sizing: border-box;
			background-color: #e3eeff;
			opacity:0.9;
		
				}

				#code_acces input#code4 {
				padding: 5px;
				font-size: 16px;
				border-radius: 10px;
				width: 85%;
				box-sizing: border-box;
				text-align:center;
				margin-bottom:5px;
				border:none;
				font-weight:bold;
			color: #777777;
				}

				#code_acces label {
					display: block;
					font-weight: bold;
					margin-bottom: 1px;
					text-align: center;
					font-size: 16px;
					color: #333;
				}

			#formPreRempli textarea {
			width: 100%;
			padding: 10px;
			font-family: 'Comfortaa', sans-serif;
			font-size: 14px;
			border: 1px solid #ccc;
			border-radius: 5px;
			resize: vertical;
			box-sizing: border-box;
			background-color: #fafafa;
			line-height:18px;
			}

			select {
			width: 96%;
			max-width: 96%;
			padding: 8px 10px;
			font-size: 13px;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-sizing: border-box;
			font-family: 'Comfortaa', cursive;
			text-align: left;
			
			}

			/* Buttons */
			button {
			width: 100%;
			padding: 10px;
			background-color: #1976d2;
			color: white;
			font-weight: bold;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin-top: 15px;
			transition: background-color 0.2s;
			}

			button:hover {
			background-color: #1259a8;
			}

			/* Lien discret (mot de passe oublié) */
			a {
			color: #1976d2;
			font-size: 12px;
			text-decoration: none;
			}

			a:hover {
			text-decoration: underline;
			}

			/* Croix de fermeture */
			img.closeBtn {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 22px;
			cursor: pointer;
			}

			/* === Overlay derrière les popups/formulaires === */
			.form-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(30, 30, 30, 0.7); /* Gris foncé semi-transparent */
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
			}

			.menu-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(30, 30, 30, 0.7); /* Arrière-plan sombre */
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			z-index: 999; /* Doit être en-dessous de #menuContainer */
			}

			.pied-formulaire {
				position: absolute;
				bottom: -5px;
				right: 10px;
				font-size: 9px;
				text-align: right;
				color: #f4f4f4;
				font-style: italic;
				opacity: 0.8;
				font-family: 'Comfortaa', cursive;
			}



			.remember-container input[type="checkbox"] {
			margin-right: 8px;
			width: 12px;
			height: 12px;
			accent-color: #007bff; /* Couleur de coche */
			cursor: pointer;
			}

			.remember-container label {
			cursor: pointer;
			}

			 #homepage {
			
			position: relative;
			text-align: center;
			width: 85%;
			max-width: 360px;
			background: #ffffff;
			padding: 30px 20px 60px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			font-family: 'Comfortaa', cursive;
			background-size: cover;
			background-position: center;
			border-radius: 15px;
			height:590px;
			 display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			
				}

				#homepage h1 {
				color: #333;
				font-size: 16px;
				text-transform: none;
				letter-spacing: 1px;
				margin-bottom: 20px;
				text-align: center;
				line-height:24px;
				}

				#homepage h3 {
				color: #333;
				font-size: 22px;
				text-transform: none;
				letter-spacing: 1px;
				margin-bottom: 30px;
				margin-top: 40px;
				text-align: center;
				line-height:34px;
				}

				
				#fondAccueil {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				 background-image: url('https://1218.be/secretaire/assets/images/fond_ecran.jpg');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				z-index: 0; /* derrière le contenu */
				border-radius:10px;
				}

				#homepage .carteAccueil {
				position: relative;
				z-index: 1; /* au-dessus du fond */
				}

				
				#listeClients {
				width: 90%;
				padding: 10px;
				font-size: 16px;
				border-radius: 10px;
				border: none;
				background-color: #fff;
				color: #333;
				appearance: none;       /* Pour masquer la flèche par défaut (optionnel) */
				height:35px;
				}

				/* Positionne les boutons en bas */
				.btn-group {
				position: absolute;
				bottom: 200px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 15px;
					width: 90%;
			padding: 20px;
			font-size: 16px;
			font-weight:bold;
			border-radius: 10px;
			box-sizing: border-box;
			background-color: #e3eeff;
			opacity:0.9;
			
				}

				.btn-group label {
				display: block;
				font-weight: bold;
				margin-bottom: 10px;
				text-align: center;
				font-size: 16px;
				color: #333;
				}
				/* Taille personnalisée des boutons */
				.home-button {
				width: 150px;
				height: 40px;
				font-size: 14px;
				text-align: center;
				border: none;
				border-radius: 15px;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
				transition: background-color 0.3s;
				cursor: pointer;
				border-radius:45px;
				}
				.home-button:hover {
				background-color: #e0e0e0;
				}

				.homepage-logo {
				display: block;
				margin: 30px auto 30px auto; /* 20px top, center horizontally */
				max-width: 50px;
			}


			

	#formPreRempli {
				position: relative;
			text-align: right;
			width: 85%;
			max-width: 360px;
			background: #ffffff;
			padding: 30px 20px 160px;
			border-radius: 15px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			font-family: 'Comfortaa', cursive;
			background-size: cover;
			background-position: center;
			 min-height: 590px; /* facultatif : une hauteur minimale */
  			height: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			}

		

			#formPreRempli label {
			  	display: block;
				text-align: left;
			  	margin-bottom: 5px;
			  	font-size: 13px;
			  	font-weight: bold;
			  	color: #555555;
			}

			#formPreRempli input {
			 	padding: 10px;
			 	margin-bottom: 15px;
			 	border: 1px solid #ececec;
			 	border-radius: 5px;
		  		background-color: #ffffff;
				font-family: 'Comfortaa', cursive;
			 	font-size: 13px;
			}

			#formPreRempli .btn-group {
			position: absolute;
			bottom: 25px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15px;
			}

			#formPreRempli .home-button {
			width: 200px;
			height: 50px;
			font-size: 16px;
			text-align: center;
			border: none;
			border-radius: 15px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
			transition: background-color 0.3s;
			cursor: pointer;
			}

			#formPreRempli .home-button:hover {
			background-color: #e0e0e0;
			}

			#registerForm {
			position: relative;
			text-align: center;
			width: 85%;
			max-width: 360px;
			background: #ffffff;
			padding: 30px 20px 60px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			font-family: 'Comfortaa', cursive;
			background-size: cover;
			background-position: center;
			border-radius: 15px;
			height:590px;
			 display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			}

			#registerForm label {
			display: block;
			font-weight: bold;
			margin-bottom: 6px;
			text-align: left;
			font-size: 13px;
			color: #333;
			}

				#registerForm input {
			width: 100%;
			padding: 10px;
			margin-bottom: 20px;
			border-radius: 5px;
			border: 1px solid #ccc;
			font-family: 'Comfortaa', cursive;
			}

			#registerForm .form-row {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 92%;
			margin: 0 auto 5px auto;
			}

			#registerForm .form-row label {
		 	display: block;
				text-align: left;
			  	margin-bottom: 5px;
			  	font-size: 13px;
			  	font-weight: bold;
			  	color: #555555;
			}


		


			#registerForm .form-row input {
			 	padding: 10px;
				width:96%;
			 	margin-bottom: 15px;
			 	border: 1px solid #ccc;
			 	border-radius: 5px;
		  		background-color: #ffffff;
				font-family: 'Comfortaa', cursive;
			 	font-size: 13px;
			}
	

			#registerForm input[type="password"] {
  				padding: 10px;
				width:100%;
			 	margin-bottom: 20px;
			 	border: 1px solid #ccc;
			 	border-radius: 5px;
		  		background-color: #ffffff;
				font-family: 'Comfortaa', cursive;
			 	
}

			#registerForm .form-row select,
			#registerForm .form-row textarea {
			width: 96%;
			max-width: 96%;
			padding: 8px 10px;
			font-size: 13px;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-sizing: border-box;
			font-family: 'Comfortaa', cursive;
			text-align: left;
			}

			#registerForm .form-row textarea {
			min-height: 100px;
			resize: vertical;
			}

			#registerForm .btn-group {
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15px;
			}

			#registerForm .home-button {
			width: 200px;
			height: 50px;
			font-size: 16px;
			text-align: center;
			border: none;
			border-radius: 45px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
			transition: background-color 0.3s;
			cursor: pointer;
			}

			#registerForm .home-button:hover {
			background-color: #e0e0e0;
			}

			.btnBloc {
			font-weight: bold;
			font-size: 16px;
			color: #333;
			margin-top: 20px;
			margin-bottom: 20px;
			margin-left:12px;
			}

		#btnCloseRegister {
				  position: absolute;
			top: 10px;
			right: 15px;
			font-size: 20px;
			font-weight: bold;
			color: #333;
			cursor: pointer;
			z-index: 9999;
			}

			#btnCloseLogin {
			 position: absolute;
			top: 10px;
			right: 15px;
			font-size: 20px;
			font-weight: bold;
			color: #333;
			cursor: pointer;
			z-index: 9999;
			}

			#btnCloseQuestion {
			 position: absolute;
			top: 10px;
			right: 15px;
			font-size: 20px;
			font-weight: bold;
			color: #333;
			cursor: pointer;
			z-index: 9999;
			}

			

			.enfants-container {
  margin-left: 20px;      /* indentation visuelle */
  padding-left: 10px;
  border-left: 2px solid #ccc;
  margin-top: 5px;
  margin-bottom: 10px;
}

/* Overlay semi-transparent + flou (arrière-plan) */
.popup-enfant {
    position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* arrière-plan sombre */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Quand popup visible */
.popup-enfant.show {
  display: flex;  /* active flexbox centré */
}

/* Popup blanc centré */
.popup-content {
  background-color: white;
  padding: 25px;
  border-radius: 15px;
  width: 360px;
  max-width: 75%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.enfant-wrapper {
  margin-bottom: 1px; /* espace vertical entre chaque bloc de question enfant */
  padding: 5px;
height:20px;
}

  #btnValiderEnfant {
      display: block;
  margin: 20px auto; /* 20px de marge en haut et bas, auto pour centrer horizontalement */
  
  cursor: pointer;

   
  }

  #btnValiderEnfant:hover {
    background-color: #0056b3;
  }

.popup-enfant-titre {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  color: #444;
}

.enfant-wrapper label.enfant-label {
  font-size: 15px;           /* plus petit texte */
  margin-bottom: 4px;
  display: block;
  font-weight:normal;
}

.enfant-wrapper input {
  margin-left: 5px;
  width: 18px;
  height: 18px!important;
  margin-bottom: 0px!important;
  accent-color: #007BFF; /* change la couleur de la pastille */
  border-radius: 50%;    /* si vous voulez un input rond (pour radio) */
}

/* Croix de fermeture */
.close-popup {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 28px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-popup:hover {
  color: #e63946;
}

.popup-valider-btn {
  display: block;
  margin: 20px auto 0;
  padding: 10px 20px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background-color: #0066cc;
  color: white;
  cursor: pointer;
}

.popup-valider-btn:hover {
  background-color: #004c99;
}


/* Boite de dialogue standard pour msgxox réutilisable */
			#msgBoxOverlay {
				position: fixed;
				top: 0; left: 0;
				width: 100vw; height: 100vh;
				background-color: rgba(0, 0, 0, 0.3);
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 9999;
				font-family: 'Comfortaa', sans-serif;
				}

				#msgBoxContainer {
				background-color: #fff;
				border: 1px solid #ccc;
				border-radius: 8px;
				padding: 20px 30px;
				width: 300px;
				max-width: 90%;
				text-align: center;
				box-shadow: 0 0 10px rgba(0,0,0,0.2);
				}

				#msgBoxIcon {
				font-size: 30px;
				margin-bottom: 10px;
				}

				#msgBoxText {
				font-size: 15px;
				margin-bottom: 20px;
				}

				#msgBoxContainer button {
				background-color: #007BFF;
				border: none;
				color: white;
				padding: 8px 20px;
				border-radius: 5px;
				cursor: pointer;
				font-weight: bold;
				}

				
				#msgBoxOverlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);z-index:9999;font-family:'Comfortaa',sans-serif}
				#msgBoxContainer{background:#fff;border:1px solid #ccc;border-radius:8px;padding:20px 30px;width:300px;max-width:90%;text-align:center;box-shadow:0 0 10px rgba(0,0,0,.2)}
				#msgBoxIcon{font-size:30px;margin-bottom:10px}
				#msgBoxText{font-size:15px;margin-bottom:20px}
				#msgBoxContainer button{background:#007BFF;color:#fff;border:none;border-radius:5px;padding:8px 20px;cursor:pointer;font-weight:bold}


				.loader {
				border: 3px solid #f3f3f3;
				border-top: 3px solid #3498db;
				border-radius: 50%;
				width: 16px;
				height: 16px;
				animation: spin 0.9s linear infinite;
				display: inline-block;
				vertical-align: middle;
				}

				@keyframes spin {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
				}


			#interfacePrincipale {
				position: relative;
			text-align: center;
			width: 85%;
			max-width: 360px;
			background: #ffffff;
			padding: 30px 20px 60px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			font-family: 'Comfortaa', cursive;
			background-size: cover;
			background-position: center;
			border-radius: 15px;
			height:590px;
			 display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			
			
			}

			#interfacePrincipale h3 {
					color: #333;
				font-size: 22px;
				text-transform: none;
				letter-spacing: 1px;
				margin-bottom: 30px;
				margin-top: 40px;
				text-align: center;
				line-height:34px;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
			}

			#btnToggleMenu {
			  position: absolute;
				top: 20px;
				left: 20px;
				width: 20px;
				height: 20px;
				background-image: url('../images/menu_232323.png');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				cursor: pointer;
				z-index: 1000;
        
			}

			

			#nomClientAffiche {
			position: absolute;
			top:25px;
			right:30px;
			font-family: 'Comfortaa', cursive;
			font-size: 10px;
			font-weight: bold;
			color: #232323;
			text-align: right;
			display: inline-block;
			max-width: 70%;
			white-space: nowrap;
			text-decoration: underline;
			cursor: pointer;
			}

			

			#menuContainer {
			 display: none;
			position: absolute;
			top: 10px;
  			left: 10px;
			width: 200px; /* ✅ largeur fixe */
			min-height: 300px;
			background-color: #ffffff;
			border-radius: 10px 0px 10px 0px;
			padding: 60px 20px 20px 20px;
			z-index: 9000;
			border-right: 1px solid #ececec;
			border-bottom: 1px solid #ececec;
			}


			
		.menu-label {
		display: block;
		width: 90%;
		height:17px;
		padding: 10px;
		padding-top:13px;
		font-size: 13px;
		border-bottom: 1px solid #ccc;
		margin: 0 auto;
		cursor: pointer;
		color: #333;
		text-align: left; /* ✅ alignement à gauche */
		transition: background 0.2s;
		}

		#btnCloseMenu {
		  position: absolute;
			top: 10px;
			right: 15px;
			font-size: 20px;
			font-weight: bold;
			color: #333;
			cursor: pointer;
			z-index: 9999;
		}

		.menu-label:hover {
		background-color: #e8e8e8;
		}

			#chatContainer_assistant {
				position: relative;
				display:none;
				height: 600px; /* ou ce que tu veux */
				overflow-y: none;
				
				flex-direction: column;
				}

				#contenuChat {
				flex: 1;
				overflow-y: auto;
				padding: 10px;
				}

			.btn-group-interface {
			  position: fixed !important;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			width: max-content;
			z-index: 1000;
			background: transparent;
			}

			.chatbox {
				width: 98%;
				
				background: #fff;			
				text-align: center;
				max-height: 90vh;
			}

	

			#progressText {
				font-weight: normal;
				font-size:11px;
			}

			#qaForm {
				background: #ffffff;
				max-width: 600px;
				font-family: 'Comfortaa', cursive;
				display: block;
				padding-bottom: 60px;
			

				}
					
			#qaForm select {
				width: 100%;
				padding: 10px;
				border: 1px solid #aaa;
				border-radius: 5px;
				margin-bottom: 15px;
				font-family: 'Comfortaa', cursive;
					height: 40px !important;
					background-color: #ffffff;
					margin-bottom:25px;
			}

			#qaForm input[type="radio"],
			#qaForm input[type="checkbox"] {
				margin-right: 5px;
				margin-bottom: 0px;
			}

			#qaForm textarea {
				height: 150px !important;
				resize: vertical;
				border-radius:6px;
				border: 1px solid #aaa;
				padding:10px;
				width:82%;
				margin-bottom:3px;
			}

				
	
				
			#qaForm .option-group label {
				display: flex;
				align-items: left;
				gap: 3px;
				color: #163875;
				line-height:13px;
				font-size:13px;
				margin-top: 5px;
				padding-top:8px;
				margin-bottom:5px;
				font-style:italic;
				text-transform:none;
			}
	

			/* Titre des questions */
			#qaForm label.question-label {
			font-weight: bold;
			font-size: 16px;
			margin-top: 25px;
			display: block;
			color: #232323;
			text-align:left;
			line-height:22px;
			margin-bottom: 10px;
			}

			/* Texte des options (checkbox/radio) */
			#qaForm label.option-label {
			font-weight: normal;
			font-size: 15px;
			margin-left: 8px;
			display: inline;
			color: #555555;
			}

			/* Pour espacer les options */
			
			/* Pour réduire la taille de la coche radio ou checkbox */

		
.option-input[type="checkbox"],
.option-input[type="radio"] {
  transform: scale(0.8);
  margin-right: 6px;
  cursor: pointer;
}

.option-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ← alignement à gauche assuré */
  margin-bottom: 6px;
}

.option-label {
  cursor: pointer;
  user-select: none;
}







label.option-label {
  font-weight: normal;
  font-size: 14px;
}

	.question-title {
		padding:8px;
  font-size: 16px;
  	background: #232323;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #ffffff;
  text-transform: uppercase;
  border-radius:10px;
}

/* Libellés des options (Oui, Non, etc.) */
label.option-label {
  font-weight: normal; /* ou bold si tu veux aussi les mettre en gras */
  font-size: 14px;
  margin-left: 8px;     /* Pour espacer de la coche */
  margin-bottom: 2px;
  display: inline-block;
  vertical-align: middle;
}

				#bloc_qaForm {
				position: relative;
			text-align: center;
			width: 85%;
			max-width: 360px;
			background: #ffffff;
			padding: 30px 20px 60px;
			border-radius: 12px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			font-family: 'Comfortaa', cursive;
			background-size: cover;
			background-position: center;
			border-radius: 15px;
			min-height:590px;
			height:auto;
			 display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			

			}

			

	

			.option-group .option-inline {
				display: block;
				margin-bottom: 5px;
				padding-left: 5px;
			}


			input[type="radio"] {
				width: 18px;
				height: 18px;
			}

			.option-group {
				display: flex;
				flex-direction: column;
				gap: 5px;
				margin-top: 5px;
			}

			.option-inline {
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 3px 8px;
				text-transform:normal;
				cursor: pointer;
				transition: all 0.2s ease;
				user-select: none;
			}

			.option-inline:hover {
				background-color: #eef4ff;
				border-color: #163875;
			}

			.option-inline input[type="radio"],
			.option-inline input[type="checkbox"] {
				accent-color: #163875;
				width: 18px;
				height: 18px;
				margin: 0;
			}

	

			

			#chatContainer {
				position: relative;
  				height: auto; /* ou ajustable selon ton besoin */
  				overflow: hidden;
  				display: flex;
  				flex-direction: column;
			}

			#Suivant_89 {
				position: absolute;
				bottom: 10px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 10;
				padding: 10px 20px;
				border-radius: 8px;
				background-color: #007bff;
				color: white;
				border: none;
				cursor: pointer;
				}

			#avatarBot {
				width: 70px;
			height: 70px;
			border-radius: 50px;
			border: 1px solid #555;
			padding: 3px;
			object-fit: cover;
			margin-top:40px;
			margin-bottom:20px;
			}
			
			#welcomeMessage {
				font-family: 'Comfortaa', cursive;
					font-size: 16px;
				font-weight: normal;
				color: #232323;
				line-height: 24px;
				white-space: pre-line; /* pour que \n fonctionne */
				text-align: left;
				max-width: 600px;
				max-width: 97%;
				font-style: italic;
			}

			#msgAccueil {
				font-family: 'Comfortaa', cursive;
					font-size: 16px;
				font-weight: normal;
				color: #232323;
				line-height: 24px;
				white-space: pre-line; /* pour que \n fonctionne */
				text-align: left;
				max-width: 600px;
				max-width: 97%;
				font-style: italic;
			}

			.fiche-utilisateur {
			text-align: center;
			margin-top: 25px;
			padding: 10px;
			font-family: 'Comfortaa', cursive;
			}

			.fiche-utilisateur img#photo {
			width: 70px;
			height: 70px;
			border-radius: 50px;
			border: 1px solid #555;
			padding: 3px;
			object-fit: cover;
			}

			.fiche-utilisateur h3 {
			margin: 15px 0;
			text-transform: uppercase;
			color: #555;
			font-size: 14px;
			font-weight: bold;
			}

			.fiche-utilisateur p {
			font-size: 14px;
			max-width: 100%;
			line-height: 20px;
			}

			.fiche-utilisateur .profession {
			display: block;
			margin-bottom: 5px;
			}

			.fiche-utilisateur .lien-web {
			font-size: 12px;
			color: #555;
			text-decoration: underline;
			}


			button {
				padding: 10px 20px;
				font-size: 13px;
				cursor: pointer;
				border-radius: 45px;
				border: none;
				background-color: #232323;
				color:  #ffffff;
				margin-top: 0;
				font-weight:bold;
				height: 40px;
				width: 120px;
				margin-right: 8px;
			}
					
			button:hover {
				background-color: #ececec;
			}

			#btnEnregistrer, #btnConnexion , #btnCompte {
				margin-left: 5px;
				font-size: 14px;
				border: none;
				cursor: pointer;
			}

			#btnEnregistrer, #btnConnexion , #btnCompte {
				background-color: #232323;
				color: #ffffff;
			}
		
			
		
				
			
			  
			.input-with-clear {
			 	padding-right: 30px !important;
				padding-left: 10px !important;
			}

			  
			.bouton-chat {
				background-color: #163875;
			  	color: #fff;
			  	border: none;
				margin-left: 8px auto;
				font-size: 12px;
				cursor: pointer;
				width: fit-content;
				transition: background-color 0.3s ease;
			}

			.bouton-chat:hover {
				background-color: #1f4b9a;
			}

			.img-retour-accueil {
			width: 20px;
			height: auto;
			cursor: pointer;
			position: absolute;
			top: 12px;
			left: 10px;
			z-index: 9999;
			}

			@keyframes slideOutLeft {
				0% {
					transform: translateX(0);
					opacity: 1;
				}
				100% {
					transform: translateX(-100%);
					opacity: 0;
				}
			}

			.form-slide-out {
				animation: slideOutLeft 0.5s ease forwards;
			}  

			select {
				appearance: none;           /* supprime la flèche native */
				-webkit-appearance: none;   /* pour Safari/Chrome */
				-moz-appearance: none;      /* pour Firefox */
				background-image: url('../images/fleche_bas.png'); /* ta flèche personnalisée */
				background-repeat: no-repeat;
				background-position: right 20px center; /* ← décalage de la flèche */
				background-size: 12px 8px; /* taille de la flèche */
			 	padding-right: 30px; /* espace pour ne pas superposer le texte */
			}

			label {
				display: block;
				font-weight: bold;
				margin-top: 8px;
				font-size: 14px;
			}


				#btnHomeMenu {
				position: absolute;
				top: 10px;
				left: 1000px;
				width: 32px;
				height: 32px;
				cursor: pointer;
				}

		

		

			

			.resume-item {
			border-bottom: 1px solid #eee;
			padding-bottom: 10px;
			margin-bottom: 15px;
			}

			.resume-question {
			font-weight: bold;
			font-size: 14px;
			margin-top: 15px;
			margin-bottom: 10px;
			color: #333;
			text-align:left;
			}

			.resume-reponse {
			font-weight: normal;
			font-size: 13px;
			margin-left: 15px;
			color: #163875;
			text-align:left;
			font-style: italic;
			}

			.resume-actions {
			text-align: center;
			margin-top: 30px;
			}

			.resume-actions button {
			margin: 0 10px;
			padding: 10px 20px;
			font-size: 14px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-weight: bold;
			}

			.send-btn { background-color: #28a745; color: white; }
			.print-btn { background-color: #007bff; color: white; }
			.edit-btn  { background-color: #ffc107; color: black; }

						/* Fond semi-transparent pour poup du resume*/
			.modal-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			}

			/* Conteneur du résumé */
			.modal-content {
			background: #fff;
			padding: 25px;
			border-radius: 10px;
			max-width: 600px;
			width: 95%;
			max-height: 90vh;
			overflow-y: auto;
			position: relative;
			font-family: 'Comfortaa', cursive;
			}

			/* Bouton de fermeture */
			.modal-close {
			position: absolute;
			top: 10px;
			right: 15px;
			font-size: 20px;
			cursor: pointer;
			font-weight: bold;
			color: #333;
			}

			

			#loginForm {
				position: relative;
			text-align: center;
			width: 85%;
			max-width: 360px;
			background: #ffffff;
			padding: 30px 20px 60px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			font-family: 'Comfortaa', cursive;
			background-size: cover;
			background-position: center;
			border-radius: 15px;
			height:590px;
			 display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			}

			#formConnexion {
			display: flex;
			flex-direction: column;
			height: 100%;
			position: relative;
			}

			.login-footer {
			position: absolute;
			bottom: 20px;
			left: 0;
			width: 100%;
			text-align: center;
			}

			#loginForm label {
			display: block;
			font-weight: bold;
			margin-bottom: 6px;
			text-align: left;
			font-size: 13px;
			color: #333;
			}

			#loginForm input {
			width: 100%;
			padding: 10px;
			margin-bottom: 20px;
			border-radius: 5px;
			border: 1px solid #ccc;
			font-family: 'Comfortaa', cursive;
			}

			#loginForm button {
			background-color: #232323;
			color: #fff;
			border: none;
			padding: 10px 16px;
			border-radius: 25px;
			cursor: pointer;
			font-weight: bold;
			font-size: 14px;
			}

			.close-icon {
				position: absolute;
				top: 10px;
				right: 15px;
				font-size: 22px;
				font-weight: bold;
				color: white;
				cursor: pointer;
				z-index: 10;
				background: rgba(0, 0, 0, 0.4);
				padding: 5px 10px;
				border-radius: 50%;
				transition: background 0.2s;
			}
			.close-icon:hover {
				background: rgba(0, 0, 0, 0.6);
			}

			#loginForm button:hover {
			background-color: #336fd1;
			}

			#loginForm img[alt="Fermer"] {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 25px;
			cursor: pointer;
			}		

		.login-logo {
			display: block;
			margin: 20px auto 30px auto; /* 20px top, center horizontally */
			max-width: 50px;
		}

				#loadingOverlay {
		position: fixed;
		inset: 0;
		background: white;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: opacity 0.5s ease, visibility 0.5s ease;
		font-family: 'Comfortaa', cursive;
		}

		#loadingOverlay p {
		margin-top: 16px;
		font-size: 14px;
		color: #555;
		}

		.loader {
		width: 50px;
		height: 50px;
		border: 6px solid #ccc;
		border-top-color: #2196f3;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		}



.option-input[type="radio"] {
  transform: scale(1) !important;  /* taille normale pour les radios */
  margin-right: 8px !important;
  cursor: pointer;
}
.option-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 2px;
}

.option-wrapper .option-input[type="checkbox"] {
  flex-shrink: 0;       /* empêcher que la checkbox rétrécisse */
  width: 20px;          /* largeur fixe de la case à cocher */
  height: 15px;         /* hauteur correspondante */
  transform: scale(1);  /* si tu veux taille normale */
  margin-right: 8px;
  cursor: pointer;
}

.option-wrapper .option-label {
  flex-grow: 1;         /* prend tout l’espace restant */
  text-align: left;
  cursor: pointer;
}


		@keyframes spin {
		to { transform: rotate(360deg); }
		}

		/* Fade-out quand tout est chargé */
		#loadingOverlay.fade-out {
		opacity: 0;
		visibility: hidden;
		}

		
		@media print {
					.no-print {
						display: none !important;
					}
  
					button, .clear-btn, #sendEmailBtn, #sendToServerBtn, #printBtn, #updateBtn,#saveBtn,
						img[src*="fleche"], img[src*="micro"], img[src*="croix"] {
						display: none !important;
						border: none !important;
						box-shadow: none !important;
						outline: none !important;
					}

			

				

					#pdfHeader {
						display: block;
						text-align: center;
						margin-bottom: 15px;
						font-weight: bold;
						font-size: 14px;
					}
				
					body.printing * {
    					display: none !important;
 					 }

  					body.printing #rapportTemporaire,

  					body.printing #rapportTemporaire * {
    					display: block !important;
    					visibility: visible !important;
  					}

					#rapportTemporaire {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						padding: 20px;
						background: white;
						z-index: 9999;
					}

					#btnAfficherRapport {
						display: none !important;
					}

					.rapport-impression {
						margin: 20px;
						font-family: 'Comfortaa', cursive;
						font-size: 13px;
						color: black;
					}

					.rapport-impression h2 {
						text-align: center;
						margin-bottom: 30px;
						margin-top: 20px;
						font-size: 12px;
						text-transform: uppercase;
					}

					.rapport-impression .question-bloc {
						margin-bottom: 20px;
					}

					.rapport-impression label {
						display: block;
						font-weight: normal;
						margin-bottom: 5px;
						margin-top: 25px;
						font-size: 14px;
					}

					.rapport-impression .valeur {
						border: 1px solid #ececec;
						padding: 6px;
						min-height: 20px;
						background: #fff;
						border-radius:6px;
					}

						input {
						border: 1px solid #ff2400;
						padding: 4px;
						font-size: 14px;
						width: 100%;
						box-sizing: border-box;
						border-radius:6px;
					}

					input[type="email"] {
						background-color: #f9f9f9;
						font-style: italic;
					}

					#btnAfficherRapport {
						display: none !important;
  					}
				}