/* --- LOGIN & HUB --- */
.page-login, .page-hub {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh;
    background: radial-gradient(circle, #001133 0%, #000000 100%);
    color: white;
}

.login-box {
    text-align: center; border: 2px solid cyan; padding: 40px;
    background: rgba(0,0,0,0.8); box-shadow: 0 0 20px cyan; border-radius: 10px;
}

input[type="email"] {
    padding: 10px; width: 300px; margin: 20px 0;
    background: #000; border: 1px solid cyan; color: white;
}

.grid-menu {
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px;
}

.card {
    background: rgba(255,255,255,0.05); padding: 30px; border-radius: 10px;
    border: 1px solid #333; cursor: pointer; transition: 0.3s; width: 200px; text-align: center;
}
.card:hover { border-color: cyan; box-shadow: 0 0 15px cyan; transform: translateY(-5px); }
.card h2 { margin: 0; font-size: 20px; color: cyan; }
.card.spec h2 { color: #ff00ff; } /* Couleur différente pour résultats/prédictions */

.nav-bar {
    position: absolute; top: 0; width: 100%; padding: 20px;
    box-sizing: border-box; background: rgba(0,0,0,0.5);
}
/* style.css - Charte Junior Atlantique */
body { margin: 0; overflow: auto; background-color: #001A38; font-family: 'Arial', sans-serif; }

/* COULEURS JA */
:root {
    --ja-dark: #001A38;  /* Bleu Nuit JA */
    --ja-cyan: #00B2E2;  /* Cyan JA */
    --ja-white: #ffffff;
}

/* UI JEU */
#ui-jeu { position: absolute; width: 100%; height: 100%; pointer-events: none; }

#viseur {
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; background: var(--ja-cyan); border-radius: 50%;
    transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--ja-cyan);
}

#message-interaction {
    position: absolute; top: 65%; width: 100%;
    text-align: center; color: var(--ja-cyan); font-size: 18px; font-weight: bold;
    text-transform: uppercase; letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 178, 226, 0.5); display: none;
}

#instructions {
    position: absolute; top: 20px; left: 20px; 
    color: rgba(255,255,255,0.5); font-size: 12px;
}

#btn-quitter {
    position: absolute; top: 20px; right: 20px; pointer-events: auto;
    background: transparent; border: 1px solid var(--ja-cyan); color: var(--ja-cyan);
    padding: 8px 15px; font-weight: bold; transition: 0.3s; cursor: pointer;
}
#btn-quitter:hover { background: var(--ja-cyan); color: var(--ja-dark); }

/* FENÊTRE MODALE STYLE JA */
#modal-info {
    display: none; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; padding: 40px;
    background: rgba(0, 26, 56, 0.95); /* Fond bleu JA semi-transparent */
    border: 2px solid var(--ja-cyan); 
    box-shadow: 0 0 30px rgba(0, 178, 226, 0.2);
    color: white; text-align: center; z-index: 100;
}

#modal-titre { color: var(--ja-cyan); text-transform: uppercase; margin: 0; font-size: 28px; }
#modal-liste { margin-top: 5px; font-size: 14px; letter-spacing: 3px; color: #aaa; }
#modal-desc { font-size: 16px; line-height: 1.6; margin: 30px 0; color: #ddd; }

.btn-vote {
    padding: 12px 30px; background: var(--ja-cyan); color: var(--ja-dark);
    border: none; font-weight: bold; font-size: 16px; cursor: pointer;
    text-transform: uppercase; transition: 0.3s;
}
.btn-vote:hover { background: white; box-shadow: 0 0 15px white; }

.btn-retour {
    background: transparent; border: none; color: #666; 
    margin-top: 15px; cursor: pointer; text-decoration: underline;
}
/* --- NOUVEAU DESIGN HUB (Cyberpunk / JA Style) --- */

/* 1. Fond Animé et Structure */
/* --- DANS style.css --- */

.page-hub {
    background-color: #000510;
    position: relative;
    
    /* MODIFIEZ CES LIGNES ICI : */
    overflow-y: auto !important;  /* FORCE le défilement vertical */
    height: 100vh;                /* Définit la hauteur de la zone de scroll */
    display: block; 
}

/* Grille de fond qui bouge (Effet 3D rétro) */
.background-grid {
    position: fixed; top: 0; left: 0; width: 200vw; height: 200vh;
    background-image: 
        linear-gradient(rgba(0, 178, 226, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 178, 226, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: gridMove 20s linear infinite;
    z-index: -2;
    opacity: 0.3;
}
@keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 0 1000px; } }

/* Lueur d'ambiance */
.background-glow {
    position: fixed; top: 50%; left: 50%; width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(0, 26, 56, 0.8) 0%, rgba(0, 5, 16, 1) 70%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* 2. Header / Nav */
.nav-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 178, 226, 0.3);
    position: sticky; top: 0; z-index: 10;
}

.pilote-info {
    font-size: 14px; font-weight: bold; color: var(--ja-cyan); letter-spacing: 2px;
    display: flex; align-items: center; gap: 10px;
}

.btn-logout {
    background: transparent; border: 1px solid #ff4444; color: #ff4444;
    padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.3s;
}
.btn-logout:hover { background: #ff4444; color: white; box-shadow: 0 0 10px #ff4444; }

/* 3. Conteneur et Titres */
.hub-container {
    max-width: 1200px; margin: 0 auto; padding: 40px 20px; text-align: center;
}

.main-title {
    font-size: 3rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 4px;
    background: linear-gradient(90deg, #fff, var(--ja-cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(0, 178, 226, 0.4);
}
.year { font-size: 1rem; color: var(--ja-cyan); vertical-align: super; border: 1px solid var(--ja-cyan); padding: 2px 6px; border-radius: 4px;}

.subtitle { color: #8899aa; margin-bottom: 50px; font-size: 1.1rem; }

/* 4. Grille de Cartes */
/* Modification pour forcer 2 colonnes (Carré 2x2) */
/* --- DANS style.css --- */

.grid-menu {
    display: grid;
    /* FORCE 2 COLONNES EXACTES */
    grid-template-columns: 1fr 1fr;
    /* Espacement plus aéré */
    gap: 40px; 
    /* Largeur maximum pour que ce soit centré et pas trop écarté */
    max-width: 800px; 
    /* Centre la grille horizontalement */
    margin: 50px auto; 
}

/* VERSION MOBILE (1 seule colonne sur téléphone) */
@media (max-width: 768px) {
    .grid-menu {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
}

/* 5. Design des Cartes (Glassmorphism) */
/* --- DANS style.css (Remplace la classe .card) --- */

.card {
    background: rgba(10, 20, 40, 0.6); /* Fond plus sombre pour le contraste */
    backdrop-filter: blur(12px); /* Flou plus fort */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px; /* Plus d'espace intérieur */
    text-align: center; /* Tout centrer dans la carte */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animation rebond */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* On utilise Flexbox pour bien aligner icône, titre et texte */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px; /* Hauteur fixe pour que tout soit égal */
}

/* Effet au survol : La carte grossit et s'illumine */
.card:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(20, 30, 50, 0.8);
}

.card-icon {
    font-size: 3.5rem; /* Icône plus grosse */
    margin-bottom: 20px;
    transition: 0.4s;
}

.card h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 10px 0;
    letter-spacing: 1px;
}

.card p {
    font-size: 0.95rem;
    color: #aab;
    margin-bottom: 20px;
    max-width: 80%; /* Pour que le texte ne touche pas les bords */
}



/* Styles Spécifiques par Carte */
/* BDE (Cyan JA) */
.card-ja { border-left: 4px solid var(--ja-cyan); }
.card-ja h2, .card-ja .card-icon { color: var(--ja-cyan); }
.card-ja:hover { box-shadow: 0 10px 30px rgba(0, 178, 226, 0.2); border-color: var(--ja-cyan); }

/* BDS (Magenta) */
.card-bds { border-left: 4px solid #ff00ff; }
.card-bds h2, .card-bds .card-icon { color: #ff00ff; }
.card-bds:hover { box-shadow: 0 10px 30px rgba(255, 0, 255, 0.2); border-color: #ff00ff; }

/* Prédictions (Violet) */
.card-perso { border-left: 4px solid #9d00ff; }
.card-perso h2, .card-perso .card-icon { color: #9d00ff; }
.card-perso:hover { box-shadow: 0 10px 30px rgba(157, 0, 255, 0.2); border-color: #9d00ff; }

/* Résultats (Or/Blanc) */
.card-res { border-left: 4px solid #ffffff; }
.card-res h2, .card-res .card-icon { color: #ffffff; }
.card-res:hover { box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15); border-color: #ffffff; }

/* Badge "En Cours" */
.badge {
    display: inline-block; padding: 5px 10px; border-radius: 20px;
    font-size: 0.7rem; font-weight: bold; text-transform: uppercase;
    background: rgba(255,255,255,0.1); margin-top: auto; width: fit-content;
}
.pulse { animation: pulseAnim 2s infinite; }
@keyframes pulseAnim { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
/* --- STYLE PAGE PRÉDICTIONS --- */

.btn-retour-hub {
    background: transparent; border: 1px solid white; color: white;
    padding: 8px 20px; border-radius: 30px; cursor: pointer; 
    font-weight: bold; transition: 0.3s;
}
.btn-retour-hub:hover { background: white; color: #000; }

.prediction-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    max-width: 1000px; margin: 40px auto; align-items: start;
}

/* Colonnes style verre */
.prediction-col {
    background: rgba(0, 10, 25, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px; padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 300px;
}

.col-header {
    font-size: 1.5rem; font-weight: 800; margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px;
}
.col-bde .col-header { color: var(--ja-cyan); text-shadow: 0 0 10px rgba(0,178,226,0.3); }
.col-bds .col-header { color: #FF00FF; text-shadow: 0 0 10px rgba(255,0,255,0.3); }

/* Cartes de vote individuelles */
.vote-card {
    background: rgba(255,255,255,0.03);
    margin-bottom: 15px; padding: 15px 20px;
    border-radius: 8px; border-left: 4px solid #fff;
    text-align: left; transition: 0.2s;
}
.vote-card:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }

.vote-pole { font-weight: bold; font-size: 1.1rem; color: white; margin-bottom: 5px; }
.vote-choice { font-size: 0.9rem; color: #ccc; }
.vote-date { font-size: 0.75rem; color: #666; margin-top: 8px; text-align: right; }

.empty-msg { color: #555; font-style: italic; margin-top: 50px; }

@media (max-width: 768px) {
    .prediction-grid { grid-template-columns: 1fr; }
}
/* --- STYLE GALERIE MEMBRES --- */

.pole-section {
    margin-bottom: 60px;
    position: relative;
}

.pole-title {
    color: var(--ja-cyan);
    font-size: 1.8rem;
    margin-bottom: 20px;
    margin-left: 50px; /* Aligné avec le début des cartes */
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 178, 226, 0.3);
    border-left: 4px solid var(--ja-cyan);
    padding-left: 15px;
}

/* Conteneur principal du carrousel */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* La zone qui défile */
.member-scroll {
    display: flex;
    gap: 25px;
    overflow-x: auto; /* Permet le scroll */
    scroll-behavior: smooth;
    padding: 20px 50px; /* Espace pour les ombres */
    width: 100%;
    
    /* Cacher la barre de scroll (Chrome/Safari) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.member-scroll::-webkit-scrollbar {
    display: none;
}

/* Boutons de navigation (Flèches) */
.nav-btn {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; z-index: 2;
    transition: 0.3s;
    position: absolute; /* Flottant par dessus */
}
.nav-btn:hover { background: var(--ja-cyan); color: black; box-shadow: 0 0 15px var(--ja-cyan); }
.nav-btn.prev { left: 0; }
.nav-btn.next { right: 0; }

/* Carte Membre (Format Portrait) */
.member-card {
    min-width: 220px; /* Largeur fixe */
    height: 320px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: 0.3s;
    display: flex; flex-direction: column;
}

.member-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--ja-cyan);
}

.img-wrapper {
    height: 240px; width: 100%;
    overflow: hidden;
}
.member-card img {
    width: 100%; height: 100%;
    object-fit: cover; /* Coupe l'image pour remplir le cadre */
    transition: 0.3s;
}
.member-card:hover img { transform: scale(1.1); }

.member-name {
    font-size: 1.2rem; font-weight: bold; color: white;
    margin-top: 10px; text-align: center;
}
.member-role {
    font-size: 0.9rem; color: #aaa; text-align: center; margin-bottom: 10px;
}
/* --- STYLE PAGE COMING SOON --- */

.coming-soon-container {
    height: 80vh; /* Prend presque toute la hauteur */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

/* Animation de l'icône */
.floating-icon {
    font-size: 5rem;
    color: var(--ja-cyan);
    margin-bottom: 30px;
    animation: floatAnim 3s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(0, 178, 226, 0.6);
}

@keyframes floatAnim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Titre */
.cs-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: 5px;
    background: -webkit-linear-gradient(45deg, #fff, var(--ja-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

/* Sous-titre avec mot clé en couleur */
.cs-subtitle {
    font-size: 1.5rem;
    color: #ccc;
    margin-top: 20px;
    max-width: 600px;
}
.highlight {
    color: #FF00FF; /* Rose néon pour "GAGNER" */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 10px #FF00FF;
}

/* Barre de chargement infinie */
.loader-box {
    width: 300px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.loader-bar {
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 50%;
    background: linear-gradient(90deg, transparent, var(--ja-cyan), transparent);
    animation: loadingAnim 1.5s infinite linear;
}

@keyframes loadingAnim {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.cs-footer {
    font-size: 0.9rem;
    color: #555;
    letter-spacing: 3px;
    text-transform: uppercase;
}
/* --- PAGE INTRO (LOADING) --- */

.page-intro {
    background-color: #000000; /* Noir pur comme la référence */
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Courier New', Courier, monospace; /* Typo "Code" / "Machine" */
    transition: opacity 1s ease-out; /* Pour le fondu de sortie */
}

/* Compteur en bas à gauche */
.loader-corner {
    position: absolute;
    bottom: 40px;
    left: 40px;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Contenu Central */
.intro-content {
    text-align: center;
}

/* Icône de prédiction (Dé qui flotte) */
.prediction-icon {
    font-size: 4rem;
    color: var(--ja-cyan);
    margin-bottom: 30px;
    animation: spinDice 3s infinite linear;
    filter: drop-shadow(0 0 15px rgba(0, 178, 226, 0.5));
}

@keyframes spinDice {
    0% { transform: rotateY(0deg) rotateX(0deg); opacity: 0.5; }
    50% { transform: rotateY(180deg) rotateX(20deg); opacity: 1; }
    100% { transform: rotateY(360deg) rotateX(0deg); opacity: 0.5; }
}

/* Titre JAckpôle */
.intro-title {
    font-size: 4rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 10px;
    position: relative;
}

/* Animation d'apparition des lettres (Effet "Machine à écrire" ou "Décodage") */
.intro-title .letter {
    display: inline-block;
    opacity: 0;
    animation: appear 0.5s forwards;
}

/* On décale l'apparition de chaque lettre pour l'effet "cascade" */
.intro-title .letter:nth-child(1) { animation-delay: 0.1s; color: var(--ja-cyan); } /* J en Cyan */
.intro-title .letter:nth-child(2) { animation-delay: 0.2s; color: var(--ja-cyan); } /* A en Cyan */
.intro-title .letter:nth-child(3) { animation-delay: 0.3s; }
.intro-title .letter:nth-child(4) { animation-delay: 0.4s; }
.intro-title .letter:nth-child(5) { animation-delay: 0.5s; }
.intro-title .letter:nth-child(6) { animation-delay: 0.6s; }
.intro-title .letter:nth-child(7) { animation-delay: 0.7s; }
.intro-title .letter:nth-child(8) { animation-delay: 0.8s; }

@keyframes appear {
    0% { opacity: 0; transform: translateY(20px); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.intro-sub {
    margin-top: 20px;
    color: #666;
    font-size: 0.8rem;
    letter-spacing: 5px;
    animation: pulseText 1s infinite alternate;
}

@keyframes pulseText {
    0% { opacity: 0.3; }
    100% { opacity: 0.8; }
}