/* Styles généraux pour le corps de la page */
body {
    margin: 0;
    padding: 0;
    background-color: #000000; /* Fond noir */
    color: #00FFFF; /* Couleur de texte cyan/bleu électrique pour un look rétro */
    font-family: 'Press Start 2P', cursive; /* Police pixel art */
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    min-height: 100vh; /* La page prend toute la hauteur de la fenêtre */
    overflow: hidden; /* Empêche les barres de défilement si des éléments dépassent */
    flex-direction: column; /* Pour empiler titre et bouton */
    text-align: center; /* Centre le texte si les éléments sont inline */
}

/* Conteneur pour le titre et le bouton */
.container {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Fond légèrement transparent pour l'effet */
    border: 3px solid #00BFFF; /* Bordure bleue nette */
    box-shadow: 0 0 15px #00BFFF; /* Ombre lumineuse bleue */
}

/* Style du titre H1 */
h1 {
    font-size: 4em; /* Titre très gros */
    color: #00FFFF; /* Bleu vif pour le titre */
    text-shadow: 5px 5px 0px #0055AA, /* Ombre de texte pour l'effet 3D pixel */
                 10px 10px 0px #002255;
    margin-bottom: 60px; /* Espace sous le titre */
    letter-spacing: 8px; /* Espacement des lettres pour un look pixelisé */
    animation: flicker 1.5s infinite alternate; /* Effet de scintillement */
}

/* Animation de scintillement pour le titre */
@keyframes flicker {
    0% { opacity: 1; text-shadow: 5px 5px 0px #0055AA, 10px 10px 0px #002255; }
    50% { opacity: 0.9; text-shadow: 4px 4px 0px #0055AA, 8px 8px 0px #002255; }
    100% { opacity: 1; text-shadow: 5px 5px 0px #0055AA, 10px 10px 0px #002255; }
}


/* Style du bouton "Espace personnel" */
.pixel-button {
    display: inline-block; /* Pour pouvoir appliquer padding et dimensions */
    padding: 20px 40px; /* Grand padding pour un bouton imposant */
    background-color: #0088CC; /* Bleu moyen */
    color: #FFFFFF; /* Texte blanc */
    text-decoration: none; /* Supprime le soulignement du lien */
    border: 4px solid #00FFFF; /* Bordure cyan */
    box-shadow: 8px 8px 0px #0055AA; /* Ombre décalée pour un effet 3D pixel */
    cursor: pointer; /* Indique que c'est cliquable */
    font-size: 1.5em; /* Grande taille de police pour le bouton */
    letter-spacing: 3px; /* Espacement des lettres */
    transition: all 0.1s ease-out; /* Transition douce pour les effets au survol */
    white-space: nowrap; /* Empêche le texte du bouton de se casser sur plusieurs lignes */
}

/* Effet au survol du bouton (hover) */
.pixel-button:hover {
    background-color: #00AADD; /* Bleu plus clair au survol */
    color: #FFFF00; /* Texte jaune vif au survol */
    border-color: #FFFF00; /* Bordure jaune au survol */
    transform: translate(4px, 4px); /* Déplace légèrement le bouton */
    box-shadow: 4px 4px 0px #0055AA; /* Réduit l'ombre pour simuler une pression partielle */
}

/* Effet au clic du bouton (active) */
.pixel-button:active {
    transform: translate(8px, 8px); /* Déplace encore plus le bouton */
    box-shadow: none; /* L'ombre disparaît, le bouton semble complètement enfoncé */
}

/* Media Queries pour les petits écrans */
@media (max-width: 600px) {
    h1 {
        font-size: 2.5em; /* Taille de titre plus petite sur mobile */
        letter-spacing: 4px;
        text-shadow: 3px 3px 0px #0055AA, 6px 6px 0px #002255;
        margin-bottom: 40px;
    }
    .pixel-button {
        padding: 15px 25px; /* Padding plus petit pour le bouton */
        font-size: 1.2em; /* Taille de police plus petite pour le bouton */
        letter-spacing: 2px;
        border-width: 2px; /* Bordure plus fine */
        box-shadow: 5px 5px 0px #0055AA;
    }
    .pixel-button:hover {
        transform: translate(2px, 2px);
        box-shadow: 3px 3px 0px #0055AA;
    }
    .pixel-button:active {
        transform: translate(5px, 5px);
    }
}
/* --- Styles spécifiques au menu burger --- */

.burger-menu-wrapper {
    position: absolute; /* Positionne le burger en haut à droite */
    top: 20px;
    right: 20px;
    z-index: 1000; /* Assure qu'il est au-dessus des autres éléments */
}

.burger-toggle {
    display: none; /* Cache la checkbox native */
}

.burger-icon-label {
    display: block; /* Permet d'appliquer padding/margin */
    cursor: pointer;
    font-size: 2.5em; /* Taille de l'icône burger */
    color: #00FFFF; /* Couleur cyan */
    padding: 10px;
    border: 3px solid #00BFFF; /* Bordure bleue */
    background-color: #000000; /* Fond noir */
    box-shadow: 6px 6px 0px #0055AA; /* Ombre 3D pixel */
    transition: all 0.1s ease-out; /* Transition douce pour le survol */
}

.burger-icon-label:hover {
    color: #FFFF00; /* Jaune au survol */
    border-color: #FFFF00;
    transform: translate(3px, 3px); /* Effet de pression */
    box-shadow: 3px 3px 0px #0055AA;
}

.burger-icon-label:active {
    transform: translate(6px, 6px); /* Effet de clic plus prononcé */
    box-shadow: none;
}

.menu-overlay {
    position: fixed; /* Couvre tout l'écran */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Fond noir semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Pour centrer le lien verticalement */
    z-index: 999; /* Moins prioritaire que le bouton burger */
    opacity: 0; /* Caché par défaut */
    visibility: hidden; /* Rend le menu non interactif quand il est caché */
    transition: opacity 0.3s ease-in-out, visibility 0.3s; /* Transition pour l'ouverture/fermeture */
}

/* Quand la checkbox est cochée, le menu s'affiche */
.burger-toggle:checked ~ .menu-overlay {
    opacity: 1;
    visibility: visible;
}

.menu-link {
    font-family: 'Press Start 2P', cursive; /* Police pixel art */
    font-size: 1.8em; /* Grande taille pour le lien */
    color: #00FFFF; /* Cyan */
    text-decoration: none; /* Pas de soulignement */
    padding: 20px 30px;
    margin: 20px; /* Marge autour du lien */
    display: flex; /* Permet d'aligner l'icône et le texte */
    align-items: center; /* Aligner verticalement */
    background-color: rgba(0, 50, 100, 0.5); /* Fond bleu foncé subtil */
    border: 3px solid #00BFFF; /* Bordure bleue */
    box-shadow: 6px 6px 0px #0055AA; /* Ombre 3D pixel */
    transition: all 0.1s ease-out;
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
}

.menu-link:hover {
    background-color: #00AADD; /* Bleu plus clair au survol */
    color: #FFFF00; /* Texte jaune vif au survol */
    border-color: #FFFF00;
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px #0055AA;
}

.menu-link:active {
    transform: translate(6px, 6px);
    box-shadow: none;
}

.menu-link i {
    margin-right: 15px; /* Espace entre l'icône et le texte */
    font-size: 1.2em; /* Taille de l'icône maison */
}


/* Media Queries pour les petits écrans (adaptations pour le menu burger) */
@media (max-width: 600px) {
    .burger-menu-wrapper {
        top: 10px;
        right: 10px;
    }
    .burger-icon-label {
        font-size: 2em; /* Plus petite icône burger sur mobile */
        padding: 8px;
        border-width: 2px;
        box-shadow: 4px 4px 0px #0055AA;
    }
    .menu-link {
        font-size: 1.4em; /* Plus petit texte de lien sur mobile */
        padding: 15px 20px;
        margin: 15px;
        border-width: 2px;
        box-shadow: 4px 4px 0px #0055AA;
    }
    .menu-link i {
        font-size: 1em;
        margin-right: 10px;
    }
}