/* =========================================
   LA CARTE — « Le ciel de Mateda » (D-033)
   En-tête : les catégories en médaillons, comme des astres (.sky-map) ; barre des catégories collante (ancres,
   pilules .filters__button de theme.css) ; rayons titrés entre deux étincelles ; mention allergènes ;
   encart « commande particulière » sur ciel de nuit.
   ========================================= */

/* --- En-tête : texte à gauche (.page-header__split, theme.css), carte du ciel des catégories à droite --- */
.sky-map {
    display: flex;
    gap: var(--space-md);
}

/* Un médaillon sur deux descend, comme les étoiles de la constellation */
.sky-map__item:nth-child(even) {
    margin-top: var(--space-xl);
}

.sky-map__link {
    display: grid;
    justify-items: center;
    gap: var(--space-3xs);
    color: var(--white);
    text-align: center;
    text-decoration: none;
}

.sky-map__photo {
    display: block;
    margin-bottom: var(--space-2xs);
    border-radius: var(--radius-full);
    box-shadow: var(--ring-moon);
    transition: transform var(--transition-base);
}

.sky-map__photo img {
    display: block;
    width: var(--moon-sm);
    height: var(--moon-sm);
    border-radius: var(--radius-full);
    object-fit: cover;
}

.sky-map__link:hover .sky-map__photo {
    transform: scale(var(--hover-zoom));
}

.sky-map__name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
}

.sky-map__price {
    color: var(--crumb);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.sky-map__link:hover .sky-map__name {
    text-decoration: underline;
}

/* Sur tablette et mobile, la barre collante suffit : la carte du ciel se retire */
@media (max-width: 1100px) {
    .sky-map {
        display: none;
    }
}

/* --- Barre des catégories : pilules collées sous l'en-tête --- */
.category-nav {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
    background-color: var(--color-background);
}

.admin-bar .category-nav {
    top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
}

.category-nav__list {
    display: flex;
    justify-content: center;
    gap: var(--space-2xs);
    padding-block: var(--space-sm);
    overflow-x: auto;
}

.category-nav .filters__button {
    flex-shrink: 0;
}

.category-nav__count {
    display: inline-grid;
    place-items: center;
    min-width: var(--space-md);
    height: var(--space-md);
    border-radius: var(--radius-full);
    background-color: var(--sky-tint);
    color: var(--night);
    font-size: var(--text-xs);
}

@media (max-width: 640px) {
    .category-nav__list {
        justify-content: flex-start;
    }
}

/* --- Rayons de la carte --- */
.menu-group {
    scroll-margin-top: calc(var(--header-height) + var(--space-3xl));
}

/* Le décalage passe sur la page : les ancres arrivent au même endroit, et un produit atteint au clavier
   (Tab, Maj+Tab) ne se cache plus sous l'en-tête et la barre des catégories, collants tous les deux. */
html:has(.category-nav) {
    scroll-padding-top: calc(var(--header-height) + var(--space-3xl));
}

html:has(.category-nav) .menu-group {
    scroll-margin-top: 0;
}

.menu-group + .menu-group {
    margin-top: var(--space-3xl);
}

.menu-group__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.menu-group__spark {
    flex-shrink: 0;
    width: var(--spark-md);
    height: var(--spark-md);
    color: var(--sky);
}

/* --- Mention allergènes : pastille mie, étoile ciel --- */
.menu-note {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: fit-content;
    margin: var(--space-3xl) auto 0;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    background-color: var(--crumb);
    color: var(--ink);
    font-size: var(--text-sm);
}

.menu-note__star {
    flex-shrink: 0;
    width: var(--spark-md);
    height: var(--spark-md);
    color: var(--sky);
}

@media (max-width: 640px) {
    .menu-note {
        align-items: flex-start;
        border-radius: var(--radius-lg);
    }
}

/* --- Encart « commande particulière » : un morceau de ciel de nuit aux coins doux --- */
.cta.cta--night {
    padding: var(--space-2xl) var(--space-lg);
    border-radius: var(--radius-card);
    background: var(--stars), var(--night);
    background-size: var(--stars-size), auto;
}

.cta--night .cta__title {
    color: var(--white);
}

.cta--night .cta__text {
    color: var(--crumb);
}