/* ==========================================================================
   Vitistim — mise en page et composants
   Aucune bibliothèque, aucun framework : le site est assez petit pour que du
   CSS écrit à la main reste plus court et plus lisible qu'une dépendance.
   ========================================================================== */

/* --- Remise à zéro ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	/* Les trois remplissages des plantes tracées, câblés sur la palette : changer
	   un vert de marque change le bandeau d'accueil ET les vignettes de programme,
	   sans toucher au fichier SVG. Posés sur body parce que les deux usages sont
	   loin l'un de l'autre dans la page. */
	--vs-feuille: var(--c-verdigris);
	--vs-feuille-claire: var(--c-verdigris-pale);
	--vs-fruit: var(--c-copper);

	margin: 0;
	font-family: var(--font-text);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	/* Les chiffres s'alignent en colonne partout : prix, dosages, tableaux. */
	font-variant-numeric: tabular-nums;
}

/* Les titres passent à la grotesque. Ils nomment (un produit, une rubrique) ;
   le texte courant explique. Deux voix, deux rôles.
   Ils sont en vert de marque, pas en vert foncé : à 1,34:1 du texte courant,
   le foncé se lisait comme du noir et la hiérarchie ne tenait qu'à la police.
   Le vert des titres est celui des feuilles du bandeau et des vignettes (6,6:1
   sur le fond, 5,8:1 au pire sur le lavis cuivre d'un produit phare). Le foncé
   reste aux aplats qui ferment la page — pied de page, encart tessinois. */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-4);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-verdigris);
	text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-md); letter-spacing: -0.01em; }

p, ul, ol, table, figure { margin: 0 0 var(--sp-4); }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-verdigris); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-copper); }

button, input, select, textarea { font: inherit; color: inherit; }

/* Un contour de focus visible partout : c'est ce qui rend le site utilisable
   entièrement au clavier, ce que l'ancien site ne permettait pas. */
:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Utilitaires --------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }

/* Colonne de lecture étroite.
   Elle limite la longueur de ligne sans quitter la grille du site : le conteneur
   garde la largeur commune, seuls ses enfants sont bridés. Auparavant la colonne
   elle-même était rétrécie puis recentrée, si bien que sur une page de contenu le
   titre commençait 240 px à droite du fil d'ariane, juste au-dessus. */
.wrap--narrow > * { max-width: var(--wrap-narrow); }

/* La page d'erreur, elle, est bien centrée : il n'y a rien d'autre à aligner. */
.wrap--narrow.notice-page { max-width: var(--wrap-narrow); }
.wrap--narrow.notice-page > * { max-width: none; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: var(--sp-3); top: -100px; z-index: 100;
	background: var(--c-verdigris); color: var(--c-text-invert);
	padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius) var(--radius);
	text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--c-text-invert); }

.stack > * + * { margin-top: var(--sp-4); }

/* Surtitre : rubrique, culture, mention « produit phare ». En cuivre, la seule
   couleur chaude de la palette, et donc la seule qui attire l'œil sans crier.
   `card__eyebrow` est le même objet dans une carte — déclarés ensemble pour
   qu'ils ne divergent pas. */
.eyebrow,
.card__eyebrow {
	font-family: var(--font-display);
	font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em;
	color: var(--c-copper-dark); margin: 0 0 var(--sp-3);
}
.card__eyebrow { margin: 0; letter-spacing: .14em; }

/* Chapô. */
.lede {
	font-size: var(--fs-md); line-height: 1.5;
	color: var(--c-text-muted); max-width: 54ch;
}

/* --- En-tête ------------------------------------------------------------- */

/* Deux rangs plutôt qu'un. Sur un seul, la marque, la recherche, les langues,
   le bouton et sept entrées de menu se disputaient la largeur : le menu passait
   à la ligne et le bouton se coupait en deux dès 1440 px. */
.site-header {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	position: sticky; top: 0; z-index: 50;
}

.header-bar {
	display: flex; align-items: center; gap: var(--sp-4);
	padding-block: var(--sp-4) var(--sp-3);
}

.brand {
	display: flex; flex-direction: column; align-items: flex-start;
	text-decoration: none; flex: 0 1 auto; min-width: 0;
}

/* Le verrou : signe et nom sur une ligne, sans filet de cuivre.
 *
 * TOUT Y EST EN EM, à partir du corps posé ici. Un seul `font-size` redimensionne
 * donc l'ensemble en gardant ses proportions — c'est ce qui fait que le verrou
 * est le même objet en grand écran et replié sur téléphone, là où deux tailles
 * réglées séparément dériveraient l'une de l'autre au premier ajustement. */
.brand__verrou {
	display: flex; align-items: center; gap: 0.34em;
	font-size: 2.15rem; line-height: 1; min-width: 0;
}
.brand__verrou .logo-mark {
	width: 1.15em; height: 1.15em;
	flex: 0 0 auto; color: var(--c-verdigris);
}

/* Le nom est composé en bas de casse : c'est un logotype, pas une phrase. Le
   titre du site reste « Vitistim » dans le document — seul le rendu change.
   Même vert que la feuille : le verrou est d'une seule couleur. */
.brand__name {
	font-family: var(--font-display);
	letter-spacing: -0.035em; font-weight: 700;
	text-transform: lowercase;
	color: var(--c-verdigris);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand__tagline {
	font-family: var(--font-display);
	font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase;
	color: var(--c-verdigris-mid); margin-top: .45em; font-weight: 600;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.header-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }

/* La recherche vient en premier dans le code — repliée sur téléphone, elle reste
   ainsi juste sous la marque — mais elle s'affiche à droite du menu sur grand
   écran, où la navigation doit occuper le bord gauche. */
.header-nav {
	display: flex; align-items: center; gap: var(--sp-5);
	padding-bottom: var(--sp-2);
}
.header-nav .nav { order: 1; }
.header-nav .search-form { order: 2; margin-left: auto; flex: 0 1 15rem; }

/* --- Navigation ---------------------------------------------------------- */

.nav-toggle {
	display: none;
	background: none; border: 1px solid var(--c-line);
	border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
	cursor: pointer; align-items: center; gap: var(--sp-2);
	font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
	color: var(--c-verdigris);
}

.nav { min-width: 0; }
.nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }

/* Dans tout ce qui sert à naviguer (menu, langues, filtres, noms du bandeau),
   le vert de marque dit où l'on peut aller, le vert foncé où l'on est. */
.nav__link {
	display: block; padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius); text-decoration: none;
	font-family: var(--font-display);
	color: var(--c-verdigris); font-weight: 600; font-size: var(--fs-sm);
	white-space: nowrap;
}
.nav__link:hover { background: var(--c-wash); color: var(--c-verdigris-dark); }

/* La page courante se signale par un trait sous l'entrée plutôt que par une
   pastille colorée : moins de bruit dans un menu de sept entrées. */
.nav__link[aria-current="page"] {
	color: var(--c-verdigris-dark);
	box-shadow: inset 0 -2px 0 var(--c-copper);
	border-radius: 0;
}

.nav__parent > .nav__link::after {
	content: ""; display: inline-block; margin-left: .45em;
	border: .26em solid transparent; border-top-color: currentColor;
	transform: translateY(.15em);
}

.nav__sub {
	list-style: none; margin: 0; padding: var(--sp-2);
	position: absolute; left: 0; top: 100%; min-width: 15rem;
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
	display: none; z-index: 10;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { display: block; }

.nav__sub .nav__link { font-weight: 500; white-space: normal; }

/* --- Sélecteur de langue et boutons --------------------------------------- */

.lang-switch {
	display: flex; align-items: center; gap: .4em;
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
}
.lang-switch__current { color: var(--c-verdigris-dark); }
.lang-switch__sep { color: var(--c-line); }
.lang-switch__link { color: var(--c-verdigris); text-decoration: none; }
.lang-switch__link:hover { color: var(--c-copper); text-decoration: underline; }
.lang-switch__disabled { color: #9aa79f; cursor: not-allowed; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--c-verdigris); color: var(--c-text-invert); }
.btn--primary:hover { background: var(--c-verdigris-dark); color: var(--c-text-invert); }
.btn--ghost { border-color: var(--c-line); color: var(--c-verdigris); background: var(--c-surface); }
.btn--ghost:hover { background: var(--c-wash); color: var(--c-verdigris-dark); border-color: var(--c-verdigris-pale); }
/* Réservé au produit phare : un seul bouton cuivre par page, sinon il ne
   distingue plus rien. */
.btn--accent { background: var(--c-copper); color: var(--c-text-invert); }
.btn--accent:hover { background: var(--c-copper-dark); color: var(--c-text-invert); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

/* --- Recherche ----------------------------------------------------------- */

.search-form { display: flex; gap: var(--sp-2); }
.search-form__input {
	flex: 1 1 auto; min-width: 0;
	font-family: var(--font-display); font-size: var(--fs-sm);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--c-line); border-radius: var(--radius);
	background: var(--c-bg);
}
.search-form__input:hover { border-color: var(--c-verdigris-pale); }
.search-form--page .search-form__input { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }

/* --- Fil d'ariane -------------------------------------------------------- */

.breadcrumb {
	font-family: var(--font-display); font-size: var(--fs-sm);
	color: var(--c-text-muted); padding-block: var(--sp-4);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: .4em; color: var(--c-verdigris-pale); }
.breadcrumb a { color: var(--c-text-muted); }

/* --- Sections et titres de page ------------------------------------------ */

main { display: block; }

.page-head { padding-block: var(--sp-7) var(--sp-5); }
.page-head--soft { background: var(--c-wash); border-bottom: 1px solid var(--c-line-soft); }
.page-head__lead { font-size: var(--fs-md); color: var(--c-text-muted); max-width: 56ch; margin: 0; }

/*
 * La plante posée en tête d'une fiche de programme.
 *
 * Elle est à droite du titre et non au-dessus : au-dessus, elle repoussait le
 * titre sous la ligne de flottaison sur un téléphone, alors que le visiteur
 * vient chercher le calendrier. Sous 48rem elle passe donc simplement derrière,
 * en filigrane — elle accompagne, elle ne s'annonce pas.
 */
.page-head--illustre .wrap { position: relative; }
.page-head__plante {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 8.5rem; color: var(--c-verdigris-pale); pointer-events: none;
}
.page-head--illustre h1,
.page-head--illustre .page-head__lead { max-width: calc(100% - 10rem); }

.section { padding-block: var(--sp-8); }
.section--soft { background: var(--c-wash); }
.section--tight { padding-block: var(--sp-7); }

.section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
.section__head h2 { margin: 0; }
.section__head a {
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
	text-decoration: none; white-space: nowrap;
}
.section__head a:hover { text-decoration: underline; }

/* --- Accueil : l'ouverture ------------------------------------------------ */

/*
 * L'ouverture est un dégradé, et rien d'autre.
 *
 * Elle portait cinq photographies bord à bord, recadrées pour que leurs
 * horizons se rejoignent. Elles disaient « le lieu » et le bandeau dessiné
 * disait « le principe » — sauf qu'on regardait deux fois la même rangée de
 * cinq cultures. Les photographies sont parties ; le titre et le dessin
 * récupèrent leur place.
 *
 * Ce qui les remplace n'est pas un autre dessin. Trois familles de fonds ont
 * été construites et rendues avant d'écarter l'idée même : la vallée en aplats
 * (elle dit « colline », pas plaine du Rhône), le coteau en terrasses (des
 * immeubles), la pulvérisation en gouttes (de la pluie, ce qui en agriculture
 * n'est pas une bonne nouvelle). Toutes échouent pour la même raison : deux
 * couches dessinées dans la même bande se disputent, et la plante perd
 * toujours. Elles sont conservées dans assets/apercu-bandeau.html — ne pas les
 * redécouvrir.
 *
 * Reste la lumière, sans objet : le blanc en haut, le vert lavé en bas. C'est
 * l'aube sans dessiner une seule montagne. Le palier à 25 % tient le titre au
 * clair — la lumière ne se ramasse qu'en approchant de l'horizon, là où les
 * plantes se tiennent.
 *
 * IL PART DU BLANC, ET C'EST CE QUI LE REND VISIBLE. Un premier réglage allait
 * de --c-bg à --c-wash : quatre pour cent de clarté étalés sur toute la hauteur,
 * et un haut exactement de la couleur de la page — invisible. Une fin plus
 * sombre a été essayée aussi (un lavé appuyé à #cde8d2) : plus franche, mais
 * elle rapproche le fond des feuilles vert clair du bandeau, qui y perdent huit
 * pour cent de contraste. Le blanc est aussi ce que l'accueil portait avant, si
 * bien que la jonction avec l'en-tête, blanche elle aussi, ne bouge pas.
 */
.hero {
	background: linear-gradient(180deg,
		var(--c-surface) 0%, var(--c-surface) 25%, var(--c-wash) 100%);
	/* Le filet de cuivre séparait la photographie de la page ; il sépare
	   maintenant l'ouverture entière du reste. C'est la seule teinte qui
	   appartienne aux deux mondes, et c'est la seule place qu'elle occupe ici :
	   le cuivre reste réservé au produit phare, aux prix et aux surtitres. */
	border-bottom: 1px solid var(--c-copper);
}

.hero__inner { padding-block: var(--sp-7) var(--sp-7); max-width: 46rem; }
.hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); letter-spacing: -0.035em; }
.hero__lead { font-size: var(--fs-md); line-height: 1.5; color: var(--c-text-muted); margin-bottom: var(--sp-6); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- L'horizon : les cinq cultures sur une même terre --------------------- */

/*
 * L'élément de signature du site.
 *
 * Les cinq cultures ne sont pas cinq cartes dans une grille : elles se tiennent
 * côte à côte sur une seule ligne de sol qui traverse toute la largeur. C'est la
 * décision « les programmes couvrent cinq cultures » rendue visible d'un coup
 * d'œil plutôt qu'écrite en toutes lettres plus bas.
 *
 * Le dessin est désormais un seul bandeau tracé (assets/img/bandeau-cultures.svg)
 * et non plus cinq illustrations juxtaposées : la ligne de sol y est continue par
 * construction, et les plantes ont la masse d'un aplat plutôt que d'un trait. Les
 * cinq illustrations au trait servent toujours ailleurs — vignettes de cartes,
 * pages de culture — c'est ici seulement qu'elles cèdent la place.
 */
/* La légende nomme ce que le dessin montre : cinq cultures, une même terre. */
.horizon__caption {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--c-verdigris-mid); text-align: center;
	margin: 0 0 var(--sp-5); padding-inline: var(--sp-5);
}

/*
 * Le bandeau est PLAFONNÉ SUR LA COLONNE DU SITE, pas sur la fenêtre.
 *
 * En pleine largeur, son rapport de 3,34 lui donnait 574 px de haut sur un écran
 * de 1920 — plus que le bloc de titre au-dessus, et cinq plantes démesurées. Le
 * plafond ramène cette hauteur à 359 px. En dessous de 1200 px de large, rien ne
 * change : le bandeau occupe toute la place disponible, comme avant.
 *
 * LE PLAFOND EST SUR LE CONTENEUR, PAS SUR LE SVG, et c'est ce qu'il ne faut pas
 * défaire : les cinq noms sont posés en pourcentage de la largeur de ce même
 * conteneur, sur l'abscisse mesurée de leur plante. Poser le plafond sur le
 * dessin seul les laisserait s'étaler sur toute la fenêtre, et chaque nom se
 * retrouverait à côté de la plante d'un voisin.
 *
 * Il vaut --wrap, la largeur de colonne du site, et non un nombre écrit ici : le
 * dessin suit la colonne si elle change.
 */
.horizon {
	position: relative; padding-bottom: var(--sp-7);
	width: 100%; max-width: var(--wrap); margin-inline: auto;
}
.vs-bandeau { display: block; width: 100%; height: auto; }

/* Chaque plante mène aux programmes de sa culture. La zone cliquable est le
   dessin lui-même, pas un rectangle posé autour : deux rectangles voisins se
   chevauchent — la vigne et l'arbre se recouvrent sur 5 % de la largeur — et
   celui du dessus volerait les clics de son voisin. On clique donc la plante,
   et le ciel reste du ciel.

   Elle passe au cuivre au survol, comme les dessins de culture ailleurs sur le
   site (.culture-card__art) : sans ce changement, rien ne dirait qu'un dessin
   se clique. Les trois remplissages basculent ensemble pour que la plante reste
   d'un seul métal. */
.vs-bandeau__lien { cursor: pointer; }
.vs-bandeau__lien:hover {
	--vs-feuille: var(--c-copper);
	--vs-feuille-claire: var(--c-copper-pale);
	--vs-fruit: var(--c-copper-dark);
}
.vs-bandeau__lien path { transition: fill .18s ease; }

/* Les noms se posent sous leur propre plante. Les cinq plantes ne sont pas
   équidistantes dans le dessin : une grille régulière décalait « pommes de
   terre » de 3,55 % de la largeur, soit une quarantaine de pixels. Chaque nom
   porte donc l'abscisse mesurée de sa plante, passée par --x. */
.horizon__noms { list-style: none; margin: 0; padding: 0; position: relative; height: 2rem; }
.horizon__item--ancre {
	position: absolute; top: 0; left: var(--x); transform: translateX(-50%);
	white-space: nowrap;
}
.horizon__link {
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
	letter-spacing: -0.01em; text-decoration: none; color: var(--c-verdigris);
	transition: color .2s ease;
}
.horizon__link:hover { color: var(--c-copper); }

/* Au chargement, les plantes poussent depuis la ligne de sol : le seul mouvement
   du site, et il dit exactement ce que la marque vend. Le sol, lui, ne bouge pas
   — c'est un <rect> hors des groupes animés. L'origine est à 73.3 %, la position
   du sol dans le cadre du bandeau (668 dans un cadre qui va de 248 à 821). */
@media (prefers-reduced-motion: no-preference) {
	.vs-bandeau__plante {
		transform-box: view-box;
		transform-origin: 50% 73.3%;
		animation: vs-pousse .8s cubic-bezier(.22, .8, .25, 1) backwards;
	}
	/* Le décalage est accroché à l'identité de la plante, pas à son rang parmi
	   ses frères : depuis que chaque plante est enveloppée dans son lien, un
	   :nth-of-type(n) compterait un seul <g> par lien et les cinq partiraient
	   ensemble. */
	#vs-plante-vigne           { animation-delay: .10s; }
	#vs-plante-arboriculture   { animation-delay: .19s; }
	#vs-plante-maraichage      { animation-delay: .28s; }
	#vs-plante-cereales        { animation-delay: .37s; }
	#vs-plante-pommes-de-terre { animation-delay: .46s; }
}

@keyframes vs-pousse {
	from { transform: scaleY(.35); opacity: 0; }
	to   { transform: scaleY(1);   opacity: 1; }
}

/* --- Entrées par culture (hors accueil) ---------------------------------- */

.cultures {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.culture-card {
	display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
	padding: var(--sp-5) var(--sp-3); height: 100%;
	border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	background: var(--c-surface); text-decoration: none; color: var(--c-text);
	transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.culture-card:hover { border-color: var(--c-verdigris-pale); box-shadow: var(--shadow); color: var(--c-copper); }

.culture-card__art { color: var(--c-verdigris); width: 100%; max-width: 7.5rem; }
.culture-card:hover .culture-card__art { color: var(--c-copper); }
.culture-card__name { font-family: var(--font-display); font-weight: 600; text-align: center; font-size: var(--fs-sm); }

.illus { display: block; width: 100%; height: auto; }

/* --- Produits phares ---------------------------------------------------- */

/*
 * Un diptyque : une bande pleine largeur coupée en deux, chaque moitié en aplat
 * de ce que contient le bidon. Le cuivre n'y occupe une surface que pour le
 * produit cuivré — c'est toujours la seule surface cuivre du site.
 *
 * Les aplats sont les couleurs pleines de la palette et non des lavis : le
 * cuivre foncé (6,76:1 sous le blanc) et le vert des titres (7,08:1). En lavis,
 * les deux moitiés se fondaient dans une page déjà faite de fonds pâles.
 *
 * Le contenu de chaque moitié reste aligné sur la colonne du site, et non sur le
 * bord de sa moitié : le pourcentage d'un `padding` se calcule sur la largeur de
 * la zone de grille, donc `100% - var(--wrap) / 2` y vaut exactement la marge
 * extérieure de `.wrap`. Sous 56 rem, les deux moitiés s'empilent.
 */
.phares { display: grid; grid-template-columns: minmax(0, 1fr); }

.phare {
	--phare-fond: var(--c-verdigris);
	position: relative; overflow: hidden;
	background: var(--phare-fond); color: var(--c-text-invert);
	padding: var(--sp-8) var(--sp-5);
}
.phare--cuivre { --phare-fond: var(--c-copper-dark); }
.phare__inner { position: relative; max-width: 34rem; }
@media (max-width: 55.99rem) { .phare { padding-block: var(--sp-7); } }

/*
 * Côte à côte, les deux moitiés partagent six rangées : nature, nom, texte,
 * prix, bouton, documents. Sans cela chaque moitié empile à sa façon, et le
 * bouton de Foralg flottait plus haut que celui de Labicuper parce que son
 * résumé tenait une ligne de moins.
 */
@media (min-width: 56rem) {
	.phares:not(.phares--seul) {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(6, auto);
	}
	.phares:not(.phares--seul) .phare,
	.phares:not(.phares--seul) .phare__inner {
		display: grid; grid-row: span 6;
		grid-template-rows: subgrid; row-gap: 0;
	}
	.phares:not(.phares--seul) .phare:first-of-type {
		padding-left: max(var(--sp-5), calc(100% - var(--wrap) / 2 + var(--sp-5)));
		padding-right: var(--sp-7);
	}
	.phares:not(.phares--seul) .phare:last-of-type {
		padding-right: max(var(--sp-5), calc(100% - var(--wrap) / 2 + var(--sp-5)));
		padding-left: var(--sp-7);
	}
	.phares--seul .phare { padding-inline: max(var(--sp-5), calc((100% - var(--wrap)) / 2 + var(--sp-5))); }
}

/*
 * L'empreinte : le symbole d'élément, immense, posé dans l'angle bas et coupé
 * par les bords de sa moitié. Ton sur ton, blanc à 9 % : assez pour qu'on la
 * voie au premier regard, trop peu pour gêner la lecture du texte qu'elle
 * croise (le blanc du texte reste au-dessus de 5,5:1 sur le fond éclairci).
 *
 * Calée sur la ligne de base et non sur la boîte : `line-height: .72` fait
 * tomber le bas des lettres sous le bord, si bien que la coupe passe dans le
 * dessin et non sous lui — c'est la coupe qui fait le tampon.
 */
.phare__empreinte {
	position: absolute; right: -0.06em; bottom: -0.16em;
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(11rem, 24vw, 21rem); line-height: .72;
	letter-spacing: -0.06em; white-space: nowrap;
	color: rgb(255 255 255 / 9%);
	pointer-events: none; user-select: none;
}
.phare__empreinte--paire { font-size: clamp(8rem, 16vw, 14rem); }
/* Un mot est trois fois plus long qu'un symbole : il déborde à droite plutôt
   que de rapetisser, et seules ses premières lettres restent dans la moitié. */
.phare__empreinte--mot { font-size: clamp(8rem, 15vw, 13rem); right: auto; left: 38%; }

/* Ce que l'empreinte dit, écrit en clair : la seule lecture qu'en ont un lecteur
   d'écran et un visiteur qui ne reconnaît pas « Cu ». */
.phare__nature {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
	letter-spacing: .01em; opacity: .85;
}
/* Le champ est saisi en minuscules (« cuivre systémique »), parce qu'il sert
   aussi de légende en capitales dans la pastille. Ici il ouvre une ligne. */
.phare__nature::first-letter { text-transform: uppercase; }

.phare__media {
	margin-bottom: var(--sp-5); border-radius: var(--radius-lg); overflow: hidden;
	border: 1px solid rgb(255 255 255 / 25%); background: var(--c-surface);
}
.phare__media img { width: 100%; }

.phare__titre {
	font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.03em;
	margin-bottom: var(--sp-4); color: inherit;
}
.phare__lead {
	font-size: var(--fs-md); line-height: 1.5; max-width: 40ch;
	margin-bottom: var(--sp-6); opacity: .9;
}
.phare__offre { margin-bottom: var(--sp-5); }
/* Le prix est une information, pas un titre : même corps et même graisse que
   celui des cartes de la grille (.card__foot). Plus gros, il prenait le pas
   sur le résumé, alors que la moitié doit d'abord donner envie d'ouvrir la fiche. */
.phare__prix {
	margin: 0 0 var(--sp-1);
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.phare__bio { margin: 0; font-size: var(--fs-sm); opacity: .85; }
.phare__actions { margin: 0 0 var(--sp-6); }
.phare__actions:last-child { margin-bottom: 0; }

/* Un bouton blanc dont le texte prend la couleur de sa moitié. Au survol il se
   vide : c'est l'aplat qui apparaît à travers. */
.phare__btn { background: var(--c-surface); color: var(--phare-fond); border: 2px solid var(--c-surface); }
.phare__btn:hover { background: transparent; color: var(--c-text-invert); }

/* Le contour bleu de focus du site disparaît sur ces aplats : blanc ici. */
.phare a:focus-visible { outline-color: var(--c-surface); }

.phare__docs { align-self: start; }
/* Assombrie et non éclaircie : l'empreinte passe souvent dessous, et un voile
   blanc sur un tracé blanc brouillait les deux. Plus sombre que l'aplat, la
   carte se lit comme creusée dans la moitié, l'empreinte reste derrière. */
.phare .doc-item { background: rgb(0 0 0 / 16%); border-color: rgb(255 255 255 / 22%); }
.phare .doc-item:hover { background: rgb(0 0 0 / 24%); border-color: var(--c-surface); }
.phare .doc-item__title,
.phare .doc-item:hover .doc-item__title { color: var(--c-text-invert); }
.phare .doc-item__meta { color: inherit; opacity: .85; }

/* --- Encart Suisse italienne --------------------------------------------- */

/* Une clientèle tessinoise existe (l'ancien site liait déjà un catalogue et un
   bulletin de commande en italien) mais aucune version italienne du site n'est
   prévue. Cet encart lui donne un point d'entrée reconnaissable, dans sa langue,
   sans imposer une troisième traduction de tout le site. */
.it-band { background: var(--c-verdigris-dark); color: #d9efdb; }
.it-band__inner { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 50rem) { .it-band__inner { grid-template-columns: 1fr 1.15fr; } }
.it-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.it-band p { margin: 0; color: #b6d8ba; }
.it-band .doc-item { background: rgb(255 255 255 / 94%); border-color: transparent; color: var(--c-text); }
.it-band .doc-item:hover { background: #fff; }
/* Dernier bloc de l'accueil, et du même vert que le pied de page : la marge du
   pied de page laissait entre eux une bande claire de 72 px, qui coupait deux
   aplats sombres sans rien séparer. Ils se touchent, et un filet les distingue. */
main:has(> .it-band:last-child) + .site-footer {
	margin-top: 0; border-top: 1px solid rgb(255 255 255 / 12%);
}

/* --- Grilles et cartes --------------------------------------------------- */

/* `min(…, 100%)` plutôt qu'une largeur fixe dans minmax : sur un écran plus
   étroit que la largeur minimale annoncée, la colonne accepte de rétrécir au
   lieu de faire déborder la page. */
.grid { display: grid; gap: var(--sp-5); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.grid--wide  { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }

.card {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--c-verdigris-pale); }

.card__media { aspect-ratio: 4 / 3; background: var(--c-wash); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--contain img { object-fit: contain; padding: var(--sp-3); }

/*
 * La carte dont le titre tient lieu d'image.
 *
 * Articles et actualités n'ont ni photographie, ni élément, ni culture : ils
 * tombaient sur le dessin de jeune pousse, identique sur les dix. Le titre monte
 * donc dans le cadre et l'occupe, et il n'est pas répété dans le corps.
 *
 * LE CADRE N'IMPOSE PLUS SON 4/3. Un titre long — « À Bon Entendeur enquête sur
 * les pesticides dans le vin » — serait rogné par une proportion fixe. Il pose
 * une hauteur MINIMALE, qui suffit à ce qu'un titre court occupe autant de place
 * qu'une image, et il s'agrandit si le titre le demande. Les cartes d'une même
 * rangée restent de même hauteur : c'est la grille qui les étire.
 *
 * Le titre est calé EN BAS du cadre. Aligné en haut, un titre court laissait un
 * vide sous lui qu'aucune image n'aurait laissé ; posé en bas, il s'appuie sur le
 * corps de la carte comme une légende sur sa photographie.
 */
.card__media--titre {
	aspect-ratio: auto; min-height: 9rem;
	display: flex; align-items: flex-end;
	padding: var(--sp-5) var(--sp-4) var(--sp-4);
	/* Le fond lavé de .card__media est CONSERVÉ : c'est lui qui donne à la carte
	   sa masse visible, et une carte à titre doit avoir la même présence qu'une
	   carte à photographie ou à pastille — elles se côtoient dans les mêmes
	   grilles.

	   Il a été retiré un moment, parce que la section « Actualités » de l'accueil
	   portait .section--soft, donc exactement la même couleur, et que la carte y
	   disparaissait. Mais une carte blanche sur ce lavé ne fait que 1,19:1, et sa
	   bordure 1,15:1 : elle n'était pas plus visible. Le lavé a été retiré de la
	   SECTION, pas de la carte — c'était là qu'était l'erreur, et c'est la seule
	   grille du site posée sur un fond teinté. */
}
.card__title--grand {
	margin: 0; font-size: var(--fs-lg); line-height: 1.14;
	letter-spacing: -0.025em;
	/* Les titres portent des mots longs — « Protéosynthèse », « Recommandations ».
	   Sans césure, l'un d'eux élargit sa colonne et casse la grille. */
	hyphens: auto; overflow-wrap: break-word;
}
.card__title--grand a { text-decoration: none; color: inherit; }
/* Le corps ne porte plus que la date et le chapô : sans titre au-dessus, il n'a
   pas besoin du même retrait qu'une carte illustrée. */
.card--titre .card__body { padding-top: var(--sp-3); }

/* --- La pastille d'élément ------------------------------------------------ */

/*
 * Le visuel d'un produit sans photographie : son symbole chimique.
 *
 * Elle remplace le dessin de jeune pousse, qui s'affichait à l'identique sur
 * presque toutes les cartes et donnait à la grille un air de gabarit non rempli.
 * Sept produits sur neuf sont définis par un élément ; les deux autres portent
 * un mot plutôt qu'un glyphe inventé.
 *
 * Le cuivre n'est pris que par les produits cuivrés — la règle de la palette
 * appliquée à la grille. Un accent qu'on voit partout n'accentue plus rien, et
 * ici la couleur dit ce qu'il y a dans le bidon.
 *
 * Elle occupe le bloc qui la contient plutôt que d'imposer sa propre proportion :
 * en carte c'est un 4/3, sur la fiche un carré, et le même objet sert aux deux.
 */
.pastille {
	width: 100%; height: 100%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: var(--sp-2);
	background: var(--c-etiquette); color: var(--c-verdigris);
	padding: var(--sp-4); text-align: center;
}
.pastille--cuivre { background: var(--c-etiquette-cuivre); color: var(--c-copper-dark); }

/* La variante des programmes : la plante tracée de la culture, au lieu d'un
   symbole. Même fond, même famille — c'est le même objet, avec un autre contenu.
   Le remplissage est un peu plus serré que pour un symbole : un dessin a besoin
   d'air autour de lui, pas d'une marge égale à sa propre taille. */
.pastille--plante { padding: var(--sp-3); }
.pastille--plante .plante { width: 100%; height: 100%; }

.plante { color: var(--c-verdigris); }
.plante__sol { fill: var(--c-verdigris); opacity: .45; }

/* Le jeu de tracés déposé pour les <use> ne doit occuper aucune place : sans ces
   règles, un SVG de largeur nulle laisse tout de même sa ligne dans le flux. */
.vs-plantes-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pastille__sym {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1;
	letter-spacing: -0.04em;
}
/* Deux symboles côte à côte occupent deux fois la chasse : ils descendent d'un
   cran pour tenir dans la même pastille, sans passer pour du texte. */
.pastille__sym--paire { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }

/* Un mot n'a pas la masse optique d'un symbole de deux lettres : il descend plus
   bas encore, et occupe la même surface sans crier plus fort. */
.pastille__sym--mot {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	letter-spacing: -0.01em; text-wrap: balance;
}

/* Pleine opacité. Elle était à 89 % sur l'ancien lavis ; sur le fond plus
   soutenu des étiquettes, 89 % ne donnait plus que 4,22:1 en vert et 4,01:1 en
   cuivre, sous le seuil pour un texte de cette taille. La légende reste en
   retrait par son corps et son espacement, pas par sa couleur. */
.pastille__legende {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em;
}

/* Sur la fiche, le même objet en grand et au carré. */
.product__media .pastille { aspect-ratio: 1; border-radius: var(--radius-lg); }
.product__media .pastille__sym { font-size: clamp(3rem, 8vw, 4.4rem); }
.product__media .pastille__sym--paire { font-size: clamp(2.2rem, 5.5vw, 3.2rem); }
.product__media .pastille__sym--mot { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }

.card__body { padding: var(--sp-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; }
/* `balance` répartit les lignes d'un titre long sur toute sa largeur, ce qui a
   du sens pour un grand titre mais coupait « Pommes de / terre biologiques » dans
   une carte étroite. `pretty` se contente d'éviter les lignes orphelines. */
.card__title { margin: 0; font-size: var(--fs-md); text-wrap: pretty; }
.card__title a { text-decoration: none; color: inherit; }
/* Toute la carte devient cliquable, sans imbriquer de liens. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title { color: var(--c-copper); }
.card__desc { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; }
.card__foot {
	margin-top: auto; padding-top: var(--sp-4);
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
	color: var(--c-verdigris);
}

/* --- Filtres ------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filters__link {
	padding: var(--sp-2) var(--sp-4); border-radius: 999px;
	border: 1px solid var(--c-line); text-decoration: none;
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
	color: var(--c-verdigris); background: var(--c-surface);
}
.filters__link:hover { background: var(--c-wash); color: var(--c-verdigris-dark); }
.filters__link[aria-current="true"] { background: var(--c-verdigris); border-color: var(--c-verdigris); color: var(--c-text-invert); }

/* --- Fiche produit ------------------------------------------------------- */

.product { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-6) var(--sp-7); }
@media (min-width: 60rem) { .product { grid-template-columns: 20rem minmax(0, 1fr); } }

/* `align-self: start` : sans lui la colonne s'étirait sur toute la hauteur de la
   fiche, et le visuel de remplacement occupait un rectangle vide de 600 px. */
.product__media {
	align-self: start;
	border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	overflow: hidden; background: var(--c-surface);
}
.product__media .placeholder { aspect-ratio: 1; min-height: 0; }
.product__media img { width: 100%; }

/* Conditionnement et prix, en bas de fiche : le visiteur a d'abord lu ce que
   fait le produit, il peut juger le tarif en connaissance de cause. */
.pricing {
	display: grid; gap: var(--sp-4); align-items: center;
	grid-template-columns: minmax(0, 1fr);
	padding: var(--sp-5); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); background: var(--c-surface);
}
@media (min-width: 45rem) { .pricing { grid-template-columns: 1fr 1fr auto; } }

.pricing__cell { display: flex; flex-direction: column; gap: var(--sp-1); }
.pricing__cell--action { justify-self: start; }
@media (min-width: 45rem) { .pricing__cell--action { justify-self: end; } }

.pricing__label {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em; color: var(--c-text-muted);
}
.pricing__value { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; }
.pricing__value--price { color: var(--c-copper-dark); font-size: var(--fs-lg); letter-spacing: -0.02em; }
.pricing__note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); }

/* --- Calendrier de traitement -------------------------------------------- */

/*
 * La signature de la page programme.
 *
 * Les passages descendent le long d'une colonne continue, comme les cultures de
 * l'accueil se tiennent sur une ligne d'horizon continue. Même geste, pivoté :
 * là un espace partagé, ici un temps partagé. La colonne est tracée par la liste
 * et non par les blocs, pour rester ininterrompue entre eux.
 */

.calendrier__count {
	font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
	color: var(--c-text-muted); margin: 0;
	display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
}
.calendrier__unit {
	font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em;
	color: var(--c-verdigris-mid);
}

/* L'engrais de fond est posé avant la saison, et hors d'elle : il tient donc
   dans un bandeau à part, au-dessus de la colonne. */
.fond {
	display: grid; gap: var(--sp-2) var(--sp-5); align-items: baseline;
	padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
	background: var(--c-wash); border-radius: var(--radius-lg);
	border-left: 3px solid var(--c-verdigris-mid);
}
@media (min-width: 45rem) { .fond { grid-template-columns: 12rem minmax(0, 1fr); } }

.fond__label {
	margin: 0; font-family: var(--font-display);
	font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em; color: var(--c-verdigris-mid);
}

.saison { list-style: none; margin: 0; padding: 0; position: relative; }

.saison__passage {
	position: relative;
	padding: 0 0 var(--sp-6) var(--sp-6);
	/* La colonne : tracée sur chaque passage plutôt que sur la liste, pour
	   qu'elle s'arrête net au dernier au lieu de courir jusqu'au bas du bloc. */
	border-left: 1px solid var(--c-line);
}
.saison__passage:last-child { border-left-color: transparent; padding-bottom: 0; }

/* Le nœud, posé sur la colonne. Cuivre plein : c'est le repère qu'on suit du
   pouce en descendant la page. */
.saison__passage::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--c-copper);
	transform: translateX(-5px);
	box-shadow: 0 0 0 4px var(--c-bg);
}
/* Le dernier passage a perdu sa colonne : sans ce trait, son nœud flotterait
   détaché de la suite. */
.saison__passage:last-child::after {
	content: ""; position: absolute; left: -1px; top: 0; height: .55em;
	border-left: 1px solid var(--c-line);
}

.saison__label {
	font-size: var(--fs-md); margin: 0 0 var(--sp-3);
	color: var(--c-verdigris);
}

.saison__cadence {
	margin: var(--sp-6) 0 0; padding-left: var(--sp-6);
	font-size: var(--fs-sm); color: var(--c-text-muted); font-style: italic;
}

/* --- Le mélange d'un passage --------------------------------------------- */

.mix { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

/*
 * Trois colonnes : le produit, sa dose, sa barre. La dose est calée à droite de
 * sa colonne, contre la barre, pour que les chiffres s'alignent d'un passage à
 * l'autre — c'est ce qui permet de lire une progression en descendant.
 */
.mix__line {
	display: grid; align-items: baseline;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sp-2) var(--sp-4);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius);
}

@media (min-width: 38rem) {
	.mix__line { grid-template-columns: minmax(0, 1fr) 7rem 8rem; }
}

.mix__product { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); min-width: 0; }
.mix__product a { text-decoration: none; }
.mix__product a:hover { text-decoration: underline; }

.mix__dose {
	font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
	color: var(--c-copper-dark); text-align: right; white-space: nowrap;
}
.mix__dose--none { color: var(--c-text-muted); font-weight: 400; font-style: italic; }

/*
 * La barre : indicative, jamais lue comme une consigne. Elle part toujours de
 * zéro, si bien que sa longueur dit une quantité. Une fourchette (« 4-5 L »)
 * ajoute une amorce plus claire jusqu'à son maximum — l'incertitude se voit
 * sans que le chiffre soit touché.
 */
.mix__bar {
	position: relative; display: none; height: 6px; align-self: center;
	background: var(--c-line-soft); border-radius: 3px; overflow: hidden;
}
@media (min-width: 38rem) { .mix__bar { display: block; } }

/* Un produit cité une seule fois n'a pas de barre — mais le rail vide se lisait
   comme une dose nulle. Il ne reste donc rien du tout : la colonne garde sa
   largeur, l'œil garde son alignement, et aucune quantité n'est suggérée. */
.mix__bar:empty { background: none; }

.mix__bar-range,
.mix__bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
.mix__bar-range { background: var(--c-copper-wash); }
.mix__bar-fill  { background: var(--c-copper); opacity: .75; }

/* --- Compléments facultatifs d'un programme ------------------------------- */

/*
 * « En option » se lit après la saison, et doit se voir comme autre chose
 * qu'elle. Pas de colonne, pas de nœuds, pas de numérotation : des blocs posés
 * côte à côte, chacun annoncé par ce qu'il vise. Le trait vert-de-gris à gauche
 * les rattache au programme sans les y faire entrer.
 */

.options { margin-top: var(--sp-7); }
.options .section__head { margin-bottom: var(--sp-4); }

.options__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--sp-4);
}
@media (min-width: 52rem) { .options__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.options__item {
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-wash); border-radius: var(--radius-lg);
	border-left: 3px solid var(--c-verdigris-pale);
}

/* L'intitulé dit la raison d'ajouter le produit — « meilleure tenue du raisin en
   fin de saison ». C'est une phrase, pas une étiquette : il se lit en texte
   courant, contrairement aux titres de passages. */
.options__label {
	margin: 0 0 var(--sp-3); font-family: var(--font-text);
	font-size: var(--fs-sm); font-weight: 400; font-style: italic;
	color: var(--c-text-muted); line-height: 1.4;
}

/* --- Mention « agriculture biologique » ----------------------------------- */

/*
 * L'ancien site réduisait cette information à un symbole collé au nom du produit
 * — Silecko°, Labicuper* — renvoyant à une légende de bas de page qui, elle, ne
 * parlait même pas de bio. C'est pourtant l'argument premier de la maison : il
 * s'écrit donc en toutes lettres, et une seule fois par page.
 */

.bio-badge,
.price-table__bio {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--c-verdigris-dark);
}

.bio-badge {
	display: inline-block; margin: 0 0 var(--sp-4);
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-wash); border-radius: var(--radius);
	border: 1px solid var(--c-verdigris-pale);
}

.price-table__bio { display: block; margin-top: .25em; }

.bio-note {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm); color: var(--c-verdigris-dark);
	padding-left: var(--sp-4); border-left: 2px solid var(--c-verdigris-pale);
}

/* --- Encadré de téléchargement ------------------------------------------- */

.download-box {
	display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap;
	margin-top: var(--sp-6); padding: var(--sp-4);
	border: 1px solid var(--c-line); border-left: 3px solid var(--c-copper);
	border-radius: var(--radius-lg); background: var(--c-surface);
}
.download-box__thumb { flex: 0 0 auto; width: 5rem; border: 1px solid var(--c-line-soft); border-radius: 3px; overflow: hidden; background: var(--c-surface); }
.download-box__thumb img { width: 100%; }
.download-box__thumb .doc-item__icon { padding: var(--sp-5) 0; }
.download-box__body { flex: 1 1 14rem; }
.download-box__title { margin: 0; font-family: var(--font-display); font-weight: 600; }

/* --- Appel à commander ---------------------------------------------------- */

/* Parent de l'encadré de téléchargement, mais plus insistant : celui-ci propose
   l'unique geste d'achat du site, là où l'autre accompagne une lecture. D'où le
   fond lavé qui le détache de la page.
   Son bouton reste vert, et ce n'est pas un oubli : le bloc paraît sur l'accueil,
   où le cuivre est déjà pris par le produit phare, et deux boutons cuivre sur une
   même page n'accentuent plus rien. Ce qui le signale, c'est le fond, le filet et
   la pastille — trois marques que ne porte aucun autre encadré.
   Les trois blocs se posent côte à côte tant qu'il y a la place et s'empilent
   sinon : sur téléphone, les actions passent sous le texte, dans l'ordre de
   lecture. */
.commande {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--sp-4) var(--sp-5);
	padding: var(--sp-5);
	border: 1px solid var(--c-line); border-left: 3px solid var(--c-copper);
	border-radius: var(--radius-lg); background: var(--c-wash);
}
.commande__icon {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 3rem; height: 4rem;
	border: 1px solid var(--c-line-soft); border-radius: 3px; background: var(--c-surface);
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
	/* Cuivre foncé et non cuivre clair : à cette taille et en lettres espacées, le
	   cuivre clair tombe à 4,40:1 sur le blanc — la même mesure qui avait fait
	   passer les surtitres au foncé. */
	letter-spacing: .06em; color: var(--c-copper-dark);
}
/* La base est large : sous cette valeur le texte se casse en trois mots par
   ligne à côté des boutons, mieux vaut alors qu'il passe au-dessus. */
.commande__body { flex: 1 1 20rem; }
.commande__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--c-verdigris); }
.commande__lead { margin: var(--sp-2) 0 0; color: var(--c-text-muted); }
.commande__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Extension et poids sur une seconde ligne DANS le bouton : accolés au titre ils
   allongeaient le libellé au point de le faire passer à la ligne sur téléphone,
   et c'est le nom du document qui doit se lire en premier. */
.commande__poids { display: block; font-size: var(--fs-xs); font-weight: 400; opacity: .85; letter-spacing: .02em; }

/* --- Visuel de remplacement ---------------------------------------------- */

.placeholder {
	width: 100%; height: 100%; min-height: 8rem;
	display: grid; place-items: center; padding: var(--sp-4);
	background: var(--c-wash);
	color: var(--c-verdigris-pale);
}
.placeholder .illus { width: 100%; height: 100%; max-height: 12rem; }

/* --- Documents ----------------------------------------------------------- */

.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.doc-item {
	display: flex; gap: var(--sp-4); align-items: center;
	padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); background: var(--c-surface);
	text-decoration: none; color: inherit;
	transition: border-color .15s ease, background-color .15s ease;
}
.doc-item:hover { border-color: var(--c-copper); background: var(--c-surface); }
.doc-item__thumb { flex: 0 0 auto; width: 3rem; height: 4rem; border: 1px solid var(--c-line-soft); border-radius: 3px; overflow: hidden; background: var(--c-wash); }
.doc-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-item__icon {
	display: grid; place-items: center; width: 100%; height: 100%;
	font-family: var(--font-display); color: var(--c-copper);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
}
.doc-item__body { min-width: 0; }
/* Titre et métadonnées sont des <span> : sans cette règle ils se suivent sur la
   même ligne et le titre semble écrit deux fois. */
.doc-item__title { display: block; font-family: var(--font-display); font-weight: 600; margin-bottom: .1em; color: var(--c-verdigris); }
.doc-item__meta { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); letter-spacing: .02em; }
.doc-item:hover .doc-item__title { color: var(--c-copper); }

.doc-block { margin-top: var(--sp-7); }

.doc-hero { display: grid; gap: var(--sp-7); padding-block: var(--sp-6) var(--sp-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 55rem) { .doc-hero { grid-template-columns: 17rem minmax(0, 1fr); } }
.doc-hero__preview { border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--c-surface); }
.doc-hero__preview img { width: 100%; }
.doc-hero__placeholder { aspect-ratio: 1 / 1.414; display: grid; place-items: center; color: var(--c-text-muted); background: var(--c-wash); }

.meta-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.meta-row__item { display: flex; flex-direction: column; gap: var(--sp-1); }
.meta-row__label {
	font-family: var(--font-display); color: var(--c-text-muted);
	font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em;
}
.meta-row__value { font-family: var(--font-display); font-weight: 600; }

/* --- Liste de prix ------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-6); }

.price-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.price-table caption {
	text-align: left; font-family: var(--font-display); font-weight: 700;
	padding-block: var(--sp-5) var(--sp-3); font-size: var(--fs-md);
	color: var(--c-verdigris);
}
.price-table th, .price-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.price-table thead th {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em; color: var(--c-text-muted);
	border-bottom: 1px solid var(--c-verdigris-pale); padding-bottom: var(--sp-2);
}
.price-table tbody tr:hover { background: var(--c-wash); }
.price-table__name { font-family: var(--font-display); font-weight: 600; }
.price-table__note { display: block; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-muted); }
/* Sélecteur en deux classes : `.price-table td` l'emportait sur une classe seule
   et les prix restaient alignés à gauche, sous un en-tête aligné à droite. */
.price-table .price-table__price {
	text-align: right; white-space: nowrap;
	font-family: var(--font-display); font-weight: 600;
	color: var(--c-copper-dark);
}
.price-table thead .price-table__price { color: var(--c-text-muted); }
.price-table__packaging { color: var(--c-text-muted); white-space: nowrap; font-size: var(--fs-sm); }

/* --- Contenu rédactionnel ------------------------------------------------ */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--c-copper); }
.prose img { border-radius: var(--radius); margin-block: var(--sp-6); }
.prose blockquote {
	margin: var(--sp-6) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	border-left: 3px solid var(--c-copper); font-size: var(--fs-md);
	color: var(--c-text-muted); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { font-weight: 600; }

/* Le contenu migré contient de vrais tableaux de données (stades de traitement,
   dosages). Ils doivent rester lisibles sur téléphone : on les fait défiler
   horizontalement plutôt que d'écraser la page. */
.prose table { display: block; overflow-x: auto; white-space: nowrap; border-collapse: collapse; max-width: 100%; }
.prose table th, .prose table td { border: 1px solid var(--c-line); padding: var(--sp-2) var(--sp-3); }
.prose table th { background: var(--c-wash); text-align: left; font-family: var(--font-display); font-weight: 600; }

/* --- Résultats de recherche ---------------------------------------------- */

.results__group + .results__group { margin-top: var(--sp-7); }
.results__group-title {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	color: var(--c-copper-dark); text-transform: uppercase; letter-spacing: .16em;
	margin-bottom: var(--sp-4); padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--c-line);
}
.results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.results__item { padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.results__item a { font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.results__item p { margin: .25em 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* --- Pied de page -------------------------------------------------------- */

.site-footer { background: var(--c-verdigris-dark); color: #d9efdb; margin-top: var(--sp-8); padding-block: var(--sp-8) var(--sp-5); }
.site-footer a { color: #ceead1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em; margin-bottom: var(--sp-4);
	color: var(--c-verdigris-pale); letter-spacing: .16em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--sp-2); }
.site-footer__bottom {
	margin-top: var(--sp-7); padding-top: var(--sp-4);
	border-top: 1px solid rgb(255 255 255 / 14%); font-size: var(--fs-sm);
	display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
	color: var(--c-verdigris-pale);
}

/* --- Page Présentation --------------------------------------------------- */

/*
 * Un texte signé, pas une page institutionnelle. Le portrait et la signature
 * disent qui parle ; la date dit quand — le texte a été écrit en 2010, et
 * l'afficher vaut mieux que de laisser croire qu'il est d'hier.
 */

.portrait-head {
	display: grid; gap: var(--sp-6); align-items: center;
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--sp-7) var(--sp-6);
}
@media (min-width: 48rem) {
	.portrait-head { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-7); }
}
.portrait-head--sans { grid-template-columns: minmax(0, 1fr); }

/* Le portrait est cadré carré et non en portrait : à 15 rem de large, un
   2:3 occupait une colonne haute de 22 rem à côté de trois lignes de texte. */
.portrait-head__image {
	border-radius: var(--radius-lg); overflow: hidden;
	background: var(--c-wash); aspect-ratio: 1; max-width: 15rem;
}
.portrait-head__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.portrait-head__texte h1 { margin-bottom: var(--sp-4); }

.signature {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
	margin: 0; font-family: var(--font-display);
}
.signature__nom { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.02em; color: var(--c-verdigris); }
.signature__role { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); }
.signature__date {
	font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em; color: var(--c-copper-dark);
}

/*
 * Le parcours reprend la colonne à nœuds du calendrier de traitement : même
 * geste, autre échelle — là une saison, ici une carrière. La colonne est portée
 * par chaque repère et non par la liste, pour s'arrêter net au dernier.
 */
.parcours__titre {
	font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em;
	color: var(--c-verdigris-mid); margin-bottom: var(--sp-5);
}

.parcours { list-style: none; margin: 0; padding: 0; max-width: 46rem; }

.parcours__repere {
	position: relative; display: grid; gap: var(--sp-1) var(--sp-5);
	grid-template-columns: minmax(0, 1fr);
	padding: 0 0 var(--sp-5) var(--sp-6);
	border-left: 1px solid var(--c-line);
}
@media (min-width: 34rem) {
	.parcours__repere { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; }
}
.parcours__repere:last-child { border-left-color: transparent; padding-bottom: 0; }

.parcours__repere::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--c-copper); transform: translateX(-5px);
	box-shadow: 0 0 0 4px var(--c-wash);
}
/* Le dernier repère a perdu sa colonne : sans ce trait son nœud flotterait. */
.parcours__repere:last-child::after {
	content: ""; position: absolute; left: -1px; top: 0; height: .5em;
	border-left: 1px solid var(--c-line);
}

.parcours__annee {
	font-family: var(--font-display); font-weight: 700;
	color: var(--c-copper-dark); letter-spacing: -0.01em;
}
.parcours__texte { color: var(--c-text); }

/* --- 404 ----------------------------------------------------------------- */

.notice-page { padding-block: var(--sp-9); text-align: center; }
.notice-page p { color: var(--c-text-muted); margin-bottom: var(--sp-5); }

/* --- Adaptation ---------------------------------------------------------- */

/* Le bandeau tracé se réduit tout seul — c'est un SVG à largeur fluide. Seuls
   les noms ont besoin d'aide : ils sont ancrés sur leurs plantes, et entre deux
   plantes il n'y a qu'un cinquième de la largeur. « Arboriculture » et « Pommes
   de terre » finissent par se toucher, d'où deux paliers de chasse. */
@media (max-width: 52rem) {
	.horizon__link { font-size: var(--fs-xs); letter-spacing: -0.02em; }
}

@media (max-width: 62rem) {
	.nav-toggle { display: inline-flex; }
	.header-bar { padding-block: var(--sp-3); gap: var(--sp-3); }
	.header-tools { gap: var(--sp-3); }

	.header-nav {
		display: block; padding-bottom: 0;
	}
	.nav { display: none; padding-block: var(--sp-2) var(--sp-4); }
	.nav[data-open="true"] { display: block; }

	.header-nav .search-form { margin: 0 0 var(--sp-3); flex-basis: auto; }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__link { padding: var(--sp-3); border-radius: 0; }
	.nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--c-copper); }

	/* Sur mobile, les sous-menus sont toujours dépliés : un menu déroulant au
	   survol n'a aucun sens sans souris. */
	.nav__sub {
		display: block; position: static; border: 0; box-shadow: none;
		padding: 0 0 var(--sp-2) var(--sp-4); min-width: 0;
		background: transparent;
	}
	.nav__parent > .nav__link::after { display: none; }
}

/* Sur les petits téléphones, la marque, les langues, le bouton de liste de prix
   et le bouton de menu ne tiennent pas sur une ligne : ils débordaient de l'écran
   et emportaient toute la page avec eux, texte compris. La marque garde donc la
   première ligne pour elle, les outils passent dessous. */
@media (max-width: 48rem) {
	.page-head__plante { width: 6.5rem; opacity: .35; }
	.page-head--illustre h1,
	.page-head--illustre .page-head__lead { max-width: none; }
}

@media (max-width: 34rem) {
	.header-bar { flex-wrap: wrap; row-gap: var(--sp-3); }
	.header-tools { width: 100%; margin-left: 0; justify-content: space-between; }
	/* Le corps se règle sur le verrou et non sur le nom seul : le signe est
	   dimensionné en em, il suit donc et le verrou garde ses proportions. */
	.brand__verrou { font-size: 1.75rem; }
	.brand__tagline { display: none; }
	.btn { padding: var(--sp-3) var(--sp-4); }
}

/* Sous 34 rem, même à .68 rem les noms se chevauchaient : « Arboriculture »
   mordait sur « Cultures maraîchères », lui-même sur « Céréales ». Ils passent
   donc sur deux rangs en quinconce — vigne, maraîchage et pommes de terre en
   haut, arboriculture et céréales dessous — et peuvent se couper en deux lignes :
   deux voisins d'un même rang sont alors à deux cinquièmes de largeur l'un de
   l'autre, plus qu'il n'en faut. Chaque nom reste sous sa plante. Le quinconce
   suppose l'ordre de la configuration, que vs_get_terms() garantit. */
@media (max-width: 34rem) {
	.horizon__noms { height: 4.4rem; }
	.horizon__item--ancre {
		white-space: normal; width: 6.5rem; text-align: center; line-height: 1.15;
	}
	.horizon__item--ancre:nth-child(even) { top: 2.3rem; }
}

@media (max-width: 30rem) {
	.horizon__link { font-size: .68rem; }
}