/* ==========================================================
   POLICE WEB DU MENU DE NAVIGATION
   ========================================================== */
@font-face {
    font-family: "Athreo Arial Narrow";
    src: url("/fonts/arial-narrow-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}









/* ==========================================================
   PANNEAU DE CONFIGURATION MANUELLE (BLOCKMASTER NAVBAR)
   ========================================================== */
:root {
    /* --- Hauteurs et Géométrie de la Barre --- */
    --nav-height-pc: 80px;        /* [PILOTAGE] Hauteur de la Ligne 1 (Logo + Langue) */
    --nav-height-line2: 50px;     /* [PILOTAGE] Hauteur de la Ligne 2 (Liens sur mobile) */
    --nav-height: var(--nav-height-pc); /* Variable maîtresse de hauteur */


--nav-brand-safe-zone: 40px; /* [PILOTAGE] Zone invisible de sécurité entre le titre et les liens PC/tablette */



/* --- Dimensions du Logo et Marges --- */
    --nav-logo-width: 44px;       /* [PILOTAGE] Largeur du mini-logo dans la navbar */
    --nav-logo-height: 40px;      /* [PILOTAGE] Hauteur du mini-logo dans la navbar */
    --nav-brand-gap: 15px;        /* [PILOTAGE] Espace entre le logo et le titre "Athreo Consulting" */
    --nav-side-padding: 20px;     /* [PILOTAGE] Marges sur les bords extérieurs gauche et droite */

    /* --- NOUVEAU : Ancrages Absolus (Point Zéro) --- */
    --brand-anchor-top: 20px;      /* [PILOTAGE] Marge haute du Logo + Titre */
    --brand-anchor-left: 0px;      /* [PILOTAGE] Marge gauche du Logo + Titre (depuis le padding du châssis) */
    
    --lang-anchor-top: 37px; /* [ ! ! ! ATTENTION HORS DU CADRE ! !  ] Marge haute du sélecteur FR|EN */
    
    
    
    
    
    
    --lang-anchor-right: 0px;      /* [PILOTAGE] Marge droite du sélecteur FR|EN */
    
    --links-anchor-top-pc: 37px;   /* [PILOTAGE] Marge haute des liens depuis le plafond de la case 1 (PC/Tablette) */
    --links-anchor-top-mobile: 17px; /* [PILOTAGE] Marge haute des liens dans la 2ème case (Mobile) */

    --nav-brand-name-offset-top-pc: 4px; /* [PILOTAGE] Ajustement vertical du titre à côté du logo (PC) */
    --nav-brand-name-offset-top-mobile: -6px; /* [PILOTAGE] Ajustement vertical du titre quand empilé (< 1100px) */


/* --- Design et Couleurs de la Navbar --- */
    --nav-bg-color-pc: #f2eee1;   /* [PILOTAGE] Couleur de fond de la barre sur PC */
    --nav-bg-opacity-pc: 0.5;     /* [PILOTAGE] Transparence de la barre (1 = Opaque, 0.5 = Semi-transparent) */
    --nav-text-color: #000000;    /* [PILOTAGE] Couleur principale des textes et liens */
    --nav-font-size: 0.9rem;      /* [PILOTAGE] Taille de police du sélecteur de langue */
    
    /* --- NOUVEAU : Pilotage Ligne 1 (Permanente sous Case 1) --- */
    --nav-line1-thickness: 2px;
    --nav-line1-color: #0e0e0d;
    --nav-line1-opacity: 1;       /* 1 = Opaque, 0.5 = Semi-transparent, 0 = Invisible */
    --nav-line1-margin-side: 30px; /* 30px = Style Éditorial, 0px = Bord à bord (Full Bleed) */

    /* --- NOUVEAU : Pilotage Ligne 2 (Conditionnelle sous Case 2) --- */
    --nav-line2-thickness: 2px;
    --nav-line2-color: #0e0e0d;
    --nav-line2-opacity: 1;
    --nav-line2-margin-side: 30px;



    /* --- Espacements Mobile --- */
    --nav-links-offset-left-mobile: 10px; /* [PILOTAGE] Marge gauche du premier lien sur mobile */
    --nav-links-gap-mobile: 25px;         /* [PILOTAGE] Écartement entre chaque lien sur mobile */
}

/* ==========================================================
   MOTEUR PHYSIQUE DE LA NAVBAR (Encapsulation Globale)
   ========================================================== */
.top-header {
    width: 100%;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    padding-left: var(--nav-side-padding);
    padding-right: var(--nav-side-padding);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: color-mix(in srgb, var(--nav-bg-color-pc) calc(var(--nav-bg-opacity-pc) * 100%), transparent);


    box-sizing: border-box;
}


/* ==========================================================
   LIGNES DE SÉPARATION VIRTUELLES (Calques Indépendants)
   ========================================================== */
/* Ligne 1 : Permanente, pilotée mathématiquement depuis le plafond */
.top-header::before {
    content: "";
    position: absolute;
    top: var(--nav-height-pc); /* Se place toujours à 80px */
    left: var(--nav-line1-margin-side);
    right: var(--nav-line1-margin-side);
    height: var(--nav-line1-thickness);
    background-color: color-mix(in srgb, var(--nav-line1-color) calc(var(--nav-line1-opacity) * 100%), transparent);
    z-index: 10;
}
/* Ligne 2 : Conditionnelle, pilotée par la somme des hauteurs */
.top-header::after {
    content: "";
    position: absolute;


bottom: 0; /* Ancrage absolu au plancher interne de la boîte (Option A) */
    left: var(--nav-line2-margin-side);
    right: var(--nav-line2-margin-side);
    height: var(--nav-line2-thickness);
    background-color: color-mix(in srgb, var(--nav-line2-color) calc(var(--nav-line2-opacity) * 100%), transparent);
    z-index: 10;






    display: none; /* Invisible par défaut sur PC */
}





/* Conteneur principal de distribution */
.main-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* ==========================================================
   MODE PC & GRANDE LARGEUR : Grille 3 Colonnes Unifiée
   ========================================================== */
@media (min-width: 850.00001px) {
    .main-navbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start; /* Ancrage au plafond de la case */
        width: 100%;
        height: 100%;
    }

    .nav-top-line {
        display: contents;
    }

    .nav-bottom-line {
        display: contents;
    }







/* Bloc Gauche : Logo + Titre (Film étirable et alignement vertical) */
    .nav-brand {
        grid-column: 1;
        justify-self: start;
        display: flex;
        align-items: flex-start; /* MODIFIÉ : Ancrage absolu au plafond. Le logo ne subit plus la hauteur du texte */
        gap: var(--nav-brand-gap);
        text-decoration: none;
        width: fit-content;
        margin-top: var(--brand-anchor-top); /* MODIFIÉ */
        margin-left: var(--brand-anchor-left); /* AJOUTÉ */
    }

    /* Bloc Central : Liens de navigation */
    .nav-links {
        grid-column: 2;
        grid-row: 1; /* AJOUTÉ : Force la présence stricte dans la Case 1, indépendant du titre */
        justify-self: center;
        align-self: start; /* AJOUTÉ : Point zéro verrouillé au plafond de la case 1 */
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        gap: 30px;
        margin-top: var(--links-anchor-top-pc); /* Pilotage unique de la hauteur */
    }





    /* Compression typographique des liens uniquement dans la grille principale */
.main-navbar .nav-links a {
    font-family: "Athreo Arial Narrow", Arial, sans-serif;
    letter-spacing: 2px;
}







    /* Bloc Droit : Sélecteur de langue */
    .nav-lang {
        grid-column: 3;
        justify-self: end;
        display: flex;
        align-items: center;
        font-family: "Athreo Arial Narrow", Arial, sans-serif;
        font-size: var(--nav-font-size);
        font-weight: bold;
        margin-top: var(--lang-anchor-top); /* MODIFIÉ */
        margin-right: var(--lang-anchor-right); /* AJOUTÉ */
    }
}







/* ==========================================================
   CONTRÔLE PRIORITAIRE DU TITRE : EMPILEMENT TABLETTE
   ========================================================== */
/* [PILOTAGE DE SEUIL] Modifiez '1100px' ci-dessous pour changer 
   le moment exact où les deux mots s'empilent, indépendamment du navigateur. */
@media (max-width: 1100px) {
    .nav-brand-name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: fit-content; /* Rétractation automatique anti-boîte fantôme */
        transform: translateY(var(--nav-brand-name-offset-top-mobile)); /* AJOUTÉ : Pilotage manuel du texte empilé */
    }
}

@media (min-width: 1101px) {



    .nav-brand-name {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    width: fit-content;
    transform: translateY(var(--nav-brand-name-offset-top-pc));
}





}

/* ==========================================================
   MODE MOBILE / ÉCRAN ÉTROIT (< 850px) : Double Bande
   ========================================================== */
@media (max-width: 850px) {
    :root {
        --nav-height: calc(var(--nav-height-pc) + var(--nav-height-line2));
    }

/* AJOUT : Rendre la Ligne 2 visible */
    .top-header::after {
        display: block; 
    }

    .main-navbar {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        min-width: 0;
    }

    /* Ligne 1 : Toujours sous la première case sur mobile */
    .nav-top-line {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        height: var(--nav-height-pc);
        flex-shrink: 0;
        margin-top: 0;
    }

    /* Ligne 2 : Uniquement sous la deuxième case sur mobile */
    .nav-bottom-line {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: var(--nav-height-line2);
        min-width: 0;
        flex-shrink: 0;
    }













.nav-brand {
        display: flex;
        align-items: flex-start; /* MODIFIÉ : Ancrage absolu au plafond pour le mobile également */
        gap: var(--nav-brand-gap);
        text-decoration: none;


        width: fit-content;
        margin-top: var(--brand-anchor-top); /* AJOUTÉ */
        margin-left: var(--brand-anchor-left); /* AJOUTÉ */
    }

    /* Sur mobile, on force l'empilement du titre pour s'adapter à l'espace étroit */
    .nav-brand-name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
    }

    .nav-brand-safe-zone {
        display: none;
    }

    .nav-links {
        width: 100%;
        height: 100%;
        margin-top: var(--links-anchor-top-mobile); /* MODIFIÉ */
        display: flex;
        justify-content: flex-start;
        align-items: flex-start; /* MODIFIÉ : Ancrage au plafond du rail de scroll */
        gap: var(--nav-links-gap-mobile);
        padding-left: var(--nav-links-offset-left-mobile);
        padding-right: var(--nav-links-offset-left-mobile);
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-lang {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-family: "Athreo Arial Narrow", Arial, sans-serif;
        font-size: var(--nav-font-size);
        font-weight: bold;
        margin-top: var(--lang-anchor-top); /* MODIFIÉ */
        margin-right: var(--lang-anchor-right); /* AJOUTÉ */
    }
}















/* ==========================================================
   STYLES INTERNES DU COMPOSANT (Typographies & États)
   ========================================================== */
.nav-mini-logo {
    width: var(--nav-logo-width);
    height: var(--nav-logo-height);
    flex-shrink: 0;
}

.nav-brand-name .word-athreo {
    font-family: var(--font-family-athreo);
    font-size: 1.5rem;
    color: var(--nav-text-color);
}

.nav-brand-name .word-consulting {
    font-family: var(--font-family-consulting);
    font-size: 1rem;
    font-weight: normal;
    color: var(--nav-text-color);
}


.nav-brand-safe-zone {
    width: var(--nav-brand-safe-zone);
    flex-shrink: 0;
}






.page-accueil .nav-brand {
    visibility: hidden;
}



.nav-links a {
    text-decoration: none;
    color: var(--nav-text-color);
    font-family: var(--font-family-consulting);
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    font-weight: 700;
    opacity: 0.4;
}



.nav-links a.nav-link-active {
    opacity: 1;
}

.nav-links a:hover {
    opacity: 0.8;
}




.lang-link.lang-active {
    color: var(--nav-text-color);
}



.lang-separator {
    margin: 0 3px;
    color: #a0a0a0;
    font-weight: normal;
}

.lang-link {
    text-decoration: none;
    color: #a0a0a0;

letter-spacing: 2px;

    transition: color 0.3s ease;
}

.lang-link:hover {
    color: var(--nav-text-color);
}