#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, 0.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 0.3s, opacity 0.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 0.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 0.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); }
}