/* =========================================
   STYLE MAGIQUE DE L'ÉQUIPE (TEAM)
   ========================================= */

.team-container {
    padding: 120px 20px 100px 20px;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.page-title {
    margin-bottom: 80px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    animation: titleFloat 3s ease-in-out infinite;
}
@keyframes titleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.section-title {
    font-family: var(--font-title);
    color: var(--gold-light);
    font-size: 2rem;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 5px;
    position: relative;
    display: inline-block;
}

/* =========================================
   LE CERCLE D'INVOCATION 3D (BR LAYOUT)
   ========================================= */
.level-br {
    position: relative;
    margin-bottom: 150px;
    height: 700px; /* Espace suffisant pour la 3D */
    perspective: 1200px; /* Active la 3D */
}

/* AJUSTEMENT DU CONTENEUR POUR ÉVITER LA COUPURE EN HAUT */
.summoning-circle-container {
    position: relative;
    width: 600px; height: 600px;
    /* On descend le cercle (100px) pour ne pas couper les têtes en haut */
    margin: 100px auto 0 auto; 
    padding-top: 20px;
    
    /* On incline tout le plateau vers l'arrière pour l'effet 3D */
    transform-style: preserve-3d;
    transform: rotateX(60deg); 
}

/* --- LES ANNEAUX RUNIQUES (SOL) --- */
.magic-ring-outer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 4px solid var(--gold-antique);
    border-radius: 50%;
    /* Effet NEON puissant */
    box-shadow: 
        0 0 20px var(--gold-antique),
        inset 0 0 20px var(--gold-antique),
        0 0 50px var(--purple-royal);
    
    border-style: dashed;
    animation: rotate3D 40s linear infinite;
}

.magic-ring-inner {
    position: absolute; top: 15%; left: 15%; width: 70%; height: 70%;
    border: 2px solid var(--gold-light);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--gold-light);
    background: radial-gradient(transparent 60%, rgba(212, 175, 55, 0.1) 70%);
    animation: rotate3D 20s linear infinite reverse;
}

.summoning-circle-container::after {
    content: ''; position: absolute; top: 30%; left: 30%; width: 40%; height: 40%;
    border: 5px double var(--purple-royal);
    border-radius: 50%;
    box-shadow: 0 0 30px var(--purple-royal);
    animation: pulseRing 2s infinite alternate;
}

/* =========================================
   ANIMATION D'ORBITE & MEMBRES
   ========================================= */

/* --- CONFIG GENERALE MEMBRES --- */
.member-card {
    position: absolute;
    width: 160px;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: 0.3s;
}

/* 1. LE PRÉSIDENT (CENTRE + APPARITION) */
.president {
    top: 50%; left: 50%;
    margin-top: -120px; 
    margin-left: -80px; 
    z-index: 50;

    /* ANIMATION COMBINÉE : Apparition (Pop) puis Lévitation */
    animation: 
        appearPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        floatPresident 4s ease-in-out 0.8s infinite;
    
    opacity: 0; /* Invisible au début */
    transform: scale(0); 
}
.president .card-frame {
    border-color: #fff;
    box-shadow: 0 0 50px var(--gold-light);
}

/* 2. LES SATELLITES (ORBITE) */
.satellite {
    top: 50%; left: 50%;
    margin-top: -120px; 
    margin-left: -80px;
    
    /* L'animation d'orbite */
    animation: orbit 20s linear infinite;
    
    /* Placement sur l'orbite via délai négatif */
    animation-delay: calc(var(--i) * -5s) !important; 
}

/* --- GESTION DU SURVOL --- */
/* 1. Par défaut, si on survole le gros cercle vide, on FORCE l'animation à continuer */
.summoning-circle-container:hover .satellite {
    animation-play-state: running;
}

/* 2. Si (et seulement si) on survole une CARTE (.member-card), on met tout en pause */
.summoning-circle-container:has(.member-card:hover) .satellite {
    animation-play-state: paused;
}

/* 3. Style de la carte survolée */
.member-card:hover { 
    z-index: 500 !important; /* Passe devant tout le monde */
    animation-play-state: paused; 
}

.member-card:hover .card-frame { 
    border-color: #fff; 
    box-shadow: 0 0 30px var(--gold-light); 
    transform: scale(1.1); /* Petit zoom sympa */
}

.member-card:hover img { 
    filter: sepia(0%) contrast(1.2); 
}

/* --- STYLE DE LA CARTE --- */
.card-frame {
    width: 100%; aspect-ratio: 3/4;
    background: #fff; 
    border: 2px solid var(--gold-antique);
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    position: relative; overflow: hidden;
    transition: 0.4s;
    backface-visibility: hidden; 
}

.card-frame img {
    width: 100%; height: 100%; object-fit: cover;
    filter: sepia(20%) contrast(1.1); 
    transition: 0.5s;
}

/* --- INFO MEMBRE --- */
.member-info { 
    margin-top: 10px; 
    background: rgba(0,0,0,0.9); 
    padding: 5px; 
    border-radius: 10px; 
    border: 1px solid var(--gold-antique);
    
    /* On force le texte à rester visible devant */
    transform: translateZ(30px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: 0.3s;
}
.member-info h3 { font-family: var(--font-title); color: #fff; margin: 0; font-size: 1rem; }
.role { font-size: 0.75rem; color: var(--gold-antique); font-style: italic; }


/* =========================================
   KEYFRAMES (ANIMATIONS)
   ========================================= */

@keyframes rotate3D { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

@keyframes appearPop {
    0% { opacity: 0; transform: rotateX(-60deg) translateZ(0px) scale(0); filter: brightness(5); }
    60% { opacity: 1; transform: rotateX(-60deg) translateZ(140px) scale(1.1); }
    100% { opacity: 1; transform: rotateX(-60deg) translateZ(100px) scale(1); filter: brightness(1); }
}

@keyframes floatPresident {
    0%, 100% { transform: rotateX(-60deg) translateZ(100px); }
    50% { transform: rotateX(-60deg) translateZ(120px); }
}

@keyframes orbit {
    0% { transform: rotateZ(0deg) translateX(280px) rotateZ(0deg) rotateX(-60deg) translateZ(150px) scale(1); z-index: 300; }
    50% { transform: rotateZ(180deg) translateX(280px) rotateZ(-180deg) rotateX(-60deg) translateZ(30px) scale(0.6); z-index: 1; }
    100% { transform: rotateZ(360deg) translateX(280px) rotateZ(-360deg) rotateX(-60deg) translateZ(150px) scale(1); z-index: 300; }
}

@keyframes pulseRing {
    from { opacity: 0.5; box-shadow: 0 0 10px var(--purple-royal); }
    to { opacity: 1; box-shadow: 0 0 40px var(--purple-royal); }
}

/* =========================================
   EFFET DE FUMÉE (SMOKE)
   ========================================= */
.smoke-puff {
    position: absolute; top: 60%; left: 50%;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(220,220,220,0.9) 10%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0; pointer-events: none; z-index: 60; 
}

.smoke-1 { animation: smokeExplosion 3s ease-out forwards; }
.smoke-2 { animation: smokeExplosion 3.5s ease-out 0.3s forwards; width: 100px; height: 100px; }
.smoke-3 { animation: smokeExplosion 4s ease-out 0.5s forwards; width: 150px; height: 150px; background: radial-gradient(circle, rgba(120,120,120,0.7) 0%, rgba(0,0,0,0) 70%); }

@keyframes smokeExplosion {
    0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
    30% { opacity: 0.8; transform: translate(-50%, -150%) scale(2); }
    100% { opacity: 0; transform: translate(-50%, -350%) scale(5); }
}

/* =========================================
   DIVISEUR DE FLUX & POLES
   ========================================= */
.magic-flow-divider {
    height: 100px; width: 4px;
    background: linear-gradient(to bottom, var(--gold-antique), transparent);
    margin: -50px auto 50px auto; position: relative;
    box-shadow: 0 0 15px var(--gold-antique);
}
.flow-particles {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px; background: #fff; border-radius: 50%;
    box-shadow: 0 0 20px #fff;
    animation: flowDown 2s infinite linear;
}
@keyframes flowDown { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } }

.level-poles { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }

.pole-group {
    background: rgba(15, 5, 20, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px; padding: 20px;
    width: 100%; max-width: 320px; transition: 0.4s;
}

.pole-group:hover {
    border-color: var(--gold-antique);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    background: rgba(15, 5, 20, 0.9);
}

.pole-title { font-family: var(--font-title); color: var(--gold-antique); margin-bottom: 10px; font-size: 1.4rem; }

/* =========================================
   NOUVEAU : LES PÔLES EN ORBITE 3D (PC)
   ========================================= */

.pole-3d-scene {
    position: relative;
    width: 100%; height: 600px;
    perspective: 1200px;
    margin-bottom: 50px;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

.pole-orbit-ring {
    position: relative;
    width: 500px; height: 500px;
    transform-style: preserve-3d;
    transform: rotateX(75deg);
}

.orbit-member {
    position: absolute; top: 50%; left: 50%;
    width: 140px; height: 180px;
    margin-top: -90px; margin-left: -70px;
    transform-style: preserve-3d;
    animation: spinAround 20s linear infinite;
    animation-delay: calc(var(--i) * -1s); 
}

.orbit-member .member-card {
    width: 100%; height: 100%;
    transform: rotateX(-75deg) rotateY(calc(var(--angle) * -1)); 
    animation: counterRotate 20s linear infinite;
    animation-delay: calc(var(--i) * -1s);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

@keyframes spinAround {
    0%   { transform: rotateZ(0deg) translateX(280px) rotateZ(0deg); }
    100% { transform: rotateZ(360deg) translateX(280px) rotateZ(-360deg); }
}

@keyframes counterRotate {
    0%   { transform: rotateX(-75deg) rotateY(0deg); }
    100% { transform: rotateX(-75deg) rotateY(-360deg); }
}

.orbit-member .card-frame {
    border: 2px solid var(--gold-light);
    box-shadow: 0 0 15px var(--gold-antique);
}

/* =========================================
   CORRECTION 3D ULTIME (LÉVITATION & ANTI-GLITCH)
   ========================================= */

.summoning-circle-container {
    transform: rotateX(60deg) scale(0.9); 
    transform-style: preserve-3d;
}

/* LE FANTÔME (POLE SOLO) : AVANCÉ ET GRANDI */
.pole-solo .satellite {
    animation: none !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) translateZ(120px) !important;
    margin: 0 !important;
    width: 160px !important; height: 200px !important;
    z-index: 100;
}

.pole-solo .satellite .card-frame {
    transform: rotateX(-60deg) !important;
    animation: floatGhost 3s ease-in-out infinite !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    border: 2px solid white;
}
@keyframes floatGhost { 0%, 100% { transform: rotateX(-60deg) translateY(0); } 50% { transform: rotateX(-60deg) translateY(-15px); } }

/* TEXTE GÉANT POUR LE GOAT (FANTÔME) */
.pole-solo .satellite .member-info {
    top: 400px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) rotateX(-60deg) !important;
    margin: 0 !important;
    position: absolute !important;
    text-align: center;
    z-index: 1000 !important;
    animation: none !important;
    background: rgba(0,0,0,0.9) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5) !important;
    border: 1px solid var(--gold-antique) !important;
    width: 260px !important;
    height: 35px !important;
    padding: 10px 0 !important;
}

.pole-solo .satellite .member-info h3 {
    font-size: 1rem !important;
    position: center !important;
    font-family: var(--font-title) !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* RÉPARATIONS FINALES (HOVER) */
.summoning-circle-container:hover .satellite {
    animation-play-state: paused !important;
}
.summoning-circle-container:hover .satellite .card-frame {
    animation-play-state: paused !important;
}

/* LE PÔLE EVENT (POLE PENTA) : ANIMATION */
@keyframes orbitEmptyCenter {
    0%   { transform: rotateZ(0deg) translateX(240px) translateZ(40px) rotateZ(0deg); }
    100% { transform: rotateZ(360deg) translateX(240px) translateZ(40px) rotateZ(-360deg); }
}

.pole-penta .satellite {
    animation: orbitEmptyCenter 20s linear infinite !important;
}

/* Distribution Robuste Event */
.pole-penta .satellite:nth-child(3) { animation-delay: 0s !important; }
.pole-penta .satellite:nth-child(3) .card-frame, .pole-penta .satellite:nth-child(3) .member-info { animation-delay: 0s !important; }

.pole-penta .satellite:nth-child(4) { animation-delay: -4s !important; }
.pole-penta .satellite:nth-child(4) .card-frame, .pole-penta .satellite:nth-child(4) .member-info { animation-delay: -4s !important; }

.pole-penta .satellite:nth-child(5) { animation-delay: -8s !important; }
.pole-penta .satellite:nth-child(5) .card-frame, .pole-penta .satellite:nth-child(5) .member-info { animation-delay: -8s !important; }

.pole-penta .satellite:nth-child(6) { animation-delay: -12s !important; }
.pole-penta .satellite:nth-child(6) .card-frame, .pole-penta .satellite:nth-child(6) .member-info { animation-delay: -12s !important; }

.pole-penta .satellite:nth-child(7) { animation-delay: -16s !important; }
.pole-penta .satellite:nth-child(7) .card-frame, .pole-penta .satellite:nth-child(7) .member-info { animation-delay: -16s !important; }

/* CORRECTION DES NOMS (POSITION & ROTATION GENERALE) */
.satellite .member-info {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%) !important; 
    animation: counterRotate 20s linear infinite !important;
    animation-delay: inherit !important; 
    width: 200px;
    text-align: center;
    pointer-events: none;
    z-index: 20;
}

/* =========================================
   RESPONSIVE MOBILE : FINAL (VERSION UNIQUE ET NETTOYÉE)
   ========================================= */
@media (max-width: 900px) {

    /* 1. SÉCURITÉ GLOBALE : On empêche le débordement horizontal */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }
    /* --- CORRECTION DES TITRES --- */

    /* 1. Le grand titre : "L'Organigramme des Sortilèges" */
    .page-title {
        font-size: 1.6rem !important; /* Beaucoup plus petit (env. 26px) */
        line-height: 1.3 !important;  /* Espacement entre les lignes */
        margin-top: 100px !important; /* Espace pour ne pas toucher le logo en haut */
        margin-bottom: 20px !important;
        padding: 0 15px !important;   /* Marge interne pour ne pas toucher les bords de l'écran */
        width: 100% !important;
        text-align: center !important;
        word-wrap: break-word;        /* Coupe les mots si vraiment trop longs */
    }

    /* 2. Le sous-titre : "Le Grand Conseil" */
    .section-title {
        font-size: 1.3rem !important; /* Plus petit que le titre principal */
        margin-bottom: 40px !important; /* Espace avant le cercle */
        margin-top: 0 !important;
        text-align: center !important;
        color: var(--gold-light);     /* On s'assure qu'il est bien doré */
    }
    /* 2. CENTRAGE DES CONTENEURS */
    .team-container, .pole-group-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .level-br { height: auto; perspective: none; margin-bottom: 50px; overflow: visible; }
    .magic-ring-outer, .magic-ring-inner, .summoning-circle-container::after, .smoke-puff { display: none; }

    /* 3. LE CERCLE MAGIQUE : On le réduit et on arrête la 3D */
    .summoning-circle-container, .pole-orbit-ring, .pole-group {
        width: 320px !important; /* Largeur adaptée au mobile */
        height: 320px !important;
        transform: none !important; /* STOP l'inclinaison 3D */
        perspective: none !important;
        margin: 80px auto 100px auto !important; /* Centrage automatique */
        left: auto !important;
        background: transparent; border: none; box-shadow: none;
        display: block; 
    }

     /* Le fond animé (cercle plat) */
     .summoning-circle-container::before, .pole-group::before {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 320px; height: 320px;
        border: 2px dashed var(--gold-antique); border-radius: 50%;
        box-shadow: 0 0 30px var(--gold-antique) !important;
        animation: rotateMobileCircle 40s linear infinite;
        z-index: 0; opacity: 0.8;
    }

    /* 4. LES TITRES (AU-DESSUS DU CERCLE) */
    .level-br .summoning-circle-container::after {
        content: none !important;
        display: none !important;
    }

    /* A. Cas Spécifique : BUREAU RESTREINT */
    /* On cible uniquement le conteneur dans .level-br pour afficher "Bureau Restreint" */
    .level-br .summoning-circle-container::after {
        content: 'Bureau Restreint';
        display: block !important;
        position: absolute; 
        top: -70px; 
        left: 50%; 
        transform: translateX(-50%);
        width: 300px; 
        text-align: center;
        font-family: var(--font-title); 
        font-size: 1.5rem; 
        color: var(--gold-light);
        z-index: 10; 
        letter-spacing: 2px;
        
    }

    /* B. Cas Général : LES AUTRES PÔLES */
    /* On s'assure que les autres cercles n'affichent PAS "Bureau Restreint" */
    .pole-group-wrapper .summoning-circle-container::after {
        content: none !important;
        display: none !important;
    }

    /* On stylise les vrais titres H2 (PÔLE EVENT, PÔLE COM, etc.) pour qu'ils soient bien placés */
    .pole-title { 
        font-family: var(--font-title); 
        color: var(--gold-antique); 
        margin-bottom: 0px; /* Réduit la marge pour coller au cercle comme le titre BR */
        margin-top: 40px;
        font-size: 1.5rem; 
        text-align: center;
        width: 100%;
        position: relative;
        z-index: 10;
        text-shadow: 0 0 10px rgba(0,0,0,0.8);
    }
    /* 5. LES MEMBRES (SATELLITES) : On arrête leur course */
    .member-card, .president, .satellite, .member-card.small {
        animation: none !important; /* STOP la rotation orbitale */
        top: 50% !important; left: 50% !important;
        margin: -40px !important; /* Pour centrer l'image de 80px */
        width: 80px !important; height: 80px !important;
        transform: translate(-50%, -50%) !important;
        opacity: 1 !important; flex: none; z-index: 5;
    }
    
    .card-frame { 
        width: 100% !important; height: 100% !important; 
        border: 1px solid var(--gold-antique); box-shadow: 0 0 10px #000; border-radius: 10px;
        animation: none !important; transform: none !important; 
    }

    /* 6. CORRECTION SPÉCIALE : FANTÔME & GOAT (Pole Solo) */
    .pole-solo .satellite {
        transform: translate(0, -50%) !important; /* Reset */
        margin: -30px 0 0 -80px !important; /* Centrage manuel */
        width: 160px !important; height: 350px !important;
    }
    
    /* Le Nom du Fantôme/Goat */
    .pole-solo .satellite .member-info {
        top: 260px !important; /* Juste sous la carte */
        bottom: auto !important; left: 50% !important;
        transform: translateX(-50%) !important;
        width: 180px !important;
        margin-top: 10px !important;
        position: absolute !important;
        padding: 10px !important;
    }
    .pole-solo .satellite .member-info h3 { font-size: 1.2rem !important; }

    /* 7. DISPOSITION EN PENTAGONE (POLE EVENT) */
    /* Haut */
    .pole-penta .satellite:nth-child(3) { transform: rotate(-90deg) translate(145px) rotate(90deg) !important; }
    /* Haut Droite */
    .pole-penta .satellite:nth-child(4) { transform: rotate(-18deg) translate(145px) rotate(18deg) !important; }
    /* Bas Droite */
    .pole-penta .satellite:nth-child(5) { transform: rotate(54deg) translate(145px) rotate(-54deg) !important; }
    /* Bas Gauche */
    .pole-penta .satellite:nth-child(6) { transform: rotate(126deg) translate(145px) rotate(-126deg) !important; }
    /* Haut Gauche */
    .pole-penta .satellite:nth-child(7) { transform: rotate(198deg) translate(145px) rotate(-198deg) !important; }

    /* 8. DISPOSITION BR (Bureau Restreint - 5 membres) */
    .summoning-circle-container .member-card:nth-of-type(3) { transform: rotate(-90deg) translate(145px) rotate(90deg) !important; }
    .summoning-circle-container .member-card:nth-of-type(4) { transform: rotate(-18deg) translate(145px) rotate(18deg) !important; }
    .summoning-circle-container .member-card:nth-of-type(5) { transform: rotate(54deg) translate(145px) rotate(-54deg) !important; }
    .summoning-circle-container .member-card:nth-of-type(6) { transform: rotate(126deg) translate(145px) rotate(-126deg) !important; }
    .summoning-circle-container .member-card:nth-of-type(7) { transform: rotate(198deg) translate(145px) rotate(-198deg) !important; }

    /* 9. LES NOMS DES AUTRES MEMBRES */
    .member-info {
        display: block !important; position: absolute;
        top: 85px; left: 50%; transform: translateX(-50%) !important;
        width: 120px !important; text-align: center;
        background: transparent; border: none; box-shadow: none;
        padding: 0; margin: 0; animation: none !important;
    }
    .member-info h3 { font-size: 0.7rem; color: #fff; text-shadow: 0 2px 4px #000; margin: 0; }
    .role { display: none; }

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