:root {
    --bg-color: #fff;
    --content-color: var(--main-color);
    --taille_logo: 100px;
}

/* totop */
.totop {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 50px;
    transform: translateX(50%);
    padding: 9px 10px 11px 10px;
    width: 20px;
    height: auto;
    z-index: 9999;
    background: #fff;
    border-radius: 100vmax;
    transition: all var(--hover-delay) var(--cubic-bezier);
}

.totop * {
    transition: all var(--hover-delay) var(--cubic-bezier);
    stroke: var(--main-color);
}

.totop.end {
    background: var(--main-color);
}

.totop.end * {
    stroke: #fff;
}

/* header */
header.top {
    transition: all var(--move-delay) var(--cubic-bezier);
    position: sticky;
    top: 0;
    box-sizing: border-box;
    z-index: 999;
    width: 100%;
    padding: 20px calc(var(--marge) * 2) 0px calc(var(--marge) * 2);

    background: var(--bg-color);
    color: var(--content-color);
}

.scrolled header.top {
    --taille_logo: 40px;
    padding: 10px calc(var(--marge) * 2) 0 calc(var(--marge) * 2);
}

.header_content {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 100fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    padding-bottom: 20px;
    border-bottom: var(--border-width) solid var(--main-color);
}

.scrolled .header_content {
    padding-bottom: 10px;
    border-bottom: var(--border-width) solid var(--main-color);
}


/* header > logo */
.logo img {
    height: var(--taille_logo);
    width: var(--taille_logo);
    transition: all var(--move-delay) var(--cubic-bezier);
}


/* header > menu */
.burger {
    display: none;
    order: 2;
}

body.burgered .burger {
    display: block;
}

.burger .top {
    transform: rotate(-45deg) translate(4.75px, -5px);
    transform-origin: 50%;
}

.burger .bottom {
    transform: rotate(45deg) translate(5.2px, 5px);
    transform-origin: 50%;
}

header.top .middle {
    opacity: 1;
}

body.burgered .top,
body.burgered .bottom {
    transform: rotate(0) translate(0);
}

body.burgered .middle {
    opacity: 0;
}

menu {
    /* position: absolute;
    width: 50%;
    left: 25%; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 20px;
    --link-color: var(--main-color);
}

.lien_menu {
    text-transform: uppercase;
    white-space: nowrap;
}

.lien_menu::before {
    display: none;
}


/* header > liens_externes : */
.liens_externes {
    display: flex;
    align-items: center;
    gap: 10px;
}

svg {
    display: block;
    cursor: pointer;
    /* height: 24px !important;
    width: auto; */
}

svg:hover {
    --icon-color: color-mix(in oklab, var(--main-color) var(--mix-percent), var(--mix-color));
}

svg * {
    transition: all var(--hover-delay) var(--cubic-bezier);
}

@media (max-width: 800px) {
    .barre_recherche {
        width: 100%;
    }

    .totop {
        display: block;
        opacity: 0;
    }

    .totop.actif {
        opacity: 1;
    }

    /* header */
    header.top {
        padding: 20px;
    }

    body.scrolled header.top {
        padding: 20px 20px 0px 20px;
    }

    .header_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-flow: row wrap;
        column-gap: 20px;
        justify-content: start;
        padding-bottom: 20px;
    }

    header.top * {
        transition: all var(--move-delay) var(--cubic-bezier);
    }

    .liens_externes {
        flex: 1;
    }

    .burger {
        display: block;
        width: 30px;
        height: auto;
    }

    menu {
        margin: 0;
        gap: 5px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        order: 3;
        width: 100vw;
        position: static;
        overflow: hidden;
    }

    body.burgered menu {
        margin-top: 10px;
    }

    .lien_menu {
        opacity: 0;
        margin-bottom: -40px;
    }

    body.burgered .lien_menu {
        opacity: 1;
        margin-bottom: 0px;
        transition: all var(--hover-delay) var(--cubic-bezier)
    }
}