/* =========================================
   1. BASE & UTILITAIRES
   ========================================= */
body {
    margin: 0; 
    padding: 0; 
    background-color: #000000; /* Fond noir absolu */
    height: 100vh;
    width: 100vw;
    display: flex; 
    justify-content: center; 
    align-items: center;
    overflow: hidden; /* Empêche les barres de défilement */
}

/* Polices */
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-vt323 { font-family: 'VT323', monospace; }

/* Classes utilitaires JS */
.hidden { display: none !important; }
.flex { display: flex !important; }

/* Conteneur centré générique */
.centered-container {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
}

/* =========================================
   2. ÉCRAN DE DÉPART (Start Screen)
   ========================================= */
#start-screen { 
    z-index: 100; /* Toujours au-dessus au début */
    position: absolute; 
}

#start-btn {
    background: rgba(0, 0, 0, 0.8); 
    color: #00f3ff; 
    border: 2px solid #00f3ff;
    padding: 20px 40px; 
    cursor: pointer; 
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
    position: relative;
    overflow: hidden;
}

#start-btn:hover { 
    background: #00f3ff; 
    color: black; 
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.8); 
}

/* Modification du conteneur pour empiler bouton et texte */
#start-screen { 
    z-index: 100;
    position: absolute;
    /* On ajoute Flex pour aligner le bouton et le texte verticalement */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Espace entre le bouton et le texte */
}

/* Style du texte et de l'icone */
.sound-instruction {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre icone et texte */
    color: #00f3ff; /* Même cyan que le bouton */
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    animation: pulse-sound 2s infinite ease-in-out;
}

/* Style de l'icône SVG */
.sound-icon {
    width: 24px;
    height: 24px;
    fill: #00f3ff;
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.5));
}

/* Petite animation douce pour attirer l'attention */
@keyframes pulse-sound {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); text-shadow: 0 0 10px #00f3ff; }
}

/* =========================================
   3. FOND TERMINAL HACKER (NOUVEAU)
   ========================================= */
#hacking-bg {
    position: absolute;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: 1; /* Tout au fond */
    background-image: "www/html/assets/fondv1.png";
    padding: 20px;
    box-sizing: border-box;
    font-family: 'VT323', monospace;
    overflow: hidden;
}

/* Le conteneur qui reçoit le texte JS */
#terminal-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Le texte s'empile depuis le bas */
    align-items: flex-start;
    color: #33ff33; /* Vert terminal classique */
    font-size: 1rem;
    line-height: 1.3;
    text-shadow: 0 0 4px rgba(51, 255, 51, 0.6); /* Petit effet néon */
}

/* Styles des lignes injectées par JS */
.log-line {
    margin: 0;
    width: 100%;
    word-wrap: break-word;
    opacity: 0.2;
}

/* Couleurs syntaxiques pour le réalisme */
.log-prefix { color: #0088ff; margin-right: 15px; } /* Bleu [SYSTEM] */
.log-warning { color: #ffaa00; } /* Orange */
.log-error { color: #ff3333; text-shadow: 0 0 8px red; font-weight: bold; } /* Rouge */
.log-success { color: #00ff00; font-weight: bold; } /* Vert vif */

/* Effet Scanlines (Lignes TV cathodique) */
.terminal-overlay {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    /* Grille de pixels + lignes horizontales */
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 3px, 3px 100%;
    pointer-events: none; /* Laisse passer les clics */
    z-index: 2;
}

/* =========================================
   4. SÉQUENCE "WELCOME TO THE FUTURE"
   ========================================= */
.container { 
    position: absolute; 
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center; 
    font-family: 'Orbitron', sans-serif;
    z-index: 10; 
    pointer-events: none;
}

.word {
    position: absolute; 
    font-size: 6rem; /* Très gros */
    font-weight: 900; 
    color: white;
    opacity: 0; 
    transform: scale(0.8);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.active { opacity: 1; transform: scale(1); }
.exit { opacity: 0; transform: scale(1.5); filter: blur(15px); transition: all 0.4s ease; }

#word-4 { font-size: 8rem; color: #ffffff; text-shadow: 0 0 40px #4a979b; }

/* Animation d'évaporation finale */
.evaporate-effect { animation: evaporate 1s forwards ease-in; }
@keyframes evaporate {
    0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
    100% { opacity: 0; transform: translateY(-200px) scale(1.2) rotate(5deg); filter: blur(30px); }
}

/* =========================================
   5. WINDOWS 98 & GLITCH
   ========================================= */
#win98-screen {
    position: absolute; top:0; left:0; width:100%; height:100%;
    z-index: 50; 
    background-color: #008080; /* Teal Windows 98 */
    font-family: 'VT323', monospace;
    justify-content: center; align-items: center;
    overflow: hidden;
}

.shake-wrapper {
    position: relative; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
}

/* Overlay effet CRT scintillant */
.crt-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 90%, rgba(0,0,0,0.1) 100%);
    background-size: 100% 4px;
    animation: flicker 0.1s infinite;
    mix-blend-mode: overlay;
}
@keyframes flicker { 0% { opacity: 0.8; } 50% { opacity: 0.95; } 100% { opacity: 0.85; } }

/* La Fenêtre Style Win98 */
.win98-box {
    background: #c0c0c0; 
    border: 3px solid;
    border-color: #ffffff #404040 #404040 #ffffff; /* Effet 3D relief */
    padding: 4px; 
    width: 500px; 
    box-shadow: 15px 15px 0px rgba(0,0,0,0.5);
    position: relative; z-index: 10;
}

.win-header {
    background: linear-gradient(90deg, #000080, #1084d0); 
    color: white;
    padding: 6px 10px; 
    font-weight: bold; 
    font-size: 1.2rem;
    letter-spacing: 1px;
    display: flex; align-items: center;
}

.win-body { padding: 40px; text-align: center; color: black; }

.progress-bar {
    width: 100%; height: 25px; 
    background: white; 
    border: 2px solid #808080; /* Enfoncé */
    border-color: #404040 #ffffff #ffffff #404040;
    margin-top: 25px; 
    position: relative;
}

.progress-fill {
    width: 0%; height: 100%; 
    background: #000080;
    animation: loading 7s steps(20) forwards; /* Chargement par crans */
}
@keyframes loading { 0% { width: 5%; } 100% { width: 100%; } }

/* Blocs de glitch (générés par JS) */
.glitch-block {
    position: absolute; z-index: 55; pointer-events: none;
    mix-blend-mode: exclusion; 
}
.glitch-color-1 { background: #00ff00; }
.glitch-color-2 { background: #ff00ff; }
.glitch-color-3 { background: #00ffff; }
.glitch-color-4 { background: #ffffff; }
.glitch-color-5 { background: #000000; }

.pixelate-filter { filter: contrast(200%) brightness(150%) hue-rotate(90deg) blur(1px); }

/* =========================================
   6. TRANSITIONS & FONDUS
   ========================================= */
#transition-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: black;
    z-index: 200; /* Le plus haut */
    opacity: 0; pointer-events: none;
    transition: opacity 1.5s ease-in-out;
}
.fade-to-black { opacity: 1 !important; pointer-events: auto !important; }

/* =========================================
   7. MENU FINAL (Holographique)
   ========================================= */
#final-menu {
    z-index: 60;
    color: white;
    transform: translate(-100px,0px);
    /* Image de fond et centrage */
    background: url('assets/Fond.png') no-repeat center center / cover;
}

/* Conteneur global des cartes */
.choices-container {
    display: flex;
    /* On écarte les cartes pour qu'elles aillent vers les bulles extérieures */
    justify-content: space-around;
    align-items: center; /* Centre verticalement par défaut */
    flex-wrap: wrap;
    width: 90%; /* Largeur totale pour bien écarter */
    max-width: 1400px; /* Limite pour les très grands écrans */
    margin-top: 50px;
}

/* --- STYLE DE BASE DES CARTES (SANS BORDURES BLEUES) --- */
.choice-card {
    /* Fond très léger */
    background: rgba(255, 255, 255, 0.05);
    /* PAS DE BORDURE */
    border: none;
    border-radius: 25px; /* Coins un peu plus arrondis */
    padding: 20px;
    text-align: center;
    cursor: pointer;
    /* Transition douce pour le mouvement */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 280px;
    height: 380px;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    position: relative;
    /* Flou d'arrière-plan pour l'effet "verre" */
    backdrop-filter: blur(8px);
    /* Ombre douce et discrète au lieu du glow bleu */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- STYLE AU SURVOL (HOVER) SIMPLIFIÉ --- */
.choice-card:hover {
    /* Fond légèrement plus clair au survol */
    background: rgba(255, 255, 255, 0.1);
    /* Pas de bordure, pas de glow bleu intense */
    border: none;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    /* Note: Le mouvement (transform) est géré plus bas pour chaque carte */
}


/* ==================================================================
   ZONES DE RÉGLAGE DES POSITIONS
   Change les valeurs en 'px' pour monter ou descendre les cartes.
   - Valeur POSITIVE (ex: 100px) = DESCENDRE
   - Valeur NÉGATIVE (ex: -100px) = MONTER
   ================================================================== */

/* ------ CARTE 1 : GAUCHE (Open Source World) ------ */
.choice-card:nth-child(1) {
    /* CHANGE ICI POUR BOUGER LA CARTE AU REPOS */
    transform: translate(20px,70px);
}
.choice-card:nth-child(1):hover {
    /* CHANGE ICI POUR LA POSITION AU SURVOL (Garde un léger décalage pour l'effet de levée) */
    /* Idéalement : Valeur du dessus - 15px */
    transform: translate(20px,55px);
}

/* ------ CARTE 2 : CENTRE (Retro Hardware) ------ */
.choice-card:nth-child(2) {
    /* CHANGE ICI POUR BOUGER LA CARTE AU REPOS */
    transform: translate(95px,70px);
}
.choice-card:nth-child(2):hover {
    /* CHANGE ICI POUR LA POSITION AU SURVOL */
    /* Idéalement : Valeur du dessus - 15px */
    transform: translate(95px,55px);
}

/* ------ CARTE 3 : DROITE (Knowledge Base) ------ */
.choice-card:nth-child(3) {
    /* CHANGE ICI POUR BOUGER LA CARTE AU REPOS */
    transform: translate(-50px,-200px);
}
.choice-card:nth-child(3):hover {
    /* CHANGE ICI POUR LA POSITION AU SURVOL */
    /* Idéalement : Valeur du dessus - 15px */
    transform: translate(-50px,-185px);
}

/* ------ CARTE 4 : (NOUVELLE) ------ */
.choice-card:nth-child(4) {
    /* REGLE ICI LES X et Y pour la placer sur ta 4ème bulle */
    transform: translate(0px, 0px); 
}
.choice-card:nth-child(4):hover {
    /* Au survol : Monte légèrement le Y (ex: si Y=0px, met -15px) */
    transform: translate(0px, -15px);
}

.choice-card h3 {
    margin-top: 10px;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #ffffff;
    /* Ombre de texte blanche plus discrète */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Conteneur Modèle 3D */
.model-box {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    
    /* 1. Force le contenu à rester dans le cercle (même la 3D) */
    overflow: hidden;
    
    /* 2. SOLUTION MAGIQUE : Force le navigateur à appliquer un masque rond strict */
    /* Cela corrige le problème où la 3D "bave" dans les coins */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);

    /* Positionnement */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

model-viewer {
    width: 100%; height: 100%;
    background-color: transparent;
}

/* Effet Hologramme sur les modèles (J'ai gardé un peu de bleu ici pour le style) */
.holo-model {
    opacity: 0.8;
    /* Filtre légèrement ajusté pour être moins saturé */
    filter: sepia(80%) hue-rotate(180deg) saturate(200%) drop-shadow(0 0 5px rgba(0, 243, 255, 0.5));
    mix-blend-mode: screen;
    transition: all 0.4s ease;
}

.choice-card:hover .holo-model {
    opacity: 1;
    /* Retour aux couleurs normales au survol */
    filter: sepia(0%) hue-rotate(0deg) saturate(100%) drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

/* Ecran d'alerte audio */
#audio-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: black; /* ou transparent si tu veux voir le fond hacking */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    font-family: 'Orbitron', sans-serif;
    color: #00f3ff; /* Cyan futuriste */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#audio-alert.visible {
    opacity: 1;
}

.headphone-content {
    text-align: center;
}

.headphone-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    stroke: #00f3ff;
    filter: drop-shadow(0 0 10px #00f3ff);
    animation: pulseIcon 2s infinite;
}

.blink-text {
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #00f3ff;
    animation: textFlicker 3s infinite alternate;
}

/* Animations */
@keyframes pulseIcon {
    0% { transform: scale(1); filter: drop-shadow(0 0 5px #00f3ff); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 20px #00f3ff); }
    100% { transform: scale(1); filter: drop-shadow(0 0 5px #00f3ff); }
}

@keyframes textFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
    }
    20%, 24%, 55% {
        opacity: 0.1;
        text-shadow: none;
    }
}