/* ===========================================================================
   EasyStore — Catalogue publié (/app/boutique/catalogue), lot 23 : l'image.

   LA FENÊTRE DE PUBLICATION MONTRE L'IMAGE DE L'ARTICLE ET LES DEUX GESTES QUI LA
   TIENNENT — déposer (ou remplacer), retirer. Les gestes sont des boutons du gabarit
   (.mx-btn), qui portent déjà la cible tactile de 44 px sous 1024 px ; cette feuille
   ne dessine que l'aperçu et range la ligne.

   AUCUNE COULEUR LITTÉRALE : tout vient des jetons, le thème sombre suit.
   =========================================================================== */

.bqi-image {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

/* L'aperçu tient l'image ENTIÈRE (contain) : c'est la vitrine qui la recadre en carte. */
.bqi-apercu {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
    padding: 3px;
}

/* Le cadre en attente : le pictogramme reste pâle, il dit ce qui manque sans le réclamer. */
.bqi-apercu.est-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--et-inerte);
    font-size: 22px;
}

.bqi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--et-outils-gap);
}

/* Le <label> EST la commande : InputFile rend un champ de fichier, que ce libellé recouvre. */
.bqi-depot input[type="file"] { display: none; }

/* Les deux gestes à la MÊME hauteur : le <label> de dépôt hérite de la grille de formulaire la marge
   basse d'un libellé de champ, et le <button> voisin s'étirait sur cette ligne plus haute (63 px contre
   44 relevés au banc). La cible de 44 px vaut pour l'un comme pour l'autre. */
.bqi-actions { align-items: center; }
.bqi-actions .mx-btn {
    margin: 0;
    white-space: nowrap;
    min-height: 44px;
}

/* ---------------------------------------------------------------------------
   Lot 25 — la galerie : huit images au plus, chacune avec ses trois gestes
   (avancer, reculer, retirer) sous sa vignette, et « Ajouter » en bout de rangée.
   --------------------------------------------------------------------------- */
.bqi-galerie {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.bqi-vignette {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.bqi-vignette .bqi-actions { gap: 4px; }
.bqi-vignette .mx-btn-ico { width: 44px; justify-content: center; }
.bqi-galerie > .bqi-depot { margin: 0; min-height: 44px; white-space: nowrap; }