/* --- VARIABLES TERMINAL AMBRE --- */
:root {
    --term-bg: #0a0805;
    --term-amber: #ffb74d;
    --term-amber-dim: rgba(255, 183, 77, 0.2);
    --term-text: #e0c0a0;
    --term-alert: #ff4400;
    --term-muted: #8a7a6a;
}

body {
    background-color: var(--term-bg) !important;
    color: var(--term-text) !important;
    margin: 0;
    padding: 2rem 1rem !important; 
    background-image: radial-gradient(rgba(255, 183, 77, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ERADICATION DU GRAS ABSOLUE + POLICE + BOX SIZING GLOBAL */
* { 
    font-weight: normal !important; 
    font-family: 'Share Tech Mono', monospace !important; 
    box-sizing: border-box !important; 
}

/* --- L'EFFET ORACLE : LE CONTAINER PRINCIPAL --- */
#app {
    background-color: var(--term-bg);
    border: 1px solid var(--term-amber-dim);
    box-shadow: 0 0 40px rgba(0, 0, 0, 1) inset, 0 0 15px rgba(255, 183, 77, 0.05);
    position: relative;
    overflow: hidden; 
    padding: 2.5rem !important;
    margin: 0 auto;
    border-radius: 2px;
    background-image: radial-gradient(circle at center, rgba(255, 183, 77, 0.04) 0%, transparent 100%);
    max-width: 1200px;
}

/* SCANLINES SUR LE CONTAINER */
#app::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 5;
    background-size: 100% 3px, 2px 100%;
    pointer-events: none;
}
#app > * { position: relative; z-index: 10; }

/* COMPOSANTS DE BASE */
.btn-cyber {
    background-color: rgba(0,0,0,0.4);
    color: var(--term-text);
    border: 1px solid var(--term-amber-dim);
    padding: 10px 15px; 
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    white-space: normal; 
    word-wrap: break-word;
}
@media (min-width: 768px) {
    .btn-cyber { padding: 12px 20px; } 
}

.btn-cyber:hover, .btn-cyber.active {
    background-color: var(--term-amber-dim);
    color: var(--term-amber);
    border-color: var(--term-amber);
    box-shadow: 0 0 10px var(--term-amber-dim);
}

.input-cyber {
    background-color: rgba(0,0,0,0.4);
    color: var(--term-amber);
    border: 1px solid var(--term-amber-dim);
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
}
.input-cyber:focus { outline: none; border-color: var(--term-amber); box-shadow: 0 0 8px var(--term-amber-dim); }

/* --- DISPOSITION V10 (2 COLONNES HAUT) --- */
.top-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .top-settings-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* BOUTONS L1, L2, L3 (STYLE PLAT) */
.lvl-btn { 
    border: 1px solid var(--term-amber-dim); 
    color: var(--term-muted); 
    padding: 6px 0; 
    font-size: 0.75rem; 
    background: rgba(0,0,0,0.5); 
    cursor: pointer; 
    transition: 0.2s;
    text-align: center;
    flex: 1; 
}
@media (min-width: 768px) { .lvl-btn { flex: none; width: 45px; } }
.lvl-btn:hover { border-color: var(--term-amber); color: var(--term-amber); }
.lvl-btn.active { background: var(--term-amber); color: var(--term-bg) !important; border-color: var(--term-amber); }

/* --- GRILLE DES 5 RÉPONSES (QUIZ) --- */
.quiz-options-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .quiz-options-line { grid-template-columns: repeat(5, 1fr); }
}

/* UTILITAIRES & ANIMATIONS (TYPEWRITER) */
.blink { animation: blinker 0.8s step-end infinite; }
@keyframes blinker { 50% { opacity: 0; } }

.cyber-fade-target {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* OVERRIDE TAILWIND (PC) */
.bg-white, .bg-gray-50, .bg-gray-100 { background-color: transparent !important; }
.text-gray-900, .text-gray-800 { color: var(--term-text) !important; }

/* =========================================================
   MOBILE FIX : L'ÉQUILIBRE PARFAIT
   ========================================================= */
@media (max-width: 768px) {
    body { padding: 0 !important; } 
    
    #app { 
        width: 100% !important; 
        max-width: 100% !important;
        padding: 1rem !important; /* On ramène 1cm d'air sur les côtés */
        border: none; 
        box-shadow: none; 
        margin-top: 0; 
        margin-bottom: 0; 
        background-image: none;
    }
    #app::after { display: none; }
    
    /* On adoucit l'espacement du texte */
    .tracking-widest { letter-spacing: 0.05em !important; }
    .text-2xl { font-size: 1.25rem !important; }
    .text-xl { font-size: 1.1rem !important; }
    .text-lg { font-size: 0.9rem !important; }
    
    /* On réduit légèrement les énormes marges internes de Tailwind */
    .p-6 { padding: 1.25rem !important; }
    .p-4 { padding: 0.75rem !important; }
    
    /* RESTRUCTURATION DES BOUTONS DE MODULE SUR MOBILE */
    .module-line {
        flex-direction: column !important; /* Le titre passe au dessus */
        align-items: flex-start !important;
        gap: 0.75rem !important; /* Espace entre le titre et les boutons */
    }
    .module-line > div {
        width: 100% !important; /* La barre de boutons prend 100% de la largeur */
    }
    .lvl-btn {
        padding: 12px 0 !important; /* Boutons plus hauts pour les gros doigts */
        font-size: 0.85rem !important;
    }
    
    * { overflow-wrap: break-word; }
}

/* =========================================================
   IMPRESSION & EXPORT PDF
   ========================================================= */
@media print {
    body, #app { 
        background: white !important; color: black !important; padding: 0 !important; box-shadow: none !important; background-image: none !important; border: none !important;
    }
    #app::after { display: none !important; }
    * { color: black !important; background: transparent !important; text-shadow: none !important; }
    .text-term-amber, .text-term-muted { color: #333 !important; }
    
    details { display: block !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
    details > div { display: block !important; }
    summary { border-bottom: 1px solid #ccc !important; font-weight: bold !important; }
    summary::marker { content: ""; }
    
    button, #remote-box, .btn-cyber { display: none !important; }
    .target-card, .border-term-amber-dim { border-color: #ddd !important; }
    .bg-black\/20, .bg-black\/30, .bg-black\/40 { background-color: transparent !important; }
}