/* ============================================
   SECTION STAGIAIRE - GALAXY TOURNANT
   ============================================ */

.stagiaire-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 80px;
    background: var(--color-blue-gradient);
    overflow: hidden;
}



/* Conteneur de la galaxie */
.galaxy-container {
    position: relative;
    width: 600px;
    height: 600px;
}

/* Email au centre */
.email-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-white-transparent);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-3xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-primary);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-tooltip);
    backdrop-filter: var(--blur-md);
    transition: var(--transition-all);
}

.email-center:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: var(--shadow-2xl);
}

/* ============================================
   CERCLES AVEC BORDURES ÉLÉGANTES
   ============================================ */

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: var(--border-width-thin) solid var(--border-color-white);
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
}

/* Cercle 1 (centre) - Rotation anti-horaire 30s */
.circle-1 {
    width: 240px;
    height: 240px;
    animation: rotate-counter-clockwise 30s linear infinite;
}

/* Cercle 2 (moyen) - Rotation horaire 45s */
.circle-2 {
    width: 400px;
    height: 400px;
    animation: rotate-clockwise 45s linear infinite;
}

/* Cercle 3 (grand) - Rotation horaire 60s */
.circle-3 {
    width: 560px;
    height: 560px;
    animation: rotate-clockwise 60s linear infinite;
}

/* ============================================
   ANIMATIONS DE ROTATION
   ============================================ */

@keyframes rotate-clockwise {
    from { 
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    to { 
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}

@keyframes rotate-counter-clockwise {
    from { 
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    to { 
        transform: translate(-50%, -50%) rotate(-360deg); 
    }
}

/* ============================================
   IMAGES DE STAGIAIRES
   ============================================ */

.stagiaire-img {
    position: absolute;
    width: 50px;
    height: 50px;
    /* border-radius: var(--radius-full); */
    /* background: var(--color-white); */
    /* border: var(--border-width-medium) solid var(--color-blue-primary); */
    display: flex;
    background-size: cover;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-primary);
    filter: drop-shadow(var(--shadow-md));
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: var(--transition-transform);
}

.stagiaire-img:hover {
    transform: translate(-50%, -50%) scale(1.2);
    z-index: var(--z-tooltip);
    box-shadow: var(--shadow-blue);
}

/* ============================================
   POSITIONNEMENT DES IMAGES SUR LES CERCLES
   6 positions tous les 60° sur chaque cercle
   ============================================ */

/* Cercle 1 - 6 positions */
.circle-1 .stagiaire-img:nth-child(1) { top: 0%; left: 50%; }      /* 0° */
.circle-1 .stagiaire-img:nth-child(2) { top: 25%; left: 93.3%; }   /* 60° */
.circle-1 .stagiaire-img:nth-child(3) { top: 75%; left: 93.3%; }   /* 120° */
.circle-1 .stagiaire-img:nth-child(4) { top: 100%; left: 50%; }    /* 180° */
.circle-1 .stagiaire-img:nth-child(5) { top: 75%; left: 6.7%; }    /* 240° */
.circle-1 .stagiaire-img:nth-child(6) { top: 25%; left: 6.7%; }    /* 300° */

/* Cercle 2 - 6 positions */
.circle-2 .stagiaire-img:nth-child(1) { top: 0%; left: 50%; }
.circle-2 .stagiaire-img:nth-child(2) { top: 25%; left: 93.3%; }
.circle-2 .stagiaire-img:nth-child(3) { top: 75%; left: 93.3%; }
.circle-2 .stagiaire-img:nth-child(4) { top: 100%; left: 50%; }
.circle-2 .stagiaire-img:nth-child(5) { top: 75%; left: 6.7%; }
.circle-2 .stagiaire-img:nth-child(6) { top: 25%; left: 6.7%; }

/* Cercle 3 - 6 positions */
.circle-3 .stagiaire-img:nth-child(1) { top: 0%; left: 50%; }
.circle-3 .stagiaire-img:nth-child(2) { top: 25%; left: 93.3%; }
.circle-3 .stagiaire-img:nth-child(3) { top: 75%; left: 93.3%; }
.circle-3 .stagiaire-img:nth-child(4) { top: 100%; left: 50%; }
.circle-3 .stagiaire-img:nth-child(5) { top: 75%; left: 6.7%; }
.circle-3 .stagiaire-img:nth-child(6) { top: 25%; left: 6.7%; }