.catalog-filter-form {
    display: grid;
    gap: var(--catalog-filter-gap, 10px);
    margin: var(--catalog-filter-margin, 0);
    padding: var(--catalog-filter-padding, 12px);
    border: 1px solid var(--catalog-filter-border, var(--line));
    border-radius: var(--catalog-filter-radius, var(--radius));
    background: var(--catalog-filter-bg, var(--surface));
    box-shadow: var(--catalog-filter-shadow, var(--shadow-soft));
}

.catalog-filter-form label {
    display: grid;
    gap: var(--catalog-filter-label-gap, 5px);
}

.catalog-filter-form label span {
    color: var(--catalog-filter-label-color, var(--muted));
    font-size: var(--catalog-filter-label-size, .75rem);
    font-weight: var(--catalog-filter-label-weight, 850);
}

.catalog-filter-form input,
.catalog-filter-form select {
    width: 100%;
    min-height: var(--catalog-filter-control-height, 40px);
    border: 1px solid var(--catalog-filter-control-border, var(--line));
    border-radius: var(--catalog-filter-control-radius, 10px);
    background: var(--catalog-filter-control-bg, var(--surface));
    color: var(--catalog-filter-control-color, var(--text));
    font-size: var(--catalog-filter-control-size, .85rem);
    font-weight: var(--catalog-filter-control-weight, 760);
}

.catalog-filter-form button,
.catalog-pagination a {
    display: inline-flex;
    min-height: var(--catalog-action-height, 40px);
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--catalog-action-radius, 10px);
    background: var(--catalog-action-bg, var(--primary));
    color: var(--catalog-action-color, var(--cream));
    font-size: var(--catalog-action-size, .85rem);
    font-weight: 700;
    cursor: pointer;
}

.catalog-filter-form button:hover,
.catalog-pagination a:hover {
    text-decoration: none;
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--catalog-pagination-padding, 8px 0 0);
}

.catalog-pagination > span {
    color: var(--catalog-pagination-color, var(--muted));
    font-size: var(--catalog-pagination-size, .75rem);
    font-weight: var(--catalog-pagination-weight, 800);
}

.catalog-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: var(--catalog-empty-padding, 24px 16px);
    border: 1px solid var(--catalog-empty-border, var(--line));
    border-radius: var(--catalog-empty-radius, var(--radius));
    background: var(--catalog-empty-bg, var(--surface));
    text-align: center;
    box-shadow: var(--catalog-empty-shadow, var(--shadow-soft));
}

.catalog-empty__icon {
    display: inline-flex;
    width: var(--catalog-empty-icon-size, 48px);
    height: var(--catalog-empty-icon-size, 48px);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--catalog-empty-icon-bg, var(--brand-soft));
    color: var(--catalog-empty-icon-color, var(--brand));
}

.catalog-empty strong {
    color: var(--catalog-empty-title-color, var(--text));
    font-size: var(--catalog-empty-title-size, 1rem);
    font-weight: 700;
}

.catalog-empty p {
    max-width: 44ch;
    margin: 0;
    color: var(--catalog-empty-text-color, var(--muted));
    font-size: var(--catalog-empty-text-size, .85rem);
    font-weight: 600;
}

/* ---- UNE PHOTO DE PRODUIT SE MONTRE EN ENTIER — la regle, a UN endroit.
 *
 * Les Filles de Septembre, septembre 2026 : « bouteille : format photo ne
 * fonctionne pas pour moi ». Ses treize bouteilles etaient bien arrivees, en
 * 3 000 x 4 000. C'est leur CADRAGE qui ne marchait pas : la photo principale
 * de sa fiche (4/3), les vignettes de « Mon catalogue » et les « Autres
 * photos » (1/1) recadraient en `cover`, et une bouteille, haute et etroite,
 * y perdait goulot et pied — la ou elle venait de la poser. La regle « en
 * entier » existait, mais recopiee dans trois feuilles publiques et absente
 * des ecrans du pro.
 *
 * FOND BLANC, PAS CREME. Les photos de bouteilles sont des etiquettes sur fond
 * blanc (les treize du domaine, verifiees pixel a pixel) : sur un cadre creme
 * elles se detachaient en rectangle blanc. Sur un fond blanc, marge et fond de
 * photo se confondent, il ne reste que la bouteille.
 *
 * Chaque ecran garde la GEOMETRIE de son cadre (proportion, marge) ; le
 * cadrage et le fond ne vivent qu'ici. Une photo de SCENE (book, accueil,
 * univers, carrousel de l'accueil) ne porte pas cette classe et couvre sa case.
 * Aucune media query : la regle vaut du telephone au bureau. */
.ui-photo-produit {
    object-fit: contain;
    object-position: center;
    background: var(--ui-fond-photo-produit, #FFFFFF);
}