/* ==========================================================================
   Herbolistique Belgique - surcouche de thème
   Reprend intégralement la maquette FR puis applique les écarts graphiques :
   palette plus chaude, titres en Raleway casse normale, formes adoucies,
   accent terracotta et marqueurs belges.
   ========================================================================== */

/* base.css est chargé séparément par le thème (wp_enqueue_style). */

/* ------------------------------------------------------------- 1. palette */

:root {
  --green:        #097b35;   /* VERT HERBOLISTIQUE (charte) - aplats, boutons, titres */
  --green-hover:  #076128;
  --green-vif:    #097b35;   /* un seul vert signature dans la charte */
  --green-dark:   #05401f;
  --green-pale:   #e6f0e9;   /* tint clair du vert charte, pour fonds/encarts */
  --green-pale-2: #cfe1d4;

  --accent:       #e07e5a;   /* orange Gemmo (charte) : états texte-sur-clair (filtres, points…) */
  --accent-pale:  #f9ece5;
  --yellow:       #fbba33;   /* JAUNE HERBOLISTIQUE (charte) : badges promo, étoiles */

  --ink:          #1f2420;
  --ink-2:        #2b322c;
  --grey:         #63685f;
  --grey-2:       #a9a79f;

  --line:         #e2ddd2;
  --line-2:       #ece7dd;

  /* Plafond de la colonne d'un article ou d'une ressource.
     68 rem = 1088 px, soit 988 px de texte : la largeur d'origine, que le
     client prefere. Tout passe par cette seule variable - la porter a 1440px
     redonne la pleine largeur, du fil d'Ariane au dernier paragraphe, sans
     toucher a une autre ligne. */
  --article-large: 68rem;

  --paper:        #faf8f4;   /* crème */
  --bg-soft:      #f3efe8;
  --bg-card:      #f1ede6;   /* vignettes produit : neutre chaud */

  --radius:       10px;
  --radius-lg:    16px;

  /* ORANGE DES TITRES EDITORIAUX.

     Le client demande le H1 « en orange de la charte » sans donner de
     reference : on reprend l'orange Gemmo, seul orange de la palette. Le jeton
     est distinct d'`--accent` pour qu'une correction de la teinte des titres ne
     deplace pas les filtres, les pastilles et les etats de survol qui la
     partagent aujourd'hui.

     AUCUN TITRE NE LE PORTE AUJOURD'HUI. Le client avait demande un H1 orange ;
     l'essai en situation a montre que la teinte ne tient pas sur un titre de
     38 px - elle passe du reperage au criard. Arbitrage de Frederic, le
     25 septembre 2026 : toute la serie reste a l'encre. Le jeton subsiste pour
     ne pas perdre la reference si la question revient. */
  --orange-titre: var(--accent);

  /* ECHELLE DES TITRES EDITORIAUX.

     Une seule suite de crans, de pas constant (environ 1,14), calee sur les
     deux valeurs qui existaient deja et qui ne bougent pas : le corps de texte
     a 15,5 px et le H2 a 26 px. Le H4 tombe alors a deux crans au-dessus du
     paragraphe et a deux crans sous le H2, comme demande, et le H3 occupe le
     cran restant entre les deux.

     Le H1 sort de la suite : il ouvre la page et doit se detacher du premier
     intertitre, pas le prolonger. */
  --titre-1: 38px;
  --titre-2: 26px;
  --titre-3: 23px;
  --titre-4: 20px;
}

/* Sur mobile la colonne de lecture tombe a un peu plus de 300 px : a 38 px, un
   H1 de sept mots occupe cinq lignes et repousse le premier paragraphe sous la
   ligne de flottaison. La suite garde son pas, elle est seulement recalee d'un
   cran vers le bas - un seul endroit a corriger, les regles n'en savent rien. */
@media (max-width: 860px) {
  :root {
    --titre-1: 30px;
    --titre-2: 22px;
    --titre-3: 20px;
    --titre-4: 18px;
  }
}

body { background: var(--paper); }

/* LES ARTICLES SONT SUR BLANC, pas sur le crème du site.

   Le client illustre ses articles de photos détourées sur fond blanc : posées
   sur le crème `--paper`, chacune dessine un rectangle plus clair autour du
   sujet. Le blanc les fait disparaître dans la page.

   Seules les pages d'article changent : le reste du site garde son crème, qui
   fait respirer les grilles de produits. Les bandes de couleur des sections
   (`band-soft`, `band-green`, `band-forest`) restent ce qu'elles sont — une
   photo détourée posée dans une bande colorée se verra toujours, c'est au
   rédacteur de ne pas l'y mettre. */
body.single-post,
body.single-resource { background: #fff; }

/* TOUTE LA BIBLIOTHEQUE SUR FOND BLANC, pas seulement la fiche d'une
   ressource. Les cartes sont posees en `#fffdfa` sur le creme du site : l'ecart
   entre les deux est de trois points par canal, les cartes se devinaient a
   peine. Sur fond blanc, leur filet et leur teinte ressortent.

   Trois ecrans, trois classes - la page « Bibliotheque » qui porte le gabarit
   `tpl-resource.php`, l'archive d'une categorie, et l'archive du type lui-meme.
   Relevees avec `get_body_class()` plutot que devinees. */
body.page-template-tpl-resource,
body.tax-typecategory,
body.post-type-archive-resource { background: #fff; }

/* LE RYTHME D'UN ARTICLE N'EST PAS CELUI D'UNE PAGE.

   La migration a produit UNE SECTION PAR LIGNE du constructeur ACF : un article
   de quinze lignes devient quinze `<section>` empilées. Chacune portant les
   80 px de marge haute et basse des pages éditoriales, deux lignes consécutives
   se retrouvaient séparées de 160 px — un titre isolé flottait au milieu du
   vide. Sur une page « RSE », qui compte six sections longues, ces 80 px sont
   justes ; sur un article, ils disloquent le texte.

   UNE SEULE COLONNE DE LECTURE, AUSSI. Les sections alternaient entre 1412 et
   1088 px selon l'ancien indicateur `is_full` : les titres ne commençaient donc
   pas tous au même endroit, et un sur deux paraissait rentré. */
body.single-post .wp-block-herbolistique-section,
body.single-resource .wp-block-herbolistique-section {
  padding-top: 0;
  padding-bottom: 34px;
}

/* Une bande de couleur a besoin de respirer : elle marque une rupture. */
body.single-post .wp-block-herbolistique-section[class*="band-"],
body.single-resource .wp-block-herbolistique-section[class*="band-"] {
  padding-top: 52px;
  padding-bottom: 52px;
}

/* LA COLONNE D'UN ARTICLE VA JUSQU'AU BORD DU MENU.

   Elle tenait dans 68 rem, soit 988 px de texte a x=226, alors que le logo
   commence a x=40 : l'article paraissait etroit sous un en-tete pleine
   largeur. Le client a tranche pour l'alignement sur le menu - 40 px de marge
   de chaque cote, exactement ce que pose `.header .container.header-inner`.

   ESSAYEE PLEINE LARGEUR, PUIS REVENUE. Portee jusqu'au bord du menu, la
   colonne donnait 1360 px de texte : lisible sur la capture, beaucoup moins a
   la lecture, et sans limite haute un ecran de 2560 px l'etalait en entier.
   Le client prefere la mesure d'origine. La largeur ne se decide plus qu'a un
   seul endroit, `--article-large`, et l'essai est donc a un caractere pres :
   `1440px` redonne la pleine largeur, `68rem` la colonne de lecture.

   L'en-tete, lui, reste pleine largeur quoi qu'il arrive - c'est une barre de
   navigation, pas un texte. */
body.single-post .wp-block-herbolistique-section > .container,
body.single-resource .wp-block-herbolistique-section > .container {
  max-width: var(--article-large);
}

/* L'EN-TETE SUIT LA MEME COLONNE QUE LE CORPS.

   `.article` plafonne a 50rem, soit 800 px : le titre, la ligne de contexte et
   le visuel commencaient plus a droite que le premier paragraphe et
   finissaient plus tot. On aligne l'en-tete SUR le corps, et non l'inverse :
   le corps represente la quasi-totalite de la page. */
body.single-post .article,
body.single-resource .article { max-width: none; }
body.single-post section.tight > .container,
body.single-resource section.tight > .container { max-width: var(--article-large); }

/* LA LIGNE DE CONTEXTE APPARTIENT A L'ARTICLE, PAS AU FIL D'ARIANE.

   Deux regles se cumulaient contre elle. `div:has(> .breadcrumb) + section`
   annule le remplissage haut de la section qui suit le fil, et
   `.article .meta:last-child` annule son retrait bas depuis que le titre passe
   en `.sr-only` sur les articles a banniere. Resultat mesure sur « Libido en
   berne » : 12 px au-dessus, 48 px au-dessous. La date se lisait comme une
   suite du fil d'Ariane, et flottait loin du visuel qu'elle date.

   On inverse le rapport : de l'air sous le fil, et la ligne posee juste
   au-dessus de la banniere. */
body.single-post div:has(> .breadcrumb) + section.tight {
  padding-top: 24px;
  padding-bottom: 26px;
}

/* Et le fil d'Ariane suit la meme colonne. Son enveloppe est un `.container`
   plein (1312 px), alors que tout le reste de l'article tient dans 68 rem :
   il commencait 162 px a gauche du texte et de la banniere. Meme raison que
   pour `.article` juste au-dessus - c'est le corps qui fixe la colonne. */
body.single-post div.container:has(> .breadcrumb),
body.single-resource div.container:has(> .breadcrumb) { max-width: var(--article-large); }


.header { background: #fffdfa; border-bottom-color: var(--line-2); }
.header .logo { flex: none; }
.header .logo img { width: 225px; }        /* logo agrandi (+15 %) */
.header-inner { gap: 24px; }

/* Bandeau promo : typo plus discrète */
.promo { font-size: 13px; padding: 9px 20px; }

/* Entrées de navigation un cran plus petites */
/* UN `ul` GARDE LE RETRAIT DU NAVIGATEUR. 40 px a gauche, jamais remis a zero :
   le menu paraissait decentre de 20 px alors que sa boite etait exactement sur
   l'axe de la page, et ces 40 px manquaient au neerlandais. */
.mainnav { gap: 22px; margin: 0; padding: 0; list-style: none; }
.mainnav a { font-size: 14.5px; letter-spacing: .02em; font-weight: 500; }

/* L'EN-TETE PREND TOUTE LA LARGEUR DE L'ECRAN.

   Le reste du site est calé sur une colonne de 1412 px, et c'est juste : un
   texte ou une grille de produits ne se lisent pas mieux étalés sur 1900 px.
   Une barre de navigation, si — elle n'a pas de contenu à mesurer, seulement
   des repères à espacer. L'y enfermer coûtait 250 px sur un écran de 1920,
   précisément la place qui manquait au menu néerlandais.

   Le retrait de 40 px remplace la marge automatique : les entrées ne collent
   pas au bord, le logo et les icônes restent alignés sur le regard. Au-dessous
   de 1200 px le menu burger prend le relais et retrouve le retrait de 24 px du
   reste du site. */
.header .container.header-inner {
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 1200px) {
  .header .container.header-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* LE MENU EST CENTRE ENTRE LE LOGO ET LES ICONES.

   Ce n'est PAS la meme chose que centre sur l'axe de la page, et c'est bien le
   centrage entre les deux qui se voit. Premiere version : zones laterales de
   largeur egale, menu sur l'axe. Mesure du rendu : 54 px d'ecart a gauche,
   24 a droite. Le logo mesure 225 px dans une zone de 255 et s'y aligne a
   gauche ; les 30 px de zone vide derriere lui s'ajoutent a l'ecart, et l'oeil
   lit un menu pousse vers la droite.

   Les zones epousent donc leur contenu, et la barre occupe tout l'espace entre
   elles. Son contenu se pose au milieu : les deux ecarts sont egaux par
   construction, a toutes les largeurs. */
@media (min-width: 1201px) {
  /* Elles ne se tassent pas non plus : une marque ne retrecit pas pour faire
     de la place a un menu. Mesure sans cette garde : le logo tombait a 108 px
     en neerlandais. */
  .header .container.header-inner > .logo,
  .header .container.header-inner > .header-icons { flex: 0 0 auto; }

  .mainnav {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* LES ENTREES NE RETRECISSENT PAS. Par defaut un enfant de flex accepte de
     passer sous la largeur de son contenu ; le texte, en `nowrap`, sort alors
     de sa case et vient se poser SOUS le selecteur de langue, sans que rien ne
     deborde au sens du document. Un recouvrement silencieux est pire qu'une
     barre de defilement : on ne le voit qu'a l'oeil, et seulement en
     neerlandais. */
  .mainnav > li { flex: 0 0 auto; }
}

/* LE NEERLANDAIS SE RESSERRE POUR TENIR SUR UN ECRAN DE 1440.

   Deux intitules font tout l'ecart avec le francais :
   « GETROUWHEIDSPROGRAMMA » demande 207 px contre 173 pour « PROGRAMME DE
   FIDELITE », et « DE ESSENTIELE PRODUCTEN » 189 px contre 105 pour « LES
   ESSENTIELS ». Mesure a 1440 px : le neerlandais reclame 991 px, il en reste
   916 une fois le logo et les icones servis - 76 px de trop.

   Le client a choisi de ne pas toucher aux libelles. On recupere donc les
   pixels ailleurs, en trois retouches qui ne portent QUE sur le neerlandais :
   l'ecart entre entrees, la taille du texte, la largeur du logo.

   LES VALEURS SONT CELLES QUI TIENNENT VRAIMENT, pas celles d'un calcul. Un
   premier essai a 13,5 px et 16 px d'ecart ne rendait que 21 px sur les 76
   attendus : la reduction de police porte sur le texte seul, pas sur les
   chevrons ni sur les ecarts. Mesure apres coup a 1440 px : 927 px demandes
   pour 945 disponibles.

   CES REGLES PASSENT AVANT LE BLOC BURGER, et non apres : elles ont la meme
   specificite que les siennes. En dessous de 1440 px c'est le burger qui doit
   l'emporter, avec son logo de 150 px - c'est l'ordre de la source qui le
   decide. */
html[lang^="nl"] .mainnav { gap: 12px; }
html[lang^="nl"] .mainnav a { font-size: 13px; }
html[lang^="nl"] .header .logo img { width: 195px; }

/* ET LES ICONES AUSSI. Mesure sur le staging, polices reelles : la barre
   neerlandaise debordait de 12 px a 1440 px, le compteur du panier finissant a
   1452. Mes mesures locales annoncaient 24 px de marge - elles portaient sur
   l'ecart entre le menu et les icones, pas sur le bord de la page, et cet
   ecart restait juste pendant que les icones, elles, sortaient du conteneur.
   Avec 10 px entre elles, leur bord droit tombe exactement sur la marge visee,
   a 1440, 1500, 1600 et 1920 px. */
html[lang^="nl"] .header-icons { gap: 10px; }

/* En dessous de 1440 px, la compression ne suffit plus : retour au burger. */
@media (max-width: 1439px) {
  html[lang^="nl"] .mainnav { display: none; }
  html[lang^="nl"] .header-inner { position: relative; justify-content: space-between; gap: 0; }
  html[lang^="nl"] .hdr-mobile-left { display: flex; }
  html[lang^="nl"] .header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 0; }
  html[lang^="nl"] .header .logo img { width: 150px; }
  html[lang^="nl"] .header-icons { gap: 18px; min-width: 0; }
  html[lang^="nl"] .burger { display: block; font-size: 24px; }
}

/* LA BARRE SE RESSERRE AVANT DE DEBORDER.
   Les intitulés néerlandais sont bien plus longs que les français —
   « GETROUWHEIDSPROGRAMMA » contre « PROGRAMME DE FIDÉLITÉ » — et l'en-tête
   sortait de l'écran entre 1200 et 1550 px, c'est-à-dire sur la plupart des
   portables : 202 px de débordement en NL à 1280, 31 px en FR.

   Deux paliers, chacun mesuré sur le menu néerlandais, qui est le plus long.
   En dessous de 1200 px c'est le menu burger qui prend le relais. */
@media (max-width: 1500px) {
  .mainnav { gap: 14px; }
  .mainnav a { font-size: 14px; }
}

/* AU PAS LE PLUS ETROIT, PAS D'AUGMENTATION. Entre 1200 et 1340 px il reste
   714 px pour un menu francais qui en demande 819 a 13 px : les deux points
   gagnes ailleurs ne rentrent pas ici, et descendre plus bas ne se lit plus.
   On garde donc la taille d'origine sur cette seule tranche. */
@media (max-width: 1340px) {
  .mainnav { gap: 8px; }
  .mainnav a { font-size: 11px; }
}
.band-soft { background: var(--bg-soft); }
.band-green { background: var(--green-pale); }

/* ---------------------------------------------------- 2. typographie */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--raleway);
  letter-spacing: -0.015em;
}

.page-title,
.pdp h1,
.article h1,
.hero-editorial h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-title { font-size: 42px; }
.pdp h1 { font-size: 40px; }

/* TITRE D'ARTICLE : LE H1 DE LA SERIE EDITORIALE.

   Sur un article, le H1 n'est pas dans le corps du texte, il est pose par le
   gabarit au-dessus du chapeau. C'est pourtant le seul H1 de la page : s'il
   restait noir, la couleur demandee ne se verrait nulle part.

   La portee est volontairement etroite - `body.single-post` et la classe
   `.article`, qui n'existe que sur le gabarit d'article. La boutique, le
   tunnel, l'espace client et l'en-tete n'ont aucun des deux.

   `.page-title` n'est PAS repris : la meme classe habille le panier, le
   paiement, le compte et la boutique.

   `:not(.sr-only)` : quand l'article ouvre sur une banniere qui porte deja son
   titre en pixels, le gabarit ne garde le h1 que pour le document. Un titre
   hors de l'ecran n'a ni taille ni couleur a recevoir. */
body.single-post .article h1:not(.sr-only) {
  font-size: var(--titre-1);
}

/* Titres de section : casse normale, seconde ligne en vert vif */
.section-title {
  text-transform: none;
  font-family: var(--raleway);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.025em;
  line-height: 1.16;
  margin-bottom: 44px;
}

.section-title > span:last-child:not(.arw),
.section-title span span { color: var(--green-vif); }

/* L'UI garde Poppins : navigation, prix, boutons, chiffres */

/* --------------------------------------------------------- 2 bis. hero */

.hero {
  position: relative;
  height: 540px;
  max-height: none;
  overflow: hidden;
}

.hero > img { height: 100%; object-fit: cover; object-position: 30% center; }

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 34%, rgba(11, 40, 24, .62) 78%);
}

.hero .hero-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  z-index: 2;
}

.hero .hero-copy { max-width: 520px; }
.hero h1 { font-family: var(--raleway); font-weight: 700; font-size: 44px; letter-spacing: -0.03em; }
.hero p { font-size: 16px; line-height: 1.55; }
.hero .dots { z-index: 3; }

@media (max-width: 980px) {
  .hero { height: 440px; }
  .hero::after { background: linear-gradient(0deg, rgba(11,40,24,.72) 20%, rgba(11,40,24,.15) 70%); }
  .hero .hero-copy { max-width: none; text-align: left; }
  .hero h1 { font-size: 30px; }
  /* logo centré en absolu (voir base) - le thème force 225px hors mobile */
  .header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .header .logo img { width: 150px; }
}

/* ------------------------------------------------------- 3. formes */

.chip, .tool, .alpha a { border-radius: 999px; }
.chip { padding: 9px 20px; }
.tool { padding: 12px 24px; }

.megamenu { border-radius: 0 0 18px 18px; }
.megamenu.mini { border-radius: 18px; }

/* Vignettes du méga-menu : format un peu plus haut (l'image respire au lieu
   d'être rognée en bandeau), et légende en dégradé progressif plutôt qu'en
   aplat gris qui semblait couper l'image. */
.tile { display: block; border-radius: 12px; aspect-ratio: 3 / 2; }
/* Image en position absolue : elle remplit tout le bloc quel que soit le
   mode d'affichage du conteneur (le <a> était centré en flex, d'où le vide). */
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .cap {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(11, 40, 24, .82) 12%, rgba(11, 40, 24, .42) 46%, transparent 82%);
}

/* Rayon symétrique et discret sur les visuels de besoin et de gamme : un cran
   au-dessus des vignettes produit (14 px), sans devenir un motif en soi. */
.need-card,
.gamme {
  border-radius: 24px;
  overflow: hidden;
}

/* Légende en dégradé progressif (comme les vignettes du menu) : plus d'aplat
   gris qui semble poser un bloc sur le bas de l'image. */
.need-card .cap,
.gamme .cap {
  padding: 46px 26px 24px;
  background: linear-gradient(to top, rgba(11, 40, 24, .84) 10%, rgba(11, 40, 24, .40) 48%, transparent 84%);
}

.hero-editorial { border-radius: 0 0 28px 28px; overflow: hidden; }

.split img,
.article img,
.post .ph { border-radius: 14px; }

/* --------------------------------------------------- 4. carte produit */

/* Sur fond crème, un aplat chaud se confondrait avec la section : la vignette
   est une surface claire cernée d'un filet, pour que le packshot ait un support. */
.product .thumb {
  background: #fffdfa;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  transition: box-shadow .25s ease, border-color .25s ease;
}

/* Les packshots de cette variante sont détourés (marge blanche d'origine
   supprimée), le flacon remplit donc réellement sa vignette. */
.product .thumb img { width: 76%; }
.pdp .gallery .main img { width: 56%; }
.cart-line .ph img { width: 62%; }
.product:hover .thumb { border-color: var(--line); }

.product {
  transition: transform .25s ease;
}

.product:hover { transform: translateY(-3px); }
.product:hover .thumb { box-shadow: 0 12px 26px rgba(31, 36, 32, .10); }
.product:hover h3 { color: var(--green-vif); }

/* Badge promo : jaune Herbolistique (charte) + texte foncé - le blanc sur jaune
   manque de contraste. */
.product .flag {
  background: var(--yellow);
  color: var(--green-dark);
  border-radius: 999px;
  padding: 5px 12px;
  letter-spacing: .02em;
  font-weight: 700;
}

.stars { color: var(--yellow); }
.stars .off { color: #e4ddcf; }

.price { font-weight: 600; }
.price .old { color: var(--grey-2); }

.product .benefits li::before {
  border-left-color: var(--green-vif);
  border-bottom-color: var(--green-vif);
}

/* ------------------------------------------------------- 5. boutons */

.btn {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
}

.btn-lg { padding: 12px 28px; font-size: 14px; }

.btn-outline:hover { background: var(--green); border-color: var(--green); }

/* ------------------------------------------------- 6. détails & états */

.chip.on, .chip:hover { border-color: var(--accent); color: var(--accent); }
.alpha a.on { background: var(--accent); border-color: var(--accent); }
.pagination a.on { background: var(--green); border-color: var(--green); }

.facets input { accent-color: var(--accent); }
.radio-row input, .field input[type="checkbox"] { accent-color: var(--accent); }

.panel, .review, .step-card, .account-card, .facets { background: #fffdfa; }

/* Même logique pour les autres surfaces qui portent un packshot */
.pdp .gallery .main,
.cart-line .ph {
  background: #fffdfa;
  border: 1px solid var(--line-2);
  border-radius: 14px;
}
/* Les encarts d'engagement se lisent comme des CARTES, pas comme une alerte.
   Le rose pale les faisait ressortir plus fort que le texte qu'ils portent, et
   sur la bande `band-soft` la teinte virait au rose sale. Meme traitement que
   `.panel` : blanc creme, et un filet pour que la carte tienne aussi bien sur
   la bande beige que sur un fond blanc, ou un aplat seul serait invisible. */
.perk {
  background: #fffdfa;
  border: 1px solid var(--line-2);
}

/* Le bloc « Cure : 3 produits + 1 offert » est retiré de la fiche produit sur
   cette variante. Les cures restent accessibles via la page Offres et le
   cross-sell « Optimisez votre cure avec… ». */
.cure-box { display: none; }

.progress-bar .fill { background: var(--accent); }
.progress-bar .step.done .dot { box-shadow: 0 0 0 2px var(--accent) inset; }

.dots-nav i.on { background: var(--accent); }
.hero .dots i.on { background: #fff; }

/* Sélecteur de besoin = navigation : état actif en vert de marque, pas en accent promo. */
.showcase .cue.on { color: var(--green); }
.showcase .cue.on .rule { background: var(--green); }
.showcase .cue:hover { color: var(--green); }

.accordion .a a { color: var(--accent); }
.contact-side { background: var(--green-pale); }
/* Exclure les boutons : sinon leur texte blanc devient vert sur fond vert. */
.contact-side a:not(.btn) { color: var(--green); }

section { padding: 80px 0; }
section.tight { padding: 48px 0; }

/* ------------------------------- 7. bouton d'achat flottant (fiche produit) */

.buy-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--green);
  color: #fff;
  border-radius: 16px;          /* même échelle que les autres surfaces du thème */
  padding: 10px 10px 10px 22px;
  box-shadow: 0 14px 34px rgba(9, 123, 53, .32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transition: opacity .25s ease, transform .25s ease, visibility .25s,
              background .15s ease;
}

.buy-float.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.buy-float .qty-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 4px;
}

.buy-float .qty-mini button {
  width: 28px; height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-family: var(--poppins);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}

.buy-float .qty-mini button:hover { background: rgba(255, 255, 255, .22); }

.buy-float .qty-mini b {
  min-width: 20px;
  text-align: center;
  font-family: var(--poppins);
  font-size: 15px;
  font-weight: 600;
}

.buy-float .name {
  font-family: var(--raleway);
  font-size: 15px;
  font-weight: 600;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy-float .amt {
  font-family: var(--poppins);
  font-size: 16px;
  font-weight: 600;
}

.buy-float .lbl {
  font-family: var(--poppins);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  background: #fff;
  padding: 11px 22px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.buy-float .lbl:hover { background: var(--accent); color: #fff; }

@media (max-width: 720px) {
  .buy-float {
    left: 14px;
    right: 14px;
    bottom: 14px;
    justify-content: space-between;
    padding: 10px 10px 10px 20px;
  }
  .buy-float .name { display: none; }
}

/* -------------------------------------------- 8. marqueurs belges */

.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--poppins);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  margin-right: 4px;
}

.lang a { color: var(--grey-2); padding: 2px 1px; }
/* Langue active soulignée avec l'orange du brandbook (Gemmo #E07E5A). */
.lang a.on { color: var(--ink); border-bottom: 2px solid var(--accent); }
.lang a:hover { color: var(--ink); }
.lang i { color: var(--line); font-style: normal; }

/* Footer belge : bloc coordonnées + « Nous contacter » (3 pays) */
.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 40px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.footer-top .flogo { width: 210px; margin-bottom: 20px; }
.footer-top .fname { font-family: var(--poppins); font-weight: 600; font-size: 16px; margin: 0 0 12px; }
.footer-top .fcoords p { font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; opacity: .95; }
.footer-top .fcoords p strong { font-weight: 600; }
.fsocial { display: flex; gap: 14px; margin-top: 18px; }
.fsocial a .ic { width: 22px; height: 22px; }

.fcontact h4 { font-family: var(--raleway); font-size: 18px; font-weight: 600; margin: 0 0 20px; }
.fc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fc-grid .fc-c { display: block; font-family: var(--poppins); font-weight: 600; font-size: 15px; margin-bottom: 10px; }
/* TOUS LES PAYS SE VALENT. Les marches principaux etaient d'abord distingues
   par l'or de la charte, puis par une opacite pleine. Les deux sont tombes :
   le client ne veut aucune hierarchie entre ses coordonnees, seul le libelle
   du pays les distingue. Le champ qui portait cette distinction a disparu
   avec elle, voir `Acf\FooterOptions`. */
.fc-grid a { display: block; font-size: 14.5px; margin-bottom: 6px; }
.fc-grid a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .fc-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Deux traits d'affilee.

   `.footer-top` ferme par un filet, `.footer-services` en ouvre un autre. La
   rangee de colonnes se glissait entre les deux et les justifiait ; sans menu
   rattache elle disparait, et les deux filets se retrouvent l'un sous l'autre
   avec du vide entre eux.

   Le selecteur d'adjacence ne retire le second QUE dans ce cas : le jour ou des
   menus de pied de page sont rattaches, la rangee revient et les deux traits
   reprennent leur role. */
.footer-top + .footer-services {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.footer-services {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: 13.5px;
}

.footer-services b {
  font-family: var(--poppins);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}

.footer-services span {
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 4px 14px;
}

.footer-bottom { border-top: 0; margin-top: 22px; }

@media (max-width: 980px) {
  .lang { display: none; }
  .section-title { font-size: 26px; }
  .page-title { font-size: 32px; }
  section { padding: 52px 0; }
}