/* --- CONFIGURATION DES THÈMES --- */
:root {
    /* ÉTAPE 1 : On définit le thème SOMBRE par défaut ici. 
       C'est ce qui empêche le flash blanc avant que le JS ne se charge. */
    --bg: #013220; 
    --red: #A62D17;
    --input-bg: #F5F5DC;
    --transition-speed: 0.8s;
}

/* ÉTAPE 2 : On définit le thème CLAIR (uniquement si l'attribut est présent) 
   On cible html[data-theme] pour être sûr que le CSS réagisse au JS */
html[data-theme="light"] {
    --bg: #F5F5DC;
    --input-bg: #ffffff;
}

/* Optionnel : on peut redéfinir le dark explicitement pour plus de clarté */
html[data-theme="dark"] {
    --bg: #013220;
    --input-bg: #F5F5DC;
}

/* --- RESET & STABILISATION --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    /* Le fond doit être sur HTML aussi pour éviter les bordures blanches au chargement */
    background-color: var(--bg);
}

body {
   height: 100vh; /* Utilise vh pour être sûr de prendre toute la hauteur */
    width: 100vw;
    overflow: hidden;
    background-color: var(--bg);
    color: var(--red);
    font-family: 'Unbounded', sans-serif;
    
    /* Le Flexbox ici va ignorer les éléments en 'fixed' et 'absolute' 
       pour se concentrer sur le seul élément en flux normal : <main> */
    display: flex;
    align-items: center; 
    justify-content: center;
    
    transition: background-color var(--transition-speed) ease-in-out;
    opacity: 0;
}

/* Classe ajoutée par le JS (body.classList.add('is-ready')) */
body.is-ready {
    opacity: 1;
    transition: opacity 0.5s ease, background-color var(--transition-speed) ease-in-out;
}

@keyframes fadeInPage {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- BOUTON THEME --- */
#theme-toggle {
    position: fixed; top: 40px; right: 40px; z-index: 10002;
    background: none; border: 2px solid var(--red); color: var(--red);
    padding: 8px 15px; font-family: 'Unbounded'; font-weight: 900; font-size: 0.7rem;
    cursor: pointer; text-transform: uppercase; border-radius: 50px;
    transition: all 0.3s ease;
}
#theme-toggle:hover { background-color: var(--red); color: var(--bg); }

/* --- LOGO & HEADER --- */
#logo-link {
    position: fixed; top: 40px; left: 40px; width: 50px; z-index: 10001;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#logo-link:hover { transform: scale(1.1) rotate(-5deg); }
#master-icon { width: 50px; display: block; }

header { 
    position: fixed; top: 55px; left: 105px; z-index: 10000; 
    font-weight: 900; text-transform: uppercase; font-size: 0.9rem;
    pointer-events: none;
}

/* --- NAVIGATION FOOTER --- */
footer {
    position: fixed; bottom: 25px; left: 0; width: 100%;
    display: flex; justify-content: center; gap: 60px; z-index: 10000;
}
.nav-link { 
    color: var(--red); text-decoration: none; font-size: 1.3rem; 
    font-weight: 900; text-transform: uppercase; position: relative; 
}
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 4px; bottom: -5px; left: 0;
    background-color: var(--red); transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* --- TYPO FOND --- */
.bg-title-wrapper {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 1; pointer-events: none;
}
.bg-title-part {
    font-size: 30vw; font-weight: 900; line-height: 0.8; text-transform: uppercase;
    letter-spacing: -0.05em; color: var(--bg);
    text-shadow: 2px 2px 0px var(--red), -1px -1px 0px var(--red), 1px -1px 0px var(--red), -1px 1px 0px var(--red);
    white-space: nowrap; transition: color var(--transition-speed) ease;
}

main { 
   position: relative; 
    z-index: 10; 
    width: 100%; 
    max-width: 500px; 
    padding: 20px;
    
    /* Supprime tout margin-top ou transform: translate ici, 
       le flex du body s'occupe de tout. */
    margin: 0; 
    
    max-height: 80vh; 
    overflow-y: auto;
}
/* Cache la scrollbar */
main::-webkit-scrollbar { display: none; }

.input-block {
    background: var(--input-bg); padding: 30px; margin-bottom: 20px;
    box-shadow: 15px 15px 0px var(--red); transform: rotate(1.5deg);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color var(--transition-speed);
    animation: blockIn 0.8s ease backwards;
}
.input-block:nth-child(1) { animation-delay: 0.1s; }
.input-block:nth-child(2) { animation-delay: 0.2s; }
.input-block:nth-child(3) { animation-delay: 0.3s; }

@keyframes blockIn {
    from { opacity: 0; transform: translateY(20px) rotate(5deg); }
    to { opacity: 1; transform: translateY(0) rotate(1.5deg); }
}

.input-block:nth-child(even) { transform: rotate(-2.5deg); }
.input-block:focus-within { transform: rotate(0deg) scale(1.05); box-shadow: 20px 20px 0px var(--red); }

.input-block label { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; display: block; margin-bottom: 12px; }
.input-block input, .input-block textarea {
    border: none; outline: none; font-family: 'Unbounded'; font-size: 1.4rem; font-weight: 900;
    color: var(--red); text-transform: uppercase; width: 100%; background: transparent;
}

.send-btn {
    width: 100%; background: var(--input-bg); border: none; padding: 25px;
    font-family: 'Unbounded'; font-weight: 900; font-size: 1.3rem;
    text-transform: uppercase; color: var(--red); cursor: pointer;
    box-shadow: 15px 15px 0px var(--red); transform: rotate(1deg);
    margin-bottom: 20px; transition: 0.2s;
    animation: blockIn 0.8s ease 0.4s backwards;
}
.send-btn:hover { background: var(--red); color: var(--bg); transform: rotate(0deg) scale(1.02); }

.cv-link {
    display: block; text-align: center; text-decoration: none; color: var(--red);
    font-weight: 900; font-size: 0.75rem; text-transform: uppercase; padding: 15px;
    border: 3px solid var(--red); background: var(--input-bg); transition: 0.3s;
    animation: blockIn 0.8s ease 0.5s backwards;
}
.cv-link:hover { background: var(--red); color: var(--bg); }

/* --- STATUS POPUP (Version Finale) --- */
#status-msg {
    position: fixed;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    padding: 25px 50px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.9rem;
    z-index: 10005;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 15px 15px 0px var(--red);
    border: 4px solid var(--red);
    background: var(--input-bg);
    color: var(--red);
    text-align: center;
}

/* Quand on ajoute .show en JS */
#status-msg.show { top: 40px; }

/* Variantes de couleurs */
#status-msg.success { border-color: #28a745; color: #28a745; box-shadow: 15px 15px 0px #28a745; }
#status-msg.error { border-color: #ff4444; color: #ff4444; box-shadow: 15px 15px 0px #ff4444; }

/* --- RÉSEAUX --- */
.socials {
    position: fixed; bottom: 40px; right: 40px;
    display: flex; flex-direction: column; gap: 15px; z-index: 100; text-align: right;
}
.socials a { text-decoration: none; color: var(--red); font-weight: 900; font-size: 2.5rem; text-transform: uppercase; transition: 0.3s; }
.socials a:hover { transform: translateX(-10px); opacity: 0.7; }

/* --- RESPONSIVE ORIGINAL (Conservé tel quel) --- */
@media (max-width: 1024px) {
    /* 1. LOCK DE L'ÉCRAN */
    html, body {
        position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important; height: 100% !important;
        overflow: hidden !important; margin: 0 !important; padding: 0 !important;
        touch-action: none !important; 
    }

    /* 2. HEADER & LOGO */
    #logo-link { top: 20px !important; left: 20px !important; width: 35px !important; position: fixed !important; z-index: 10005; }
    #master-icon { width: 35px !important; }
    
    header { 
        top: 32px !important; left: 65px !important; 
        font-size: 0.6rem !important; position: fixed !important; 
        z-index: 10004; white-space: nowrap; width: auto !important;
    }

    #theme-toggle { 
        top: 20px !important; right: 20px !important; 
        padding: 6px 12px !important; font-size: 0.55rem !important; 
        position: fixed !important; z-index: 10005;
    }

    /* 3. TITRE DE FOND */
    .bg-title-wrapper {
        position: fixed !important; top: 50%; left: 50%;
        transform: translate(-50%, -50%); width: 100vw !important;
        z-index: 1; pointer-events: none;
    }
    .bg-title-part {
        font-size: 60vw !important; 
        line-height: 0.8; color: var(--bg);
        text-shadow: 1px 1px 0px var(--red), -1px -1px 0px var(--red), 1px -1px 0px var(--red), -1px 1px 0px var(--red);
    }

    /* 4. FORMULAIRE */
    main {
        position: absolute !important;
        top: 45% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 85% !important; max-width: 380px !important;
        z-index: 10; margin: 0 !important; padding: 0 !important;
        max-height: 75vh !important; 
    }

    .input-block { 
        padding: 15px !important; margin-bottom: 12px !important; 
        box-shadow: 8px 8px 0px var(--red) !important; 
        transform: none !important;
    }
    
    .input-block label { font-size: 0.55rem !important; }
    .input-block input, .input-block textarea { 
        font-size: 1.1rem !important; 
        touch-action: auto !important; 
    }

    .send-btn { 
        padding: 18px !important; font-size: 1.1rem !important; 
        box-shadow: 8px 8px 0px var(--red) !important; 
        transform: none !important; margin-bottom: 12px !important;
    }
    
    .cv-link { padding: 8px !important; font-size: 0.6rem !important; border-width: 2px !important; }

    /* 5. RÉSEAUX */
    .socials {
        position: fixed !important; bottom: 45px !important; right: 25px !important;
        display: flex !important; flex-direction: column !important;
        gap: 12px !important; z-index: 100; text-align: right;
    }
    .socials a { font-size: 1.5rem !important; touch-action: auto !important; }

    /* 6. FOOTER */
    footer {
        position: fixed !important; bottom: 20px !important; left: 0 !important;
        width: 100% !important; display: flex !important;
        justify-content: center !important; gap: 30px !important; z-index: 10000;
    }
    .nav-link { font-size: 0.85rem !important; }
    .nav-link::after { height: 2px !important; bottom: -3px !important; }
}