/* ==========================================================================
   CUSTOM.CSS : VERSION FINALE ET CORRIGÉE
   ========================================================================== */

/* 1. RESET GLOBAL & TYPOGRAPHIE */
* {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff;
    overflow: hidden; /* Empêche le scroll global du navigateur */
}

/* Neutralise les contraintes Spectre sur les images */
img {
    max-width: none !important;
    height: auto;
}

/* 2. STRUCTURE (HEADER GAUCHE | CONTENU DROITE) */
#page-wrapper {
    display: flex !important;
    flex-direction: row !important;
    height: 100vh;
    width: 100vw;
    align-items: stretch;
}

#header {
    flex: 0 0 auto;
    padding: 60px 40px !important;
    background: #fff;
    border-right: 1px solid #eee;
    z-index: 10;
    min-width: min-content;
}

/* 3. NAVIGATION & SOUS-MENU ESSAYS */
.navbar-section.desktop-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
}

.menu-wrapper {
    width: 180px;
    flex: 0 0 auto;
}

.navigation {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.navigation li a {
    text-decoration: none !important;
    color: #1a1a1a !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 0.15em;
    display: block;
    padding-bottom: 1.2rem;
}

.navigation li.active a { font-weight: bold !important; }

/* Colonne des articles (Essays) */
.sub-menu-column {
    border-left: 1px solid #eee !important;
    padding-left: 50px !important;
    margin-left: 40px !important;
    min-width: 400px;
    height: calc(100vh - 120px);
    overflow-y: auto;
}

.essays-list {
    list-style: none !important;
    padding: 0 !important;
}

.essays-list li { margin-bottom: 1.8rem !important; }

.essays-list li a {
    font-size: 1.1rem !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    line-height: 1.3;
    display: block;
}

/* 4. ZONE DE CONTENU PRINCIPALE */
#start {
    flex: 1;
    height: 100vh;
    overflow-x: auto; /* Active le scroll horizontal si nécessaire */
    overflow-y: auto; /* Active le scroll vertical pour les textes longs */
    background: #fff;
}

#main-content {
    height: 100%;
    width: 100%;
}

/* Nettoyage des conteneurs internes de Grav */
#body-wrapper, .container {
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. STYLE DES ARTICLES (About / Essays) */
.essay-post {
    max-width: 750px; /* Largeur optimale pour la lecture */
    margin: 80px 100px !important;
    white-space: normal; /* Force le retour à la ligne */
}

.essay-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: #333;
}

.essay-header h1 {
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

/* 6. STYLE DES GALERIES (Parenthèse / Zone Rouge) */
.gallery-scroll-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 100vh !important;
    padding: 0 100px !important;
    width: max-content; /* Étend la zone selon le nombre d'images */
}

.gallery-item {
    flex: 0 0 auto;
    margin-right: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gallery-img {
    height: 68vh !important; /* Taille ajustée pour éviter les débordements */
    max-height: 68vh !important;
    width: auto !important;
    display: block;
    object-fit: contain;
}

/* Texte d'intro des galeries */
.intro-text {
    width: 380px;
}

.intro-text h1 {
    font-size: 1.4rem !important;
    text-transform: uppercase;
    margin-bottom: 1.5rem !important;
}

/* Style de base de la flèche (déjà présent, on ajuste l'opacité) */
#start::after {
    content: "→";
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: #1a1a1a;
    opacity: 0.3;
    pointer-events: all;
    cursor: pointer;
    transition: opacity 0.4s ease, visibility 0.4s; /* Transition fluide */
    z-index: 1000;
}

/* État quand on arrive au bout : on cache la flèche */
#start.is-at-end::after {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Désactive le clic quand elle est invisible */
}

/* 7. NETTOYAGE ÉLÉMENTS INUTILES */
.navbar-section.logo, .mobile-menu, #footer, .mobile-container, .navbar-toggler {
    display: none !important;
}