.menu {
    position: fixed;
    left: -100%; /* Hors de l'écran */
    width: 100%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.3s ease;
    z-index: 9;
    }
    .menu.open {
        left: 0; 
        z-index: 9;
    }
    body.menu-open {
        overflow: hidden;
        z-index: 9;
    }
    .menu-grid {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        background-color: #ddd;
    }
    @media (hover: hover) { .item-subtitle:hover, .item-title a:hover {
        opacity: 60%;
    } }
    @media (hover: hover) { .item-images a:hover {
        opacity: 80%;
    } }

    .menu-item {
        flex: 1; /* Chaque élément prend un tiers de l'espace disponible */
        display: flex;
    }
    .menu-item:last-child {
        border-bottom: none; /* Supprime la ligne pour le dernier élément */
    }
    .menu-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .item-title {
        font-size: 40px;
        font-weight: 700;
        text-align: left;
        box-sizing: border-box;
        height: 20%;
        width: 100%;
        text-decoration: underline;
        text-decoration-thickness: 3px; /* Épaisseur du soulignement */
        text-underline-offset: 3px; /* Distance entre le texte et l'underline */
    }
    .item-content {
        display: flex;
        font-size: 30px;
        font-weight: 700;
        text-align: right;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 70px;
        box-sizing: border-box;
        height: 80%;
        width: 100%;
    }
    .menu-item.item-products {
        background: linear-gradient(to bottom, #ccc 0%, rgba(255, 255, 255, 0) 100%);
    }

    .menu-item.item-articles {
        background: linear-gradient(to bottom, #999 0%, rgba(255, 255, 255, 0) 100%);
    }

    .menu-item.item-others {
        background: linear-gradient(to bottom, #aaa 0%, rgba(255, 255, 255, 0) 100%);
    }



    @media (min-width: 1000px) {
        .menu {
        height: 93%;
        top: 7%;
        }
        .item-title {
            padding: 15px;
            padding-left: 20px;
        }
        .item-content {
            padding: 15px;
            padding-right: 25px;
            padding-bottom: 22px;
        }
        .item-content .item-images {
            width: 70%;
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 30px;
        }
        .item-content .item-images a {
            margin: 0;
            padding: 0;
        }
        .item-subtitle {
            text-decoration: underline;
            text-decoration-thickness: 4px;
            text-underline-offset: 7px;
    }
    } 
    @media (max-width: 1000px) {
        .menu {
        height: calc(100% - var(--hh));
        top: var(--hh);
        }
        .item-title {
            height: 20%;
            padding-left: 15px;
            padding-top: 15px;
            font-size: clamp(25px, 8vw, 40px);
            text-decoration-thickness: 2px; /* Épaisseur du soulignement */
            text-underline-offset: 3px; /* Distance entre le texte et l'underline */
        }
        .item-content {
            padding-bottom: 17px;
            padding-right: 15px;
            height: 80%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            flex-direction: column;
            gap: 5px;
            font-size: clamp(20px, 3vh, 35px);
        }
        .item-content .item-images {
            width: 100%;
            height: 8vh;
            align-items: flex-end;
            justify-content: flex-end;
            display: flex;
            gap: 10px;
        }
        .item-content .item-images img {
            height: 50px;
            width: auto;
        }
        .item-others .item-content {
            padding-bottom: 20px;
        }
        .item-subtitle {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 6px;
    }

    }

/* Articles: "All" steht für sich, darunter mit Abstand die Kategorien in etwas hellerem Schwarz (60 %) */
.item-articles .item-subtitle.all { margin-bottom: 14px; }
.item-articles .item-subtitle:not(.all) a { color: rgba(0, 0, 0, 0.6); }

/* Ganzes Feld klickbar */
.menu-item { cursor: pointer; }

/* "Magazine": Unterstrich hört vor dem g auf und beginnt erst wieder nach dem g (Lücke auf beiden Seiten, in Safari wie Chrome) */
.item-title:has(.ul-gap) { text-decoration: none; }
.item-title .ul-part {
    text-decoration: underline;
    text-decoration-thickness: inherit;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}
.item-title .ul-gap { margin: 0 1px; }
@media (min-width: 1001px) { .item-title .ul-part { text-decoration-thickness: 3px; } }
@media (max-width: 1000px) { .item-title .ul-part { text-decoration-thickness: 2px; } }

/* Unterpunkte (Store, Stockists, All, Art …): Serifenschrift in gleicher Größe, weiterhin unterstrichen; mehr Zeilenabstand,
   damit der Strich klar zu seinem Wort gehört; graue Unterpunkte haben auch einen grauen Strich */
.item-subtitle, .item-subtitle a { font-family: 'Rhymes', Georgia, serif; font-weight: 400; }
.item-subtitle { line-height: 1.6; }
@media (max-width: 1000px) { .item-subtitle { text-underline-offset: 4px; } }
.item-articles .item-subtitle:not(.all) { text-decoration-color: rgba(0, 0, 0, 0.6); }

/* Titel (Magazine, Articles, Others): Unterstrich 1 px wie die Ränder der Kästen */
.item-title, .item-title .ul-part { text-decoration-thickness: 1px !important; }

/* Alle drei Titel mit demselben 1-px-Strich (wie bei Magazine) */
.item-title:has(.ul-part) { text-decoration: none; }
.item-title .ul-gap { margin: 0; }

/* Unterpunkte: nur ein Strich (am Link selbst, in der Farbe der Schrift), etwas tiefer unter dem Text */
.item-subtitle { text-decoration: none; }
.item-subtitle a { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 4px; text-underline-offset: 9px; }
@media (max-width: 1000px) { .item-subtitle a { text-decoration-thickness: 3px; text-underline-offset: 7px; } }

/* Die drei Felder bekommen so viel Höhe wie ihr Inhalt braucht (freier Platz wird verteilt);
   bei Others bleibt unten Platz, damit der letzte Strich nicht unter der Safari-Leiste verschwindet */
@media (max-width: 1000px) {
    .menu-item { flex: 1 1 auto; }
    .item-others .item-content { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* Magazine: links vom g 1 px mehr Luft; rechts gleich große Lücke, ohne den Buchstabenabstand g–a zu vergrößern:
   der zweite Strich ist dort als Linie gezeichnet, die 1,3 px später beginnt */
.item-title .ul-gap { margin: 0 0 0 1px; }
.item-title .ul-after-gap {
    text-decoration-color: transparent;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: calc(100% - 1.3px) 1px;
    background-position: 1.3px calc(100% - 4px);
}