/* Jorion Philip-Seeds — front-office
   Tokens issus de « 13 - Note interne - Charte graphique appliquée à une app
   catalogue JPS ». Thème clair uniquement, pas d'arrondi sur images et cartes. */

:root {
  --vert-jps: #0E764D;
  --vert-fonce: #095C3B;
  --vert-clair: #E8F3ED;
  --rouge-jps: #BD261D;
  --noir: #1A1A1A;
  --gris: #666666;
  --gris-clair: #999999;
  --blanc: #FFFFFF;
  --bg-alt: #F7FAF8;
  --bg-warm: #FAF9F6;
  --border: rgba(0, 0, 0, 0.08);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  --radius-button: 8px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.10);

  --font-display: 'Lato', Arial, sans-serif;
  --font-initial: 'Amaranth', Georgia, serif;
  --font-body: 'DM Sans', Helvetica, Arial, sans-serif;

  --max: 1200px;
  --pad: 24px;
  --header-h: 72px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--gris);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--vert-jps); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }

.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blanc); color: var(--vert-jps); padding: 12px 20px;
  font-weight: 700;
}
.skip:focus { left: var(--space-md); top: var(--space-md); }

:focus-visible { outline: 2px solid var(--vert-jps); outline-offset: 3px; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-lg);
}
.site-header__logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.site-header__logo img { height: 48px; width: auto; }
.site-header__wordmark {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--vert-jps); letter-spacing: -0.01em; line-height: 1.15;
}
.site-header__baseline {
  display: none; font-size: 13px; color: var(--gris-clair); flex: 1 1 auto;
}
@media (min-width: 1080px) { .site-header__baseline { display: block; } }

.langs { display: flex; gap: var(--space-xs); margin-left: auto; flex: 0 0 auto; }
.langs a {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--noir);
  text-decoration: none; border-radius: var(--radius-button);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.langs a:hover { background: var(--vert-clair); color: var(--vert-jps); }
.langs a[aria-current="true"] {
  background: var(--vert-jps); color: var(--blanc); font-weight: 700;
}

/* ------------------------------------------------------------------- titres */
.eyebrow {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--vert-jps); margin: 0 0 var(--space-md);
}
.screen-title, .section-title {
  font-family: var(--font-display); font-weight: 900; color: var(--vert-jps);
  line-height: 1.15; margin: 0;
}
.screen-title { font-size: 32px; }
.section-title { font-size: 24px; margin-bottom: var(--space-lg); }
/* Première lettre en Amaranth rouge, fond clair uniquement (charte §3.2). */
.screen-title.initial::first-letter,
.section-title.initial::first-letter {
  font-family: var(--font-initial); color: var(--rouge-jps);
}
@media (max-width: 767px) {
  .screen-title { font-size: 26px; }
  .section-title { font-size: 20px; }
}

.hero-block { padding: var(--space-2xl) 0 var(--space-xl); text-align: center; }
.hero-block .lead {
  max-width: 620px; margin: 0 auto; font-size: 16px; color: var(--gris);
}
@media (max-width: 767px) { .hero-block { padding: var(--space-xl) 0 var(--space-lg); } }

/* ---------------------------------------------------------------- fil d'ariane */
.crumbs {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-lg) 0 0; font-size: 13px; color: var(--gris-clair);
}
.crumbs a { color: var(--gris); }
.crumbs .sep { color: var(--border); }
.crumbs strong { color: var(--noir); font-weight: 700; }

/* -------------------------------------------------------------------- grille */
.grid {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .grid { gap: 10px; } }

/* ---------------------------------------------------------------- carte produit */
.card {
  position: relative; display: block; overflow: hidden;
  background: var(--vert-jps);      /* fallback si pas de photo (charte §4.4) */
  aspect-ratio: 1 / 1; text-decoration: none;
}
.card:hover { text-decoration: none; }
.card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 250ms var(--ease);
}
@media (hover: hover) { .card:hover .card__img { transform: scale(1.08); } }
.card:active { opacity: 0.9; }
.card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(9, 92, 59, 0.85) 0%,
              rgba(9, 92, 59, 0.55) 20%,
              rgba(9, 92, 59, 0) 38%);
}
.card__body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-md);
}
.card__name {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--blanc); line-height: 1.15;
}
.card__tagline {
  font-size: 13px; color: rgba(255, 255, 255, 0.88); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--nophoto .card__body {
  position: static; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
@media (max-width: 479px) {
  .card__name { font-size: 16px; }
  .card__tagline { display: none; }
}
.card__badge {
  position: absolute; top: var(--space-md); left: var(--space-md);
  background: var(--rouge-jps); color: var(--blanc);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 5px 10px;
}
.card__draft {
  position: absolute; top: var(--space-md); right: var(--space-md);
  background: var(--gris-clair); color: var(--blanc);
  font-size: 11px; font-weight: 700; padding: 5px 10px;
}

/* ------------------------------------------------------- barre de recherche */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  padding: var(--space-lg) 0;
}
.searchbox { position: relative; flex: 1 1 260px; max-width: 420px; }
.searchbox input {
  width: 100%; min-height: 44px; padding: 10px 16px 10px 42px;
  font-family: var(--font-body); font-size: 15px; color: var(--noir);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-button);
}
.searchbox input::placeholder { color: var(--gris-clair); }
.searchbox svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--gris-clair); fill: none;
  stroke-width: 1.6;
}
.result-count {
  margin-left: auto; font-size: 13px; color: var(--gris-clair);
  white-space: nowrap;
}

/* --------------------------------------------------------------------- chips */
.chips {
  display: flex; gap: var(--space-sm); flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-xs);
}
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 8px 16px; border-radius: 50px;
  background: var(--vert-clair); color: var(--vert-jps);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  border: none; cursor: pointer; text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.chip:hover { background: #d8ebe1; text-decoration: none; }
.chip--active { background: var(--vert-jps); color: var(--blanc); }
.chip--active:hover { background: var(--vert-fonce); }
.chip--active .chip__x { font-size: 15px; line-height: 1; opacity: 0.85; }
.chip--ghost { background: transparent; color: var(--gris); }

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 14px 28px; border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  cursor: pointer; border: none; text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease),
              transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--vert-jps); color: var(--blanc); }
.btn--primary:hover { background: var(--vert-fonce); }
.btn--secondary {
  background: transparent; color: var(--vert-jps);
  border: 2px solid var(--vert-jps); padding: 12px 26px;
}
.btn--secondary:hover { background: var(--vert-jps); color: var(--blanc); }
.btn--onlight { background: var(--blanc); color: var(--vert-jps); box-shadow: var(--shadow-sm); }
.btn--onlight:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--text { background: transparent; color: var(--vert-jps); padding: 10px 0; }
.btn--text:hover { text-decoration: underline; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ----------------------------------------------------------- panneau filtres */
.filter-toggle { position: relative; }
.filter-toggle__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 50px;
  background: var(--blanc); color: var(--vert-jps);
  font-size: 12px; font-weight: 700;
}
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer[open] { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.4); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--blanc); display: flex; flex-direction: column;
  box-shadow: var(--shadow-md);
  animation: slide-in 200ms var(--ease);
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0.6; } }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg); border-bottom: 1px solid var(--border);
}
.drawer__title {
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  color: var(--vert-jps);
}
.drawer__close {
  width: 44px; height: 44px; border: none; background: transparent;
  color: var(--gris); cursor: pointer; font-size: 22px; line-height: 1;
}
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-lg); }
.drawer__foot {
  display: flex; gap: var(--space-md); padding: var(--space-lg);
  border-top: 1px solid var(--border);
}
.drawer__foot .btn { flex: 1 1 auto; }

.facet + .facet { margin-top: var(--space-lg); }
.facet__label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--vert-jps); margin-bottom: var(--space-sm);
}
.facet__options { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.facet__options input { position: absolute; opacity: 0; pointer-events: none; }
.facet__options label {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 8px 16px; border-radius: 50px;
  background: var(--vert-clair); color: var(--vert-jps);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.facet__options label:hover { background: #d8ebe1; }
.facet__options input:checked + label { background: var(--vert-jps); color: var(--blanc); }
.facet__options input:focus-visible + label { outline: 2px solid var(--vert-jps); outline-offset: 3px; }
.facet__count { font-size: 12px; opacity: 0.7; }

/* --------------------------------------------------------------- fiche produit */
.product-head { padding: var(--space-lg) 0 var(--space-xl); }
.product-head__grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .product-head__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
}
.product-head__media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--vert-jps);
}
.product-head__media img { width: 100%; height: 100%; object-fit: cover; }
.product-head__media.is-empty { display: grid; place-items: center; }
.product-head__initial {
  font-family: var(--font-display); font-weight: 900; font-size: 96px;
  color: rgba(255, 255, 255, 0.28); line-height: 1;
}
.product-head__flag { position: absolute; top: var(--space-md); left: var(--space-md); }

.product-head__meta {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; margin: 0 0 var(--space-md);
}
.product-head__meta a.badge { text-decoration: none; }
.product-head__meta a.badge:hover { background: #d8ebe1; }
.product-head__name { margin: 0; }
.product-head__tagline {
  font-size: 18px; font-weight: 500; font-style: italic;
  color: var(--vert-jps); margin: var(--space-sm) 0 0;
}
.product-head__actions { margin: var(--space-lg) 0 0; }

/* Critères saisis, rendus lisibles : « Espèce · Orge ». */
.spec-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin: var(--space-lg) 0 0; padding: 0;
}
.spec-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--vert-clair); padding: 7px 14px; border-radius: 50px;
}
.spec-chip span {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--vert-jps); opacity: 0.75;
}
.spec-chip strong { font-size: 13px; font-weight: 700; color: var(--vert-fonce); }

.checklist { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 30px; margin-bottom: 10px;
  color: var(--noir); font-size: 16px; font-weight: 500;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.28em;
  width: 18px; height: 18px; background: var(--vert-jps);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 39% 70%);
}

/* Frise des douze mois : la période de semis se lit d'un coup d'œil. */
.calendar {
  list-style: none; display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 3px; margin: 0; padding: 0; max-width: 620px;
}
.calendar__month {
  display: grid; place-items: center; height: 42px;
  background: var(--bg-alt); border: 1px solid var(--border);
  color: var(--gris-clair); font-size: 12px; font-weight: 700;
}
/* Deux teintes, comme le bloc INFO-SEMIS de la fiche PDF (demande de JPS,
   8 septembre 2026) : le vert clair dit « possible dès cette période », le
   vert foncé « période recommandée ». Sans marquage, tous les mois cités
   gardent le vert unique de la charte. */
.calendar__month.is-on {
  background: var(--vert-jps); border-color: var(--vert-jps); color: var(--blanc);
}
.calendar__month.is-best {
  background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--blanc);
}
.calendar:has(.is-best) .calendar__month.is-on {
  background: #87C762; border-color: #87C762; color: var(--noir);
}
.calendar-legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 13px; color: var(--gris);
}
.calendar-legend__puce {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
}
.calendar-legend__puce--best { background: var(--vert-fonce); }
.calendar-legend__puce--on { background: #87C762; }
@media (max-width: 560px) { .calendar__month { height: 34px; font-size: 11px; } }

.related-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
}
.related-head .section-title { margin-bottom: var(--space-lg); }

.badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 10px;
}
.badge--category { background: var(--vert-clair); color: var(--vert-jps); }
.badge--new { background: var(--rouge-jps); color: var(--blanc); }
.badge--draft { background: var(--gris-clair); color: var(--blanc); }

.section { padding: var(--space-2xl) 0; }
.section--alt { background: var(--bg-alt); }
@media (max-width: 767px) { .section { padding: var(--space-xl) 0; } }

.prose p { margin: 0 0 var(--space-sm); max-width: 68ch; }
.prose p + p { margin-top: 0; }
.prose p:last-child { margin-bottom: 0; }

.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li {
  position: relative; padding-left: 28px; margin-bottom: var(--space-sm);
  color: var(--noir); font-weight: 500;
}
.bullets li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 8px; height: 8px; background: var(--vert-jps);
}

.callout {
  background: var(--vert-clair); border-left: 4px solid var(--vert-jps);
  padding: var(--space-lg); color: var(--noir);
}
.callout p { margin: 0 0 var(--space-sm); }
.callout p:last-child { margin-bottom: 0; }

.facts { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact__label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--vert-jps); margin-bottom: var(--space-xs);
}
.fact__value {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--noir); line-height: 1.3;
}
.fact__value span { display: block; }
.fact__value span + span { margin-top: 2px; }

/* ------------------------------------------------------------------- jauges */
.gauges { display: grid; gap: var(--space-lg) var(--space-xl); }
@media (min-width: 768px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gauge__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); margin-bottom: 6px;
}
.gauge__label { font-size: 15px; color: var(--noir); }
.gauge__value {
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  color: var(--vert-jps); white-space: nowrap;
}
.gauge__rail { height: 6px; background: var(--vert-clair); }
.gauge__fill { height: 100%; background: var(--vert-jps); }
.scale-note { font-size: 13px; color: var(--gris-clair); margin: var(--space-lg) 0 0; }

/* ------------------------------------------------------------------ tableaux */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 15px;
  border: 1px solid var(--vert-clair);
}
table.data th {
  background: var(--vert-clair); color: var(--vert-jps);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; text-align: left; padding: 10px 14px;
}
table.data td { padding: 11px 14px; border-top: 1px solid var(--vert-clair); color: var(--noir); }
table.data tbody tr:nth-child(even) { background: var(--bg-alt); }
table.data td:last-child { font-weight: 700; }

.meta-line { font-size: 13px; color: var(--gris-clair); }
.meta-line strong { color: var(--gris); font-weight: 500; }

.empty {
  padding: var(--space-2xl) 0; text-align: center; color: var(--gris-clair);
}

/* ------------------------------------------------------------------- footer */
.site-footer {
  background: var(--noir); color: rgba(255, 255, 255, 0.7);
  padding: var(--space-xl) 0; margin-top: var(--space-2xl);
  font-size: 13px;
}
.site-footer__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  align-items: center; justify-content: space-between;
}
.site-footer img { height: 44px; width: auto; }
.site-footer a { color: var(--blanc); }

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

/* ----------------------------------------------------- panneau de facettes */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.facets {
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: var(--space-lg); margin-bottom: var(--space-lg);
}
.facets[hidden] { display: none; }
.facet { border: 0; margin: 0; padding: 0; }
.facet + .facet { margin-top: var(--space-lg); }
.facet legend { padding: 0; }
.facets__actions {
  display: flex; align-items: center; gap: var(--space-md);
  margin-top: var(--space-lg); padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}
.js .facets__actions .btn--primary { display: none; }

/* ------------------------------------------------------- ajustements mobile */
@media (max-width: 640px) {
  :root { --pad: 20px; }
  /* Logo et langues sur une seule ligne, la recherche en dessous :
     l'en-tête ne doit pas manger un cinquième de l'écran. */
  .site-header__inner { min-height: 56px; gap: var(--space-sm); padding-top: 6px; }
  .site-header__logo img { height: 30px; width: auto; }
  .langs { gap: 2px; }
  .langs a { min-width: 34px; min-height: 38px; padding: 0 6px; font-size: 12px; }
  .site-search input { min-height: 42px; }
  .product-hero--nophoto .product-hero__inner { padding: var(--space-xl) var(--pad); }
  .toolbar { gap: var(--space-sm); }
  .result-count { margin-left: 0; width: 100%; }
}

/* -------------------------------------------------------- recherche globale */
.site-search {
  position: relative; flex: 1 1 240px; max-width: 340px; margin-left: var(--space-lg);
}
.site-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--gris-clair); fill: none; stroke-width: 1.7;
  pointer-events: none;
}
.site-search input {
  width: 100%; min-height: 40px; padding: 8px 14px 8px 34px;
  font-family: var(--font-body); font-size: 14px; color: var(--noir);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-button);
}
.site-search input::placeholder { color: var(--gris-clair); }
.site-search__suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  list-style: none; margin: 0; padding: 6px;
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: var(--radius-button); box-shadow: var(--shadow-md);
  max-height: 60vh; overflow-y: auto;
}
.site-search__suggest[hidden] { display: none; }
.site-search__suggest a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: var(--noir); text-decoration: none;
}
.site-search__suggest a:hover,
.site-search__suggest li.is-active a { background: var(--vert-clair); }
.site-search__suggest strong { display: block; font-size: 14px; color: var(--vert-jps); }
.site-search__suggest span { font-size: 12px; color: var(--gris); }
@media (max-width: 1079px) { .site-search { max-width: 220px; margin-left: var(--space-md); } }
@media (max-width: 720px) {
  .site-header__inner { flex-wrap: wrap; padding-bottom: 10px; }
  .site-search { order: 3; flex: 1 1 100%; max-width: none; margin: 4px 0 0; }
}

.searchbox--large input { min-height: 52px; font-size: 17px; padding-left: 46px; }
.searchbox--large svg { width: 19px; height: 19px; left: 16px; }

.results { list-style: none; margin: var(--space-lg) 0 var(--space-2xl); padding: 0; }
.result + .result { border-top: 1px solid var(--border); }
.result__link {
  display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-md);
  align-items: center; padding: 14px 4px; text-decoration: none; color: inherit;
}
.result__link:hover { background: var(--bg-alt); text-decoration: none; }
.result__media { width: 72px; height: 72px; background: var(--vert-jps); overflow: hidden; }
.result__media img { width: 100%; height: 100%; object-fit: cover; }
.result__name {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: 17px; color: var(--vert-jps);
}
.result__tagline { display: block; font-size: 14px; color: var(--gris); margin-top: 2px; }
.result__meta { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
@media (max-width: 600px) {
  .result__link { grid-template-columns: 56px 1fr; }
  .result__media { width: 56px; height: 56px; }
  .result__meta { grid-column: 1 / -1; }
}

/* ------------------------------------------------ liens d'en-tête et sélection */
.header-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header-links a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: var(--radius-button);
  font-size: 13px; font-weight: 500; color: var(--noir); text-decoration: none;
  white-space: nowrap;
}
.header-links a:hover { background: var(--vert-clair); color: var(--vert-jps); }
.header-links__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 50px;
  background: var(--vert-jps); color: var(--blanc); font-size: 11px; font-weight: 700;
}
/* La sortie vers le site vitrine. Mise à part des liens du catalogue par sa
   couleur et sa flèche : ce n'est pas une rubrique de plus, c'est la porte. */
.header-links__site { color: var(--gris); }
.header-links__site::after { content: "\2197"; font-size: 11px; opacity: .75; }
.langs { margin-left: 0; }

/* ------------------------------------------------------- carte : ajout et cond. */
.card-wrap { position: relative; }
.card__pack {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm);
  background: rgba(255, 255, 255, 0.92); color: var(--noir);
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  backdrop-filter: blur(6px); pointer-events: none;
}
.card__pick {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); border: none; cursor: pointer;
  color: var(--vert-jps); backdrop-filter: blur(6px);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.card__pick svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.card__pick:hover { background: var(--blanc); }
.card__pick.is-picked { background: var(--vert-jps); color: var(--blanc); }
.card__pick.is-picked svg { transform: rotate(45deg); }

/* ------------------------------------------------------------------- partage */
.share {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap; margin-top: var(--space-lg);
}
.share__label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--vert-jps); margin-right: 2px;
}
.share__btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 8px 15px; border-radius: 50px;
  background: var(--blanc); color: var(--noir);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
              background 180ms var(--ease), transform 180ms var(--ease);
}
.share__btn:hover {
  text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.share__icon { width: 17px; height: 17px; flex: 0 0 auto; }
.share__icon[hidden] { display: none; }

/* Chaque service reprend sa couleur au survol : le glyphe WhatsApp n'est
   reconnaissable qu'en vert WhatsApp, pas en vert JPS. */
.share__btn--mail:hover     { color: var(--vert-jps); border-color: var(--vert-jps); }
.share__btn--whatsapp       { color: #128C7E; }
.share__btn--whatsapp:hover { color: #fff; background: #25D366; border-color: #25D366; }
.share__btn--copy:hover     { color: var(--vert-jps); border-color: var(--vert-jps); }
.share__btn--copy.is-done   { color: #fff; background: var(--vert-jps); border-color: var(--vert-jps); }
.share__btn--native:hover   { color: var(--vert-jps); border-color: var(--vert-jps); }

@media (max-width: 520px) {
  .share { gap: 6px; }
  .share__btn { padding: 8px 12px; font-size: 12px; }
}


/* ----------------------------------------------------------- filtre par note */
.note-filter { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.note-filter select {
  min-height: 40px; padding: 8px 12px; font-family: var(--font-body); font-size: 14px;
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: var(--radius-button); color: var(--noir);
}

/* ------------------------------------------------------------- comparateur */
.compare-wrap { margin-top: var(--space-lg); }
table.compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.compare th, table.compare td {
  padding: 10px 12px; border-bottom: 1px solid var(--vert-clair);
  vertical-align: top; text-align: left;
}
table.compare tbody th {
  width: 190px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--vert-jps); background: var(--bg-alt);
  position: sticky; left: 0;
}
.compare__corner { background: var(--blanc); position: sticky; left: 0; }
.compare__head { text-align: center; padding-bottom: var(--space-md); }
.compare__head a { display: block; text-decoration: none; }
/* Vignette volontairement petite : l'en-tête est collant, et chaque
   millimètre qu'il prend est un critère de moins à l'écran. */
.compare__head img {
  width: 100%; max-width: 96px; aspect-ratio: 1/1; object-fit: cover;
  margin: 0 auto var(--space-sm);
}
.compare__noimg {
  display: grid; place-items: center; width: 100%; max-width: 96px;
  aspect-ratio: 1/1; margin: 0 auto var(--space-sm); background: var(--vert-jps);
  color: rgba(255,255,255,0.3); font-family: var(--font-display);
  font-weight: 900; font-size: 30px;
}
.compare__head strong {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: 17px; color: var(--vert-jps);
}
/* Spécificité alignée sur `table.compare tbody th`, sinon le fond gris gagne. */
table.compare tbody tr.compare__section th {
  background: var(--vert-jps); color: var(--blanc); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em; position: static; width: auto;
}
table.compare td span { display: block; }

/* En-tête collant. `thead th` reste visible en scrollant vers le bas, la
   première colonne en scrollant vers la droite ; le coin cumule les deux et
   doit donc passer devant les deux (z-index plus élevé).

   Le tableau scrolle dans sa propre boîte, et non dans la page : c'est la
   seule façon de rendre les deux axes collants à la fois. Sur téléphone c'est
   aussi la seule qui marche — l'en-tête du site y est haut de 147 px et
   collant, si bien qu'un `thead` collé à la page passerait dessous. */
.compare-wrap { max-height: 80vh; overflow: auto; overscroll-behavior: contain; }
table.compare thead th {
  position: sticky; top: 0; z-index: 2; background: var(--blanc);
  box-shadow: inset 0 -1px 0 var(--vert-clair);
}
table.compare tbody th { z-index: 1; }
.compare__corner { z-index: 3 !important; }

.compare__head__tags { display: block; margin-top: 4px; }
.compare__head__tags .badge { font-size: 10px; padding: 3px 6px; }

/* Note en pastille colorée, comme sur la fiche : la couleur porte
   l'information, et un chiffre reste lisible dans 40 px de large. */
.compare__pastille {
  display: inline-block !important; min-width: 52px; padding: 4px 7px;
  border-radius: 3px; font-family: var(--font-display); font-weight: 900;
  font-size: 12px; text-align: center; color: var(--blanc);
}
/* La meilleure note de la ligne : c'est ce qu'un commercial cherche
   d'abord, et ça rend un tableau dense lisible d'un coup d'œil. */
.compare__note.is-best { background: var(--vert-clair); }
.compare__couronne {
  display: inline-block !important; margin-left: 4px; font-size: 13px;
  line-height: 1; color: var(--vert-fonce); vertical-align: 1px;
}

@media (max-width: 640px) {
  .header-links a { padding: 0 8px; font-size: 12px; }
  /* Trois variétés doivent tenir dans 375 px sans scroll latéral : les
     colonnes se partagent la largeur (`table-layout: fixed`), les libellés
     descendent à 76 px, et la vignette devient une miniature. Plus de
     largeur plancher, donc plus de boîte à scroller dans la page. */
  .compare-wrap { max-height: 68vh; }
  table.compare { min-width: 0; width: 100%; table-layout: fixed; font-size: 13px; }
  table.compare th, table.compare td { padding: 7px 5px; }
  table.compare tbody th {
    width: 76px; font-size: 10px; letter-spacing: 0;
    line-height: 1.25; hyphens: auto; overflow-wrap: anywhere;
  }
  table.compare td { overflow-wrap: anywhere; }
  .compare__head img, .compare__noimg { max-width: 40px; font-size: 18px; }
  .compare__head strong { font-size: 12px; line-height: 1.2; }
  .compare__head__tags { display: none; }   /* la rubrique est sur la fiche */
  .compare__pastille { min-width: 42px; padding: 3px 4px; font-size: 11.5px; }
  .compare__couronne { margin-left: 2px; font-size: 11px; }
}

/* -------------------------------------------------------------- page sélection */
.selection-grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: start; margin-bottom: var(--space-2xl);
}
@media (min-width: 900px) {
  .selection-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--space-2xl); }
  .actions-panel { position: sticky; top: 88px; }
}

.picked { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.picked__item {
  display: flex; align-items: stretch; gap: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.picked__link {
  display: flex; align-items: center; gap: var(--space-md);
  flex: 1 1 auto; padding: 14px 4px; text-decoration: none; color: inherit; min-width: 0;
}
.picked__link:hover { text-decoration: none; }
.picked__item:hover { background: var(--bg-alt); }
.picked__media {
  flex: 0 0 auto; width: 76px; height: 76px; overflow: hidden;
  background: var(--vert-jps); display: grid; place-items: center;
}
.picked__media img { width: 100%; height: 100%; object-fit: cover; }
.picked__media.is-empty {
  font-family: var(--font-display); font-weight: 900; font-size: 30px;
  color: rgba(255, 255, 255, 0.32);
}
.picked__body { min-width: 0; }
.picked__name {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: 17px; color: var(--vert-jps); line-height: 1.2;
}
.picked__tagline {
  display: block; font-size: 14px; color: var(--gris); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picked__meta {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap; margin-top: 6px;
}
.picked__remove {
  flex: 0 0 auto; width: 44px; border: none; background: transparent;
  color: var(--gris-clair); font-size: 22px; line-height: 1; cursor: pointer;
  transition: color 180ms var(--ease), background 180ms var(--ease);
}
.picked__remove:hover { color: var(--rouge-jps); background: rgba(189, 38, 29, 0.06); }

/* Panneau d'actions : le comparateur est l'action principale, il se voit. */
.actions-panel { display: flex; flex-direction: column; gap: var(--space-md); }
.actions-panel__title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--vert-jps); margin: 0;
}
.action-card {
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: var(--space-lg);
}
.action-card--primary {
  background: var(--vert-clair); border-color: rgba(14, 118, 77, 0.22);
}
.action-card__label {
  margin: 0 0 4px; font-family: var(--font-display); font-weight: 900;
  font-size: 17px; color: var(--vert-jps);
}
.action-card__pitch { margin: 0 0 var(--space-md); font-size: 14px; color: var(--gris); }
.action-card__note {
  margin: var(--space-sm) 0 0; font-size: 13px; color: var(--gris);
}
.btn--block { width: 100%; }
.btn.is-disabled { opacity: 0.45; pointer-events: none; }

.actions-panel__clear { margin: 0; text-align: center; }
.actions-panel__clear .btn { padding: 6px 12px; }

.empty-state {
  text-align: center; padding: var(--space-2xl) var(--pad);
  background: var(--bg-alt); border: 1px solid var(--border);
  margin-bottom: var(--space-2xl);
}
.empty-state p { color: var(--gris); margin: 0 0 var(--space-lg); }

@media (max-width: 600px) {
  .picked__media { width: 60px; height: 60px; }
  .picked__name { font-size: 16px; }
}

/* Galerie de la fiche : le visuel principal, puis les compléments en vignettes.
   Trois au maximum — au-delà la fiche deviendrait un album. */
.product-head__vignettes {
  display: flex; gap: var(--space-sm); list-style: none;
  margin: var(--space-sm) 0 0; padding: 0;
}
.product-head__vignette {
  display: block; padding: 0; border: 2px solid transparent; background: none;
  cursor: pointer; line-height: 0; border-radius: 2px;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  opacity: 0.68;
}
.product-head__vignette img {
  width: 74px; height: 74px; object-fit: cover; display: block;
}
.product-head__vignette:hover,
.product-head__vignette:focus-visible { opacity: 1; }
.product-head__vignette.is-active {
  border-color: var(--vert-jps); opacity: 1;
}
@media (max-width: 640px) {
  .product-head__vignette img { width: 60px; height: 60px; }
}

/* Bandeau de consentement. Posé en bas, il n'occulte pas le catalogue : rien
   ne justifie de bloquer la lecture pour des témoins strictement nécessaires.
   « Tout accepter » et « Tout refuser » partagent exactement le même style —
   un refus rendu moins visible que l'accord vicierait le consentement. */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--blanc); border-top: 3px solid var(--vert-jps);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.16);
}
.cookies__corps {
  max-width: 1180px; margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.cookies__titre {
  font-family: var(--font-display); font-weight: 900; font-size: 17px;
  color: var(--vert-jps); margin: 0 0 6px;
}
.cookies__texte { margin: 0 0 var(--space-md); font-size: 14px; max-width: 68ch; }
.cookies__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.cookies__reglages {
  border-top: 1px solid var(--border); margin: 0 0 var(--space-md);
  max-height: 42vh; overflow-y: auto;
}
.cookies__poste {
  display: flex; gap: var(--space-md); align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-md) 0; border-bottom: 1px solid var(--border);
}
.cookies__poste strong { font-size: 14px; }
.cookies__poste p { margin: 4px 0 0; font-size: 13px; color: var(--gris); max-width: 72ch; }
.cookies__fige {
  font-size: 12px; font-weight: 700; color: var(--vert-jps);
  background: var(--vert-clair); border-radius: 12px; padding: 3px 10px;
  white-space: nowrap;
}
.cookies__bascule { display: inline-flex; align-items: center; }
.cookies__bascule span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.cookies__bascule input { width: 20px; height: 20px; accent-color: var(--vert-jps); }
@media (max-width: 640px) {
  .cookies__corps { padding: var(--space-md); }
  .cookies__actions .btn { flex: 1 1 100%; }
}

/* Lien de pied de page pour revenir sur son choix. */
.site-footer__cookies {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}

/* `display` posé sur une classe l'emporte sur la valeur par défaut de
   l'attribut `hidden` : un bouton `.btn hidden` restait visible. On rétablit
   la priorité une fois pour toutes, plutôt que d'y penser à chaque composant. */
[hidden] { display: none !important; }

/* Page 404 : « Cette page n'est pas encore semée ». Le dessin et son
   animation vivent dans le partiel templates/_semis.html. */
.hero-block--404 { text-align: center; }

/* Échelle de couleur des notes, de « très bas » à « très élevé ».
   Ces neuf teintes sont celles de `SCALE_COLORS` (app/pdf.py), relevées sur
   les gabarits InDesign de Julie : un 3/9 doit être du même orange sur le
   site et sur la fiche. Un test compare les deux listes — si tu changes
   l'une, change l'autre. */
:root {
  --note-1: #CD4634;
  --note-2: #E15C36;
  --note-3: #E87E3A;
  --note-4: #EE9D3D;
  --note-5: #DEBD3F;
  --note-6: #919B44;
  --note-7: #719F45;
  --note-8: #4BA346;
  --note-9: #1DA958;
  --note-vide: #E7EDE9;   /* segment non atteint */
}

/* =========================================================== bloc info-semis
   Frise, densités et repères sous un même titre, comme le bloc INFO-SEMIS de
   la fiche. C'est ce qu'un négociant lit d'abord : quand semer, et combien. */
.semis { display: grid; gap: var(--space-md); max-width: 720px; }
.semis__texte { margin: 0; font-size: 14px; color: var(--gris); }

/* Colonnes calées sur la proportion de la fiche : environ 28 mm de large
   pour 86 mm de bloc. Étirées sur toute la largeur du texte, les pastilles
   deviennent des bannières et perdent l'air de la maquette. */
.semis-cols {
  list-style: none; display: grid; gap: 6px; margin: 0; padding: 0;
  justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(104px, 150px));
}
.semis-col { display: grid; gap: 4px; text-align: center; }
.semis-col__periode {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--noir);
}
.semis-col__valeur {
  padding: 7px 6px; font-family: var(--font-display); font-weight: 900;
  font-size: 14px; color: var(--blanc); background: #719F45;
}
/* Deux teintes seulement quand JPS a marqué une période recommandée : sans
   marquage, toutes les colonnes gardent le vert unique de la charte. */
.semis-cols--deux-tons .semis-col__valeur { background: #87C762; color: var(--noir); }
.semis-cols--deux-tons .semis-col.is-best .semis-col__valeur {
  background: var(--vert-fonce); color: var(--blanc);
}

/* ============================================================ notes techniques
   Le même langage visuel que la fiche : jauge à neuf segments pour
   l'agronomie, pastille colorée pour le reste. */
.notes__famille {
  margin: var(--space-lg) 0 var(--space-sm); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--vert-jps);
}
.notes__famille:first-of-type { margin-top: var(--space-md); }
.notes { display: grid; gap: 0 var(--space-xl); }
@media (min-width: 768px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note {
  display: flex; align-items: center; gap: var(--space-md);
  padding: 7px 0; border-bottom: 1px solid var(--vert-clair);
}
.note__label { flex: 1 1 auto; font-size: 14.5px; color: var(--noir); font-weight: 500; }

.note__jauge {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(9, 1fr);
  gap: 1.5px; width: 160px;
}
.note__cran { height: 15px; background: var(--note-vide); }
.note__cran em {
  display: block; font-family: var(--font-display); font-style: normal;
  font-weight: 900; font-size: 10px; line-height: 15px; text-align: center;
  color: var(--blanc);
}

.note__pastille {
  flex: 0 0 auto; min-width: 62px; padding: 4px 8px; border-radius: 3px;
  font-family: var(--font-display); font-weight: 900; font-size: 12.5px;
  line-height: 1.4; text-align: center; color: var(--blanc);
}

.echelle {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: var(--space-lg) 0 0; font-size: 13px; color: var(--gris);
}
.echelle__pastille {
  padding: 3px 8px; border-radius: 3px; font-family: var(--font-display);
  font-weight: 900; font-size: 11px; color: var(--blanc);
}
.echelle__texte { font-weight: 600; color: var(--noir); }

/* Sections resserrées de la fiche produit : la page tenait sur trois écrans
   pour un contenu qui en remplit deux. */
.section--serree { padding: var(--space-xl) 0; }
.section--serree .section-title { margin-bottom: var(--space-md); }
.facts--compactes {
  gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg);
  padding-top: var(--space-lg); border-top: 1px solid var(--border);
}
.facts--compactes .fact__value { font-size: 16px; }
@media (max-width: 560px) {
  .note__jauge { width: 116px; }
  .note__label { font-size: 13.5px; }
}

/* Deux colonnes de texte sur grand écran, empilées sur mobile. `auto-fit`
   plutôt que deux colonnes fixes : une variété sans « caractéristiques »
   n'a qu'un bloc, et il doit prendre toute la largeur au lieu de se
   recroqueviller sur la moitié — sinon la section grandit au lieu de
   rétrécir. */
.duo {
  display: grid; gap: var(--space-lg) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.duo .prose p { max-width: 68ch; }

/* Coche encadrée, comme les points forts de la fiche PDF : un V blanc dans un
   carré vert, et non un V vert posé sur le fond. */
.checklist li { padding-left: 28px; margin-bottom: 8px; font-size: 15.5px; }
.checklist li::before {
  top: 0.15em; width: 19px; height: 19px; background: var(--vert-jps);
  clip-path: none;
}
.checklist li::after {
  content: ""; position: absolute; left: 4px; top: 0.42em;
  width: 11px; height: 7px; border-left: 2.4px solid var(--blanc);
  border-bottom: 2.4px solid var(--blanc); transform: rotate(-45deg);
}

/* ------------------------------------------------------------ pictogrammes
   Les signes de tête de fiche : label, résistance, marque. Ils vivaient sur
   le PDF depuis le début et manquaient sur le web, alors qu'ils sont saisis
   une seule fois pour les deux. */
.product-head__ligne {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
}
.product-head__ligne .product-head__name { margin-bottom: 0; }

.pictos {
  list-style: none; display: flex; align-items: center; gap: 10px;
  margin: 4px 0 0; padding: 0; flex: 0 0 auto;
}
.picto { display: block; }
/* Les fichiers sont des ronds sur fond blanc aplati : pas d'ombre ni de
   cadre, qui feraient apparaître le carré de l'image. */
.picto img { display: block; width: 56px; height: 56px; object-fit: contain; }

/* Légende des pictos : une caption, pas des puces. Sans cette nuance elle se
   confondait avec les facettes juste en dessous, qui sont cliquables et
   portent un couple libellé/valeur — deux choses différentes ne doivent pas
   se ressembler. */
.pictos-legende {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: var(--space-sm) 0 0; padding: 0;
  font-size: 12.5px; color: var(--gris);
}
.pictos-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pictos-legende span::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto;
  background: var(--vert-jps); border-radius: 50%;
}
@media (max-width: 560px) {
  .picto img { width: 44px; height: 44px; }
  .pictos { gap: 8px; }
}

/* ------------------------------------------- commandes du comparateur
   Le bloc est masqué dans le HTML et révélé par le script : sans lui, aucune
   commande ne s'affiche et le tableau reste entier. */
.compare-outils {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  margin: var(--space-lg) 0 0;
}
.compare-bascule {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 14px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius-button);
  font-size: 14px; font-weight: 600; color: var(--noir);
}
.compare-bascule:hover { background: var(--vert-clair); }
.compare-bascule input { width: 17px; height: 17px; accent-color: var(--vert-jps); }
.compare-compte { margin: 0; font-size: 13px; color: var(--gris); }

/* Barre de famille cliquable. Le bouton occupe toute la barre pour offrir une
   cible confortable au pouce, et hérite de la couleur du fond vert. */
.compare__plier {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  text-transform: inherit; letter-spacing: inherit;
}
.compare__chevron {
  display: block; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); transition: transform 0.15s ease;
}
.compare__plier[aria-expanded="false"] .compare__chevron { transform: rotate(0deg); }
/* Une famille repliée se distingue de la même barre dépliée. */
table.compare tbody tr.compare__section.is-replie th { background: var(--vert-fonce); }

/* Lignes de densité sans période : « 1 dose = 500 000 grains ». Elles se
   lisent sous les colonnes, du même gris que la période de semis en clair,
   parce qu'elles complètent le tableau sans être une valeur de colonne. */
.semis-restes {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 2px;
  font-size: 13px; color: var(--gris-texte, #5A5A5A);
}

/* Composition dont les proportions sont masquées : une seule colonne. Sans
   cette règle la table s'étire sur toute la largeur pour une liste de noms. */
.data--une-colonne { width: auto; min-width: min(340px, 100%); }