/* =========================================
   THEME MATEDA — couche du projet, chargée en dernier.
   Piste « Le ciel de Mateda » (D-031, D-033), issue du logo : le ciel teal étoilé où flottent le pain et le croissant,
   le cercle du logo qui devient médaillon photo, le crème des silhouettes pour les grands titres et les boutons.
   Les valeurs viennent toutes de base/variables.css.
   ========================================= */

/* --- Surfaces de ciel : teal étoilé (en-tête, hero, pied de page) et ciel de nuit (savoir-faire) --- */
.sky,
.site-footer,
.page-header {
    background: var(--stars), var(--sky);
    background-size: var(--stars-size), auto;
    color: var(--white);
}

.night {
    background: var(--stars), var(--night);
    background-size: var(--stars-size), auto;
    color: var(--white);
}

.sky :focus-visible,
.night :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.page-header :focus-visible {
    outline: var(--focus-ring-on-dark);
}

/* Petits textes sur ciel en mie (blé sur ciel = 4:1, réservé aux grands textes) ; le blé reste sur la nuit (6,9:1) */
.sky .eyebrow,
.page-header .eyebrow {
    color: var(--crumb);
}

.night .eyebrow,
.sky .script,
.night .script {
    color: var(--wheat);
}

.sky-icon {
    fill: currentColor;
}

/* --- Lien souligné (« Voir toute la carte ») --- */
.link-arrow {
    color: var(--color-link);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-strong);
    text-underline-offset: var(--underline-offset);
}

.link-arrow:hover {
    color: var(--color-link-hover);
}

.night .link-arrow {
    color: var(--wheat);
}

/* --- Boutons : pilules en Quicksand, double anneau comme le cercle du logo --- */
.btn {
    min-height: var(--button-min-height);
    border: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-button);
}

.btn--large {
    font-size: var(--text-sm);
}

.btn--primary {
    box-shadow: var(--ring-button-sky);
}

/* Blé : action principale sur le ciel */
.btn--wheat {
    background-color: var(--wheat);
    box-shadow: var(--ring-button-wheat);
    color: var(--night);
}

.btn--wheat:hover {
    background-color: var(--white);
    color: var(--night);
}

/* Contour mie : action secondaire sur le ciel */
.btn--ghost {
    background-color: transparent;
    box-shadow: var(--ring-ghost);
    color: var(--white);
}

.btn--ghost:hover {
    background-color: var(--crumb-hover);
    color: var(--white);
}

.btn--secondary {
    box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-action);
}

.btn--block {
    width: 100%;
}

/* --- En-tête : le ciel du logo --- */
.site-header {
    background: var(--sky);
    border-bottom: 0;
    color: var(--color-header-text);
}

.site-header__logo {
    display: block;
}

/* Le logo tel qu'il est dessiné : carré, sans découpe ni anneau (D-036) */
.site-header__logo img {
    display: block;
    width: var(--brand-size);
    height: var(--brand-size);
}

.site-header__name {
    color: var(--white);
    font-size: var(--text-2xl);
}

.site-nav {
    gap: var(--space-lg);
}

.site-nav__list {
    gap: var(--space-md);
}

.site-nav__list a {
    position: relative;
    display: inline-block;
    padding-block: var(--space-3xs);
    color: var(--color-header-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list a[aria-current="page"] {
    color: var(--white);
}

/* Page courante : une étincelle blé sous le lien */
.site-nav__list .current-menu-item > a::after,
.site-nav__list a[aria-current="page"]::after {
    content: "✦";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--space-sm));
    transform: translateX(-50%);
    color: var(--wheat);
    font-size: var(--text-xs);
}

.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
    background-color: var(--white);
}

/* Bouton « Ma commande » : blé, comme les boutons du hero */
.site-header .cart-button:not(.cart-button--compact) {
    min-height: var(--toggle-size);
    background-color: var(--wheat);
    box-shadow: var(--ring-button-wheat);
    color: var(--night);
}

.site-header .cart-button:not(.cart-button--compact):hover {
    background-color: var(--white);
}

.cart-button__icon {
    flex-shrink: 0;
}

.cart-button__count {
    display: inline-grid;
    place-items: center;
    min-width: var(--space-md);
    height: var(--space-md);
    padding: 0 var(--space-3xs);
    border-radius: var(--radius-full);
    background-color: var(--sky);
    color: var(--white);
    font-size: var(--text-xs);
    letter-spacing: 0;
}

.cart-button__count[hidden] {
    display: none;
}

/* Panier compact (mobile) : icône + nombre d'articles, à côté du bouton menu */
.cart-button--compact {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: var(--toggle-size);
    height: var(--toggle-size);
    margin-left: auto;
    color: var(--white);
}

.cart-button--compact:hover {
    color: var(--wheat);
}

.cart-button--compact .cart-button__count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--wheat);
    color: var(--night);
}

@media (max-width: 900px) {
    .cart-button--compact {
        display: inline-flex;
    }

    /* Menu ouvert : grandes entrées en Gloock, séparées par un filet blé */
    .site-nav {
        align-items: stretch;
        gap: var(--space-md);
        padding-bottom: var(--space-lg);
    }

    .site-nav__list {
        gap: 0;
        border-top: var(--border-width) solid var(--wheat-line);
    }

    .site-nav__list a {
        display: block;
        padding: var(--space-sm) 0;
        border-bottom: var(--border-width) solid var(--wheat-line);
        font-family: var(--font-heading);
        font-size: var(--text-2xl);
        font-weight: var(--weight-heading);
    }

    .site-nav__list .current-menu-item > a,
    .site-nav__list a[aria-current="page"] {
        color: var(--wheat);
    }

    .site-nav__list .current-menu-item > a::after,
    .site-nav__list a[aria-current="page"]::after {
        position: static;
        margin-left: var(--space-2xs);
        transform: none;
    }

    .site-nav .cart-button {
        width: 100%;
    }

    /* Téléphone à l'horizontale : l'en-tête collant ne doit pas cacher le bas du menu */
    .js .site-nav.is-open {
        max-height: var(--nav-max-height);
        overflow-y: auto;
    }

    /* Sans JS, le menu reste déplié : l'en-tête ne colle plus, sinon il couvrirait l'écran (567 px sur 812) */
    html:not(.js) .site-header {
        position: static;
    }

    html:not(.js) .category-nav {
        top: 0;
    }
}

/* Lien d'évitement en blé : visible sur l'en-tête ciel */
.skip-link,
.skip-link:focus {
    background-color: var(--wheat);
    color: var(--night);
}

/* --- Hero : le ciel étoilé, le pain qui flotte, les yeux levés --- */
.hero.sky {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-2xl) calc(var(--horizon-height) + var(--space-2xl));
}

/* Bas arrondi en horizon (accueil, fiche produit) */
.hero.sky::after,
.product-hero::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -1px;
    height: var(--horizon-height);
    background-color: var(--color-background);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.hero.sky .hero__inner {
    position: relative;
    z-index: var(--z-raised);
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-xl);
}

.hero--text-only .hero__inner {
    grid-template-columns: 1fr;
}

.hero__title {
    margin: var(--space-sm) 0 var(--space-md);
    color: var(--white);
    font-size: var(--text-h1);
}

.hero__text {
    max-width: var(--text-max-hero);
    margin-bottom: var(--space-lg);
    color: var(--crumb);
    font-size: var(--text-lg);
}

/* Médaillon : le cercle du logo, photo de la boutique, deux produits qui flottent comme la lune */
.medallion {
    position: relative;
    justify-self: center;
    width: var(--medallion-size);
    max-width: 100%;
    aspect-ratio: 1;
}

.medallion__photo,
.moon {
    position: absolute;
    overflow: hidden;
    border-radius: var(--radius-full);
}

.medallion__photo {
    inset: 0;
    box-shadow: var(--ring-photo);
}

.moon {
    box-shadow: var(--ring-moon);
}

.medallion__photo img,
.moon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moon--1 {
    top: -4%;
    left: -9%;
    width: var(--moon-lg);
    height: var(--moon-lg);
}

/* Logo en petite lune (Notre histoire) : réduit et remonté pour tenir entier dans le rond (D-036) */
.moon--logo {
    background: var(--sky);
}

.moon--logo img {
    object-fit: contain;
    transform: translateY(var(--logo-round-shift)) scale(var(--logo-round-scale));
}

.moon--2 {
    bottom: 2%;
    right: -8%;
    width: var(--moon-sm);
    height: var(--moon-sm);
}

.spark {
    position: absolute;
    color: var(--wheat);
}

.spark--1 {
    top: 9%;
    right: -2%;
    width: var(--spark-lg);
    height: var(--spark-lg);
}

.spark--2 {
    bottom: 27%;
    left: -14%;
    width: var(--spark-sm);
    height: var(--spark-sm);
}

.spark--3 {
    top: -8%;
    right: 25%;
    width: var(--spark-md);
    height: var(--spark-md);
}

@media (max-width: 900px) {
    .hero.sky {
        padding-top: var(--space-lg);
    }

    .hero.sky .hero__inner {
        grid-template-columns: 1fr;
    }

    .medallion {
        order: -1;
        margin-top: var(--space-sm);
    }

    .spark--2 {
        left: -8%;
    }
}

@media (max-width: 640px) {
    .hero .button-group {
        display: grid;
    }
}

/* --- Sections : en-tête centré (accent manuscrit + titre), lien en dessous --- */
@media (min-width: 900px) {
    .section {
        padding-block: var(--space-2xl) var(--space-3xl);
    }
}

.section-head {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.section-head .section__title {
    margin: var(--space-3xs) 0 0;
}

.section-head .script,
.section-head .section__title {
    margin-inline: auto;
}

.section-more {
    max-width: none;
    margin-top: var(--space-xl);
    text-align: center;
}

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

.page-header--center {
    text-align: center;
}

.page-header--center .page-header__intro {
    margin-inline: auto;
}

/* --- Les enfants du logo : le logo en grand, l'histoire à côté --- */
.story {
    background-color: var(--crumb);
}

.story__inner {
    display: grid;
    grid-template-columns: var(--story-logo-size) 1fr;
    align-items: center;
    gap: var(--space-2xl);
}

.story__inner--text-only {
    grid-template-columns: 1fr;
}

.story__medallion img {
    display: block;
    width: var(--story-logo-size);
    height: var(--story-logo-size);
}

.story__title {
    margin: var(--space-3xs) 0 var(--space-md);
    font-size: var(--display-story);
}

.story__content p:not(.script) {
    margin-bottom: var(--space-sm);
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .story__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-xl);
        text-align: center;
    }

    .story__content p {
        margin-inline: auto;
    }
}

/* --- Savoir-faire : une constellation, du pétrin au comptoir --- */
.constellation {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--constellation-min), 1fr));
    gap: var(--space-md);
    text-align: center;
}

/* Le fil pointillé qui relie les étoiles */
.constellation::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: calc(var(--constellation-star) / 2);
    border-top: var(--border-width-strong) dashed var(--wheat-line);
}

.constellation__step {
    position: relative;
}

.constellation__step:nth-child(even) {
    margin-top: var(--constellation-step);
}

.constellation__star {
    position: relative;
    display: block;
    width: var(--constellation-star);
    height: var(--constellation-star);
    margin: 0 auto var(--space-sm);
    border-radius: var(--radius-full);
    background-color: var(--night);
    color: var(--wheat);
    filter: var(--glow-star);
}

.constellation__title {
    color: var(--white);
    font-size: var(--text-xl);
}

.constellation__text {
    margin: var(--space-3xs) auto 0;
    color: var(--crumb);
    font-size: var(--text-sm);
}

@media (max-width: 640px) {
    .constellation {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .constellation::before {
        left: 50%;
        right: auto;
        top: var(--space-sm);
        bottom: var(--space-sm);
        border-top: 0;
        border-left: var(--border-width-strong) dashed var(--wheat-line);
    }

    .constellation__step:nth-child(even) {
        margin-top: 0;
    }

    /* Le texte passe sur le fil : un fond de nuit le dégage */
    .constellation__title,
    .constellation__text {
        position: relative;
        width: fit-content;
        margin-inline: auto;
        padding-inline: var(--space-2xs);
        background-color: var(--night);
    }
}

/* --- Galerie de l'accueil : cinq médaillons, un sur deux décalé comme des astres --- */
.orbit {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    gap: var(--space-lg);
}

.orbit__item:nth-child(even) {
    margin-top: var(--space-xl);
}

.orbit__item img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    object-fit: cover;
    box-shadow: var(--ring-story);
}

@media (max-width: 640px) {
    .orbit {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
    }

    .orbit__item {
        width: calc((100% - 2 * var(--space-md)) / 3);
    }

    .orbit__item:nth-child(even) {
        margin-top: 0;
    }
}

/* --- Page Galerie : photos aux coins doux et double anneau, une colonne sur deux décalée comme des étoiles --- */
.gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    padding-bottom: var(--space-xl);
}

.gallery__item {
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-tile);
}

.gallery__item:nth-child(even) {
    transform: translateY(var(--space-xl));
}

.gallery__item:focus-visible {
    outline-offset: var(--space-2xs);
}

.filters {
    justify-content: center;
    margin-bottom: var(--space-xl);
}

/* Sans JS, les filtres de la Galerie ne feraient rien : ils n'apparaissent qu'avec le script (classe .js posée dans le <head>) */
html:not(.js) .filters {
    display: none;
}

@media (max-width: 900px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

/* --- Avis : cartes farine aux angles doux --- */
.card,
.testimonial {
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--color-card);
    box-shadow: var(--shadow-sm);
}

.testimonial__rating {
    color: var(--color-action);
}

/* --- Appel à l'action : centré, accent manuscrit, bouton ciel --- */
.cta {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--color-text);
    text-align: center;
}

.cta__title {
    margin: var(--space-3xs) 0 var(--space-sm);
    color: var(--color-text);
}

.cta__text {
    max-width: var(--text-max-cta);
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
}

/* --- En-têtes des autres pages : un morceau de ciel, bas arrondi en horizon --- */
.page-header {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-2xl) calc(var(--horizon-height-page) + var(--space-xl));
}

.page-header::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -1px;
    height: var(--horizon-height-page);
    background-color: var(--color-background);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.page-header .container {
    position: relative;
    z-index: var(--z-raised);
}

.page-header__title {
    color: var(--white);
}

/* En-tête en deux parties : texte à gauche, visuel à droite (La carte, Notre histoire) */
.page-header__split {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-xl);
}

@media (max-width: 1100px) {
    .page-header__split {
        grid-template-columns: 1fr;
    }
}

/* Notre histoire : la grande photo en médaillon, le logo en petite lune */
.medallion--page {
    width: var(--medallion-page);
    margin-block: var(--space-sm);
}

@media (max-width: 1100px) {
    .medallion--page {
        justify-self: center;
    }
}

/* Chapitres de Notre histoire : photo ronde, une étincelle à côté */
.chapter .media-text__media {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: var(--chapter-photo);
}

.chapter .media-text__media img {
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    box-shadow: var(--ring-product);
}

.chapter__spark {
    position: absolute;
    top: 4%;
    right: 4%;
    width: var(--spark-lg);
    height: var(--spark-lg);
    color: var(--sky);
}

.section-head__intro {
    margin: var(--space-sm) auto 0;
    color: var(--color-text-muted);
}

.page-header__intro {
    color: var(--crumb);
}

/* --- Photos : coins doux, ombre légère --- */
.media-text__media img,
.cover img,
.gallery__item img,
.team__photo img,
.visit__map img {
    border-radius: var(--radius-media);
}

.media-text__content p {
    color: var(--color-text-muted);
}

.cover img {
    width: 100%;
    height: var(--cover-height);
    object-fit: cover;
    border-radius: 0;
}

/* --- Points forts (Notre histoire) : étoile blé dans un médaillon de ciel --- */
.features--center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg) var(--space-md);
    text-align: center;
}

.features--center .feature {
    flex: 1 1 var(--column-min-sm);
    max-width: var(--column-min-lg);
}

.features--center .feature__text {
    margin-inline: auto;
}

.feature::before {
    content: "✦";
    display: grid;
    place-items: center;
    width: var(--constellation-star);
    height: var(--constellation-star);
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-full);
    background-color: var(--sky);
    box-shadow: var(--ring-button-sky);
    color: var(--wheat);
    font-size: var(--text-xl);
}

.features--center .feature::before {
    margin-inline: auto;
}

/* --- Champs : coins doux, libellés en Quicksand gras, halo ciel --- */
.field label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.field input,
.field select,
.field textarea {
    min-height: var(--button-min-height);
    background-color: var(--color-card);
    border-color: var(--color-border-input);
    color: var(--color-text);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: var(--focus-halo), inset 0 0 0 var(--border-width) var(--color-focus);
}

.field--error input,
.field--error textarea,
.field--error select {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-error);
}

.field__error {
    font-weight: var(--weight-semibold);
}

/* « Les champs marqués d'un * sont obligatoires » (Ma commande, Contact) */
.form__required-note {
    margin-bottom: var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* --- Messages --- */
.notice {
    border-left-width: var(--border-width-notice);
    border-radius: var(--radius-md);
}

/* --- Boutons de filtre (galerie, La carte) : pilules à contour ciel --- */
.filters__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: var(--toggle-size);
    padding: 0 var(--space-md);
    border: 0;
    border-radius: var(--radius-full);
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-action);
    color: var(--color-action);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    white-space: nowrap;
}

.filters__button:hover {
    background-color: var(--sky-tint);
    color: var(--night);
}

/* --- Équipe : portraits en médaillon, centrés --- */
.team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
    text-align: center;
}

.team__member {
    width: var(--team-photo);
}

.team__photo img {
    border-radius: var(--radius-full);
    box-shadow: var(--ring-story);
}

.team__name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-heading);
}

/* --- Contact : plan + infos, horaires jour par jour, formulaire --- */
.visit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.visit__map img {
    width: 100%;
    aspect-ratio: var(--map-ratio);
    object-fit: cover;
    box-shadow: var(--shadow-md);
}

.visit__info {
    display: grid;
    align-content: start;
    gap: var(--space-lg);
}

/* Cartes de la visite : adresse sur ciel étoilé, horaires sur mie */
.visit__card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-card);
}

.visit__card.sky .visit__title {
    color: var(--white);
}

.visit__card.sky .visit__address {
    color: var(--crumb);
}

.visit__card.sky .visit__address strong {
    color: var(--white);
}

.visit__card--hours {
    background-color: var(--crumb);
}

.visit--no-map .visit__info {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
}

.visit__title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-2xl);
}

.visit__address {
    margin-bottom: var(--space-md);
    font-style: normal;
    color: var(--color-text-muted);
}

/* Horaires de la semaine : jours et heures reliés par des pointillés */
.week-hours {
    display: grid;
    gap: var(--space-3xs);
}

.week-hours__row,
.opening-hours__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    padding-block: var(--space-3xs);
    font-variant-numeric: tabular-nums;
}

.week-hours__row::after,
.opening-hours__row::after {
    content: "";
    flex: 1;
    order: 1;
    border-bottom: var(--border-width-strong) dotted var(--input-line);
}

.site-footer .opening-hours__row::after {
    border-bottom-color: var(--wheat-line);
}

.week-hours__row dd,
.opening-hours__row dd {
    order: 2;
}

.week-hours__row dt {
    font-weight: var(--weight-semibold);
}

.week-hours__row dd {
    color: var(--color-text-muted);
}

.week-hours__row--today dt,
.week-hours__row--today dd {
    color: var(--color-text);
    font-weight: var(--weight-bold);
}

.week-hours__note {
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.contact-form__intro {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
}

.contact-form__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Le formulaire posé sur une carte blanche, sur le fond mie de la section */
.contact-form__card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-card);
    background-color: var(--color-card);
    box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
    .visit__card,
    .contact-form__card {
        padding: var(--space-lg) var(--space-md);
    }

    .visit__card .button-group {
        display: grid;
    }
}

@media (max-width: 900px) {
    .visit,
    .visit--no-map .visit__info,
    .contact-form {
        grid-template-columns: 1fr;
    }
}

/* --- Pied de page étoilé : le logo, les coordonnées, les horaires --- */
.site-footer {
    margin-top: 0;
    padding-top: var(--space-2xl);
    color: var(--color-footer-text);
}

/* Logo, puis les colonnes du socle (coordonnées, horaires, menu s'il existe) */
.site-footer__grid {
    grid-auto-flow: column;
    grid-template-columns: auto;
    grid-auto-columns: 1fr;
    gap: var(--space-xl);
}

.site-footer__logo {
    display: inline-block;
}

.site-footer__logo img {
    display: block;
    width: var(--footer-logo-size);
    height: var(--footer-logo-size);
}

.site-footer__name {
    color: var(--white);
    font-size: var(--text-xl);
}

.site-footer__title,
.contact-details__title,
.opening-hours__title {
    color: var(--crumb);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.site-footer a {
    color: var(--white);
}

.site-footer a:hover {
    color: var(--crumb);
    text-decoration: underline;
}

.site-footer__text,
.site-footer address,
.opening-hours__note,
.site-footer__bottom {
    color: var(--crumb);
}

.site-footer__bottom {
    margin-top: var(--space-xl);
    border-top-color: var(--wheat-line);
    font-size: var(--text-xs);
}

@media (max-width: 900px) {
    .site-footer__grid {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }
}

/* --- Pagination WordPress --- */
.pagination .page-numbers {
    border-color: var(--color-action);
    border-radius: var(--radius-full);
    color: var(--color-action);
}

/* =========================================
   ANIMATIONS LÉGÈRES (D-034) — seulement si le visiteur n'a pas demandé de réduire les animations.
   Apparition au défilement : assets/js/motion.js pose html.has-motion et [data-reveal], puis .is-revealed.
   On anime `translate` (et non `transform`) pour ne pas écraser les décalages existants (galerie, pastilles).
   ========================================= */
@media (prefers-reduced-motion: no-preference) {
    .has-motion [data-reveal] {
        opacity: 0;
        translate: 0 var(--reveal-shift);
        transition:
            opacity var(--reveal-duration) var(--ease-soft) var(--reveal-delay, 0ms),
            translate var(--reveal-duration) var(--ease-soft) var(--reveal-delay, 0ms);
    }

    .has-motion [data-reveal].is-revealed {
        opacity: 1;
        translate: none;
    }

    /* Les étoiles du ciel scintillent doucement, chacune à son rythme */
    .spark,
    .product-card__spark,
    .menu-group__spark,
    .quote__spark,
    .chapter__spark {
        animation: mt-twinkle var(--twinkle-duration) var(--ease-loop) infinite;
    }

    .spark--2,
    .product-card__spark--small,
    .menu-group__spark:last-child,
    .quote__spark:last-child {
        animation-delay: calc(var(--twinkle-duration) / -2);
    }

    .spark--3 {
        animation-delay: calc(var(--twinkle-duration) / -4);
    }

    /* Les petits médaillons flottent comme le pain et le croissant du logo */
    .moon {
        animation: mt-float var(--float-duration) var(--ease-loop) infinite;
    }

    .moon--2 {
        animation-delay: calc(var(--float-duration) / -2);
    }

    /* Ajout au panier : le « + » et le compteur font un petit rebond */
    .add-button.is-added,
    .cart-button__count.is-bumped {
        animation: mt-pop var(--pop-duration) var(--ease-soft);
    }
}

@keyframes mt-twinkle {
    0%, 100% { opacity: 1; scale: 1; }
    50% { opacity: var(--twinkle-dim); scale: var(--twinkle-scale); }
}

@keyframes mt-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 var(--float-shift); }
}

@keyframes mt-pop {
    0%, 100% { scale: 1; }
    40% { scale: var(--pop-scale); }
}

/* Impression : les blocs pas encore apparus au défilement s'impriment aussi */
@media print {
    .has-motion [data-reveal] {
        opacity: 1;
        translate: none;
    }
}