/* Boutique (AGRI-32). Variables : modules/charte/charte.css. Mobile d'abord. */

.ab-masque { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ab-boutique { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--ab-espace-2) var(--ab-espace-2) var(--ab-espace-3); font-family: var(--ab-police-texte); color: var(--ab-texte); }
.ast-container:has(> .ab-boutique) { display: block; max-width: none; padding: 0; }
.ab-fil { font-size: var(--ab-taille-petit); margin-bottom: var(--ab-espace-1); }
.ab-fil a { color: var(--ab-vert-fonce); }
.ab-boutique__titre { margin: 0; font: 600 clamp(1.75rem, 1.2rem + 2vw, 2.5rem)/1.2 var(--ab-police-titre); color: var(--ab-encre); }
.ab-boutique__accroche { margin: .5rem 0 var(--ab-espace-3); max-width: 60ch; font-size: 1.0625rem; }

.ab-boutique__corps { display: block; }
@media (min-width: 1025px) {
	.ab-boutique__corps { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--ab-espace-3); align-items: start; }
}

/* Filtres : feuille plein écran sur téléphone et tablette, colonne collante sur ordinateur */
.ab-filtres { display: none; }
.ab-filtres.ab-ouvert { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 10002; background: var(--ab-blanc); }
.ab-filtres__tete { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--ab-espace-2); border-bottom: 1px solid var(--ab-ligne); }
.ab-boutique h2.ab-filtres__titre { margin: 0; font: 600 1.125rem/1 var(--ab-police-titre); color: var(--ab-encre); }
.ab-filtres__form { flex: 1; overflow-y: auto; padding: var(--ab-espace-2); display: flex; flex-direction: column; gap: var(--ab-espace-2); }
.ab-filtres__pied { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--ab-espace-1); padding: var(--ab-espace-1) 0; margin-top: auto; background: var(--ab-blanc); }
html.ab-filtres-ouverts { overflow: hidden; }
@media (min-width: 1025px) {
	.ab-filtres { display: block; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
	.ab-filtres__tete { display: none; }
	.ab-filtres__form { padding: 0; }
	.ab-filtres__pied { position: static; grid-template-columns: 1fr; }
	.ab-filtres__voir { display: none; }
}

.ab-recherche input, .ab-prix input, .ab-tri select {
	width: 100%; min-height: var(--ab-cible); padding: 0 .75rem; border: 1px solid var(--ab-bordure-champ); border-radius: var(--ab-rayon);
	background: var(--ab-blanc); color: var(--ab-encre); font: 400 var(--ab-taille-texte)/1.2 var(--ab-police-texte);
}
.ab-filtre { margin: 0; padding: 0 0 var(--ab-espace-2); border: 0; border-bottom: 1px solid var(--ab-ligne); }
.ab-filtre legend { padding: 0; margin-bottom: .25rem; font: 600 1rem/1.3 var(--ab-police-titre); color: var(--ab-encre); }
.ab-case { display: flex; align-items: center; gap: .75rem; min-height: var(--ab-cible-serree); cursor: pointer; color: var(--ab-encre); }
.ab-case input { width: 22px; height: 22px; margin: 0; accent-color: var(--ab-vert-fonce); flex: 0 0 auto; }
.ab-case__lib { flex: 1; }
.ab-case__nb { min-width: 2rem; padding: 2px 8px; border-radius: 999px; background: var(--ab-fond); color: var(--ab-texte); font-size: var(--ab-taille-petit); text-align: center; }
.ab-case.ab-inactif { opacity: .5; }
.ab-prix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab-espace-1); }
.ab-prix label span { display: block; font-size: var(--ab-taille-petit); margin-bottom: .25rem; }

/* Barre de résultats */
.ab-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ab-espace-1); margin-bottom: var(--ab-espace-1); }
.ab-barre__filtrer { position: sticky; top: 72px; z-index: 5; }
.ab-barre__actifs[hidden] { display: none; }
.ab-barre__actifs { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: .25rem; border-radius: 11px; background: var(--ab-vert-fonce); color: var(--ab-blanc); font-size: 12px; }
.ab-barre__nb { margin: 0 auto 0 0; font-weight: 600; color: var(--ab-encre); }
.ab-tri { flex: 0 1 13rem; }
.ab-vue { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--ab-bordure-champ); border-radius: var(--ab-rayon); overflow: hidden; }
.ab-vue label { display: grid; place-items: center; width: var(--ab-cible); height: calc(var(--ab-cible) - 2px); cursor: pointer; color: var(--ab-texte); }
.ab-vue input { position: absolute; opacity: 0; pointer-events: none; }
.ab-vue label:has(input:checked) { background: var(--ab-encre); color: var(--ab-blanc); }
.ab-vue label:has(input:focus-visible) { outline: 3px solid var(--ab-encre); outline-offset: -3px; }
@media (min-width: 1025px) { .ab-barre__filtrer { display: none; } }
@media (max-width: 1024px) { .ab-barre { flex-wrap: nowrap; } .ab-barre__filtrer { flex: 0 0 auto; } .ab-tri { flex: 1 1 auto; min-width: 0; } .ab-barre__nb { order: 5; } }
@media (max-width: 1024px) { .ab-boutique .ab-barre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; } .ab-barre__nb { grid-column: 1 / -1; grid-row: 2; margin: .25rem 0 0; } .ab-vue label { width: var(--ab-cible-serree); } }

.ab-puces { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--ab-espace-2); }
.ab-puces:empty { display: none; }
.ab-puce { display: inline-flex; align-items: center; gap: .375rem; min-height: 36px; padding: 0 .5rem 0 .875rem; border: 1px solid var(--ab-vert-fonce); border-radius: 999px; background: var(--ab-blanc); color: var(--ab-vert-fonce); font: 600 var(--ab-taille-petit)/1 var(--ab-police-texte); cursor: pointer; }
.ab-puce::after { content: "×"; font-size: 1.125rem; line-height: 1; }

/* Cartes : mosaïque (défaut) */
.ab-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--ab-espace-2); margin: 0; padding: 0; list-style: none; }
@media (max-width: 599px) { .ab-cartes { grid-template-columns: 1fr 1fr; gap: .75rem; } }
@media (max-width: 359px) { .ab-cartes { grid-template-columns: 1fr; } }
.ab-carte { position: relative; display: flex; flex-direction: column; background: var(--ab-blanc); border: 1px solid var(--ab-ligne); border-radius: var(--ab-rayon-carte); overflow: hidden; transition: box-shadow var(--ab-transition), border-color var(--ab-transition); }
.ab-carte:hover, .ab-carte:focus-within { border-color: var(--ab-vert-fonce); box-shadow: var(--ab-ombre); }
.ab-carte[hidden] { display: none; }
.ab-carte__image { position: relative; aspect-ratio: 1; background: var(--ab-fond); }
.ab-carte__image img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.ab-badge { position: absolute; top: .5rem; left: .5rem; padding: .25rem .625rem; border-radius: 999px; font: 700 12px/1.3 var(--ab-police-texte); }
.ab-badge--promo { background: var(--ab-encre); color: var(--ab-blanc); }
.ab-carte__corps { display: flex; flex-direction: column; gap: .375rem; flex: 1; padding: .875rem; }
.ab-carte__surtitre { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ab-vert-fonce); text-transform: uppercase; }
.ab-boutique h2.ab-carte__titre { margin: 0; font-family: var(--ab-police-titre); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ab-encre); }
@media (min-width: 600px) { .ab-boutique h2.ab-carte__titre { font-size: 17px; } }
.ab-carte__lien { color: inherit; text-decoration: none; }
.ab-carte__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la carte est cliquable */
.ab-carte__lien:focus-visible { outline: none; }
.ab-carte:has(.ab-carte__lien:focus-visible) { outline: 3px solid var(--ab-encre); outline-offset: 2px; }
.ab-carte__resume { display: none; margin: 0; font-size: .9375rem; line-height: 1.45; }
.ab-carte__infos { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .5rem; margin-top: auto; padding-top: .25rem; }
.ab-carte__prix { font: 700 1.0625rem/1.3 var(--ab-police-texte); color: var(--ab-encre); }
.ab-carte__prix del { font-weight: 400; color: var(--ab-texte); font-size: .875rem; }
.ab-carte__prix ins { text-decoration: none; }
.ab-carte__prix small, .ab-carte__prix .woocommerce-price-suffix { display: block; font-weight: 400; font-size: 12px; color: var(--ab-texte); }
.ab-carte__prix .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ab-dispo { font-size: 12px; font-weight: 600; }
.ab-dispo--instock { color: var(--ab-vert-fonce); }
.ab-dispo--onbackorder { color: var(--ab-precommande); }
.ab-dispo--outofstock { color: var(--ab-texte); }
.ab-carte__action { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ab-carte__action .ab-btn { flex: 1 1 100%; padding: 0 .75rem; font-size: .9375rem; }
.ab-carte__action .added_to_cart { flex-basis: 100%; text-align: center; font-size: var(--ab-taille-petit); color: var(--ab-vert-fonce); }
.ab-carte__action .ab-btn.loading { opacity: .6; }
.ab-carte__action .ab-btn.added::after { content: " ✓"; }

.ab-qte { display: flex; flex: 1 1 100%; border: 1px solid var(--ab-bordure-champ); border-radius: var(--ab-rayon); overflow: hidden; }
.ab-qte button { width: var(--ab-cible-serree); min-height: var(--ab-cible-serree); border: 0; background: var(--ab-fond); color: var(--ab-encre); font-size: 1.25rem; cursor: pointer; }
.ab-qte__champ { flex: 1; min-width: 0; min-height: var(--ab-cible-serree); border: 0 !important; text-align: center; font: 600 var(--ab-taille-texte)/1 var(--ab-police-texte); color: var(--ab-encre); -moz-appearance: textfield; }
.ab-qte__champ::-webkit-inner-spin-button, .ab-qte__champ::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Vue liste : une ligne par produit, image à gauche, action à droite dès 700 px */
.ab-vue-liste .ab-cartes { grid-template-columns: 1fr; gap: .75rem; }
.ab-vue-liste .ab-carte { flex-direction: row; }
.ab-vue-liste .ab-carte__image { flex: 0 0 104px; aspect-ratio: auto; }
.ab-vue-liste .ab-carte__corps { padding: .75rem; }
.ab-vue-liste .ab-carte__surtitre { font-size: 11px; }
@media (min-width: 700px) {
	.ab-vue-liste .ab-carte__image { flex-basis: 150px; }
	.ab-vue-liste .ab-carte__corps { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; grid-template-rows: auto auto 1fr auto; column-gap: var(--ab-espace-3); }
	.ab-vue-liste .ab-carte__surtitre, .ab-vue-liste .ab-carte__titre, .ab-vue-liste .ab-carte__resume { grid-column: 1; }
	.ab-vue-liste .ab-carte__resume { display: block; }
	.ab-vue-liste .ab-carte__infos { grid-column: 2; grid-row: 1 / 3; margin: 0; flex-direction: column; align-items: flex-end; text-align: right; }
	.ab-vue-liste .ab-carte__action { grid-column: 2; grid-row: 3 / 5; align-self: end; margin: 0; }
}

.ab-vide-resultat { padding: var(--ab-espace-3); text-align: center; border: 1px dashed var(--ab-ligne); border-radius: var(--ab-rayon-carte); }
.ab-boutique__texte { margin-top: var(--ab-espace-3); padding: var(--ab-espace-2); background: var(--ab-fond); border-radius: var(--ab-rayon-carte); }
.ab-boutique__texte summary { min-height: var(--ab-cible); display: flex; align-items: center; cursor: pointer; font: 600 1rem/1.3 var(--ab-police-titre); color: var(--ab-encre); }

/* Remarque d'Édouard (20/10/2026 23 h) : vue liste sur téléphone, le texte et les boutons sortaient de la carte : la colonne
 * de texte ne pouvait pas se réduire à côté de l'image (min-width automatique d'un élément souple). */
.ab-vue-liste .ab-carte__corps { flex: 1 1 auto; min-width: 0; }
.ab-vue-liste .ab-carte__titre, .ab-vue-liste .ab-carte__degressif { overflow-wrap: anywhere; }
@media (max-width: 699px) {
	.ab-vue-liste .ab-carte__image { flex-basis: 96px; }
	.ab-vue-liste .ab-px { align-items: flex-start; }
	.ab-vue-liste .ab-carte__action .ab-btn { font-size: 14px; padding: 0 .5rem; }
}

/* AGRI-123 (21/10/2026, capture d'Édouard) : en mosaïque sur téléphone le champ de quantité faisait 29 px dont 24 de marge
 * interne (style global des champs) : le chiffre était invisible. Boutons de 40 px, champ sans marge, au moins 4 chiffres. */
.ab-qte button { flex: 0 0 40px; width: 40px; padding: 0 !important; }
.ab-qte__champ { padding: 0 2px !important; min-width: 4ch !important; font-size: 17px !important; color: var(--ab-encre) !important; background: var(--ab-blanc) !important; }

/* AGRI-126 (21/10/2026, capture d'Édouard) : pied du panneau de filtres — « Voir les produits ( 1 ) » éclaté sur deux
 * lignes et « Tout effacer » sur deux lignes. Libellés d'un seul tenant, centrés, sur une ligne. */
.ab-filtres__pied .ab-btn { justify-content: center; text-align: center; white-space: nowrap; padding-inline: .75rem; font-size: 16px; min-height: var(--ab-cible); }
.ab-filtres__libelle { white-space: nowrap; }

/* AGRI-136 (UXE-09, UXE-13) : boutons − / + à 44 px (au lieu de 40) ; une seule colonne de cartes sous 380 px de large
 * (cartes de 152 px : boutons et prix sur deux lignes). */
.ab-qte button { flex: 0 0 44px; width: 44px; min-height: var(--ab-cible-serree); }
.ab-qte__champ { min-width: 44px !important; }
@media (max-width: 380px) { .ab-cartes { grid-template-columns: 1fr !important; } }

/* AGRI-177 : le bouton d'ajout est dans un formulaire (plus un lien) ; le formulaire ne change pas la mise en page. */
.ab-carte form.ab-ajout { display: contents; }
.ab-carte form.ab-ajout button.ab-btn { cursor: pointer; font-family: inherit; }
form.ab-ajout { display: contents; }
.related.products form.ab-ajout button, .up-sells form.ab-ajout button, .products form.ab-ajout button.button { cursor: pointer; }