/* ==========================================================
   PANNEAU DE CONFIGURATION MANUELLE (Ajuste tes valeurs ici)
   ========================================================== */


:root {
    /* --- Variables d'environnement global --- */
    --bg-color-main: #f2eee1;

    /* --- Variables du logo central --- */
    --logo-width: 320px;   
    --logo-height: 290px;  

    /* --- Variables Typographiques (Marque) --- */
    --font-family-athreo: "Playfair Display", serif;      
    --font-size-athreo: 4rem;       
    --font-family-consulting: "Arial", sans-serif; 
    --font-size-consulting: 2rem;       

    /* --- 1. Barre de Navigation : Comportement & Géométrie PC --- */
    --nav-behavior: sticky;       /* Remplacer par 'relative' pour que la barre défile avec la page */
    --nav-height: 80px;
    --nav-logo-width: 44px;
    --nav-logo-height: 40px;
    --nav-links-offset-top: 10px; /* Descend les liens centraux */
    --nav-lang-offset-top: 10px;  /* Descend le sélecteur FR|EN */

/* --- Nouveaux réglages de marges et espacements de la barre --- */
    --nav-side-padding: 30px;     /* Marge sur les bords extérieurs (gauche et droite de l'écran) */
    --nav-brand-gap: 15px;        /* Espace entre le petit logo et le nom "Athreo Consulting" */


    /* --- 2. Couleurs et Transparences (PC & Mobile) --- */
    /* Version Écran Large (PC) */
    --nav-bg-color-pc: #f2eee1;   /* Couleur de fond de la barre */
    --nav-bg-opacity-pc: 0.5;       /* 1 = Opaque, 0 = Transparent, 0.5 = Semi-transparent */
    
    /* Version Mobile (Écran < 800px) */
    --nav-bg-color-mobile-1: #f2eee1; /* Couleur Ligne 1 (Logo + Langue) */
    --nav-bg-opacity-mobile-1: 1;
    --nav-bg-color-mobile-2: #f2eee1; /* Couleur Ligne 2 (Menu défilant) */
    --nav-bg-opacity-mobile-2: 1;

    /* Couleur globale des textes du menu */
    --nav-text-color: #000000;
    --nav-font-size: 0.9rem;

    /* --- 3. Ligne de séparation sous les menus --- */
    --nav-line-thickness: 2px;    /* Mettre à 1px ou 2px pour l'afficher, 0px pour masquer */
    --nav-line-color: #0e0e0d;    /* Couleur de la ligne */

    /* --- 4. Zones d'effacement sous la barre (Transition & Masque) --- */
    /* Bande 1 : Espacement ou Bande colorée tampon */
    --nav-buffer-height: 5px;     /* Environ 0.5cm */
    --nav-buffer-color: #f2eee1;
    --nav-buffer-opacity: 1;      /* Mettre à 0 si vous voulez juste un espace vide */
    
    /* Bande 2 : Zone de fondu (Masque progressif pour l'image de fond) */
    --nav-fade-height: 10px;      /* Hauteur de la disparition progressive du texte vers le haut */

    /* --- 5. États des Liens (Actif / Inactif / Survol) --- */
    --nav-link-inactive-opacity: 0.4;
    --nav-link-active-opacity: 1;
    --nav-link-inactive-weight: 700; 
    --nav-link-active-weight: 700;   /* Plafond technique pour la police Arial */
    --nav-link-hover-opacity: 0.8;

    /* --- 6. Configuration Mobile (Responsive) --- */
    --nav-mobile-breakpoint: 800px;
    --nav-mobile-scroll-gap: 20px;
}

/* ==========================================================
   RÉINITIALISATION DE BASE
   ========================================================== */








* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* ==========================================================
   STRUCTURE GLOBALE (Correctif Flexbox appliqué)
   ========================================================== */
body {
    background-color: var(--bg-color-main);
    min-height: 100vh;
    height: 100vh;
    overflow: hidden; /* Verrouille la fenêtre pour figer le masque de fondu */
    display: flex;
    flex-direction: column;
    align-items: center;
}



/* ==========================================================
   BARRE DE NAVIGATION (Architecture Modulaire)
   ========================================================== */







.top-header {
    width: 100%;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    
    /* Application des marges latérales de confort pour ne plus coller les bords */
    padding-left: var(--nav-side-padding);
    padding-right: var(--nav-side-padding);
    
    /* 1. Ancrage Fixe Garanti au sommet de l'écran */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    
    /* 2. Couleurs & Transparence */
    background-color: color-mix(in srgb, var(--nav-bg-color-pc) calc(var(--nav-bg-opacity-pc) * 100%), transparent);
    
    /* 3. Ligne de séparation sous la barre */
    border-bottom: var(--nav-line-thickness) solid var(--nav-line-color);
    box-sizing: border-box;
}

/* Bande 1 : Zone tampon accrochée sous la ligne de séparation */
.top-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--nav-buffer-height);
    background-color: color-mix(in srgb, var(--nav-buffer-color) calc(var(--nav-buffer-opacity) * 100%), transparent);
    pointer-events: none;
}

.main-navbar {
    display: flex;
    justify-content: space-between; /* Pousse les blocs aux extrémités */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Allocation spatiale : flex: 1 sur les côtés permet au centre d'être parfaitement centré */
.nav-brand, .nav-lang {
    flex: 1;
}

/* --- Bloc Gauche : Identité --- */
.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--nav-brand-gap); /* Utilise la nouvelle variable d'espacement logo/texte */
    text-decoration: none; /* Neutralise le soulignement automatique du lien */
}











.nav-mini-logo {
    /* Dimensions verrouillées et sécurisées via les variables */
    width: var(--nav-logo-width);
    height: var(--nav-logo-height);
    flex-shrink: 0; /* Empêche formellement le navigateur d'écraser l'image sur petit écran */
}

.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);
}

/* ⚠️ RÈGLE CONDITIONNELLE (Option 1) : Masque le bloc gauche si on est sur l'accueil */
.page-accueil .nav-brand {
    visibility: hidden;
}

/* --- Bloc Central : Liens --- */
.nav-links {
    flex: 2; /* Prend plus de place pour s'étendre au centre */
    display: flex;
    justify-content: center;
    list-style: none; /* Enlève les puces de liste */
    gap: 50px; /* Espace entre chaque lien */
    /* Application de l'ajustement vertical (offset) */
    margin-top: var(--nav-links-offset-top);
}

.nav-links a {
    text-decoration: none;
    color: var(--nav-text-color);
    font-family: var(--font-family-consulting);
    font-size: var(--nav-font-size);
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    
    /* Application des états inactifs par défaut via le Bloc Master */
    font-weight: var(--nav-link-inactive-weight);
    opacity: var(--nav-link-inactive-opacity);
}

/* Classe dynamique pour la page active (à ajouter dans votre HTML) */
.nav-links a.nav-link-active {
    font-weight: var(--nav-link-active-weight);
    opacity: var(--nav-link-active-opacity);
}

.nav-links a:hover {
    /* Application de l'opacité au survol */
    opacity: var(--nav-link-hover-opacity);
}

/* --- Bloc Droit : Langues --- */
.nav-lang {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: var(--font-family-consulting);
    font-size: var(--nav-font-size);
    font-weight: bold;
    /* Application de l'ajustement vertical (offset) */
    margin-top: var(--nav-lang-offset-top);
}

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

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

.lang-link {
    text-decoration: none;
    color: #a0a0a0; /* Langue inactive grisée */
    transition: color 0.3s ease;
}

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







/* ==========================================================
   CONTENU PRINCIPAL (Hero Container)
   ========================================================== */


   .hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100vh;
    overflow-y: auto; /* Zone de défilement interne fluide */
    -webkit-overflow-scrolling: touch;
    
    /* Marge supérieure calculée pour placer le logo SOUS la zone de fondu au chargement */
    padding-top: calc(var(--nav-height) + var(--nav-buffer-height) + var(--nav-fade-height) + 30px);
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
    
    /* Bande 2 : Masque de transparence FIXE par rapport à l'écran */
    -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0px, 
        transparent calc(var(--nav-height) + var(--nav-buffer-height)), 
        black calc(var(--nav-height) + var(--nav-buffer-height) + var(--nav-fade-height)), 
        black 100%
    );
    mask-image: linear-gradient(to bottom, 
        transparent 0px, 
        transparent calc(var(--nav-height) + var(--nav-buffer-height)), 
        black calc(var(--nav-height) + var(--nav-buffer-height) + var(--nav-fade-height)), 
        black 100%
    );
}





.media-wrapper {
    width: var(--logo-width);
    height: var(--logo-height);
    min-width: var(--logo-width);   /* Empêche formellement la compression horizontale */
    min-height: var(--logo-height); /* Empêche formellement la compression verticale */
    flex-shrink: 0;                 /* Interdit au conteneur de réduire la taille du logo */
    margin-bottom: 25px;
}



.main-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-title {
    font-weight: bold;
    color: #000000;
}

.brand-title .word-athreo {
    font-family: var(--font-family-athreo);
    font-size: var(--font-size-athreo);
}

.brand-title .word-consulting {
    font-family: var(--font-family-consulting);
    font-size: var(--font-size-consulting);
    font-weight: normal;
}

.brand-description {
    width: 80%;
    max-width: 1300px;
    margin: 5rem auto 0 auto;
    text-align: justify;
    font-family: var(--font-family-consulting); 
    font-size: 1rem;          
    line-height: 1.6;          
    color: #333333;            
}


/* ==========================================================
   COMPOSANT LOGO ANIMÉ (MASQUAGE CSS DYNAMIQUE)
   ========================================================== */
.logo-anime {
    display: inline-block;
    position: relative;
    overflow: hidden;
    
    /* Définition du pochoir à partir de l'image existante avec encodage de l'espace (%20) */
    -webkit-mask-image: url('../images/LOGO%20AthreoConsulting.png');
    mask-image: url('../images/LOGO%20AthreoConsulting.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.logo-anime::before {
    content: '';
    position: absolute;
    /* Marges négatives proportionnelles pour le repli des angles en rotation */
    top: -17%;
    left: -25%;
    width: 150%;
    height: 150%;
    
    /* Chargement du dégradé rotatif */
    background: url('../images/degrade-anime.png') center/cover no-repeat;
    
    /* Moteur cinétique (Accélération matérielle GPU forcée) */
    animation: spin-logo 3s linear infinite;
    transform-origin: center center;
    will-change: transform;
}

@keyframes spin-logo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}