/* == updateStatus ============================================================= (UTILITAIRE) == */
.status-target { position: relative !important; }

/* --------------------------------------------------------------------------------------------- */
.status-layer {                                                       							/* LAYER surchargé pour W/H, background-color */
	position: 										fixed;
	inset: 												0;
	top:0; left:0; width:100%; height:100%;
	z-index: 											999;
	display:                  		none;									  					/* flex; */
	flex-direction:           		column;
	justify-content:          		center;
	align-items:              		center;
	background: 									transparent;
	transform: 										scale(1);
	transition: 									opacity 0.4s ease;
}
.status-layer.active { display: flex; }
.status-layer.attached {                                           								/* Nouvelles règles pour le loader => attaché à un conteneur spécifique */
	position:                 		absolute;                               					/* Écrase fixed par absolute */
	border-radius: 								inherit;
}
.status-layer.fade-out {
	opacity: 											0;
	pointer-events: 							none;
}
[data-status="error"].status-layer ,
[data-status="toast"].status-layer {
	position: 										static;
	display: 											flex;
	flex-direction: 							column;
	justify-content: 							flex-start;
	background: 									var(--blanc-pur);
	border-radius: 								var(--bordure-radius);
	box-shadow: 									0 20px 25px -5px rgba(0, 0, 0, 0.2);
	width: 												calc(var(--largeur-loader) * 4);
	min-height: 									calc(var(--largeur-loader) * 2);
	text-align: 									center;
}

.status-header{
	display: 											flex;
	flex-direction: 							row;
	justify-content: 							flex-end;
	align-items: 									flex-start;
	width:												100%;
	margin: 											0;
	padding: 											0;
}
/* --------------------------------------------------------------------------------------------- */
.status-background{
	/*position: 										absolute;*/
	z-index: 											1;
	width: 												100%;
	height: 											100%;
}

/* --------------------------------------------------------------------------------------------- */
.status-quo {
	display: 											flex;
	flex-direction: 							column;
	justify-content: 							flex-start;
	align-items: 									center;
	width: 												calc(var(--largeur-loader) * 4);
	height:												auto;
	padding: 											var(--espacement-court) var(--espacement-court) var(--espacement-large);
	text-align: 									center;
	opacity: 											1;
}

.status-message {
	z-index: 											100;
	display: 											-webkit-box;					/* Gestion du texte long */
	-webkit-line-clamp: 					2; 										/* Limite à 2 lignes maximum */
	-webkit-box-orient: 					vertical;
	width: 												100%;
	min-height:										var(--taille-sstexte);	
	margin:												0;
	padding: 											0 var(--espacement-court);
	text-align:               		center;
	overflow: 										hidden;
	text-overflow: 								ellipsis;
	line-height: 									1.4;
	transition: 									all 0.3s ease;
}
.status-message.loading { font-style: italic; font-weight: var(--graisse-sstexte); }
.status-message.success { font-style: normal; font-weight: var(--graisse-texte); }                                   }
.status-message.error   { font-style: normal; font-weight: var(--graisse-h2); }

.progress-container {
	display:                  		none;                                   /* Masqué par défaut */
	position: 										relative;
	vertical-align: 							center;
	width: 												50%;
	max-width: 										calc(var(--largeur-loader) * 3);
	height:												0.75rem;
	margin-top: 									var(--espacement-court);
	border-radius: 								0.25rem;
	box-shadow: 									inset 8px 4px 5px rgba(0, 0, 0, 0.15);	
}
.progress-container.visible { display: flex; }
.progress-bar {
	position: 										absolute;
	z-index: 											2;
	display: 				  						flex;
	width: 												0%;
	height:												100%;
	background-color: 						var(--bleu-trmdvsr-clair);
	border-radius: 								inherit;
	transition: 									width 0.3s ease;
}
.progress-background {
	position: 										absolute;
	z-index: 											1;
	width:                    		100%;
	height: 											100%;
	background-color: 						transparent;
	border-radius: 								inherit;
	box-shadow: 									inset 4px 2px 5px rgba(0, 0, 0, 0.15);
}
.progress-text {
	position: 										absolute;
	z-index: 											3;
	top: 													0.9rem;
	display: 				  						block;
	width: 												100%;
	margin-top: 									0;
	font-size: 										calc(var(--taille-label) * 0.66);
	text-align: 									center;
	color:												currentColor;
}

/* --------------------------------------------------------------------------------------------- */
.status-box {                                                         													/* Conteneur pour le Centrage */
	position:                 		relative;                               												/* CRUCIAL => enfants 'absolute' se positionnent par rapport à lui */
	display:                  		flex;
	justify-content:          		center;                                 												/* Princi:↔ */
	align-items:              		center;                                 												/* Transv:↕ */
	width: 												100%;
	max-width:                    var(--largeur-loader);                  												/* fluide: min:2rem | ideal:50% | max:20vw */
	aspect-ratio:             		1 / 1;
	margin:                   		0px;
	padding:                  		0px;
	background: 									none;
}							
/* 2. STYLE "FENÊTRE" (Uniquement pour Error, Toast) */
.btn-close-notify {
  display: 											none; 																													/* Toujours caché */
  position:											relative;
	flex-direction:           		column;
	justify-content:          		center;
	align-items:              		center;
	gap:                      		4px;
	width:                    		var(--largeur-logo-bouton);
	height:                   		var(--largeur-logo-bouton);
	padding:                  		4px;
	background-color: 						unset;
	z-index:                  		400;
	cursor:                   		pointer;
	transition: 									transform 0.5s ease-in-out;
	pointer-events: 							auto !important;																								/* Autorise les clics sur le bouton fermer du loader s'il y en a un */
}
[data-status="error"] .btn-close-notify {
  display: 											flex; 																													/* Visible uniquement si erreur */
  margin-top: 									auto; 																													/* Pousse le bouton vers le bas de la fenêtre blanche */
}

.btn-close-notify .close-bar {                                                          				/* barre pour le menu burger */
	display:                  		block;
	width:                    		24px;                                   												/* hauteur totale des 3 bandes x1.33 */
	height:                   		3px;
	border-radius:            		50px;
	background-color:         		var(--blanc-trmdvsr);
	transition: 									transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	 transform-origin: 						50% 50%;																												/* L'origine est essentielle pour la rotation */
}
.btn-close-notify.for-close .close-bar:nth-child(1) { background-color: var(--bleu-trmdvsr-clair); transform: translateY(7px) rotate(45deg); }
.btn-close-notify.for-close .close-bar:nth-child(2) { background-color: var(--bleu-trmdvsr-clair); opacity: 0; transform: scale(-50%); }						/* La ligne du milieu disparaît */
.btn-close-notify.for-close .close-bar:nth-child(3) { background-color: var(--bleu-trmdvsr-clair); transform: translateY(-7px) rotate(-45deg); }		/* Rotation de -45 degrés et translation vers le centre */
.btn-close-notify.for-close .close-bar { background-color: var(--bleu-trmdvsr-clair); }

.btn-close-notify .close-bar:nth-child(1),
.btn-close-notify .close-bar:nth-child(2),
.btn-close-notify .close-bar:nth-child(3) { transform: translateY(0) rotate(0deg); background-color: var(--bleu-trmdvsr-moyen); }

.spinner-logo {                                                            											/* Positionne pour superposition & centrage */
	position:                 		absolute;                               												/* Les superpose l'un sur l'autre */
	display: 											flex;
	z-index: 											2;
	width:                    		80%; 
	aspect-ratio: 								1 / 1;
	margin:                   		0px;
	padding:                  		0px; 
	opacity: 											1;
	visibility: 									visible;
}
.spinner-circle {
	position:											absolute;
	inset: 												0;
	top:0; left:0; width:100%; height:100%;
	z-index: 											1;
	width:                    		100%;
	aspect-ratio: 								1 / 1;
	border:                   		calc(var(--taille-sstexte) / 5) solid inherit;
	border-top:               		calc(var(--taille-sstexte) / 4) solid var(--bleu-trmdvsr-clair);	/* Bleu pour le bord en mouvement */
	border-radius:            		50%;                                    					/* => Forme ronde */
	border: 											10 px solid black;
	animation:                		spin 0.4s linear infinite;                      
}

/*--------------------------------------- CLASSES D'ANIMATION DU logo */
.logo-loading { animation: loading  1s infinite;      }
.logo-success { animation: info     1s ease infinite; }
.logo-toast   { animation: wobble   2s ease infinite; }
.logo-error {
	/*filter: hue-rotate(140deg) saturate(1);*/ /* Alterne vers le rouge si ton logo est bleu */
	animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
/* --------------------------------------------------------------------------------------------- */

.status-layer.fullBlue 												{ background-color: var(--bleu-trmdvsr-pur);							}
.status-layer.fullBlue .status-message 				{ color: var(--blanc-pur);																}
.status-layer.fullBlue .progress-container 		{ border: 1px solid var(--gris-trmdvsr-clair) !important;	}
.status-layer.fullBlue .progress-text 				{ color: var(--blanc-pur);																}
.status-layer.fullBlue .progress-bar 					{ background-color: var(--blanc-pur);											}
.status-layer.fullBlue .progress-background 	{ background-color: var(--gris-trmdvsr-clair);				}
.status-layer.fullBlue .spinner-circle 				{ 
	border:                   		calc(var(--taille-sstexte) / 5) solid var(--bleu-trmdvsr-pur);
	border-top:               		calc(var(--taille-sstexte) / 4) solid var(--bleu-trmdvsr-clair);
}
.status-layer.fullBlue .status-background {
	background-color:         		var(--bleu-trmdvsr-pur);                														/* Assure que l'opacité et le background-color fonctionnent */
	opacity: 											1;
}

.status-layer.lightWhite 											{ background-color: var(--blanc-trmdvsr);										}
.status-layer.lightWhite .status-message			{ color: var(--bleu-trmdvsr-clair);													}
.status-layer.lightWhite .progress-container 	{ border:  1px solid var(--gris-trmdvsr-clair) !important;	}
.status-layer.lightWhite .progress-text				{ color: var(--bleu-trmdvsr-clair);													}
.status-layer.lightWhite .progress-bar        { background-color: var(--bleu-trmdvsr-clair);							}
.status-layer.lightWhite .progress-background	{ background-color: var(--gris-trmdvsr-tres-clair);							}
.status-layer.lightWhite .spinner-circle			{ 
	border:                   		calc(var(--taille-sstexte) / 5) solid var(--blanc-trmdvsr);
	border-top:               		calc(var(--taille-sstexte) / 4) solid var(--bleu-trmdvsr-clair);
}
.status-layer.lightWhite .status-background{
	background-color:							var(--blanc-trmdvsr);
	opacity: 											1;                																									/* Assure que l'opacité et le background-color fonctionnent */
}

/** ******************************************************************************************* //
 * @document 'Fin du fichier. with care.'
 * @author 'trmdvsr'
 * @version 25.10.09 (23:16)
// ******************************************************************************************** */