/* ==========================================================================
   GBR — feuille de style du thème
   Les valeurs viennent de la landing archivée (exports/landing-actuelle/),
   documentées dans docs/03-charte-graphique.md.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
  --gbr--radius: 24px;
  --gbr--radius-btn: 13px;
  --gbr--shadow-sm: 0 8px 24px -12px rgba(31, 107, 42, .35);
  --gbr--shadow: 0 26px 60px -30px rgba(20, 60, 20, .55);

  /* univers neutre : le chapeau GBR, tel que la landing */
  --gbr--brand--accent: #2f8f3a;
  --gbr--brand--deep: #14501f;
  --gbr--brand--halo: #7fbf3f;
  --gbr--brand--bg-1: #ffffff;
  --gbr--brand--bg-2: #f4faee;
  --gbr--brand--text: #17311a;
  --gbr--brand--muted: #5a6b58;
  --gbr--brand--line: #dce6cf;
  --gbr--brand--surface: #ffffff;
}

/* Green Farmers — ambiance CLAIRE, fond creme (Ben, 2026-09-04).
   Nature, culture, artisanal. Le creme reprend l'or du logo GF et laisse le
   vert clair a Magic Farmers, pour que les deux univers cessent de se
   ressembler. Le gris de texte secondaire est rechauffe : un gris froid sur
   du creme tire au sale. */
html.gbr-univers-green-farmers {
  --gbr--brand--accent: #2f8f3a;
  --gbr--brand--deep: #14501f;
  --gbr--brand--halo: #c19a45;
  --gbr--brand--bg-1: #fef8ee;
  --gbr--brand--bg-2: #fbeed8;
  --gbr--brand--text: #17311a;
  --gbr--brand--muted: #6b6151;
  --gbr--brand--line: #ecdcbd;
  --gbr--brand--surface: #ffffff;
  --gbr--brand--ornement: #c19a45;
}

/* Magic Farmers — ambiance CLAIRE depuis le 2026-09-04 (Ben).
   L'univers etait sombre, choix d'aout : le vert lime du logo n'avait de force
   que sur fond profond. Le passage au vert clair inverse tout le rapport, donc
   l'accent lime #98d94e devient inutilisable, 1,48:1 sur ce fond. Il est
   remplace par un lime fonce qui garde l'identite MF tout en se distinguant du
   vert plus franc de Green Farmers. */
html.gbr-univers-magic-farmers {
  --gbr--brand--accent: #4a8a1c;
  --gbr--brand--deep: #14501f;
  --gbr--brand--halo: #78a830;
  --gbr--brand--bg-1: #f5fbef;
  --gbr--brand--bg-2: #ecf6e4;
  --gbr--brand--text: #17311a;
  --gbr--brand--muted: #5a6b58;
  --gbr--brand--line: #d3e5c2;
  --gbr--brand--surface: #ffffff;
  --gbr--brand--ornement: #78a830;
}

/* ------------------------------------------------------------- 2. structure */

/* Fond uni (Ben, 2026-09-07). Il etait fait d'un degrade vertical et de deux
   halos radiaux, herites de la landing. Consequence : une meme valeur ne pouvait
   pas paraitre identique d'une page a l'autre, ni meme d'un haut de page a son
   bas, et une pipette y lisait chaque fois autre chose. Les packshots sont des
   objets detoures poses sur un fond : un halo derriere eux ajoute du bruit sans
   rien raconter. */
html {
  min-height: 100%;
  background: var(--gbr--brand--bg-2);
}

body {
  background: transparent;
  color: var(--gbr--brand--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--gbr--brand--halo); color: #0a220b; }

/* Les titres et liens suivent l'univers actif */
h1, h2, h3, h4 { color: var(--gbr--brand--deep); }
a { color: var(--gbr--brand--accent); }

/* --------------------------------------------------------- 3. en-tête / pied */

/* En-tete et pied de page alignes sur la largeur du contenu (1120 px, celle
   des pages catalogue et produit). L'attribut contentSize d'un groupe de
   template part ne prend pas le dessus sur theme.json : on le pose en CSS. */
.gbr-header > .wp-block-group,
.gbr-footer > * {
  max-width: 1120px;
  margin-inline: auto;
}
.gbr-header > .wp-block-group { width: 100%; }

/* Padding vertical volontairement faible : le groupe interne de l'en-tete
   porte deja le sien (regle dans l'editeur), et les deux s'additionnaient —
   66 px au-dessus du logo, qui repoussaient le hero hors de l'ecran. */
.gbr-header {
  padding: clamp(6px, 1.2vh, 16px) var(--wp--preset--spacing--30);
}

/* Aucune largeur en dur ici : elle est portee par le bloc « Logo du site »,
   donc reglable dans l'editeur. Une regle CSS figee empechait toute
   modification depuis l'interface. */
.gbr-header__logo img { height: auto; }

/* Bascule entre univers : toujours visible, c'est la promesse du site */
.gbr-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--gbr--brand--line);
  background: var(--gbr--brand--surface);
  box-shadow: var(--gbr--shadow-sm);
  font-size: .84rem;
  font-weight: 600;
  color: var(--gbr--brand--muted);
  text-decoration: none;
}
.gbr-switch:hover { color: var(--gbr--brand--accent); }
.gbr-switch__fleche { color: var(--gbr--brand--halo); font-weight: 800; }

/* --- Pied de page ----------------------------------------------------------
   Fond creme et non vert fonce : l'appel revendeur juste au-dessus est une
   bande verte. Un pied sombre s'y collerait et la page finirait sur deux blocs
   qui se confondent. En creme, il fait respiration finale, le vert de l'appel
   ressort davantage, et on n'introduit pas une couleur de plus. */
/* WordPress insere un ecart automatique entre les enfants de `wp-site-blocks` :
   24 px de fond de page vert clair s'intercalaient entre la bande verte de
   l'appel revendeur et le pied creme. On le supprime a la source, la marge du
   pied lui-meme n'y pouvait rien. */
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0 !important; }

.gbr-footer {
  margin: 0 !important;
  /* Respiration au-dessus du pied : il suit une bande verte pleine largeur et
     paraissait colle contre elle. Obtenue par le PADDING et non par une marge :
     le pied a son propre fond creme, donc l'air reste creme. Une marge
     laisserait reapparaitre le fond de page vert clair entre les deux, ce que
     Ben avait justement fait retirer. */
  padding: 76px var(--wp--preset--spacing--30) 34px;
  background: #faf8f1;
  color: var(--gbr--brand--muted);
  font-size: .86rem;
  line-height: 1.7;
}

.gbr-footer__grille { margin: 0 auto !important; max-width: 1120px; gap: var(--wp--preset--spacing--30); }

.gbr-footer__logo img { width: 130px; height: auto; }
.gbr-footer__baseline {
  margin: 16px 0 0;
  max-width: 320px;
  font-size: .86rem;
  line-height: 1.6;
}
.gbr-footer__baseline strong { color: var(--gbr--brand--deep); font-weight: 600; }

/* Titre de colonne : meme grammaire que les etiquettes du reste du site,
   en plus discret puisqu'il ne s'agit que de navigation. */
.gbr-footer__titre {
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gbr--brand--deep);
}

.gbr-footer__liens { margin: 0; padding: 0; list-style: none; }
.gbr-footer__liens li { margin: 0 0 9px; }
.gbr-footer__liens a {
  color: var(--gbr--brand--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.gbr-footer__liens a:hover {
  color: var(--gbr--brand--accent);
  border-bottom-color: var(--gbr--brand--accent);
}

/* Le legal est passe en 4e colonne plutot que d'alourdir la barre du bas :
   celle-ci ne porte plus que le copyright et la mention reglementaire, et la
   colonne accueillera A propos et Molecules quand ces pages existeront. */
.gbr-footer__bas {
  max-width: 1120px;
  margin: 40px auto 0 !important;
  padding-top: 22px;
  border-top: 1px solid var(--gbr--brand--line);
  text-align: center;
  font-size: .76rem;
  color: #8aa17c;
}
.gbr-footer__bas strong { color: var(--gbr--brand--deep); font-weight: 600; }
.gbr-footer .gbr-etoile { color: #c19a45; margin: 0 8px; }

@media (max-width: 781px) {
  .gbr-footer { padding: 54px var(--wp--preset--spacing--30) 26px; }
  /* Les trois colonnes de liens restent cote a cote : empilees, le pied de page
     atteignait 702 px sur un ecran de 812, soit presque un ecran entier de
     navigation secondaire. */
  .gbr-footer .gbr-footer__grille { flex-wrap: wrap !important; gap: 26px 12px !important; }
  .gbr-footer .gbr-footer__marque {
    flex-basis: 100% !important;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .gbr-footer .gbr-footer__grille > .wp-block-column:not(.gbr-footer__marque) {
    flex-basis: calc(33.333% - 8px) !important;
  }
  .gbr-footer__baseline { margin-inline: auto; }
  .gbr-footer__titre { margin-bottom: 10px; font-size: .6rem; letter-spacing: .08em; }
  .gbr-footer__liens { font-size: .8rem; }
  .gbr-footer__liens li { margin-bottom: 7px; }
  .gbr-footer__bas { margin-top: 30px !important; text-align: center; }
}

/* ----------------------------------------------------------- 4. mode catalogue */

/* Rien à acheter : on neutralise ce que WooCommerce afficherait quand même.
   WooCommerce injecte un bloc « compte client » et un mini-panier dans la
   navigation des thèmes blocs. Sans vente en ligne, ces deux icônes envoient
   vers des pages en brouillon — on les retire. */
.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart { display: none !important; }

.woocommerce .cart, .woocommerce .quantity,
.wc-block-components-product-button,
.woocommerce-message a.button { display: none !important; }

.gbr-dispo {
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gbr--brand--muted);
}

/* ------------------------------------------------------------- 5. produits */

/* WooCommerce rend le catalogue avec le bloc « collection de produits »
   (.wc-block-product), et non l'ancienne boucle (.products li.product) :
   viser uniquement l'ancien sélecteur laissait les vignettes sans style. */
/* Vignettes sans habillage : ni fond, ni bordure, ni ombre, ni cadre. Les
   produits sont detoures sur fond blanc et se poseront demain sur des visuels
   de pochons transparents ; une carte dessinee autour ferait double cadre.

   Le survol souleve (translateY) a ete retire avec le reste : il n'avait de
   sens que tant qu'il y avait une surface a soulever. La vignette entiere
   reste cliquable, c'est elle qui porte l'affordance. */

.wc-block-product img {
  width: 100%;
  height: auto;
  border-radius: var(--gbr--radius-btn);
  display: block;
  /* Aucune marge sous l'image : elle s'ajoutait a celle de son conteneur, et
     les packshots portent deja ~5 % de transparence sous le pochon. Les trois
     espaces cumules eloignaient la pastille du produit qu'elle qualifie. */
  margin-bottom: 0;
}
.wc-block-product .wc-block-components-product-image { margin-bottom: 4px; }
/* Remontee reservee aux vignettes a packshot : ces fichiers portent 3 a 7 % de
   transparence sous le pochon, qu'aucune marge CSS ne peut mesurer. Les
   anciennes photos CBD sont opaques jusqu'au bord et n'en veulent pas.
   8 px est la remontee maximale qui ne fait mordre la pastille sur aucun des
   21 visuels, le cas le plus serre etant Magic Mix (2,5 px restants). */
.gbr-a-packshot .gbr-molecule__lien,
.gbr-a-packshot > .gbr-molecule { margin-top: -8px; }
/* Hierarchie de lecture de la carte. Tout etait au meme niveau : nom a 16 px,
   prix a 13 px en graisse normale, pastille a 11 px, et l'oeil ne savait pas
   par ou entrer. Un seul element primaire (le nom), le reste en retrait.

   La carte passe en colonne flex pour que le bouton soit pousse en bas : des
   qu'un nom tient sur deux lignes (« CALIFORNIA HAZE 40% »), les boutons des
   cartes voisines se decalaient les uns par rapport aux autres. */
/* L'attribut `hidden` du filtre doit primer : `display:flex` ci-dessous ecrase
   sinon le `display:none` que le navigateur applique a [hidden], et les
   vignettes filtrees restent affichees tout en etant comptees masquees. */
.wc-block-product[hidden],
.products li.product[hidden] { display: none !important; }

.wc-block-product {
  display: flex;
  flex-direction: column;
  /* La pastille de marque etait le seul element non centre de la carte. */
  text-align: center;
  /* Ancre du lien etire, voir plus bas. */
  position: relative;
}

/* Toute la carte est cliquable, et non le seul nom du produit. Le bouton
   « Ajouter au panier » est masque en mode catalogue, la carte n'avait donc
   plus aucune zone de clic evidente : il fallait viser le titre. Plutot que de
   remettre 28 boutons, on etire le lien du titre sur la carte entiere. Le lien
   reste porte par le titre, donc les lecteurs d'ecran et le clavier annoncent
   toujours le nom du produit, et non « lien ». */
.wc-block-product .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.wc-block-product .wp-block-post-title a:focus-visible::after {
  outline: 2px solid var(--gbr--brand--accent);
  outline-offset: 3px;
  border-radius: var(--gbr--radius);
}
.wc-block-product .wp-block-button,
.woocommerce ul.products li.product .button { margin-top: auto; }

.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-name {
  /* !important : WooCommerce pose sur ces blocs les classes de preset
     (has-medium-font-size, has-small-font-size), que WordPress declare
     lui-meme en !important. Sans cela la taille du theme est ignoree. */
  font-size: 1.18rem !important;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--gbr--brand--deep);
  text-decoration: none;
}
/* Le prix doit se lire sans devenir l'argument principal : il est indicatif,
   on ne vend pas en ligne. Assez gros pour etre lu, en retrait du nom. */
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .wc-block-components-product-price {
  font-size: 1rem !important;
  font-weight: 600;
  /* Le nom porte le vert de marque, le prix reste neutre. Deux verts proches
     sur deux lignes voisines annulaient la hierarchie qu'on venait de creer :
     l'oeil voyait un bloc, pas un titre suivi d'une donnee. */
  color: var(--gbr--brand--muted);
}
/* Formats et prix en puces, une par grammage (voir gbr_formats_produit()).
   La fourchette « 7,00 € à 15,00 € » cachait le nombre de formats et le prix
   de chacun : le client veut les lire dans la grille. Les puces se centrent et
   passent a la ligne d'elles-memes, jusqu'a cinq formats sur une carte mobile. */
.gbr-formats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 5px;
  margin-top: 2px;
}
.gbr-format {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: 3px 8px 3px 7px;
  border: 1px solid var(--gbr--brand--line, #e3e8e3);
  border-radius: 999px;
  background: #fff;
  font-size: .78rem;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--gbr--brand--muted);
}
.gbr-format__g { font-weight: 700; color: var(--gbr--brand--deep); }
.gbr-format__prix { font-weight: 600; }
 /* La carte etant passee en flex, la pastille inline-block est blockifiee et
    etiree sur toute la largeur par align-items:stretch. On ne recentre qu'elle :
    l'image et les titres doivent, eux, garder la pleine largeur. */
.wc-block-product .gbr-pastille { font-size: .66rem; align-self: center; }
.wc-block-product .wp-block-button__link { font-size: .875rem !important; }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price { color: var(--gbr--brand--accent); font-weight: 700; }

/* Encadré réglementaire de la fiche produit.
   Le texte est celui du dos du pochon, mot pour mot : le site ne doit jamais
   dire autre chose que ce que le client tient en main. Il n'etait pas visible,
   noye en dernier paragraphe ; c'est la presentation qui change, pas un mot. */
.gbr-mentions__liste {
  margin: .85rem 0;
  padding-left: 1.15rem;
  list-style: none;
}
.gbr-mentions__liste li {
  position: relative;
  margin-bottom: .3rem;
  font-weight: 600;
  color: var(--gbr--brand--text);
}
.gbr-mentions__liste li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gbr--brand--ornement, #c19a45);
}
.gbr-mentions__pied {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--gbr--brand--line);
  font-size: .78rem;
}
.gbr-mentions__contenu { margin-top: 0; }

.gbr-mentions {
  /* Rembourrage et bordures s'ajoutaient aux 720 px : le bloc depassait de
     45 px, a gauche comme a droite, sur la page molecules comme sur les 39
     fiches produit. */
  box-sizing: border-box;
  margin-top: var(--wp--preset--spacing--40);
  padding: 1rem 1.25rem;
  border: 1px solid var(--gbr--brand--line);
  border-left: 4px solid var(--gbr--brand--ornement, #c19a45);
  background: var(--gbr--brand--surface);
  border-radius: var(--gbr--radius-btn);
  font-size: .82rem;
  color: var(--gbr--brand--muted);
}

/* ------------------------------------------------- 6. lisibilité des marques */

/* Pastille sur les vignettes : on doit savoir d'un coup d'œil à quel univers
   appartient un produit, y compris dans une grille mélangée. */
.gbr-pastille {
  display: inline-block;
  margin-bottom: .7rem;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.gbr-pastille--green-farmers { background: #e6f3dc; color: #14501f; }
.gbr-pastille--magic-farmers { background: #14501f; color: #b6ea86; }
/* Sur fond sombre, la pastille sombre se confond avec la carte : on l'inverse. */

/* Filtre de marque : remplace le tri par prix, qui n'a pas de sens ici.
   En liens et non en menu déroulant — plus lisible au pouce, et ce sont de
   vraies URL indexables. */
.gbr-filtres {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Centres (Ben, 2026-09-04) : la barre se lit alors comme un jeu de
     commandes, et non comme une suite de liens dans le fil du texte. */
  align-items: center;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.gbr-filtre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Une puce ne se comprime pas et son libelle ne se coupe pas : sans ces deux
     regles, « Green Farmers » se pliait lettre par lettre dans la colonne
     etroite de la fiche produit, et la puce montait a 137 px de haut. */
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 38px;
  padding: 0 18px;
  line-height: 1;
  border-radius: 10px;
  border: 1.5px solid var(--gbr--brand--line);
  background: var(--gbr--brand--surface);
  color: var(--gbr--brand--muted);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.gbr-filtre:hover { border-color: var(--gbr--brand--accent); color: var(--gbr--brand--accent); }
.gbr-filtre.est-actif {
  background: var(--gbr--brand--accent);
  border-color: var(--gbr--brand--accent);
  color: #fff;
}

/* Le tri restant (pertinence, nouveautés) passe après le filtre de marque */
.woocommerce-ordering { margin-bottom: var(--wp--preset--spacing--30); }

/* ------------------------------------------- 7. description courte et fiches */

/* La description courte porte l'essentiel : taux, marque, profil aromatique.
   Elle doit respirer et son gras doit se voir. */
.gbr-resume p { margin: 0 0 .85rem; }
.gbr-resume p:first-child {
  font-size: .95rem;
  letter-spacing: .02em;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--gbr--brand--line);
}
.gbr-resume strong { color: var(--gbr--brand--deep); font-weight: 700; }

/* Description longue : le gras doit ressortir sans crier */
.wp-block-woocommerce-product-details strong,
.woocommerce-Tabs-panel strong { color: var(--gbr--brand--deep); font-weight: 700; }
.wp-block-woocommerce-product-details h2 { margin-top: var(--wp--preset--spacing--40); }

/* ---------------------------------------------------------- 8. portail 18+ */

html.gbr-agegate-ouvert { overflow: hidden; }

.gbr-agegate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 45, 20, .55);
  backdrop-filter: blur(8px);
}

.gbr-agegate__carte {
  position: relative;
  width: 100%;
  max-width: 450px;
  padding: 44px 34px;
  text-align: center;
  background: #fff;
  border: 1px solid #dce6cf;
  border-radius: var(--gbr--radius);
  box-shadow: 0 40px 80px -30px rgba(20, 60, 20, .5);
}
/* Les deux étoiles dorées de la landing d'origine */
.gbr-agegate__carte::before,
.gbr-agegate__carte::after {
  content: "★";
  position: absolute;
  top: 18px;
  font-size: 12px;
  color: #c19a45;
  opacity: .55;
}
.gbr-agegate__carte::before { left: 22px; }
.gbr-agegate__carte::after { right: 22px; }

.gbr-agegate__feuille { font-size: 46px; margin: 0; line-height: 1; }
/* Les deux marques cote a cote, meme taille : aucune ne prime. Le leger
   ombrage decolle les logos du blanc de la carte, comme sur l'accueil. */
.gbr-agegate__logos { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 0 0 6px; }
.gbr-agegate__logos img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(20,80,31,.16)); }
@media (max-width: 380px) { .gbr-agegate__logos img { width: 80px; height: 80px; } }
.gbr-agegate h2 { font-size: 22px; font-weight: 700; color: #14501f; margin: 12px 0 8px; }
.gbr-agegate p { font-size: 14px; color: #5a6b58; line-height: 1.55; margin-bottom: 24px; }
.gbr-agegate small { display: block; margin-top: 18px; font-size: 11px; color: #9aa694; }

.gbr-agegate__boutons { display: flex; gap: 12px; }
.gbr-agegate__boutons button {
  flex: 1;
  padding: 14px 18px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s, filter .12s;
}
.gbr-agegate__boutons button:active { transform: translateY(1px); }
.gbr-agegate__oui { background: #2f8f3a; color: #fff; box-shadow: var(--gbr--shadow-sm); }
.gbr-agegate__oui:hover { filter: brightness(1.08); }
.gbr-agegate__non { background: #f2f4ee; color: #7a8a70; }

/* ------------------------------------------------------ 9. page d'accueil */

/* Rythme vertical repris de la landing d'origine, valeur par valeur.
   Les espacements y étaient réglés à la main et fonctionnaient : on ne les
   réinvente pas. */
:root {
  --gbr--section: 100px;      /* respiration entre deux sections */
  --gbr--section-mobile: 64px;
}

/* Premier ecran : le visiteur doit voir le titre ET les deux univers sans
   defiler — c'est la seule action attendue de lui. Les espacements sont donc
   proportionnels a la hauteur de la fenetre (unites vh), avec les valeurs de la
   landing comme plafond : sur un grand ecran on retrouve son rythme, sur un
   petit tout se resserre au lieu de deborder. */
.gbr-hero { padding: 0; text-align: center; }
.gbr-hero__titre { margin: 0; }
.gbr-accent { color: var(--gbr--brand--accent); }
.gbr-hero__baseline {
  max-width: 600px;
  margin: clamp(10px, 1.8vh, 16px) auto 0;
  color: var(--gbr--brand--muted);
  font-size: 1.03rem;
  line-height: 1.6;
}
.gbr-hero__baseline strong { color: var(--gbr--brand--text); font-weight: 600; }

/* Bandeau de transition — conservé quelques mois (décision Ben, docs/04) */
/* Bandeau de transition : valeurs relevees une a une sur gbr.re le 2026-09-01.
   Le point qui change tout est `flex-wrap: nowrap` : les cinq fragments restent
   sur une seule ligne de flex, et c'est le TEXTE de chacun qui se replie quand
   la place manque. Avec `wrap`, ce sont les fragments qui sautent a la ligne,
   ce qui ne donne pas le meme decoupage. */
.gbr-rebrand {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  /* 24px sur gbr.re. Le clamp ne s'active que sur les ecrans courts, pour que
     les deux univers restent visibles sans defiler (demande du 2026-08-31). */
  margin: clamp(14px, 2.6vh, 24px) auto 0;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #dce6cf;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(31, 107, 42, .35);
  font-size: 13.5px;
  line-height: 1.35;
  color: #5a6b58;
  text-align: center;
}
.gbr-rebrand strong { color: #1f6b2a; font-weight: 600; }
.gbr-rebrand__fleche { color: #7fbf3f; font-weight: 800; font-size: 15px; }

/* Sur-titre : le contraste de taille portait toute la landing */
.gbr-kicker {
  margin: clamp(18px, 3.4vh, 40px) 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8aa17c;
}
.gbr-kicker--clair { color: #cfe9b4; margin-top: 0; }

/* Cartes d'univers — les deux portes d'entree du site.
   Signale par Ben, 2026-08-31 : Magic Farmers avait un fond de carte, Green
   Farmers non. Green Farmers heritait alors du fond de page, donc aucun bord,
   aucune ombre : une carte pleine face a un trou. Les deux cartes portent
   desormais la meme structure (bord, ombre, rayon, hauteur) ; seule l'ambiance
   change — claire pour Green Farmers, sombre pour Magic Farmers, conformement
   a la decision du 2026-08-24. */
/* Largeurs reprises de gbr.re. Le `!important` est necessaire : la classe
   `alignwide` de WordPress impose 1120 px avec une specificite superieure, ce
   qui etalait les deux logos a 395 px l'un de l'autre au lieu de 140. */
.gbr-univers-cartes {
  margin-top: clamp(14px, 2.4vh, 26px) !important;
  margin-inline: auto !important;
  max-width: 680px !important;   /* .brands sur gbr.re */
  gap: 20px;                     /* idem */
  align-items: stretch;
}

/* Aucun encart autour des cartes (Ben, 2026-09-01) : ni fond, ni bordure, ni
   ombre. C'est ainsi sur gbr.re, et les deux logos respirent nettement mieux
   sans cadre autour. La distinction clair/sombre entre les deux univers reste
   entiere sur les pages de marque et les fiches produits, la ou elle sert
   vraiment a situer le visiteur. */
.gbr-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 3.4vh, 40px) 26px clamp(18px, 2.8vh, 34px);
  text-align: center;
  transition: transform .2s ease;
}
.gbr-carte:hover { transform: translateY(-8px); }
.gbr-carte__logo { margin: 0 auto clamp(12px, 2.2vh, 22px); }
/* Ombre teintee vert profond et non noire (Ben, 2026-09-10) : sur le fond vert
   clair, le noir a 28 % virait au gris sale. Meme ombre sur la modale 18 ans et
   les cartes de marque, pour qu'un logo ait la meme ombre partout. */
.gbr-carte__logo img { width: clamp(120px, 23vh, 210px); height: auto; filter: drop-shadow(0 10px 22px rgba(20,80,31,.18)); }
/* Les logos menent a leur gamme (Ben, 2026-09-11). Le lien ne doit pas
   souligner l'image, et la carte repond au survol pour dire qu'elle se clique. */
.gbr-carte__logo a { display: inline-block; text-decoration: none; border: 0; }
.gbr-carte__logo a img { transition: transform .25s ease, filter .25s ease; }
.gbr-carte__logo a:hover img,
.gbr-carte__logo a:focus-visible img { transform: translateY(-3px); filter: drop-shadow(0 14px 26px rgba(20,80,31,.26)); }
.gbr-carte__logo a:focus-visible { outline: 2px solid var(--gbr--brand--accent); outline-offset: 4px; border-radius: 12px; }
.gbr-carte h2 { font-size: 1.55rem; margin: 0 0 7px; }
.gbr-carte__tag { font-size: .86rem; color: var(--gbr--brand--muted); line-height: 1.5; margin: 0 0 22px; }
.gbr-carte__tag em { color: var(--gbr--brand--ornement, #cf9f57); font-style: italic; }

/* Le bouton est colle en bas de carte : les deux « Entrer » s'alignent meme
   quand un descriptif tient sur deux lignes et l'autre sur une. */
.gbr-carte > p:last-child { margin-top: auto; margin-bottom: 0; }

.gbr-entrer {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1.5px solid var(--gbr--brand--accent);
  color: var(--gbr--brand--accent);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.gbr-entrer:hover { background: var(--gbr--brand--accent); color: #fff; }
.gbr-entrer--plein { background: var(--gbr--brand--accent); color: #fff; border-color: var(--gbr--brand--accent); }
.gbr-entrer--plein:hover { filter: brightness(1.08); color: #fff; }

/* Bande packaging — 84 px en haut, 80 en bas, comme sur la landing */
.gbr-packs {
  overflow: hidden;
  margin-top: var(--gbr--section) !important;
  margin-bottom: 0 !important;
  padding: 96px 20px 92px;
  background:
    radial-gradient(640px 340px at 50% 24%, rgba(190,235,150,.22), transparent 62%),
    linear-gradient(180deg, #4a9c38 0%, #14501f 100%);
}
.gbr-packs__titre { color: #fff; margin: 10px 0 0; }
.gbr-accent-clair { color: #b6ea86; }
.gbr-packs__sub { color: #d3e7cc; font-size: .97rem; margin: 8px 0 0; }
.gbr-packs .gbr-packs__grille {
  max-width: 820px !important;   /* .packs sur gbr.re */
  margin: 52px auto 0 !important;
  gap: 34px;
  align-items: flex-end;
}
.gbr-packs .gbr-pack img { max-width: 330px; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(20,60,20,.32)); transition: transform .25s ease; }
.gbr-pack--gauche img { transform: rotate(-5deg); }
.gbr-pack--droite img { transform: rotate(5deg); }
@media (hover:hover) { .gbr-pack:hover img { transform: rotate(0) translateY(-10px) scale(1.03); } }
.gbr-pack__label { margin: 26px 0 0; font-size: .84rem; font-weight: 600; color: #e2f1da; line-height: 1.5; }
.gbr-pack__label strong { display: block; font-size: 1rem; margin-bottom: 3px; color: #fff; }

/* --- Etiquettes ------------------------------------------------------------
   Petites capitales en monospace, sur fond clair borde. Elles decoupent le
   contenu en blocs identifiables sans multiplier les titres : l'oeil accroche
   l'etiquette, pas le paragraphe. C'est ce qui manquait au premier jet, ou
   tout etait au meme niveau de lecture. */
.gbr-etiquette {
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 13px;
  border-radius: 6px;
  border: 0;
  background: #14501f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #faf8f1;
}

/* Bande creme : le fond de toute la section (chiffres + recit), pas seulement
   de la carte. La carte, elle, est blanche pour se detacher du fond. */
.gbr-bande-creme {
  margin: 0 !important;
  padding: var(--gbr--section) var(--wp--preset--spacing--30);
  background: #faf8f1;
}

/* --- Bande des preuves ---------------------------------------------------- */

.gbr-preuves {
  position: relative;
  /* Les preuves passent sous le recit et juste au-dessus de l'appel revendeur :
     la demonstration precede immediatement la demande. Marge haute genereuse
     pour les detacher du texte, sans les coller a la bande verte. */
  margin: var(--gbr--section) auto 0 !important;
  padding: 34px 0 30px;
  border: 1px solid rgba(20, 80, 31, .10);
  border-radius: var(--gbr--radius);
  background: #fffdf8;
}
/* L'etiquette chevauche la bordure, posee dessus.
   Bronze fonce et non vert : elle ne nomme pas une rubrique de contenu comme
   « Origine » ou « Contenu », elle signe l'entreprise. Une couleur a part le
   dit sans un mot. Teinte choisie pour rester lisible : 5,98:1 sur creme, la
   ou l'or de la charte (#c19a45) ne montait qu'a 2,48:1. */
.gbr-etiquette--chevauche {
  position: absolute;
  top: -14px;
  left: 26px;
  margin: 0;
  /* Pastille claire cerclee la ou les badges de contenu sont pleins et fonces.
     Il se distingue par le TRAITEMENT, pas par la teinte : le bronze essaye
     avant etait la seule couleur brune de la page et ne dialoguait avec rien. */
  background: #e6f3dc;
  color: #14501f;
  border: 1px solid #cfe9b4;
}

/* Un groupe en disposition « contrainte » plafonne ses enfants a la largeur de
   LECTURE (720 px). Les quatre colonnes se serraient donc a gauche dans une
   carte de 1120 px, laissant un tiers de vide a droite. Selecteur enfant direct
   pour passer devant la regle generee par WordPress. */
.gbr-preuves > .gbr-preuves__grille {
  max-width: none !important;
  width: 100%;
  gap: 0 !important;
  margin: 0 !important;
}
.gbr-preuves__grille > .wp-block-column {
  text-align: center;
  padding: 0 12px;
  border-left: 1px solid rgba(20, 80, 31, .12);
}
.gbr-preuves__grille > .wp-block-column:first-child { border-left: 0; }

/* Les quatre valeurs tiennent chacune sur UNE ligne : sans cela « Saint-Paul »
   passe sur deux lignes, pousse sa legende vers le bas et casse l'alignement
   horizontal des quatre legendes — ce qui saute aux yeux. */
.gbr-preuve__chiffre {
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  /* Vert profond, comme les titres. Le probleme venait des legendes, trop
     grosses et trop foncees : c'est elles qui reculent, pas le chiffre qui
     s'eclaircit. Affaiblir l'element fort etait l'inverse de la solution. */
  color: var(--gbr--brand--deep);
  margin: 0;
  white-space: nowrap;
}
.gbr-preuve__unite { font-size: .58em; margin-left: 1px; }
.gbr-preuve__texte {
  font-size: .69rem;
  color: #8a967f;
  margin: 10px auto 0;
  line-height: 1.4;
  max-width: 150px;
}


/* --- Recit en deux colonnes ------------------------------------------------ */

.gbr-histoire { margin: 0 auto !important; gap: var(--wp--preset--spacing--50); }
.gbr-histoire__titre {
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.015em;
}
/* Le filet sous le titre : reprend le trait de la maquette */
.gbr-histoire__gauche::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 26px;
  background: var(--gbr--brand--accent);
}
.gbr-histoire__droite p:not(.gbr-etiquette) {
  margin: 0 0 26px;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--gbr--brand--muted);
}
.gbr-histoire__droite p:not(.gbr-etiquette) strong { color: var(--gbr--brand--text); }
.gbr-histoire__droite p:last-child { margin-bottom: 0; }

/* --- Appel revendeur ------------------------------------------------------- */

/* --- Appel revendeur -------------------------------------------------------
   Le bloc avait la meme couleur que le pied de page : il s'y fondait et
   disparaissait, alors que c'est l'appel a l'action le plus rentable du site.
   Il devient une carte verte posee sur le fond clair, avec un halo lime repris
   de la bande packaging. Le texte et le bouton sont regroupes au centre plutot
   qu'ecartes aux deux bouts d'une ligne. */
/* Bande pleine largeur, et non carte centree : le fond de page est deja vert
   clair, une carte verte posee dessus ne se detachait de rien et se confondait
   avec le pied de page. En pleine largeur, la coupure est franche. */
.gbr-cta {
  /* On ne touche PAS aux marges horizontales : ce sont elles que WordPress met
     en negatif pour faire deborder un bloc « pleine largeur ». Les ecraser avec
     `margin: X 0 0` laissait 11 px de fond de chaque cote. */
  /* Aucune marge haute : la bande creme qui precede se termine par son propre
     padding. Une marge ici laissait apparaitre 76 px de fond de page vert clair
     entre les deux bandes, ce qui cassait l'enchainement. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 72px var(--wp--preset--spacing--30) 70px;
  border: 0;
  background:
    radial-gradient(680px 300px at 50% -10%, rgba(190, 235, 150, .28), transparent 62%),
    linear-gradient(135deg, #3a9c42 0%, #14501f 100%);
}

.gbr-cta .gbr-cta__grille {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0;
  text-align: center;
  background: none;
  box-shadow: none;
}
.gbr-cta .gbr-cta__grille > .wp-block-column { flex-basis: auto !important; width: 100%; }

.gbr-cta__titre {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}
.gbr-cta p:not(.gbr-cta__action) {
  margin: 0 auto;
  max-width: 520px;
  color: #d3e7cc;
  font-size: .93rem;
  line-height: 1.6;
}

/* Le bouton suit le texte de pres : 22 px, pas une colonne a l'autre bout. */
/* 22 px de marge donnaient 46 px a l'ecran : le bloc paragraphe de WordPress
   ajoute sa propre marge haute. On la neutralise pour tenir l'ecart voulu. */
.gbr-cta__action { margin: 4px 0 0 !important; text-align: center !important; }
.gbr-cta__action .gbr-entrer {
  background: #fff;
  border-color: #fff;
  color: #14501f;
  padding: 14px 32px;
  font-size: .8rem;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .5);
}
.gbr-cta__action .gbr-entrer:hover { background: #b6ea86; border-color: #b6ea86; color: #0b2d12; filter: none; }

@media (max-width: 640px) {
  :root { --gbr--section: var(--gbr--section-mobile); }
  .gbr-hero { padding-top: 38px; }
  /* Plafond mobile sur le logo. La largeur choisie dans l'editeur (210 px)
     vaut pour le bureau ; sur un ecran de telephone elle mange un tiers de la
     hauteur utile et repousse les cartes hors de l'ecran. C'est une contrainte
     d'adaptation, pas un verrouillage de design : la valeur de bureau reste
     reglable dans l'editeur. */
  .gbr-header__logo img { width: clamp(104px, 33vw, 148px) !important; }

  /* Cartes cote a cote et non empilees : le choix d'univers est l'action
     principale de la page, les deux options doivent etre visibles ensemble. */
  .gbr-univers-cartes { flex-wrap: nowrap !important; gap: 4px; max-width: none; }
  .gbr-univers-cartes > .wp-block-column { flex-basis: 50% !important; }
  .gbr-carte { padding: 14px 2px 16px; }
  .gbr-carte__logo { margin-bottom: 12px; }
  /* Les logos remplissent leur colonne. A 90 px ils flottaient au centre d'une
     colonne de 174 px, ce qui creait 90 px de vide entre les deux marques :
     l'inverse de la densite de gbr.re, ou ils font 180 px de large. */
  .gbr-carte__logo img { width: clamp(118px, 41vw, 160px); }
  .gbr-carte h2 { font-size: 1.05rem; }
  .gbr-carte__tag { font-size: .72rem; margin-bottom: 14px; line-height: 1.4; }
  .gbr-entrer { padding: 10px 16px; font-size: .68rem; letter-spacing: .06em; }
  .gbr-packs { padding: 66px 20px 62px; }
  .gbr-packs__grille { margin-top: 34px !important; gap: 15px; flex-wrap: nowrap !important; align-items: flex-start; }
  .gbr-packs__grille > .wp-block-column { flex-basis: 50% !important; }
  .gbr-pack img { max-width: 92%; }
  .gbr-pack__label { margin-top: 14px; font-size: .76rem; }
  .gbr-preuve__chiffre { font-size: 1.8rem; }
  .gbr-cta { padding: 34px 24px; }
}

/* ------------------------------------------------------- 10. formulaires */

.gbr-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  /* Le formulaire suit directement un titre (« Nous contacter ») : sans cette
     marge il lui est colle et la page parait compressee a cet endroit. */
  margin: 38px auto 0;
  padding: 32px 30px 30px;
  border-radius: var(--gbr--radius);
  border: 1px solid var(--gbr--brand--line);
  background: var(--gbr--brand--surface);
  box-shadow: var(--gbr--shadow-sm);
}
/* Le piège à robots doit rester invisible sans être `display:none` :
   certains scripts ignorent les champs masqués de cette façon. */
.gbr-form__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.gbr-form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.gbr-form__champ { display: block; margin-bottom: 15px; }
.gbr-form__champ > span {
  display: block;
  margin-bottom: 6px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--gbr--brand--muted);
}
.gbr-form__champ b { color: var(--gbr--brand--accent); }
/* box-sizing indispensable : sans lui, `width:100%` s'ajoute au padding et a la
   bordure, et le champ deborde de sa colonne — visible sur la ligne
   « Nom / Telephone », ou le premier champ passait sous le second. */
.gbr-form input,
.gbr-form textarea,
.gbr-form button { box-sizing: border-box; }

.gbr-form input[type="text"],
.gbr-form input[type="email"],
.gbr-form input[type="tel"],
.gbr-form textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(31, 107, 42, .15);
  background: rgba(255, 255, 255, .65);
  color: var(--gbr--brand--text);
  font: inherit;
  font-size: .9rem;
}
.gbr-form textarea { resize: vertical; min-height: 120px; }
.gbr-form input::placeholder, .gbr-form textarea::placeholder { color: #a7b39c; }
.gbr-form input:focus, .gbr-form textarea:focus {
  outline: none;
  border-color: var(--gbr--brand--halo);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(127, 191, 63, .15);
}

.gbr-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 18px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--gbr--brand--muted);
}
.gbr-form__consent input { margin-top: 2px; flex: none; }

.gbr-form__envoyer {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--gbr--radius-btn);
  background: var(--gbr--brand--accent);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: var(--gbr--shadow-sm);
  transition: filter .12s;
}
.gbr-form__envoyer:hover { filter: brightness(1.08); }

.gbr-form__note { margin: 12px 0 0; text-align: center; font-size: .7rem; color: #8aa17c; }

.gbr-form__retour {
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: var(--gbr--radius-btn);
  font-size: .86rem;
  font-weight: 600;
}
.gbr-form__retour--ok { background: #e6f3dc; color: #14501f; border: 1px solid #cfe9b4; }
.gbr-form__retour--ko { background: #fbeae6; color: #d1553f; border: 1px solid #f0cfc7; }

@media (max-width: 640px) {
  .gbr-form { padding: 24px 20px 22px; }
  .gbr-form__ligne { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------- 11. pages éditoriales */

/* Bandeau de titre : une page qui démarre par un h1 posé sur le fond de page
   fait brouillon à côté d'une home travaillée. */
/* Pas de fond derriere le titre (Ben, 2026-09-01) : le bandeau creme coupait la
   page en deux et n'apportait rien. Un simple filet suffit a poser le titre. */
body.page:not(.home) main > .wp-block-group:first-child {
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--40);
  /* Plus de filet du tout (Ben, 2026-09-08). Il n'etait deja plus sur contact
     ni revendeur ; le garder ailleurs ne faisait qu'une incoherence de plus.
     Une ligne pleine largeur sous un titre cale a 720 px soulignait surtout le
     desaccord entre les deux largeurs. L'espacement suffit a poser le titre. */
}
/* Le titre s'aligne sur la MEME colonne que le texte, pas sur la largeur du
   bandeau. Trois bords gauches differents sur une meme page (titre a 1120,
   texte a 720, encart et formulaire ailleurs encore) : c'est exactement ce qui
   donne l'impression de bricolage. Une seule ligne verticale pour tout. */
body.page:not(.home) main > .wp-block-group:first-child .wp-block-post-title {
  max-width: 720px;
  margin: 0 auto;
  /* 56 px est la taille du hero de l'accueil. Sur une page de contenu, elle
     ecrase tout ce qui suit et fait perdre deux lignes de lecture. */
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
}

/* Meme correction pour le titre d'archive du catalogue, qui etait reste a la
   taille du hero (56 px). Sur une page dont le sujet est la grille de produits,
   un libellé de cette taille passe devant ce qu'il annonce : les noms de
   qualites font 16 px, le titre en faisait plus du triple. Il reste aligne sur
   la grille (alignwide), seule sa taille change. */
.wp-block-query-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
}

/* Variante du bloc de preuves posée par le code court : mêmes styles que sur
   l'accueil, mais dans le flux d'une page de contenu. Elle prend la largeur
   large (1120 px) et non la colonne de lecture : quatre valeurs serrees dans
   720 px, dont « Saint-Paul » en une seule ligne, n'avaient plus de place pour
   respirer entre les filets. C'est aussi ce qui la detache du texte. */
.gbr-preuves--bloc {
  position: relative;
  /* Sans cela sa bordure d'1 px s'ajoutait aux 720 px et le bloc depassait du
     texte d'un pixel a gauche comme a droite. */
  box-sizing: border-box;
  margin: var(--wp--preset--spacing--50) auto !important;
  padding: 34px 0 30px;
  border: 1px solid rgba(20, 80, 31, .10);
  border-radius: var(--gbr--radius);
  background: #fffdf8;
}
.gbr-preuves--bloc .gbr-preuves__grille {
  display: flex;
  max-width: none !important;
  width: 100%;
  gap: 0;
  margin: 0;
}
.gbr-preuves--bloc .wp-block-column {
  flex: 1;
  text-align: center;
  padding: 0 12px;
  border-left: 1px solid rgba(20, 80, 31, .12);
}
/* Dans 720 px et non 1120, chaque colonne ne fait plus que 180 px. A la taille
   de l'accueil, « Saint-Paul » les remplit d'un filet a l'autre : le chiffre
   descend d'un cran ici, et seulement ici. */
.gbr-preuves--bloc .gbr-preuve__chiffre { font-size: clamp(1.05rem, 1.8vw, 1.32rem); }
/* 1,5 rem laissait « Saint-Paul » a 155 px dans 156 px de place utile : ca
   tenait, mais au pixel pres, et le mot est en `nowrap`. */
.gbr-preuves--bloc .gbr-preuve__texte { font-size: .66rem; max-width: 130px; }
.gbr-preuves--bloc .wp-block-column:first-child { border-left: 0; }

/* Encart de renvoi d'une page vers l'autre */
/* Encart de renvoi : deux colonnes sur ordinateur — le message a gauche,
   l'action a droite. Empile a la verticale, il ressemblait a un paragraphe
   encadre sans relief. Le filet vertical vert le rattache visuellement aux
   sous-titres de la page. */
.gbr-encart {
  box-sizing: border-box;
  width: 100%;
  margin: var(--wp--preset--spacing--50) 0;
  padding: 28px 30px 28px 26px;
  border-radius: var(--gbr--radius);
  border: 1px solid rgba(20, 80, 31, .10);
  border-left: 4px solid var(--gbr--brand--accent);
  background: #faf8f1;
  display: flex;
  align-items: center;
  gap: 28px;
}
.gbr-encart__corps { flex: 1; min-width: 0; }
.gbr-encart__titre {
  margin: 0 0 8px;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--gbr--brand--deep);
}
.gbr-encart__texte p { margin: 0; font-size: .89rem; color: var(--gbr--brand--muted); line-height: 1.6; }
.gbr-encart__action { margin: 0; flex: none; }
.gbr-encart__action .gbr-entrer { white-space: nowrap; }

@media (max-width: 720px) {
  .gbr-encart { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 22px 24px 20px; }
  .gbr-encart__action .gbr-entrer { display: block; text-align: center; }
}

/* Les étiquettes rythment les pages éditoriales comme sur l'accueil.
   Marge haute généreuse : elles ouvrent une section, elles ne suivent pas
   le paragraphe précédent. */
.gbr-etiquette { margin-top: var(--wp--preset--spacing--40); }
main > .wp-block-group:first-child .gbr-etiquette,
.gbr-preuves .gbr-etiquette { margin-top: 0; }
.gbr-etiquette + h2, .gbr-etiquette + h3 { margin-top: 6px; }

@media (max-width: 640px) {
  /* Bande de chiffres de l'accueil : grille 2x2. Ces regles avaient disparu
     lors d'une reecriture de la section, laissant les quatre valeurs empilees
     avec leurs separateurs verticaux orphelins au-dessus de chaque bloc. */
  .gbr-preuves { padding: 30px 0 22px; }
  .gbr-preuves > .gbr-preuves__grille { flex-wrap: wrap !important; gap: 24px 0 !important; }
  .gbr-preuves > .gbr-preuves__grille > .wp-block-column {
    /* box-sizing indispensable : sans lui, les 10 px de padding et le filet de
       separation s'ajoutent aux 50 %, chaque colonne depasse la demi-largeur et
       la grille retombe sur une seule colonne. */
    box-sizing: border-box;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 10px;
  }
  .gbr-preuves > .gbr-preuves__grille > .wp-block-column:nth-child(odd) { border-left: 0; }
  .gbr-preuve__texte { font-size: .7rem; max-width: 140px; }

  .gbr-preuves--bloc .gbr-preuves__grille { flex-wrap: wrap; }
  .gbr-preuves--bloc .wp-block-column { flex: 0 0 50%; padding: 0 10px; margin-bottom: 22px; }
  .gbr-preuves--bloc .wp-block-column:nth-child(odd) { border-left: 0; }
  .gbr-encart { padding: 24px 22px; }
}

/* Univers en pied de page — plus visibles que le reste du pied, ce sont des
   liens de navigation, pas des mentions légales. */
.gbr-footer__univers {
  margin: 0 0 14px !important;
  font-size: .95rem;
  font-weight: 600;
}
.gbr-footer__univers a {
  color: var(--gbr--brand--deep);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s, color .15s;
}
.gbr-footer__univers a:hover {
  color: var(--gbr--brand--accent);
  border-bottom-color: var(--gbr--brand--accent);
}

/* Pochons cliquables : ils mènent à l'univers correspondant. Le rappel d'action
   n'apparaît qu'au survol sur souris, mais reste toujours visible au doigt —
   sur mobile, rien n'indiquerait autrement que l'image est un lien. */
.gbr-pack a { text-decoration: none; color: inherit; display: block; }
.gbr-pack__label a { display: block; }
.gbr-pack__voir {
  display: block;
  margin-top: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b6ea86;
  transition: opacity .2s;
}
@media (hover: hover) {
  .gbr-pack__voir { opacity: 0; }
  .gbr-pack:hover .gbr-pack__voir { opacity: 1; }
}
.gbr-pack a:focus-visible { outline: 2px solid #b6ea86; outline-offset: 6px; border-radius: 8px; }

/* ---------------------------------------- 12. rythme des pages éditoriales */

/* Porteur de niveau bloc pour l'étiquette : c'est lui qui reçoit la largeur de
   contenu et les marges automatiques. */
.gbr-etiquette-ligne { margin: var(--wp--preset--spacing--50) 0 0; }
.gbr-etiquette-ligne:first-child { margin-top: 0; }
.gbr-etiquette-ligne + h2,
.gbr-etiquette-ligne + h3 { margin-top: 10px; }
.gbr-etiquette-ligne .gbr-etiquette { margin: 0; }

/* Une page de 900 mots a besoin de repères. Un filet avant chaque titre de
   section suffit — il sépare sans alourdir. */
body.page:not(.home) .wp-block-post-content > h2 {
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--gbr--brand--line);
}
body.page:not(.home) .wp-block-post-content > .gbr-etiquette-ligne + h2 {
  padding-top: 0;
  border-top: 0;
}
body.page:not(.home) .wp-block-post-content > .gbr-etiquette-ligne {
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--gbr--brand--line);
}
body.page:not(.home) .wp-block-post-content > .gbr-etiquette-ligne:first-child {
  padding-top: 0;
  border-top: 0;
}
/* Le premier titre de section fait exception (Ben, 2026-09-08). Un filet a
   separer le titre de page de la premiere section ne separe rien : il n'y a
   rien au-dessus. Il se lisait comme un soulignement du h1, sur une largeur
   qui n'etait pas la sienne. Les suivants gardent leur role. */
body.page:not(.home) .wp-block-post-content > h2:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Les sous-titres deviennent des entrées repérables — utile pour la FAQ, où
   chaque h3 est une question. */
body.page:not(.home) .wp-block-post-content > h3 {
  /* Meme correction que la citation : sans box-sizing, le filet et son retrait
     s'ajoutaient aux 720 px, et les questions de la FAQ demarraient 9 px a
     gauche de la colonne. Le filet se pose maintenant DESSUS. */
  box-sizing: border-box;
  margin-top: var(--wp--preset--spacing--40);
  padding-left: 14px;
  border-left: 3px solid var(--gbr--brand--halo);
  font-size: 1.08rem;
}
/* Un titre qui suit deja une etiquette n'a pas besoin du trait : les deux
   marqueurs se font concurrence et alourdissent. */
body.page:not(.home) .gbr-etiquette-ligne + h3 { padding-left: 0; border-left: 0; }

body.page:not(.home) .wp-block-post-content > p {
  color: var(--gbr--brand--muted);
  line-height: 1.68;
}
body.page:not(.home) .wp-block-post-content > p strong { color: var(--gbr--brand--text); }
body.page:not(.home) .wp-block-post-content > ul { color: var(--gbr--brand--muted); line-height: 1.68; }
body.page:not(.home) .wp-block-post-content > ul strong { color: var(--gbr--brand--text); }

/* Citation de mise en garde (les blocs > du Markdown) */
/* `margin: ... 0` annulait le centrage automatique de WordPress, et la bordure
   et le rembourrage s'ajoutaient a la largeur : la citation demarrait 24 px a
   gauche du texte. Un troisieme bord vertical sur la page, exactement ce que
   Ben a repere sur les blocs. Marges automatiques et box-sizing la remettent
   sur la colonne ; son filet dore la distingue bien assez. */
body.page:not(.home) blockquote {
  box-sizing: border-box;
  margin: var(--wp--preset--spacing--40) auto;
  padding: 18px 22px;
  border: 0;
  border-left: 3px solid var(--gbr--brand--ornement, #c19a45);
  border-radius: 0 var(--gbr--radius-btn) var(--gbr--radius-btn) 0;
  background: #faf8f1;
  font-size: .92rem;
}
body.page:not(.home) blockquote p { margin: 0; }

/* Tableaux des pages éditoriales */
.gbr-tableau { margin: var(--wp--preset--spacing--40) 0; overflow-x: auto; }
.gbr-tableau table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.gbr-tableau th, .gbr-tableau td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gbr--brand--line);
}
.gbr-tableau th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gbr--brand--deep);
  border-bottom-width: 2px;
}
.gbr-tableau td { color: var(--gbr--brand--muted); }
.gbr-tableau tr:last-child td { border-bottom: 0; }

/* Tableaux des pages éditoriales */
.gbr-tableau { margin: var(--wp--preset--spacing--40) 0; overflow-x: auto; }
.gbr-tableau table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.gbr-tableau th, .gbr-tableau td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gbr--brand--line);
}
.gbr-tableau th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gbr--brand--deep);
  border-bottom-width: 2px;
}
.gbr-tableau td { color: var(--gbr--brand--muted); }
.gbr-tableau tr:last-child td { border-bottom: 0; }

/* Adresses de courriel (chiffrees en entites HTML, voir gbr_masque_courriels) */
.gbr-courriel {
  color: #14501f;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.gbr-courriel:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------- bascule des formulaires --
   Deux formulaires, un seul visible. Le choix est place avant le premier champ
   pour qu'un point de vente n'ait pas a lire la page entiere pour le trouver.

   Tout en CSS, sans script : les radios portent l'etat, et elles sont voisines
   directes des libelles comme des volets. Cette structure plate evite d'avoir
   a viser un descendant de voisin ou a passer par :has(), donc de dependre du
   support de ces selecteurs.

   Bonus du groupe de radios : la navigation au clavier par les fleches est
   native, alors qu'un systeme d'onglets maison aurait fallu la recoder. */

.gbr-bascule {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin: 38px auto 0;
}

/* Invisible mais focalisable : `display:none` sortirait la radio du parcours clavier. */
.gbr-bascule__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.gbr-bascule__onglet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-sizing: border-box;
  padding: 14px 18px;
  border: 1px solid var(--gbr--brand--line);
  border-radius: var(--gbr--radius-btn);
  background: var(--gbr--brand--surface);
  color: var(--gbr--brand--muted);
  text-align: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gbr-bascule__onglet b {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.gbr-bascule__onglet span {
  font-size: .74rem;
  line-height: 1.3;
  opacity: .85;
}
.gbr-bascule__onglet:hover {
  background: var(--gbr--brand--bg-2);
  border-color: var(--gbr--brand--accent);
}

/* Onglet actif. Voisin direct de sa radio : c'est ce qui rend la bascule fiable. */
#gbr-volet-support:checked   ~ .gbr-bascule__onglet[for="gbr-volet-support"],
#gbr-volet-revendeur:checked ~ .gbr-bascule__onglet[for="gbr-volet-revendeur"] {
  background: var(--gbr--brand--deep);
  border-color: var(--gbr--brand--deep);
  color: #faf8f1;
}
/* Sans cela, survoler l'onglet deja actif le repeint en vert pale. */
#gbr-volet-support:checked   ~ .gbr-bascule__onglet[for="gbr-volet-support"]:hover,
#gbr-volet-revendeur:checked ~ .gbr-bascule__onglet[for="gbr-volet-revendeur"]:hover {
  background: var(--gbr--brand--deep);
  border-color: var(--gbr--brand--deep);
}

/* Le formulaire jumeau disparait. Les volets occupent les deux colonnes. */
.gbr-bascule__volet { grid-column: 1 / -1; }
#gbr-volet-support:checked   ~ .gbr-bascule__volet[data-volet="revendeur"],
#gbr-volet-revendeur:checked ~ .gbr-bascule__volet[data-volet="support"] { display: none; }

/* Le focus clavier doit rester visible : la radio est masquee, on borde l'onglet. */
#gbr-volet-support:focus-visible   ~ .gbr-bascule__onglet[for="gbr-volet-support"],
#gbr-volet-revendeur:focus-visible ~ .gbr-bascule__onglet[for="gbr-volet-revendeur"] {
  outline: 2px solid var(--gbr--brand--accent);
  outline-offset: 2px;
}

/* Dans la bascule, le formulaire ne remet ni marge haute ni largeur propre. */
.gbr-bascule .gbr-form { margin: 8px 0 0; max-width: none; }

@media (max-width: 460px) {
  .gbr-bascule { gap: 8px; }
  .gbr-bascule__onglet { padding: 12px 10px; }
  .gbr-bascule__onglet span { display: none; }
}

/* ------------------------------------------------------------- pagination --
   Le bloc de pagination de WordPress arrive sans aucun style : liens en texte
   nu, et surtout page courante impossible a distinguer des autres, ce qui est
   le seul role que cette barre doit remplir. Elle etait de plus collee au pied
   de page (0 px) et serree contre la grille (24 px).

   Les liens sont dimensionnes a 44 px : c'est la cible tactile confortable, et
   ce site se consulte d'abord au pouce apres un scan de QR code sur un pochon. */

.wp-block-query-pagination {
  gap: 10px;
  /* !important : la marge vient de la mise en page du bloc (wp-container-core),
     posee en ligne par WordPress. */
  margin-top: 56px !important;
  margin-bottom: 0 !important;
}

.wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 15px;
  border: 1px solid var(--gbr--brand--line);
  border-radius: var(--gbr--radius-btn);
  background: var(--gbr--brand--surface);
  color: var(--gbr--brand--deep);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover {
  background: var(--gbr--brand--bg-2);
  border-color: var(--gbr--brand--accent);
}

/* La page ou l'on se trouve : c'est toute la raison d'etre de cette barre. */
.wp-block-query-pagination .page-numbers.current {
  background: var(--gbr--brand--deep);
  border-color: var(--gbr--brand--deep);
  color: #faf8f1;
  cursor: default;
}

/* Les points de suspension ne sont pas un bouton. */
.wp-block-query-pagination .page-numbers.dots {
  min-width: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--gbr--brand--muted);
}

.wp-block-query-pagination a:focus-visible {
  outline: 2px solid var(--gbr--brand--accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .wp-block-query-pagination { margin-top: 40px !important; margin-bottom: 54px !important; }
  .wp-block-query-pagination .page-numbers,
  .wp-block-query-pagination .wp-block-query-pagination-next,
  .wp-block-query-pagination .wp-block-query-pagination-previous { padding: 0 11px; }
}

/* ------------------------------------------------- pastille de molécule -----
   Reprise du bandeau de l'etiquette collee sur le pochon : « 50 % DELTA 10 ».
   Les couleurs sont celles de la planche d'etiquettes (Ben, 2026-09-02), pour
   que le reperage soit le meme entre l'objet et la page. Elle remplace
   l'ancienne pastille de marque, qui repetait la meme information sur toutes
   les vignettes voisines. */

.gbr-molecule {
  /* inline-flex + line-height:1 : en inline-block, l'interligne herite decalait
     le texte vers le bas dans la pastille. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  line-height: 1;
  /* Rectangle arrondi, comme le bandeau de l'etiquette collee sur le pochon,
     et non une gelule : 999px donnait une forme que le pochon n'a pas. */
  border-radius: 7px;
  background: var(--gbr-mol, #4E9751);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gbr-molecule--delta-10 { --gbr-mol: #E6232A; }
.gbr-molecule--10-oh    { --gbr-mol: #770000; }
.gbr-molecule--hec-10   { --gbr-mol: #A10000; }
.gbr-molecule--cbn,
.gbr-molecule--cbn-plus { --gbr-mol: #7D278B; }
.gbr-molecule--cbd,
.gbr-molecule--cbd-bio  { --gbr-mol: #4E9751; }
.gbr-molecule--cbdp     { --gbr-mol: #5A6B58; }   /* couleur non fournie, neutre en attendant */

/* Le lien ne doit pas se souligner ni changer la couleur de la pastille. */
.gbr-molecule__lien { text-decoration: none; }
.gbr-molecule__lien:hover .gbr-molecule { filter: brightness(1.12); }
.gbr-molecule__lien:focus-visible .gbr-molecule {
  outline: 2px solid var(--gbr--brand--accent);
  outline-offset: 2px;
}

/* Dans la vignette : centree, comme le reste de la carte. */
.wc-block-product .gbr-molecule__lien,
.wc-block-product .gbr-molecule { align-self: center; }

/* Sur la fiche : au-dessus du titre, alignee a gauche avec le texte. */
/* Categories de la fiche : memes puces que les filtres du catalogue, pour que
   le visiteur retrouve la forme et la couleur sur lesquelles il vient de
   filtrer. Elles remplacent la pastille qui doublonnait sous le titre. */
/* align-items: center, sinon les puces sont etirees a la hauteur de la rangee
   et leur texte, centre dans leur hauteur d'origine, se retrouve trop haut. */
.gbr-termes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--wp--preset--spacing--30);
}
.gbr-filtre--terme { text-decoration: none; }

/* Troisième porte de l'accueil : le catalogue complet, sous les deux univers.
   Discrète volontairement, elle ne doit pas concurrencer le choix de gamme. */
.gbr-vers-catalogue {
  margin: 26px auto 0;
  font-size: .92rem;
  color: var(--gbr--brand--muted);
}
.gbr-vers-catalogue a {
  color: var(--gbr--brand--deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Respiration entre la grille et le pied de page. Elle etait portee par la
   pagination, absente des pages de categorie : la grille y touchait le pied.
   Elle est desormais sur le bloc de collection, present dans les deux cas. */
/* WordPress annule la marge basse du dernier enfant d'un conteneur contraint,
   via « :root :where(.is-layout-constrained) > :last-child ». Le :root et le
   :last-child lui donnent deux classes de poids ; une regle de classe simple
   perdait donc, meme placee plus bas dans la feuille. On reprend le meme
   tracage en y ajoutant la classe du bloc. */
:root :where(.is-layout-constrained) > .wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-collection { margin-bottom: 84px; }
@media (max-width: 560px) {
  :root :where(.is-layout-constrained) > .wp-block-woocommerce-product-collection,
  .wp-block-woocommerce-product-collection { margin-bottom: 56px; }
}

/* Sur petit ecran, l'en-tete repasse en ligne : en orientation verticale le
   bouton du menu tombait sous le logo, tout en bas de l'en-tete, loin du pouce
   et loin de la convention. Le desktop garde la disposition verticale. */
@media (max-width: 781px) {
  .gbr-header .wp-block-group.is-vertical {
    /* Grille a trois colonnes plutot qu'un flex : le bouton occupe la premiere,
       le logo la deuxieme, et la troisieme, vide et de meme largeur, equilibre
       l'ensemble pour que le logo tombe au centre exact de l'ecran.
       Surtout, on evite ainsi position:absolute et transform sur le conteneur
       du menu : un transform cree un bloc de reference, et l'overlay plein
       ecran du menu, en position:fixed, se serait replie sur la largeur du
       bouton. */
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    /* Sans ce retrait lateral, le logo et le bouton collent les bords de
       l'ecran : le groupe interne n'herite pas du padding de l'en-tete. */
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0 !important;
  }
  .gbr-header .wp-block-group.is-vertical > .wp-block-navigation {
    grid-area: 1 / 1;
    justify-self: start;
  }
  .gbr-header .wp-block-group.is-vertical > .wp-block-site-logo {
    grid-area: 1 / 2;
    justify-self: center;
    margin: 0;
  }
  /* Cible tactile : le bouton natif fait 24 px, on le porte a 44 px, la taille
     confortable au pouce. Ce site s'ouvre surtout apres un scan de QR code. */
  .gbr-header .wp-block-navigation__responsive-container-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    margin-right: -10px;
    color: var(--gbr--brand--deep);
  }
  /* Le bouton pesait trop peu face au logo : icone de 24 px aux traits fins,
     seule porte vers les autres pages sur telephone. Icone agrandie et mot
     « Menu » a cote (Ben, 2026-09-10) : trois traits ne se lisent pas comme un
     menu pour tout le monde, le mot leve le doute et elargit la zone utile. */
  .gbr-header .wp-block-navigation__responsive-container-open svg {
    width: 30px;
    height: 30px;
  }
  .gbr-header .wp-block-navigation__responsive-container-open::after {
    content: "Menu";
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
  }
}

/* Deux rangees de filtres : la marque, puis la molecule de la marque choisie.
   La seconde n'apparait qu'une fois une marque selectionnee. */
/* `hidden` doit primer sur le display de ces deux regles, sinon la rangee des
   molecules et les puces hors marque restent visibles alors que le serveur et
   le script les marquent masquees. Meme piege que sur les vignettes. */
.gbr-filtres__rangee[hidden],
.gbr-filtre[hidden] { display: none !important; }

.gbr-filtres__rangee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.gbr-filtres__rangee[data-rangee="molecule"] { padding-top: 2px; }

/* Compteur discret dans la puce : il informe sans concurrencer le libelle. */
.gbr-filtre__n {
  font-size: .74rem;
  font-weight: 400;
  opacity: .7;
  margin-left: 7px;
  font-variant-numeric: tabular-nums;
}

/* Filtre de molecule : fond plein aux couleurs de l'etiquette du pochon, comme
   le bandeau imprime. Meme mot, meme couleur, du sachet a la page.
   Le CBD est legerement fonce par rapport au #4e9751 de la planche : en blanc
   sur la teinte d'origine, le texte tombait a 3,58:1, sous le seuil lisible.
   Les quatre autres passent telles quelles. */
.gbr-filtre--mol {
  color: #fff;
  border-color: transparent;
  background: var(--mol, #4E9751);
}
.gbr-filtre--cbd      { --mol: #4E9751; }
.gbr-filtre--cbn,
.gbr-filtre--cbn-plus { --mol: #7d278b; }
.gbr-filtre--delta-10 { --mol: #e6232a; }
.gbr-filtre--10-oh    { --mol: #770000; }
.gbr-filtre--hec-10   { --mol: #a10000; }

/* Survol : la regle generique des puces repeint le texte en vert de marque.
   Sur un fond plein colore, ca donnait du vert dans le libelle. On la neutralise
   ici, seule la luminosite bouge. */
.gbr-filtre--mol:hover,
.gbr-filtre--mol:focus-visible {
  color: #fff;
  border-color: transparent;
  filter: brightness(1.08);
}
/* Le focus garde un contour, mais dans le vert profond du site et non dans le
   bleu du navigateur, qui jurait avec le rouge des puces Delta 10. */
.gbr-filtre--mol:focus-visible {
  outline: 2px solid var(--gbr--brand--deep);
  outline-offset: 3px;
}

/* Etat actif : l'anneau colore encerclait la puce d'un liseré rouge, illisible.
   Le fond etant deja plein, il suffit que les puces inactives reculent.
   Cantonne aux barres de filtres : sur la fiche produit, ces memes puces sont
   de simples liens, aucune n'y est « active ». */
.gbr-filtres .gbr-filtre--mol { opacity: .55; }
.gbr-filtres .gbr-filtre--mol:hover { opacity: .85; }
/* Active, la puce garde SA couleur. La regle generique `.gbr-filtre.est-actif`
   la repeignait en vert de marque et l'emportait, la classe de molecule pesant
   moins lourd : on la neutralise ici, teinte et libelle compris. */
.gbr-filtres .gbr-filtre--mol.est-actif {
  opacity: 1;
  background: var(--mol);
  border-color: var(--mol);
  color: #fff;
}

/* En-tete du catalogue centre (Ben, 2026-09-04), pour suivre les filtres.
   Le titre, la description de la gamme et le compteur forment un seul bloc :
   les centrer separement aurait casse l'ensemble. Le fil d'Ariane reste a
   gauche, c'est de la navigation et non de l'en-tete. */
.wp-block-query-title,
.wp-block-term-description,
.woocommerce-products-header__title {
  text-align: center;
}
/* Le compteur vit dans une barre flex qui contenait aussi le tri, retire depuis.
   Son enveloppe s'y ajuste a son contenu (165 px, calee a gauche), si bien que
   centrer le texte ne deplacait rien. C'est l'enveloppe qu'il faut etendre. */
.wc-block-product-results-count { flex: 1 1 100%; }
.woocommerce-result-count {
  width: 100%;
  text-align: center;
}
.wp-block-term-description p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Fond de page qui suit la marque filtree (Ben, 2026-09-04).
   Le catalogue s'ouvre en blanc, neutre parce qu'il montre les deux gammes,
   puis prend la couleur de l'univers choisi. La transition est portee par
   <html> : c'est lui qui peint le fond de la page entiere. */
html.gbr-page-catalogue { background: #fff; transition: background-color .45s ease; }
html.gbr-page-catalogue.gbr-filtre-green-farmers { background: #fbeed8; }
html.gbr-page-catalogue.gbr-filtre-magic-farmers { background: #ecf6e4; }
/* Les vignettes n'ont plus de fond : sur du blanc, le pied de page creme
   devenait la seule rupture. On garde donc le blanc pour le catalogue seul. */
@media (prefers-reduced-motion: reduce) {
  html.gbr-univers-neutre { transition: none; }
}

/* Zoom de la fiche produit.
   Le module de zoom de WooCommerce pose un fond blanc en style en ligne sur son
   image, d'ou le !important. Sur un packshot detoure, ce blanc apparaissait
   partout autour du pochon.
   On ne met pas `transparent` : l'image zoomee est superposee a l'originale, et
   par ses zones transparentes on verrait le petit pochon derriere le grand. Le
   fond de page masque l'un et se fond dans l'autre. */
/* Selecteur repris de WooCommerce a l'identique : le sien pesait plus lourd
   que le mien, qui restait sans effet malgre son !important. */
/* Opaque, a la couleur de la page : le fond masque l'image d'origine, sinon on
   apercoit le petit pochon derriere le grand par les zones detourees. La
   variable suit l'univers, creme sur Green Farmers, vert clair sur Magic
   Farmers, sans qu'il y ait rien a maintenir a la main. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
  background-color: var(--gbr--brand--bg-2);
}

/* Separateur entre les deux questions de la seconde rangee : la molecule, qui
   depend de la gamme, et la forme, qui vaut partout. Sans lui, cinq puces
   alignees se lisent comme une seule liste. */
.gbr-filtres__sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--gbr--brand--line);
}
.gbr-filtres__sep[hidden] { display: none; }

/* Deux libelles pour la puce « Tout » : le long en desktop, le court en mobile,
   ou « Tout le catalogue » faisait passer la rangee sur deux lignes. */
.gbr-filtre__court { display: none; }

/* Puces de forme : troisieme niveau de lecture.
   La marque est la question principale et garde la puce bordee ; la molecule
   porte sa couleur d'etiquette ; la forme est un affinage et doit donc peser
   moins que les deux autres. Sans cette distinction, elle avait exactement
   l'aspect d'une marque et les deux rangees se lisaient comme une seule. */
.gbr-filtre--forme {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gbr--brand--deep) 8%, transparent);
  color: var(--gbr--brand--deep);
  font-size: .78rem;
  font-weight: 600;
}
.gbr-filtre--forme:hover {
  background: color-mix(in srgb, var(--gbr--brand--deep) 15%, transparent);
  border: 0;
  color: var(--gbr--brand--deep);
}
.gbr-filtre--forme.est-actif {
  background: var(--gbr--brand--deep);
  border: 0;
  color: var(--gbr--brand--bg-2);
}
.gbr-filtre--forme .gbr-filtre__n { opacity: .6; }

@media (max-width: 560px) {
  .gbr-filtre__long { display: none; }
  .gbr-filtre__court { display: inline; }
  /* Les trois marques doivent tenir sur une ligne a 375 px : on resserre le
     rembourrage et le corps plutot que de laisser la rangee se casser. */
  .gbr-filtres__rangee { gap: 6px; }
  .gbr-filtre { min-height: 34px; padding: 0 11px; font-size: .78rem; }
  .gbr-filtre__n { margin-left: 5px; font-size: .7rem; }
  .gbr-filtre--forme { min-height: 30px; padding: 0 10px; font-size: .74rem; }
  .gbr-filtres__sep { margin: 4px 2px; }
}

/* ------------------------------------------------ 14. blocs de page éditoriale
   Ajoutés le 2026-09-08 : les pages « À propos » et « Devenir revendeur »
   n'étaient qu'une colonne de 720 px de haut en bas, sans une respiration.
   Le remède n'est pas de décorer, c'est de donner à chaque type d'information
   la forme qui se lit le plus vite : une frise pour une chronologie, des
   cartes pour deux marques, des numéros pour un parcours.

   TOUS ces blocs tiennent dans la colonne de lecture de 720 px, aucun ne passe
   en pleine largeur (Ben, 2026-09-08). Un premier jet les posait a 1120 px : la
   page comptait alors deux bords gauches, celui du texte et celui des blocs, et
   c'est la premiere chose qu'on voyait. Elargir le texte pour rattraper aurait
   donne des lignes de 120 caracteres, illisibles. Ce qui distingue un bloc du
   texte, c'est sa FORME (pastilles, cartes, filets), pas sa largeur. */

/* --- Visuels --------------------------------------------------------------- */

.gbr-visuel { margin: var(--wp--preset--spacing--50) auto; }
.gbr-visuel--large { margin-block: var(--wp--preset--spacing--60, 4rem); }
.gbr-visuel__cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--gbr--radius);
  background: var(--gbr--brand--bg-2);
}
.gbr-visuel__img,
.gbr-visuel__cadre img {
  display: block;
  width: 100%;
  height: auto;
}
/* Le substitut : assez soigné pour qu'on juge la mise en page et non le trou,
   assez explicite pour qu'on ne le prenne jamais pour la photo finale. */
.gbr-visuel__cadre--vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--gbr--brand--line);
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(127, 191, 63, .16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(20, 80, 31, .035) 0 10px, transparent 10px 20px),
    var(--gbr--brand--bg-2);
}
.gbr-visuel__marque {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gbr--brand--deep);
  background: #fff;
  border: 1px solid var(--gbr--brand--line);
  border-radius: 999px;
  padding: 5px 12px;
}
.gbr-visuel__attendu {
  max-width: 34ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--gbr--brand--muted);
}
.gbr-visuel__legende {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--gbr--brand--muted);
  text-align: center;
}

/* --- Les deux marques en cartes -------------------------------------------- */

.gbr-marques { gap: 20px !important; margin: var(--wp--preset--spacing--50) auto !important; align-items: stretch; }
/* La colonne devient elle-meme un conteneur flexible et la carte s'y etire.
   Avec `height: 100%` sur le lien, la hauteur se resolvait contre une colonne
   dont la hauteur dependait justement de son contenu : la colonne se figeait a
   394 px pendant que la carte en faisait 460, et le paragraphe suivant passait
   par-dessus le fond des cartes. */
.gbr-marque-carte { padding: 0 !important; display: flex !important; }
.gbr-marque-carte__lien {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 34px 26px 30px;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--gbr--brand--line);
  border-radius: var(--gbr--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gbr-marque-carte__lien:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(20, 60, 20, .12);
}
/* Chaque carte porte le fond de SON univers, ceux des pages de marque : la
   carte annonce la couleur qu'on trouvera en arrivant. */
.gbr-marque-carte--green-farmers .gbr-marque-carte__lien { background: #fbeed8; border-color: #ecdcbd; }
.gbr-marque-carte--magic-farmers .gbr-marque-carte__lien { background: #ecf6e4; border-color: #d5e8c6; }

.gbr-marque-carte__logo { display: block; margin-bottom: 18px; }
.gbr-marque-carte__logo img {
  width: clamp(110px, 16vw, 150px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(20, 80, 31, .16));
}
.gbr-marque-carte__nom {
  display: block;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--gbr--brand--deep);
  line-height: 1.2;
}
.gbr-marque-carte__tag {
  display: block;
  margin-top: 6px;
  font-size: .88rem;
  color: var(--gbr--brand--muted);
}
.gbr-marque-carte__note {
  display: block;
  margin-top: 4px;
  font-size: .76rem;
  font-style: italic;
  color: #8a967f;
}
/* Le bouton se colle en bas : les deux s'alignent même si un descriptif tient
   sur deux lignes et l'autre sur une. L'ecart au-dessus se prend sur la note,
   PAS sur le bouton : un `padding-top: 18px` contre 12 px en bas posait le
   texte de travers dans sa pastille (signale par Ben, 2026-09-08). */
.gbr-marque-carte__note { margin-bottom: 22px; }
.gbr-marque-carte__lien .gbr-entrer { margin-top: auto; }

/* --- Frise et étapes ------------------------------------------------------- */

.gbr-jalons {
  list-style: none;
  margin: var(--wp--preset--spacing--50) auto;
  padding: 0;
  display: grid;
  gap: 0;
}
.gbr-jalon {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 0 0 var(--wp--preset--spacing--40);
}
.gbr-jalon:last-child { padding-bottom: 0; }
/* Le trait qui relie les jalons part du repère et s'arrête au dernier : c'est
   lui qui fait la chronologie. Sans lui, ce ne serait qu'une liste. */
.gbr-jalon::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: var(--gbr--brand--line);
}
.gbr-jalon:last-child::before { display: none; }

.gbr-jalon__repere {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gbr--brand--accent);
  color: var(--gbr--brand--deep);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
/* Les étapes sont un parcours à suivre, pas des repères à situer : leur pastille
   est pleine, c'est ce qui donne envie de descendre d'un cran. */
.gbr-jalons--etapes .gbr-jalon__repere {
  background: var(--gbr--brand--accent);
  border-color: var(--gbr--brand--accent);
  color: #fff;
  font-size: 1.05rem;
}
.gbr-jalon__corps { padding-top: 8px; }
.gbr-jalon__titre {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gbr--brand--text);
  line-height: 1.3;
}
.gbr-jalon__texte {
  display: block;
  max-width: 62ch;
  margin-top: 6px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--gbr--brand--muted);
}

@media (max-width: 640px) {
  .gbr-marques { display: grid !important; grid-template-columns: 1fr; }
  .gbr-jalon { gap: 14px; }
  .gbr-jalon::before { left: 17px; top: 40px; }
  .gbr-jalon__repere { width: 36px; height: 36px; font-size: .72rem; }
}

/* --- Vidéo d'ambiance ------------------------------------------------------ */

.gbr-video__lecteur {
  display: block;
  width: 100%;
  height: auto;
}
/* La séquence est sombre et le fond de page très clair : sans ce liseré, le
   rectangle noir semblait posé sur la page plutôt que dedans. */
.gbr-video .gbr-visuel__cadre {
  border: 1px solid var(--gbr--brand--line);
  background: #101a10;
}
/* Une boucle muette qui tourne pendant qu'on lit, c'est du mouvement subi.
   Les systèmes réglés sur « animations réduites » la reçoivent arrêtée sur son
   affiche, avec les commandes pour la lancer s'ils le veulent : c'est le script
   du bloc qui s'en charge, une feuille de style ne peut pas mettre une vidéo en
   pause. Une première version la masquait, et le repli n'affichait qu'un
   rectangle noir. */
.gbr-video__lecteur[controls] { background: #101a10; }

/* Vert CBD : #4E9751 partout, c'est la couleur de la charte donnee par Ben
   (confirmee le 2026-09-09). Une version assombrie (#3f7c40) avait ete
   introduite pour le contraste AA du texte blanc sur les puces ; la charte
   prime, et la pastille reste lisible en gras capitales. */
/* --- Panorama des molécules ------------------------------------------------ */

/* Trois colonnes fixes, pas `auto-fit` : cinq cartes ne remplissent pas deux
   rangees de trois, et `auto-fit` etirait les deux dernieres a une largeur et
   demie des trois du dessus. Une case vide se lit mieux qu'une rangee aux
   proportions differentes. */
.gbr-molecules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: var(--wp--preset--spacing--50) 0;
}
/* Deux colonnes jusqu'en bas, y compris sur un ecran de 320 px : mesure faite,
   la carte tient a 142 px et le bouton a 104 px sans rien couper. Une seule
   colonne obligeait a faire defiler pour comparer deux familles, or comparer
   est tout l'interet de ce panorama. Le rembourrage se resserre pour rendre
   l'air que la largeur ne donne plus. */
@media (max-width: 780px) { .gbr-molecules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .gbr-molecules { gap: 10px; }
  .gbr-molecules__carte { padding: 14px 13px 16px; }
  .gbr-molecules__carte::before { margin: -14px -13px 14px; }
  .gbr-molecules__action .gbr-entrer { padding: 9px 12px; letter-spacing: .05em; }
}
.gbr-molecules__carte {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  border: 1px solid var(--gbr--brand--line);
  border-radius: var(--gbr--radius-btn);
  background: var(--gbr--brand--surface);
}
/* Un filet haut à la couleur de la famille : la carte s'identifie avant même
   qu'on lise la pastille, et les cinq se distinguent d'un coup d'œil. */
.gbr-molecules__carte::before {
  content: "";
  display: block;
  height: 3px;
  margin: -18px -18px 16px;
  border-radius: var(--gbr--radius-btn) var(--gbr--radius-btn) 0 0;
  background: var(--gbr-mol, var(--gbr--brand--accent));
}
.gbr-molecules__carte--delta-10 { --gbr-mol: #E6232A; }
.gbr-molecules__carte--10-oh    { --gbr-mol: #770000; }
.gbr-molecules__carte--hec-10   { --gbr-mol: #A10000; }
.gbr-molecules__carte--cbn      { --gbr-mol: #7D278B; }
.gbr-molecules__carte--cbd      { --gbr-mol: #4E9751; }

.gbr-molecules__tete { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.gbr-molecules__marque { font-size: .68rem; color: #8a967f; }
.gbr-molecules__resume {
  margin: 0 0 16px;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--gbr--brand--muted);
}
/* Le bloc jauge se cale en bas : les cinq cartes n'ont pas le même texte, et
   des jauges à cinq hauteurs différentes ne se comparent plus. */
.gbr-molecules__jauge-titre {
  margin: auto 0 6px;
  font-size: .7rem;
  color: #8a967f;
}
.gbr-molecules__jauge-titre b { color: var(--gbr--brand--text); font-size: .82rem; }
/* Quatre crans separes, et non une barre pleine : la puissance est un
   classement en paliers, pas une mesure continue. Des blocs qu'on compte
   disent « 2 sur 4 » sans qu'on ait besoin de lire le libelle. */
.gbr-molecules__echelle { display: flex; gap: 4px; }
.gbr-molecules__cran {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: var(--gbr--brand--bg-2);
  border: 1px solid var(--gbr--brand--line);
}
.gbr-molecules__cran.est-plein {
  background: var(--gbr-mol, var(--gbr--brand--accent));
  border-color: var(--gbr-mol, var(--gbr--brand--accent));
}
.gbr-molecules__public {
  margin: 8px 0 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gbr-mol, var(--gbr--brand--muted));
}
.gbr-molecules__taux { color: #8a967f; }
/* Trois lignes reservees, soit le pire cas mesure : « 18 references, fleurs et
   resines » plus la ligne de taux tiennent sur trois lignes dans une carte de
   172 px, sur deux dans une carte de 230 px. Comme ce pied est SOUS la jauge,
   sa hauteur variable decalait la jauge d'une carte a l'autre et les cinq
   echelles ne s'alignaient plus, alors que c'est justement l'instrument de
   comparaison. Reserver la meme hauteur partout regle le cas a toutes les
   largeurs, sans point de rupture a maintenir. */
.gbr-molecules__pied { margin: 10px 0 0; min-height: 4.5em; font-size: .74rem; line-height: 1.5; color: var(--gbr--brand--muted); }
.gbr-molecules__pied b { color: var(--gbr--brand--text); }
/* Hauteur exacte du bouton, pas une valeur approchee : la carte CBN n'en a pas
   et son creneau doit occuper la meme place, sinon sa jauge descend de 4 px. */
.gbr-molecules__action { margin: 14px 0 0; min-height: 38px; }
.gbr-molecules__action .gbr-entrer { padding: 9px 18px; font-size: .68rem; }

/* --- Renvoi vers une famille ------------------------------------------------ */

.gbr-mol-renvoi-ligne { margin: var(--wp--preset--spacing--40) 0 0; }
.gbr-mol-renvoi {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 16px;
  border: 1px solid var(--gbr--brand--line);
  border-radius: 999px;
  background: var(--gbr--brand--surface);
  transition: border-color .18s, transform .18s;
}
/* Au repos, liseré neutre ; au survol, la couleur de la pastille qu'il
   contient, pour les cinq familles. Seul Delta 10 l'avait, les quatre autres
   retombaient sur le vert d'accent (Ben, 2026-09-10). */
.gbr-mol-renvoi:hover { border-color: var(--gbr-mol, var(--gbr--brand--accent)); transform: translateY(-2px); }
/* Le texte suit le lisere : bouton et pastille ne font plus qu'un au survol. */
.gbr-mol-renvoi:hover .gbr-mol-renvoi__texte { color: var(--gbr-mol, var(--gbr--brand--accent)); }
.gbr-mol-renvoi__texte { transition: color .18s; }
.gbr-mol-renvoi--delta-10 { --gbr-mol: #E6232A; }
.gbr-mol-renvoi--10-oh    { --gbr-mol: #770000; }
.gbr-mol-renvoi--hec-10   { --gbr-mol: #A10000; }
.gbr-mol-renvoi--cbn,
.gbr-mol-renvoi--cbn-plus { --gbr-mol: #7D278B; }
.gbr-mol-renvoi--cbd,
.gbr-mol-renvoi--cbd-bio  { --gbr-mol: #4E9751; }
.gbr-mol-renvoi__texte {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gbr--brand--text);
}

/* --- Encart de mise en garde ------------------------------------------------
   Le vert du thème dit « information utile », ce qui n'est pas le message ici.
   Le rouge et le triangle changent la nature du bloc en un coup d'œil, avant
   même la lecture. Rouge assombri à #C62828 : le rouge Delta 10 de la charte
   ne tient pas le contraste AA sur ce fond crème. */
.gbr-encart--alerte {
  border-left-color: #C62828;
  border-color: rgba(198, 40, 40, .18);
  background: #fdf6f4;
}
.gbr-encart--alerte .gbr-encart__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #A31F1F;
}
.gbr-encart__icone {
  flex: none;
  width: 22px;
  height: 22px;
  color: #C62828;
}
.gbr-encart--alerte .gbr-encart__texte p { color: #6b4f4c; }
.gbr-encart--alerte .gbr-encart__texte strong { color: #A31F1F; }

/* --- Menu principal : survol et page courante (Ben, 2026-09-10) ------------
   Le vert d'accent de la charte, celui des boutons et des liens, plutot que les
   verts de marque qui signent le CBD ou Magic Farmers. Le trait pousse depuis la
   gauche : un changement de couleur seul se voit mal sur un texte court, et un
   soulignement fixe ferait double emploi avec les liens du contenu. La page
   courante garde son trait en vert profond, pour situer sans attirer. */
.gbr-header .wp-block-navigation-item__content {
  position: relative;
  transition: color .18s ease;
}
.gbr-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--gbr--brand--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
@media (hover: hover) {
  .gbr-header .wp-block-navigation-item__content:hover { color: var(--gbr--brand--accent); }
  .gbr-header .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
}
.gbr-header .wp-block-navigation-item__content:focus-visible { color: var(--gbr--brand--accent); }
.gbr-header .wp-block-navigation-item__content:focus-visible::after { transform: scaleX(1); }
/* Page courante : trait present d'emblee, mais plus sobre. Le survol le
   recolore en vert d'accent comme les autres. Hors de la version repliee, ou
   les entrees s'empilent et n'ont pas besoin de ce repere. */
@media (min-width: 600px) {
  .gbr-header .current-menu-item > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
    background: var(--gbr--brand--deep);
    opacity: .55;
  }
  .gbr-header .current-menu-item > .wp-block-navigation-item__content:hover::after { background: var(--gbr--brand--accent); opacity: 1; }
}