.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    padding: 0 1rem;
    margin: 0 auto;
}

/*
 * Sur desktop le conteneur du menu est transparent : `display: contents`
 * fait remonter la nav et le CTA comme enfants directs du .wrapper, ce qui
 * préserve le layout d'origine (logo | nav | CTA en space-between).
 */
.header__menu {
    display: contents;
}

/* Bouton burger : masqué sur desktop, affiché par la media query mobile */
.header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0 12px;
    border: 0;
    cursor: pointer;
    background-color: rgb(255 255 255 / 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50px;
}

.header__burger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #000000;
    border-radius: 2px;
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

/* Animation des barres en croix lorsque le menu est ouvert */
.header__burger.is-open .header__burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header__burger.is-open .header__burger-bar:nth-child(2) {
    opacity: 0;
}

.header__burger.is-open .header__burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.header__nav {
    width: fit-content;
    z-index: 100;
    background-color: rgb(255 255 255 / 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50px;
}

.header__nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header__nav-item-link {
    display: block;
    color: #000000;
    padding: 1rem 2rem;
    border-radius: 50px;
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
}

.header__nav-item-link:hover {
    background-color: rgb(255 255 255 / 0.91);
}

.header__cta {
    display: block;
    color: #FFFFFF;
    background-color: var(--color-red);
    padding: 1rem 2rem;
    border-radius: 50px;
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
}

.header__cta:hover {
    color: var(--color-red);
    background-color: rgb(255 255 255 / 0.91);
}

/* ------------------------------------------------------------------ */
/* Responsive : menu mobile                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
    /* ancre le panneau déroulant sous la barre */
    .header .wrapper {
        position: relative;
    }

    .header__burger {
        display: flex;
    }

    /* le conteneur devient un panneau déroulant positionné sous la barre */
    .header__menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        background-color: rgb(255 255 255 / 0.95);
        backdrop-filter: blur(10px);
        border-radius: 1.5rem;
        box-shadow: 0 12px 30px rgb(0 0 0 / 0.18);

        /* état fermé par défaut */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.5rem);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }

    .header__menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* la nav perd son fond « pilule » : c'est le panneau qui le porte */
    .header__nav {
        width: 100%;
        background-color: transparent;
        backdrop-filter: none;
        border-radius: 0;
    }

    .header__nav-list {
        flex-direction: column;
        align-items: stretch;
    }

    .header__nav-item-link {
        text-align: center;
    }

    .header__cta {
        text-align: center;
    }
}