/* RESET */ 
#navbar ul, #navbar li {
    list-style-type: none;
    margin-bottom: 0;
}

/* MENU MOBILE ---------------------------------- */
#navbar {
    position: sticky;
    top:0;
    display:grid;
    grid-template-columns: minmax(calc(100px + var(--padding)*2), calc(170px + var(--padding)*2)) minmax(2em, auto);
    width: 100%;
    min-height: var(--hauteurMenu);
    color: var(--lightColor);
    background: var(--currentColor);
    justify-content: space-between;
    align-items: center;
    z-index: 190;
}

.logo, .logo svg {
    display: block;

}
.logo {
    margin: 0 var(--padding);
    padding-bottom: .3rem;
}
    
        .logo svg {
            fill: var(--vertclair);
        }

/* MENU DÉROULANT MOBILE ---------------------------------- */
    /* Hide checkbox Menu Hamburger*/
    #menuToggle {
        display: none;
    }
    /* Icone Menu hamburger -------------------- */
    .hamb {
        grid-column: 2/2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: fit-content;
        height: 2rem;
        font-size: 1rem;
        margin-right: var(--padding);

        text-transform: uppercase;
        color: var(--vertclair);
        cursor: pointer;
    }/* Style label tag */

        .hamb span:nth-child(2) {
            align-self: center;

            } 
        .hamb-line {
            height: 1px;
            background: var(--vertclair);
            width: 100%;
        } 

    /* BLOC DE LIENS MENU -------------------- */
    #menu-principal {
        display: block;
        position: absolute;
        top: var(--hauteurMenu);
        right: 0;
        width: 100%;
        height: 0;
        padding: 0 var(--padding);
        color: var(--currentColor);
        background-color: var(--lightColor);
        overflow: scroll;
    }

        #menu-principal div {
            display: none;
        }

        /* Navigation links */
        .menulink,
        .menulink.active { 
            display: flex;
            justify-content: left;
            justify-items: flex-start;
            align-items: center;
            min-height: var(--hauteurMenu);
            padding: 0 ;
            font-size: 1rem;
            border-bottom: 1px solid var(--currentColor);
        }

            .menulink a {
                display: block;
                width: 100%;
                height: 100%;
                text-decoration: none;
                font-weight: var(--fw-normal);
                padding: 1rem 0;
            }
                .menulink.subnav.active .sublink a {
                    font-weight: var(--fw-normal);
                }

        .menulink.active, 
        .menulink.subnav.active,
            .menulink.active a, 
            .menulink.subnav.active .sublink.active a {
                font-weight: var(--fw-gras);
            }

        .unlistedPages .menulink a {
            min-width: max-content;
        }
        .unlistedPages .menulink a svg{
            display: inline-flex;
            width: auto;
            height: 14px;
            margin-right: .25rem;
            fill: var(--currentColor);
        }
        .unlistedPages .menulink.active a {
            font-weight: var(--fw-gras);
        }
        .unlistedPages .menulink.active a svg {
            fill: var(--currentColor);
        }


        /* The subnavigation menu */
        .menulink.subnav{
            display: block;
            margin: auto 0;
            height: fit-content;
        }
            /* Subnav checkbox  */
            input[id$="Toggle"] {
                display: none;
            }
                    
            /* Subnav button label */
            .subnavbtn {
                display: block;
                border: none; 
                outline: none;
                font-family: inherit;
                font-size: inherit;
                text-align: left;
                width: 100%;
                padding: 1rem 0;
                }
                .subnavbtn:after {
                    content:" +";
                }



            /* BOITE LIENS SOUS-MENU */    
            .subnav-content {
                height: 0;
                overflow: hidden;
            }
                /* SubNavigation links */        
                .subnav-content .sublink {
                    border-bottom: 1px dashed;
                    height: fit-content;
                    min-height: var(--hauteurMenu);
                    font-size: 1rem;
                }
                    .subnav-content .sublink:last-child {
                        border: none;
                        padding-bottom: 1rem;
                    }

            /* When you move the mouse over the subnav container, open the subnav content */
            input[id$="Toggle"]:checked ~ .subnav-content {
                height: inherit;
            }   

            input[id$="Toggle"]:checked ~ .subnavbtn:after,
            .menulink.subnav.active input[id$="Toggle"]:checked ~ .subnavbtn:after
            {
                white-space: pre;
                content:" –";
            }  

    /* BOITE ADRESSE */    
    #menu-principal > .menu-contact {
        display: none;
        height: 0;

    }
    .menu-contact address {
        font-size: var(--fs-l);
        word-break: keep-all ;
    }
    .menu-contact > h2 {
        font-weight: var(--fw-gras);
        font-size: 1rem;
        padding: 0;
    }
        .menu-contact address a {
            word-break: keep-all ;
            white-space: pre;
        }
    /* Toggle menu OPEN */
    #menuToggle:checked ~ #menu-principal {
        min-height: calc(100vh - var(--hauteurMenu));
    }
    /* BOITE ADRESSE */    
    #menuToggle:checked ~ #menu-principal > .menu-contact {
        display: block;
        height: fit-content;
        margin-top: auto;
        margin-bottom: calc(var(--padding)*2);
        padding-top: var(--padding);
    }
    #menuToggle:checked ~ .hamb .hamb-line {
        height: 3px;
    }

    #menuToggle:checked ~ .hamb .hamb-line:first-child {
        transform: rotate(-45deg);
        top: .92rem;
        position: relative;
        width: 2rem;
    }
    #menuToggle:checked ~ .hamb .hamb-line:nth-child(3) {
        transform: rotate(45deg);
        top: -.9rem;
        position: relative;
        width: 2rem;
    }
    #menuToggle:checked ~ .hamb span:nth-child(2) {
        display: none;
    }

        
@media screen and (min-width: 1024px) {
    .logo {
        margin: 0 0 0 var(--padding) ;
    }

    .logo:hover svg {
        fill: var(--blanc);
    }
    .menulink.active {
        border: none;
    }

/* Cacher l'hamburger MOBILE ------------------------------ */
    .hamb {
        display: none;
        height: 0; width: 0;
    }/* Style label tag */

    #menuToggle {
        display: none;
        height: 0; width: 0;
    } /* Hide checkbox */

        /* Reset links */        
        .menulink, .subnav-content .sublink, .subnav-content .sublink:last-child  {
            border: none;
        }
        /* Supprimer le [+–] lorsque on est sur la page active*/
        #menu-principal .subnav.active:after, #menu-principal .subnav.active .subnavbtn:after {
            content: "";
        }
    /* Cacher BOITE ADRESSE */    
    #menu-principal > .menu-contact,
    #menuToggle:checked ~ #menu-principal > .menu-contact {
        display: none;
        height: 0;
    }
/* MENU DESKTOP ------------------------------  */
#navbar {
    display: grid;
    grid-template-columns: calc(160px + var(--padding)) minmax(max-content, 1fr) auto;
    grid-template-rows: var(--hauteurMenu);
    column-gap: var(--padding);
    row-gap: 0;
    justify-content:flex-start;
    align-self: start;
    height: var(--hauteurMenu);
    width: 100%;
}
    .logo {
        grid-column: 1/2;
        grid-row: 1/2;
        z-index: 200;
    }
    .logo svg {
        width: 100%;
        height: 100%;
    }
    /* BLOC DE LIENS MENU */
    #menu-principal, #menuToggle:checked ~ #menu-principal {
        position: relative;
        top: 0;
        height: var(--hauteurMenu);
            min-height: var(--hauteurMenu);
        overflow:visible;
        grid-column: 1 / 4;
        grid-row: 1/2;
        display: grid;
        grid-template-columns:subgrid;
        grid-template-rows:subgrid;
        gap: var(--padding);
        background-color: var(--currentColor);
        padding: 0  var(--padding);
        z-index: 10;
    }

        #menu-principal div {
            display: block;
            grid-column: 1 / 2;
            width: 0;
            height: 0;
        }

        .listedPages, .unlistedPages {
        display: flex;   
        height: var(--hauteurMenu);

        }
        .listedPages {
            grid-column: 2 / 3;
            justify-self: start;
        }
        .unlistedPages {
            grid-column: 3 / 4;
            justify-self: end;
        }

        .menulink, .menulink.active {
            padding: 0 .75rem;
        }
        .menulink:first-of-type {
            padding-left: 0;
        }
        .menulink:last-of-type {
            padding-right: 0;
        }
        /* Navigation links */
        .listedPages .menulink.active, 
        .unlistedPages .menulink.active {
            display: flex;
            align-items: center;
            cursor: default;
        }

        .unlistedPages .menulink a svg{
            fill: var(--lightColor);
        }
        .unlistedPages .menulink.active a svg,
        .unlistedPages .menulink:hover a svg{
            fill: var(--blanc);
        }
        .unlistedPages .menulink.active a svg,
        .unlistedPages .menulink:hover a svg{
            fill: var(--blanc);
        }

        .menulink > a, 
        .subnavbtn {
            line-height: var(--hauteurMenu);
            color: var(--lightColor);
            font-weight: var(--fw-normal);
            font-size: var(--fs-m);
            padding: 0;
        }
        .unlistedPages .menulink a {
            font-weight: var(--fw-normal);
        } 
        /* Change style links on hover or active */
        .menulink.active,
        .menulink.active .subnavbtn,
        .menulink.active a, 
        .menulink:hover > a,  
        .menulink:hover .subnavbtn,
        .unlistedPages .menulink.active {
            font-weight: var(--fw-gras);
            color: var(--blanc);
        }


    /* Masquer les éléments de Subnavigation sur la version desktop si l'input est checked en mode mobile */
    input[id$="Toggle"]:checked ~ .subnav-content {
        height: 0;
        font-weight: var(--fw-normal);
    }

    /* Subnav désactiver l'interactivité de la checkbox en version desktop  */
    input[id$="Toggle"] .subnavbtn {
        pointer-events:none;
    }

        /* Simuler l'état non coché du lien en version desktop */
        .subnavbtn:after, 
        input[id$="Toggle"]:checked + .subnavbtn:after 
        {
            content:"  ˇ";
            white-space: pre;
        }  
            /* Simuler l'état coché du lien au survol en version desktop */
            .subnav:hover .subnavbtn:after,
            .subnav:hover input[id$="Toggle"]:checked + .subnavbtn:after
            {
                content:" ↓";
            } 


    /* CONTENEUR LIENS SOUS-MENU */   
    .subnav-content {
        display:flex;
        flex-wrap: nowrap;
        position: absolute;
        left: 0px;
        top: calc(var(--hauteurMenu) - var(--bordermenu));
        height: 0;
        max-width: 100vw;
        width: 100%;
        padding: 0 var(--padding);
        margin: 0;
        box-shadow: inset 0px var(--bordermenu) var(--currentColor); 
        border-bottom: none;
        color: var(--currentColor);
        background-color: var(--blanc);
        transition: height 0.15s ease-in-out; /* Animer l'apparition/disparition du sous-menu */
         -webkit-transition: height 0.15s ease-in-out;
          -moz-transition: height 0.15s ease-in-out;
           -o-transition: height 0.15s ease-in-out;
        z-index: 11;
    }
 
        /* SubNavigation links */ 
               
        .subnav-content .sublink, 
        .subnav-content .sublink:last-child {
            display: flex;
            flex: auto;
            flex-basis: content;
            max-width: max-content;
            border-top: var(--bordermenu) solid var(--currentColor);
            padding: 0 .5rem;
            font-size: var(--fs-ssmenu);
            overflow: hidden;
            transition: all 0.1s ease; /* Animer l'affichage complet des textes des liens*/
             -webkit-transition: all 0.1s ease;
              -moz-transition: all 0.1s ease;
               -o-transition: all 0.1s ease;
        }

            /* Survol liens de sous-menu */
            .subnav-content .sublink:hover,
                .subnav-content .sublink:last-child:hover,
            .subnav-content .sublink.active:hover,
                .subnav-content .sublink:last-child.active:hover {
                    flex-shrink: 0;
                    border-top: var(--bordermenu) solid var(--vertclair);
                    background-color: var(--vertclair);
                    font-weight: var(--fw-gras);
                } 

            /* Survol liens de sous-menu lorsque MENU est actif ------------ */
            .menulink.subnav.active .subnav-content .sublink:hover, 
            .menulink.subnav.active .subnav-content .sublink:last-child:hover {
                border-top: var(--bordermenu) solid var(--blanc);
                background-color: var(--blanc);
            }      

                /* Texte Lien du sous-menu lorsque MENU est actif -------------- */
                .subnav-content .sublink a, 
                .subnav-content .sublink a:first-child {
                    display: inline-block;
                    font-weight: var(--fw-normal);
                    line-height: var(--hauteurMenu) ;
                    color: var(--currentColor);
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    padding: 0;
                }  
                    /* Survol Texte Lien du sous-menu -------------- */
                    .subnav-content .sublink:hover a,
                    .menulink.subnav.active .sublink:hover a {
                        font-weight: var(--fw-gras);
                    }

            /* Lien ACTIF du sous-menu lorsque MENU est actif -------------- */    
            .menulink.subnav.active .subnav-content .sublink.active, 
            .menulink.subnav.active .subnav-content .sublink.active:last-child {
                flex-shrink: 0;
                padding: 0 1rem ;
                color: var(--currentColor);
                cursor: default;
                border-top: var(--bordermenu) solid var(--vertclair);
                background-color: var(--vertclair);
                
            }   


    /* Au survol du MENU afficher le SOUS-MENU  -------------- */

    /* Bordure verte sous le conteneur du sous-menus au survol ou en actif pour ne pas apparaitre lorsque  -------------- */   
    .menulink.subnav:hover .subnav-content, 
    .menulink.subnav.active .subnav-content
    {
        height:  calc(var(--hauteurSubMenu) + var(--bordermenu));
        border-bottom: var(--bordermenu) solid var(--vertclair);
    }

    /* Afficher le contenur de menu survolé au premier plan (si jamais l'un des sous-menu est actif ----------- */
    .menulink.subnav:hover > .subnav-content {
        z-index: 12;
    }

        /* Masquer MENU au scroll Si SOUS-MENU ACTIF affiché (ex. page services) -------------------- */ 
        #navbar.ssmenuactif {
            position: sticky;
            top:calc(-1*(var(--hauteurMenu) - var(--bordermenu)));
        }
    
            #navbar.ssmenuactif #menu-principal{
                position: relative;
            }
                #navbar.ssmenuactif .menulink.subnav.active .subnav-content {
                    display: flex;
                    flex-wrap: nowrap;
                }
                    #navbar.ssmenuactif .menulink.subnav.active .subnavbtn {
                        pointer-events: none;
                    }
                        #navbar.ssmenuactif .menulink.subnav.active .subnavbtn:after{
                            content:"";
                        }
                                      
        /* Padding sur MAIN si SOUS-MENU ------------------------------- */           
        #navbar.ssmenuactif + main, 
        #navbar.ssmenuactif + div.scroller main  {
            padding-top: calc(var(--hauteurMenu));
        }

}