/* ==========================================================================
   Maquette Herbolistique - reconstitution fidèle de la charte du site
   Couleurs, typographies et proportions relevées sur www.herbolistique.com
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&display=swap');

:root {
  --green: #1c8c47;
  --green-hover: #167039;
  --green-dark: #11542b;
  --green-mid: #329c5b;
  --green-pale: #e8f3ed;
  --green-pale-2: #d2e8da;
  --ink: #242424;
  --ink-2: #313235;
  --grey: #666666;
  --grey-2: #b2b2b2;
  --grey-3: #a7a7a7;
  --line: #e3e3e3;
  --line-2: #e9e9e9;
  --bg-soft: #f9f9f9;
  --bg-card: #f5f5f5;
  --beige: #faf8f7;
  --yellow: #ffce43;
  --orange: #f8aa2f;
  --yellow-pale: #fff3d1;
  --radius: 0.25rem;
  --radius-lg: 0.75rem;
  --container: 88.25rem;
  --poppins: "Poppins", -apple-system, sans-serif;
  --raleway: "Raleway", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--raleway);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;

  /* LE PIED DE PAGE RESTE EN BAS SUR LES PAGES COURTES. Sur « Contact », qui ne
     porte qu'un titre, il s'arretait a 238 px du bas de l'ecran et laissait une
     bande blanche sous le vert. `dvh` plutot que `vh` : sur mobile, `vh` compte
     la barre d'adresse repliee et cree un debordement vertical d'une centaine
     de pixels. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* La zone de contenu absorbe la place restante. */
body > main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { font-family: var(--poppins); margin: 0; }

a { color: inherit; text-decoration: none; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 50px;
}

.container-sm { max-width: 68rem; }

/* ---------------------------------------------------------------- header -- */

.promo {
  background: var(--green);
  color: #fff;
  text-align: center;
  font-size: 15px;
  padding: 11px 20px;
  letter-spacing: .01em;
}

/* Le bandeau peut renvoyer vers une page. Souligne par defaut : sur un aplat
   vert, la seule couleur ne suffirait pas a le signaler comme cliquable. */
.promo a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo a:hover { text-decoration: none; }

.header {
  background: #fff;
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* L'EN-TETE SE RESSERRE AVANT DE DEBORDER.
   Les intitules neerlandais sont bien plus longs que les francais -
   « GETROUWHEIDSPROGRAMMA » contre « PROGRAMME DE FIDÉLITÉ » - et la barre
   sortait de l'ecran entre 1200 et 1550 px, c'est-a-dire sur la plupart des
   portables. Mesure : 202 px de debordement en NL a 1280, 31 px en FR.
   Les espacements et le corps du texte suivent donc la largeur, plutot que
   d'etre figes pour la langue la plus courte. */
.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.7vw, 30px);
  height: 74px;
}

.header .logo img { width: 172px; }

.mainnav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  /* PAS DE `min-width: 0` ICI. Il laisse la barre retrecir sous la largeur de
     son contenu : le document ne deborde plus, mais les dernieres entrees
     passent SOUS les icones de compte et de panier. Mesure : 220 px de
     chevauchement en NL a 1280. Un debordement visible vaut mieux qu'un
     recouvrement silencieux. */
}

/* `static` : le panneau se positionne par rapport au <header>, pas à l'onglet,
   ce qui permet de le caler sur la grille du site et d'éviter tout débordement. */
.mainnav > li { list-style: none; position: static; }

.mainnav a {
  font-family: var(--poppins);
  font-size: 13.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 26px 0;
  white-space: nowrap;
}

.mainnav a:hover { color: var(--green); }

.mainnav .caret {
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
}

.header-icons { display: flex; align-items: center; gap: 20px; }

.ic { width: 22px; height: 22px; display: block; flex: none; }

.header-icons .ic { opacity: .9; }

.header-icons .cart { position: relative; }

.header-icons .cart .count {
  position: absolute;
  top: -6px; right: -8px;
  background: var(--green);
  color: #fff;
  font-family: var(--poppins);
  font-size: 10px;
  font-weight: 600;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.burger { display: none; }

/* Icônes SVG outline (remplacent les emojis) : taille = font-size du parent. */
.svic { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; }
.scope .ic, .account-card .ic, .ing .ph, .nolist .x { color: var(--green); }
.tool .svic, .facets h4 .svic { color: var(--ink-2); }

/* Groupe gauche mobile (burger + recherche) : masqué en desktop. */
.hdr-mobile-left { display: none; align-items: center; gap: 16px; }
.hdr-mobile-left .ic { width: 24px; height: 24px; }
.hdr-mobile-left .burger { font-size: 24px; cursor: pointer; }

/* ------------------------------------------------------------- megamenu -- */

.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: min(1180px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 30px 34px;
  z-index: 45;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.megamenu.mini {
  width: calc(var(--cols) * 250px + (var(--cols) - 1) * 18px + 68px);
  max-width: calc(100vw - 32px);
  border-radius: var(--radius-lg);
}

.mainnav li:hover .megamenu,
.mainnav li:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.megamenu .cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 30px; }

/* Le titre herite sinon la hauteur de ligne du corps, 1,5, qui lui ajoute un
   demi-interligne au dessus et au dessous. Sur un intitule d'une seule ligne
   c'est de l'air perdu, et le premier sous-besoin paraissait detache de sa
   famille. */
.megamenu h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--green);
  margin-bottom: 4px;
}

/* Le titre de famille est un lien. Il garde l'allure d'un titre : c'est le
   soulignement au survol qui annonce qu'on peut cliquer, comme sur les
   sous-besoins en dessous. */
.megamenu h4 a { color: inherit; }
.megamenu h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.megamenu ul { margin: 0; padding: 0; }
.megamenu li { list-style: none; }

.megamenu li a {
  font-family: var(--raleway);
  font-size: 14.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey);
  padding: 4px 0;
  display: block;
}

/* Le premier lien colle au titre : son rembourrage haut s'ajoutait a la marge
   du titre, et doublait l'ecart par rapport a celui qui separe deux
   sous-besoins. */
.megamenu li:first-child a { padding-top: 0; }

.megamenu li a:hover { color: var(--green); }
.megamenu li a.all { font-weight: 600; color: var(--ink); }

.megamenu .tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 18px; }

/* Le fond vert sert de repli : la legende est en blanc sur un degrade sombre,
   et sans image elle se retrouverait en blanc sur le panneau blanc, donc
   invisible. Une page sans image mise en avant reste ainsi lisible. */
.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--green-dark);
}

.tile img { width: 100%; height: 100%; object-fit: cover; }

.tile .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: #fff;
}

.tile .cap b { font-family: var(--poppins); font-size: 14px; font-weight: 600; display: block; line-height: 1.25; }
.tile .cap span { font-size: 12px; text-decoration: underline; opacity: .9; }

/* --------------------------------------------------------------- titles -- */

.section-title {
  text-align: center;
  font-family: var(--poppins);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 40px;
}

/* Le vert ne s'applique qu'à la seconde ligne, pas au conteneur ni aux flèches. */
.section-title span { display: block; color: inherit; }
.section-title > span:last-child:not(.arw),
.section-title span span { color: var(--green); }

.section-title.with-arrows {
  display: flex; align-items: center; justify-content: center; gap: 28px;
}

.section-title .arw {
  font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1;
  font-family: var(--raleway);
}

.page-title {
  font-family: var(--poppins);
  font-weight: 700;
  font-size: 38px;
  text-align: center;
  margin: 34px 0 30px;
}

section { padding: 64px 0; }
section.tight { padding: 40px 0; }

/* Le fil d'Ariane apporte déjà de l'air : la section qui le suit réduit son
   padding haut pour ne pas doubler l'espace. */
div:has(> .breadcrumb) + section { padding-top: 0; }

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--poppins);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1.5px solid var(--green);
  cursor: pointer;
  transition: background .15s;
}

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

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-white { background: #fff; color: var(--green); border-color: #fff; }

.btn-block { display: block; width: 100%; text-align: center; }

.btn-lg { padding: 17px 40px; font-size: 14px; }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  display: block;
  overflow: hidden;
  max-height: 620px;
}

.hero > img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hero .hero-inner { position: relative; width: 100%; }

.hero .hero-copy { max-width: 560px; margin-left: auto; color: #fff; text-align: right; }

.hero h1 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.16;
  margin-bottom: 16px;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

.hero p { font-size: 17px; margin: 0 0 26px; text-shadow: 0 1px 10px rgba(0,0,0,.3); }

.hero .dots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; }
.hero .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); display: block; }
.hero .dots i.on { background: #fff; }

/* ------------------------------------------------------------- showcase -- */

.showcase { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: 10px; }

.showcase .side { display: grid; gap: 46px; }

.showcase .cue {
  font-family: var(--poppins);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 18px;
  cursor: pointer;
}

.showcase .side.left .cue { justify-content: flex-end; text-align: right; }

.showcase .cue .rule { flex: 1; height: 1px; background: var(--line); max-width: 120px; }
.showcase .cue:hover { color: var(--green); }
.showcase .cue.on { color: var(--green); }
.showcase .cue.on .rule { background: var(--green); }

.showcase .stage { position: relative; }
.showcase .stage img {
  width: 100%;
  border-radius: var(--radius);
  transition: opacity .28s ease, transform .28s ease;
}
.showcase .stage.swapping img { opacity: 0; transform: scale(.97); }

.showcase .cue { transition: color .18s; }
.showcase .cue .rule { transition: background .18s, max-width .28s ease; }
.showcase .cue.on .rule { max-width: 190px; }

/* -- version mobile (slider) : masquée en desktop, construite en JS ---------- */

.showcase-m { display: none; }

.showcase-m .track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.showcase-m .track::-webkit-scrollbar { display: none; }

/* Slide : titre au-dessus · image propre au centre · bouton en dessous */
.showcase-m .slide {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.showcase-m .s-title {
  font-family: var(--poppins);
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.showcase-m .s-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.showcase-m .s-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-m .s-cta {
  margin-top: 18px;
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--poppins);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 12px 28px;
  border-radius: var(--radius);
}

.showcase-m .sm-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.showcase-m .sm-nav button {
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.showcase-m .dots { display: flex; gap: 8px; }
.showcase-m .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-2); transition: background .2s; }
.showcase-m .dots i.on { background: var(--green); }

@media (max-width: 860px) {
  .showcase { display: none; }
  .showcase-m { display: block; }
}

/* ------------------------------------------------------- search overlay -- */

.search-panel {
  position: fixed;
  inset: 0 0 auto 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  z-index: 60;
  padding: 26px 0 30px;
  transform: translateY(-100%);
  transition: transform .28s ease;
}
.search-panel.open { transform: translateY(0); }

.search-panel .row { display: flex; align-items: center; gap: 18px; }
.search-panel .ic { width: 26px; height: 26px; color: var(--grey); }
.search-panel input {
  flex: 1;
  border: 0; border-bottom: 2px solid var(--line);
  padding: 12px 4px;
  font-family: var(--raleway); font-size: 22px; color: var(--ink);
  outline: none; background: transparent;
}
.search-panel input:focus { border-bottom-color: var(--green); }
.search-panel .close { font-size: 26px; color: var(--grey); cursor: pointer; line-height: 1; }

.search-panel .suggest { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search-panel .suggest b { font-family: var(--poppins); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--grey-2); margin-right: 6px; }

.scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.scrim.on { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- drawer -- */

.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(360px, 88vw);
  background: #fff;
  z-index: 70;
  transform: translateX(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
  padding: 22px 24px 40px;
}
.drawer.open { transform: translateX(0); }

.drawer .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.drawer .top img { width: 150px; }
.drawer .top .close { font-size: 26px; color: var(--grey); cursor: pointer; }

.drawer .lvl1 { border-bottom: 1px solid var(--line); }
.drawer .lvl1 > button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer;
  font-family: var(--poppins); font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
  padding: 16px 0; text-align: left;
}
.drawer .lvl1 > button .chev {
  width: 9px; height: 9px;
  border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink);
  transform: rotate(45deg); transition: transform .2s;
}
.drawer .lvl1.open > button .chev { transform: rotate(-135deg); }
.drawer .sub { display: none; padding: 0 0 16px 6px; }
.drawer .lvl1.open .sub { display: block; }
.drawer .sub a { display: block; padding: 7px 0; font-size: 14.5px; color: var(--grey); }
.drawer .sub a:hover { color: var(--green); }

.drawer .foot { margin-top: 26px; display: grid; gap: 10px; }

/* ------------------------------------------------------------- carousel -- */

.carousel { position: relative; }
.carousel .track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 26px) / 4);
  gap: 26px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track > * { scroll-snap-align: start; }

.carousel.per3 .track { grid-auto-columns: calc((100% - 2 * 26px) / 3); }

@media (max-width: 980px) { .carousel .track, .carousel.per3 .track { grid-auto-columns: calc((100% - 26px) / 2); } }
@media (max-width: 640px) { .carousel .track, .carousel.per3 .track { grid-auto-columns: 82%; } }

.section-title .arw { cursor: pointer; user-select: none; transition: color .15s; }
.section-title .arw:hover { color: var(--green); }

/* -------------------------------------------------------------- product -- */

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.product {
  display: flex;
  flex-direction: column;
}

.product .thumb {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.product .thumb img { width: 62%; height: auto; transition: transform .35s ease; }
.product:hover .thumb img { transform: scale(1.06); }
.product h3 { transition: color .15s; }
.product:hover h3 { color: var(--green); }

/* Le visuel et le texte portent chacun leur lien ; le second occupe toute la
   hauteur disponible pour que les prix s'alignent d'une carte a l'autre. */
.product-visuel { display: contents; }
.product-link { display: flex; flex-direction: column; flex: 1; color: inherit; }

/* Ajout au panier, pose sur la vignette comme dans la maquette.

   Au repos une pastille ronde, revelee au survol de la carte. Au clic, elle
   laisse place au bloc de commande, qui reste ouvert tant que le client n'a pas
   valide ou clique ailleurs. */
.product-buy, .product-buy-lien {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
.product:hover .product-buy,
.product:hover .product-buy-lien,
.product-buy:focus-within { opacity: 1; transform: translateY(0); }

/* Un bloc ouvert reste visible meme quand la souris a quitte la carte : le
   client vient d'y saisir une quantite, la faire disparaitre serait brutal. */
.product-buy.est-ouvert { opacity: 1; transform: translateY(0); }

.product-buy .pastille,
.product-buy-lien {
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.product-buy .pastille:hover,
.product-buy-lien:hover { background: var(--green); color: #fff; }
.product-buy .pastille svg,
.product-buy-lien svg { width: 17px; height: 17px; }

/* Bloc de commande : quantite et validation, sur une seule ligne. */
.product-buy .bloc {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 2px 0 4px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.product-buy .bloc button {
  width: 26px; height: 30px;
  border: 0;
  padding: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
}
.product-buy .bloc button:hover { color: var(--green); }
.product-buy .bloc input {
  width: 30px;
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.product-buy .bloc input::-webkit-outer-spin-button,
.product-buy .bloc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-buy .bloc input:focus { outline: none; }

.product-buy .valider {
  width: 30px; height: 30px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.product-buy .valider:hover { color: #fff; opacity: .88; }
.product-buy .valider svg { width: 15px; height: 15px; }

/* Confirmation breve : la pastille reprend sa place, en vert. */
.product-buy.est-ajoute .pastille { background: var(--green); color: #fff; }

/* Etats. Le bloc est ouvert dans le balisage : sans JavaScript, c'est lui que
   l'on voit, et le formulaire reste utilisable. `site.js` replie au chargement. */
.product-buy.est-replie .bloc { display: none; }
.product-buy:not(.est-replie) .pastille { display: none; }

.product .flag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--green);
  color: #fff;
  font-family: var(--poppins);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 2px;
}

.product h3 {
  font-family: var(--raleway);
  font-size: 17px;
  font-weight: 500;
  margin: 14px 0 8px;
}

.product .benefits { margin: 0 0 10px; padding: 0; list-style: none; }

.product .benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--grey);
  margin-bottom: 5px;
}

.product .benefits li::before {
  content: "";
  position: absolute;
  left: 2px; top: 5px;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--green);
  border-bottom: 1.6px solid var(--green);
  transform: rotate(-45deg);
}

.stars { color: var(--ink); font-size: 14px; letter-spacing: 1px; }
.stars .off { color: var(--grey-2); }

.price {
  font-family: var(--poppins);
  font-size: 17px;
  font-weight: 500;
  margin-top: auto;
}

.price .old,
.price del {
  color: var(--grey-2);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 15px;
}

.price .old { margin-left: 8px; }

/* WooCommerce rend un prix soldé en `<del>` suivi de `<ins>`. Le navigateur
   SOULIGNE `<ins>` : sur une carte produit, le prix courant prenait l'allure
   d'un lien. On le remet en texte, et on espace les deux montants. */
.price ins {
  text-decoration: none;
  margin-left: 8px;
}

/* ---------------------------------------------------------------- cards -- */

.needs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

/* Fond vert de repli, comme les vignettes du méga-menu : la légende est en
   blanc sur un dégradé sombre posé par-dessus l'image. Sans image mise en
   avant, elle serait blanche sur blanc, donc invisible. */
.need-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--green-dark);
}

.need-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.need-card:hover img, .gamme:hover img, .tile:hover img { transform: scale(1.06); }
.gamme img, .tile img { transition: transform .5s ease; }
.gamme, .tile { overflow: hidden; }

.need-card .cap {
  position: absolute; inset: auto 0 0 0;
  padding: 22px;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  color: #fff;
}

.need-card .cap b {
  font-family: var(--poppins);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.need-card .cap span { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; }

/* --------------------------------------------------------------- reviews -- */

.reviews { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center; }

.reviews .score { text-align: center; }
.reviews .score .big { font-family: var(--poppins); font-size: 40px; font-weight: 600; }
.reviews .score .big small { font-size: 18px; color: var(--grey); }
.reviews .score .meta { font-size: 12.5px; color: var(--grey); margin-top: 8px; line-height: 1.35; }

.reviews .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.review {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  min-height: 190px;
  display: flex; flex-direction: column;
}

.review .top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.review .top .val { font-family: var(--poppins); font-weight: 600; font-size: 16px; }
.review p { font-size: 14.5px; margin: 0 0 auto; }
.review .sig { font-size: 12.5px; color: var(--grey); margin-top: 16px; }

.dots-nav { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.dots-nav i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-2); display: block; }
.dots-nav i.on { background: var(--ink); }

/* ------------------------------------------------------------ split text -- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* UNE COLONNE NE DOIT PAS ETRE POUSSEE PAR SON CONTENU. Un element de grille a
   `min-width: auto` : il refuse de descendre sous la largeur intrinseque de ce
   qu'il contient. Une image de 446 px posee dans une colonne reduite a 342 px
   sur mobile elargissait donc la colonne, et la page debordait de 80 px alors
   meme que `img { max-width: 100% }` est en place - la regle s'applique a
   l'image, pas a la piste qui la porte. */
.split > * { min-width: 0; }
.split.narrow-left { grid-template-columns: 5fr 7fr; }
.split.top { align-items: start; }
.split.bottom { align-items: end; }
.split img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; }

.rte p { font-size: 15.5px; line-height: 1.62; margin: 0 0 16px; }
.rte strong { font-weight: 700; }
.rte ul { padding-left: 20px; }
.rte li { font-size: 15.5px; line-height: 1.6; margin-bottom: 7px; }

/* ------------------------------------------------------------- accordion -- */

.accordion { border-top: 1px solid var(--line); }

.accordion .item { border-bottom: 1px solid var(--line); }

.accordion .q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-family: var(--poppins);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

.accordion .q .chev {
  width: 11px; height: 11px;
  border-right: 1.8px solid var(--ink);
  border-bottom: 1.8px solid var(--ink);
  transform: rotate(45deg);
  flex: none;
  margin-right: 6px;
}

.accordion .a { padding: 0 4px 24px; max-width: 62rem; }
.accordion .a p { font-size: 15px; line-height: 1.62; margin: 0 0 12px; color: var(--grey); }
.accordion .a a { color: var(--green); font-weight: 600; }
.accordion .item:not(.open) .a { display: none; }
.accordion .item.open .q .chev { transform: rotate(-135deg); }

/* Incrustation video d'une ressource. `aspect-ratio` plutot que l'ancien
   bricolage a `padding-bottom` : le cadre garde sa proportion sans conteneur
   supplementaire, et se redimensionne avec la colonne de lecture. */
.resource-embed {
  aspect-ratio: 16 / 9;
  margin: 26px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
}

.resource-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.resource-action { margin: 26px 0 0; }

/* ----------------------------------------------------------- breadcrumb -- */

.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px;
  padding: 30px 0 12px;
  font-size: 14px;
  color: var(--grey);
}

.breadcrumb .sep { color: var(--grey-2); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .cur { color: var(--ink); }

/* --------------------------------------------------------------- filters -- */

.subcats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 34px; }

.chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 9px 18px;
  font-size: 15px;
  background: #fff;
  cursor: pointer;
}

.chip:hover, .chip.on { border-color: var(--green); color: var(--green); }

/* La barre passe a la ligne plutot que de deborder : sur mobile, « Filtrer »,
   le tri et la loupe ne tiennent pas cote a cote, et la pastille de tri sortait
   de l'ecran. */
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.tool {
  display: inline-flex; align-items: center; gap: 10px;
  /* Sans cela un element flex ne descend jamais sous la largeur de son
     contenu, et le `<select>` du tri impose la sienne. */
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 13px 22px;
  font-size: 15px;
  background: #fff;
  cursor: pointer;
}

.facets { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px; }
.facets .facet { border-bottom: 1px solid var(--line-2); padding: 18px 0; }
.facets .facet:last-child { border-bottom: 0; }
.facets h4 { font-family: var(--poppins); font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; }
.facets label { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--grey); padding: 6px 0; }
.facets input { accent-color: var(--green); }

/* `wrap` : la boutique compte 27 pages, et la rangee de numeros sortait de
   l'ecran sur telephone - 23 px de debordement horizontal mesures a 390 px.
   Elle passe desormais a la ligne plutot que de pousser le document. */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; }
.pagination a {
  min-width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--poppins); font-size: 14px;
}
.pagination a.on { background: var(--green); border-color: var(--green); color: #fff; }

/* ------------------------------------------------------------ pdp layout -- */

.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

.pdp .gallery .main {
  background: var(--bg-card);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pdp .gallery .main img { width: 58%; }
.pdp .gallery .zoom { position: absolute; right: 18px; bottom: 18px; font-size: 20px; color: var(--grey); }

.pdp h1 { font-size: 38px; font-weight: 700; margin-bottom: 14px; }

/* Reference et contenance, sous le nom du produit. Une ligne discrete : ce sont
   des reperes d'identification, pas un argument de vente. Le point median les
   separe sans ajouter de ponctuation quand l'une des deux manque. */
.pdp-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14.5px; color: var(--grey); margin: -6px 0 4px; }
.pdp-meta span + span::before { content: "·"; margin-right: 14px; color: var(--grey-2); }

/* Encadre « Le saviez-vous ». Meme fond pale que les cartes d'avantage : c'est
   une aparte, pas une rubrique de plus dans l'accordeon. */
.pdp-note { background: var(--accent-pale, var(--green-pale)); border-radius: var(--radius-lg); padding: 22px 24px; margin-top: 28px; }
.pdp-note h3 { font-family: var(--poppins); font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.pdp-note .rte p:last-child { margin-bottom: 0; }

.pdp .price-row { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 18px; }
.pdp .price-row .amount { font-family: var(--poppins); font-size: 27px; font-weight: 500; }
.pdp .price-row .ttc { font-size: 13px; color: var(--grey); }

.pdp .reassurance { display: grid; gap: 12px; margin-bottom: 22px; }
.pdp .reassurance div { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.pdp .reassurance b { color: var(--green); }
.pdp .reassurance .ico { width: 22px; text-align: center; opacity: .7; }

.qty-row { display: flex; gap: 14px; align-items: stretch; }

.qty {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
  font-family: var(--poppins);
}
.qty span { font-size: 20px; color: var(--grey); cursor: pointer; }

.qty-row .btn { flex: 1; text-align: center; font-size: 14px; }

.cure-box {
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative;
}
.cure-box .save {
  position: absolute; top: -13px; right: 18px;
  background: var(--yellow); color: var(--ink);
  font-family: var(--poppins); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 2px;
}
.cure-box b { font-family: var(--poppins); font-weight: 600; font-size: 15px; }
.cure-box .m { font-size: 13.5px; color: var(--grey); }

/* ----------------------------------------------------------------- cart -- */

.progress-bar { margin: 0 0 40px; }
.progress-bar .track { height: 5px; background: var(--line); border-radius: 3px; position: relative; margin: 34px 0 10px; }
.progress-bar .fill { position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--green); border-radius: 3px; }
.progress-bar .steps { display: flex; justify-content: space-between; }
.progress-bar .step { text-align: center; flex: 1; }
.progress-bar .step .dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--line) inset; margin: -22px auto 10px; }
.progress-bar .step.done .dot { box-shadow: 0 0 0 2px var(--green) inset; }
.progress-bar .step.done .dot { background: var(--green); }
.progress-bar .step b { display: block; font-family: var(--poppins); font-size: 14px; font-weight: 600; }
.progress-bar .step span { font-size: 13px; color: var(--grey); }

.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }

.cart-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-line .ph { background: var(--bg-card); border-radius: var(--radius); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.cart-line .ph img { width: 70%; }
.cart-line h4 { font-family: var(--raleway); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.cart-line .m { font-size: 13.5px; color: var(--grey); }
.cart-line .amt { font-family: var(--poppins); font-size: 17px; font-weight: 500; text-align: right; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.panel h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.panel .row { display: flex; justify-content: space-between; font-size: 15px; padding: 8px 0; }
.panel .row.total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 16px; font-family: var(--poppins); font-size: 19px; font-weight: 600; }

/* ---------------------------------------------------------------- forms -- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }

.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 14px; color: var(--grey); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-family: var(--raleway);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
.field input::placeholder { color: var(--grey-2); }
.field textarea { min-height: 150px; resize: vertical; }
.field.full { grid-column: 1 / -1; }

.radio-row { display: flex; gap: 26px; margin-bottom: 24px; }
.radio-row label { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.radio-row input { accent-color: var(--green); }

.auth-box { max-width: 460px; margin: 0 auto; }
.auth-box .alt { text-align: center; margin-top: 22px; font-size: 15px; }
.auth-box .alt a { color: var(--green); font-weight: 600; }
.divider { display: flex; align-items: center; gap: 16px; color: var(--grey-2); font-size: 14px; margin: 26px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ----------------------------------------------------------------- blog -- */

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }

/* Le bloc « Articles » choisit ses colonnes. Voir `blocks/posts/render.php`.

   LE NOMBRE DEMANDE EST UN MAXIMUM, PAS UNE OBLIGATION. Dans le corps d'un
   article la colonne de lecture fait 700 px : quatre cartes y tombaient a
   155 px de large, avec un visuel de 61 px de haut - une bande illisible.
   `max()` impose une largeur plancher de 210 px, et le navigateur reduit alors
   le nombre de colonnes tout seul. En pleine largeur, les quatre reviennent. */
.post-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(max(210px, (100% - 26px) / 2), 1fr)); }
.post-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(max(210px, (100% - 52px) / 3), 1fr)); }
.post-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(max(210px, (100% - 78px) / 4), 1fr)); }
/* LA CARTE EST UNE COLONNE, pour que « Lire + » s'aligne d'une carte a l'autre.
   Sans cela le lien suit la fin du resume : sur quatre cartes aux resumes de
   3 a 8 lignes, il se posait a quatre hauteurs differentes, mesurees a 120 px
   d'ecart. */
.post { display: flex; flex-direction: column; }

.post .ph { border-radius: var(--radius); overflow: hidden; aspect-ratio: 830 / 324; background: var(--bg-card); }
.post .ph img { width: 100%; height: 100%; object-fit: cover; }
/* Date de parution, posee entre le visuel et le titre. Sans habillage elle
   sort a la taille et a la couleur du texte courant : aussi lourde que le
   titre qu'elle annonce, alors qu'elle ne fait que le situer. Elle prend donc
   la place du retrait haut du titre, qui se rapproche d'autant. */
.post .post-date {
  display: block;
  font-family: var(--poppins);
  font-size: 13px;
  color: var(--grey);
  margin-top: 14px;
}
.post h3 { font-family: var(--raleway); font-size: 19px; font-weight: 600; margin: 16px 0 10px; line-height: 1.35; }
.post .post-date + h3 { margin-top: 6px; }
/* Le resume s'arrete a trois lignes. Les chapeaux vont de deux a huit lignes
   selon les articles ; laisser courir le plus long etire toute la rangee. */
.post p {
  font-size: 14.5px;
  color: var(--grey);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post .more { font-family: var(--poppins); font-size: 13px; font-weight: 600; color: var(--green); text-transform: uppercase; letter-spacing: .06em; margin-top: auto; }

.article { max-width: 50rem; margin: 0 auto; }
.article h1 { font-size: 36px; font-weight: 700; margin-bottom: 18px; line-height: 1.22; }
.article .meta { font-size: 14px; color: var(--grey); margin-bottom: 30px; }
/* L'image de tete ayant disparu, l'en-tete d'article ne porte plus que la ligne
   de contexte. Son retrait bas s'ajoutait alors au remplissage de
   `section.tight` et creusait pres de 80 px de vide avant la premiere banniere.
   Le `:last-child` vise exactement ce cas : sur une ressource, un `.rte` suit
   encore la ligne de contexte, qui garde donc son retrait. */
.article .meta:last-child { margin-bottom: 0; }
.article h2 { font-size: 24px; font-weight: 600; margin: 36px 0 14px; }
.article img { border-radius: var(--radius); margin: 26px 0; }

/* -------------------------------------------------------------- lexique -- */

.alpha { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.alpha a {
  min-width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--poppins); font-size: 14px;
}
.alpha a.on { background: var(--green); border-color: var(--green); color: #fff; }

.ing-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.ing { text-align: center; }
.ing .ph { border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.ing h4 { font-family: var(--raleway); font-size: 15px; font-weight: 500; margin-top: 12px; }

/* ---------------------------------------------------------- misc blocks -- */

.band-green { background: var(--green-pale); }
.band-soft { background: var(--bg-soft); }

.hero-editorial {
  position: relative;
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero-editorial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-editorial::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); }
.hero-editorial .c { z-index: 1; }
.hero-editorial .c { position: relative; max-width: 760px; padding: 0 30px; }
.hero-editorial h1 { font-size: 42px; font-weight: 700; line-height: 1.2; text-shadow: 0 2px 16px rgba(0,0,0,.3); }

.steps-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step-card { text-align: center; padding: 30px 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.step-card .num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--poppins); font-weight: 600; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.step-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.step-card p { font-size: 14.5px; color: var(--grey); margin: 0; }

.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* QUATRE ENCARTS SE METTENT EN 2x2. Sur trois colonnes, le quatrieme tombe seul
   sur une deuxieme rangee : la section se lit alors comme un oubli plutot que
   comme une liste. La regle vise le compte EXACT de quatre - a trois, comme a
   six, les trois colonnes restent le bon partage.

   SOUS REQUETE, ET NON EN REGLE LIBRE. `:has()` ajoute de la specificite : posee
   sans garde, cette regle battait le passage a une colonne de la requete mobile
   plus bas dans le fichier, et les encarts debordaient de 60 px sur telephone.
   Mesure sur « Over ons » a 390 px. */
@media (min-width: 641px) {
  .perks:has(> .perk:nth-child(4)):not(:has(> .perk:nth-child(5))) {
    grid-template-columns: repeat(2, 1fr);
  }
}
.perk { background: var(--green-pale); border-radius: var(--radius); padding: 26px; }
.perk h4 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.perk p { font-size: 14.5px; color: var(--grey); margin: 0; }

.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.contact-side { background: var(--green-pale); border-radius: var(--radius); padding: 30px; }
.contact-side h3 { font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.contact-side p { font-size: 15px; margin: 0 0 14px; }
.contact-side a:not(.btn) { color: var(--green); font-weight: 600; }

.gamme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* Deux ou quatre vignettes tiennent mieux sur deux colonnes : la ligne est
   pleine et les visuels y gagnent. Posee par le bloc, qui compte ses enfants. */
.gamme-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gamme { border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 4/3; }
.gamme img { width: 100%; height: 100%; object-fit: cover; }
.gamme .cap { position: absolute; inset: auto 0 0 0; padding: 24px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.gamme .cap b { font-family: var(--poppins); font-size: 20px; font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 4px; }
.gamme .cap span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; }

.empty-state { text-align: center; padding: 60px 0; }
.empty-state p { font-size: 17px; color: var(--grey); margin-bottom: 24px; }

/* --------------------------------------------------------------- footer -- */

.footer { background: var(--green); color: #fff; padding: 54px 0 22px; margin-top: 60px; }

/* Une <section> apporte déjà son padding bas : ajouter la marge du footer
   ferait apparaître une bande du fond de page entre les deux. */
section + .footer { margin-top: 0; }

/* Une colonne par menu rattache, jamais plus de trois depuis le retrait du
   bloc newsletter. `auto-fit` evite d'avoir a compter dans le gabarit : une
   colonne en moins n'a plus a changer une classe. */
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }

.footer img.flogo { width: 210px; margin-bottom: 22px; }

.footer .contact-list { list-style: none; margin: 0; padding: 0; }
.footer .contact-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 11px; }
.footer .contact-list .ic { width: 17px; opacity: .95; filter: brightness(0) invert(1); }

.footer h4 { font-family: var(--raleway); font-size: 16px; font-weight: 600; margin-bottom: 16px; }

.footer ul.links { list-style: none; margin: 0; padding: 0; }
.footer ul.links li { margin-bottom: 11px; }
.footer ul.links a { font-size: 15px; opacity: .95; }
.footer ul.links a:hover { text-decoration: underline; }

.footer-bottom {
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.25);
  text-align: center; font-size: 13.5px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1200px) {
  .container { padding: 0 24px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .ing-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 980px) {
  .mainnav, .header-icons .search-lbl, .hide-mobile { display: none; }
  /* Header 3 zones : burger + recherche à gauche · logo centré (absolu) · compte + panier à droite */
  .header-inner { position: relative; justify-content: space-between; gap: 0; }
  .hdr-mobile-left { display: flex; }
  .header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .header .logo img { width: 150px; }
  .header-icons { gap: 18px; }
  .burger { display: block; font-size: 24px; }
  .hero .hero-copy { max-width: none; text-align: left; }
  .hero h1 { font-size: 32px; }
  .pdp, .split, .cart-layout, .contact-layout, .reviews { grid-template-columns: 1fr; gap: 30px; }
  .reviews .list, .post-grid, .post-grid[class*="cols-"], .steps-3, .perks,
  .gamme-grid, .gamme-grid.cols-2, .needs-grid { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: 24px; }
  .page-title { font-size: 30px; }
  section { padding: 44px 0; }
}

@media (max-width: 640px) {
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .reviews .list, .post-grid, .post-grid[class*="cols-"], .steps-3, .perks,
  .gamme-grid, .gamme-grid.cols-2, .needs-grid,
  .form-grid, .footer-cols { grid-template-columns: 1fr; }
  .ing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Bandeau vert profond. Reprend le vert du pied de page, seul autre fond
   fonce du site : le texte y passe en blanc, filets et liens compris. */
.band-forest { background: var(--green); }
.band-forest,
.band-forest p,
.band-forest li,
.band-forest h1, .band-forest h2, .band-forest h3, .band-forest h4,
.band-forest .section-title,
.band-forest .section-title span { color: #fff; }
.band-forest a { color: #fff; text-decoration: underline; }

/* Titre d'une page a blocs sans bandeau d'ouverture. La section qui suit
   apporte deja son propre espacement : on le reduit pour ne pas doubler
   l'intervalle sous le titre. */
.page-titre-seul + section { padding-top: 16px; }

/* Meme vignette que dans le carrousel de besoins, mais en paysage : c'est la
   grille qui decide du format, pas la carte. */
.gamme-grid .need-card { aspect-ratio: 4 / 3; }

/* A DEUX COLONNES, DES BANDEAUX PLUTOT QUE DES PAVES. Deux vignettes en 4/3 sur
   toute la largeur font pres de 500 px de haut chacune : « Nos offres » n'offre
   alors que deux blocs de couleur et rien d'autre au premier ecran. La maquette
   pose ces paires en 21/9. */
.gamme-grid.cols-2 .need-card { aspect-ratio: 21 / 9; }

@media (max-width: 640px) {
  /* Sur une colonne, 21/9 devient une bande trop mince pour son titre. */
  .gamme-grid.cols-2 .need-card { aspect-ratio: 4 / 3; }
}

/* Colonne gauche plus large : la proportion de la page contact, formulaire
   d'un cote et panneau d'information de l'autre. */
.split.wide-left { grid-template-columns: 1.4fr 1fr; align-items: start; }

/* ------------------------------------------- tailles et couleurs d'editeur

   Classes produites par WordPress quand l'auteur choisit une taille ou une
   couleur dans l'editeur, declarees par `Theme::setup()`. Sans ces regles, le
   choix se voit dans l'editeur et nulle part sur le site.

   Aucun soulignement : les titres du site n'en portent pas, et la demande
   etait explicite. La couleur et la taille suffisent a hierarchiser. */
.has-small-font-size { font-size: 18px; }
.has-medium-font-size { font-size: 22px; }
.has-large-font-size { font-size: 30px; }
.has-x-large-font-size { font-size: 38px; }
.has-xx-large-font-size { font-size: 46px; }

.has-ink-color { color: var(--ink); }
.has-green-color { color: var(--green); }
.has-green-dark-color { color: var(--green-dark); }
.has-grey-color { color: var(--grey); }
.has-white-color { color: #fff; }

.has-ink-background-color { background-color: var(--ink); }
.has-green-background-color { background-color: var(--green); }
.has-green-dark-background-color { background-color: var(--green-dark); }
.has-grey-background-color { background-color: var(--grey); }
.has-white-background-color { background-color: #fff; }

/* ------------------------------------------------ ajout rapide (panier)

   Un champ, puis les cartes trouvees. La grille descend a deux colonnes : le
   panneau ne fait pas la largeur de la boutique, et six cartes sur une ligne y
   seraient illisibles. */
/* La bande des suggestions suit immediatement le panier. Sans cette marge, son
   fond vient se coller sous le dernier panneau et les deux paraissent n'en
   faire qu'un. Le rythme des autres pages veut de l'air entre deux bandes. */
/* Passage a la cure, sous le nom de l'article. Vert et souligne : c'est une
   proposition d'economie, elle doit se lire comme une action, pas comme une
   mention legale. */
.cart-line-cure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}
.cart-line-cure .ic { width: 16px; height: 16px; flex: none; }
.cart-line-cure span { text-decoration: underline; text-underline-offset: 2px; }
.cart-line-cure:hover { color: var(--green-dark); }

/* Contenance et reference, sous la proposition de cure. Grises : ce sont des
   reperes de verification, pas une information de vente. */
.cart-line-meta { margin: 6px 0 0; font-size: 14px; color: var(--grey-2); }

.cart-suggestions { margin-top: 56px; }

.cart-quick-add { margin-top: 20px; }
.cart-quick-add h3 { font-family: var(--poppins); font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.cart-quick-add .field { margin-bottom: 0; }
.cart-quick-add-aide { font-size: 14px; color: var(--grey); }
.cart-quick-add-aide a { color: var(--green); text-decoration: underline; }
.cart-quick-add-etat { font-size: 14px; color: var(--grey); margin-top: 12px; }

.cart-quick-add-resultats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* Etiquette reservee aux lecteurs d'ecran : le champ porte deja son indication
   en placeholder, mais un placeholder n'est pas une etiquette. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}