header {
    top: 0;
    z-index: 1000;

    height: var(--header-height);
    width: 100vw;

    --nbColumns: 5;
}

.header--sticky {
    position: sticky;
}

.header--fixed {
    position: fixed;
}

.header--container {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.header--fixed ~ main,
.header--sticky ~ main {
    padding-top: var(--header-height);
}

.header--logo {
    display: block;
    width: auto;
    height: auto;
}

.header--logo-link {
    min-width: var(--width-mobile);
    min-height: var(--height-mobile);
}

.header--logo:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.header--nav {
    display: flex;
    align-items: center;
}

.header--nav.header--modal:not(.header--modal__desktop-only) {
    flex-direction: column;
}

.header--nav-links {
    display: flex;
}

.header--nav.header--modal:not(.header--modal__desktop-only) .header--nav-links {
    flex-direction: column;
}

.header--accordion-title {
    margin-bottom: 0;
}

.header--nav:not(.header--modal):not(.header--modal__mobile-only) .header--accordion-content {
    position: absolute;
}

.header--burger {
    pointer-events: visible;
    cursor: pointer;
}

.header--burger path {
    stroke: var(--primary);
    transform-origin: center center;
    transition: transform var(--transition-time);
}

/* MODALS */

.header--modal {
    position: fixed;
    top: var(--header-height);
    left: 0;
    z-index: 100;

    height: calc(100vh - var(--header-height));
    width: 100vw;

    opacity: 0;
    overflow: auto;

    transition: transform var(--transition-time), opacity var(--transition-time);
}

.starts-offscreen {
    transform: translateX(100%);
}

.header--modal.is-open {
    opacity: 1;
}

.starts-offscreen.is-open {
    transform: translateX(0);
}
.header--nav:not(
.header--modal),
.header--modal__desktop-only {
    position: static;

    height: auto;
    width: auto;

    transform: none;
    opacity: 1;

    overflow: auto;
}

/* SEARCH */

.header--search-label {
    width: 100%;
}

.header--search-input {
    width: 100%;
    background: transparent;
    border-bottom: .063rem solid var(--blue-800);
    border-radius: 0;
    color: var(--blue-800);
    margin-bottom: 1.5rem;
}

.header--search-input:focus {
    outline: none;
}

.search--submit {
    border: 2px solid var(--blue-800);
    border-radius: 2.5rem;
    color: var(--blue-800);
    background: transparent;
    width: 100%;
    padding: 0.5rem;
    cursor: pointer;

    transition:
        color var(--transition-time, .25s),
        background-color var(--transition-time, .25s);
}

.search--submit:hover,
.search--submit:focus {
    color: var(--blue-400);
    background-color: var(--blue-800);
    outline: none;
}

@media screen and (min-width: 64rem) /* 1024px */ {

    /* :root {
        --navbar-shadow-blur: 0.25rem;
        --navbar-shadow-color: hsla(0, 0%, 0%, 0.250);
        --navbar-shadow: 0rem 0.25rem var(--navbar-shadow-blur) 0rem var(--navbar-shadow-color);
    } */

    /* STICKY ON SCROLL HEADER */

    header[data-visible="sticky"] .header--container,
    header[data-visible="true"] .header--container,
    header[data-visible="false"] .header--container {
        left: 0;
        right: 0;
        transition: top var(--transition-time, 0.2s);
    }

    header[data-visible="false"] .header--container {
        top: calc(((var(--header-height, -10rem) + 2rem) * -1));
    }
    
    header[data-visible="sticky"] .header--container,
    header[data-visible="true"] .header--container {
        top: 0;
    }
    
    /* header[data-visible="sticky"] .header--container {
        box-shadow: var(--navbar-shadow);
    } */

    /* HEADER MODALS */

    .header--nav:not(.header--modal),
    .header--nav.header--modal:not(.header--modal__desktop-only) {
        display: flex;
        flex-direction: row;
    }

    .header--nav.header--modal:not(.header--modal__mobile-only) {
        flex-direction: column;
    }

    .header--nav.header--modal.header--modal__mobile-only .header--nav-links {
        flex-direction: row;
    }

    .header--nav.header--modal.header--modal__desktop-only .header--nav-links {
        flex-direction: column;
    }

    .header--nav:not(.header--modal) .header--accordion-content,
    .header--nav.header--modal.header--modal__mobile-only .header--accordion-content {
        position: absolute;
    }

    .header--modal__mobile-only {
        position: static;

        height: auto;
        width: auto;
        
        transform: none;
        opacity: 1;
    }

    .header--modal__desktop-only {
        position: fixed;

        height: calc(100vh - var(--header-height));
        width: 100vw;

        transform: translateX(100%);
    }

    .header--modal__desktop-only .header--nav-links {
        flex-direction: column;
    }

}

/**
CUSTOM
**/

header {
    --padding-x: 1.88rem;
    --padding-y: 1.56rem;
    display: flex;
    align-items: center;

    color: var(--secondary);
    background-color: var(--primary);
    border-bottom: .063rem solid var(--secondary);
}

.header--container {
    justify-content: flex-end;
}

.header--logo-link {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 200;

    inline-size: 14.375rem;

    transform-origin: top center;
    transform: translateX(-50%);

    transition: transform var(--transition-time);
}

.header--logo-link.has-big-logo > picture:first-of-type {
    display: none;
}

.header--logo-link.has-big-logo > img {
    width: var(--width-mobile);
    height: var(--height-mobile);
}

header[data-visible=false] .header--logo-link,
header[data-visible=sticky] .header--logo-link,
header:has(.header--nav.is-open) .header--logo-link {
    transform: translateX(-50%) scale(0.725);
}

.header--logo-smile {
    position: absolute;
    bottom: 0;
    z-index: 2;

    width: 100%;
    height: 100%;
}

.header--burger {
    position: relative;
    z-index: 1000;
}

.header--burger path {
    transform: scale(.67) translate(.063rem, -.25rem);
    transition: transform calc(var(--transition-time) * 4) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header--burger.dripping path {
    transform: scale(1.45) translate(-.2rem, -.1rem);
}

.header--nav {
    padding: 3rem var(--padding-x) 2.8rem;
    display: block;
    background-color: var(--primary);
}

.header--nav.header--modal {
    transform: translateY(-100%);
}

.header--nav.header--modal.is-open {
    transform: translateY(0);
}

.header--nav-links {
    display: flex;
    flex-direction: column;

    width: 100%;

    padding: 0;

    list-style: none;
}

.header--nav-item {
    padding: var(--padding-y) 0;

    font-size: var(--h4-size);
    font-weight: 700;

    border-bottom: .063rem solid var(--secondary);
}

.header--nav-item .header--accordion-title {
    display: flex;
    align-items: center;

    margin-bottom: 0;
}

.header--nav-item.plus svg {
    --primaryColor: var(--white, hsl(0, 0%, 100%));
    --secondaryColor: var(--secondary);

    float: right;
    margin-left: 0.725rem;
    width: 2rem;
    height: 2rem;
}

.header--component-menu-item__subitem:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.header--accordion-title:not(:has( + .hidden)) {
    color: var(--white, hsl(0, 0%, 100%));
}

.header--component-menu-item__subitem,
.header--nav--subitems .header--nav-item,
.header--component-menu-item__subsubitem {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: calc(var(--padding-y) / 2) 0;
    font-size: 2rem;
    font-weight: 500;

    border-bottom: none;
}

.header--component-menu-item__subitem:after,
.header--component-menu-item__subsubitem:after {
    content: '';

    float: right;
    display: block;

    width: 1.132rem;
    min-width: 1.132rem;
    height: 0.83rem;

    margin-right: 0.313rem;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='14' viewBox='0 0 19 14' fill='none'%3E%3Cpath d='M8.22294 12.4338C8.22294 11.8871 8.44162 11.5591 9.20564 11.1497C11.6111 9.811 13.1684 8.9643 15.1085 7.73359C13.5791 7.70559 11.7471 7.70559 9.06964 7.70559C5.10817 7.70559 3.30544 7.84293 1.14671 7.84293C0.408014 7.84293 0 7.46025 0 6.69489C0 6.06687 0.381346 5.71086 1.17471 5.71086C3.68812 5.71086 5.81886 5.8482 9.34431 5.8482C11.6124 5.8482 13.3884 5.8202 15.1378 5.8202C13.0604 4.50948 11.6951 3.71613 9.37232 2.45875C8.38962 1.91206 8.14294 1.52938 8.14294 0.956032C8.14294 0.409347 8.47095 0 8.98964 0C9.29098 0 9.61899 0.0826694 10.1377 0.464016C12.7871 2.34941 14.0991 3.25078 17.2699 5.30018C17.8433 5.68286 18.1166 6.01087 18.1166 6.66556C18.1166 7.15757 17.8979 7.56692 17.3526 7.9776C14.6738 9.999 12.9804 11.147 10.0297 12.9498C9.61899 13.1964 9.29098 13.3058 9.01764 13.3058C8.55362 13.3058 8.22561 12.9778 8.22561 12.4311L8.22294 12.4338Z' fill='%23FFCB1F'/%3E%3C/svg%3E");
}

.header--nav--subitems .header--component-accordion-subitem {
    display: block;
}

.header--component-menu-item__subsubitem {
    font-size: 1.5rem;
}

.header--nav.header--modal:not(.header--modal__desktop-only) .links-socials{
    flex-direction: row;
    border-bottom: .063rem solid var(--secondary);
    gap:2rem;
    display: flex;
}

.links-socials .header--nav-item {
    border-bottom: none;
}

header .social:after {
    content: '';
    display: block;

    width: 1.875rem;
    height: 1.875rem;

    padding: 0.5rem;

    background-size: 1.875rem 1.875rem;
    background-repeat: no-repeat;
    background-position: center center;
}

header .social-youtube:after,
header .youtube:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='41' viewBox='0 0 49 41' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.5 0.274414C26.5948 0.274414 28.7434 0.329414 30.8259 0.419414L33.2857 0.539414L35.6402 0.681914L37.8452 0.834414L39.859 0.994414C42.0449 1.16414 44.102 2.1155 45.6679 3.68092C47.2338 5.24634 48.2082 7.3254 48.4194 9.55191L48.5173 10.6144L48.7011 12.8894C48.8726 15.2469 49 17.8169 49 20.2744C49 22.7319 48.8726 25.3019 48.7011 27.6594L48.5173 29.9344L48.4194 30.9969C48.2081 33.2238 47.2334 35.3032 45.667 36.8687C44.1005 38.4341 42.0429 39.3853 39.8566 39.5544L37.8476 39.7119L35.6426 39.8669L33.2857 40.0094L30.8259 40.1294C28.7185 40.2226 26.6094 40.2709 24.5 40.2744C22.3906 40.2709 20.2815 40.2226 18.1741 40.1294L15.7143 40.0094L13.3599 39.8669L11.1549 39.7119L9.14095 39.5544C6.95509 39.3847 4.89804 38.4333 3.33211 36.8679C1.76618 35.3025 0.791817 33.2234 0.58065 30.9969L0.48265 29.9344L0.2989 27.6594C0.11229 25.2022 0.0125921 22.7389 0 20.2744C0 17.8169 0.1274 15.2469 0.2989 12.8894L0.48265 10.6144L0.58065 9.55191C0.791735 7.3258 1.76574 5.24704 3.33117 3.68168C4.89661 2.11631 6.95308 1.1647 9.1385 0.994414L11.15 0.834414L13.355 0.681914L15.7119 0.539414L18.1716 0.419414C20.2799 0.326232 22.3898 0.277888 24.5 0.274414ZM19.6 14.2119V26.3369C19.6 27.4919 20.825 28.2119 21.805 27.6369L32.095 21.5744C32.3189 21.4429 32.5049 21.2535 32.6342 21.0252C32.7635 20.797 32.8316 20.538 32.8316 20.2744C32.8316 20.0108 32.7635 19.7518 32.6342 19.5236C32.5049 19.2954 32.3189 19.1059 32.095 18.9744L21.805 12.9144C21.5815 12.7827 21.3279 12.7134 21.0698 12.7135C20.8116 12.7135 20.5581 12.7829 20.3346 12.9147C20.1111 13.0464 19.9255 13.2359 19.7966 13.4641C19.6676 13.6922 19.5998 13.951 19.6 14.2144V14.2119Z' fill='white'/%3E%3C/svg%3E");
}

header .social-facebook:after,
header .facebook:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath d='M28 15C28 8.1 22.4 2.5 15.5 2.5C8.6 2.5 3 8.1 3 15C3 21.05 7.3 26.0875 13 27.25V18.75H10.5V15H13V11.875C13 9.4625 14.9625 7.5 17.375 7.5H20.5V11.25H18C17.3125 11.25 16.75 11.8125 16.75 12.5V15H20.5V18.75H16.75V27.4375C23.0625 26.8125 28 21.4875 28 15Z' fill='white'/%3E%3C/svg%3E");
}

header .social-instagram:after,
header .instagram:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath d='M15.5013 11.25C14.5067 11.25 13.5529 11.6451 12.8496 12.3483C12.1463 13.0516 11.7513 14.0054 11.7513 15C11.7513 15.9946 12.1463 16.9484 12.8496 17.6517C13.5529 18.3549 14.5067 18.75 15.5013 18.75C16.4958 18.75 17.4496 18.3549 18.1529 17.6517C18.8562 16.9484 19.2513 15.9946 19.2513 15C19.2513 14.0054 18.8562 13.0516 18.1529 12.3483C17.4496 11.6451 16.4958 11.25 15.5013 11.25ZM15.5013 8.75C17.1589 8.75 18.7486 9.40848 19.9207 10.5806C21.0928 11.7527 21.7513 13.3424 21.7513 15C21.7513 16.6576 21.0928 18.2473 19.9207 19.4194C18.7486 20.5915 17.1589 21.25 15.5013 21.25C13.8436 21.25 12.2539 20.5915 11.0818 19.4194C9.90973 18.2473 9.25125 16.6576 9.25125 15C9.25125 13.3424 9.90973 11.7527 11.0818 10.5806C12.2539 9.40848 13.8436 8.75 15.5013 8.75ZM23.6263 8.4375C23.6263 8.8519 23.4616 9.24933 23.1686 9.54236C22.8756 9.83538 22.4782 10 22.0638 10C21.6494 10 21.2519 9.83538 20.9589 9.54236C20.6659 9.24933 20.5013 8.8519 20.5013 8.4375C20.5013 8.0231 20.6659 7.62567 20.9589 7.33265C21.2519 7.03962 21.6494 6.875 22.0638 6.875C22.4782 6.875 22.8756 7.03962 23.1686 7.33265C23.4616 7.62567 23.6263 8.0231 23.6263 8.4375ZM15.5013 5C12.4088 5 11.9038 5.00875 10.465 5.0725C9.485 5.11875 8.8275 5.25 8.2175 5.4875C7.70729 5.67546 7.2459 5.97579 6.8675 6.36625C6.47659 6.74452 6.17583 7.20592 5.9875 7.71625C5.75 8.32875 5.61875 8.985 5.57375 9.96375C5.50875 11.3438 5.5 11.8263 5.5 15C5.5 18.0938 5.50875 18.5975 5.5725 20.0363C5.61875 21.015 5.75 21.6738 5.98625 22.2825C6.19875 22.8263 6.44875 23.2175 6.86375 23.6325C7.285 24.0525 7.67625 24.3038 8.21375 24.5113C8.83125 24.75 9.48875 24.8825 10.4638 24.9275C11.8438 24.9925 12.3263 25 15.5 25C18.5938 25 19.0975 24.9913 20.5363 24.9275C21.5138 24.8813 22.1713 24.75 22.7825 24.5138C23.2927 24.3258 23.7541 24.0255 24.1325 23.635C24.5538 23.215 24.805 22.8238 25.0125 22.285C25.25 21.67 25.3825 21.0125 25.4275 20.035C25.4925 18.6563 25.5 18.1725 25.5 15C25.5 11.9075 25.4913 11.4025 25.4275 9.96375C25.3813 8.98625 25.2488 8.32625 25.0125 7.71625C24.8245 7.20604 24.5242 6.74465 24.1338 6.36625C23.7555 5.97534 23.2941 5.67458 22.7838 5.48625C22.1713 5.24875 21.5138 5.1175 20.5363 5.0725C19.1575 5.0075 18.675 5 15.5 5M15.5 2.5C18.8963 2.5 19.32 2.5125 20.6538 2.575C21.9838 2.6375 22.8913 2.84625 23.6875 3.15625C24.5125 3.47375 25.2075 3.90375 25.9025 4.5975C26.5384 5.22217 27.0302 5.97809 27.3438 6.8125C27.6525 7.60875 27.8625 8.51625 27.925 9.8475C27.9838 11.18 28 11.6038 28 15C28 18.3963 27.9875 18.82 27.925 20.1525C27.8625 21.485 27.6525 22.39 27.3438 23.1875C27.0302 24.0219 26.5384 24.7778 25.9025 25.4025C25.2778 26.0384 24.5219 26.5302 23.6875 26.8438C22.8913 27.1525 21.9838 27.3625 20.6538 27.425C19.32 27.4838 18.8963 27.5 15.5 27.5C12.1038 27.5 11.68 27.4875 10.3463 27.425C9.01625 27.3625 8.11 27.1525 7.3125 26.8438C6.47809 26.5302 5.72217 26.0384 5.0975 25.4025C4.46163 24.7778 3.96977 24.0219 3.65625 23.1875C3.34625 22.3913 3.1375 21.4838 3.075 20.1525C3.015 18.82 3 18.3963 3 15C3 11.6038 3.0125 11.18 3.075 9.8475C3.1375 8.515 3.34625 7.61 3.65625 6.8125C3.96977 5.97809 4.46163 5.22217 5.0975 4.5975C5.72217 3.96163 6.47809 3.46977 7.3125 3.15625C8.10875 2.84625 9.015 2.6375 10.3463 2.575C11.6813 2.51625 12.105 2.5 15.5013 2.5' fill='white'/%3E%3C/svg%3E");
}

header .social-tiktok:after,
header .tiktok:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M168.2 32c5.9 26 23.3 41.3 48.8 43.2v39.2c-16.8 1.6-31.7-3.4-48.8-14.8v74.1c0 66.3-72 86.5-106.9 46.4-27.9-32.5-14.5-92.3 35.3-103.2 10.4-2.3 20-2.1 30.7-.5v41.5c-3.7-.9-7-1.9-10.7-1.8-17.6.3-29.3 17.4-23.2 34.1 8.7 24 46.4 18.2 46.4-12.9V32h28.4z'/%3E%3C/svg%3E");
}


@media screen and (min-width: 48rem) /* 768px */ {

    .header--logo-link {
        min-width: var(--width-desktop);
        min-height: var(--height-desktop);
    }
    
}

@media screen and (min-width: 64rem) /* 1024px */ {

    header[data-visible="false"] .header--container,
    header[data-visible="sticky"] .header--container {
        top: 0;
    }

    header[data-visible=false] .header--logo-link, header[data-visible=sticky] .header--logo-link {
        transform: translateX(-50%) scale(0.6);
    }

    header[data-visible=false] .header--logo-link.has-big-logo, header[data-visible=sticky] .header--logo-link.has-big-logo {
        transform: translateX(-50%) scale(0.29);
    }

    .header--logo-link.has-big-logo > img {
        width: var(--width-desktop);
        height: var(--height-desktop);
    }

    .header--modal {
        height: auto;

        padding-bottom: 5.62rem;

        transition: translate var(--transition-time), opacity var(--transition-time), padding-top var(--transition-time);
    }

    .header--nav.header--nav:not(.header--modal__desktop-only) .header--nav-links {
        flex-direction: row;
        justify-content: center;
    }

    .header--nav-item, .component-menu-item {
        align-self: flex-start;
        padding-left: 0.63rem;
        padding-right: 0.63rem;
    }

    .header--nav-links {
        display: grid;
        /* grid-template-columns: repeat(auto-fill, calc(100% / var(--nbColumns))); */
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        border-bottom: .063rem solid var(--secondary);
    }

    .header--nav-item{
        border-bottom: none;
    }

    .header--nav-links .plus-icon {
       width: 1.25rem;
       height: 1.25rem;
    }

}