:root {
    --primary-color: #ff6a00; /* Orange type WeTransfer */
    --success-color: #28a745;
    --gray-light: #e0e0e0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Container pour espacer le spinner du reste */
.loader-container {
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Le dessin du cercle qui tourne */
.spinner {
    width: 60px;  /* Passe de 40px à 60px par exemple */
    height: 60px; /* Doit être identique à la largeur */
    border: 5px solid #f3f3f3; /* Épaissis un peu le trait */
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 40px auto; /* Augmente la marge pour bien le séparer du stepper */
}

.container { text-align: center; width: 100%; max-width: 500px; }
.brand { color: var(--primary-color); font-size: 2.5rem; margin-bottom: 20px; }

.security-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* TEXTES - AJOUTÉS ICI */
h2 {
    font-size: 1.4rem;
    font-weight: 500 !important; /* Rend l'écriture "Moyenne" */
    color: #333;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    color: #666;
    margin-bottom: 20px;
}

.lock-icon {
    background: #f1f1f1;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* --- LE STEPPER (LES ÉTAPES) --- */
.stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 40px 0; /* Plus d'espace au-dessus et en-dessous */
    position: relative; /* CRUCIAL pour positionner la ligne par rapport à lui */
    width: 100%;
}

.step {
    flex: 1;
    text-align: center;
    position: relative; /* Nécessaire pour placer la ligne derrière */
    z-index: 1;
}

/* On crée la ligne entre les cercles */
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px; /* Aligné au milieu du cercle (35px / 2) */
    left: 50%; /* Part du milieu du cercle actuel */
    width: 100%; /* S'étend jusqu'au milieu du cercle suivant */
    height: 2px;
    background-color: #e0e0e0; /* Couleur de la ligne vide */
    z-index: -1; /* Passe DERRIÈRE les cercles */
}

/* LA LIGNE DEVIENT VERTE QUAND L'ÉTAPE EST COMPLÉTÉE */
/* Si l'étape suivante est active ou complétée, on colorie la ligne précédente */
.step.complete:not(:last-child)::after {
    background-color: var(--success-color);
    transition: background-color 0.4s ease;
}

.circle {
    /* FORCE L'AFFICHAGE PHYSIQUE */
    display: flex !important; 
    align-items: center;
    justify-content: center;
    
    /* DIMENSIONS FIXES */
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
    
    /* FORME ET POSITION */
    border-radius: 50% !important;
    margin: 0 auto 10px auto !important;
    
    /* COULEUR PAR DÉFAUT (GRIS) */
    background-color: #e0e0e0 !important;
    
    /* TEXTE */
    color: white !important;
    font-weight: bold !important;
    font-size: 14px !important;
    
    /* SÉCURITÉ */
    visibility: visible !important;
    opacity: 1 !important;

    /* ... tes autres lignes ... */
    overflow: visible !important;
    white-space: nowrap;
}
}

/* --- ÉTAT 1 : ACTIVE (VERT INITIAL pour l'analyse) --- */
/* Pour que le cercle 1 soit déjà vert au démarrage */
.step.active .circle {
    background-color: #28a745 !important; /* Vert succès */
}

/* --- ÉTAT 2 : PROCESSING (ORANGE - En cours) --- */
.step.processing .circle {
    background-color: #ff6a00 !important; /* Orange WeTransfer */
    
    /* Appliquer l'animation pulse sur l'orange */
    animation: pulseOranger 1.5s infinite;
}

/* --- ÉTAT 3 : COMPLETE (VERT FINI) --- */
.step.complete .circle {
    background-color: #28a745 !important; /* Vert succès */
    box-shadow: none; /* On enlève le pulse si l'orange est fini */
}

/* --- LE RAIL GRIS (Le fond de la barre) --- */
.progress-wrapper {
    width: 90%; /* Augmente ce pourcentage (ex: de 80% à 95%) */
    margin: 30px auto; /* Augmente le premier chiffre pour donner de l'air en haut/bas */
    height: 10px; /* Tu peux aussi l'épaissir un peu pour le style */
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

/* --- LE REMPLISSAGE ORANGE --- */
.progress-fill {
    height: 100%;
    width: 0%; /* Piloté par le JavaScript */
    background-color: #ff6a00 !important; /* Orange WeTransfer */
    border-radius: 10px;
    transition: width 0.3s linear;
}

.footer-text {
    font-size: 0.7rem; /* Petit texte discret */
    color: #999;       /* Gris clair */
    margin-top: 20px;
    font-weight: 300 !important; /* Très fin, comme tu aimes */
    letter-spacing: 0.5px;
}

/* POURCENTAGE ET STATUS - AJOUTÉS ICI */
/* On cible l'ID directement pour forcer le style */
#percentText {
    font-size: 1.6rem !important;
    font-weight: 300 !important; /* Poids moyen */
    letter-spacing: 0.8px;      /* Étire un peu le texte pour le style "épuré" */
    color: #a0a0a0 !important;
    opacity: 0.8;               /* Légère transparence pour plus de discrétion */
    margin-top: 15px !important;
    display: block !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
}

.status-message {
    font-size: 0.85rem;
    font-weight: 400 !important; /* Rend l'écriture "Moyenne" */
    margin-top: 15px;
    color: #888;
}
/* Animation qui fait tourner le spinner de 0 à 360 degrés */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseOranger {
    0% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}