/* ============================================================
   0. VARIABLES & CONFIGURATION
   ============================================================ */
:root {
    --bg-black: #000000;
    --bg-white: #ffffff;
    --font-main: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --text-white: #ffffff;
    --text-black: #1a1a1a;
    --text-grey: #d1d1d1;

    --text-size-1: 1.8rem;
    --text-size-2: 1.1rem;
    --text-size-3: 0.8rem;
    
    --padding-x: 40px;
    --elem-height: 50px;

    --line-weight: 2px; /* Correction typo wheight -> weight */
    --line-color: #ffffff;
    --header-width: 300px;
    --header-height:230px;
}

/* ============================================================
   1. STRUCTURE DU HEADER
   ============================================================ */
header {
    font-family: var(--font-main);
    background-color: var(--bg-black);
    width: var(--header-width);
    min-width: var(--header-width); /* Force la largeur */
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
    display: flex;
    flex-direction: column; /* Aligne verticalement NameSite et listeDeConteneur */
    border-right: var(--line-weight) solid var(--line-color);
    z-index: 1000;
}

 main{
        margin-left:var(--header-width); /* Ajuste selon la hauteur de ton header mobile */
        margin-top:20px; 
    }

    

h1 {
    writing-mode: horizontal-tb; /* On s'assure d'être en mode normal avant rotation */
    color: var(--text-white);
    /*padding-left: var(--padding-x); */
    font-size: var(--text-size-1);
    font-weight: 400;
    
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 3px;
}
h2 {

    color: var(--text-grey);
    /*padding-left:  var(--padding-x); */
   font-size: var(--text-size-2);
    font-weight: 400;   
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

a {
    color: var(--text-grey);
    /*padding-left:  var(--padding-x); */
    font-size: var(--text-size-3);
    font-weight: 400;
    letter-spacing: 0.2em;
  
}

.NameSite{
    height: var(--header-height);
}

.Header_Div {
    width: 100%;
}

/* ============================================================
   2. ÉLÉMENTS DE NAVIGATION
   ============================================================ */
.conteneur_Nav {
    width: 100%;
    min-height: var(--elem-height); /* Garantit la hauteur de 50px */
    display: flex;
    flex-direction: column;
    overflow: visible; /* Permet au sous-menu de sortir si besoin */
}

.conteneur_Nav a {
    display: flex;
    align-items: center;
    height: var(--elem-height);
    padding-left: var(--padding-x);
    text-decoration: none;
    color: var(--text-white);
    font-size: var(--text-size-2);
    text-transform: uppercase;
    transition: background 0.3s;
}

/* État Actif / Hover */
.conteneur_Nav.Evidence > a {
    background-color: var(--bg-white);
    color: var(--text-black) !important; /* Force le texte noir sur fond blanc */
}

/* ============================================================
   3. SOUS-MENU (PROJETS)
   ============================================================ */
.Conteneur_NavListe {
    max-height: 0;
    overflow: hidden;
    background-color: #111; /* Un peu plus clair que le noir pur pour voir la différence */
    transition: max-height 0.5s ease-out;
 
}

.conteneur_Nav.Evidence .Conteneur_NavListe {
    max-height: 250px; /* Déploie le menu */
    overflow-y: auto;  /* Active le scroll vertical si nécessaire */
    overflow-x: hidden; /* Empêche le scroll horizontal parasite */
}

.Elem_NavListe {
    height: var(--elem-height);
    display: flex;
    align-items: center;
}

.Elem_NavListe a {
    width: 100%;
    padding-left: calc(var(--padding-x) + 15px); /* Plus de retrait pour la hiérarchie */
    color: var(--text-grey); /* Ton gris de base */
    font-size: var(--text-size-3);
    text-decoration: none;
}

/* Rendre les liens de projets blancs au survol de la ligne */
.Elem_NavListe:hover a, .Elem_NavListe.Color a {
    color: var(--text-white) !important;
}

.Elem_NavListe.Color {
    background-color: var(--bg) !important;
}




@media screen and (max-width: 850px) {
    h2, a { display: none; }
    
    header {
         position: fixed;
        width: 100%;
        height: var(--header-height);
        padding-left:0px;
        padding-right:0px;
        flex-direction: row;
    }
    
   main{
        margin-top:var(--header-width); /* Ajuste selon la hauteur de ton header mobile */
        margin-left:20px; 
    } 
    h1 {
        display: block;
        writing-mode: vertical-rl;
        transform: rotate(180deg); /* Lecture de bas en haut */
        text-align: center;
        margin: 0 auto;
        height: fit-content;
    }
    .NameSite{
    width: 74px;
    }   

    .listeDeConteneur{
        width:120px;
    }

    .Elem_NavListe {
        background-color: var(--bg-black);
        display: flex;
        justify-content: center;
        align-items: center;
    }
/* C'EST CETTE RÈGLE QUI MANQUAIT : */
    .Elem_NavListe a {
        width: 100%;
        padding-left: 3px; /* Plus de retrait pour la hiérarchie */
        color: var(--text-grey) !important; /* On force le gris */
        font-size: var(--text-size-3) !important; /* On force la petite taille */
        text-decoration: none;
    }

    /* On s'assure que si le projet est actif (Color), il repasse en noir */
    .Elem_NavListe.Color a {
        color: var(--text-black) !important;
    }
  
    .conteneur_Nav a {
    display: flex;
    align-items: center;
    height: var(--elem-height);
    padding-left: 3px;
    text-decoration: none;
    color: var(--text-white);
    font-size: var(--text-size-2);
    text-transform: uppercase;
    transition: background 0.3s;
}

    /* TESSSSSTTTTT*/
    /* On prépare le conteneur parent pour positionner l'enfant */

.conteneur_Nav {
    position: relative; /* Référentiel pour le menu qui va sortir */
}
.Conteneur_NavListe {
    /* Positionnement à côté */
    position: absolute;
    top: calc(var(--elem-height) * -1);
    left: 100%; /* Se place exactement à droite du header */
    width: 250px; /* Largeur de la colonne des projets */
    
    /* Apparence */
    background-color: var(--bg-black);
    border-left: var(--line-weight) solid var(--line-color);
    height: var(--header-height); /* Optionnel : prend toute la hauteur de l'écran */
    max-height: var(--header-height);
    overflow-y: auto;  /* Active le scroll vertical si nécessaire */
    overflow-x: hidden; /* Empêche le scroll horizontal parasite */
    /* Animation de transition */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);

    transition: all 0.3s ease;
}

/* Affichage lors du Hover (Evidence) */
.conteneur_Nav.Evidence .Conteneur_NavListe {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}




}