/* =================================================== */
/* 1. CONFIGURATION GLOBALE ET VARIABLES DE COULEUR   */
/* =================================================== */

:root {
    /* Ta palette de couleurs */
    --primary: #1D0469;     /* Dominante (bleu/violet foncé) */
    --secondary: #FA5DFF;   /* Secondaire (rose vif) */
    --tertiary: #FF8A3F;    /* Tertiaire (orange) */
    
    /* Couleurs neutres */
    --bg-color: #FAFAFA;    /* Fond "blanc cassé" */
    --text-color: #333333; /* Texte principal (plus doux que le noir pur) */
    --white: #FFFFFF;
    
    /* Variables de style */
    --border-radius: 8px;   /* Bords arrondis */
    --transition-speed: 0.3s; /* Vitesse d'animation fluide */
    --container-width: 1200px;
}

/* Réinitialisation de base pour un style cohérent */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Calcule les bordures et paddings dans la largeur totale */
}

/* Style de base du corps de la page */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

a {
    color: var(--secondary); /* Liens par défaut en rose */
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--tertiary); /* Au survol, on passe à l'orange */
}

ul {
    list-style: none;
}

/* =================================================== */
/* 2. BANDEAU / HEADER                                 */
/* =================================================== */

header {
    display: flex; /* Aligne le logo/nom et la nav horizontalement */
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    align-items: center; /* Centre verticalement */
    padding: 1.5rem 5%; /* Marge intérieure (haut/bas | gauche/droite) */
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky; /* Le header reste en haut quand on défile */
    top: 0;
    z-index: 100;
}

/* Logo et Nom */
header > div {
    display: flex;
    align-items: center;
}

header img {
    height: 50px; /* Taille du logo */
    margin-right: 15px;
}

header p {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

/* =================================================== */
/* 3. NAVIGATION PRINCIPALE                          */
/* =================================================== */

nav > ul {
    display: flex; /* Met les boutons du menu en ligne */
}

nav > ul > li {
    margin-left: 20px; /* Espace entre les boutons */
    position: relative; /* Nécessaire pour le menu déroulant */
}

nav > ul > li > a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Animation au survol des liens du menu */
nav > ul > li > a:hover {
    background-color: var(--secondary);
    color: var(--white);
}

/* --- Menu déroulant "Partenaires" --- */

nav ul li ul {
    /* Caché par défaut */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px); /* Léger décalage pour l'animation */
    
    position: absolute; /* Sort du flux normal */
    top: 100%; /* Se place juste en dessous du parent */
    left: 0;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 250px; /* Largeur minimale */
    padding: 10px 0;
    transition: all var(--transition-speed) ease-in-out;
}

nav ul li ul li a {
    display: block; /* Prend toute la largeur */
    padding: 10px 20px;
    color: var(--primary);
    transition: background-color var(--transition-speed) ease;
}

nav ul li ul li a:hover {
    background-color: var(--bg-color); /* Léger fond au survol */
}

/* L'animation : au survol du <li> parent, on montre le <ul> enfant */
nav > ul > li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu-icon {
    display: none; /* Caché sur ordinateur */
    font-size: 1.5rem; /* Taille de l'icône */
    color: var(--primary);
    cursor: pointer; /* Montre que c'est cliquable */
    padding: 10px;
}

/* =================================================== */
/* 4. CONTENU PRINCIPAL (ACCUEIL)                      */
/* =================================================== */

main {
    max-width: var(--container-width); /* Limite la largeur du contenu */
    margin: 4rem auto; /* Centre le contenu et ajoute de l'espace en haut/bas */
    padding: 0 5%;
}

main h1 {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

main h2 {
    font-size: 2rem;
    color: var(--tertiary); /* Couleur tertiaire pour le h2 */
    margin-bottom: 1.5rem;
}

main p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* =================================================== */
/* 6. PIED DE PAGE / FOOTER                            */
/* =================================================== */

footer {
    background-color: var(--primary); /* Fond sombre */
    color: var(--white);
    padding: 3rem 5%;
    margin-top: 5rem;
    
    /* Sépare les sections "réseaux" et "contact" */
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur mobile */
    gap: 2rem; /* Espace entre les colonnes */
}

footer div {
    min-width: 250px; /* Largeur minimale pour chaque colonne */
}

footer h3 {
    font-size: 1.5rem;
    color: var(--secondary); /* Titres en rose */
    margin-bottom: 1rem;
}

footer p {
    margin-bottom: 0.5rem;
}

footer ul li {
    margin-bottom: 0.5rem;
}

/* Liens du footer */
footer a {
    color: var(--white);
    transition: color var(--transition-speed) ease;
}

/* Au survol, les liens deviennent roses */
footer a:hover {
    color: var(--secondary);
}

/* =================================================== */
/* 7. SECTION RESPONSIVE (LA NOUVELLE PARTIE)          */
/* =================================================== */

/* Ces styles s'appliquent SEULEMENT si la largeur de l'écran 
  est de 768px OU MOINS (tablettes et mobiles).
*/
@media (max-width: 768px) {

    /* --- Réglages du Header --- */
    
    header {
        padding: 1rem 5%; /* Header moins haut */
    }

    header img {
        height: 40px; /* Logo plus petit */
    }

    header p {
        font-size: 1.5rem; /* Nom "Skynium" plus petit */
    }

    /* --- GESTION DU MENU HAMBURGER --- */

    /* 1. On cache le menu de bureau */
    nav > ul#main-nav {
        display: none; 
        
        /* On le prépare à devenir le menu mobile */
        position: absolute;
        top: 100%; /* Se place sous le header */
        left: 0;
        right: 0;
        background-color: var(--white);
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        flex-direction: column; /* Les liens s'empileront verticalement */
        width: 100%;
    }

    /* 2. On affiche le menu mobile quand il a la classe ".open" (gérée par JS) */
    nav > ul#main-nav.open {
        display: flex; 
    }

    /* 3. On ré-initialise les styles des liens pour le mobile */
    nav > ul > li {
        margin-left: 0; /* Plus de marge à gauche */
    }

    nav > ul > li > a {
        display: block; /* Prend toute la largeur */
        padding: 1.25rem; /* Plus facile à cliquer */
        text-align: center;
        border-bottom: 1px solid var(--bg-color);
    }
    
    /* 4. On affiche l'icône hamburger (qui était cachée) */
    #mobile-menu-icon {
        display: block;
    }

    /* 5. On gère le sous-menu pour qu'il s'intègre */
    nav ul li ul {
        visibility: visible;
        opacity: 1;
        position: relative; /* Il n'est plus "flottant" */
        transform: none;
        box-shadow: none;
        background-color: rgba(0,0,0, 0.03); /* Légère couleur de fond */
        padding: 0;
    }
    
    nav ul li ul li a {
        padding-left: 3rem; /* On indente les sous-liens */
        font-size: 0.9rem;
    }
    
    nav > ul > li:hover > ul {
        /* On désactive l'effet de survol sur mobile */
        transform: none;
    }


    /* --- Réglages du Contenu --- */

    main {
        margin-top: 2rem;
    }

    main h1 {
        font-size: 2.2rem; /* Titres plus petits */
    }

    main h2 {
        font-size: 1.5rem;
    }

    /* --- Réglages du Footer --- */
    
    footer {
        /* Le footer était déjà responsive, mais on peut 
           forcer l'alignement à gauche pour plus de propreté */
        justify-content: flex-start;
        text-align: center; /* Centrer le texte dans chaque colonne */
    }
    
    footer div {
        /* Force chaque colonne à prendre 100% de la largeur */
        min-width: 100%; 
    }

}

/* --- BOUTON CONNEXION HEADER (NOUVEAU) --- */

.header-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary) !important; /* Force le fond bleu */
    color: var(--white) !important;
    padding: 8px 20px !important;
    border-radius: 50px !important; /* Pilule */
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: 2px solid transparent !important;
    margin-left: 10px;
}

.header-auth-btn:hover {
    background-color: var(--secondary) !important; /* Rose au survol */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* État connecté ("Bonjour") */
.header-auth-btn.connected {
    background-color: var(--white) !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}

.header-auth-btn.connected:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}