body {
    font-family: Arial, sans-serif;
    background-color: #000000;
    margin: 0;
    display: grid;
    grid-template-columns: 180px 600px;
    justify-content: center; /* C'est ça qui va centrer l'ensemble Menu + Contenu */
}

h1 {
    grid-column: 1 / span 2; 
    font-size: 150%;
    font-family: Courier, monospace;
    color: white;
    text-align: center;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-left: 100px;
}

/* --- LA BARRE LATÉRALE (SIDEBAR) --- */
header {
    height: 100vh;
    position: sticky;
    top: 0;
    padding: 40px 0px 40px 20px;
    background-color: #000;
    border-right: none;
    box-sizing: border-box;
    flex-shrink: 0; /* Empêche le menu de s'écraser si la fenêtre est petite */
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end; /* Aligne tout à droite */
}

header nav li a {
    color: white;               /* Texte blanc */
    text-decoration: none;      /* Enlève le soulignement par défaut */
    font-family: "Courier New", Courier, monospace;
    font-size: 1.1rem;
    margin-right: 15px; 
    display: inline-block;      /* Nécessaire pour l'animation */
    transition: all 0.3s ease;  /* Transition douce pour l'effet */
    padding-bottom: 2px;        /* Petit espace pour le futur surlignage */
    border-bottom: 2px solid transparent; /* Bordure invisible par défaut */
}

/* L'effet au survol (Hoover) */
header nav li a:hover {
    border-bottom: 2px solid white; /* La ligne blanche apparaît */
    /* Optionnel : tu peux aussi ajouter un léger changement d'opacité */
    /* opacity: 0.8; */
}

/* Cache le sous-menu par défaut */
.submenu {
    display: none; 
    list-style: none;
    padding-top: 10px;
    padding-right: 10px; /* Aligné avec la marge des liens parents */
}

/* Style des liens du sous-menu (un peu plus petits) */
.submenu li a {
    font-size: 0.9rem !important;
    border-bottom: 1px solid transparent !important;
    margin-bottom: 5px;
    opacity: 0.8;
}

.submenu li a:hover {
    font-size: 0.9rem !important;
    border-bottom: 1px solid transparent !important;
    margin-bottom: 5px;
    opacity: 1;
    border-right: 2px solid white;
}

/* La classe que le JS va ajouter pour afficher le menu */
.submenu.open {
    display: block;
}

/* --- LE CONTENU PRINCIPAL --- */
.main-content {
    width: 600px; /* Doit correspondre au max-width de tes .post */
    display: flex;
    flex-direction: column;
    align-items: center; /* Pour que le H1 et les articles soient alignés */
    padding-bottom: 100px;
}

.post {
    background: white;
    width: 100%; /* L'article prend toute la largeur des 800px du main-content */
    max-width: 600px;
    margin-bottom: 0px;
    padding: 0;
    line-height: 0;
}

.post p {
    margin: 0;
    padding: 0;
    display: none;
}

/* --- MOBILE (On remet le menu en haut sur téléphone) --- */
@media (max-width: 800px) {
    body {
        grid-template-columns: 100%;
    }

    h1 {
        grid-column: 1; /* Ne prend plus qu'une colonne */
        order: 1;       /* En haut */
        padding-left: 0px;
    }

    header {
        grid-column: 1;
        order: 2;       /* Juste en dessous du titre */
        height: auto;
        position: relative;
        top: 0;
        background: black;
        border-right: none;
        border-bottom: none;
    }

    header nav ul {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-right: 0;
    }

    header nav li a {
        margin-right: 0;         /* On enlève la marge de droite */
        margin: 0 15px;          /* On centre l'espace autour des liens */
        font-size: 1rem;         /* Un poil plus petit sur mobile */
    }



    /* --- LA CORRECTION POUR MOBILE --- */
    .main-content {
        order: 3;
        align-items: center;  /* Centre horizontalement le contenu */
        width: 100%;         /* S'assure que le contenu prend toute la largeur */
    }

    .post {
        order: 3;
        width: 100%;          /* Les articles prennent 90% de la largeur du téléphone */
        margin: 0;    /* Le auto centre horizontalement */
        padding: 0;       /* Un petit padding si tu veux */
    }
}


.post img {
    width: 100%;        /* L'image prend toute la largeur du cadre */
    height: auto;       /* Elle garde ses proportions */
    display: block;     /* Enlève les espaces vides sous l'image */
}

.loader {
    margin: 20px;
    font-style: italic;
    color: #000000;
}

/* Style du bouton "Retour en haut" */
.scroll-btn {
    position: fixed;   /* Reste fixe par rapport à l'écran */
    bottom: 30px;      /* À 30px du bas */
    right: 30px;       /* À 30px de la droite */
    width: 60px;       /* Largeur du bouton */
    height: 60px;      /* Hauteur (pour faire un rond) */
    background-color: transparent; /* Fond transparent pour l'image */
    border: none;      /* Pas de bordure par défaut */
    cursor: pointer;   /* Change le curseur au survol */
    z-index: 1000;     /* S'assure qu'il passe devant tout */
    
    /* Pour l'animation d'apparition */
    opacity: 0;          /* Invisible par défaut */
    visibility: hidden;  /* Cache complètement (pas cliquable) */
    transition: all 0.3s ease; /* Animation douce */
}

/* L'image à l'intérieur du bouton */
.scroll-btn img {
    width: 100%;       /* Prend tout le diamètre */
    height: auto;      /* Garde les proportions */
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3)); /* Une petite ombre portée */
}

/* Quand le JavaScript ajoutera la classe '.show' */
.scroll-btn.show {
    opacity: 1;         /* Devient visible */
    visibility: visible;
    display: block;
}

/* Un petit effet de survol */
.scroll-btn:hover {
    transform: translateY(-5px); /* Monte légèrement */
}

/* L'image commence invisible */
.post img {
    width: 100%;
    height: auto;
    opacity: 0;                /* Invisible au début */
    transition: opacity 0.8s ease-in-out; /* Animation de 0.8 seconde */
}

/* Quand l'image est chargée, on la rend visible */
.post img.loaded {
    opacity: 1;
}