/* Charte graphique Sanrival Jardin — couche de base (polices, jetons, typographie).
 * Active uniquement avec body.sr-charte (constante SANRIVAL_CHARTE_V2). Les anciens jetons sont
 * redéfinis dans charte-tokens.css (généré). Retrait : define( 'SANRIVAL_CHARTE_V2', false ). */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

body.sr-charte {
	/* Tier 1 — palette de la charte (valeurs exactes du fichier source). Seul --sc-green, utilisé en texte, est assombri d'un cran pour tenir 4,5:1 sur la crème ; la couleur de famille exacte est --sc-fam-potageres. */
	--sc-red: #b21c2d;
	--sc-red-dark: #8e1424;
	--sc-red-soft: #f9dde0;
	--sc-ink: #2a1a12;
	--sc-ink-soft: #4a2f22;
	--sc-ink-mute: #6b4a38;
	--sc-cream: #fdf6ea;
	/* Fond des grandes sections : crème de la charte éclaircie aux trois quarts vers le blanc (6 octobre 2026 ; avant : #fff9ec). La crème exacte reste pour les bandeaux et accents. */
	--sc-canvas: #fffcf5;
	--sc-cream-deep: #f8eedc;
	--sc-surface: #fffdf8;
	--sc-line: #eadfc4;
	--sc-line-soft: #f3ead2;
	--sc-line-strong: #dccda8;
	--sc-green: #3f7a26;
	--sc-green-dark: #2b5a18;
	--sc-green-light: #b7d34a;
	--sc-green-soft: #eef4d4;
	--sc-gold: #f2a900;
	--sc-gold-soft: #fcefc8;
	--sc-terra: #c9791b;
	--sc-terra-soft: #f8e7cc;
	/* Tier 2 — une couleur par famille et les quatre temps du jardin (valeurs exactes, extraites du fichier source .ai de la charte). */
	--sc-fam-potageres: #4e8f2f;
	--sc-fam-aromatiques: #2c7a8c;
	--sc-fam-fleurs: #c2336b;
	--sc-fam-anciennes: #c9791b;
	--sc-fam-bio: #a9b52a;
	--sc-fam-premium: #2a1a12;
	--sc-fam-kids: #f2a900;
	/* Rayons hors graines (validés le 7 octobre 2026) : terre cuite, bleu ardoise, aubergine ; texte crème 5,1 / 5,2 / 7,2:1. */
	--sc-fam-jardin: #a1512b;
	--sc-fam-animalerie: #3f67a0;
	--sc-fam-nuisibles: #6a3f86;
	--sc-semer: #b7d34a;
	--sc-arroser: #8cc5e8;
	--sc-attendre: #f0c96a;
	--sc-recolter: #b21c2d;
	/* Système commun (harmonisation du 21 octobre 2026) : toute valeur de forme, de taille ou d'espace passe par ces jetons.
	   Rayons : échelle de la charte 12 / 18 / 26 + pilule ; 6 px uniquement pour un bouton intégré dans un champ (12 - 6 de retrait). */
	--sc-r-xs: 6px;
	--sc-r-sm: 12px;
	--sc-r-md: 18px;
	--sc-r-lg: 26px;
	--sc-r-pill: 999px;
	/* Hauteurs de contrôle : compact (cartes, tiroir, filtres, tri), standard (boutons, champs), action finale d'un parcours ; badges. */
	--sc-h-sm: 44px;
	--sc-h-md: 48px;
	--sc-h-lg: 56px;
	--sc-h-badge: 24px;
	/* Espacements : échelle du design system. */
	--sc-space-1: 4px;
	--sc-space-2: 8px;
	--sc-space-3: 12px;
	--sc-space-4: 16px;
	--sc-space-5: 24px;
	--sc-space-6: 32px;
	--sc-space-7: 48px;
	--sc-space-8: 64px;
	--sc-space-9: 80px;
	--sc-space-10: 96px;
	/* Rôles typographiques (titres) : une taille fluide par rôle, bornes sur l'échelle 20 → 96. */
	--sc-fs-affiche: clamp(48px, 8.4vw, 96px);
	--sc-fs-affiche-long: clamp(40px, 5.2vw, 80px);
	--sc-fs-bandeau: clamp(40px, 8.4vw, 64px);
	--sc-fs-section: clamp(32px, 5.2vw, 48px);
	--sc-fs-sous-section: clamp(28px, 3vw, 40px);
	--sc-fs-bloc: clamp(24px, 2.1vw, 28px);
	--sc-fs-petit-titre: 20px;
	/* Icônes */
	--sc-icon-sm: 16px;
	--sc-icon-md: 20px;
	--sc-icon-lg: 24px;
	--sc-icon-xl: 32px;
	/* Focus clavier et état désactivé */
	--sc-focus: 2px solid var(--sc-ink);
	--sc-focus-offset: 2px;
	--sc-disabled-opacity: .5;
	/* Anciennes variables de rayon de la charte, conservées comme alias */
	--sc-radius-s: var(--sc-r-sm);
	--sc-radius-m: var(--sc-r-md);
	--sc-radius-l: var(--sc-r-lg);
	--sc-radius-pill: var(--sc-r-pill);
	/* Typographie */
	--sc-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sc-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;

	background: var(--sc-canvas);
	color: var(--sc-ink);
	font-family: var(--sc-font);
}

body.sr-charte :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--sc-display);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.04;
	text-transform: none;
}

/* Titres éditoriaux en minuscules (accueil, qui sommes-nous, catégories). Les noms de produit gardent leur casse. */
body.sr-charte :is(.srh, .sra, .srg, .srce) :is(h1, h2) {
	text-transform: lowercase;
}

/* Fiches V2.2, guides et titres partagés (pré-footer, 404, compte, checkout, avis) : seule la
   première lettre passe en bas de casse, pour que « Tomate Ananas » ou « Sanrival » gardent leur casse. */
body.sr-charte .srkhv2 :is(h1:not(.single-product *):not(.srkhv2-product-page *), h2):not(:is([class*="product-card"], [class*="__card"], [class*="loop"], .products) *)::first-letter,
body.sr-charte :is(.sr-page-hero, .sr-account-welcome) h1::first-letter,
body.sr-charte :is(#sr-prefooter-title, .sr-ck-title, .srp-rv__formpanel h3)::first-letter {
	text-transform: lowercase;
}

/* Les petits libellés ne sont plus en capitales espacées. */
body.sr-charte :is([class*="eyebrow"], [class*="kicker"], [class*="__tag"]) {
	text-transform: none;
	letter-spacing: 0;
}

/* Exceptions « noms de produit » : titre de fiche et titres de cartes gardent leur casse normale. */
body.sr-charte.single-product h1,
body.sr-charte.srkhv2-product-page h1,
body.sr-charte .srp-v4-title,
body.sr-charte :is([class*="product-card"], [class*="__card"], [class*="loop"], .products) :is(h2, h3, h4) {
	text-transform: none;
}

/* Barre du haut et pied de page : brun terre, texte crème (dernière planche de la charte). */
body.sr-charte .sr-topbar {
	background: var(--sc-ink);
	color: var(--sc-cream);
}
body.sr-charte .sr-footer {
	background: var(--sc-ink);
	color: rgba(253, 246, 234, .84);
	border-top: 0;
}
body.sr-charte .sr-footer :is(.sr-footer-intro, .sr-footer-help-card) {
	border-color: rgba(253, 246, 234, .16);
}
body.sr-charte .sr-footer .sr-footer-help-card {
	background: rgba(253, 246, 234, .07);
}
body.sr-charte .sr-footer-bottom {
	background: rgba(0, 0, 0, .22);
	border-color: rgba(253, 246, 234, .12);
}
body.sr-charte .sr-footer-families {
	display: flex;
	gap: 6px;
	max-width: var(--sr-container, 1240px);
	margin: 0 auto;
	padding: 0 24px 28px;
	box-sizing: border-box;
}
body.sr-charte .sr-footer-families span {
	flex: 1 1 0;
	height: 8px;
	border-radius: var(--sc-r-pill);
}
body.sr-charte .sr-footer-families span:nth-child(1) { background: var(--sc-fam-potageres); }
body.sr-charte .sr-footer-families span:nth-child(2) { background: var(--sc-fam-aromatiques); }
body.sr-charte .sr-footer-families span:nth-child(3) { background: var(--sc-fam-fleurs); }
body.sr-charte .sr-footer-families span:nth-child(4) { background: var(--sc-fam-anciennes); }
body.sr-charte .sr-footer-families span:nth-child(5) { background: var(--sc-fam-bio); }
body.sr-charte .sr-footer-families span:nth-child(6) { background: transparent; box-shadow: inset 0 0 0 2px var(--sc-cream); }
body.sr-charte .sr-footer-families span:nth-child(7) { background: var(--sc-fam-kids); }

/* Fonds restés dans l'ancienne palette (fiche produit V2.2) : mêmes rôles, couleurs de la charte. */
body.sr-charte .srp2-editorial-v22 :is(.srp2-editorial-maturity, .srp2-editorial-compare) { background: var(--sc-canvas); }
body.sr-charte .srp2-editorial-v22 .srp2-editorial-tasting { background: var(--sc-ink); color: var(--sc-cream); }

/* Anneau de focus : trait plein brun terre (contraste ≥ 3:1 sur fonds clairs), crème sur les fonds sombres.
   Remplace les anneaux rouges à 35 % d'opacité (WCAG 1.4.11, audit du 2 octobre 2026). */
body.sr-charte :focus-visible,
body.sr-charte.sr-search-v2-active .sr-search--v2 :where(a, button):focus-visible {
	outline: 3px solid var(--sc-ink);
	outline-offset: 2px;
}
body.sr-charte :is(.sr-topbar, .sr-footer, .sr-prefooter, .srhp-house) :focus-visible {
	outline-color: var(--sc-cream);
}

/* Boutons en bas de casse, comme la charte (p. 35 : « voir les faciles ») — 20 octobre 2026.
   Les noms propres et marques gardent leur casse (classe .sr-nom-propre). */
body.sr-charte :is(.sr-button, .sr-bande__btn, .sr-mega-cta, .sr-consent__btn, .sr-card-button, .single_add_to_cart_button, .src3-btn, .srce-button, .srce-text-button, .srg3-btn, .srp3-btn, .srac-btn, .sr-ty3-btn, .sr-ty3-guide__btn, .sr-tiroir__commander, .forminator-button-submit, .sr-search__submit, .sr-tabs__tab, .checkout-button, #place_order, .woocommerce .button, main button[type="submit"], main input[type="submit"]) { text-transform: lowercase; }
body.sr-charte .sr-nom-propre { text-transform: none; }

/* Cases à cocher et boutons ronds de la charte, sur tout le site (21 oct. 2026) : bordure brune,
   fond vert clair et coche brune une fois cochée. Spécificité nulle : les filtres du catalogue
   (case masquée + carré dessiné aux couleurs de l'univers) gardent leur propre rendu. */
:where(input[type="checkbox"]:not(.srce-filter-option input, .sr-catalog-filter-option input)), :where(input[type="radio"]:not(.srce-filter-option input, .sr-catalog-filter-option input)) { appearance: none; -webkit-appearance: none; flex: 0 0 auto; box-sizing: border-box; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; margin: 0 10px 0 0; vertical-align: middle; background: var(--sc-surface); border: 2px solid var(--sc-ink); border-radius: var(--sc-r-xs); cursor: pointer; }
:where(input[type="radio"]:not(.srce-filter-option input, .sr-catalog-filter-option input)) { width: 22px; min-width: 22px; height: 22px; min-height: 22px; border-radius: 50%; }
:where(input[type="checkbox"]:not(.srce-filter-option input, .sr-catalog-filter-option input)):checked { border-color: var(--sc-ink); background: var(--sc-green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1a12' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat; }
:where(input[type="radio"]:not(.srce-filter-option input, .sr-catalog-filter-option input)):checked { border-color: var(--sc-ink); background: radial-gradient(circle, var(--sc-ink) 0 4px, var(--sc-green-light) 4.5px); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .45; cursor: not-allowed; }
/* WooCommerce écrit style="width:auto" sur les cartes enregistrées : la taille minimale garde la case ronde. */