/* =====================================================================================
   Composants communs Sanrival — passe responsive du 21 octobre 2026.
   Une seule définition par composant, chargée en dernier (inc/charte.php) : carte produit,
   bloc d'achat (quantité + ajouter), grille de produits, surligneur. Les variantes locales
   (boutique, accueil, catégories…) ne doivent plus redessiner ces composants.
   Les tailles internes de la carte dépendent de SA largeur (requêtes de conteneur), pas de
   celle de l'écran : une même carte se comporte pareil sur l'accueil, en catégorie ou au panier.
   Priorité : chaque sélecteur porte « :is(…) », qui lui donne le poids d'un identifiant
   (sans jamais rien cibler de plus) pour passer devant les anciennes variantes locales.
   ===================================================================================== */

html body.sr-charte {
	--cp-r-carte: var(--sc-r-md);   /* arrondi des cartes */
	--cp-r-media: var(--sc-r-sm);   /* arrondi des images dans une carte */
	--cp-r-ctrl: var(--sc-r-pill);   /* contrôles : pilules (quantité, boutons) */
	--cp-h-ctrl: 44px;    /* hauteur de tous les contrôles d'achat (cible tactile) */
	--cp-gap: 8px;        /* rythme vertical de base */
	--cp-pad: 12px;       /* marge intérieure des cartes */
}
@media (max-width: 600px) {
	html body.sr-charte { --cp-pad: 8px; }
}

/* ---------- Grille de produits : 2 colonnes sur mobile, cartes de 200 px minimum, 4 au plus ---------- */
html body.sr-charte ul.products:has(> li.sr-product-card) {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 6px), max(200px, calc(25% - 15px))), 1fr)) !important;
	gap: 20px 16px !important;
	align-items: stretch !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
html body.sr-charte ul.products:has(> li.sr-product-card)::before,
html body.sr-charte ul.products:has(> li.sr-product-card)::after { display: none !important; content: none !important; }
@media (max-width: 600px) {
	html body.sr-charte ul.products:has(> li.sr-product-card) { gap: 12px !important; }
}

/* ---------- Carte produit ---------- */
html body.sr-charte li.sr-product-card {
	container: srcarte / inline-size;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--cp-gap) !important;
	float: none !important;
	justify-self: stretch !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: var(--cp-pad) !important;
	border: 1px solid var(--sc-line, #eadfc4) !important;
	border-radius: var(--cp-r-carte) !important;
	background: var(--sc-surface, #fffdf8) !important;
	box-shadow: none !important;
	transform: none !important;
	text-align: left !important;
	overflow: visible !important;
}
html body.sr-charte li.sr-product-card:hover,
html body.sr-charte li.sr-product-card:focus-within { border-color: var(--sc-line-strong, #dccda8) !important; }

/* Image : carré, pleine largeur de la carte */
html body.sr-charte li.sr-product-card .sr-product-card__media {
	position: relative !important;
	flex: none !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--cp-r-media) !important;
	overflow: hidden !important;
	background: var(--sc-cream-deep, #f8eedc) !important;
}
html body.sr-charte li.sr-product-card .sr-product-card__media::after { content: none !important; display: none !important; }
html body.sr-charte li.sr-product-card .sr-product-card__image,
html body.sr-charte li.sr-product-card .sr-product-card__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
}

/* Indisponible : photo atténuée, le reste de la carte inchangé */
html body.sr-charte li.sr-product-card.outofstock .sr-product-card__image img { opacity: .55 !important; }

/* Badges (bio, hybride F1…) : en haut à gauche, même taille partout */
html body.sr-charte li.sr-product-card .sr-badges {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	right: 52px !important;
	bottom: auto !important;
	z-index: 2 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body.sr-charte li.sr-product-card .sr-badge {
	display: inline-flex !important;
	align-items: center !important;
	height: 24px !important;
	min-height: 24px !important;
	padding: 0 10px !important;
	border-radius: var(--sc-r-pill) !important;
	font: 700 12px/1 var(--sc-display, "Bricolage Grotesque", sans-serif) !important;
	letter-spacing: -0.01em !important;
	white-space: nowrap !important;
}

/* Favori : rond de 36 px en haut à droite */
html body.sr-charte li.sr-product-card .sr-wishlist-toggle--card {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	z-index: 2 !important;
	display: grid !important;
	place-items: center !important;
	width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--sc-surface, #fffdf8) !important;
	box-shadow: none !important;
}
html body.sr-charte li.sr-product-card .sr-wishlist-toggle--card svg { width: var(--sc-icon-md) !important; height: var(--sc-icon-md) !important; }
/* États du cœur : contour rouge au repos, fond crème foncé au survol, rond rouge et cœur plein crème une fois en favori. */
html body.sr-charte li.sr-product-card .sr-wishlist-toggle--card { color: var(--sc-red) !important; transform: none !important; }
html body.sr-charte li.sr-product-card .sr-wishlist-toggle--card:hover { background: var(--sc-cream-deep) !important; color: var(--sc-red-dark) !important; }
html body.sr-charte li.sr-product-card .sr-wishlist-toggle--card:is(.is-active, [aria-pressed="true"]) { background: var(--sc-red) !important; color: var(--sc-cream) !important; }
html body.sr-charte li.sr-product-card .sr-wishlist-toggle--card:is(.is-active, [aria-pressed="true"]) svg { fill: currentColor !important; stroke: currentColor !important; }
html body.sr-charte li.sr-product-card .sr-wishlist-toggle--card:focus-visible { outline: var(--sc-focus) !important; outline-offset: var(--sc-focus-offset) !important; }

/* Corps : informations dans un ordre fixe, rythme de 6 px */
html body.sr-charte li.sr-product-card .sr-product-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	gap: 6px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 2px 2px 0 !important;
	background: transparent !important;
	grid-template-rows: none !important;
}
html body.sr-charte li.sr-product-card .sr-product-card__body > * { margin: 0 !important; }
html body.sr-charte li.sr-product-card .sr-product-card__category { order: 1 !important; display: block !important; }
html body.sr-charte li.sr-product-card .sr-product-card__category a { font: 600 12px/1.3 var(--sc-font, "Figtree", sans-serif) !important; color: var(--sc-green, #3f7a26) !important; text-decoration: none !important; }
html body.sr-charte li.sr-product-card h3.woocommerce-loop-product__title {
	order: 2 !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 3 !important;
	overflow: hidden !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	font: 800 16px/1.08 var(--sc-display, "Bricolage Grotesque", sans-serif) !important;
	letter-spacing: -0.03em !important;
	text-transform: lowercase !important;
	color: var(--sc-ink, #2a1a12) !important;
}
html body.sr-charte li.sr-product-card h3.woocommerce-loop-product__title a { color: inherit !important; text-decoration: none !important; }
html body.sr-charte li.sr-product-card .sr-temps__pill {
	order: 3 !important;
	align-self: flex-start !important;
	display: inline-flex !important;
	align-items: center !important;
	min-height: 24px !important;
	height: auto !important;
	padding: 4px 10px !important;
	border-radius: var(--sc-r-pill) !important;
	font: 700 12px/1.1 var(--sc-display, "Bricolage Grotesque", sans-serif) !important;
}
html body.sr-charte li.sr-product-card .sr-product-card__facts {
	order: 4 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	padding: 0 !important;
	list-style: none !important;
}
html body.sr-charte li.sr-product-card .sr-product-card__facts li {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font: 400 12px/1.35 var(--sc-font, "Figtree", sans-serif) !important;
	color: var(--sc-ink-soft, #4a2f22) !important;
}
html body.sr-charte li.sr-product-card .sr-product-card__facts li > svg { display: none !important; }
html body.sr-charte li.sr-product-card .sr-product-card__meta { order: 5 !important; }
/* La période de semis est déjà dans la pastille : la ligne « calendrier » des informations ferait doublon. */
html body.sr-charte li.sr-product-card .sr-product-card__body:has(.sr-temps__pill--card) .sr-product-card__facts li:has(.sr-icon--calendar) { display: none !important; }
html body.sr-charte li.sr-product-card .sr-stock { font: 600 12px/1.3 var(--sc-font, "Figtree", sans-serif) !important; color: var(--sc-green, #3f7a26) !important; }
html body.sr-charte li.sr-product-card .sr-stock.is-out { color: var(--sc-ink-mute, #6b4a38) !important; }
html body.sr-charte li.sr-product-card .sr-stock::before { display: none !important; }

/* Pied : toujours collé en bas de la carte, quelle que soit la quantité d'informations */
html body.sr-charte li.sr-product-card .sr-product-card__footer {
	order: 6 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: var(--cp-gap) !important;
	width: 100% !important;
	margin: auto 0 0 !important;
	padding: 6px 0 0 !important;
	border: 0 !important;
	grid-template-columns: none !important;
}
html body.sr-charte li.sr-product-card .sr-product-card__price,
html body.sr-charte li.sr-product-card .sr-product-card__price .price {
	margin: 0 !important;
	font: 800 20px/1 var(--sc-display, "Bricolage Grotesque", sans-serif) !important;
	letter-spacing: -0.03em !important;
	color: var(--sc-ink, #2a1a12) !important;
}
html body.sr-charte li.sr-product-card .sr-product-card__price :is(.amount, bdi, ins) { color: inherit !important; font: inherit !important; text-decoration: none !important; }
html body.sr-charte li.sr-product-card .sr-product-card__price del { font-size: .7em !important; color: var(--sc-ink-mute, #6b4a38) !important; }

/* ---------- Bloc d'achat : quantité + ajouter, mêmes hauteur, arrondis et largeur partout ---------- */
html body.sr-charte li.sr-product-card .sr-card-add {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: var(--cp-gap) !important;
	align-items: stretch !important;
	width: 100% !important;
	margin: 0 !important;
}
/* Sélecteur de quantité : un seul composant pour les cartes, la fiche produit, la page panier et le tiroir.
   Hauteur = --cp-h-ctrl (44 px ; 48 px sur la fiche, où le bouton d'ajout fait 48 px). */
html body.sr-charte .srp-cart { --cp-h-ctrl: 48px; }
html body.sr-charte :is(li.sr-product-card .sr-qty, .sr-card-add .sr-qty, .srp-cart form.cart .quantity, .sr-cart3-qte, .sr-tiroir__qte) {
	grid-template-columns: minmax(36px, 1fr) minmax(28px, auto) minmax(36px, 1fr) !important;
	align-items: center !important;
	box-sizing: border-box !important;
	height: var(--cp-h-ctrl) !important;
	min-height: var(--cp-h-ctrl) !important;
	max-height: var(--cp-h-ctrl) !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 1.5px solid var(--sc-line-strong, #dccda8) !important;
	border-radius: var(--cp-r-ctrl) !important;
	background: var(--sc-surface, #fffdf8) !important;
}
html body.sr-charte :is(.sr-card-add .sr-qty__btn, .srp-cart form.cart .quantity .qty-btn, .sr-cart3-qte__btn, .sr-tiroir__qte > button) {
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	height: calc(var(--cp-h-ctrl) - 8px) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--cp-r-ctrl) !important;
	background: transparent !important;
	box-shadow: none !important;
	font: 700 18px/1 var(--sc-font, "Figtree", sans-serif) !important;
	color: var(--sc-ink, #2a1a12) !important;
	cursor: pointer;
}
html body.sr-charte :is(.sr-card-add .sr-qty__btn, .srp-cart form.cart .quantity .qty-btn, .sr-cart3-qte__btn, .sr-tiroir__qte > button):hover { background: var(--sc-cream-deep, #f8eedc) !important; }
html body.sr-charte :is(.sr-card-add .sr-qty__btn, .srp-cart form.cart .quantity .qty-btn, .sr-cart3-qte__btn, .sr-tiroir__qte > button):focus-visible { outline: 2px solid var(--sc-ink, #2a1a12) !important; outline-offset: -2px; }
html body.sr-charte :is(.sr-card-add .sr-qty__input, .srp-cart form.cart .quantity input.qty, .sr-cart3-qte input.qty, .sr-tiroir__qte > input) {
	width: 100% !important;
	min-width: 28px !important;
	height: calc(var(--cp-h-ctrl) - 8px) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font: 700 16px/1 var(--sc-font, "Figtree", sans-serif) !important;
	color: var(--sc-ink, #2a1a12) !important;
	-moz-appearance: textfield;
	appearance: textfield;
}
html body.sr-charte :is(.sr-card-add .sr-qty__input, .srp-cart form.cart .quantity input.qty, .sr-cart3-qte input.qty, .sr-tiroir__qte > input)::-webkit-inner-spin-button,
html body.sr-charte :is(.sr-card-add .sr-qty__input, .srp-cart form.cart .quantity input.qty, .sr-cart3-qte input.qty, .sr-tiroir__qte > input)::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Largeur : pleine dans une carte ou sur la fiche ; ailleurs (panier, tiroir), celle d'un sélecteur de carte large. */
html body.sr-charte :is(li.sr-product-card .sr-qty, .sr-card-add .sr-qty, .srp-cart form.cart .quantity) { display: grid !important; width: 100% !important; }
html body.sr-charte :is(.sr-cart3-qte, .sr-tiroir__qte) { display: inline-grid !important; width: 116px !important; }
html body.sr-charte .sr-cart3-qte .quantity { display: contents !important; }
html body.sr-charte li.sr-product-card :is(.sr-card-button, a.button, button.button, .add_to_cart_button) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	height: var(--cp-h-ctrl) !important;
	min-height: var(--cp-h-ctrl) !important;
	max-height: var(--cp-h-ctrl) !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: var(--cp-r-ctrl) !important;
	background: var(--sc-red, #b21c2d) !important;
	color: var(--sc-canvas, #fffcf5) !important;
	box-shadow: none !important;
	font: 700 16px/1 var(--sc-font, "Figtree", sans-serif) !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
html body.sr-charte li.sr-product-card :is(.sr-card-button, a.button, button.button, .add_to_cart_button):hover { background: var(--sc-red-dark, #8e1424) !important; }
html body.sr-charte li.sr-product-card :is(.sr-card-button, a.button, button.button, .add_to_cart_button):focus-visible { outline: 2px solid var(--sc-ink, #2a1a12) !important; outline-offset: 2px; }
html body.sr-charte li.sr-product-card .sr-card-button.added { background: var(--sc-green-dark, #2b5a18) !important; }
html body.sr-charte li.sr-product-card .sr-card-button.loading { opacity: .7 !important; }
html body.sr-charte li.sr-product-card .sr-card-button > svg,
html body.sr-charte li.sr-product-card .sr-card-button__icon { display: none !important; }
html body.sr-charte li.sr-product-card .sr-card-button { color: var(--sc-canvas, #fffcf5) !important; font-size: 16px !important; }
html body.sr-charte li.sr-product-card .sr-card-button__label.is-added { display: none !important; }
html body.sr-charte li.sr-product-card .sr-card-button.added .sr-card-button__label.is-default { display: none !important; }
html body.sr-charte li.sr-product-card .sr-card-button.added .sr-card-button__label.is-added { display: inline !important; }
html body.sr-charte li.sr-product-card a.added_to_cart { display: none !important; }

/* Carte large (contenu ≥ 220 px, soit une carte d'environ 245 px) : quantité et bouton côte à côte, titre et prix un cran plus grands */
@container srcarte (min-width: 220px) {
	html body.sr-charte li.sr-product-card .sr-card-add { grid-template-columns: 116px minmax(0, 1fr) !important; }
	html body.sr-charte li.sr-product-card h3.woocommerce-loop-product__title { font-size: 18px !important; }
	html body.sr-charte li.sr-product-card .sr-product-card__price,
	html body.sr-charte li.sr-product-card .sr-product-card__price .price { font-size: 24px !important; }
	html body.sr-charte li.sr-product-card .sr-product-card__category a,
	html body.sr-charte li.sr-product-card .sr-stock { font-size: 14px !important; }
}

/* ---------- Surligneur : le traitement de « cultive. » (pied de page) partout ---------- */
html body.sr-charte :is(.sr-surligneur, .srp3-encadre) {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 .1em .04em !important;
	border-radius: .16em !important;
	line-height: inherit !important;
	vertical-align: baseline !important;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- Champ avec bouton intégré : un seul composant (recherche de l'en-tête, plein écran et menu,
   lettre Sanrival, recherche de la 404 et de « aucun résultat », recherche des guides).
   Fond crème, rayon 12, hauteur standard 48 ; bouton à 6 px du bord, rayon 6 (concentrique). ---------- */
html body.sr-charte :is(.sr-search .sr-search__field, .sr-lettre__champ, .srb3-form__ligne, .srh3b-cherche) {
	display: flex !important;
	align-items: center !important;
	gap: var(--sc-space-2) !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: var(--sc-h-md) !important;
	min-height: var(--sc-h-md) !important;
	margin: 0 !important;
	padding: 0 4px 0 14px !important;
	border: 2px solid transparent !important;
	border-radius: var(--sc-r-sm) !important;
	background: var(--sc-cream-deep) !important;
	box-shadow: none !important;
	color: var(--sc-ink) !important;
}
html body.sr-charte form.sr-search { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.sr-charte :is(.sr-search .sr-search__field, .sr-lettre__champ, .srb3-form__ligne, .srh3b-cherche):focus-within { border-color: var(--sc-ink) !important; }
html body.sr-charte :is(.sr-search .sr-search__icon, .srh3b-cherche > svg) { flex: 0 0 22px; display: grid !important; place-items: center !important; width: var(--sc-icon-lg) !important; height: var(--sc-icon-lg) !important; margin: 0 !important; color: var(--sc-ink) !important; }
html body.sr-charte .sr-search .sr-search__icon svg { width: var(--sc-icon-md) !important; height: var(--sc-icon-md) !important; color: inherit !important; }
html body.sr-charte :is(.sr-search .sr-search__field input[type="search"], .sr-lettre__champ input[type="email"], .srb3-form__ligne input[type="search"], .srh3b-cherche input[type="search"]) {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0 !important;
	height: calc(var(--sc-h-md) - 4px) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font: 400 16px/1.2 var(--sc-font) !important;
	color: var(--sc-ink) !important;
}
html body.sr-charte :is(.sr-search .sr-search__field input[type="search"], .sr-lettre__champ input[type="email"], .srb3-form__ligne input[type="search"], .srh3b-cherche input[type="search"])::placeholder { color: var(--sc-ink-mute) !important; opacity: 1 !important; }
html body.sr-charte :is(.sr-search .sr-search__field input[type="search"], .sr-lettre__champ input[type="email"], .srb3-form__ligne input[type="search"], .srh3b-cherche input[type="search"])::-webkit-search-cancel-button { -webkit-appearance: none; }
html body.sr-charte .sr-search .sr-search__clear {
	flex: 0 0 32px;
	display: grid !important;
	place-items: center !important;
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 32px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sc-ink-mute) !important;
	cursor: pointer;
}
html body.sr-charte .sr-search .sr-search__clear[hidden] { display: none !important; }
html body.sr-charte .sr-search .sr-search__clear:hover { background: rgba(42, 26, 18, .08) !important; color: var(--sc-ink) !important; }
html body.sr-charte .sr-search .sr-search__clear:focus-visible { outline: var(--sc-focus) !important; outline-offset: 1px; }
html body.sr-charte .sr-search .sr-search__clear svg { width: var(--sc-icon-sm) !important; height: var(--sc-icon-sm) !important; }
html body.sr-charte :is(.sr-search .sr-search__submit, .sr-lettre__champ > button, .srb3-form__ligne > button.srb3-btn.srb3-btn) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
	width: auto !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: var(--sc-r-xs) !important;
	background: var(--sc-red) !important;
	color: var(--sc-canvas) !important;
	box-shadow: none !important;
	font: 700 14px/1 var(--sc-font) !important;
	text-transform: lowercase !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	cursor: pointer;
}
html body.sr-charte :is(.sr-search .sr-search__submit, .sr-lettre__champ > button, .srb3-form__ligne > button.srb3-btn.srb3-btn):hover { background: var(--sc-red-dark) !important; }
html body.sr-charte :is(.sr-search .sr-search__submit, .sr-lettre__champ > button, .srb3-form__ligne > button.srb3-btn.srb3-btn):focus-visible { outline: var(--sc-focus) !important; outline-offset: 2px !important; }
/* Recherche sur petit écran (plein écran, menu) : pas de bouton, la touche « Rechercher » du clavier valide. */
@media (max-width: 600px) {
	html body.sr-charte .sr-search .sr-search__submit { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
}

/* ---------- Tri des produits (boutique, catégories, recherche) : jamais plus large que sa ligne ---------- */
html body.sr-charte form.woocommerce-ordering { flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; }
html body.sr-charte :is(.srce-sort, .srb3-tri) > span { white-space: nowrap; }
html body.sr-charte form.woocommerce-ordering select { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: min(240px, 100%) !important; text-overflow: ellipsis; }

/* ---------- Prix : un montant ne se coupe jamais entre le nombre et « € » ---------- */
html body.sr-charte .woocommerce-Price-amount { white-space: nowrap; }

/* ---------- Grille de quatre cartes (sélections, « à découvrir ») : 2 puis 4 colonnes, jamais 3 + 1 carte seule ---------- */
html body.sr-charte ul.products:has(> li.sr-product-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 700px) {
	html body.sr-charte ul.products:has(> li.sr-product-card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ========== Bouton d'action : un seul composant (harmonisation du 21 octobre 2026) ==========
   Géométrie, typographie et états ici ; aucune feuille locale ne redéfinit hauteur, padding, rayon ou police d'un bouton.
   Tailles : standard 48 px ; compact 44 px (cartes, tiroir, « + ajouter ») ; action finale 56 px (passer au paiement, commander).
   Couleurs (charte) : brun = explorer ou agir hors achat, rouge = acheter, contour = appoint, crème = sur fond brun. */
html body.sr-charte :is(.sr-button, .sr-account-button, .srac-btn, .sr-bande__btn, .srce-button, .sr-consent__btn, .srkhv2-button, .sr-ty-btn, .sr-ty3-btn,
	.sr-ty3-guide__btn, .srp3-btn, .src3-btn, .srb3-btn, .srg3-btn, .sra3-btn, .srl-btn, .srg-cta, .srp-guide__cta, .sr-prefooter__cta,
	.sr-panier-vide__cta, .sr-mega-cta, .sr-cart3-saison__cta, .sr-cart3-barre__btn, .sr-tiroir__commander, .srp-rv__write, .wc-backward,
	.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-button, .forminator-button-submit,
	.comment-form .submit, .form-submit .submit, .single_add_to_cart_button, .checkout-button, .place-order button.button, a.button, button.button, input.button) {
	display: inline-flex; /* sans !important : un bouton masqué par sa feuille reste masqué */
	align-items: center !important;
	justify-content: center !important;
	gap: var(--sc-space-2) !important;
	box-sizing: border-box !important;
	min-height: var(--sc-h-md) !important;
	height: auto !important;
	padding: 10px 22px !important;
	border-radius: var(--sc-r-pill) !important;
	box-shadow: none !important;
	font: 700 16px/1.2 var(--sc-font) !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
html body.sr-charte :is(a.checkout-button.button, .place-order button.button, .sr-cart3-barre__btn, .sr-tiroir__commander) {
	min-height: var(--sc-h-lg) !important;
	padding: 12px 24px !important;
	font-size: 16px !important;
}
html body.sr-charte :is(a.sr-mini-aj.button, a.sr-mini-aj) {
	min-height: var(--sc-h-sm) !important;
	height: var(--sc-h-sm) !important;
	padding: 0 16px !important;
	font: 700 14px/1 var(--sc-font) !important;
	text-transform: lowercase !important;
	border-radius: var(--sc-r-pill) !important;
	box-shadow: none !important;
}
/* Bouton-icône (ajout rapide « + ») : cercle compact. */
html body.sr-charte :is(a.button.sr-complements__add, a.sr-complements__add) {
	width: var(--sc-h-sm) !important;
	min-width: var(--sc-h-sm) !important;
	height: var(--sc-h-sm) !important;
	min-height: var(--sc-h-sm) !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font: 700 20px/1 var(--sc-font) !important;
}
/* Brun : explorer ou agir hors achat (variante par défaut). */
html body.sr-charte :is(.sr-button:not(.sr-button--outline), .srce-button--primary, .srkhv2-button--primary, .srp-rv__write,
	.wc-backward, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button,
	.forminator-button-submit, .comment-form .submit, .sr-card-button:not(.add_to_cart_button)) {
	color: var(--sc-cream) !important; background: var(--sc-ink) !important; border-color: var(--sc-ink) !important;
}
html body.sr-charte :is(.sr-button:not(.sr-button--outline), .srce-button--primary, .srkhv2-button--primary, .srp-rv__write,
	.wc-backward, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button,
	.forminator-button-submit, .comment-form .submit):hover { background: var(--sc-ink-soft) !important; border-color: var(--sc-ink-soft) !important; }
/* Rouge : acheter. */
html body.sr-charte :is(.single_add_to_cart_button, .add_to_cart_button, .sr-complements__add, .woocommerce-checkout .button.alt, .checkout-button,
	.wc-proceed-to-checkout a, .sr-ty-btn:first-child) {
	color: var(--sc-cream) !important; background: var(--sc-red) !important; border-color: var(--sc-red) !important;
}
html body.sr-charte :is(.single_add_to_cart_button, .add_to_cart_button, .sr-complements__add, .woocommerce-checkout .button.alt, .checkout-button,
	.wc-proceed-to-checkout a, .sr-ty-btn:first-child):hover { background: var(--sc-red-dark) !important; border-color: var(--sc-red-dark) !important; }
/* Contour (appoint) : bordure dans la couleur du texte — encre sur fond clair, crème sur fond brun. */
html body.sr-charte :is([class*="btn--ligne"], [class*="btn--appoint"], [class*="btn--clair"], .srh3-btn-clair, .sr-button--outline) { border: 1.5px solid currentColor !important; box-shadow: none !important; }
/* Crème sur fond brun. */
html body.sr-charte :is(.sr-prefooter, .srhp-house, .sr-page-hero, .sr-legal-hero, .sr-account-welcome) a.sr-button.sr-button:not(.sr-button--outline) {
	color: var(--sc-ink) !important; background: var(--sc-cream) !important; border-color: var(--sc-cream) !important;
}
/* États communs à tous les boutons. */
html body.sr-charte :is(.sr-button, .sr-account-button, .srac-btn, .sr-bande__btn, .srce-button, .sr-consent__btn, .srkhv2-button, .sr-ty-btn, .sr-ty3-btn,
	.sr-ty3-guide__btn, .srp3-btn, .src3-btn, .srb3-btn, .srg3-btn, .sra3-btn, .srl-btn, .srg-cta, .srp-guide__cta, .sr-prefooter__cta,
	.sr-panier-vide__cta, .sr-mega-cta, .sr-cart3-saison__cta, .sr-cart3-barre__btn, .sr-tiroir__commander, .srp-rv__write, .wc-backward,
	.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-button, .forminator-button-submit,
	.comment-form .submit, .form-submit .submit, .single_add_to_cart_button, .checkout-button, .place-order button.button, a.button, button.button, input.button, a.sr-mini-aj, .sr-card-button):focus-visible { outline: var(--sc-focus) !important; outline-offset: var(--sc-focus-offset) !important; }
html body.sr-charte :is(.sr-button, .sr-account-button, .srac-btn, .sr-bande__btn, .srce-button, .sr-consent__btn, .srkhv2-button, .sr-ty-btn, .sr-ty3-btn,
	.sr-ty3-guide__btn, .srp3-btn, .src3-btn, .srb3-btn, .srg3-btn, .sra3-btn, .srl-btn, .srg-cta, .srp-guide__cta, .sr-prefooter__cta,
	.sr-panier-vide__cta, .sr-mega-cta, .sr-cart3-saison__cta, .sr-cart3-barre__btn, .sr-tiroir__commander, .srp-rv__write, .wc-backward,
	.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-button, .forminator-button-submit,
	.comment-form .submit, .form-submit .submit, .single_add_to_cart_button, .checkout-button, .place-order button.button, a.button, button.button, input.button, a.sr-mini-aj, .sr-card-button):is(:disabled, .disabled, [aria-disabled="true"]) { opacity: var(--sc-disabled-opacity) !important; cursor: not-allowed !important; pointer-events: none; }
html body.sr-charte :is(.sr-button, .sr-account-button, .srac-btn, .sr-bande__btn, .srce-button, .sr-consent__btn, .srkhv2-button, .sr-ty-btn, .sr-ty3-btn,
	.sr-ty3-guide__btn, .srp3-btn, .src3-btn, .srb3-btn, .srg3-btn, .sra3-btn, .srl-btn, .srg-cta, .srp-guide__cta, .sr-prefooter__cta,
	.sr-panier-vide__cta, .sr-mega-cta, .sr-cart3-saison__cta, .sr-cart3-barre__btn, .sr-tiroir__commander, .srp-rv__write, .wc-backward,
	.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-button, .forminator-button-submit,
	.comment-form .submit, .form-submit .submit, .single_add_to_cart_button, .checkout-button, .place-order button.button, a.button, button.button, input.button, a.sr-mini-aj, .sr-card-button).loading { opacity: .7 !important; }

/* ========== Champ de formulaire : un seul composant (commande, compte, contact, avis, codes promo, tri) ==========
   48 px, rayon 12, fond blanc, filet sable foncé, texte 16 px (en dessous, Safari sur iPhone zoome la page au toucher). */
html body.sr-charte :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea):not(:is(.sr-search__field, .sr-lettre__champ, .sr-lettre__piege, .srb3-form__ligne, .srh3b-cherche, .sr-qty, .quantity, .sr-cart3-qte, .sr-tiroir__qte, .sr-filter-search, .srce-filter-option, .sr-catalog-filter-option) *):not(.select2-hidden-accessible, .screen-reader-text, .sr-qty__input, [hidden]) {
	box-sizing: border-box !important;
	width: 100%;
	height: var(--sc-h-md) !important;
	min-height: var(--sc-h-md) !important;
	margin: 0;
	padding: 0 14px !important;
	border: 1px solid var(--sc-line-strong) !important;
	border-radius: var(--sc-r-sm) !important;
	background-color: #fff !important;
	box-shadow: none !important;
	outline: none !important;
	font: 400 16px/1.3 var(--sc-font) !important;
	color: var(--sc-ink) !important;
	transition: border-color .15s, box-shadow .15s;
}
html body.sr-charte :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea):not(:is(.sr-search__field, .sr-lettre__champ, .sr-lettre__piege, .srb3-form__ligne, .srh3b-cherche, .sr-qty, .quantity, .sr-cart3-qte, .sr-tiroir__qte, .sr-filter-search, .srce-filter-option, .sr-catalog-filter-option) *):not(.select2-hidden-accessible, .screen-reader-text, .sr-qty__input, [hidden]):is(textarea) { height: auto !important; min-height: 120px !important; padding: 12px 14px !important; resize: vertical; }
html body.sr-charte :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea):not(:is(.sr-search__field, .sr-lettre__champ, .sr-lettre__piege, .srb3-form__ligne, .srh3b-cherche, .sr-qty, .quantity, .sr-cart3-qte, .sr-tiroir__qte, .sr-filter-search, .srce-filter-option, .sr-catalog-filter-option) *):not(.select2-hidden-accessible, .screen-reader-text, .sr-qty__input, [hidden]):is(select) { padding-right: 40px !important; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%232a1a12' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat !important; }
html body.sr-charte :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea):not(:is(.sr-search__field, .sr-lettre__champ, .sr-lettre__piege, .srb3-form__ligne, .srh3b-cherche, .sr-qty, .quantity, .sr-cart3-qte, .sr-tiroir__qte, .sr-filter-search, .srce-filter-option, .sr-catalog-filter-option) *):not(.select2-hidden-accessible, .screen-reader-text, .sr-qty__input, [hidden])::placeholder { color: var(--sc-ink-mute) !important; opacity: 1 !important; }
html body.sr-charte :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea):not(:is(.sr-search__field, .sr-lettre__champ, .sr-lettre__piege, .srb3-form__ligne, .srh3b-cherche, .sr-qty, .quantity, .sr-cart3-qte, .sr-tiroir__qte, .sr-filter-search, .srce-filter-option, .sr-catalog-filter-option) *):not(.select2-hidden-accessible, .screen-reader-text, .sr-qty__input, [hidden]):focus { border-color: var(--sc-ink) !important; box-shadow: inset 0 0 0 1px var(--sc-ink) !important; }
html body.sr-charte :is(.woocommerce-invalid, .forminator-has_error) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea), html body.sr-charte :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea)[aria-invalid="true"] { border-color: var(--sc-red) !important; box-shadow: inset 0 0 0 1px var(--sc-red) !important; }
html body.sr-charte :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="number"]:not(.qty, .sr-qty__input), select, textarea):not(:is(.sr-search__field, .sr-lettre__champ, .sr-lettre__piege, .srb3-form__ligne, .srh3b-cherche, .sr-qty, .quantity, .sr-cart3-qte, .sr-tiroir__qte, .sr-filter-search, .srce-filter-option, .sr-catalog-filter-option) *):not(.select2-hidden-accessible, .screen-reader-text, .sr-qty__input, [hidden]):disabled { opacity: var(--sc-disabled-opacity) !important; cursor: not-allowed !important; }
/* Variante compacte (44 px) : tri des produits. */
html body.sr-charte :is(.woocommerce-ordering, .srce-sort, .sr-shop-toolbar) select { height: var(--sc-h-sm) !important; min-height: var(--sc-h-sm) !important; font-size: 16px !important; font-weight: 600 !important; }
html body.sr-charte :is(.sr-search .sr-search__submit, .sr-lettre__champ > button, .srb3-form__ligne > button.srb3-btn.srb3-btn):disabled { opacity: var(--sc-disabled-opacity) !important; cursor: wait !important; }
/* Sur fond brun (pied de page), le focus passe en vert clair pour rester visible. */
html body.sr-charte .sr-footer .sr-lettre__champ:focus-within { border-color: var(--sc-green-light) !important; }
html body.sr-charte .sr-footer .sr-lettre__champ > button:focus-visible { outline-color: var(--sc-green-light) !important; }

/* ========== Badge (non cliquable) : un seul composant ==========
   Hybride F1, Bio, saison « semer · mar-oct », gestes de catégorie, famille. 24 px, pilule, Bricolage 700 12 px ; les couleurs restent celles de chaque variante. */
html body.sr-charte :is(.sr-badge, .sr-temps__pill, .src3-pastille, .srh3-pastille, .sr-fam):not(a) {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--sc-space-1) !important;
	box-sizing: border-box !important;
	min-height: var(--sc-h-badge) !important;
	height: auto !important;
	padding: 3px 10px !important;
	border-radius: var(--sc-r-pill) !important;
	box-shadow: none !important;
	font: 700 12px/1.5 var(--sc-display) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: normal;
}

/* ========== Pastille cliquable : onglets, filtres, modes des guides, suggestions, univers ==========
   Contrôle compact 44 px, pilule, Figtree 600 14 px ; état actif commun (fond brun, texte crème). */
html body.sr-charte :is(.sr-tabs__tab, .srce-filter-open, .srsv2h-chip, .srg-chip, .srg3-modes button, .srh3b-groupes button, .srb3-essais a, .srf-univers a, .sra3-pastilles a) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center;
	gap: 6px !important;
	box-sizing: border-box !important;
	min-height: var(--sc-h-sm) !important;
	height: auto !important;
	padding: 0 16px !important;
	border: 1.5px solid var(--sc-line-strong);
	border-radius: var(--sc-r-pill) !important;
	box-shadow: none !important;
	font: 600 14px/1.2 var(--sc-font) !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}
html body.sr-charte :is(.sr-tabs__tab, .srce-filter-open, .srsv2h-chip, .srg-chip, .srg3-modes button, .srh3b-groupes button, .srb3-essais a, .srf-univers a, .sra3-pastilles a):focus-visible { outline: var(--sc-focus) !important; outline-offset: var(--sc-focus-offset) !important; }
html body.sr-charte :is(.sr-tabs__tab, .srg3-modes button, .srh3b-groupes button):is([aria-selected="true"], [aria-pressed="true"], .is-active) { background: var(--sc-ink) !important; border-color: var(--sc-ink) !important; color: var(--sc-cream) !important; }

/* ========== Bouton-icône : un seul composant ==========
   Cercle de 44 px, contour encre (variante « appoint » de la charte), icône 20 px.
   Exceptions justifiées : cœur posé sur la photo d'une carte (36 px, pour ne pas masquer l'image) ;
   cœur de la fiche à côté du bouton d'achat (48 px, même hauteur que le bouton). */
html body.sr-charte :is(.srh3-sem__fleche, .srce-pagination__arrow, .sr-tiroir__fermer, .srce-icon-button, .sr-filter-close, .sr-back-to-top) {
	display: inline-grid !important;
	place-items: center !important;
	box-sizing: border-box !important;
	width: var(--sc-h-sm) !important;
	min-width: var(--sc-h-sm) !important;
	height: var(--sc-h-sm) !important;
	min-height: var(--sc-h-sm) !important;
	padding: 0 !important;
	border: 1.5px solid currentColor;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
}
html body.sr-charte :is(.srh3-sem__fleche, .srce-pagination__arrow, .sr-tiroir__fermer, .srce-icon-button, .sr-filter-close, .sr-back-to-top) svg { width: var(--sc-icon-md) !important; height: var(--sc-icon-md) !important; }
html body.sr-charte :is(.srh3-sem__fleche, .srce-pagination__arrow, .sr-tiroir__fermer, .srce-icon-button, .sr-filter-close, .sr-back-to-top):focus-visible { outline: var(--sc-focus) !important; outline-offset: var(--sc-focus-offset) !important; }
html body.sr-charte :is(.srh3-sem__fleche, .srce-pagination__arrow):disabled { opacity: var(--sc-disabled-opacity) !important; cursor: not-allowed !important; }
html body.sr-charte .srp3-ligne :is(.srp-wishlist, .srp-v4-heart) { width: var(--sc-h-md) !important; min-width: var(--sc-h-md) !important; height: var(--sc-h-md) !important; min-height: var(--sc-h-md) !important; padding: 0 !important; border-radius: 50% !important; }
/* Bouton d'envoi d'un avis (règle WordPress à identifiant) : même pilule que tous les boutons. */
html body.sr-charte #respond :is(input#submit, .submit) { border-radius: var(--sc-r-pill) !important; min-height: var(--sc-h-md) !important; padding: 10px 22px !important; font: 700 16px/1.2 var(--sc-font) !important; text-transform: lowercase !important; }

/* ========== Rôles typographiques des titres (phase 2, 22 octobre 2026) ==========
   Un titre prend la taille de son rôle, jamais une taille locale. Bricolage 800, bas de casse (charte). */
html body.sr-charte :is(.srp3-h1, .sr-bande__titre--geant, .srh3-sem__titre, .sr-prefooter__title) { font-family: var(--sc-display) !important; font-weight: 800 !important; font-size: var(--sc-fs-affiche) !important; line-height: .92 !important; letter-spacing: -0.055em !important; }
html body.sr-charte .srp3 .srp3-h1.is-long { font-family: var(--sc-display) !important; font-weight: 800 !important; font-size: var(--sc-fs-affiche-long) !important; } /* nom de produit long : ne déborde pas */
html body.sr-charte :is(.sr-bande__titre:not(.sr-bande__titre--geant), .src3-h1) { font-family: var(--sc-display) !important; font-weight: 800 !important; font-size: var(--sc-fs-bandeau) !important; line-height: .95 !important; letter-spacing: -0.06em !important; }
html body.sr-charte :is(.srh3-h2:not(.srh3-h2--moyen, .srh3-h2--petit), .src3-h2--grand, .srg3-h2, .srf-h2, .sra3-h2, .sr-lettre__titre, .sr-cart3-saison__txt h2) { font-family: var(--sc-display) !important; font-weight: 800 !important; font-size: var(--sc-fs-section) !important; line-height: .98 !important; letter-spacing: -0.05em !important; }
html body.sr-charte :is(.srh3-h2--moyen, .srh3-h2--petit, .srp3-h2, .srp-rv__title, .src3-h2:not(.src3-h2--grand), .srb3-h2) { font-family: var(--sc-display) !important; font-weight: 800 !important; font-size: var(--sc-fs-sous-section) !important; line-height: 1.04 !important; letter-spacing: -0.04em !important; }
html body.sr-charte :is(.srct-form h2, .srct-aside h2, .sr-cart3-recap__haut h2, .sr-cart3-reco__tete h2, .sr-ck3__recap-haut h3, .srp3-reperes h3, .sra3-eng__titre, .woocommerce-billing-fields h3, .sr-ck3__h, .srp3-bande__texte h3, .srp-rv__form-intro h3, .srp3-formats__titre, .srp3-livraison__titre) { font-family: var(--sc-display) !important; font-weight: 800 !important; font-size: var(--sc-fs-bloc) !important; line-height: 1.05 !important; letter-spacing: -0.04em !important; }
html body.sr-charte :is(.srkhv2-subtitle, .srkhv2-decision__heading h3, .sr-complements__title, .srr3-filtres__tete h2) { font-family: var(--sc-display) !important; font-weight: 800 !important; font-size: var(--sc-fs-petit-titre) !important; line-height: 1.1 !important; letter-spacing: -0.035em !important; }