.moment-carousel {
    min-width: 0;
    overflow: hidden;
    padding: 7px;
}

.moment-topline,
.seller-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 3px 6px 5px;
}

.moment-topline h2,
.seller-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--home-green-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 0.95rem + 0.45vw, 1.35rem);
    line-height: 1;
}

.moment-topline h2::before,
.seller-head h2::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--home-terra);
    box-shadow: 0 0 0 4px rgba(200, 97, 56, 0.1);
}

.home-carousel-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.home-carousel-control {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--home-line);
    border-radius: 50%;
    color: var(--home-green);
    background: #fff;
    cursor: pointer;
}

.home-carousel-control:hover {
    color: #fff;
    background: var(--home-terra);
}

.home-carousel-control .ui-icon {
    width: 17px;
    height: 17px;
}

.home-carousel-pause {
    width: auto;
    min-width: 52px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.home-carousel-count {
    min-width: 42px;
    color: var(--home-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.moment-viewport {
    min-width: 0;
    overflow: hidden;
    border-radius: 13px;
}

.moment-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 7px;
    overflow-x: auto;
    border-radius: 13px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

.moment-track::-webkit-scrollbar {
    display: none;
}

.moment-offer {
    min-width: 0;
    min-height: 92px;
    display: grid;
    grid-template-columns: minmax(76px, 38%) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(37, 63, 45, 0.1);
    border-radius: 13px;
    color: var(--home-ink);
    background: #fff;
    scroll-snap-align: start;
    text-decoration: none;
}

.moment-media {
    min-width: 0;
    overflow: hidden;
    background: var(--home-paper-2);
}

.moment-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 360ms ease;
}

.moment-offer:hover .moment-image,
.moment-offer:focus-visible .moment-image {
    transform: scale(1.05);
}

.moment-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
}

.moment-availability {
    overflow: hidden;
    color: var(--home-terra-dark);
    font-size: clamp(0.54rem, 1.8vw, 0.7rem);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moment-info strong {
    display: -webkit-box;
    overflow: hidden;
    margin: 5px 0;
    color: var(--home-green-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.75rem, 2.6vw, 1.02rem);
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.moment-price {
    color: var(--home-green);
    font-size: clamp(0.7rem, 2.2vw, 0.88rem);
    font-weight: 700;
}

.moment-info small {
    overflow: hidden;
    margin-top: 3px;
    color: var(--home-muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 739px) {
    .home-carousel-control {
        min-width: 42px;
        min-height: 42px;
    }

    .home-carousel-pause {
        min-width: 48px;
        padding-inline: 6px;
        font-size: 0.7rem;
    }
}

/* DEUX CARTES PAR ECRAN DE TELEPHONE, C'ETAIT UNE DE TROP — ET C'EST LA CAUSE
 * DU DEFAUT QUE JULIEN A VU (09/09) : « Sai / nt- / Ma », un nom de commune
 * coupe en trois lignes de trois lettres.
 *
 * L'ADDITION, A 390 POINTS DE LARGE. La coque laisse 374 au contenu, le bandeau
 * en reprend 14 de respiration : 360. Deux cartes et leur gouttiere de 7 :
 * 176,5 chacune. La photo en occupe 112 EN DUR, la respiration de la colonne
 * texte 24 — il reste QUARANTE POINTS pour ecrire. La ligne de commune y pose
 * d'abord son picto (`--ui-icon-xs` vaut 5vw, soit 19,5 a cette largeur) et sa
 * gouttiere de 5 : SEIZE POINTS pour le nom. A .76rem sur une racine de 14, ca
 * fait trois caracteres par ligne.
 *
 * On repasse donc a UNE carte par ecran sous 560, avec quarante points de la
 * suivante qui depassent — l'aveu de defilement, le meme geste que le degrade
 * de la rangee de filtres. La colonne texte passe de 40 a 184 points : le nom
 * de commune tient en entier, et le nom du produit aussi.
 *
 * DEUX CARTES REVIENNENT A 560, ou 260 points de carte laissent 124 au texte. */
@media (min-width: 560px) {
    .moment-track {
        grid-auto-columns: calc((100% - 7px) / 2);
    }
}

@media (max-width: 559px) {
    .moment-track {
        grid-auto-columns: calc(100% - 40px);
    }
}

@media (min-width: 740px) {
    .moment-carousel {
        padding: 8px;
    }

    .moment-track {
        grid-auto-columns: calc((100% - 16px) / 3);
        gap: 8px;
    }

    .moment-offer {
        min-height: 108px;
        grid-template-columns: minmax(110px, 31%) minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .moment-track {
        grid-auto-columns: calc((100% - 24px) / 4);
    }
}

@media (min-width: 1220px) {
    .moment-offer {
        min-height: 118px;
        grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    }
}

@media (min-width: 1600px) {
    .moment-track {
        grid-auto-columns: calc((100% - 32px) / 5);
    }
}


/* La distance de la carte du moment.
 *
 * Elle se lit d'un coup d'oeil ou elle ne sert a rien : meme graisse que la
 * disponibilite, jamais plus forte que le prix. C'est un repere, pas un
 * argument. */
.moment-distance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* SANS CE ZERO, LA LIGNE NE PEUT PAS RETRECIR — elle deborde ou elle
       casse. La taille minimale automatique d'un element flexible vaut son
       contenu ; a zero, elle rend la main a l'ellipse ci-dessous. */
    min-width: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: .76rem;
    font-weight: 600;
}

/* LE NOM DE COMMUNE TIENT SUR UNE LIGNE OU IL S'ABREGE — JAMAIS ENTRE DEUX
 * LETTRES.
 *
 * Le palier ci-dessus rend la place ; cette regle-ci est la garantie, et les
 * deux sont necessaires. Le texte etait un NOEUD NU dans un conteneur
 * flexible : le navigateur en fait un element anonyme qu'aucun selecteur
 * n'atteint, donc qu'aucune regle ne pouvait proteger. On le nomme
 * (moment_carousel.html), et on lui interdit le retour a la ligne.
 *
 * L'ELLIPSE PLUTOT QUE LA COUPE : « Saint-Marcel-les... » se lit et se
 * reconnait ; « Sai / nt- / Ma » ne dit rien et prend trois lignes pour ne
 * rien dire. Le titre complet reste sur la fiche, a un doigt. */
.moment-distance__mot {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moment-distance .ui-icon {
    color: var(--ui-color-brand, #245A3B);
    opacity: .8;
}

/* =====================================================================
 * LE CHROME DU BANDEAU, AU POUCE (H-8-bis)
 *
 * Julien : « il faut scroller pour comprendre ». Le hero n'etait qu'un des
 * deux coupables. Avant la premiere carte, ce bandeau empilait un titre, un
 * GROS bouton de position, une rangee de fleches avec compteur et bouton
 * Pause, puis une phrase de contexte — environ un quart de la vue.
 *
 * Rien n'est supprime au desktop. Au pouce, trois resserrages :
 *
 *   1. Le bouton de position redevient une PASTILLE. Il etait un appel a
 *      l'action pleine taille, en concurrence directe avec le selecteur de
 *      lieu de l'en-tete, qui est la voie principale. Un doublon geant dans
 *      une section n'est pas une commodite, c'est une hesitation.
 *   2. Les fleches passent EN LIGNE avec le titre, et le bouton Pause s'en
 *      va — un carrousel qu'on fait defiler du doigt n'a pas besoin qu'on
 *      l'arrete, il s'arrete quand on le touche.
 *   3. La phrase de contexte SAUTE : « la saison, les nouveautes, ce qui sort
 *      des fermes maintenant » redit le titre « Les produits du moment ».
 *      Elle revient des qu'une ville est connue, parce qu'alors elle apporte
 *      quelque chose : le nom du lieu.
 * ===================================================================== */

@media (max-width: 739px) {
    .moment-topline {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .moment-topline h2 {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* LA PASTILLE DE POSITION DISPARAIT AU POUCE. Quatre objets sur la
       rangee — titre, pastille, deux fleches — dans 393px : un de trop, et
       celui-ci ne COMMANDE rien, il indique. Les fleches et le defilement
       au doigt suffisent a dire qu il y a une suite. */
    .moment-position {
        display: none;
        flex: 0 0 auto;
        min-height: 0;
        padding: 5px 10px;
        border-radius: var(--ui-radius-chip, 999px);
        font-size: .72rem;
    }

    .moment-position span {
        /* Le libelle complet reste pour le lecteur d'ecran ; a l'oeil,
           l'epingle suffit — la pastille est a cote du titre qui dit deja de
           quoi il s'agit. */
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .home-carousel-controls {
        flex: 0 0 auto;
        gap: 2px;
    }

    .home-carousel-count,
    .home-carousel-pause {
        display: none;
    }

    /* La phrase de contexte ne se rend que si elle apporte le nom d'un lieu.
       Sans ville connue, elle paraphrase le titre. */
    .moment-contexte {
        display: none;
    }

    /* ------------------------------------------------------------------
     * LE BANDEAU RESSERRE, POUR QUE LES RUBRIQUES ENTRENT DANS LE PREMIER
     * ECRAN.
     *
     * Ce bandeau est le dernier objet avant les rubriques : chaque pixel qu'il
     * prend, elles le perdent. A 375x667, le libelle de la premiere rubrique
     * tombait a 702px avec une carte, a 742px sur l'etat vide — soit hors de la
     * vue dans les deux cas.
     *
     * Rien de ce qui suit ne retire une information : ce sont des respirations
     * et un corps de texte. La carte garde ses cinq lignes, l'etat vide garde
     * sa phrase et son appel.
     * ------------------------------------------------------------------ */

    .moment-topline {
        padding-bottom: 4px;
    }

    /* QUARANTE-QUATRE PIXELS POUR LOGER DES BOUTONS QUI N'EXISTENT PAS.
     *
     * La hauteur minimale de cette ligne est taillee pour les fleches du
     * carrousel, qui mesurent 42px. Quand le bandeau n'a aucune offre a faire
     * defiler, il n'a pas de fleches — et la ligne garde quand meme sa hauteur
     * de bouton, pour n'y loger qu'un titre de seize pixels.
     *
     * C'est precisement la branche que sert la production aujourd'hui, celle ou
     * chaque pixel decide si les rubriques entrent dans le premier ecran. Vingt
     * -huit pixels laissent au titre tout l'air dont il a besoin. */
    .moment-topline:not(:has(.home-carousel-controls)) {
        min-height: 28px;
    }

    .moment-info {
        padding: 7px;
    }

    .moment-info strong {
        margin: 3px 0;
    }

    /* L'etat vide est la branche la plus HAUTE des deux — et c'est celle que
       sert la production aujourd'hui, ou aucune offre n'est publiee. C'est donc
       elle qui decide si les rubriques se voient. Le cadre se resserre, le
       texte descend d'un cran : a 375px il tenait deja en deux lignes, il y
       tient toujours. */
    .moment-vide {
        padding: 12px;
        font-size: .8rem;
    }

    .moment-vide__lien {
        margin-top: 8px;
    }

    .moment-contexte:has([data-locate-city]) {
        display: block;
        margin: 4px 0 10px;
        font-size: .78rem;
    }
}

/* ---- LA CARTE FIXE SA HAUTEUR, ET TOUTES LES PHOTOS REMPLISSENT LA MEME CASE.
 *
 * `min-height` seul laissait une photo haute (une bouteille) etirer la carte :
 * on pose donc la hauteur. Jusqu'au 05/09 l'image s'y rangeait « entiere »
 * (object-fit: contain, marges) : une bouteille laissait deux bandes blanches,
 * un paysage remplissait la case — huit cartes, huit cadrages. Julien : « les
 * images ne sont pas ajustees dans les cards toutes de la meme maniere ».
 * Meme cadrage pour toutes : la photo COUVRE sa case, centree ; ce qu'elle
 * perd en bord se retrouve entier sur la fiche. La colonne image est fixe
 * (pas un pourcentage) pour que les huit cases soient identiques. */
.moment-offer {
    height: 112px;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
}

.moment-media {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--home-paper-2);
}

.moment-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    padding: 0;
}

.moment-info {
    padding: 10px 12px;
}

@media (min-width: 768px) {
    .moment-offer {
        height: 124px;
        grid-template-columns: 124px minmax(0, 1fr);
    }
}

@media (min-width: 1220px) {
    .moment-offer {
        height: 136px;
        grid-template-columns: 136px minmax(0, 1fr);
    }
}