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

:root {

    /* --- Schéma de couleurs : forcer le rendu clair --- */
    color-scheme: only light;


    /* --- Variables d'environnement global --- */
    --bg-color-main: #2e2e2e
;

    /* --- 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;

    /* --- Couleurs maîtres de la marque ADELIO LAB --- */
    --brand-color-primary: #7DDCFF;
    --brand-color-secondary: #FF3CAC;

    /* --- 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: var(--bg-color-main);
    --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: 20px;      /* Hauteur de la disparition progressive du texte vers le haut */

/* --- 7. DESIGN SYSTEM : Styles Typographiques --- */

/* STYLE 1 : Standard (Idéal pour la lecture fluide) */
--s1-title-font: var(--font-family-consulting);
--s1-title-size: 1.5rem;
--s1-title-weight: 700;
--s1-title-color: var(--brand-color-secondary);
--s1-title-align: center;
--s1-title-mt: 60px;
--s1-title-mb: 30px;
--s1-title-lh: 1.2;

--s1-text-font: var(--font-family-consulting);
--s1-text-size: 1rem;
--s1-text-weight: 400;
--s1-text-color: #E6E6E6;
--s1-text-align: justify;
--s1-text-mt: 0px;
--s1-text-mb: 20px;
--s1-text-lh: 1.6;

/* STYLE 2 : Variante (Idéal pour colonnes ou encarts) */
--s2-title-font: var(--font-family-consulting);
--s2-title-size: 1.8rem;
--s2-title-weight: 700;
--s2-title-color: var(--brand-color-primary);
--s2-title-align: left;
--s2-title-mt: 30px;
--s2-title-mb: 10px;
--s2-title-lh: 1.3;

--s2-text-font: var(--font-family-consulting);
--s2-text-size: 1rem;
--s2-text-weight: 400;
--s2-text-color: #E6E6E6;
--s2-text-align: left;
--s2-text-mt: 0px;
--s2-text-mb: 15px;
--s2-text-lh: 1.6;

/* MAIN TITLE : Titre de Page (Héro) */
--mt-font: var(--font-family-athreo);
--mt-size: 2.2rem;
--mt-weight: 700;
--mt-color: var(--brand-color-primary);
--mt-align: center;
--mt-mt: 20px;
--mt-mb: 70px;
--mt-lh: 1.1;


    /* --- 8. PILOTAGE DE LA LARGEUR DE LECTURE (Paragraphes et Listes) --- */
    --text-max-width: 700px; /* [PILOTAGE] Largeur maximale en pixels pour le confort de l'œil */

    --mobile-side-margin: 20px; /* [PILOTAGE] Marge latérale minimale sur mobile */


    /* --- LIGNES SUIVANTES --- */





}

/* ==========================================================
   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 EXTERNALISÉE (Gérée par css/navbar.css)
   ========================================================== */
/* Les règles de la navbar ont été isolées dans le composant modulaire autonome. */




/* ==========================================================
   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%
    );
}





/* --- BLOC À REMPLACER --- */
.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-top: -30px;              /* Remonte le logo et tout le contenu de 20px */
    margin-bottom: 20px;
}



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





.brand-title {
    font-weight: bold;
}

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

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






/* ==========================================================
   DESIGN SYSTEM : CHASSIS DE MISE EN PAGE (LAYOUTS)
   ========================================================== */

/* Conteneur Standard (100% de largeur, fluide) */
.layout-standard {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

/* Conteneur Pleine Largeur (marges de sécurité latérales) */
.layout-full {
    width: 100%;
    padding: 0 20px;
}


/* Conteneur multi-colonnes */
.layout-cols {
    display: flex;
    gap: 40px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}



@media (max-width: 800px) {
    .layout-cols {
        flex-direction: column;
    }
}

/* ==========================================================
   DESIGN SYSTEM : TYPOGRAPHIE ET THEMES
   ========================================================== */

/* --- Style 1 --- */
.theme-style-1 h2 {
    font-family: var(--s1-title-font);
    font-size: var(--s1-title-size);
    font-weight: var(--s1-title-weight);
    color: var(--s1-title-color);
    text-align: var(--s1-title-align);
    margin-top: var(--s1-title-mt);
    margin-bottom: var(--s1-title-mb);
    line-height: var(--s1-title-lh);
}


.theme-style-1 p, .theme-style-1 ul, .theme-style-1 ol {
    font-family: var(--s1-text-font);
    font-size: var(--s1-text-size);
    font-weight: var(--s1-text-weight);
    color: var(--s1-text-color);
    text-align: var(--s1-text-align);
    margin-top: var(--s1-text-mt);
    margin-bottom: var(--s1-text-mb);
    line-height: var(--s1-text-lh);
    width: min(var(--text-max-width), calc(0.72 * 100vw + 80px), calc(100% - ((var(--mobile-side-margin) - 20px) * 2)));
    margin-left: auto;
    margin-right: auto;
}



.theme-style-1 ul {
    text-align: left; /* Sécurise l'alignement des listes à puces */
    padding-left: 20px;
}

/* --- Style 2 --- */
.theme-style-2 h2 {
    font-family: var(--s2-title-font);
    font-size: var(--s2-title-size);
    font-weight: var(--s2-title-weight);
    color: var(--s2-title-color);
    text-align: var(--s2-title-align);
    margin-top: var(--s2-title-mt);
    margin-bottom: var(--s2-title-mb);
    line-height: var(--s2-title-lh);
}



.theme-style-2 p, .theme-style-2 ul, .theme-style-2 ol {
    font-family: var(--s2-text-font);
    font-size: var(--s2-text-size);
    font-weight: var(--s2-text-weight);
    color: var(--s2-text-color);
    text-align: var(--s2-text-align);
    margin-top: var(--s2-text-mt);
    margin-bottom: var(--s2-text-mb);
    line-height: var(--s2-text-lh);
    width: min(var(--text-max-width), calc(0.72 * 100vw + 80px), calc(100% - ((var(--mobile-side-margin) - 20px) * 2)));
    margin-left: auto;
    margin-right: auto;
}



/* --- Main Title --- */
.theme-main-title {
    font-family: var(--mt-font);
    font-size: var(--mt-size);
    font-weight: var(--mt-weight);
    color: var(--mt-color);
    text-align: var(--mt-align);
    margin-top: var(--mt-mt);
    margin-bottom: var(--mt-mb);
    line-height: var(--mt-lh);
}

/* --- Exception Typographique --- */
.titre-rapproche {
    margin-top: 0px !important;
}

/* --- FIN DU FICHIER --- */