#ptp-preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Fond très légèrement blanc pour indiquer que la page est inactive, mais transparent comme demandé */
	background: rgba(255, 255, 255, .1);
	/* Z-INDEX MAXIMUM (32-bit integer) pour passer au-dessus de tout (header, menu mobile, popups) */
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	/* Transition fluide */
	transition: visibility 0s .3s, opacity .3s linear;
	/* Empêche de cliquer sur quoi que ce soit d'autre quand actif */
	pointer-events: none;
}

#ptp-preloader.active {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity .3s linear;
	pointer-events: all;
	/* Bloque les clics sur le reste de la page */
	cursor: progress;
}

.ptp-spinner {
	/* Taille du spinner */
	width: 50px;
	height: 50px;
	border-radius: 50%;
	/* CRÉATION DE L'EFFET BICOLORE (Bleu et Orange) */
	border: 4px solid transparent;
	/* Base transparente */
	border-top-color: #ce8f12;
	/* Orange en haut */
	border-bottom-color: #007bff;
	/* Bleu en bas (vous pouvez changer ce code couleur) */
	
	/* Optionnel : ajouter une 3eme couleur sur les côtés ou laisser transparent pour l'effet de rotation */
	
	/* Animation plus rapide (0.6s) */
	animation: spin .6s linear infinite;
	/* S'assurer que le spinner est au-dessus du fond */
	z-index: 2147483648;
}

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