/*
 Theme Name: portail-urbanisme
 Template: astra
 Text Domain: portail-urbanisme
*/

/* =========================================
   1. BASE (Commun à tous)
   ========================================= */
.main-navigation {
    position: relative;
    width: 100%;
    background: #fff; /* Couleur de fond de votre barre */
}

/* Reset de la liste */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative; /* Important pour le positionnement des sous-menus */
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 15px 20px;
    transition: 0.3s;
}

/* =========================================
   2. DESKTOP (Écrans > 768px)
   ========================================= */
@media screen and (min-width: 769px) {
    
    /* Le bouton burger est caché sur ordinateur */
    .burger-toggle {
        display: none;
    }

    /* Affichage des parents sur une ligne */
    .nav-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* --- GESTION DES SOUS-MENUS DESKTOP --- */
    
    /* 1. On cache les sous-menus par défaut */
    .nav-menu .sub-menu {
        display: none; /* Caché */
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        min-width: 220px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        flex-direction: column;
    }

    /* 2. Classe .is-open (ajoutée par JS au clic) pour afficher le sous-menu */
    .nav-menu li.is-open > .sub-menu {
        display: flex; /* Devient visible */
    }

    /* 3. La petite flèche pour les parents */
    .menu-item-has-children > a::after {
        content: "▼"; /* Vous pouvez remplacer par une icône FontAwesome */
        font-size: 10px;
        margin-left: 8px;
        display: inline-block;
        transition: transform 0.3s;
    }

    /* Rotation de la flèche quand ouvert */
    .menu-item-has-children.is-open > a::after {
        transform: rotate(180deg);
    }

   
    /* 1. Style du lien transformé en bouton */
    .nav-menu li.menu-cta a {
        background-color: #27ae60;  /* Le même Vert */
        color: #ffffff !important;  /* Texte Blanc forcé */
        padding: 10px 20px;         /* Espace interne (Hauteur / Largeur) */
        border-radius: 5px;         /* Coins arrondis */
        font-weight: 600;
        font-size: 15px;
        transition: all 0.3s ease;  /* Animation fluide */
        
        /* Positionnement */
        margin-left: 15px;          /* Espace pour le décoller de "Contact" */
        display: inline-block;
        line-height: 1;             /* Évite les décalages de hauteur */
    }

    /* 2. Effet au survol de la souris */
    .nav-menu li.menu-cta a:hover {
        background-color: #219150;  /* Vert plus foncé */
        transform: translateY(-3px); /* Le bouton remonte légèrement */
        box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4); /* Ombre portée verte */
    }

    /* 3. Supprimer la petite flèche (chevron) si jamais elle apparait */
    /* (Utile seulement si vous aviez mis des sous-menus à ce bouton) */
    .nav-menu li.menu-cta > a::after {
        display: none !important;
    }
}

/* =========================================
   3. MOBILE (Écrans < 768px)
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. LE CONTENEUR (Volet blanc à droite) */
    ul.nav-menu {
        /* Positionnement */
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;       /* Collé à droite */
        left: auto !important;     /* On ne le colle pas à gauche */
        
        /* Dimensions */
        width: 50% !important;      /* Prend la moitié de l'écran */
        min-width: 250px !important; /* Sécurité pour les petits écrans */
        
        /* Style Visuel */
        background-color: #ffffff !important;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1) !important; /* Ombre portée vers la gauche */
        z-index: 998 !important;
        
        /* Comportement */
        display: none;             /* Caché par défaut */
        flex-direction: column !important;
        box-sizing: border-box !important;
        overflow-y: auto !important; 
        
        /* ESPACEMENT HAUT RÉDUIT */
        padding-top: 20px !important; /* Ajustez ici si vous voulez encore moins (ex: 60px) */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* 2. L'OUVERTURE */
    .main-navigation.mobile-menu-open ul.nav-menu {
        display: flex !important;
    }

    /* 3. LES ÉLÉMENTS DE LISTE (PARENTS) */
    ul.nav-menu > li {
        width: 100% !important;
        display: block !important;
        
        /* MODIFICATION : La ligne est maintenant AVANT (au-dessus) */
        border-bottom: none !important;      /* On retire l'ancienne */
        border-top: 1px solid #f0f0f0 !important; /* On ajoute la nouvelle */
    }

    /* 3. bis : EXCEPTION POUR LE PREMIER */
    /* On enlève la ligne du tout premier lien pour ne pas couper le haut du menu */
    ul.nav-menu > li:first-child {
        border-top: none !important;
    }

    ul.nav-menu > li > a {
        display: block !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        color: #333 !important;
    }
    /* =========================================
       GESTION DES BORDURES (NETTOYAGE FINAL)
       ========================================= */

    /* 1. ON SUPPRIME TOUTES LES BORDURES DU DESSOUS PARTOUT */
    /* On cible les li ET les liens a, parents ET enfants */
    ul.nav-menu li, 
    ul.nav-menu li a,
    ul.nav-menu .sub-menu,
    ul.nav-menu .sub-menu li,
    ul.nav-menu .sub-menu a {
        border-bottom: none !important;
        border-right: none !important;
        border-left: none !important;
        box-shadow: none !important; /* Parfois l'ombre ressemble à une ligne */
    }

    /* 2. ON APPLIQUE UNIQUEMENT LA LIGNE DU DESSUS (PARENTS SEULEMENT) */
    ul.nav-menu > li {
        border-top: 1px solid #f0f0f0 !important;
    }

    /* 3. EXCEPTION : Pas de ligne au-dessus du tout premier parent */
    ul.nav-menu > li:first-child {
        border-top: none !important;
    }

    /* 4. EXCEPTION : Pas de ligne au-dessus des enfants */
    ul.nav-menu .sub-menu li {
        border-top: none !important;
    }
/* =========================================
       ESPACEMENT DES ENFANTS
       ========================================= */
    
    /* On cible chaque élément de liste dans un sous-menu */
    ul.nav-menu .sub-menu li {
        /* Ajoute de l'espace SOUS chaque enfant */
        margin-bottom: 10px !important; 
        
        /* Optionnel : si vous voulez aussi que le lien soit plus "grand" */
        /* padding-bottom: 5px !important; */
    }

    /* Optionnel : Ajouter un peu plus d'espace après le DERNIER enfant 
       avant que le prochain "Parent" ne commence */
    ul.nav-menu .sub-menu li:last-child {
        margin-bottom: 20px !important; 
    }


/* =========================================
       STYLE DU LIEN ACTIF (CURRENT PAGE)
       ========================================= */

    /* On cible le lien (a) qui est à l'intérieur de l'élément actif (li) */
    ul.nav-menu li.current-menu-item > a {
        /* 1. Fond bleu très pâle (le fameux bleu Google) */
        background-color: #e8f0fe !important; 
        
        /* 2. Texte en bleu plus soutenu pour le contraste */
        color: #3c4043 !important; 
        
        /* 3. Texte un peu plus gras */
        font-weight: 600 !important;
        
        /* 4. Esthétique : Bordure arrondie sur la droite uniquement */
        /* Cela donne un effet d'onglet très moderne */
        border-radius: 50px 0 0 50px !important;
        
        /* Petit ajustement si le texte touche le bord arrondi */
        margin-right: 10px !important;
    }

    /* Optionnel : Si vous voulez aussi marquer le Parent quand on est sur un Enfant */
    ul.nav-menu li.current-menu-ancestor > a {
        color: #3c4043 !important; /* Juste le texte en bleu, sans le fond */
        font-weight: 600 !important;
    }

/* =========================================
       ICÔNES PERSONNALISÉES (Simulateurs, Services...)
       ========================================= */

    /* 1. CONFIGURATION DE BASE (Pour tous les liens avec icône) */
    ul.nav-menu li > a::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        display: inline-block;
        width: 25px;            /* Largeur fixe pour alignement vertical */
        margin-right: 10px;
        text-align: center;
        color: #bbbbbb;         /* Couleur par défaut de l'icône (Gris) */
        transition: color 0.3s;
    }

    /* 2. ATTRIBUTION DES ICÔNES PAR CLASSE */
    
    /* Simulateurs -> Calculatrice */
    ul.nav-menu li.icon-simu > a::before {
        content: "\f1ec"; 
    }

    /* Services -> Mallette (ou \f0s0 pour clé à molette) */
    ul.nav-menu li.icon-serv > a::before {
        content: "\f0b1"; 
    }

    /* Ressources -> Livre ouvert */
    ul.nav-menu li.icon-ress > a::before {
        content: "\f02d"; 
    }

    /* Contact -> Enveloppe */
    ul.nav-menu li.icon-contact > a::before {
        content: "\f0e0"; 
    }

    /* Mon Compte -> Bonhomme utilisateur */
    ul.nav-menu li.icon-account > a::before {
        content: "\f007"; 
    }

    /* 3. COULEUR ACTIVE (Quand on est sur la page) */
    ul.nav-menu li.current-menu-item > a::before {
        color: #1967d2 !important; /* L'icône devient bleue comme le texte */
    }


    /* =========================================
       BOUTON CTA (Faire ma déclaration)
       ========================================= */

    /* 1. Le Conteneur du bouton (li) */
    ul.nav-menu li.menu-cta {
        border-top: none !important;    /* On retire la ligne grise du dessus */
        margin-top: 15px !important;    /* Un peu d'espace avant */
        margin-bottom: 15px !important; /* Un peu d'espace après */
        width: 100% !important;
        text-align: center;             /* On centre le bouton */
    }

    /* 2. Le style du Bouton (a) */
    ul.nav-menu li.menu-cta > a {
        background-color: #27ae60 !important; /* VERT (Ajustez le code couleur ici) */
        color: #ffffff !important;            /* Texte BLANC */
        font-weight: 700 !important;          /* Texte en GRAS */
        text-transform: uppercase;            /* (Optionnel) Tout en majuscules */
        font-size: 14px !important;           /* Texte un peu plus petit */
        
        display: inline-block !important;     /* Important pour la largeur */
        width: 80% !important;                /* Le bouton prend 80% de la largeur du menu */
        padding: 12px 0 !important;           /* Hauteur du bouton */
        border-radius: 5px !important;        /* Coins arrondis */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Petite ombre pour le relief */
        
        /* On annule les styles par défaut des autres liens */
        margin: 0 auto !important;            /* Centrage horizontal */
    }

    /* 3. On supprime l'icône "FontAwesome" pour ce bouton spécifique */
    /* Sinon vous auriez un chevron ou une icône grise dans le bouton vert */
    ul.nav-menu li.menu-cta > a::before {
        display: none !important;
    }

    /* 4. Effet au survol (Optionnel sur mobile, mais sympa) */
    ul.nav-menu li.menu-cta > a:active {
        background-color: #219150 !important; /* Vert un peu plus foncé au clic */
        transform: translateY(2px); /* Effet d'enfoncement */
    }

    /* 6. CORRECTIF ADMIN BAR (Connecté) */
    body.admin-bar ul.nav-menu {
        top: 5px !important; /* Commence sous la barre admin */
        /* On garde un padding interne cohérent */
        padding-top: 40px !important; /* 80px global - 40px pour compenser */
    }
    /* =========================================
       OVERLAY (Fond sombre derrière le menu)
       ========================================= */
    
    /* On crée le calque uniquement quand la classe .mobile-menu-open est là */
    .main-navigation.mobile-menu-open::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;       /* Toute la largeur */
        height: 100vh;      /* Toute la hauteur */
        
        /* Couleur : Noir à 50% de transparence */
        background-color: rgba(0, 0, 0, 0.5); 
        
        /* Optionnel : Ajoute un flou sur le site en arrière-plan (effet verre dépoli) */
        backdrop-filter: blur(3px); 
        
        /* Z-INDEX : CRUCIAL */
        /* Doit être inférieur au menu (998) mais supérieur au reste du site */
        z-index: 990; 
        
        /* Animation douce */
        animation: fadeIn 0.3s ease forwards;
    }

    /* Petite animation pour que le noir n'apparaisse pas brutalement */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}