/*
Theme Name: Épicerie Racines
Theme URI: https://www.figma.com/design/6q9X5ouLZKAF5esFRigqZt/Epicerie-Racines
Author: Maximilien HÉDAN
Description: Thème WordPress / WooCommerce sur mesure pour l'épicerie fine fictive « Épicerie Racines », intégré à partir des maquettes Figma desktop (1280 px) et mobile (402 px) : Accueil, Produit, Producteur, Contact, Panier, Connexion, Livraison et paiement, Commande confirmée.
Version: 1.8.32
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: racines
*/

/* ==========================================================================
   Sommaire
   1. Polices
   2. Tokens de design (variables Figma)
   3. Base
   4. En-tête (logo, navigation, recherche, panier)
   5. Bandeau d'informations (superposé au hero)
   6. Boutons
   7. Hero
   8. Catégories
   9. Produits phares
  10. Producteurs
  11. Pied de page
  12. Responsive (règles de repli, hors maquette desktop)
   ========================================================================== */

/* 1. Polices ---------------------------------------------------------------
   Redaction (titres) et Jost (texte) — licence SIL OFL 1.1, hébergées en local
   (pas de requête vers un CDN : RGPD + performance). */
@font-face {
	font-family: "Redaction";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/redaction-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Redaction";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/redaction-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("assets/fonts/jost-latin-ext-300-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("assets/fonts/jost-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/jost-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/jost-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/jost-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/jost-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/jost-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/jost-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/jost-latin-ext-500-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/jost-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/jost-latin-ext-400-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/jost-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens de design ------------------------------------------------------
   Reprennent les variables et styles Figma, nom pour nom. */
:root {
	color-scheme: light; /* le site n'a qu'un thème clair : menus et champs natifs restent clairs même si le système est en mode sombre */
	/* Couleurs (variables Figma) */
	--color-graphite: #2f2a22;
	--color-honey-bronze: #e8b04b;
	--color-dusty-olive: #7a8b5e;
	--color-antique-white: #f2e8d9;
	--color-cinnamon-wood: #b85c39;
	--color-white: #ffffff; /* Backgrounds/Primary */
	--color-black: #000000; /* Grays/Black */

	/* Valeurs propres aux composants (relevées dans le calque) */
	--color-olive-deep: rgb(95, 111, 69); /* fond « Product Info », sous un voile noir à 20 % */
	--color-olive-mid: #6b7c50; /* survol du bouton crème : texte blanc dessus à 4,5 : 1 (le sauge #7a8b5e n'en donnait que 3,7 : 1) */
	--color-olive-ink: #4a5736; /* texte olive foncé des boutons crème (≈ 6,4 : 1 sur le blanc antique) */
	--gradient-producer: linear-gradient(to bottom, #6e8052 0%, #566540 48%, #3f4a2c 100%); /* fond des cartes producteurs : olive clair → olive foncé */
	--color-olive-hover: #5a6844; /* bouton olive au survol (variante « Hover » de la maquette) */
	--shadow-button-hover: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3); /* ombre des boutons au survol */
	--hover-quick: 100ms ease-out; /* durée des survols de la maquette (animation Smart animate) */
	--scrim-hero: rgba(28, 28, 30, 0.55);
	--scrim-category: rgba(28, 28, 30, 0.3); /* photos des cartes catégories assombries comme dans la maquette (1.8.25) */
	--scrim-product: rgba(28, 28, 30, 0.1); /* voile léger sous le dégradé des cartes produits (1.8.25) */
	--scrim-producer: linear-gradient(to top, rgba(28, 28, 30, 0.72) 0%, rgba(28, 28, 30, 0.62) 35%, rgba(28, 28, 30, 0.4) 70%); /* plus sombre en bas, sous le lieu et la description (1.8.16) : texte blanc antique lisible même sur une photo claire */
	--scrim-producers-m: rgba(28, 28, 30, 0.65); /* bloc « Nos producteurs » mobile : texte au milieu de la photo */
	--producer-photo-position: 100% 50%; /* cadrage des portraits de producteur : côté droit de la photo, comme la maquette */

	/* Typographie */
	--font-display: "Redaction", Georgia, "Times New Roman", serif;
	--font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--fs-body: 1.0625rem; /* Corps de texte – Desktop : 17 px */
	--fs-body-sm: 1rem; /* Corps de texte – Mobile : 16 px */
	--fs-small: 0.8125rem; /* Texte secondaire – mobile : 13 px */
	--fs-subtitle: 1.375rem; /* Sous-titre – Desktop : 22 px */
	--fs-section: 2rem; /* Titre Section – Desktop : 32 px */
	--fs-section-mobile: 1.75rem; /* Titre – Mobile : 28 px */
	--fs-hero: 3rem; /* 48 px */
	--fs-brand: 1.75rem; /* 28 px */
	/* Interligne « auto » de Redaction tel que Figma le calcule (≈ 1,2 × la taille, arrondi au pixel) ;
	   le navigateur donnerait 1 px de plus par ligne, d'où des valeurs explicites. */
	--lh-subtitle: 26px; /* 22 px */
	--lh-brand: 34px; /* 28 px */
	--lh-section: 38px; /* 32 px */
	--lh-hero: 58px; /* 48 px */

	/* Effets */
	--shadow-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); /* M3/Elevation Light/1 */
	--shadow-text-brand: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-text-carousel: 0 4px 10px rgba(75, 87, 223, 0.15); /* txt-shadow-carrousel */
	--filter-products: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.15));
	--shadow-panel: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15); /* ombre des encadrés (pages de texte, panier, paiement, compte) : même rendu que --filter-products, en box-shadow */

	/* Formes et espacements */
	--radius-sm: 5px;
	--radius-lg: 20px;
	--gutter: 16px;
	--card-growth: 0.25; /* cartes produits et producteurs de l'accueil : part de l'agrandissement conservée au-delà de 1280 px (0 = elles gardent la taille de la maquette, 0.25 = valeur actuelle, 0.5 = un peu plus grandes, 1 = elles remplissent toute la largeur) */
}

/* 3. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--color-antique-white);
	color: var(--color-graphite);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

/* Motif « sillons » (assets/img/sillons.svg) : depuis la 1.8.15, seulement sur l'accueil et la page Contact (classe « has-motif » posée par
   racines_motif_body_class(), inc/woocommerce.php) ; les autres pages ont le fond blanc antique uni. */
body.has-motif {
	background-image: url("assets/img/sillons.svg");
	background-size: 360px 168px;
}

/* Sur les pages courtes (404, recherche sans résultat, panier vide), le pied de page reste en bas de la fenêtre : le motif de fond ne se voit pas sous lui. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-main {
	flex: 1 0 auto;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	background: var(--color-white);
	clip: auto;
	clip-path: none;
	color: var(--color-graphite);
}

.section-title {
	font-family: var(--font-display);
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: var(--lh-section);
	color: var(--color-graphite);
	white-space: nowrap;
}

/* 4. En-tête --------------------------------------------------------------- */
/* En-tête + bandeau d'informations : collés en haut de l'écran au défilement, sur toutes les pages et à toutes les largeurs.
   Sur l'accueil à partir de 1280 px, le bandeau est posé en superposition sous l'en-tête (maquette : y = 109 px, 1 px sous
   l'en-tête) et recouvre le haut du hero, dont le texte démarre juste en dessous ; ailleurs il prend sa place sous l'en-tête. */
.site-top {
	position: sticky;
	z-index: 50;
	top: var(--racines-adminbar, 0px);
}

/* Barre d'administration de WordPress (visiteur connecté) : 32 px, 46 px sous 783 px, et plus collée (elle défile) sous 601 px */
body.admin-bar {
	--racines-adminbar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--racines-adminbar: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--racines-adminbar: 0px;
	}
}

/* Les ancres et le focus clavier ne doivent pas se retrouver sous l'en-tête collant (hauteur mesurée par racines.js, valeur de repli sinon) */
html {
	scroll-padding-top: calc(var(--site-top-offset, 165px) + 8px);
}

.site-header {
	position: relative;
	z-index: 2;
	background: var(--color-dusty-olive);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 110px;
	padding: var(--gutter);
	overflow: hidden;
	overflow: clip;
}

.brand {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: flex-start;
	overflow: hidden;
	overflow: clip;
}

.brand__name {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	padding: 5px 0;
	overflow: hidden;
	overflow: clip;
	color: var(--color-graphite);
	font-family: var(--font-display);
	font-size: var(--fs-brand);
	font-weight: 700;
	line-height: var(--lh-brand);
	text-shadow: var(--shadow-text-brand);
}

.brand__name span {
	width: 100%;
}

/* Logo : SVG 88 × 88 dans une colonne de 36 px de large, rognée (comme dans Figma) */
.brand__logo {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 36px;
	overflow: hidden;
	overflow: clip;
}

.brand__logo img {
	flex: none;
	max-width: none;
}

.main-nav,
.main-nav ul,
.main-nav li {
	display: contents; /* les liens participent à la répartition (justify-between) de l'en-tête, comme dans la maquette */
}

/* Lien « Mon compte » / « Connexion » du menu burger : mobile seulement (sur ordinateur et tablette, l'icône de compte de l'en-tête le remplace). */
.main-nav .main-nav__account {
	display: none;
}

.main-nav a {
	flex: none;
	color: var(--color-antique-white);
	font-family: var(--font-display);
	font-size: var(--fs-subtitle);
	font-weight: 700;
	line-height: var(--lh-subtitle);
	text-shadow: var(--shadow-text-brand); /* ombre de la maquette (identique à celle du nom de la boutique) */
	white-space: nowrap;
}

.search-box {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	width: 370px; /* 10 + 30 + 10 + texte + 168 dans la maquette */
	height: 29px;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
	border-radius: 35px;
	background: var(--color-antique-white);
	box-shadow: var(--shadow-elevation-1);
}

.search-box__icon {
	position: relative;
	display: block;
	flex: none;
	width: 30px;
	height: 30px;
}

.search-box__icon img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
}

.search-box__field {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-graphite);
	font: 400 var(--fs-body-sm) / normal var(--font-body);
}

.search-box__field::placeholder {
	color: var(--color-graphite);
	opacity: 1;
}

.search-box__field:focus {
	outline: none;
}

.search-box:focus-within {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: 2px;
}

/* Compte et panier : un seul groupe à droite de l'en-tête, avec un écart fixe. (Distribués comme les autres éléments par « space-between »,
   ils s'éloignaient l'un de l'autre à mesure que la fenêtre s'élargissait : plus de 160 px d'écart sur un écran de 1920 px.) */
.header-actions {
	display: flex;
	flex: none;
	gap: 36px;
	align-items: center;
}

/* Bouton « Mon compte » (maquette : pictogramme profil de 30 × 30 px, blanc cassé, à gauche du panier). */
.account-link {
	position: relative;
	display: block;
	flex: none;
	width: 30px;
	height: 30px;
}

.account-link img {
	position: absolute;
	top: -5px; /* le dessin (40 × 42 px) laisse 5 px autour du pictogramme de 30 × 30 px pour l'ombre, comme celui du panier */
	left: -5px;
	display: block;
	width: 40px;
	height: 42px;
	max-width: none;
	transition: opacity var(--hover-quick);
}

.account-link:hover img {
	opacity: 0.8;
}

.cart-link {
	position: relative;
	display: block;
	flex: none;
	width: 36px;
	height: 36px;
}

.cart-link img {
	position: absolute;
	top: 0;
	left: -4.51%;
	max-width: none;
}

/* Pastille du nombre d'articles (maquette : cercle terracotta de 15 px, trait blanc cassé de 1 px, chiffre Jost 13 px),
   posée en haut à droite du pictogramme. Absente quand le panier est vide. */
.cart-link__count {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border: 1px solid var(--color-antique-white);
	border-radius: 15px;
	background: var(--color-cinnamon-wood);
	color: var(--color-white);
	font: 400 var(--fs-small) / 1 var(--font-body);
	pointer-events: none;
}

.cart-link__count[hidden] {
	display: none;
}

/* 5. Bandeau d'informations ------------------------------------------------ */
/* Le bandeau est sur toutes les pages : il prend sa place sous l'en-tête et repousse le contenu. */
.top-bar {
	position: relative;
	z-index: 1;
	height: 50px;
	overflow: hidden;
	overflow: clip;
	background: var(--color-cinnamon-wood);
	--marquee-duration: 40s;
}

/* Accueil : depuis la 1.8.13, le bandeau ne recouvre plus le haut du hero (maquette mise à jour) : le hero commence 16 px sous lui (§7). */

/* Texte qui défile en continu, à toute largeur : la piste porte deux listes identiques (la 2e, masquée aux technologies d'assistance,
   boucle sans saut) ; chaque liste est au moins aussi large que l'écran, les informations s'y répartissent quand elles tiennent. */
.top-bar__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: max-content;
	animation: racines-marquee var(--marquee-duration) linear infinite;
	will-change: transform;
}

.top-bar__list {
	display: flex;
	flex: none;
	gap: 48px;
	align-items: center;
	justify-content: space-around;
	box-sizing: border-box;
	min-width: 100vw;
	padding-right: 48px;
}

/* Le défilement s'arrête au survol et pendant la navigation au clavier dans le bandeau (téléphone) */
.top-bar:hover .top-bar__track,
.top-bar:focus-within .top-bar__track {
	animation-play-state: paused;
}

/* Vitesse à peu près constante (≈ 40 px/s) : la liste est aussi large que l'écran sur les grands écrans */
@media (min-width: 1500px) {
	.top-bar {
		--marquee-duration: 45s;
	}
}

@media (min-width: 1900px) {
	.top-bar {
		--marquee-duration: 55s;
	}
}

@media (min-width: 2400px) {
	.top-bar {
		--marquee-duration: 70s;
	}
}

.top-bar__item {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	justify-content: center;
	color: var(--color-antique-white);
	font-size: var(--fs-body);
	line-height: normal;
	white-space: nowrap;
}

.top-bar__icon {
	position: relative;
	display: block;
	flex: none;
}

.top-bar__icon img {
	position: absolute;
	max-width: none;
}

.top-bar__icon--pin {
	width: 15px;
	height: 15px;
	overflow: hidden;
	overflow: clip;
}
.top-bar__icon--pin img {
	top: 0;
	left: 15%;
}
.top-bar__icon--phone {
	width: 16px;
	height: 16px;
}
.top-bar__icon--phone img {
	top: 0;
	left: 0;
}
.top-bar__icon--clock {
	width: 11.25px;
	height: 11.25px;
}
.top-bar__icon--clock img {
	top: -5.93%;
	left: -5.93%;
}
.top-bar__icon--delivery {
	width: 15px;
	height: 15px;
}
.top-bar__icon--delivery img {
	top: 0;
	left: 0;
}
/* Livraison offerte (1.8.30) : cadeau au trait, même gabarit que le camion */
.top-bar__icon--gift {
	width: 15px;
	height: 15px;
}
.top-bar__icon--gift img {
	top: 0;
	left: 0;
}

/* 6. Boutons --------------------------------------------------------------- */
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 15px;
	border-radius: var(--radius-sm);
	line-height: normal;
	white-space: nowrap;
	transition: background-color var(--hover-quick), color var(--hover-quick), box-shadow var(--hover-quick);
}

.btn--olive {
	width: 196px;
	height: 45px;
	background: var(--color-dusty-olive);
	color: var(--color-white);
	font-size: var(--fs-body);
}

.btn--terracotta {
	background: var(--color-cinnamon-wood);
	color: var(--color-antique-white);
	font-size: var(--fs-small);
}

/* Bouton crème, pour les fonds olive (cartes producteurs) : même teinte que le panier des cartes produits */
.btn--cream {
	background: var(--color-antique-white);
	color: var(--color-olive-ink);
	font-size: var(--fs-small);
}

/* Survols (variantes « Hover » de la maquette) : olive → olive foncé, terracotta → miel, texte et ombre assortis */
.btn--olive:hover {
	background: var(--color-olive-hover);
	color: var(--color-antique-white);
	box-shadow: var(--shadow-button-hover);
}

.btn--terracotta:hover {
	background: var(--color-honey-bronze);
	color: var(--color-graphite);
	box-shadow: var(--shadow-button-hover);
}

.btn--cream:hover {
	background: var(--color-olive-mid);
	color: var(--color-white);
	box-shadow: var(--shadow-button-hover);
}

.btn--cream:focus-visible {
	outline-color: var(--color-antique-white); /* le liseré orange se perdrait sur le fond olive */
}

/* 7. Hero ------------------------------------------------------------------ */
.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 547px;
	padding: 0 var(--gutter);
	overflow: hidden;
	overflow: clip;
}

/* Bureau : le panneau garde la hauteur de la maquette (547 px) et commence 16 px sous le bandeau, comme ses marges latérales */
@media (min-width: 1101px) {
	.hero {
		height: calc(547px + var(--gutter));
		padding-top: var(--gutter);
	}
}

.hero__panel {
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
	min-width: 1px;
	padding: 50px 0;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-lg);
	background: var(--color-graphite);
}

.hero__bg {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	pointer-events: none;
}

.hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	background: var(--scrim-hero);
}

.hero__copy {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	width: 100%;
	color: var(--color-antique-white); /* blanc antique (1.8.16) : contraste ≥ 4,7 : 1 sur la photo assombrie */
	text-align: center;
}

.hero__title {
	width: 100%;
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 700;
	line-height: var(--lh-hero);
}

.hero__title-line {
	display: block;
	white-space: break-spaces; /* l'espace final de la 1re ligne est conservé, comme dans la maquette */
}

.hero__subtitle {
	width: 100%;
	font-family: var(--font-display);
	font-size: var(--fs-subtitle);
	font-weight: 400;
	line-height: var(--lh-subtitle);
}

.hero__cta {
	position: relative;
	flex: none;
}

/* 8. Catégories ------------------------------------------------------------ */
.categories {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 202px;
	padding: 0 var(--gutter) 20px;
	overflow: hidden;
	overflow: clip;
}

.category-card {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 152px;
	padding-bottom: 5px;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-sm);
	background: var(--color-dusty-olive);
}

.category-card__image {
	position: relative;
	flex: 1 0 0;
	width: 100%;
	min-height: 1px; /* photo bord à bord, sans liseré (1.8.25) : comme la maquette et les cartes produits */
}

.category-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--scrim-category);
	pointer-events: none;
}

.category-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

.category-card__label {
	flex: none;
	color: var(--color-antique-white);
	font-size: var(--fs-body);
	line-height: normal;
	text-align: center;
	text-shadow: var(--shadow-text-carousel);
	white-space: nowrap;
}

/* Grand écran (≥ 1101 px) : les six cartes se partagent toute la largeur, comme sur la maquette (à 1280 px : 190 px de large, 21,6 px d'écart),
   au lieu de rester à 190 px avec des vides de plus en plus grands. La photo grandit avec la carte (mêmes proportions) ; le texte garde sa taille.
   Au-delà de 2560 px de large, les cartes cessent de grandir. En dessous de 1280 px, elles rétrécissent au lieu de déborder. */
@media (min-width: 1101px) {
	.categories {
		container-type: inline-size;
		align-items: flex-start;
		gap: 21.6px;
		height: auto;
		padding: 24px var(--gutter) 35px; /* écart de 24 px sous le hero (15 px avant la 1.8.13) */
	}

	.category-card {
		--card-w: calc((min(100cqw, 2528px) - 5 * 21.6px) / 6);
		width: var(--card-w);
		height: auto;
	}

	.category-card__image {
		flex: none;
		height: calc(var(--card-w) * 118 / 190);
	}
}

/* Fond du site : le motif « sillons » (lignes ondulées de labour, olive et fil de miel) est posé sur `body` (voir §3) et se voit sur toutes les pages. Sur l'accueil,
   le hero, les catégories, les produits phares et les producteurs sont transparents : le motif passe derrière sans aucun raccord visible. */

/* 9. Produits phares ------------------------------------------------------- */
.home-featured {
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: center;
	padding: 20px var(--gutter);
	overflow: hidden;
	overflow: clip;
}

.home-featured__shadow {
	display: flex;
	flex: none;
	align-items: flex-start;
	width: 100%;
	overflow: hidden;
	overflow: clip;
	filter: var(--filter-products);
}

.home-featured__list {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	justify-content: space-between;
	min-width: 1px;
	overflow: hidden;
	overflow: clip;
}

.home-featured__list > li {
	display: flex;
	flex: none;
}

.product-card {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	width: 177px;
	height: 313.608px;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-sm);
}

.product-card__media {
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	min-height: 1px;
	overflow: hidden;
	overflow: clip;
	background: var(--color-graphite);
	color: var(--color-white);
}

.product-card__photo {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.product-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Recadrage propre à la photo du saumon (106,23 % de haut, décalée) — voir data/demo */
.product-card__photo--crop {
	overflow: hidden;
}
.product-card__photo--crop img {
	inset: auto;
	top: -0.03%;
	left: -0.24%;
	height: 106.23%;
	object-fit: fill;
}

.product-card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--scrim-product);
	background-image: linear-gradient(179.82deg, rgba(0, 0, 0, 0) 29.782%, rgba(0, 0, 0, 0.7) 80.045%);
}

.product-card--tinted .product-card__photo::after {
	background-image: linear-gradient(179.82deg, rgba(0, 0, 0, 0.07) 30.044%, rgba(0, 0, 0, 0.7) 79.934%);
}

.product-card__label {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	padding: 10px;
	line-height: normal;
}

.product-card__name {
	font-size: var(--fs-body-sm);
}

.product-card__sub {
	font-size: var(--fs-small);
}

.product-card__info {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 63.608px;
	padding: 10px 8px;
	overflow: hidden;
	overflow: clip;
	background-color: var(--color-olive-deep);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
	color: var(--color-antique-white);
}

.product-card__meta {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 100%;
	line-height: normal;
	white-space: nowrap;
}

.product-card__price {
	font-size: var(--fs-body-sm);
}

.product-card__weight {
	font-size: var(--fs-small);
}

.product-card__cart {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 35.882px;
	height: 35.882px;
	padding: 6.582px;
	overflow: hidden;
	overflow: clip;
	border-radius: 5.13px;
	background: var(--color-antique-white);
}

.product-card__cart img {
	flex: none;
	max-width: none;
}

/* Survol (variante « Hover » de la maquette, sans animation) : fond olive, pictogramme clair */
.product-card__cart .is-hover {
	display: none;
}

.product-card__cart:hover,
.product-card__cart:focus-visible {
	background: var(--color-dusty-olive);
}

.product-card__cart:hover img:not(.is-hover),
.product-card__cart:focus-visible img:not(.is-hover) {
	display: none;
}

.product-card__cart:hover .is-hover,
.product-card__cart:focus-visible .is-hover {
	display: block !important; /* le pictogramme de survol est masqué en ligne dans le HTML : sans ce style, on ne voit jamais les deux à la fois */
}

/* Compteur « − 2 + » qui remplace le bouton panier quand le produit est au panier (états « AddMore » / « AddMax » de la maquette) :
   100 × 43,61 px, fond blanc cassé, deux blocs olive de 30 px (poubelle quand il n'y en a qu'un, « − » sinon) autour du nombre.
   À la quantité maximale, le bloc « + » s'estompe (60 %). Piloté par assets/js/cart.js. */
.product-card__cart[hidden],
.qty-pill[hidden] {
	display: none !important;
}

.qty-pill {
	--pill-ink: var(--color-white);
	--pill-block: var(--color-dusty-olive);
	--pill-block-dim: rgba(122, 139, 94, 0.6);
	display: flex;
	flex: 0 1 100px;
	align-items: stretch;
	width: 100px;
	min-width: 88px;
	height: 43.61px;
	overflow: hidden;
	overflow: clip;
	border-radius: 5.13px;
	background: var(--color-antique-white);
	color: var(--color-black);
	font: 400 1rem / 1 var(--font-body);
}

.qty-pill__btn {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--pill-block);
	color: var(--pill-ink);
	cursor: pointer;
	transition: background-color var(--hover-quick);
}

.qty-pill__btn:not([aria-disabled="true"]):hover {
	background: var(--pill-block-hover, var(--color-olive-hover));
	color: var(--pill-ink-hover, var(--pill-ink));
}

.qty-pill__btn svg {
	display: block;
	flex: none;
	max-width: none;
}

.qty-pill__btn:focus-visible {
	outline: 3px solid var(--color-cinnamon-wood);
	outline-offset: -3px;
}

.qty-pill__btn[aria-disabled="true"] {
	background: var(--pill-block-dim);
	cursor: not-allowed;
}

.qty-pill__count {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	font-variant-numeric: tabular-nums;
}

/* Une seule quantité : la poubelle remplace « − » */
.qty-pill__trash {
	display: none;
}

.qty-pill[data-qty="1"] .qty-pill__trash {
	display: flex;
}

.qty-pill[data-qty="1"] .qty-pill__minus {
	display: none;
}

.qty-pill__minus {
	display: flex;
}

/* Quand le compteur est affiché, le prix cède de la place s'il le faut (le conditionnement passe en dessous) */
.product-card__info:has(.qty-pill:not([hidden])) .product-card__meta {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	overflow: clip;
}

.product-card__info:has(.qty-pill:not([hidden])) .product-card__meta > span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Message du panier (stock atteint, panier injoignable) */
.cart-toast {
	position: fixed;
	z-index: 120;
	bottom: 24px;
	left: 50%;
	max-width: min(420px, calc(100vw - 32px));
	padding: 12px 18px;
	border-radius: var(--radius-sm);
	background: var(--color-graphite);
	box-shadow: var(--shadow-button-hover);
	color: var(--color-antique-white);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-jost);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.cart-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.cart-toast {
		transition: none;
	}
}

/* Grand écran (≥ 1101 px) : six cartes qui se partagent la largeur (à 1280 px : 177 × 313,6 px, 37,2 px d'écart), photo proportionnelle, bandeau de prix inchangé. */
@media (min-width: 1101px) {
	.home-featured__shadow {
		container-type: inline-size;
	}

	/* Sept produits (1.8.13) : la carte suit la même croissance qu'avec six produits, mais rétrécit si besoin pour garder au moins 16 px entre deux cartes
	   (164,6 px de large à 1280 px au lieu des 177 px de la maquette à six produits ; même taille qu'avant dès 1440 px environ). */
	.home-featured .product-card {
		--fluid-w: calc((min(100cqw, 2528px) - 5 * 37.2px) / 6);
		--fit-w: calc((min(100cqw, 2528px) - 6 * var(--gutter)) / 7);
		--card-w: min(var(--fit-w), var(--fluid-w), calc(177px + (var(--fluid-w) - 177px) * var(--card-growth)));
		width: var(--card-w);
		height: auto;
	}

	.home-featured .product-card__media {
		flex: none;
		height: calc(var(--card-w) * 250 / 177);
	}
}

/* Effets de survol (option A « Discret », 1.8.21 ; cartes produits de tout le site en 1.8.22) ------------------------------------------------------
   Menu : fin trait blanc antique qui se déploie depuis le centre. Profil et panier : pictogramme blanc, légèrement agrandi.
   Catégories : la photo zoome doucement, le bandeau fonce (#6B7C50). Cartes produits (accueil, Boutique, catégories, produits similaires,
   produits d'un producteur, depuis la 1.8.22) : la carte monte de 4 px, la photo zoome.
   Seulement avec une souris (pas d'effet « collé » au toucher) ; les mouvements sont coupés si l'appareil demande moins d'animations.
   Les mêmes effets s'affichent au clavier (:focus-visible). Les cartes producteurs n'en ont pas. */
.main-nav a::after {
	content: none;
}

.category-card__image,
.product-card__photo {
	overflow: hidden;
	overflow: clip;
}

/* Marge haute : la carte qui monte de 4 px n'est pas rognée par les conteneurs (qui coupent ce qui dépasse) */
.home-featured__shadow,
.home-featured__list {
	margin-top: -6px;
	padding-top: 6px;
}

@media (min-width: 721px) {
	.main-nav a {
		position: relative;
	}

	.main-nav a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -6px;
		left: 0;
		height: 1.5px;
		background: var(--color-antique-white);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); /* même relief que l'ombre du texte */
		transform: scaleX(0);
		pointer-events: none;
	}

	.main-nav a:focus-visible::after {
		transform: scaleX(1);
	}
}

.account-link:focus-visible img,
.cart-link:focus-visible > img {
	filter: saturate(0) brightness(1.12); /* blanc antique → blanc */
}

.category-card:focus-visible {
	background: var(--color-olive-mid);
}

@media (hover: hover) {
	.account-link:hover img,
	.cart-link:hover > img {
		opacity: 1;
		filter: saturate(0) brightness(1.12);
	}

	.category-card:hover {
		background: var(--color-olive-mid);
	}
}

@media (hover: hover) and (min-width: 721px) {
	.main-nav a:hover::after {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.main-nav a::after {
		transition: transform 0.2s ease-out;
	}

	.account-link img,
	.cart-link > img {
		transition: transform 0.15s ease-out, filter 0.15s ease-out;
	}

	.category-card {
		transition: background-color 0.2s ease-out;
	}

	.category-card__image img,
	.product-card__photo img {
		transition: transform 0.35s ease-out;
	}

	.product-card {
		transition: transform 0.2s ease-out;
	}

	.account-link:focus-visible img,
	.cart-link:focus-visible > img {
		transform: scale(1.08);
	}

	.category-card:focus-visible .category-card__image img {
		transform: scale(1.06);
	}

	.product-card:has(:focus-visible) {
		transform: translateY(-4px);
	}

	.product-card:has(:focus-visible) .product-card__photo img {
		transform: scale(1.05);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.account-link:hover img,
	.cart-link:hover > img {
		transform: scale(1.08);
	}

	.category-card:hover .category-card__image img {
		transform: scale(1.06);
	}

	.product-card:hover {
		transform: translateY(-4px);
	}

	.product-card:hover .product-card__photo img {
		transform: scale(1.05);
	}
}

/* 10. Producteurs ---------------------------------------------------------- */
.producers {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	padding: 20px var(--gutter);
	overflow: hidden;
	overflow: clip;
}

.producers__list {
	display: flex;
	flex: none;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
}

.producer-card {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-lg);
	background: var(--gradient-producer);
	filter: var(--filter-products); /* même ombre que les cartes produits */
}

.producer-card__name {
	flex: none;
	color: var(--color-antique-white);
	text-shadow: var(--shadow-text-brand);
	font-size: var(--fs-subtitle);
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
}

.producer-card__visual {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 370px;
	height: 299px;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
	border-radius: var(--radius-lg);
	background: var(--color-graphite);
}

.producer-card__bg {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	pointer-events: none;
}

.producer-card__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

.producer-card__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	background: var(--scrim-producer);
}

.producer-card__text {
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	justify-content: flex-end;
	min-width: 1px;
	height: 100%;
	overflow: hidden;
	overflow: clip;
	color: var(--color-antique-white); /* blanc antique (1.8.16) */
	font-size: var(--fs-small);
	line-height: normal;
}

.producer-card__place {
	display: flex;
	flex: none;
	gap: 5px;
	align-items: center;
	width: 100%;
	overflow: hidden;
	overflow: clip;
}

.producer-card__pin {
	position: relative;
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	overflow: hidden;
	overflow: clip;
}

.producer-card__pin img {
	position: absolute;
	top: 0;
	left: 12.17%;
	max-width: none;
}

.producer-card__desc {
	width: 100%;
	min-height: 2lh; /* deux lignes réservées : la ligne « lieu » reste à la même hauteur d'une carte à l'autre (maquette : paragraphe vide ajouté à la carte 2) */
}

.producer-card .btn {
	flex: none;
}

/* Grand écran (≥ 1101 px) : trois cartes qui se partagent la largeur (à 1280 px : 390 px de large, 29 px d'écart), photo de 370 × 299 px proportionnelle.
   Réservé à l'accueil : la page « Producteurs » garde des cartes de 390 px. */
@media (min-width: 1101px) {
	.producers__list {
		container-type: inline-size;
	}

	.producers .producer-card {
		--fluid-w: calc((min(100cqw, 2508px) - 2 * 29px) / 3);
		--card-w: min(var(--fluid-w), calc(390px + (var(--fluid-w) - 390px) * var(--card-growth)));
		width: var(--card-w);
	}

	.producers .producer-card__visual {
		width: 100%;
		height: auto;
		aspect-ratio: 370 / 299;
	}
}

/* 11. Pied de page --------------------------------------------------------- */
.site-footer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: minmax(110px, auto) auto;
	row-gap: 5px;
	padding: 10px;
	overflow: hidden;
	overflow: clip;
	background: var(--color-dusty-olive);
	color: var(--color-white);
	font-size: 0.875rem;
	text-align: center;
}

.site-footer__col {
	align-self: start;
}

.site-footer__title {
	color: var(--color-honey-bronze);
	font-weight: 700;
}

.site-footer__col--nav li,
.site-footer__col--info li,
.site-footer__col--nav .site-footer__title,
.site-footer__col--info .site-footer__title {
	line-height: 22px;
}

.site-footer__col--help li,
.site-footer__col--help .site-footer__title {
	line-height: 25px;
}

.site-footer a[aria-current="page"],
.site-footer .current-menu-item > a {
	font-weight: 600;
}

.site-footer a[aria-current="page"]::before,
.site-footer .current-menu-item > a::before {
	content: "> ";
}

.site-footer__social {
	position: relative;
	justify-self: start;
	width: 315px;
	height: 107px;
	overflow: hidden;
	overflow: clip;
}

.site-footer__social-title {
	position: absolute;
	top: 12px;
	left: 191px;
	color: var(--color-honey-bronze);
	font-weight: 700;
	line-height: 25px;
	text-align: right;
	white-space: nowrap;
	transform: translate(-100%, -50%);
}

.site-footer__social-link {
	position: absolute;
	top: 35px;
	width: 36px;
	height: 36px;
	overflow: hidden;
	overflow: clip;
}

.site-footer__social-link img {
	position: absolute;
	max-width: none;
}

.site-footer__social-link--facebook {
	left: 191px;
}
.site-footer__social-link--instagram {
	left: 140px;
}
.site-footer__social-link--instagram img {
	top: 8.33%;
	left: 8.33%;
}
.site-footer__social-link--linkedin {
	left: 89px;
}
.site-footer__social-link--facebook img,
.site-footer__social-link--linkedin img {
	top: 0;
	left: 0;
}

.site-footer__legal {
	display: flex;
	grid-column: 1 / span 4;
	gap: 10px;
	align-items: center;
	justify-content: center;
	align-self: end;
	height: 110px;
	padding: 20px 14px;
	overflow: hidden;
	overflow: clip;
	border: 1px solid var(--color-black);
	background: var(--color-white);
	color: var(--color-black);
	font-size: var(--fs-small);
	text-align: left;
}

.site-footer__legal-logo {
	position: relative;
	flex: none;
	width: 133px;
	height: 78px;
	max-width: 232px;
	max-height: 138px;
}

.site-footer__legal-logo img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
}

.site-footer__legal-text {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 72px;
	white-space: nowrap;
}

.site-footer__legal-strong {
	font-weight: 600;
	line-height: 24px;
}

.site-footer__legal-text p:not(.site-footer__legal-strong) {
	line-height: 25px;
}

/* Contenu générique (pages, articles) — en attendant leurs maquettes */
.entry-wrap {
	max-width: 760px;
	margin: 40px auto;
	padding: 0 var(--gutter);
}

.entry__title {
	margin-bottom: 20px;
	font-family: var(--font-display);
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: var(--lh-section);
}

/* Liste de résultats (recherche, archives) : un h2 par élément sous l'unique h1 */
.entry__title--item {
	margin-bottom: 8px;
	font-size: 24px;
	line-height: 1.3;
}

.entry__title--item a:hover,
.entry__title--item a:focus-visible {
	text-decoration: underline;
}

.entry + .entry {
	margin-top: 30px;
}

/* Pages de texte (mentions légales, FAQ, CGV…), articles et résultats de recherche : le texte est posé dans un cadre blanc antique à coins arrondis et contour graphite,
   pour que les lignes ondulées du fond ne passent pas derrière les paragraphes. Ne concerne pas les pages WooCommerce du thème (panier, paiement, compte). */
.entry-wrap:not(.entry-wrap--shop) {
	max-width: 860px;
}

.entry-wrap:not(.entry-wrap--shop) > .entry {
	padding: 30px 38px 34px;
	border: 2px solid var(--color-graphite);
	border-radius: var(--radius-lg);
	background-color: var(--color-antique-white);
	box-shadow: var(--shadow-panel);
}

@media (max-width: 720px) {
	.entry-wrap:not(.entry-wrap--shop) > .entry {
		padding: 20px 16px 24px;
	}
}

/* 12. Responsive -----------------------------------------------------------
   La maquette fournie est la version desktop (1280 px). Les règles ci-dessous
   ne sont que des replis pour ne rien casser en dessous : à remplacer par la
   maquette mobile. Les tailles de texte mobiles viennent des styles Figma
   « Titre – Mobile » (28 px), « Corps de texte – Mobile » (16 px) et
   « Texte secondaire – mobile » (13 px). */

/* Bandeau : défilement automatique à toute largeur (voir « 5. Bandeau d'informations ») */
@keyframes racines-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Mouvement réduit : pas de défilement, les informations restent fixes (et se font défiler à la main si elles dépassent l'écran) */
@media (prefers-reduced-motion: reduce) {
	.top-bar__track {
		box-sizing: border-box;
		min-width: 100%;
		padding: 0 9px;
		animation: none !important;
		transform: none !important;
	}
	.top-bar {
		overflow-x: auto;
	}
	.top-bar__list {
		flex: 1 0 auto;
		justify-content: space-between;
		min-width: 0;
		padding-right: 0;
	}
	.top-bar__list--clone {
		display: none !important;
	}
}

@media (max-width: 1100px) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: 12px 24px;
		height: auto;
		min-height: 110px;
	}

	.search-box {
		width: 100%;
		max-width: 367px;
		order: 5;
	}

	.hero {
		height: auto;
		min-height: 420px;
		padding-top: var(--gutter);
		padding-bottom: var(--gutter);
	}

	.hero__panel {
		gap: 32px;
	}

	.categories {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 190px));
		gap: 16px;
		justify-content: space-between;
		height: auto;
		padding-top: 15px;
	}

	.category-card {
		width: 100%;
	}

	.home-featured__list {
		display: grid;
		grid-template-columns: repeat(3, 177px);
		gap: 20px 0;
		justify-content: space-between;
	}

	/* Tablette et mobile : six produits au plus (deux rangées de trois ; le mobile en masque encore deux, voir mobile.css) — le 7e n'apparaît que sur bureau */
	.home-featured__list > li:nth-child(n + 7) {
		display: none;
	}

	.producers__list {
		flex-wrap: wrap;
		gap: 20px;
		justify-content: center;
	}

	.site-footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		row-gap: 20px;
	}

	.site-footer__social {
		width: 100%;
	}

	.site-footer__legal {
		grid-column: 1 / -1;
		height: auto;
		flex-wrap: wrap;
	}

	.site-footer__legal-text {
		flex: 1 1 200px;
		min-width: 0;
		height: auto;
		white-space: normal;
	}
}