/* ==========================================================================
   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: #f4faee;
  --gbr--brand--bg-2: #e6f3dc;
  --gbr--brand--text: #17311a;
  --gbr--brand--muted: #5a6b58;
  --gbr--brand--line: #dce6cf;
  --gbr--brand--surface: #ffffff;
}

/* Green Farmers — ambiance CLAIRE.
   Nature, culture, artisanal. C'est l'ambiance de la landing actuelle, celle
   que la clientèle connaît déjà. Les accents or/terre viennent du logo GF. */
html.gbr-univers-green-farmers {
  --gbr--brand--accent: #2f8f3a;
  --gbr--brand--deep: #14501f;
  --gbr--brand--halo: #7fbf3f;
  --gbr--brand--bg-1: #f4faee;
  --gbr--brand--bg-2: #e6f3dc;
  --gbr--brand--text: #17311a;
  --gbr--brand--muted: #5a6b58;
  --gbr--brand--line: #dce6cf;
  --gbr--brand--surface: #ffffff;
  --gbr--brand--ornement: #c19a45;
}

/* Magic Farmers — ambiance SOMBRE.
   Molécules, nouveauté, technicité. Décision Ben, 2026-08-24 : « le clair pour
   Green, le foncé pour Magic ». Le vert lime dominant du logo MF (#78a830)
   ne prend toute sa force que sur un fond profond. */
html.gbr-univers-magic-farmers {
  --gbr--brand--accent: #98d94e;
  --gbr--brand--deep: #cfe9b4;
  --gbr--brand--halo: #98d94e;
  --gbr--brand--bg-1: #14501f;
  --gbr--brand--bg-2: #0b2d12;
  --gbr--brand--text: #e2f1da;
  --gbr--brand--muted: #a7b39c;
  --gbr--brand--line: rgba(207, 233, 180, .18);
  --gbr--brand--surface: rgba(255, 255, 255, .06);
  --gbr--brand--ornement: #b6ea86;
}

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

html {
  min-height: 100%;
  background:
    radial-gradient(900px 460px at 50% -8%, color-mix(in srgb, var(--gbr--brand--halo) 28%, transparent), transparent 60%),
    radial-gradient(700px 500px at 92% 12%, color-mix(in srgb, var(--gbr--brand--halo) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--gbr--brand--bg-1) 0%, var(--gbr--brand--bg-2) 100%);
  background-color: var(--gbr--brand--bg-2);
}

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

/* Le fond radial se place mal sur une page longue en mobile : la landing
   d'origine le retirait sous 640px, on garde ce correctif éprouvé. */
@media (max-width: 640px) {
  html {
    background: linear-gradient(180deg, var(--gbr--brand--bg-1) 0%, var(--gbr--brand--bg-2) 100%);
    background-color: var(--gbr--brand--bg-2);
  }
}

::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; }

.gbr-footer {
  margin-top: auto;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  text-align: center;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--gbr--brand--muted);
  border-top: 1px solid var(--gbr--brand--line);
}
.gbr-footer .gbr-etoile { color: var(--gbr--brand--ornement, #c19a45); margin: 0 8px; }

/* ----------------------------------------------------------- 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. */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product {
  background: var(--gbr--brand--surface);
  border: 1px solid var(--gbr--brand--line);
  border-radius: var(--gbr--radius);
  padding: 1.25rem;
  box-shadow: var(--gbr--shadow-sm);
  transition: transform .2s ease;
}
.woocommerce ul.products li.product:hover,
.wc-block-product:hover { transform: translateY(-6px); }

.wc-block-product img {
  width: 100%;
  height: auto;
  border-radius: var(--gbr--radius-btn);
  display: block;
  margin-bottom: .8rem;
}
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gbr--brand--deep);
  text-decoration: none;
}
.wc-block-product .wc-block-components-product-price { color: var(--gbr--brand--accent); font-weight: 700; }

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

/* Mentions légales CBD : présentes sur chaque fiche, jamais tapageuses */
.gbr-mentions {
  margin-top: var(--wp--preset--spacing--40);
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--gbr--brand--ornement, #c19a45);
  background: var(--gbr--brand--surface);
  border-radius: 0 var(--gbr--radius-btn) var(--gbr--radius-btn) 0;
  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. */
html.gbr-univers-magic-farmers .gbr-pastille--magic-farmers { background: #b6ea86; color: #0b2d12; }

/* 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-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.gbr-filtre {
  padding: 9px 18px;
  border-radius: 999px;
  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;
}
html.gbr-univers-magic-farmers .gbr-filtre.est-actif { color: #0b2d12; }

/* 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; }
.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: 76px;       /* respiration entre deux sections */
  --gbr--section-mobile: 52px;
}

/* 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) */
.gbr-rebrand {
  display: inline-block;
  margin: clamp(14px, 2.6vh, 24px) auto 0;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--gbr--brand--line);
  background: var(--gbr--brand--surface);
  box-shadow: var(--gbr--shadow-sm);
  font-size: .84rem;
  color: var(--gbr--brand--muted);
}
.gbr-rebrand strong { color: var(--gbr--brand--deep); font-weight: 600; }
.gbr-rebrand__fleche { color: var(--gbr--brand--halo); font-weight: 800; }

/* 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 */
.gbr-univers-cartes { margin-top: clamp(14px, 2.4vh, 26px) !important; gap: 20px; }
.gbr-carte {
  padding: clamp(22px, 3.6vh, 40px) 26px clamp(20px, 3vh, 34px);
  border-radius: var(--gbr--radius);
  text-align: center;
  transition: transform .2s ease;
}
.gbr-carte:hover { transform: translateY(-8px); }
.gbr-carte__logo { margin: 0 auto clamp(12px, 2.2vh, 22px); }
.gbr-carte__logo img { width: clamp(120px, 19vh, 210px); height: auto; filter: drop-shadow(0 12px 22px rgba(0,0,0,.28)); }
.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; }
.gbr-carte--magic { background: linear-gradient(180deg, #14501f 0%, #0b2d12 100%); }
.gbr-carte--magic h2 { color: #cfe9b4; }
.gbr-carte--magic .gbr-carte__tag { color: #a7b39c; }
.gbr-carte--magic .gbr-carte__tag em { color: #b6ea86; }

.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-carte--magic .gbr-entrer { border-color: #98d94e; color: #98d94e; }
.gbr-carte--magic .gbr-entrer:hover { background: #98d94e; color: #0b2d12; }
.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: 84px 20px 80px;
  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: .96rem; margin: 8px 0 0; }
.gbr-packs__grille { margin-top: 52px !important; gap: 34px; align-items: flex-end; }
.gbr-pack img { max-width: 300px; 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; }

/* Preuves chiffrées : une bande claire, séparée du reste par des filets */
.gbr-preuves {
  margin: 0 auto !important;
  padding: var(--gbr--section) 0;
  border-bottom: 1px solid var(--gbr--brand--line);
}
.gbr-preuves__grille { gap: 24px; }
.gbr-preuves__grille > .wp-block-column { text-align: center; }
.gbr-preuve__chiffre {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--gbr--brand--accent);
  margin: 0;
}
.gbr-preuve__texte {
  font-size: .82rem;
  color: var(--gbr--brand--muted);
  margin: 8px auto 0;
  line-height: 1.45;
  max-width: 190px;
}

.gbr-histoire { margin: 0 auto !important; padding: var(--gbr--section) 0; text-align: center; }
.gbr-histoire h2 { margin: 0 0 28px; }
.gbr-histoire p { max-width: 700px; margin: 0 auto 18px; text-align: left; }
.gbr-histoire p:last-child { margin-bottom: 0; }

.gbr-cta {
  margin: 0 auto var(--gbr--section) !important;
  padding: 46px 40px;
  border-radius: var(--gbr--radius);
  background: var(--gbr--brand--surface);
  border: 1px solid var(--gbr--brand--line);
  box-shadow: var(--gbr--shadow-sm);
  text-align: center;
}
.gbr-cta h2 { margin: 0 0 14px; }
.gbr-cta p { max-width: 640px; margin: 0 auto; }
.gbr-cta p + p { margin-top: 26px; }

@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: 10px; }
  .gbr-univers-cartes > .wp-block-column { flex-basis: 50% !important; }
  .gbr-carte { padding: 20px 12px 18px; }
  .gbr-carte__logo { margin-bottom: 12px; }
  .gbr-carte__logo img { width: clamp(90px, 24vw, 130px); }
  .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: 56px 20px 52px; }
  .gbr-packs__grille { margin-top: 34px !important; gap: 10px; 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; }
  /* WordPress empile les colonnes sous 782px via un selecteur a trois classes :
     il faut au moins autant de specificite pour garder une grille 2x2. */
  .gbr-preuves .gbr-preuves__grille { flex-wrap: wrap !important; gap: 26px 16px; }
  .gbr-preuves .gbr-preuves__grille > .wp-block-column { flex-basis: calc(50% - 8px) !important; }
  .gbr-preuve__chiffre { font-size: 1.8rem; }
  .gbr-cta { padding: 34px 24px; }
}