/*Format mobile*/
header {
    display: flex;
    margin: 10px;
    align-items: flex-start;
    justify-content: space-between;

    & #header_logo {
        width: 55px;
        height: auto;
    }

    button {
        width: 48px;
        height: 48px;
        border: 1px solid var(--border);
        border-radius: 48px;
        display: grid;
        place-items: center;
        transition: .3s;

        &.button-open {
            color: var(--link-color);
            border-color: black;
        }

        svg {
            width: 24px;
            height: 24px;
        }
    }
}

nav {
    width: 70%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s ease-out;

    >ul {
        overflow: hidden;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        white-space: nowrap;

        li {
            >a>span {
                display: none;
            }

            >ul {
                display: none;
            }
        }
    }
}

ul#liste-page a.active {
    font-weight: 700;
    color: var(--title-color);
}

nav.open {
    grid-template-rows: 1fr;
}

#heroSection>img {
    width: 100%;
}

/*Format tablette*/
@media (min-width: 768px) {
    ul#liste-page {
        align-items: flex-start;

        >li>a {
            color: black;
            text-decoration: underline;
            text-decoration-color: var(--title-color);

            &>span {
                display: inline-block;
                border: 3px solid var(--border);
                border-radius: 50%;
                transition: .3s;

                &.reverse-arrow {
                    color: var(--title-color);
                    border-color: var(--button-active-color);
                    transform: rotateZ(-180deg);
                }
            }
        }

    }

    ul.sous-liste.open {
        padding-top: 1rem;
        display: flex;
        flex-direction: column;
    }
}

/*Format desktop*/
@media (min-width: 1024px) {
    header {
        align-items: center;
        justify-content: flex-start;
        font-size: 0.875rem;

        >a {
            padding-top: 8px;
        }

        button {
            display: none;
        }

        nav {
            overflow: auto;
            width: initial;
            display: block;

            &>ul#liste-page {
                flex-direction: row;

                a {
                    color: black;
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                        color: var(--title-color);
                    }
                }
            }
        }
    }

    ul#liste-page {
        width: max-content;

        &>li>a>span:hover {
            color: var(--title-color);
            border-color: var(--button-active-color);
        }

    }
}

@media (min-width: 1230px) {
    header {
        font-size: 1.125rem;
    }
}

@media (min-width: 1440px) {
    header {
        & #header_logo {
            width: 100px;
            height: auto;
        }
    }
}