/* Vitrine globale Agri Péi — rayons, sous-rayons, annuaire.
 *
 * Feuille sobre et AUTONOME, chargée en dernier, sur le modèle de
 * admin-agripei.css. Elle ne concerne que les pages de agripei.re sans
 * sous-domaine : rien ici ne peut atteindre la boutique d'un producteur, tout
 * est porté par .agri-vitrine-globale.
 *
 * Elle n'ajoute volontairement que ce qui manque. Cartes, grille et barres de
 * rayons réutilisent les classes du catalogue producteur, déjà stylées par
 * catalogue-categories.css et agripei-design-system.css.
 *
 * Palette reprise de data/marques.js : #28643C / #FAF8F0 / #173524.
 */

.agri-vitrine-globale .agri-recherche {
  display: flex;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto 28px;
}

.agri-vitrine-globale .agri-recherche input {
  flex: 1;
  padding: 13px 14px;
  border: 1px solid #b7c8b9;
  border-radius: 10px;
  font: inherit;
  color: #173524;
  background: #fff;
}

.agri-vitrine-globale .agri-recherche input:focus-visible {
  outline: 2px solid #28643c;
  outline-offset: 1px;
}

/* Provenance : la ligne la plus importante de la carte après le prix, mais elle
 * ne doit pas concurrencer le nom du produit. */
.agri-vitrine-globale .agri-provenance {
  margin: 2px 0 8px;
  font-size: .86rem;
  font-style: italic;
  color: #4d6b53;
}

/* En vitrine, le paiement se fait chez le producteur : le dire discrètement
 * mais lisiblement, parce que le prix affiché est celui d'Agri Péi. */
.agri-vitrine-globale .agri-vitrine-note {
  margin: 6px 0 10px;
  font-size: .8rem;
  color: #5d7a63;
}

.agri-vitrine-globale .agri-vitrine-lien {
  display: inline-block;
  text-align: center;
}

/* Carte de producteur dans l'annuaire : pas de photo, donc le contenu doit
 * tenir seul sans laisser un bloc image vide. */
.agri-vitrine-globale .agri-producteur-card .agri-card-content {
  padding: 22px;
}

/* Marque sans logo : Agri Péi n'a pas encore le sien, et le nom porte seul.
 * Sans cette règle, l'espace réservé à l'image laisse un vide à gauche du nom. */
.agri-vitrine-globale .commerce-brand-sans-logo {
  gap: 0;
}

.agri-vitrine-globale .commerce-brand-sans-logo img {
  display: none;
}

/* ================= Lot G4-2a-1, 04/08/2026 — deux boutiques =================
 * Ajouts en fin de feuille, sans toucher une règle existante. Tout reste porté
 * par .agri-vitrine-globale : rien ne peut atteindre la boutique d'un producteur.
 */

/* --- Les portes de l'accueil --------------------------------------------- */

/* L'accueil ne vend rien, il oriente. Ces cartes doivent donc peser plus lourd
 * que celles de l'annuaire en dessous, sinon on ne voit pas où entrer. */
.agri-portes {
  margin: 0 0 40px;
}

.agri-portes h2 {
  margin: 0 0 16px;
  font-size: 1.45rem;
  text-align: center;
}

.agri-porte {
  border-color: #28643c !important;
  border-width: 2px !important;
}

.agri-porte h2 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  color: #28643c;
  text-align: left;
}

.agri-porte p {
  margin: 0 0 16px;
  line-height: 1.5;
}

.agri-annuaire-titre {
  margin: 0 0 18px;
  font-size: 1.35rem;
  text-align: center;
}

/* --- Le Marché ----------------------------------------------------------- */

/* La carte du Marché n'a PAS de note « paiement chez le producteur » : ici c'est
 * Agri Péi qui prend la commande. La provenance reste une information, jamais
 * une porte de sortie — d'où l'absence de tout lien vers la boutique du
 * producteur dans cette carte. */
.agri-vitrine-globale .agri-marche-card .agri-provenance {
  margin-bottom: 10px;
}

/* Tant que le panier n'est pas ouvert (lot G4-2a-2), on le dit à la place du
 * bouton. Un bouton menant à une route inexistante serait pire. */
.agri-vitrine-globale .agri-marche-bientot {
  display: inline-block;
  font-size: .82rem;
  font-style: italic;
  color: #5d7a63;
  background: #f2f6f2;
  border: 1px dashed #cddccd;
  border-radius: 8px;
  padding: 9px 14px;
}

/* ============ Lot G4-2a-2, 04/08/2026 — le panier du Marché ============
 * Ajouts en fin de feuille, sans toucher une règle existante.
 */

/* Le panier est GROUPÉ PAR PRODUCTEUR, et ce n'est pas décoratif : la commande
 * sera découpée ainsi. Le groupe doit donc se lire comme un bloc, pas comme un
 * simple intertitre. */
.agri-vitrine-globale .agri-panier-groupe {
  background: #fff;
  border: 1px solid #dfe7dd;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 18px;
}

.agri-vitrine-globale .agri-panier-groupe > header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #eef2ee;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.agri-vitrine-globale .agri-panier-groupe h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #28643c;
}

.agri-vitrine-globale .agri-panier-groupe > header span {
  font-size: .88rem;
  color: #5d7a63;
}

.agri-vitrine-globale .agri-panier-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agri-vitrine-globale .agri-panier-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f2f6f2;
}

.agri-vitrine-globale .agri-panier-ligne:last-child { border-bottom: 0; }

/* ⚠️ `imageProduit` NE RENVOIE PAS UNE SIMPLE BALISE <img>.
 * Elle produit un <button class="agri-image-button"> contenant une
 * <img class="agri-thumb"> dont la taille est fixée dans une AUTRE feuille
 * (catalogue-categories.css / agripei-design-system.css). Fixer seulement la
 * largeur du conteneur ne contraint donc rien : l'image débordait par-dessus le
 * nom et le prix, constaté à l'écran le 04/08 — on lisait « 00 € / Kg » au lieu
 * de « 5,00 € / Kg ».
 *
 * Il faut contraindre les TROIS niveaux : le conteneur, le bouton, et l'image.
 * Le `!important` sur la largeur de l'image n'est pas un raccourci : la règle
 * concurrente est écrite dans une feuille chargée avant celle-ci mais avec une
 * spécificité au moins égale, et c'est le cas que le document de fondation
 * signale comme « certaines tailles ne peuvent pas être surpassées proprement ».
 */
.agri-vitrine-globale .agri-panier-vignette {
  width: 72px;
  flex: 0 0 72px;
  min-width: 0;
  overflow: hidden;
}

.agri-vitrine-globale .agri-panier-vignette .agri-image-button {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.agri-vitrine-globale .agri-panier-vignette img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

/* Un produit sans photo : le carré doit occuper la même place, sinon la ligne se
 * décale selon que la photo existe ou non. */
.agri-vitrine-globale .agri-panier-vignette .agri-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: #eef2ee;
  font-size: 1.4rem;
}

.agri-vitrine-globale .agri-panier-corps {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agri-vitrine-globale .agri-panier-unite {
  font-size: .86rem;
  color: #5d7a63;
}

/* Une quantité ramenée au stock disponible doit se voir : sinon la cliente croit
 * s'être trompée en saisissant. */
.agri-vitrine-globale .agri-panier-ajuste {
  font-size: .8rem;
  color: #8a5a12;
  background: #fdf3e0;
  border-radius: 4px;
  padding: 2px 6px;
  align-self: flex-start;
}

.agri-vitrine-globale .agri-panier-quantite label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .86rem;
  color: #3f5145;
}

.agri-vitrine-globale .agri-panier-quantite select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid #cdd8d0;
  border-radius: 6px;
  background: #fff;
}

.agri-vitrine-globale .agri-panier-total {
  font-weight: 700;
  min-width: 84px;
  text-align: right;
}

.agri-vitrine-globale .agri-panier-retirer {
  color: #8a2020;
  font-size: .86rem;
}

/* Ce que la cliente doit comprendre avant de continuer : sa commande sera
 * découpée, mais le retrait sera unique.
 *
 * ⚠️ `display: block` EXPLICITE. Sans lui, le pied héritait d'une disposition en
 * ligne venue d'une feuille parente : le total, l'explication et « Vider mon
 * panier » se retrouvaient côte à côte, et le bouton destructeur finissait aligné
 * avec le montant qu'on vient de vérifier. On ne met pas « vider » à côté du
 * chiffre. Constaté à l'écran le 04/08. */
.agri-vitrine-globale .agri-panier-pied {
  display: block;
  background: #f4f8f4;
  border-radius: 14px;
  padding: 18px 20px;
}

/* Le bouton de vidage est mis à l'écart, sous un filet, et discret : c'est une
 * action rare et irréversible. */
.agri-vitrine-globale .agri-panier-pied form {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e2eae2;
}

.agri-vitrine-globale .agri-panier-somme {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.agri-vitrine-globale .agri-panier-note {
  margin: 0 0 12px;
  line-height: 1.5;
  color: #3f5145;
}

.agri-vitrine-globale .agri-panier-bientot {
  margin: 0 0 14px;
  font-size: .88rem;
  font-style: italic;
  color: #5d7a63;
}

/* Les lignes tombées depuis l'ajout. Ambre et non rouge : ce n'est pas une
 * erreur de la cliente, c'est l'inventaire qui a changé. */
.agri-vitrine-globale .agri-panier-retirees {
  border: 1px solid #e6d3a8;
  border-left: 4px solid #d8a72e;
  background: #fdf9ef;
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 20px;
}

.agri-vitrine-globale .agri-panier-retirees ul { margin: 8px 0 0; padding-left: 18px; }
.agri-vitrine-globale .agri-panier-retirees li { margin: 0 0 4px; }

.agri-vitrine-globale .agri-panier-actions { margin: 22px 0 0; }

@media (max-width: 640px) {
  .agri-vitrine-globale .agri-panier-total { text-align: left; min-width: 0; }
  .agri-vitrine-globale .agri-panier-ligne { gap: 10px; }
}