/* Par défaut : mode mobile, voir les media queries pour les surcharges */

.liens-evitement {
    /* Cache le lien hors de l'écran pour l'accessibilité, le rendant disponible pour les lecteurs d'écran */
    /* Layout */
    left: -9999px;
    position: absolute;
    top: auto;
    /* Sizing */
    /* Doit correspondre à la largeur de tst-header-bg */
    width: calc(var(--desktop-container-max-width) - calc(2 * var(--tst-header-bg-padding-x)));
    /* Spacing */
    margin: 1rem auto;
    padding: 0 1.5rem;

    .liens-evitement-nav {
        .liens-evitement-list {
            /* Display & Grid */
            align-items: center;
            display: flex;
            justify-content: flex-start;
            gap: 1rem;
            /* Spacing */
            margin: 0;
            padding: 0;
            /* Misc */
            list-style-type: none;

            .lien-evitement-item {
                padding: 0;

                .lien-evitement {
                    /* Typography */
                    color: var(--theme-button-background-color);
                    /* Background & Borders */
                    fill: var(--theme-button-background-color);
                    /* Font */
                    font-family: var(--stackr), sans-serif;
                    font-size: var(--font-size-xs);
                    line-height: var(--line-height-xs);
                    /* Misc */
                    cursor: pointer;
                }
            }
        }
    }

    &:has(.lien-evitement:focus) {
        /* Affiche le lien lorsqu'il reçoit le focus, pour la navigation au clavier */
        /* Layout */
        left: 0;
        position: relative;
        top: 0;
    }
}

.tst-header {
    /* Sizing */
    max-width: 100%;
    /* Background & Borders */
    background-color: var(--theme-primary-background-color);
    --logo-header-padding: 0.2rem;
    --logo-header-mobile-height: 5.1649rem;
    --z-index-nav: 100;
    --z-index-dropdown: 110;

    .tst-header-bg {
        /* Par défaut, en mode mobile : logo à gauche et menu burger à droite */
        /* Display & Grid */
        align-items: center;
        display: flex;
        justify-content: space-between;
        /* Sizing */
        height: calc(var(--logo-header-mobile-height) + calc(var(--tst-header-bg-padding-y) * 2));
        width: 100%;
        /* Spacing */
        padding: var(--tst-header-bg-padding-y) var(--tst-header-bg-padding-x);
        /* Background & Borders */
        background-color: var(--theme-primary-background-color);

        .website-logo img.logo_header,
        .website-logo-mobile img.logo_header {
            /* La hauteur du header doit correspondre à la hauteur de l'image
               afin de ne pas changer de taille quand on ouvre le menu mobile et qu'on cache le logo */
            /* Sizing */
            height: var(--logo-header-mobile-height);
            /* Spacing */
            padding: var(--logo-header-padding);
            /* Background & Borders */
            background-color: var(--theme-primary-background-color);
        }

        /* Website logo pour tablette + desktop */
        .website-logo.tablet-desktop {
            /* En mode mobile, le logo est différent. On cache donc le logo tablette/desktop */
            /* Display & Grid */
            display: none;
        }

        /* Container des boutons "Burger" et "Fermer" afin d'ouvrir/fermer le menu mobile (en mode mobile) */
        .nav-control {
            /* Layout */
            z-index: var(--z-index-nav);
            /* Display & Grid */
            align-items: center;
            display: flex;
            justify-content: center;
            /* Sizing */
            height: 2.4rem;
            width: 2.4rem;
            /* Spacing */
            padding: 0.2rem;
            /* Background & Borders */
            background-color: var(--theme-primary-background-color);
            /* Misc */
            cursor: pointer;

            /* Par défaut, on n'affiche pas le bouton pour fermer le menu mobile */
            /* Le menu mobile est ouvert quand .tst-header a aussi la classe CSS .active */
            .nav-control-img.nav-control-opened {
                /* Display & Grid */
                display: none;
            }

            /* Par défaut, on affiche le bouton pour ouvrir le menu mobile */
            /* Le menu mobile est ouvert quand .tst-header a aussi la classe CSS .active */
            .nav-control-img.nav-control-closed {
                /* Display & Grid */
                display: block;
            }
        }
    }

    /* Container des liens du header (Accueil, 1ère demande, éligibilité, mon espace...) en mode mobile+tablette+desktop */
    /* Ce container correspond aussi au panneau latéral quand le menu mobile est ouvert (sous le header) */
    nav.main-nav {
        /* Par défaut, le panneau latéral mobile est fermé */
        /* Le menu mobile est ouvert quand .tst-header a aussi la classe CSS .active */
        /* Layout */

        z-index: var(--z-index-nav);
        /* Sizing */
        /* La hauteur doit correspondre exactement à la hauteur du header mobile .tst-header-bg
           afin de couvrir tout l'espace disponible en-dessus du header jusqu'au bas de la fenêtre
         */
        height: calc(100vh - calc(var(--logo-header-mobile-height) + calc(var(--tst-header-bg-padding-y) * 2)));
        width: 100%;
        /* Spacing */
        padding: 0 1.9rem 6rem;
        /* Background & Borders */
        background: var(--theme-primary-background-color);

        &.tablet-desktop {
            /* Display & Grid */
            display: none;
        }

        &.mobile {
            display: none;
            overflow-y: auto;
        }

        /* Container de la liste (ul) des liens du header */
        ul.primary-navigation-list {
            /* Display & Grid */
            align-items: center;
            display: flex;
            flex-direction: column;
            /* Spacing */
            margin: 0;
            padding: 0;
            /* Misc */
            list-style-type: none;

            > li {
                /* Bordure entre chaque lien */
                /* Display & Grid */
                /* Flexbox : Positionner les éléments autres que "Mon espace" en position 2 (donc après "Mon espace" en position 1) en mode mobile */
                order: 2;
                /* Background & Borders */
                border-bottom: 1px solid var(--theme-primary-border-color);
            }

            li {
                /* Chaque lien doit prendre toute la largeur disponible sur le menu mobile */
                /* Sizing */
                width: 100%;

                /* Liens et sous-liens de la navigation */
                a {
                    /* Display & Grid */
                    display: block;
                    /* Sizing */
                    width: 100%;
                    /* Spacing */
                    padding: 1.4rem 0;
                    /* Typography */
                    color: var(--theme-primary-text-color);
                    text-decoration: none;
                    /* Typography */
                    font-family: var(--stacksb), sans-serif;
                    line-height: var(--line-height-s);
                    font-size: var(--font-size-s);

                    &:hover {
                        /* Typography */
                        color: var(--theme-primary-text-hover-color);
                        /* Transforms & Transitions */
                        transition: all .2s;
                    }
                }

                /* Conteneur contenant le bouton "Mon espace" (déconnecté) ou la dropdown Utilisateur (connecté) */
                &.header-login-container {
                    /* Display & Grid */
                    /* Flexbox : Positionner l'élément en première position en mode mobile */
                    order: 1;
                    /* Spacing */
                    /* En revanche, l'espace avec le haut du header est plus grand */
                    margin-top: 1.4rem;
                    /* Background & Borders */
                    /* Bordure en-dessous si la dropdown est fermée en mode mobile */
                    border-bottom: 1px solid var(--neutral-dark);

                    &.login-entry {
                        /* Pas de bordure du bas pour le bouton "Mon espace" en mode mobile */
                        border: none;

                        .link-text-login {
                            /* Display & Grid */
                            align-items: center;
                            display: flex;
                            gap: 1rem;
                            justify-content: center;
                            /* Spacing */
                            padding: 1rem 2rem;
                            /* Typography */
                            color: var(--theme-button-background-color);
                            text-align: center;
                            text-decoration: none;
                            /* Background & Borders */
                            background-color: var(--theme-button-text-color);
                            border-radius: var(--radius-regular);

                            > span {
                                /* Display & Grid */
                                display: inline-block;
                                /* Typography */
                                vertical-align: middle;
                            }

                            &:hover,
                            &:focus {
                                /* Typography */
                                color: var(--theme-button-background-hover-color);
                                text-decoration: none;
                            }

                            .link-img-login {
                                /* Sizing */
                                height: 2rem;
                                width: 2rem;
                                /* Background & Borders */
                                background-color: var(--theme-button-background-color);
                                /* Misc */
                                mask: url(../img/ico-profil-blue.svg) no-repeat center / contain;
                            }

                            &:hover .link-img-login,
                            &:focus .link-img-login {
                                /* Background & Borders */
                                background-color: var(--theme-button-background-hover-color);
                            }
                        }
                    }

                    /* Ce sélecteur correspond au bloc Twig : loginSummarybloc.html.twig */
                    &.login-name {

                        /* icone à gauche du prénom quand user connecté */
                        .profil-img {
                            /* Display & Grid */
                            display: inline-block;
                            /* Sizing */
                            height: 2rem;
                            width: 2rem;
                            /* Typography */
                            vertical-align: middle;
                            /* Background & Borders */
                            background-color: var(--theme-button-text-color);
                            /* Transforms & Transitions */
                            /* Misc */
                            mask: url(../img/ico-profil-white.svg) no-repeat center / contain;
                        }

                        & > a {
                            /* Display & Grid */
                            align-items: center;
                            display: flex;
                            gap: 0.4rem;
                            justify-content: flex-start;

                            /* chevron à droite du prénom quand user connecté */
                            .arrow-img {
                                /* Display & Grid */
                                display: inline-block;
                                /* Sizing */
                                height: 2rem;
                                width: 2rem;
                                /* Typography */
                                vertical-align: middle;
                                /* Background & Borders */
                                /* hérite de la couleur du parent */
                                background-color: currentColor;
                                /* Transforms & Transitions */
                                transition: transform 0.3s ease;
                                /* Misc */
                                /* Masque pour la compatibilité avec les navigateurs WebKit plus anciens */
                                -webkit-mask: url(../img/ico-arrow.svg) no-repeat center / contain;
                                mask: url(../img/ico-arrow.svg) no-repeat center / contain;
                            }

                            &:hover {
                                .profil-img {
                                    /* Background & Borders */
                                    background-color: var(--theme-primary-text-hover-color);
                                    /* Transforms & Transitions */
                                    transition: all .2s;
                                }
                            }
                        }

                        .login-submenu-wrapper {
                            /* Display & Grid */
                            display: none;

                            ul.login-submenu {
                                /* Spacing */
                                margin: 0;
                                /* Misc */
                                list-style-type: none;
                            }
                        }
                    }


                    /* Quand l'utilisateur a cliqué sur la dropdown Utilisateur (elle reste ouverte en mode mobile) */
                    &[data-pinned="true"] {

                        /* Quand le menu est "épinglé" par un clic, on force le lien et l'icône à rester blancs */
                        > a:hover,
                        a:focus {
                            /* Typography */
                            color: var(--theme-button-text-color);

                            .profil-img {
                                /* Background & Borders */
                                background-color: var(--theme-button-text-color);
                            }
                        }

                        .arrow-img.is-rotated {
                            /* Transforms & Transitions */
                            transform: rotate(180deg);
                        }

                        .login-submenu-wrapper {
                            /* Display & Grid */
                            display: block;
                        }
                    }
                }
            }
        }
    }

    /* Surcharges en mode mobile lorsque le menu mobile est ouvert */
    &.active {
        .tst-header-bg {
            /* Comme le logo est caché, on aligne le bouton pour fermer le menu en flex-end (plutôt qu'en space-between) */
            /* Display & Grid */
            justify-content: flex-end;

            /* Le logo est caché */
            .website-logo.mobile {
                /* Display & Grid */
                display: none;
            }

            /* Bouton "Fermer le menu mobile" devient visible */
            .nav-control {
                .nav-control-img.nav-control-opened {
                    /* Display & Grid */
                    display: block;
                }

                /* Bouton "Burger - Ouvrir le menu mobile" est caché */
                .nav-control-img.nav-control-closed {
                    /* Display & Grid */
                    display: none;
                }
            }
        }

        /* Affichage du container des liens du menu mobile au-dessus des élements et en prenant tout l'espace sur l'écran */
        nav.main-nav.mobile {
            /* Display & Grid */
            display: block;
        }
    }
}

/* For windows with width higher than 48rem (tablet breakpoint) */
@media (min-width: 48rem) {
    .tst-header {
        .tst-header-bg {
            .website-logo img.logo_header,
            .website-logo-mobile img.logo_header {
                /* Sizing */
                height: 2.6rem;
                width: 20.9rem;
                /* Background & Borders */
                opacity: 1;
            }

            /* Afficher le logo tablette+desktop */
            .website-logo {
                &.tablet-desktop {
                    /* Display & Grid */
                    display: block;
                }
                &.mobile {
                    /* Display & Grid */
                    display: none;
                }
            }
        }

        /* Container des liens du header */
        nav.main-nav {
            /* Affichage au milieu du header */
            /* Layout */
            /* Sizing */
            height: auto;
            max-width: none;
            width: auto;
            /* Spacing */
            padding: 0;
            /* Background & Borders */
            background: transparent;
            /* Transforms & Transitions */
            transition: none;

            &.tablet-desktop {
                /* Display & Grid */
                display: flex;
            }

            &.mobile {
                /* Display & Grid */
                display: none;
            }

            /* Liste (ul) des liens du header */
            ul.primary-navigation-list {
                /* Les liens sont affichés horizontalement en mode tablette/desktop */
                /* Layout */
                position: relative;
                /* Display & Grid */
                display: flex;
                flex-direction: row;
                gap: 2.4rem;
                /* Sizing */
                width: 100%;

                > li {
                    /* Display & Grid */
                    /* Rétablit l'ordre par défaut des éléments flex */
                    order: 1;
                    /* Sizing */
                    /* Annule la largeur de 100% du mode mobile */
                    width: unset;
                    /* Spacing */
                    padding: 0;
                    /* Background & Borders */
                    border: none;

                    > a {
                        /* Spacing */
                        padding-bottom: 0.8rem;
                        padding-top: 0.8rem;
                    }

                    &.header-login-container {
                        /* Display & Grid */
                        /* Flexbox : Positionner l'élément en dernière position en modes >= tablette */
                        order: 2;
                        /* Spacing */
                        /* Pas de marge au-dessus en modes >= tablette */
                        margin-top: 0;
                        /* Background & Borders */
                        /* Pas de bordure en modes >= tablette */
                        border: none;

                        /* --- Styles pour le sous-menu de connexion --- */
                        &.login-name {
                            .arrow-img.is-rotated {
                                /* Transforms & Transitions */
                                transform: rotate(180deg);
                            }

                            .login-submenu-wrapper {
                                /* Technique pour cacher le sous-menu tout en permettant les animations CSS */
                                /* Layout */
                                position: absolute;
                                right: 0;
                                top: 100%;
                                z-index: var(--z-index-dropdown);
                                /* Display & Grid */
                                /* Affiche le sous-menu (qui est caché par défaut avec opacity et visibility) */
                                display: block;
                                /* Sizing */
                                min-width: 15rem;
                                /* Background & Borders */
                                background-color: var(--theme-primary-background-color);
                                border-radius: 0 0 var(--radius-regular) var(--radius-regular);
                                opacity: 0;
                                /* Transforms & Transitions */
                                transform: translateY(-0.5rem);
                                transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
                                /* Misc */
                                visibility: hidden;

                                &.is-open {
                                    /* Background & Borders */
                                    opacity: 1;
                                    /* Transforms & Transitions */
                                    transform: translateY(0);
                                    /* Misc */
                                    visibility: visible;
                                }

                                .login-submenu {
                                    /* Spacing */
                                    padding: 0.5rem 0;

                                    li {
                                        padding: 0;

                                        a {
                                            /* Spacing */
                                            padding: 1rem 1rem 1.5rem 1.5rem;
                                            /* Typography */
                                            font-family: var(--stacksb), sans-serif;
                                            font-size: var(--font-size-s);
                                            line-height: var(--line-height-s);

                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        /* Retrait des surcharges quand le menu mobile est ouvert, en mode tablette + desktop */
        &.active {
            .tst-header-bg {
                /* En mode tablette+desktop, le logo est affiché à gauche, on doit donc annuler le justify-content: flex-end */
                /* Display & Grid */
                justify-content: space-between;
            }

            nav.main-nav.mobile {
                display: none;
            }
        }
    }

    .mobile {
        display: none;
    }
}

/* For windows with width higher than 65rem (desktop breakpoint) */
@media (min-width: 65rem) {
    .tst-header {
        /* Centre le header dans la page */
        /* Spacing */
        margin-left: auto;
        margin-right: auto;
        width: 100%;

        .tst-header-bg {
            /* Applique une largeur fixe pour le contenu du header */
            /* Sizing */
            width: var(--desktop-container-max-width);
            /* Spacing */
            margin-left: auto;
            margin-right: auto;
        }

        /* Navigation */
        nav.main-nav {
            ul.primary-navigation-list {
                /* Display & Grid */
                flex-basis: 49.9rem;
                gap: 3rem;
                /* Sizing */
                height: 2.4rem;
            }
        }
    }
}

/* Mode impression */
@media print {
    header {
        /* Masque le header lors de l'impression de la page */
        /* Display & Grid */
        display: none;
    }
}