body {
    background-color: #000;
    color: #00ffff;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
    padding: 10px; /* Réduit pour laisser respirer le cadre sur mobile */
    margin: 0;
    box-sizing: border-box;
}

.box {
    width: 100%;
    max-width: 400px;
    border: 2px solid #00ffff;
    padding: 15px; /* Légèrement ajusté pour le cockpit mobile */
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    
    /* 🚀 SÉCURITÉ ABSOLUE : FORCE LE CADRE À RESTER DANS L'ÉCRAN */
    box-sizing: border-box !important; 
}

h2 {
    text-align: center;
    font-size: 1.1rem;
    border-bottom: 1px solid #00ffff;
    padding-bottom: 10px;
    animation: neon-pulse 3s infinite ease-in-out;
}

.data {
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
    font-size: 0.9rem;
}

.val {
    color: #fff;
    font-weight: bold;
    animation: neon-pulse 3s infinite ease-in-out;
}

.bar-bg {
    width: 100%;
    height: 12px;
    background: #111;
    border: 1px solid #00ffff;
    margin-top: 15px;
}

#bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #008888, #00ffff);
    background-size: 200% 100%;
    animation: energy-move 4s infinite linear;
    box-shadow: 0 0 10px #00ffff;
}

.terminal-msg {
    color: #00ffff;
    font-size: 0.75rem;
    margin: 15px 0;
    min-height: 1rem;
    font-weight: bold;
}

.cursor {
    animation: blink 0.8s infinite;
}

.bastion-container {
    margin-top: 20px;
    border-top: 1px solid #00ffff33;
    padding-top: 20px;
}

.project-card {
    display: flex;
    border: 1px solid #00ffff;
    margin-bottom: 15px;
    background: rgba(0, 255, 255, 0.05);
    height: 80px;
    animation: scan-flow 4s infinite ease-in-out;
}

.card-img {
    width: 80px;
    border-right: 1px solid #00ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.card-img img { max-width: 80%; max-height: 80%; }

.card-content { padding: 8px; }
.card-content h3 { font-size: 0.8rem; margin: 0; color: #00ffff; }
.card-content p { font-size: 0.65rem; color: #fff; margin: 4px 0 0 0; opacity: 0.8; }

.footer { text-align: center; font-size: 0.7rem; margin-top: 20px; opacity: 0.5; }

@keyframes neon-pulse {
    0%, 100% { text-shadow: 0 0 5px #00ffff; opacity: 1; }
    50% { text-shadow: 0 0 15px #00ffff; opacity: 0.8; }
}

@keyframes energy-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes scan-flow {
    0%, 100% { background: rgba(0, 255, 255, 0.05); }
    50% { background: rgba(0, 255, 255, 0.15); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* --- BOUTON RETOUR (On garde ta base) --- */
.btn-retour {
    position: fixed !important;
    top: 20px;
    right: 20px;
    border: 1px solid #00ffff !important;
    color: #00ffff !important;
    padding: 10px !important;
    text-decoration: none !important;
    z-index: 9999;
}

/* --- LE LECTEUR AUDIO UNITÉ (Design Purifié) --- */
audio {
    width: 100%;           /* Remplit la largeur du texte */
    height: 32px;          /* Fin et élégant */
    margin: 15px 0;
    background: #000;
    border-left: 2px solid #00ffff; /* Rappel visuel UNITÉ */
    display: block;
    
    /* LE FILTRE CYBER : Inverse le blanc en noir/cyan */
    filter: invert(100%) hue-rotate(180deg) brightness(1.5);
    
    opacity: 0.9;
    transition: opacity 0.3s;
}

audio:hover {
    opacity: 1;
}

/* --- NETTOYAGE DES ANCIENNES MÉTHODES --- */
/* On désactive les boutons et les checkbox qui ne servent plus */
.audio-toggle, .play-btn, .audio-player, .play-overlay {
    display: none !important;
}
/* L'identité visuelle de LAILA */
.laila-resonance-point {
    --cyan-laila: #00ffff;
    --dark-mireuil: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Le Châssis du Bouton */
.laila-btn {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: var(--dark-mireuil);
    border: 2px solid var(--cyan-laila);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    outline: none;
}

/* Le texte 444 */
.laila-btn span {
    color: var(--cyan-laila);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
    z-index: 2;
}

/* L'onde de fréquence (Pulse) */
.laila-btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--cyan-laila);
    border-radius: 50%;
    animation: laila-pulse 2.5s infinite;
    pointer-events: none;
}

/* Interaction au survol */
.laila-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
    background-color: rgba(0, 255, 255, 0.05);
}

.laila-btn:active {
    transform: scale(0.9);
}

/* Légende sous le bouton */
.laila-caption {
    color: var(--cyan-laila);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.laila-resonance-point:hover .laila-caption {
    opacity: 1;
}

/* Animation de la fréquence 444 */
@keyframes laila-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}
/* Animation de pulsation dorée */
@keyframes scelleBrillance {
    0% { filter: drop-shadow(0 0 2px #ffd700); transform: scale(1); }
    50% { filter: drop-shadow(0 0 12px #ffdf70); transform: scale(1.1); }
    100% { filter: drop-shadow(0 0 2px #ffd700); transform: scale(1); }
}

/* Classe de l'objet */
.objet-or-scelle {
    display: inline-block;
    animation: scelleBrillance 2.5s infinite ease-in-out;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Interaction au survol */
.objet-or-scelle:hover {
    filter: drop-shadow(0 0 20px #ffffff);
    transform: scale(1.2) rotate(5deg);
}
.img-box {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #000;
    padding: 3px; /* Crée l'espace pour le laser */
    border: none;
}

/* LE LASER TOURNANT */
.img-box::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* On utilise un dégradé ultra-saturé */
    background: conic-gradient(
        transparent, 
        #00ffcc 5%, 
        #00ffcc 10%, 
        transparent 15%
    );
    animation: rotate-light 2s linear infinite; /* Plus rapide pour plus d'impact */
    z-index: 0;
}

/* L'EFFET DE GLOW (FLOU LUMINEUX) */
.img-box::after {
    content: "";
    position: absolute;
    inset: 4px; /* Rentre légèrement à l'intérieur */
    background: inherit;
    border-radius: 22px; /* Ajusté pour l'arrondi interne */
    z-index: 1;
}

/* SÉCURITÉ POUR L'IMAGE */
.img-box img {
    position: relative;
    z-index: 2; /* L'image passe au-dessus du fond mais sous le reflet */
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

@keyframes rotate-light {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.img-box {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    padding: 4px; /* Espace critique pour voir le laser */
    background: #000;
    /* ICI LE POULS : La lueur monte et descend */
    animation: pulse-glow 3s infinite ease-in-out;
}

/* LE FAISCEAU LASER QUI TOURNE */
.img-box::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent, 
        #00ffcc 10%, 
        transparent 20%
    );
    animation: rotate-laser 2s linear infinite;
    z-index: 1;
}

/* PROTECTION DE L'IMAGE */
.img-box img {
    position: relative;
    z-index: 2; /* L'image passe devant le laser */
    border-radius: 22px;
    display: block;
    width: 100%;
    height: 100%;
}

/* LES ANIMATIONS */
@keyframes rotate-laser {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 204, 0.3); }
    50% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.8); }
}
/* Intégration de la logique de calcul de boîte pour éviter le débordement */
.project-card {
    box-sizing: border-box; /* Indispensable pour que le cadre ne sorte pas */
    width: 100%;
    max-width: 100%; /* S'adapte au conteneur .box sans forcer */
    overflow: hidden; /* Empêche les fuites de lumière ou de texte */
}

/* Effet Hover spécifique pour la Résonance */
.project-card:hover {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    filter: brightness(1.2);
}