/* Styles pour la section Processus - Système Solaire */

.processus-section {
    position: relative;
    background-color: #050a1c; /* Fond bleu très foncé presque noir */
    overflow: hidden;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    perspective: 1000px;
    /* Séparateur supérieur pour démarquer de la section précédente */
    border-top: 4px solid;
    border-image: linear-gradient(90deg, transparent, rgba(110, 159, 255, 0.7), rgba(156, 110, 255, 0.7), rgba(255, 110, 159, 0.7), rgba(110, 255, 177, 0.7), rgba(255, 222, 89, 0.7), transparent) 1;
    /* Séparateur inférieur pour démarquer de la section suivante (témoignages) */
    border-bottom: 4px solid;
    border-image: linear-gradient(90deg, transparent, rgba(255, 222, 89, 0.7), rgba(110, 255, 177, 0.7), rgba(255, 110, 159, 0.7), rgba(156, 110, 255, 0.7), rgba(110, 159, 255, 0.7), transparent) 1;
    /* Effet de profondeur pour démarquer la section */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) inset, 0 -15px 35px rgba(0, 0, 0, 0.8) inset;
    z-index: 1;
}

/* Amélioration de la lisibilité des textes dans la section processus */
.processus-section .lead.text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 0 3px rgba(110, 159, 255, 0.2);
    letter-spacing: 0.01em;
}

/* Conteneur du système solaire */
.solar-system {
    position: relative;
    width: 100%;
    height: 500px;
    margin: 50px auto;
    transform-style: preserve-3d;
}

/* Soleil - élément central */
.sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #ffde59, #ff914d);
    border-radius: 50%;
    box-shadow: 0 0 50px #ff914d, 0 0 100px rgba(255, 145, 77, 0.5);
    z-index: 10;
    animation: pulse 3s infinite alternate;
}

/* Orbites des planètes */
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orbit-1 { width: 160px; height: 160px; }
.orbit-2 { width: 240px; height: 240px; }
.orbit-3 { width: 320px; height: 320px; }
.orbit-4 { width: 400px; height: 400px; }
.orbit-5 { width: 480px; height: 480px; }

/* Planètes */
.planet {
    position: absolute;
    border-radius: 50%;
    transform-origin: center center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    z-index: 5;
}

.planet-1:hover, .planet-1.active {
    box-shadow: 0 0 15px var(--planet-1-color), 0 0 30px var(--planet-1-color);
}

.planet-2:hover, .planet-2.active {
    box-shadow: 0 0 15px var(--planet-2-color), 0 0 30px var(--planet-2-color);
}

.planet-3:hover, .planet-3.active {
    box-shadow: 0 0 15px var(--planet-3-color), 0 0 30px var(--planet-3-color);
}

.planet-4:hover, .planet-4.active {
    box-shadow: 0 0 15px var(--planet-4-color), 0 0 30px var(--planet-4-color);
}

.planet-5:hover, .planet-5.active {
    box-shadow: 0 0 15px var(--planet-5-color), 0 0 30px var(--planet-5-color);
}

.planet.active {
    z-index: 15;
}

/* Variables de couleurs pour les planètes */
:root {
    --planet-1-color: #6e9fff;
    --planet-1-dark: #3d6abf;
    --planet-1-shadow: rgba(110, 159, 255, 0.7);
    
    --planet-2-color: #9c6eff;
    --planet-2-dark: #6a3dbf;
    --planet-2-shadow: rgba(156, 110, 255, 0.7);
    
    --planet-3-color: #ff6e9f;
    --planet-3-dark: #bf3d6a;
    --planet-3-shadow: rgba(255, 110, 159, 0.7);
    
    --planet-4-color: #6effb1;
    --planet-4-dark: #3dbf7a;
    --planet-4-shadow: rgba(110, 255, 177, 0.7);
    
    --planet-5-color: #ffde59;
    --planet-5-dark: #bf9f3d;
    --planet-5-shadow: rgba(255, 222, 89, 0.7);
}

/* Styles spécifiques pour chaque planète */
.planet-1 {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, var(--planet-1-color), var(--planet-1-dark));
    box-shadow: 0 0 10px var(--planet-1-shadow);
    animation: orbit 15s linear infinite;
}

.planet-2 {
    width: 35px;
    height: 35px;
    background: radial-gradient(circle, var(--planet-2-color), var(--planet-2-dark));
    box-shadow: 0 0 10px var(--planet-2-shadow);
    animation: orbit 20s linear infinite;
}

.planet-3 {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, var(--planet-3-color), var(--planet-3-dark));
    box-shadow: 0 0 10px var(--planet-3-shadow);
    animation: orbit 25s linear infinite;
}

.planet-4 {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle, var(--planet-4-color), var(--planet-4-dark));
    box-shadow: 0 0 10px var(--planet-4-shadow);
    animation: orbit 30s linear infinite;
}

.planet-5 {
    width: 32px;
    height: 32px;
    background: radial-gradient(circle, var(--planet-5-color), var(--planet-5-dark));
    box-shadow: 0 0 10px var(--planet-5-shadow);
    animation: orbit 35s linear infinite;
}

/* Variables pour les rayons d'orbite */
.planet-1 { --orbit-radius: 80px; }
.planet-2 { --orbit-radius: 120px; }
.planet-3 { --orbit-radius: 160px; }
.planet-4 { --orbit-radius: 200px; }
.planet-5 { --orbit-radius: 240px; }

/* Conteneur pour les descriptions des étapes */
.process-step {
    position: absolute;
    width: 300px;
    background-color: rgba(20, 20, 30, 0.85);
    border-radius: 15px;
    padding: 20px;
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    transform-style: preserve-3d;
}

/* Bordures spécifiques pour chaque étape correspondant à sa planète */
#step-1 {
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7), 0 0 15px var(--planet-1-shadow);
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.85), rgba(30, 40, 60, 0.85));
    border-left: 3px solid var(--planet-1-color);
}

#step-2 {
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7), 0 0 15px var(--planet-2-shadow);
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.85), rgba(40, 30, 60, 0.85));
    border-left: 3px solid var(--planet-2-color);
}

#step-3 {
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7), 0 0 15px var(--planet-3-shadow);
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.85), rgba(60, 30, 40, 0.85));
    border-left: 3px solid var(--planet-3-color);
}

#step-4 {
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7), 0 0 15px var(--planet-4-shadow);
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.85), rgba(30, 60, 40, 0.85));
    border-left: 3px solid var(--planet-4-color);
}

#step-5 {
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7), 0 0 15px var(--planet-5-shadow);
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.85), rgba(60, 50, 30, 0.85));
    border-left: 3px solid var(--planet-5-color);
}

.process-step.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) translateZ(10px);
    animation: card-appear 0.5s ease-out forwards;
}

@keyframes card-appear {
    0% { opacity: 0; transform: translateY(-20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.process-step:hover {
    transform: translateY(-5px) translateZ(15px);
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
}

/* Effets de survol spécifiques pour chaque étape */
#step-1:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 20px var(--planet-1-shadow);
    border-left: 4px solid var(--planet-1-color);
}

#step-2:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 20px var(--planet-2-shadow);
    border-left: 4px solid var(--planet-2-color);
}

#step-3:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 20px var(--planet-3-shadow);
    border-left: 4px solid var(--planet-3-color);
}

#step-4:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 20px var(--planet-4-shadow);
    border-left: 4px solid var(--planet-4-color);
}

#step-5:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 20px var(--planet-5-shadow);
    border-left: 4px solid var(--planet-5-color);
}

.process-step h4 {
    margin-bottom: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.process-step h4 i {
    margin-right: 10px;
    background: rgba(255, 255, 255, 0.1);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Couleurs spécifiques pour chaque étape correspondant à sa planète */
#step-1 h4, #step-1 .text-primary {
    color: var(--planet-1-color);
    text-shadow: 0 0 5px rgba(110, 159, 255, 0.3);
}

#step-2 h4, #step-2 .text-primary {
    color: var(--planet-2-color);
    text-shadow: 0 0 5px rgba(156, 110, 255, 0.3);
}

#step-3 h4, #step-3 .text-primary {
    color: var(--planet-3-color);
    text-shadow: 0 0 5px rgba(255, 110, 159, 0.3);
}

#step-4 h4, #step-4 .text-primary {
    color: var(--planet-4-color);
    text-shadow: 0 0 5px rgba(110, 255, 177, 0.3);
}

#step-5 h4, #step-5 .text-primary {
    color: var(--planet-5-color);
    text-shadow: 0 0 5px rgba(255, 222, 89, 0.3);
}

.process-step p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 0;
    line-height: 1.6;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
    text-align: justify;
    hyphens: auto;
}

/* Positionnement des descriptions */
.step-1-desc { top: 20%; left: 10%; transform: translateY(-20px); }
.step-2-desc { top: 15%; right: 10%; transform: translateY(-20px); }
.step-3-desc { top: 50%; right: 5%; transform: translateY(-20px); }
.step-4-desc { bottom: 15%; right: 10%; transform: translateY(20px); }
.step-5-desc { bottom: 20%; left: 10%; transform: translateY(20px); }

/* Effet de particules pour les cartes */
.process-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 15px 15px;
    border-radius: 15px;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
}

/* Effets spécifiques pour chaque étape */
#step-1::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: linear-gradient(45deg, var(--planet-1-color) 0%, transparent 70%);
    opacity: 0.1;
    border-radius: 20px;
    z-index: -1;
    filter: blur(10px);
}

#step-2::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: linear-gradient(45deg, var(--planet-2-color) 0%, transparent 70%);
    opacity: 0.1;
    border-radius: 20px;
    z-index: -1;
    filter: blur(10px);
}

#step-3::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: linear-gradient(45deg, var(--planet-3-color) 0%, transparent 70%);
    opacity: 0.1;
    border-radius: 20px;
    z-index: -1;
    filter: blur(10px);
}

#step-4::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: linear-gradient(45deg, var(--planet-4-color) 0%, transparent 70%);
    opacity: 0.1;
    border-radius: 20px;
    z-index: -1;
    filter: blur(10px);
}

#step-5::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: linear-gradient(45deg, var(--planet-5-color) 0%, transparent 70%);
    opacity: 0.1;
    border-radius: 20px;
    z-index: -1;
    filter: blur(10px);
}

/* Animations */
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 30px #ff914d, 0 0 60px rgba(255, 145, 77, 0.3); }
    100% { box-shadow: 0 0 50px #ff914d, 0 0 100px rgba(255, 145, 77, 0.5); }
}

/* Effet de transition entre les sections */
.processus-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(110, 159, 255, 0.1) 40%, rgba(156, 110, 255, 0.15) 70%, rgba(255, 110, 159, 0.2) 100%);
    pointer-events: none;
    z-index: 5;
}

/* Animation de l'effet de transition */
@keyframes section-transition {
    0% { opacity: 0.5; transform: translateY(5px); }
    50% { opacity: 0.8; transform: translateY(-5px); }
    100% { opacity: 0.5; transform: translateY(5px); }
}

.processus-section::after {
    animation: section-transition 6s ease-in-out infinite;
}

/* Effet de particules stellaires aux limites de la section */
.processus-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 5%, rgba(110, 159, 255, 0.4) 0%, transparent 0.5%),
        radial-gradient(circle at 80% 5%, rgba(156, 110, 255, 0.4) 0%, transparent 0.5%),
        radial-gradient(circle at 10% 95%, rgba(255, 110, 159, 0.4) 0%, transparent 0.5%),
        radial-gradient(circle at 90% 95%, rgba(110, 255, 177, 0.4) 0%, transparent 0.5%),
        radial-gradient(circle at 50% 5%, rgba(255, 222, 89, 0.4) 0%, transparent 0.5%),
        radial-gradient(circle at 50% 95%, rgba(255, 222, 89, 0.4) 0%, transparent 0.5%);
    background-size: 200px 200px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    opacity: 0.8;
    filter: blur(3px);
}

/* Responsive */
@media (max-width: 992px) {
    .solar-system {
        height: 400px;
    }
    
    .sun {
        width: 60px;
        height: 60px;
    }
    
    .orbit-1 { width: 140px; height: 140px; }
    .orbit-2 { width: 200px; height: 200px; }
    .orbit-3 { width: 260px; height: 260px; }
    .orbit-4 { width: 320px; height: 320px; }
    .orbit-5 { width: 380px; height: 380px; }
    
    /* Ajustement précis des rayons d'orbite (exactement la moitié de la largeur/hauteur des orbites) */
    .planet-1 { --orbit-radius: 70px; } /* Moitié de 140px */
    .planet-2 { --orbit-radius: 100px; } /* Moitié de 200px */
    .planet-3 { --orbit-radius: 130px; } /* Moitié de 260px */
    .planet-4 { --orbit-radius: 160px; } /* Moitié de 320px */
    .planet-5 { --orbit-radius: 190px; } /* Moitié de 380px */
    
    .planet-1, .planet-2, .planet-3, .planet-4, .planet-5 {
        width: 25px;
        height: 25px;
        margin-top: -12.5px;  /* Ajusté à la moitié de la hauteur pour un centrage parfait */
        margin-left: -12.5px; /* Ajusté à la moitié de la largeur pour un centrage parfait */
    }
    
    .process-step {
        width: 250px;
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .processus-section {
        /* Renforcement des séparateurs sur mobile */
        border-top-width: 3px;
        border-bottom-width: 3px;
    }
    
    .solar-system {
        height: 300px;
    }
    
    .sun {
        width: 50px;
        height: 50px;
    }
    
    .orbit-1 { width: 100px; height: 100px; }
    .orbit-2 { width: 150px; height: 150px; }
    .orbit-3 { width: 200px; height: 200px; }
    .orbit-4 { width: 250px; height: 250px; }
    .orbit-5 { width: 300px; height: 300px; }
    
    /* Ajustement précis des rayons d'orbite (exactement la moitié de la largeur/hauteur des orbites) */
    .planet-1 { --orbit-radius: 50px; } /* Moitié de 100px */
    .planet-2 { --orbit-radius: 75px; } /* Moitié de 150px */
    .planet-3 { --orbit-radius: 100px; } /* Moitié de 200px */
    .planet-4 { --orbit-radius: 125px; } /* Moitié de 250px */
    .planet-5 { --orbit-radius: 150px; } /* Moitié de 300px */
    
    .planet-1, .planet-2, .planet-3, .planet-4, .planet-5 {
        width: 20px;
        height: 20px;
        margin-top: -10px;  /* Ajusté à la moitié de la hauteur pour un centrage parfait */
        margin-left: -10px; /* Ajusté à la moitié de la largeur pour un centrage parfait */
    }
    
    .process-step {
        position: static;
        width: 100%;
        margin: 15px 0;
        opacity: 1;
        transform: none;
        display: none;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        padding: 15px 20px;
    }
    
    .process-step.mobile-active {
        display: block;
        animation: mobile-card-appear 0.5s ease-out forwards;
    }
    
    @keyframes mobile-card-appear {
        0% { opacity: 0; transform: translateY(10px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    
    .mobile-steps-nav {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    
    .mobile-step-btn {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.15);
        margin: 0 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
    }
    
    .mobile-step-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
        transform: translate(-50%, -50%);
        transition: all 0.5s ease;
        opacity: 0;
        border-radius: 50%;
    }
    
    .mobile-step-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    }
    
    .mobile-step-btn.active::before {
        width: 30px;
        height: 30px;
        opacity: 0.3;
        animation: pulse-dot 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    }
    
    @keyframes pulse-dot {
        0% { width: 18px; height: 18px; opacity: 0.3; }
        50% { width: 30px; height: 30px; opacity: 0.1; }
        100% { width: 18px; height: 18px; opacity: 0.3; }
    }
    
    .mobile-step-btn[data-step="1"].active {
        background-color: var(--planet-1-color);
    }
    
    .mobile-step-btn[data-step="2"].active {
        background-color: var(--planet-2-color);
    }
    
    .mobile-step-btn[data-step="3"].active {
        background-color: var(--planet-3-color);
    }
    
    .mobile-step-btn[data-step="4"].active {
        background-color: var(--planet-4-color);
    }
    
    .mobile-step-btn[data-step="5"].active {
        background-color: var(--planet-5-color);
    }
}

/* Ajustements supplémentaires pour très petits écrans */
@media (max-width: 480px) {
    .solar-system {
        height: 250px;
    }
    
    .sun {
        width: 40px;
        height: 40px;
    }
    
    .orbit-1 { width: 80px; height: 80px; }
    .orbit-2 { width: 120px; height: 120px; }
    .orbit-3 { width: 160px; height: 160px; }
    .orbit-4 { width: 200px; height: 200px; }
    .orbit-5 { width: 240px; height: 240px; }
    
    /* Rayons d'orbite exactement égaux à la moitié des dimensions des orbites */
    .planet-1 { --orbit-radius: 40px; } /* Moitié de 80px */
    .planet-2 { --orbit-radius: 60px; } /* Moitié de 120px */
    .planet-3 { --orbit-radius: 80px; } /* Moitié de 160px */
    .planet-4 { --orbit-radius: 100px; } /* Moitié de 200px */
    .planet-5 { --orbit-radius: 120px; } /* Moitié de 240px */
    
    .planet-1, .planet-2, .planet-3, .planet-4, .planet-5 {
        width: 16px;
        height: 16px;
        margin-top: -8px;
        margin-left: -8px;
    }
}