.mobile-menu {
    display: none;
}

.hamburger {
    display: none;
}

/* ==========================================
   MOBILE
   (≤ 920px)
========================================== */

@media (max-width: 1080px) {

    /* ---------- Header ---------- */

    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-container {
        padding-inline: 20px !important;
    }
    
    .header-actions {
        display: none;
    }

    .brand-logo {
        width: 28px;
        height: 28px;
    }

    .brand-name {
        font-size: 22px !important;
    }

    /* ==========================================
     MOBILE HEADER
    ========================================== */

    .header-actions {
        display: none;
    }


    /* ==========================================
     HAMBURGER
    ========================================== */

    .hamburger {
        display: flex;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        width: 44px;
        height: 44px;

        padding: 0;

        background: transparent;

        border: none;
        border-radius: 50%;

        cursor: pointer;

        position: relative;
        z-index: 10000;

        transition:
            background-color .2s ease,
            transform .15s ease;
    }


    .hamburger:active {
        transform: scale(.96);
    }


    .hamburger span {
        width: 22px;
        height: 2px;

        display: block;

        flex-shrink: 0;

        background: var(--button-text);

        border-radius: 999px;

        transition:
            transform .25s ease,
            opacity .2s ease;
    }


    /* ==========================================
     HAMBURGER → CLOSE
    ========================================== */

    .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }


    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }


    .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* ==========================================
     MOBILE MENU
    ========================================== */

    .mobile-menu {
        position: fixed;

        inset: 0;

        display: flex;

        align-items: center;
        justify-content: center;

        background: color-mix(
            in srgb,
            var(--background) 65%,
            transparent
        );

        backdrop-filter: blur(20px);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .3s ease,
            visibility .3s ease;

        z-index: 999;
    }


    .mobile-menu.open {
        opacity: 1;
        visibility: visible;
    }


    /* ==========================================
     MOBILE NAV
    ========================================== */

    .mobile-nav {
        display: flex;

        flex-direction: column;
        align-items: center;

        gap: 32px;

        transform: translateY(60px);

        opacity: 0;

        transition:
            transform .35s ease,
            opacity .35s ease;
    }


    .mobile-menu.open .mobile-nav {
        transform: translateY(0);

        opacity: 1;
    }


    /* ==========================================
     NAV LINKS
    ========================================== */

    .mobile-nav > a.header-tab {

        font-size: 21px;
        font-weight: 600;

        text-decoration: none;
    }


    /* ==========================================
     BUTTON LINKS
    ========================================== */

    .mobile-nav a.button2 {
        font-size: 16px;
    }


    /* ==========================================
     BODY
    ========================================== */

    body.menu-open {
        overflow: hidden;
    }


    body.menu-open .back-to-top {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition: .2s ease;
    }


    /* ==========================================
     HEADER NAV
    ========================================== */

    .header-nav {
        gap: 16px;
    }


    .button {
        padding: 12px 20px;
    }

    /* ---------- Hero ---------- */

    .hero {

        padding-inline: var(--space-4);

    }

    .hero-subtitle {

        font-size: 18px;

        max-width: 100%;

    }

    .hero-description {

        max-width: 100%;

    }

    /* ---------- Hero Home ---------- */

    .hero-home {

        padding-inline: var(--space-4);

    }

    .page-title-home {

        font-size: 52px;

        max-width: 100%;

    }

    /* ---------- Form ---------- */

    .waitlist-form {

        flex-direction: column;

    }

    .waitlist-form .input,

    .waitlist-form .button-primary {

        width: 100%;

    }

    .waitlist-form .button-primary {

        justify-content: center;

    }

    /* ---------- Footer ---------- */

    .footer {

        padding:
            var(--space-8)
            var(--space-4);

    }

    .footer-download {

        margin-bottom: var(--space-10);

    }

    .store-buttons {

        flex-direction: flex;

        align-items: center;

    }

    .store-boutton {
        width: 180px;
    }

    .store-boutton img {
        width: 100%;
        height: auto;
    }

    .footer-links {

        grid-template-columns: 1fr !important;

    }

    .footer-column {

        align-items: center;

    }

    .footer-bottom {

        display: grid;

        grid-template-columns: 1fr;

        gap: var(--space-5);

    }

    .footer-bottom {

        grid-template-columns: 1fr;

        justify-items: center;

        gap: var(--space-5);

    }

    .footer-social {

        gap: var(--space-5);

    }

    .footer-brand-link {

        gap: var(--space-2);

    }

    .footer-copyright {

        justify-self: center;

        text-align: center;

    }

    .password-strength {
        font-size: 14px;
        font-weight: 400;
    }

    .password-rules-title {
        font-size: 14px;
        font-weight: 400;
    }

    .password-rule {
        font-size: 14px;
        font-weight: 400;
    }

    .home-signup-popup {
        width: calc(100vw - 40px);
        max-width: 100%;
    }

    .home-signup-popup-content {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .home-signup-popup-icon {
        display: none;
    }

    .home-signup-popup-text {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin-right: 0px;
    }

    .home-signup-popup-text strong {
        display: block;
        width: 100%;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .home-signup-popup-text span {
        display: none;
    }

    .home-signup-popup .button2 {

        font-size: 13px;
        flex: 0 0 auto;
        width: fit-content;
    }

    .offers-grid {

        display: flex;
        flex-direction: column;

        gap: 15px;

    }

    .offer-card {

        width: 90%;

    }

    .offer-title {

        font-size: 32px;

        line-height: .95;

    }

    .offer-badge {
        font-size: 16px;
    }

    .page-title {
        font-size: 28px !important;
        line-height: 1 !important;
    }

    .faq-title {
        font-size: 28px !important;
        line-height: 1 !important;
    }

    .offer-features li {
        font-size: 15px;
    }

    .offer-price {
        font-size: 14px;
    }

    .button {
        font-size: 14px;
    }

    /* ==========================================
       SLIDER
    ========================================== */

    .experience-cards {

        width: 100%;

        display: flex;

        justify-content: flex-start;

        gap: 15px;

        padding:
            20px 0px 30px;

        box-sizing: border-box;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }


    .experience-cards::-webkit-scrollbar {
        display: none;
    }


    /* ==========================================
       WRAPPER
    ========================================== */

    .experience-card-wrapper {

        flex:
            0 0 245px;

        width: 245px;

        scroll-snap-align: center;

        gap: 20px;

    }


    /* ==========================================
       CARDS
    ========================================== */

    .experience-card {

        width: 245px;
        height: 500px;

        transform: none;

        filter: brightness(.55);

    }


    /* ==========================================
       CARD SÉLECTIONNÉE
    ========================================== */

    .experience-card-wrapper.is-active
    .experience-card {

        transform: none !important;

        filter: brightness(1);

    }


    /* ==========================================
     BOUTONS
    ========================================== */

    .experience-card-button {

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-8px);

    }


    /* Bouton de la card sélectionnée */

    .experience-card-wrapper.is-active
    .experience-card-button {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }

    /*
     * La sélection .is-active reste prioritaire.
     */

    .experience-card-wrapper.is-active
    .experience-card {

        filter: brightness(1);

    }

    .experience-slider-controls {

        display: flex;

        justify-content: flex-start;

        align-items: center;

        gap: 10px;

        width: 100%;

        margin-top: 5px;

        box-sizing: border-box;

    }


    .experience-slider-button {

        width: 42px;
        height: 42px;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 0;

        border: none;

        border-radius: 50%;

        background: var(--text);

        color: var(--background);

        font-family: "Inter";

        font-size: 18px;

        cursor: pointer;

        transition:
            opacity .2s ease,
            transform .2s ease;

    }


    .experience-slider-button:active:not(:disabled) {

        transform: scale(.92);

    }


    .experience-slider-button:disabled {

        opacity: .3;

        cursor: default;

        pointer-events: none;

    }


    .experience-slider-button:active {

        transform: scale(.85);

    }

    .section-marquee-item {

        font-size: 60px;

    }


    .section-marquee-logo {

        width: 58px;


    }

    .section-illustration {
        margin-top: 5px;
        left: 55%;
    }

    .section-figurine {

        width: 40px;
        height: 40px;

    }

    .section-figurines {

        gap: 15px;

    }

    .section-marquee {
        margin-top: 75px;
    }

    .faq-answer p {

        font-size: 14px;

    }

    .faq-question {

        font-size: 16px;

    }

    .faq-description {

        font-size: 12px;

    }

    .home-signup-popup-text strong {
        font-size: 18px;
    }

    button,
    a,
    summary,
    .button {
        -webkit-tap-highlight-color: transparent;

        user-select: none;
        -webkit-user-select: none;
    }

    .button4-redirect {

        margin-top: 20px;

        font-size: 14px;

    }

    .faq-answer a {
        text-decoration: underline;
        text-underline-offset: 4px;
    }


}


/* ==========================================
   PETIT MOBILE
   (≤ 576px)
========================================== */

@media (max-width: 576px) {

    .hero-subtitle {

        font-size: 16px;

    }

    .waitlist-button {

        width: 100%;

    }

    .store-button img {

        height: 44px;

    }

    .social-link svg {

        width: 20px;
        height: 20px;

    }

}