/* Weedily — feuille de style vague 1
   Palette : aubergine/violet profond · ambre/or · fond crème
   Métaphore : cabinet de curiosités, carte à collectionner, herbier XIXe
   Zéro composant partagé avec Kanayou. =============================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Couleurs */
  --aubergine:        #3d1458;
  --aubergine-hover:  #5a1e80;
  --aubergine-light:  #f3eaf8;
  --ambre:            #a86200;
  --ambre-fond:       #f5c842;
  --ambre-fond-hover: #e8b630;
  --creme:            #faf7f1;
  --creme-alt:        #f2ede3;
  --creme-dark:       #e8e1d4;
  --texte:            #1c1714;
  --texte-muted:      #6b6058;
  --texte-tres-muted: #9c9088;
  --bordure:          #d8d0bf;
  --bordure-legere:   #ece7dc;
  --blanc:            #ffffff;
  --rouge-signalement:#b91c1c;

  /* Typographie */
  --font-display: Georgia, "Times New Roman", serif;
  --font-corps:   system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", monospace;

  /* Espacements */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  24px;
  --r-xl:  40px;
  --r-2xl: 64px;

  /* Conteneur */
  --container: 1080px;
  --gap-grille: 20px;
}

/* ── 2. Reset & base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--creme);
  color: var(--texte);
  font-family: var(--font-corps);
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

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

a { color: var(--aubergine); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--aubergine-hover); }
a:focus-visible {
  outline: 2px solid var(--aubergine);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--texte);
}

p { max-width: 72ch; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

/* ── 3. Conteneur ──────────────────────────────────────────────────────── */
.container,
.hero-registre__inner,
.listing-header,
.grille-herbier,
.bonsplans-liste,
.guides-liste,
.page-header,
.section-recentes,
.section-populaires,
.section-breeders,
.entrees-taxonomiques {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
}

/* ── Bandeau mention majeurs (WEE-F01) — liseré fin, non bloquant ───────── */
.bandeau-majeurs {
  margin: 0;
  max-width: none;   /* neutralise le p{max-width:72ch} global : pleine largeur, une ligne, centré */
  background: var(--aubergine);
  color: var(--creme);
  font-family: var(--font-corps);
  font-size: .8125rem;
  line-height: 1.4;
  text-align: center;
  padding: .4rem var(--r-lg);
}

/* Micro-mention au point de sortie affilié (WEE-F02) — police secondaire, discrète */
.mention-majeurs-sortie {
  margin: .5rem 0 0;
  color: var(--texte-muted);
  font-family: var(--font-corps);
  font-size: .8125rem;
}

/* ── 4. Header & navigation ─────────────────────────────────────────────── */
body > header {
  background: var(--aubergine);
  padding-block: var(--r-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(61,20,88,.25);
}

/* Header sur une ligne : logo à gauche, nav à droite (comité 09/2026). */
.header-barre {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-lg);
}

.header-logo {
  color: var(--ambre-fond);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.header-logo:hover { color: var(--blanc); }

.nav-principale__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-xs) var(--r-sm);
  list-style: none;
}
.nav-principale__lien {
  display: block;
  padding: var(--r-xs) var(--r-sm);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-bottom-color .15s;
}
.nav-principale__lien:hover { color: var(--ambre-fond); }
.nav-principale__lien:focus-visible { outline-color: var(--ambre-fond); }
.nav-principale__lien--actif {
  color: var(--blanc);
  font-weight: 700;
  border-bottom-color: var(--ambre-fond);
}

/* ── 5. Footer ─────────────────────────────────────────────────────────── */
body > footer {
  background: var(--aubergine);
  color: rgba(255,255,255,.75);
  font-size: .8125rem;
  padding-block: var(--r-2xl) var(--r-xl);
  margin-top: 0;   /* plus de bande crème entre la section aubergine et le footer */
}

/* Bandeau réassurance — transition entre newsletter et footer, renforce le
   positionnement observatoire (comble l'ancienne bande vide). */
.section-reassurance {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--r-xl) var(--r-lg);
}
.reassurance-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--r-sm) var(--r-xl);
  color: var(--texte-muted);
  font-size: .9rem;
}
.reassurance-liste li::before {
  content: "✓";
  color: var(--ambre);
  font-weight: 700;
  margin-right: .4rem;
}

/* Footer corporate multi-colonnes (comité 09/2026). */
.footer-grille {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--r-xl);
}
.footer-marque {
  color: var(--ambre-fond);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}
.footer-baseline { margin: var(--r-sm) 0; line-height: 1.5; }
.footer-majeurs { color: rgba(255,255,255,.5); }
.footer-col__titre {
  color: var(--blanc);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: var(--r-sm);
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--r-xs);
}
.footer-bas {
  max-width: var(--container);
  margin: var(--r-xl) auto 0;
  padding: var(--r-md) var(--r-lg) 0;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--r-sm) var(--r-lg);
}
body > footer a { color: rgba(255,255,255,.85); text-decoration: none; }
body > footer a:hover { color: var(--ambre-fond); text-decoration: underline; }

/* ── 6. Typographie utilitaire ─────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.section-titre {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--aubergine);
  margin-bottom: var(--r-lg);
}

.page-header {
  padding-block: var(--r-xl) var(--r-lg);
  border-bottom: 1px solid var(--bordure);
  margin-bottom: var(--r-xl);
}

.page-header h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--aubergine);
}

.page-header__intro {
  color: var(--texte-muted);
  margin-top: var(--r-sm);
  font-size: .9375rem;
}

/* ── 7. Boutons ────────────────────────────────────────────────────────── */
.btn-principal {
  display: inline-flex;
  align-items: center;
  gap: var(--r-xs);
  background: var(--aubergine);
  color: var(--blanc);
  font-family: var(--font-corps);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: .625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.btn-principal:hover { background: var(--aubergine-hover); color: var(--blanc); }

/* Newsletter : bouton doré (l'aubergine sur fond aubergine était invisible). */
.newsletter-bloc .btn-principal {
  background: var(--ambre-fond);
  color: var(--aubergine);
  border-color: var(--ambre-fond);
  font-weight: 700;
}
.newsletter-bloc .btn-principal:hover {
  background: var(--ambre-fond-hover);
  color: var(--aubergine);
}
.btn-principal:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 3px; }

.btn-principal--compact { padding: .375rem .875rem; font-size: .875rem; }

.btn-secondaire {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--aubergine);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: .5rem 1rem;
  border: 2px solid var(--aubergine);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.btn-secondaire:hover {
  background: var(--aubergine);
  color: var(--blanc);
}

.btn-lien {
  display: inline-flex;
  color: var(--aubergine);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .9375rem;
}

.btn-lien:hover { color: var(--aubergine-hover); }

/* ── 8. Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2em .5em;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.badge-declination {
  background: var(--aubergine-light);
  color: var(--aubergine);
  border: 1px solid rgba(61,20,88,.15);
}

.badge-family {
  background: var(--creme-alt);
  color: var(--texte-muted);
  border: 1px solid var(--bordure);
}

.badge-chemotype {
  background: var(--creme-dark);
  color: var(--texte);
  border: 1px solid var(--bordure);
}

.badge-exact {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.badge-family-match {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
  font-size: .65rem;
}

.badge-bonus {
  background: var(--ambre-fond);
  color: #5c3200;
  border: 1px solid #d97706;
}

.badge-promo {
  display: inline;
  background: var(--ambre-fond);
  color: #5c3200;
  font-size: .7rem;
  font-weight: 700;
  padding: .15em .4em;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.badge-registry {
  background: var(--creme-dark);
  color: var(--texte-muted);
  border: 1px solid var(--bordure);
  font-family: var(--font-mono);
  font-size: .65rem;
}

.badge-relation {
  background: var(--aubergine-light);
  color: var(--aubergine);
  border: 1px solid rgba(61,20,88,.15);
  font-size: .625rem;
}

.badge-small { font-size: .625rem; }

/* ── 9. Chips (filtres) ─────────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-xs);
  margin-bottom: var(--r-md);
}

.chip {
  display: inline-flex;
  align-items: center;
  background: var(--blanc);
  color: var(--texte-muted);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  padding: .3em .75em;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  transition: border-color .12s, color .12s, background .12s;
}

.chip:hover {
  border-color: var(--aubergine);
  color: var(--aubergine);
  background: var(--aubergine-light);
}

.chip--actif {
  background: var(--aubergine);
  color: var(--blanc);
  border-color: var(--aubergine);
  font-weight: 700;
}

.chip--actif:hover { background: var(--aubergine-hover); }

.guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-xs);
  margin-top: var(--r-md);
}

/* ── 10. Hero registre ─────────────────────────────────────────────────── */
.hero-registre {
  background: var(--aubergine);
  color: var(--blanc);
  padding-block: var(--r-2xl);
}

.hero-registre__inner { text-align: center; }

.hero-registre__titre {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3rem);
  color: var(--blanc);
  margin-bottom: var(--r-md);
}

.hero-registre__sous-titre {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ambre-fond);
  max-width: none;
  margin-block: var(--r-sm) var(--r-md);
}

.hero-registre__accroche {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.8);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--r-xl);
}

.hero-registre__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .5rem;
  margin-bottom: var(--r-xl);
  max-width: none;   /* neutralise le p{max-width:72ch} global (sinon collé à gauche) */
  font-size: .875rem;
}

.hero-stat { color: rgba(255,255,255,.9); }
.hero-stat--muted { color: rgba(255,255,255,.6); }
.hero-stat__sep { color: rgba(255,255,255,.35); }

/* Formulaire de recherche hero */
.hero-recherche {
  display: flex;
  max-width: 540px;
  margin-inline: auto;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.hero-recherche__input {
  flex: 1;
  border: none;
  padding: .75rem 1rem;
  font-size: .9375rem;
  font-family: var(--font-corps);
  background: var(--blanc);
  color: var(--texte);
  outline: none;
  min-width: 0;
}

.hero-recherche__input::placeholder { color: var(--texte-tres-muted); }

.hero-recherche__btn {
  background: var(--ambre-fond);
  color: #3d1a00;
  border: none;
  padding: .75rem 1.25rem;
  font-size: .9375rem;
  font-weight: 700;
  font-family: var(--font-corps);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

.hero-recherche__btn:hover { background: var(--ambre-fond-hover); }

/* ── 11. Entrées taxonomiques ───────────────────────────────────────────── */
.entrees-taxonomiques {
  padding-block: var(--r-xl);
  background: var(--creme-alt);
  border-bottom: 1px solid var(--bordure);
}

.entrees-taxonomiques__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grille);
}

.entree-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}

.entree-card:hover {
  box-shadow: 0 4px 16px rgba(61,20,88,.12);
  transform: translateY(-2px);
}

.entree-card--lignees { border-top: 3px solid var(--aubergine); }
.entree-card--bonsplans { border-top: 3px solid var(--ambre-fond); }
.entree-card--guides { border-top: 3px solid var(--bordure); }

.entree-card__lien {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--r-xs);
  padding: var(--r-lg);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.entree-card__lien:focus-visible {
  outline: 2px solid var(--aubergine);
  outline-offset: -2px;
}

.entree-card__icone {
  font-size: 1.5rem;
  color: var(--aubergine);
  margin-bottom: var(--r-xs);
}

.entree-card--bonsplans .entree-card__icone { color: var(--ambre); }

.entree-card__titre {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--texte);
  display: block;
}

.entree-card__desc {
  font-size: .875rem;
  color: var(--texte-muted);
  line-height: 1.5;
}

/* ── 12. Grille herbier & carte herbier ─────────────────────────────────── */
.grille-herbier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grille);
  padding-block: var(--r-xl);
}

/* ── Les plus populaires (C1) — cartes cliquables (offre + fiche) ──────────── */
.section-populaires { padding-block: var(--r-xl) 0; }
.section-populaires__intro { color: var(--texte-muted); margin: -.5rem 0 var(--r-md); }
.grille-populaires {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grille);
}
.carte-populaire {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--r-md);
  padding: var(--r-md) var(--r-lg);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  transition: box-shadow .15s, border-color .15s;
}
.carte-populaire.is-clickable { cursor: pointer; }
.carte-populaire.is-clickable:hover {
  border-color: var(--ambre-fond);
  box-shadow: 0 2px 10px rgba(61, 20, 88, .10);
}
.carte-populaire__nom {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--aubergine);
  margin-bottom: .35rem;
}
.carte-populaire__badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.carte-populaire__prix { font-size: .9rem; }
.carte-populaire__montant { font-weight: 700; color: var(--texte); }
.carte-populaire__marchands { color: var(--texte-muted); }
.carte-populaire__actions { display: flex; align-items: center; gap: var(--r-md); }
.carte-populaire__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.1rem;
  background: var(--aubergine);
  color: var(--blanc);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: .875rem;
}
.carte-populaire__cta:hover,
.carte-populaire__cta:focus { background: var(--aubergine-hover); color: var(--blanc); }
.carte-populaire__fiche { color: var(--aubergine); font-size: .8125rem; font-weight: 600; }

/* ── Bandeau breeders — tuiles wordmark cliquables vers les hubs on-site ────── */
.section-breeders { padding-block: var(--r-xl) 0; }
.section-breeders__intro { color: var(--texte-muted); margin: -.5rem 0 var(--r-md); }
.grille-breeders {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grille);
}
.carte-breeder__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 88px;
  padding: var(--r-md);
  background: var(--aubergine-light);
  border: 1px solid var(--bordure-legere);
  border-radius: var(--r-md);
  text-decoration: none;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.carte-breeder__lien:hover {
  border-color: var(--ambre-fond);
  box-shadow: 0 2px 10px rgba(61, 20, 88, .10);
}
.carte-breeder__nom {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aubergine);
}
.carte-breeder__meta { font-size: .8rem; color: var(--texte-muted); }

.carte-herbier {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
  position: relative;
}

.carte-herbier::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--aubergine);
  opacity: .4;
  transition: opacity .15s;
}

.carte-herbier:hover { box-shadow: 0 6px 20px rgba(61,20,88,.14); transform: translateY(-2px); }
.carte-herbier:hover::before { opacity: 1; }

.carte-herbier__lien {
  display: flex;
  flex-direction: column;
  gap: var(--r-sm);
  padding: var(--r-md);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.carte-herbier__lien:focus-visible {
  outline: 2px solid var(--aubergine);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.carte-herbier__header { flex: 1; }

.carte-herbier__numero {
  display: block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--texte-tres-muted);
  letter-spacing: .06em;
  margin-bottom: .25rem;
}

.carte-herbier__nom {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--aubergine);
  line-height: 1.3;
  margin: 0;
}

.carte-herbier__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.carte-herbier__footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--r-xs);
  border-top: 1px solid var(--bordure-legere);
  padding-top: var(--r-sm);
  margin-top: auto;
}

.carte-herbier__prix {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--texte);
}

.carte-herbier__marchands {
  font-size: .75rem;
  color: var(--texte-muted);
}

/* ── 13. Fiche variété ─────────────────────────────────────────────────── */
.fiche-header {
  background: var(--aubergine);
  color: var(--blanc);
  padding-block: var(--r-xl);
  margin-bottom: 0;
}
/* Contenu du header aligné sur le conteneur centré, comme les sections dessous. */
.fiche-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
}
/* FAQ + lien lignée : non stylés → débordaient au bord gauche. On les met dans
   le même conteneur centré que les autres sections de la fiche. */
.fiche-faq,
.fiche-lignee-complete {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
}
/* FAQ : aérée et pleine largeur du bloc (le p{max-width:72ch} global la tassait). */
.fiche-faq { padding-block: var(--r-xl); }
.fiche-faq h3 {
  margin-top: var(--r-lg);
  margin-bottom: var(--r-xs);
  padding-top: var(--r-md);
  border-top: 1px solid var(--bordure-legere);
  color: var(--aubergine);
  font-size: 1.05rem;
}
.fiche-faq > h2 + h3 { border-top: none; padding-top: 0; }
.fiche-faq p { max-width: none; margin-bottom: var(--r-md); line-height: 1.7; }

.fiche-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--blanc);
  margin-bottom: var(--r-sm);
}

.fiche-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-xs);
  margin-bottom: var(--r-sm);
}

.fiche-breeder {
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  margin-top: var(--r-xs);
}

.fiche-breeder strong { color: rgba(255,255,255,.9); }

/* Carte identité génétique */
.fiche-genetique {
  background: var(--creme-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  padding: var(--r-lg);
  margin: var(--r-lg) var(--r-lg) 0;
  max-width: var(--container);
  margin-inline: auto;
}

.fiche-genetique h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texte-muted);
  font-family: var(--font-corps);
  font-weight: 700;
  margin-bottom: var(--r-md);
}

.fiche-genetique__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .375rem var(--r-lg);
  font-size: .875rem;
}

.fiche-genetique__dl dt {
  color: var(--texte-muted);
  font-weight: 600;
  white-space: nowrap;
}

.fiche-genetique__dl dd { color: var(--texte); }

/* Comparateur */
.fiche-comparateur {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--r-xl) var(--r-lg) 0;
}

.fiche-comparateur h2 {
  font-size: 1.25rem;
  margin-bottom: var(--r-sm);
  color: var(--aubergine);
}

.fiche-maj {
  font-size: .8125rem;
  color: var(--texte-muted);
  margin-bottom: var(--r-lg);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }

.comparateur-table {
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 560px;
}

.comparateur-table thead {
  background: var(--aubergine);
  color: var(--blanc);
}

.comparateur-table th {
  text-align: left;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .625rem var(--r-md);
  white-space: nowrap;
}

.comparateur-table th.num,
.comparateur-table td.num { text-align: right; }

.comparateur-table tbody tr { border-bottom: 1px solid var(--bordure-legere); }
.comparateur-table tbody tr:last-child { border-bottom: none; }
.comparateur-table tbody tr:hover { background: var(--aubergine-light); }

/* A3/C3 — meilleure ligne mise en avant + packs secondaires repliés par marchand. */
.comparateur-row--best { background: color-mix(in srgb, var(--ambre-fond) 18%, var(--creme)); }
.comparateur-row--best:hover { background: color-mix(in srgb, var(--ambre-fond) 26%, var(--creme)); }
.badge-meilleur-prix {
  background: var(--ambre-fond);
  color: #5c3200;
  border: 1px solid #d97706;
  font-size: .65rem;
  font-weight: 700;
}
.comparateur-row--pack td { background: var(--creme-alt); color: var(--texte-muted); }
.comparateur-cell--indent { padding-left: calc(var(--r-md) + 14px); }
.packs-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-left: .5rem;
  padding: 0 .6rem;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  color: var(--aubergine);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.packs-toggle:hover,
.packs-toggle:focus { background: var(--aubergine-light); }
.packs-toggle::after { content: " ▸"; }
.packs-toggle[aria-expanded="true"]::after { content: " ▾"; }

.comparateur-table td {
  padding: .625rem var(--r-md);
  font-size: .9rem;
  vertical-align: middle;
}

.comparateur-table td[data-label="Voir l'offre"] a {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  background: var(--aubergine);
  color: var(--blanc);
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: var(--r-xs);
  transition: background .15s;
  white-space: nowrap;
}

.comparateur-table td[data-label="Voir l'offre"] a:hover {
  background: var(--aubergine-hover);
  color: var(--blanc);
}

.mention-sponso {
  display: block;
  font-size: .6875rem;
  color: var(--texte-tres-muted);
  margin-top: .1rem;
}

.fiche-methodologie-link {
  font-size: .8125rem;
  color: var(--texte-muted);
  margin-top: var(--r-md);
}

/* Même lignée */
.fiche-lignee {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--r-xl) var(--r-lg) 0;
}

.fiche-lignee h2 { font-size: 1.125rem; color: var(--aubergine); margin-bottom: var(--r-md); }

.fiche-lignee__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-sm);
}

.fiche-lignee__liste li a {
  display: inline-flex;
  align-items: center;
  gap: var(--r-xs);
  background: var(--aubergine-light);
  color: var(--aubergine);
  text-decoration: none;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .875rem;
  border: 1px solid rgba(61,20,88,.15);
  transition: background .12s;
}

.fiche-lignee__liste li a:hover { background: var(--aubergine); color: var(--blanc); }

/* Relations génétiques */
.fiche-relations {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--r-xl) var(--r-lg) 0;
}

.fiche-relations h2 { font-size: 1.125rem; color: var(--aubergine); margin-bottom: var(--r-lg); }

.fiche-relations__group { margin-bottom: var(--r-lg); }

.fiche-relations__group h3 {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-muted);
  margin-bottom: var(--r-sm);
}

.fiche-relations__group ul { display: flex; flex-wrap: wrap; gap: var(--r-sm); }

.fiche-relations__group li { display: inline-flex; align-items: center; gap: var(--r-xs); }

.fiche-relations__group a {
  color: var(--aubergine);
  font-weight: 600;
  font-size: .9375rem;
}

/* Signalement sur fiche */
.fiche-signalement {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--r-xl) var(--r-lg);
  border-top: 1px solid var(--bordure-legere);
  margin-top: var(--r-xl);
}

/* ── 14. Listing variétés ──────────────────────────────────────────────── */
.listing-header {
  padding-block: var(--r-xl) var(--r-lg);
  border-bottom: 1px solid var(--bordure);
}

.listing-header h1 {
  font-size: clamp(1.25rem, 3.5vw, 1.875rem);
  color: var(--aubergine);
}

.listing-header__accentue { color: var(--ambre); }

.listing-intro {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  margin-top: var(--r-md);
  font-size: .9375rem;
  color: var(--texte-muted);
}

.listing-filtres {
  padding-block: var(--r-lg);
  padding-inline: var(--r-lg);
  background: var(--creme-alt);
  border-bottom: 1px solid var(--bordure);
}

.listing-filtres > * {
  max-width: var(--container);
  margin-inline: auto;
}

.listing-filtres__groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--r-md);
  row-gap: var(--r-sm);
}

.listing-filtres__label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--texte-muted);
}

.listing-filtres__label input,
.listing-filtres__label select {
  font-family: var(--font-corps);
  font-size: .875rem;
  padding: .4rem .65rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-xs);
  background: var(--blanc);
  color: var(--texte);
}

.listing-filtres__label input:focus,
.listing-filtres__label select:focus {
  border-color: var(--aubergine);
  outline: none;
  box-shadow: 0 0 0 2px rgba(61,20,88,.15);
}

.listing-filtres__recherche { flex: 1; min-width: 180px; }

.listing-filtres__input {
  font-family: var(--font-corps);
  font-size: .875rem;
  padding: .4rem .65rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-xs);
  background: var(--blanc);
  color: var(--texte);
  width: 100%;
}

.listing-filtres__input:focus {
  border-color: var(--aubergine);
  outline: none;
  box-shadow: 0 0 0 2px rgba(61,20,88,.15);
}

.listing-filtres__btn-search {
  padding: .4rem .875rem;
  background: var(--aubergine);
  color: var(--blanc);
  border: none;
  border-radius: var(--r-xs);
  font-family: var(--font-corps);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.listing-filtres__btn-search:hover { background: var(--aubergine-hover); }

.listing-count {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-block: var(--r-md) 0;
  font-size: .875rem;
  color: var(--texte-muted);
}

.listing-vide {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-block: var(--r-2xl);
  text-align: center;
  color: var(--texte-muted);
}

/* Pagination */
.pagination {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-block: var(--r-lg) var(--r-xl);
}

.pagination__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-xs);
  margin-bottom: var(--r-sm);
}

.pagination__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: .5rem;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid var(--bordure);
  border-radius: var(--r-xs);
  text-decoration: none;
  color: var(--aubergine);
  background: var(--blanc);
  transition: background .12s, border-color .12s;
}

.pagination__lien:hover,
.pagination__lien[aria-current="page"] {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--blanc);
}

.pagination__info {
  font-size: .8125rem;
  color: var(--texte-muted);
}

/* ── 15. Bons plans ─────────────────────────────────────────────────────── */
.bonsplans-header {
  width: 100%;
  padding-block: var(--r-xl) var(--r-lg);
  padding-inline: var(--r-lg);
  border-bottom: 1px solid var(--bordure);
}

.bonsplans-header > * {
  max-width: var(--container);
  margin-inline: auto;
}

.bonsplans-header--ambre {
  background: var(--ambre-fond);
}

.bonsplans-header--ambre h1 { color: #3d1a00; }

.bonsplans-header__accroche {
  color: rgba(61,26,0,.7);
  margin-top: var(--r-sm);
  max-width: 72ch;
}

.bonsplans-liste {
  display: flex;
  flex-direction: column;
  gap: var(--r-md);
  padding-block: var(--r-xl);
}

.bonsplan-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  border-left: 4px solid var(--ambre-fond);
  overflow: hidden;
}

.bonsplan-card__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--r-md);
  padding: var(--r-md) var(--r-lg);
  border-bottom: 1px solid var(--bordure-legere);
}

.bonsplan-card__numero {
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--texte-tres-muted);
  white-space: nowrap;
  margin-top: .2rem;
}

.bonsplan-card__nom {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--aubergine);
  margin: 0;
}

.bonsplan-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .25rem;
}

.bonsplan-card__chiffres {
  display: flex;
  align-items: center;
  gap: var(--r-lg);
  padding: var(--r-md) var(--r-lg);
}

.bonsplan-card__prix {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--texte);
  line-height: 1;
}

.bonsplan-card__economie {
  background: var(--ambre-fond);
  color: #5c3200;
  font-size: .8125rem;
  font-weight: 700;
  padding: .2em .6em;
  border-radius: var(--r-xs);
}

.bonsplan-card__marchands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-sm);
  padding: var(--r-sm) var(--r-lg);
  background: var(--creme-alt);
  border-top: 1px solid var(--bordure-legere);
}

.bonsplan-card__actions {
  padding: var(--r-sm) var(--r-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-sm);
  align-items: center;
}

.bonsplans-note {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-bottom: var(--r-md);
  font-size: .8125rem;
  color: var(--texte-muted);
}

.bonsplans-vide {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding: var(--r-2xl) var(--r-lg);
  text-align: center;
  color: var(--texte-muted);
  line-height: 1.7;
}

/* ── 16. Guides ─────────────────────────────────────────────────────────── */
.guides-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grille);
  padding-block: var(--r-xl);
}

.guide-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}

.guide-card:hover { box-shadow: 0 4px 16px rgba(61,20,88,.12); transform: translateY(-2px); }

.guide-card__lien {
  display: flex;
  flex-direction: column;
  gap: var(--r-sm);
  padding: var(--r-lg);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.guide-card__lien:focus-visible {
  outline: 2px solid var(--aubergine);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.guide-card__titre {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--aubergine);
}

.guide-card__desc {
  font-size: .875rem;
  color: var(--texte-muted);
  line-height: 1.5;
}

/* Article guide */
.guide-article {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-block: var(--r-xl);
}

.guide-header { margin-bottom: var(--r-xl); }

.guide-header__fil {
  font-size: .8125rem;
  color: var(--texte-muted);
  margin-bottom: var(--r-md);
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}

.guide-header__fil a { color: var(--aubergine); font-weight: 600; text-decoration: none; }
.guide-header__fil a:hover { text-decoration: underline; }

.guide-header h1 {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  color: var(--aubergine);
  margin-bottom: var(--r-md);
}

.guide-header__chapeau {
  font-size: 1.0625rem;
  color: var(--texte-muted);
  line-height: 1.65;
}

.guide-section { margin-bottom: var(--r-xl); }

.guide-section h2 {
  font-size: 1.25rem;
  color: var(--aubergine);
  margin-bottom: var(--r-md);
  padding-bottom: var(--r-xs);
  border-bottom: 2px solid var(--aubergine-light);
}

.guide-section p + p { margin-top: var(--r-md); }
.guide-section p + a,
.guide-section a.btn-secondaire { margin-top: var(--r-md); display: inline-flex; }

.guide-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem var(--r-lg);
  margin-top: var(--r-md);
  background: var(--creme-alt);
  padding: var(--r-md);
  border-radius: var(--r-sm);
  border: 1px solid var(--bordure);
}

.guide-dl dt {
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: var(--r-xs);
}

.guide-dl dd { color: var(--texte-muted); }

.guide-footer {
  margin-top: var(--r-2xl);
  padding-top: var(--r-xl);
  border-top: 1px solid var(--bordure);
}

.guide-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-md);
  margin-top: var(--r-lg);
}

/* ── 17. Module pouces ─────────────────────────────────────────────────── */
.module-pouces {
  background: var(--creme-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  padding: var(--r-lg);
  margin-bottom: var(--r-lg);
}

.module-pouces__question {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--texte);
  margin-bottom: var(--r-md);
}

.module-pouces__boutons {
  display: flex;
  gap: var(--r-sm);
}

.pouces-form { display: contents; }

.pouce {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  padding: .45rem .9rem;
  font-size: .9375rem;
  font-family: var(--font-corps);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.pouce:hover { border-color: var(--aubergine); background: var(--aubergine-light); }
.pouce:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }
.pouce[disabled] { opacity: .5; cursor: default; }

.pouce__count { font-size: .875rem; font-weight: 700; color: var(--texte-muted); }

/* ── 18. Modal signalement ─────────────────────────────────────────────── */
.drapeau-signalement {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texte-tres-muted);
  font-size: .8125rem;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .3rem .6rem;
  border-radius: var(--r-xs);
  transition: color .12s, background .12s;
}

.drapeau-signalement:hover { color: var(--rouge-signalement); background: #fff1f1; }

.modal-signalement {
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  padding: 0;
  max-width: 480px;
  width: calc(100vw - 2rem);
  box-shadow: 0 16px 48px rgba(0,0,0,.2);
  background: var(--blanc);
}

.modal-signalement::backdrop {
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
}

.modal-signalement__inner { padding: var(--r-xl); }

.modal-signalement__titre {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--aubergine);
  margin-bottom: var(--r-md);
}

.modal-signalement__note {
  font-size: .8125rem;
  color: var(--texte-muted);
  margin-bottom: var(--r-lg);
}

.signalement-form__motifs {
  display: flex;
  flex-direction: column;
  gap: var(--r-xs);
  margin-bottom: var(--r-lg);
}

.signalement-form__option {
  display: flex;
  align-items: center;
  gap: var(--r-sm);
  font-size: .9375rem;
  cursor: pointer;
  padding: .35rem 0;
}

.signalement-form__option input[type="radio"] { accent-color: var(--aubergine); }

.signalement-form__email { margin-bottom: var(--r-lg); }

.signalement-form__email-label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--texte-muted);
}

.signalement-form__email-label input {
  font-family: var(--font-corps);
  font-size: .9rem;
  padding: .4rem .65rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-xs);
  background: var(--blanc);
  color: var(--texte);
}

.signalement-form__email-label input:focus {
  border-color: var(--aubergine);
  outline: none;
  box-shadow: 0 0 0 2px rgba(61,20,88,.15);
}

.signalement-form__actions {
  display: flex;
  gap: var(--r-sm);
  align-items: center;
  flex-wrap: wrap;
}

.signalement-form__retour {
  background: none;
  border: none;
  color: var(--texte-muted);
  font-size: .875rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ── 19. Newsletter ─────────────────────────────────────────────────────── */
.section-newsletter {
  width: 100%;
  background: var(--aubergine);
  padding-block: var(--r-2xl);
  padding-inline: var(--r-lg);
  margin-top: var(--r-2xl);
}

.newsletter-bloc { text-align: center; }

.newsletter-bloc__titre {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--blanc);
  margin-bottom: var(--r-sm);
}

.newsletter-bloc__desc {
  color: rgba(255,255,255,.75);
  margin-bottom: var(--r-lg);
  margin-inline: auto;
}

.section-recentes { padding-block: var(--r-xl); }
.section-recentes__voir-tout { text-align: center; max-width: none; padding-bottom: var(--r-xl); }

/* ── 20. Section retour (pages socle) ──────────────────────────────────── */
.section-retour {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-top: var(--r-xl);
}

/* ── 21. Pages prose (méthodologie, mentions, bot, subscribe, 404…) ────── */
.page-prose {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-block: var(--r-xl);
}

.page-prose h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  color: var(--aubergine);
  margin-bottom: var(--r-xl);
}

.page-prose h2 {
  font-size: 1.125rem;
  color: var(--aubergine);
  margin-top: var(--r-xl);
  margin-bottom: var(--r-sm);
  padding-bottom: var(--r-xs);
  border-bottom: 2px solid var(--aubergine-light);
}

.page-prose section { margin-bottom: var(--r-lg); }

.page-prose p { max-width: 66ch; line-height: 1.7; }
.page-prose p + p { margin-top: var(--r-md); }

.page-prose ul {
  list-style: disc;
  padding-left: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--r-sm);
  margin-top: var(--r-md);
}

.page-prose li { line-height: 1.65; }

.page-prose pre {
  background: var(--creme-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  padding: var(--r-md);
  margin-block: var(--r-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.55;
}

.page-prose code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--creme-alt);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  padding: .1em .35em;
}

.page-prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Formulaires simples dans pages prose */
.page-prose form { margin-top: var(--r-lg); }

.page-prose label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--texte-muted);
  margin-bottom: .375rem;
}

.page-prose input[type="email"],
.page-prose input[type="text"] {
  display: block;
  width: 100%;
  max-width: 360px;
  font-family: var(--font-corps);
  font-size: .9375rem;
  padding: .5rem .75rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  margin-bottom: var(--r-md);
}

.page-prose input[type="email"]:focus,
.page-prose input[type="text"]:focus {
  border-color: var(--aubergine);
  outline: none;
  box-shadow: 0 0 0 2px rgba(61,20,88,.15);
}

.page-prose button[type="submit"] {
  display: inline-flex;
  background: var(--aubergine);
  color: var(--blanc);
  font-family: var(--font-corps);
  font-size: .9375rem;
  font-weight: 600;
  padding: .625rem 1.25rem;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s;
}

.page-prose button[type="submit"]:hover { background: var(--aubergine-hover); }

/* ── 22. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .entrees-taxonomiques__liste { grid-template-columns: repeat(2, 1fr); }
  .grille-herbier { grid-template-columns: repeat(2, 1fr); }
  .grille-populaires { grid-template-columns: repeat(2, 1fr); }
  .grille-breeders { grid-template-columns: repeat(3, 1fr); }
  .guides-liste { grid-template-columns: repeat(2, 1fr); }
  .fiche-genetique__dl { grid-template-columns: 1fr; }
  .footer-grille { grid-template-columns: 1fr 1fr; gap: var(--r-lg); }
  .footer-col--marque { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --r-lg: 16px; --r-xl: 28px; --r-2xl: 44px; --gap-grille: 12px; }

  .entrees-taxonomiques__liste { grid-template-columns: 1fr; }
  .grille-herbier { grid-template-columns: 1fr; }
  .grille-populaires { grid-template-columns: 1fr; }
  .grille-breeders { grid-template-columns: repeat(2, 1fr); }
  .guides-liste { grid-template-columns: 1fr; }
  .footer-grille { grid-template-columns: 1fr; gap: var(--r-lg); }
  .footer-bas { flex-direction: column; }

  .hero-recherche { flex-direction: column; border-radius: var(--r-sm); box-shadow: none; }
  .hero-recherche__input { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .hero-recherche__btn { border-radius: 0 0 var(--r-sm) var(--r-sm); text-align: center; }

  /* Tableau → cartes empilées mobile */
  .comparateur-table thead { display: none; }
  .comparateur-table,
  .comparateur-table tbody,
  .comparateur-table tr,
  .comparateur-table td { display: block; min-width: unset; }
  .comparateur-table tr {
    border: 1px solid var(--bordure);
    border-radius: var(--r-sm);
    margin-bottom: var(--r-sm);
    background: var(--blanc);
    padding: var(--r-sm);
  }
  .comparateur-table td { padding: .3rem var(--r-sm); font-size: .875rem; }
  .comparateur-table td::before {
    content: attr(data-label) " : ";
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-muted);
    display: block;
  }
  .comparateur-table td.num { text-align: left; }
  .comparateur-table td[data-label="Voir l'offre"] a { width: 100%; justify-content: center; margin-top: .25rem; }

  body > header nav a { font-size: 1.125rem; }

  .guide-article { padding-inline: var(--r-md); }
  .bonsplan-card__chiffres { gap: var(--r-sm); flex-wrap: wrap; }
  .bonsplan-card__identity { flex-direction: column; gap: var(--r-xs); }

  .listing-filtres__groupe { flex-direction: column; align-items: stretch; }
  .listing-filtres__label input,
  .listing-filtres__label select { width: 100%; }
}

/* ── Ergonomie affiliation (lot 1) — sommaire + sticky CTA ──────────────────
   Ajout minimal, fiche variété. Charte weedily, aucune couleur criarde,
   aucune dépendance JS. */

/* Offset d'ancre : le jump-link ne colle pas le haut de la fenêtre. */
/* Offset d'ancre : compense le header sticky (aligné sur --header-h ~5.5rem). */
.wd-h,
#en-bref, #identite-genetique, #offres, #soeurs-lignee, #genetique-parente, #faq {
  scroll-margin-top: 6rem;
}

/* Sommaire (jump links) sous le bandeau identité. */
.wd-sommaire {
  max-width: var(--container);
  margin: 0.75rem auto 1.5rem;
  padding-inline: var(--r-lg);
}
.wd-sommaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.wd-sommaire a {
  display: inline-block;
  color: var(--aubergine);
  text-decoration: none;
  border-bottom: 1px solid var(--bordure);
  padding: 0.2rem 0;
}
.wd-sommaire a:hover,
.wd-sommaire a:focus {
  color: var(--aubergine-hover);
  border-bottom-color: var(--aubergine);
}

/* ── Sommaire flottant (TOC minimap) — rail fixe flanc droit, desktop >= 1024 ── */
.wd-toc { display: none; }
@media (min-width: 1024px) {
  .wd-toc {
    display: block;
    position: fixed;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40; /* > sticky-cta (15), < exit-popup (60) / header (100) */
  }
  /* Sur desktop, le rail remplace le sommaire horizontal (redondant). */
  .wd-sommaire { display: none; }
}
.wd-toc__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem; /* assez pour que les libellés (panneau au survol) ne se chevauchent pas */
  align-items: flex-end;
  max-height: 70vh;
  overflow: auto;
}
.wd-toc__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  position: relative;
  text-decoration: none;
  padding: 0.15rem 0;
}
.wd-toc__trait {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--bordure);
  border-radius: 2px;
  transition: background-color .15s ease, width .15s ease;
}
.wd-toc__item--h3 .wd-toc__trait { width: 14px; margin-right: 8px; }
/* Label en overlay (jamais dans le flux → aucun CLS). */
.wd-toc__label {
  position: absolute;
  right: 100%;
  margin-right: 0.75rem;
  white-space: nowrap;
  background: var(--creme-alt);
  color: var(--aubergine);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.8125rem;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.wd-toc:hover .wd-toc__label,
.wd-toc:focus-within .wd-toc__label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.wd-toc__link.is-current .wd-toc__trait { background: var(--aubergine); width: 30px; }
.wd-toc__link.is-current .wd-toc__label { font-weight: 600; }
.wd-toc__link:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }

/* Respect de prefers-reduced-motion (le scroll-behavior:smooth global manquait ce garde). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wd-toc__trait, .wd-toc__label { transition: none; }
}

/* Sticky CTA sobre : barre basse fine (< 50 px), non couvrante, cible >= 48 px.
   Ancre interne vers le comparateur, jamais une bannière marchand. */
.wd-sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding: 0.4rem 1rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--bordure);
}
.wd-sticky-cta__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  background: var(--aubergine);
  color: var(--blanc);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.wd-sticky-cta__lien:hover,
.wd-sticky-cta__lien:focus { background: var(--aubergine-hover); color: var(--blanc); }
/* Sticky à deux boutons (fiche) — secondaire « Comparer les prix » en contour. */
.wd-sticky-cta--duo { gap: var(--r-sm); }
.wd-sticky-cta__lien--secondaire {
  background: transparent;
  color: var(--aubergine);
  border: 2px solid var(--aubergine);
}
.wd-sticky-cta__lien--secondaire:hover,
.wd-sticky-cta__lien--secondaire:focus { background: var(--aubergine-light); color: var(--aubergine); }

/* ── Bloc meilleure offre (C2) — carte proéminente en tête de fiche ──────────
   Page verdict citable : pleinement cliquable (offer-click.js, amélioration
   progressive). Accent ambré, CTA aubergine, cible tactile >= 48 px. */
.wd-best-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-md);
  max-width: var(--container);
  margin: var(--r-lg) var(--r-lg) 0;
  margin-inline: auto;
  padding: var(--r-md) var(--r-lg);
  background: var(--aubergine-light);
  border: 1px solid var(--ambre-fond);
  border-left: 4px solid var(--ambre-fond);
  border-radius: var(--r-md);
}
.wd-best-offer.is-clickable { cursor: pointer; }
.wd-best-offer__info { display: flex; flex-direction: column; gap: 2px; }
.wd-best-offer__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--ambre);
}
.wd-best-offer__price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--aubergine);
}
.wd-best-offer__merchant { color: var(--texte-muted); font-size: .875rem; }
.wd-best-offer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.5rem;
  background: var(--aubergine);
  color: var(--blanc);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-weight: 600;
  white-space: nowrap;
}
.wd-best-offer__cta:hover,
.wd-best-offer__cta:focus { background: var(--aubergine-hover); color: var(--blanc); }
.wd-best-offer .mention-sponso { flex-basis: 100%; margin: 0; }

/* ── Exit-popup email (lot exit-popup) — fiche variété ──────────────────────
   Caché par défaut (attribut hidden), ouvert uniquement par exit-popup.js en
   exit-intent desktop. Charte weedily, aucune couleur criarde, cibles tactiles
   >= 48 px sur fermeture et CTA. Ne masque JAMAIS le contenu au chargement. */
.wd-exit-popup[hidden] { display: none; }
.wd-exit-popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.wd-exit-popup__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--texte) 55%, transparent);
}
.wd-exit-popup__modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--texte) 30%, transparent);
}
.wd-exit-popup__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--texte-muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.wd-exit-popup__close:hover,
.wd-exit-popup__close:focus { color: var(--texte); }
.wd-exit-popup__titre {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  color: var(--aubergine);
}
.wd-exit-popup__desc {
  margin: 0 0 1rem;
  color: var(--texte);
}
.wd-exit-popup__hp { display: none; }
.wd-exit-popup__label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  color: var(--texte-muted);
}
.wd-exit-popup__email {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
}
.wd-exit-popup__email:focus {
  outline: 2px solid var(--aubergine);
  outline-offset: 1px;
}
.wd-exit-popup__cta {
  width: 100%;
  min-height: 48px;
  margin-top: 0.75rem;
  padding: 0 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--blanc);
  background: var(--aubergine);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.wd-exit-popup__cta:hover,
.wd-exit-popup__cta:focus { background: var(--aubergine-hover); color: var(--blanc); }

/* ── Nav secondaire ────────────────────────────────────────────────────────── */
.nav-sec {
  background: var(--creme-alt);
  border-bottom: 1px solid var(--bordure-legere);
}

.nav-sec__liste {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0;
}

.nav-sec__lien {
  display: block;
  padding: var(--r-sm) var(--r-md);
  color: var(--texte-muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-bottom-color .15s;
}

.nav-sec__lien:hover {
  color: var(--aubergine);
  border-bottom-color: var(--ambre-fond);
}

.nav-sec__lien--actif {
  color: var(--aubergine);
  font-weight: 600;
  border-bottom-color: var(--aubergine);
}

/* ── Preuve sociale newsletter (home) ──────────────────────────────────────── */
.newsletter-bloc__stats {
  font-size: .8125rem;
  color: var(--texte-muted);
  margin-bottom: var(--r-sm);
  max-width: none;   /* neutralise le p{max-width:72ch} global (sinon collé à gauche) */
}

/* ── Lien méthodologie pied de listing ─────────────────────────────────────── */
.listing-footer-note {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--r-lg);
  padding-block: var(--r-xl) 0;
  font-size: .8125rem;
  color: var(--texte-muted);
}