/* === GEKOMED - HOMEPAGE === */

.gk-home { display: block; }
.gk-text-center { text-align: center; }

/* Composants generiques (.gk-section, .gk-band--*, .gk-btn*, .gk-section__eyebrow,
   .gk-script-accent, .gk-display em) sont definis dans design-system.css. */

/* ---------- HOME : suppression des bandeaux verts (haut + bas) ---------- */
/* Bandeau vert du haut (ticker "L'orthopedie verte / 01 84 19 09 68") cache sur la home */
body.home .gk-ticker { display: none !important; }

/* ---------- HERO ---------- */
/* Elements visibles uniquement en mobile (eyebrow, lede, info-row, fallback CTA) */
.gk-hero__mobile-only { display: none; }

.gk-hero { padding: clamp(8px, 1.5vw, 16px); }
.gk-hero__inner {
  position: relative;
  border-radius: clamp(20px, 2vw, 32px);
  overflow: hidden;
  min-height: calc(95vh - var(--gk-header-h, 124px));
  min-height: calc(95svh - var(--gk-header-h, 124px));
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 80px) clamp(48px, 6vw, 80px);
  color: #fff;
  background: var(--gk-green-deep);
}
/* Image hero en <img> reel (LCP element). CSS bg deplace en attribut HTML
   pour profiter de fetchpriority="high" + srcset responsive. Le navigateur
   declenche le download des le HTML parse, sans attendre le CSS. */
.gk-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 70%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.gk-hero__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.gk-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 3vw, 40px);
  text-align: left;
  max-width: 760px;
  position: relative;
  z-index: 2;
}
.gk-hero__title {
  color: #fff;
  font-family: var(--gk-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: clamp(38px, 5.2vw, 72px);
  margin: 0;
}
.gk-hero__title em {
  font-family: var(--gk-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #fff;
  font-size: 1.06em;
}
.gk-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.gk-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--gk-radius-pill);
  font-family: var(--gk-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  line-height: 1;
}
.gk-hero__cta .gk-btn__arrow { transition: transform .25s ease; }
.gk-hero__cta:hover .gk-btn__arrow { transform: translateX(4px); }
.gk-hero__cta--primary {
  background: #fff;
  color: var(--gk-green-deep);
  border-color: #fff;
}
.gk-hero__cta--primary:hover { background: #B8E0B0; border-color: #B8E0B0; transform: translateY(-2px); }
.gk-hero__cta--secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
}
.gk-hero__cta--secondary:hover { background: rgba(255,255,255,0.18); border-color: #fff; transform: translateY(-2px); }

@media (max-width: 620px) {
  .gk-hero__inner { min-height: 78vh; padding: 32px 24px; }
  .gk-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .gk-hero__cta { justify-content: center; }
}

/* ---------- PRODUITS ---------- */
.gk-section--products .gk-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.gk-section--products .gk-section__head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.gk-products__title {
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--gk-ink);
  max-width: 16ch;
}
.gk-products__title em {
  font-family: var(--gk-serif);
  font-style: italic;
  font-weight: 400;
}
.gk-products__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gk-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gk-ink);
  text-decoration: none;
  padding: 4px 0 6px;
  border-bottom: 1.5px solid var(--gk-ink);
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
  margin-top: 6px;
}
.gk-products__cta svg { transition: transform .25s ease; }
.gk-products__cta:hover { gap: 14px; color: var(--gk-green-deep); border-bottom-color: var(--gk-green-deep); }
.gk-products__cta:hover svg { transform: translate(2px, -2px); }

.gk-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
}
.gk-products-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gk-ink-soft);
  padding: 60px 0;
  font-style: italic;
}
.gk-product-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.gk-product-card:hover { transform: translateY(-4px); }
.gk-product-card__media {
  position: relative;
  border-radius: clamp(20px, 2vw, 28px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #4a7a4a;
  isolation: isolate;
}
.gk-product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  display: block;
}
.gk-product-card:hover .gk-product-card__media img { transform: scale(1.04); }

/* Overlay info : transparent en haut, noir marque en bas */
.gk-product-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.gk-product-card__info {
  position: absolute;
  left: clamp(20px, 2.2vw, 32px);
  bottom: clamp(20px, 2.2vw, 28px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.gk-product-card__title {
  margin: 0;
  font-family: var(--gk-sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff;
  line-height: 1.1;
}
.gk-product-card__price {
  font-family: var(--gk-sans);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.02em;
}
.gk-product-card__price .woocommerce-Price-amount,
.gk-product-card__price bdi { color: #fff; }
.gk-product-card__price del { opacity: .6; font-size: 0.92em; margin-right: 8px; }
.gk-product-card__price ins { text-decoration: none; }

/* ---------- DUREE / QUOTE ---------- */
.gk-section--quote {
  text-align: center;
  padding-top: clamp(20px, 2.5vw, 36px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.home .gk-band > .gk-section--products { padding-bottom: clamp(28px, 3vw, 48px); }
.gk-section--quote h2 {
  font-size: clamp(34px, 5vw, 60px);
  margin: 0 auto;
  max-width: 22ch;
}
.gk-handwrite { display: none; }
.gk-handwrite--hidden { display: none; }
.gk-script-big {
  font-family: var(--gk-script);
  font-weight: 500;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  color: var(--gk-ink);
  letter-spacing: 0.01em;
  transform: rotate(-1deg);
  display: inline-block;
}

/* Guess interactif (slider) "21 jours" */
.gk-guess {
  width: min(560px, 90%);
  margin: clamp(28px, 4vw, 48px) auto clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gk-guess__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: clamp(80px, 10vw, 110px);
}
.gk-guess__value .gk-script-big {
  font-size: clamp(56px, 8vw, 96px);
  transition: transform .18s ease;
}
.gk-guess__unit {
  font-family: var(--gk-sans);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--gk-ink-soft);
  letter-spacing: 0.04em;
}
.gk-guess__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--gk-line);
  border-radius: 999px;
  outline: none;
  margin: 6px 0 0;
}
.gk-guess__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gk-ink);
  border: 3px solid var(--gk-cream, #F5F2EC);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: grab;
  transition: transform .15s ease;
}
.gk-guess__slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.gk-guess__slider::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gk-ink);
  border: 3px solid var(--gk-cream, #F5F2EC);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: grab;
}
.gk-guess__slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0,0,0,0.18); }
.gk-guess__scale {
  display: flex; justify-content: space-between;
  width: 100%;
  font-family: var(--gk-sans); font-size: 12px;
  color: var(--gk-ink-soft); letter-spacing: 0.06em;
  margin-top: -6px;
}
.gk-guess__submit {
  appearance: none;
  font-family: var(--gk-sans);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gk-ink-soft);
  background: var(--gk-cream, #F5F2EC);
  border: 1.5px dashed var(--gk-line);
  border-radius: 999px;
  padding: 16px 36px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  margin-top: 6px;
}
.gk-guess__submit:hover { color: var(--gk-ink); border-color: var(--gk-ink); }
.gk-guess[data-state="done"] .gk-guess__submit { display: none; }
.gk-guess[data-state="done"] .gk-guess__slider { pointer-events: none; opacity: 0.55; }
.gk-guess[data-state="done"] .gk-guess__value .gk-script-big { animation: gkScriptPop .9s cubic-bezier(.34,1.56,.64,1) both; }

.gk-guess__result {
  text-align: center;
  font-family: var(--gk-sans);
  max-width: 480px;
}
.gk-guess__result-headline {
  font-size: 16px; font-weight: 600; color: var(--gk-ink);
  margin: 0 0 6px;
}
.gk-guess__result-detail {
  font-size: 13px; color: var(--gk-ink-soft); margin: 0;
}
.gk-guess__retry {
  display: inline-block; margin-top: 12px;
  background: none; border: 0; padding: 4px 8px;
  font-family: var(--gk-sans); font-size: 12px;
  color: var(--gk-ink-soft); cursor: pointer;
  text-decoration: underline; letter-spacing: 0.04em;
}
.gk-guess__retry:hover { color: var(--gk-ink); }

@media (prefers-reduced-motion: reduce) {
  .gk-guess__value .gk-script-big,
  .gk-guess__slider::-webkit-slider-thumb { transition: none; animation: none; }
}

/* Legacy reveal — gardé inactif au cas où */
.gk-reveal {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: clamp(28px, 4vw, 48px) auto clamp(48px, 6vw, 80px);
  cursor: pointer;
  position: relative;
  display: block;
  min-height: clamp(120px, 14vw, 180px);
  width: min(560px, 90%);
}
.gk-reveal__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gk-sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gk-ink-soft);
  background: var(--gk-cream, #F5F2EC);
  border: 1.5px dashed var(--gk-line);
  border-radius: 999px;
  transition: opacity .35s ease, transform .35s ease;
}
.gk-reveal__hint::after {
  content: '';
  width: 14px; height: 14px; margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  display: inline-block;
  opacity: 0.6;
}
.gk-reveal__answer {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease .15s, transform .5s ease .15s;
}
.gk-reveal[aria-expanded="true"] .gk-reveal__hint {
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
}
.gk-reveal[aria-expanded="true"] .gk-reveal__answer {
  opacity: 1;
  transform: translateY(0);
}
.gk-reveal[aria-expanded="true"] .gk-script-big {
  animation: gkScriptPop .9s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gkScriptPop {
  0% { opacity: 0; transform: rotate(-1deg) scale(.6); }
  60% { opacity: 1; transform: rotate(-1deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(-1deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gk-reveal__hint, .gk-reveal__answer, .gk-script-big { transition: none; animation: none; }
}
.gk-quote__source { font-size: 12px; color: var(--gk-ink-soft); margin: 0; letter-spacing: 0.04em; }

/* ---------- 4 ARGUMENTS PILLS ---------- */
.gk-arguments {
  padding-top: clamp(8px, 1vw, 16px);
  padding-bottom: clamp(12px, 1.5vw, 24px);
}
.gk-arguments__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(10px, 1.2vw, 18px);
  flex-wrap: wrap;
  width: 100%;
}
.gk-arguments__row .gk-arg-pill { flex: 1 1 240px; }
.gk-arg-pill {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 22px);
  padding: clamp(14px, 1.6vw, 22px) clamp(28px, 3vw, 40px) clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px);
  border-radius: var(--gk-radius-pill);
  background: #fff;
  border: 1px solid #ECECEA;
  color: var(--gk-ink);
  font-family: var(--gk-sans);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: clamp(76px, 7vw, 96px);
}
.gk-arg-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,61,46,0.08); }
.gk-arg-pill__icon {
  width: clamp(52px, 5vw, 68px); height: clamp(52px, 5vw, 68px);
  border-radius: 50%;
  background: #F0EFEC;
  color: var(--gk-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gk-arg-pill__icon svg { width: 60%; height: 60%; }
.gk-arg-pill__label { display: inline-block; white-space: normal; max-width: 18ch; }
@media (max-width: 720px) {
  .gk-arguments__row .gk-arg-pill { flex: 1 1 100%; }
}
.gk-arg-pill--dark {
  background: var(--gk-green-deep);
  border-color: var(--gk-green-deep);
  color: #fff;
}
.gk-arg-pill--dark .gk-arg-pill__icon {
  background: #fff;
  color: var(--gk-green-deep);
}

/* ---------- WASTE / GACHIS ---------- */
.gk-waste { background: transparent; padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.gk-waste__grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: clamp(20px, 2vw, 32px);
  align-items: stretch;
}
.gk-waste__lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2.5vw, 32px) clamp(28px, 3vw, 48px) 0;
  background: transparent;
  border-radius: 0;
  justify-content: flex-start;
}
.gk-waste__lead .gk-eyebrow,
.gk-eyebrow--leaf {
  display: inline-block;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: 0;
  font-family: var(--gk-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gk-sage, var(--gk-ink-soft));
  align-self: flex-start;
  margin-bottom: 14px;
}
.gk-eyebrow--leaf svg { display: none; }
.gk-waste__intro {
  font-family: var(--gk-display);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.35;
  margin: 0;
  color: var(--gk-ink);
}
.gk-waste__intro em { font-style: italic; }
.gk-waste__main {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 24px 32px;
  background-color: var(--gk-green-deep);
  color: #fff;
  border-radius: var(--gk-radius-lg);
  padding: clamp(28px, 3vw, 48px);
  overflow: hidden;
  isolation: isolate;
}
.gk-waste__main::before,
.gk-waste__main::after { content: none; }
.gk-waste__main > * { position: relative; z-index: 1; }
.gk-waste__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.gk-waste__head h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 60px);
  color: #fff;
}
.gk-waste__head h2 em { font-style: italic; font-family: var(--gk-serif); }
.gk-waste__cta {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--gk-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.gk-waste__cta:hover { transform: rotate(45deg); }
.gk-waste__chart {
  display: flex;
  align-items: flex-end;
  gap: 4%;
  height: 240px;
}
.gk-waste__bar {
  flex: 1;
  height: var(--h, 50%);
  background: rgba(255,255,255,0.18);
  border-radius: 14px;
  transform-origin: bottom center;
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    background-color .35s ease;
  will-change: transform;
}
.gk-waste__bar.is-active {
  background-color: rgba(255, 255, 255, 0.28);
  transform: scaleY(0.72);
}
.gk-waste__bar--last { background: rgba(255, 255, 255, 0.92); }
.gk-waste__bar--last.is-active {
  background-color: #fff;
  transform: scaleY(1.18);
}
.gk-waste__counter {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 8px;
}
.gk-waste__counter-value {
  font-family: var(--gk-display);
  font-size: clamp(54px, 7vw, 96px);
  line-height: 1;
  color: #fff;
  font-weight: 400;
}
.gk-waste__counter-label {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}

/* ---------- GEKOFROST ---------- */
.gk-gekofrost__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}
.gk-gekofrost__media {
  position: relative;
  border-radius: var(--gk-radius-lg);
  overflow: hidden;
  min-height: 520px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  color: #fff;
  background: var(--gk-green-mid);
  isolation: isolate;
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.gk-gekofrost__media:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.gk-gekofrost__media::before {
  content: '';
  position: absolute;
  inset: -8% 0;
  background: url('../images/mannequin-gekofrost.webp') center 88% / cover no-repeat;
  transform: translate3d(0, var(--gk-parallax, 0), 0) scale(var(--gk-frost-scale, 1));
  transition: transform 600ms ease;
  z-index: -2;
  will-change: transform;
}
.gk-gekofrost__media:hover::before {
  --gk-frost-scale: 1.04;
}
.gk-gekofrost__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  z-index: -1;
  pointer-events: none;
}
.gk-gekofrost__title {
  color: #fff;
  font-size: clamp(36px, 4.5vw, 56px);
  margin: 0;
}
.gk-gekofrost__media .gk-eyebrow,
.gk-gekofrost__media .gk-eyebrow--leaf {
  color: rgba(255,255,255,0.92);
}
.gk-gekofrost__badge {
  align-self: flex-end;
  margin-top: auto;
  width: clamp(120px, 13vw, 170px);
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.25));
  transform: rotate(-8deg);
}
.gk-gekofrost__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}
.gk-feature { display: flex; gap: 16px; align-items: flex-start; }
.gk-feature__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gk-green-soft);
  color: var(--gk-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gk-feature h4 {
  margin: 0 0 6px;
  font-family: var(--gk-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.gk-feature p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gk-ink-soft);
}
.gk-feature p em { font-style: italic; font-family: var(--gk-serif); color: var(--gk-ink); }
.gk-gekofrost__cta {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- FAQ ---------- */
.gk-faq h2 {
  font-size: clamp(34px, 5vw, 60px);
  margin: 0 auto clamp(32px, 5vw, 56px);
  max-width: 22ch;
}
.gk-faq__list {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.gk-faq__item { border-top: 1px solid var(--gk-line); }
.gk-faq__item:last-child { border-bottom: 1px solid var(--gk-line); }
.gk-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  list-style: none;
  cursor: pointer;
  padding: 28px 8px;
  font-family: var(--gk-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.gk-faq__q::-webkit-details-marker { display: none; }
.gk-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gk-ink);
  width: 28px;
  height: 28px;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.gk-faq__icon svg { width: 20px; height: 20px; display: block; }
.gk-faq__item[open] .gk-faq__icon { transform: rotate(90deg); }
.gk-faq__a {
  padding: 0 8px 22px;
  color: var(--gk-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.gk-faq__a p { margin: 0; }

/* ============================================================
   2. MANIFESTO SPLIT NEUF / RECONDITIONNE
   ============================================================ */
.gk-twoworlds { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.gk-twoworlds__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.gk-twoworlds__head .gk-eyebrow--leaf { margin: 0 auto 24px; }
.gk-twoworlds__head h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.gk-twoworlds__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.6vw, 24px);
}
.gk-world {
  position: relative;
  border-radius: var(--gk-radius-lg);
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.gk-world--new {
  background: var(--gk-green-deep);
  color: #fff;
}
.gk-world--recond {
  background: var(--rc-bg);
  color: var(--rc-ink);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31, 31, 31, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
  border: 1px solid var(--rc-line);
}
.gk-world__head { display: flex; flex-direction: column; gap: 14px; }
.gk-world__tag {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--gk-radius-pill);
}
.gk-world--new .gk-world__tag { background: rgba(255,255,255,0.14); color: #fff; }
.gk-world--recond .gk-world__tag { background: var(--rc-ink); color: var(--rc-amber-soft); }
.gk-world h3 {
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.gk-world h3 em { font-style: italic; font-family: var(--gk-serif); }
.gk-world__lede {
  font-family: var(--gk-display);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  margin: 0;
}
.gk-world--new .gk-world__lede { color: rgba(255,255,255,0.85); }
.gk-world__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.gk-world__points li { display: flex; align-items: center; gap: 10px; }
.gk-world__points span {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.gk-world--new .gk-world__points span { background: rgba(255,255,255,0.16); color: #fff; }
.gk-world--recond .gk-world__points span { background: var(--rc-amber-soft); color: var(--rc-accent-dark); }
.gk-world .gk-btn { align-self: flex-start; margin-top: 6px; }

/* ============================================================
   7. SECTION RECONDITIONNE
   ============================================================ */
.gk-recond-band {
  background: var(--rc-bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(31, 31, 31, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
  position: relative;
  padding: clamp(48px, 5vw, 80px) clamp(20px, 4vw, 64px);
}
.gk-recond-band__inner {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
}
.gk-recond-band__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.gk-recond-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--rc-ink);
  color: var(--rc-amber-soft);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
}
.gk-recond-band__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rc-amber);
  animation: gk-recond-pulse 2s ease-in-out infinite;
}
@keyframes gk-recond-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.gk-recond-band__title {
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--rc-ink);
}
.gk-recond-band__title em { font-style: italic; font-family: var(--gk-serif); }
.gk-recond-band__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--rc-ink-soft);
  margin: 0;
  max-width: 56ch;
}
.gk-recond-band__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gk-recond-band__steps li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 18px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--rc-line);
  border-radius: var(--gk-radius-md);
  backdrop-filter: blur(4px);
}
.gk-recond-band__step-num {
  font-family: var(--gk-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-accent-dark);
  background: var(--rc-amber-soft);
  padding: 6px 10px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.gk-recond-band__steps h4 {
  margin: 0 0 4px;
  font-family: var(--gk-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--rc-ink);
}
.gk-recond-band__steps p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rc-ink-soft);
}
.gk-recond-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 28px);
  margin-bottom: clamp(40px, 5vw, 56px);
}
.gk-recond-band__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px dashed var(--rc-line-strong);
}
.gk-recond-band__deposit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--rc-ink);
  border-bottom: 1px dashed var(--rc-line-strong);
  padding-bottom: 4px;
  transition: border-color .2s ease;
}
.gk-recond-band__deposit:hover { border-bottom-color: var(--rc-accent); color: var(--rc-accent-dark); }

/* ============================================================
   8. POUR LES PROS DE SANTE
   ============================================================ */
.gk-pros { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }

/* Section pros en collapsable details : actif uniquement en mobile.
   En desktop, JS force open. Le summary devient un en-tete normal (chev masque). */
.gk-pros__collapse { display: block; }
.gk-pros__summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  cursor: default;
  padding: 0;
  margin: 0 0 clamp(28px, 3vw, 40px);
}
.gk-pros__summary::-webkit-details-marker { display: none; }
.gk-pros__summary::marker { content: ''; }
.gk-pros__summary h2 {
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 18ch;
  color: var(--gk-ink);
}
.gk-pros__summary h2 em { font-style: italic; font-family: var(--gk-serif); }
.gk-pros__chev { display: none; }
.gk-pros__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  padding: clamp(8px, 1vw, 16px) 0;
}
.gk-pros__copy { display: flex; flex-direction: column; gap: 22px; position: relative; }
.gk-pros__copy h2 {
  font-size: clamp(30px, 4vw, 50px);
  margin: 0;
  line-height: 1.08;
  max-width: 18ch;
}
.gk-pros__lede {
  font-family: var(--gk-display);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.5;
  color: var(--gk-ink);
  margin: 0;
  max-width: 50ch;
}
.gk-pros__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--gk-line);
  border-bottom: 1px solid var(--gk-line);
  width: fit-content;
}
.gk-pros__stats > div { display: flex; flex-direction: column; gap: 4px; }
.gk-pros__stats strong {
  font-family: var(--gk-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  color: var(--gk-green-deep);
  line-height: 1;
}
.gk-pros__stats span {
  font-size: 12px;
  color: var(--gk-ink-soft);
  letter-spacing: 0.04em;
}
.gk-pros__ctas { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

.gk-pros__card {
  position: relative;
  background: #fff;
  border-radius: var(--gk-radius-md);
  padding: 28px 28px 32px;
  box-shadow: 0 24px 60px rgba(15, 61, 46, 0.12);
  border: 1px solid var(--gk-line);
}
.gk-pros__card-tag {
  display: inline-block;
  background: var(--gk-green-deep);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--gk-radius-pill);
  margin-bottom: 20px;
}
.gk-pros__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gk-pros__card li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gk-ink);
  align-items: flex-start;
}
.gk-pros__card li span {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gk-green-soft);
  color: var(--gk-green-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}

/* ============================================================
   10. JOURNAL GEKOMED (BLOG)
   ============================================================ */
.gk-journal { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.gk-journal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.gk-journal__head .gk-eyebrow--leaf {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: 0;
}
.gk-journal__head h2 {
  font-size: clamp(34px, 5vw, 60px);
  margin: 0;
  line-height: 1.04;
  max-width: 16ch;
}
.gk-journal__head .gk-btn { justify-self: end; }
.gk-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.gk-journal__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: var(--gk-ink);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.gk-journal__card:hover { transform: translateY(-3px); }
.gk-journal__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--gk-radius-md);
  overflow: hidden;
  background: var(--gk-green-pale);
}
.gk-journal__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.gk-journal__card:hover .gk-journal__media img { transform: scale(1.04); }
.gk-journal__media-placeholder {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, var(--gk-green-pale) 0 18px, var(--gk-green-soft) 18px 36px);
}
.gk-journal__cat {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(15, 61, 46, 0.92);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--gk-radius-pill);
}
.gk-journal__body { display: flex; flex-direction: column; gap: 10px; }
.gk-journal__title {
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--gk-ink);
}
.gk-journal__excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gk-ink-soft);
  margin: 0;
}
.gk-journal__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gk-ink-soft);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ============================================================
   11. ON VOUS ACCOMPAGNE
   ============================================================ */
.gk-help { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.gk-help__head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 56px); }
.gk-help__head h2 {
  font-size: clamp(34px, 5vw, 56px);
  margin: 0 auto 16px;
}
.gk-help__lede {
  font-family: var(--gk-display);
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--gk-ink-soft);
  margin: 0;
}
.gk-help__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
}
.gk-help-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 26px;
  background: #fff;
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius-md);
  text-decoration: none;
  color: var(--gk-ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gk-help-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 61, 46, 0.10);
  border-color: var(--gk-green-deep);
}
.gk-help-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--gk-green-soft);
  color: var(--gk-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gk-help-card h3 {
  margin: 0;
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.gk-help-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gk-ink-soft);
  flex: 1;
}
.gk-help-card__more {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gk-green-deep);
  margin-top: 4px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .gk-help__grid { grid-template-columns: repeat(2, 1fr); }
  .gk-journal__grid { grid-template-columns: 1fr 1fr; }
  .gk-journal__card--lead { grid-column: 1 / -1; }
  .gk-recond-band__head { grid-template-columns: 1fr; }
  .gk-pros__inner { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .gk-products-grid { grid-template-columns: repeat(2, 1fr); }
  .gk-arguments__grid { grid-template-columns: repeat(2, 1fr); }
  .gk-waste__grid { grid-template-columns: 1fr; }
  .gk-waste__main { grid-template-columns: 1fr; }
  .gk-gekofrost__grid { grid-template-columns: 1fr; }
  .gk-gekofrost__media { min-height: 380px; }
  .gk-twoworlds__grid { grid-template-columns: 1fr; }
  .gk-recond-band__grid { grid-template-columns: 1fr 1fr; }
  .gk-recond-band__grid > article:nth-child(3) { display: none; }
}
@media (max-width: 620px) {
  .gk-products-grid { grid-template-columns: 1fr; }
  .gk-arguments__grid { grid-template-columns: 1fr; }
  .gk-section--products .gk-section__head { flex-direction: column; align-items: flex-start; }
  .gk-hero__inner { min-height: 80vh; padding: 24px 20px; }
  .gk-waste__chart { height: 200px; }
  .gk-gekofrost__cta { flex-direction: column; align-items: stretch; }
  .gk-recond-band__grid { grid-template-columns: 1fr; }
  .gk-recond-band__grid > article:nth-child(3) { display: block; }
  .gk-help__grid { grid-template-columns: 1fr; }
  .gk-journal__grid { grid-template-columns: 1fr; }
  .gk-journal__head { grid-template-columns: 1fr; }
  .gk-journal__head .gk-btn { justify-self: start; }
  .gk-pros__inner { padding: 32px 24px; }
  .gk-pros__stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .gk-recond-band__foot { flex-direction: column; align-items: flex-start; }
}


/* Eyebrow centree pour sections h2 centre */
.gk-eyebrow--center {
  display: block;
  text-align: center;
  align-self: center;
  margin: 0 auto 18px;
}

/* Harmonisation paddings sections home */
.gk-band > .gk-section { padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }

/* ==========================================================
   Comment ca marche : carte verte scroll-driven
   - container .gk-howto__scroll donne la longueur de scroll
   - .gk-howto__sticky occupe 100vh et se fige en haut du viewport
   - backdrop creme dans le sticky masque les sections adjacentes
     pendant le defilement fige
   ========================================================== */
.gk-howto { padding: 0; margin: 0; }
.gk-howto__scroll {
  position: relative;
  height: 178vh; /* sticky 78vh + travel 100vh, ~25vh par etape */
}
.gk-howto__sticky {
  position: sticky;
  top: 11vh;
  height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 64px);
}
/* Backdrop creme : remplit le viewport derriere la carte pendant le sticky,
   masque les sections au-dessus et en-dessous pour eviter tout overlap visuel. */
.gk-howto__backdrop {
  position: absolute;
  inset: 0;
  background: var(--gk-cream);
  z-index: 0;
}
.gk-howto__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--gk-green-deep);
  color: var(--gk-cream);
  border-radius: var(--gk-radius-lg);
  overflow: hidden;
  isolation: isolate;
  /* Etat par defaut : carte compacte, expand bien visible en pinned */
  min-height: clamp(420px, 58vh, 540px);
  display: flex;
  transition:
    min-height .7s cubic-bezier(.16, 1, .3, 1),
    max-width .8s cubic-bezier(.16, 1, .3, 1),
    border-radius .55s ease;
}
/* Etat pinned : remplit toute la sticky (78vh) et expand en largeur */
.gk-howto__sticky.is-pinned .gk-howto__inner {
  min-height: clamp(580px, 78vh, 720px);
  max-width: 1680px;
}

/* Stack d images de fond, une par etape */
.gk-howto__bg-stack { position: absolute; inset: 0; z-index: 0; }
.gk-howto__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity .9s cubic-bezier(.4, 0, .2, 1),
    transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.gk-howto__bg.is-active { opacity: 1; transform: scale(1); }

/* Overlay sombre pour la lisibilite du texte */
.gk-howto__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 28, 20, 0.55) 0%, rgba(8, 28, 20, 0.72) 60%, rgba(8, 28, 20, 0.88) 100%),
    linear-gradient(90deg, rgba(8, 28, 20, 0.45) 0%, rgba(8, 28, 20, 0) 70%);
  pointer-events: none;
}

/* Contenu au-dessus */
.gk-howto__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 3vw, 40px);
}

/* Top row : H2 section a gauche, CTA a droite */
.gk-howto__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.gk-howto__title {
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.18;
  margin: 0;
  max-width: 28ch;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}
.gk-howto__title em {
  font-style: italic;
  font-family: var(--gk-serif);
  font-weight: 400;
}
.gk-howto__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gk-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 4px 0 6px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: gap .25s ease, border-color .25s ease;
  flex-shrink: 0;
}
.gk-howto__cta svg { transition: transform .25s ease; }
.gk-howto__cta:hover { gap: 14px; border-bottom-color: #fff; color: #fff; }
.gk-howto__cta:hover svg { transform: translate(2px, -2px); }

/* Bloc central : titre + description par etape (swap entre 4 slides) */
.gk-howto__slides {
  position: relative;
  align-self: center;
  width: 100%;
  min-height: clamp(180px, 28vh, 260px);
}
.gk-howto__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s cubic-bezier(.4, 0, .2, 1),
    transform .7s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.gk-howto__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gk-howto__slide-num {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--gk-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: 999px;
}
.gk-howto__slide-title {
  margin: 0;
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.gk-howto__slide-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 60ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.gk-howto__slide-info {
  margin-top: 6px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-left: 2px solid #B5DDB7;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0 10px 10px 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-self: flex-start;
}
.gk-howto__slide-info-label {
  font-family: var(--gk-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #B5DDB7;
}
.gk-howto__slide-info-value {
  font-family: var(--gk-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: #fff;
}

/* Stepper horizontal avec barre de progression
   Les dots du 1er et du dernier step sont alignes respectivement sur les bords
   gauche et droit du container, les middle sont centres dans leur cellule.
   Du coup la barre va de left:11px (centre du 1er dot) a right:11px (centre du dernier). */
.gk-howto__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  align-self: end;
}
.gk-howto__step { flex: 0 1 auto; max-width: 22%; min-width: 0; }
@media (max-width: 1200px) {
  .gk-howto__step { max-width: 24%; }
}
.gk-howto__progress-track,
.gk-howto__progress {
  position: absolute;
  top: calc(14px + 11px);
  height: 1.5px;
  left: 11px;
  right: 11px;
  transform: translateY(-50%);
}
.gk-howto__progress-track { background: rgba(255, 255, 255, 0.22); z-index: 0; }
.gk-howto__progress {
  background: #B5DDB7;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease-out;
  z-index: 1;
}
.gk-howto__step {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  justify-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  transition: color .35s ease;
}
.gk-howto__step:first-of-type { justify-items: start; text-align: left; }
.gk-howto__step:first-of-type .gk-howto__dot { transform-origin: left center; }
.gk-howto__step:last-of-type { justify-items: end; text-align: right; }
.gk-howto__step:last-of-type .gk-howto__dot { transform-origin: right center; }
.gk-howto__step.is-active { color: #fff; }
.gk-howto__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gk-green-deep);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  position: relative;
  z-index: 2;
  transform-origin: center center;
  transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.gk-howto__step.is-passed .gk-howto__dot {
  background: #B5DDB7;
  border-color: #B5DDB7;
}
.gk-howto__step.is-active .gk-howto__dot {
  background: #fff;
  border-color: #fff;
  transform: scale(1.18);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
}
.gk-howto__num {
  font-family: var(--gk-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: #B5DDB7;
  opacity: .65;
  transition: opacity .35s ease;
}
.gk-howto__step.is-active .gk-howto__num,
.gk-howto__step.is-passed .gk-howto__num { opacity: 1; }
.gk-howto__step-title {
  font-family: var(--gk-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

@media (max-width: 900px) {
  /* ============================================================
     HOWTO MOBILE v3 : conversion du scroll-hijack 400vh en snap
     horizontal classique (meme pattern que le slider produits et
     le carrousel blog). Gain perf et hauteur enorme, contenu et
     semantique identiques (4 H3, 4 paragraphes), zero perte SEO.
     ============================================================ */
  .gk-howto { padding: clamp(28px, 6vw, 48px) 0; margin: 0; }
  /* Plus de scroll-hijack : le scroll vertical reprend son cours normal */
  .gk-howto__scroll { position: relative; height: auto; }
  .gk-howto__sticky { position: static; top: auto; height: auto; padding: 0; display: block; }
  .gk-howto__backdrop { display: none; }
  .gk-howto__inner {
    width: 100%; max-width: 100%; margin: 0; border-radius: 0;
    min-height: 0; height: auto; background: transparent;
    overflow: visible; position: relative; isolation: auto;
    display: block; transition: none !important; animation: none !important;
  }
  .gk-howto__bg-stack, .gk-howto__overlay { display: none; }
  .gk-howto__content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 18px;
    width: 100%; height: auto; padding: 0;
    grid-template-rows: none;
  }
  /* Header de section : eyebrow visuel via le titre + CTA discret a droite */
  .gk-howto__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 22px; margin: 0;
  }
  .gk-howto__title {
    font-family: var(--gk-display); font-weight: 400;
    font-size: clamp(28px, 7.4vw, 38px); line-height: 1.08;
    letter-spacing: -0.02em; color: var(--gk-ink); margin: 0;
  }
  .gk-howto__cta {
    flex: 0 0 auto;
    font-family: var(--gk-sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gk-green-deep);
    border-bottom: 1px solid var(--gk-green-deep);
    padding-bottom: 4px;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
  }

  /* Slides : container snap horizontal, hauteur fixe ~480px */
  .gk-howto__slides {
    --gk-howto-pad: 22px;
    --gk-howto-gap: 12px;
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: var(--gk-howto-gap);
    padding: 4px var(--gk-howto-pad);
    margin: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: var(--gk-howto-pad);
    scroll-padding-right: var(--gk-howto-pad);
    box-sizing: border-box; width: 100%;
    transform: none !important; transition: none !important;
    height: clamp(440px, 62vh, 540px);
    align-self: auto;
  }
  .gk-howto__slides::-webkit-scrollbar { display: none; }

  .gk-howto__slide {
    position: relative; inset: auto;
    flex: 0 0 calc(100vw - 2 * var(--gk-howto-pad));
    width: calc(100vw - 2 * var(--gk-howto-pad));
    max-width: none; height: 100%;
    scroll-snap-align: start; scroll-snap-stop: always;
    box-sizing: border-box;
    opacity: 1; transform: none; transition: none;
    pointer-events: auto;
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: flex-start;
    gap: 14px; padding: 26px 24px; color: #fff; margin: 0;
    border-radius: 24px; overflow: hidden; isolation: isolate;
    background-color: var(--gk-green-deep);
    background-image:
      linear-gradient(180deg, rgba(8, 28, 20, 0.62) 0%, rgba(8, 28, 20, 0.38) 28%, rgba(8, 28, 20, 0.78) 72%, rgba(8, 28, 20, 0.96) 100%),
      var(--howto-bg, none);
    background-size: cover, cover;
    background-position: center, center 30%;
    background-repeat: no-repeat, no-repeat;
  }
  .gk-howto__slide-num {
    position: absolute; top: 22px; left: 24px; margin: 0;
    align-self: auto; font-size: 11px; letter-spacing: 0.22em;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px); z-index: 2;
  }
  .gk-howto__slide-title {
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.05; letter-spacing: -0.022em;
    max-width: 14ch; margin: 0;
  }
  .gk-howto__slide-desc {
    font-size: 14px; line-height: 1.55;
    max-width: 38ch; color: rgba(255, 255, 255, 0.88); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .gk-howto__slide-info { padding: 10px 14px; margin-top: 2px; }

  /* Dots indicateurs (cliquables, comme slider produits) */
  .gk-howto__steps {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; padding: 18px 22px 0; margin-top: 0;
    border-top: 0; grid-template-columns: none;
    position: relative; flex: 0 0 auto;
  }
  .gk-howto__progress-track, .gk-howto__progress { display: none; }
  .gk-howto__step {
    max-width: none; padding: 0; flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: 999px;
    background: rgba(15, 61, 46, 0.20);
    transition: background .25s ease, width .3s cubic-bezier(.34, 1.56, .64, 1);
    display: block; cursor: pointer; color: transparent;
  }
  .gk-howto__step.is-active {
    background: var(--gk-green-deep); width: 24px;
  }
  .gk-howto__step.is-passed { background: rgba(15, 61, 46, 0.45); }
  .gk-howto__dot, .gk-howto__num, .gk-howto__step-title { display: none; }
}

/* Eyebrows plus grandes et plus marquees */
.home .gk-eyebrow,
.home .gk-eyebrow--leaf,
.home .gkrem__section-eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.22em;
  font-weight: 500;
  margin-bottom: 18px;
}

/* Tous les h2 de la home a la meme taille (hero excepte) */
.home .gk-display:not(.gk-hero__title):not(.gk-products__card-title),
.home .gkrem__flow-head h2,
.home .gk-products__title,
.home .gk-recond-band__title,
.home .gk-section--quote h2,
.home .gk-faq h2,
.home .gk-pros h2,
.home .gk-journal h2,
.home .gk-twoworlds h2,
.home .gk-waste h2 {
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
}

/* ==========================================================
   MOBILE REFINEMENTS (<= 768px)
   Bloc consolidé : rythme vertical, hero, produits, quote,
   arguments scroll horizontal, waste stack, pros, gekofrost,
   journal, faq.
   ========================================================== */
@media (max-width: 768px) {

  /* Espacements de section mobile : rythme aere, plus de respiration entre sections (Decharge mobile) */
  .home .gk-band > .gk-section,
  .home .gk-section { padding-top: clamp(44px, 9vw, 64px); padding-bottom: clamp(44px, 9vw, 64px); }
  /* Decharge mobile : line-height paragraphes plus aere pour la lisibilite */
  .home p { line-height: 1.6; }

  /* Titres home : taille mobile uniforme */
  .home .gk-display:not(.gk-hero__title),
  .home .gk-products__title,
  .home .gk-recond-band__title,
  .home .gk-section--quote h2,
  .home .gk-faq h2,
  .home .gk-pros h2,
  .home .gk-journal h2,
  .home .gk-twoworlds h2,
  .home .gk-waste h2 { font-size: clamp(28px, 7.4vw, 38px); line-height: 1.08; }

  /* iOS Safari status bar = blanc sur TOUTES les pages mobile.
     On pousse le body sous la safe-area-inset-top via padding : la zone status bar
     est alors peinte par html { background:#fff } et Safari sample blanc.
     Plus robuste que un overlay ::before z-index dependant du stacking context.
     Garde l overlay ::before en defense en profondeur sur la home (zero impact
     visuel additionnel puisque la zone est deja blanche). */
  body { padding-top: env(safe-area-inset-top, 0px); }
  body.home::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px);
    background-color: #fff;
    z-index: 10000;
    pointer-events: none;
  }

  /* Cookie banner : defer apparition de 3.5s sur la home pour ne pas casser
     le edge-to-edge vert de la hero (Safari iOS samplerait le fond gris #32323a
     du banner pose en bas et peindrait une bande grise sous le home indicator).
     Animation CSS pure (vs JS) : independante de l ordre des scripts plugins
     et battue par !important pour ecraser l animation cn-effect-fade du plugin
     Cookie Notice. */
  @keyframes gk-cookie-fadein {
    from { opacity: 0; visibility: hidden; pointer-events: none; }
    to { opacity: 1; visibility: visible; pointer-events: auto; }
  }
  /* Cible UNIQUEMENT la phase 'cookie-notice-visible' (apres que le plugin l a
     revele). Quand le user click Accept, le plugin retire cette classe : notre
     selector ne match plus, notre animation libere le animation-name override,
     et la fadeOut native du plugin (.cn-effect-fade) joue normalement pour
     declencher animationend -> ajout de .cookie-notice-hidden -> banner masque.
     animation-delay 3.5s + fill-mode both : pendant 0-3.5s, state = from = hidden. */
  body.home #cookie-notice.cookie-notice-visible {
    animation: gk-cookie-fadein 0.5s ease-out 3.5s 1 both !important;
  }

  /* HERO v5 mobile v2026-05-14-edge-to-edge : full bleed iOS (image derriere status bar
     + url bar via margin negatif des safe areas + 100svh + viewport-fit=cover),
     fond BLANC quand la card apparait au scroll (pas de fond vert qui depasse).
     100svh (small viewport height) = zone minimale garantie quand toutes les barres
     du navigateur sont etendues. Stable au scroll, ne grandit jamais (vs dvh qui
     s adapte quand Chrome/Safari iOS retracte leur chrome). Sur Safari iOS qui
     retracte au scroll, un petit fond blanc apparait sous la card, coherent avec
     l effet "card sur fond blanc". */
  .gk-hero {
    padding: 0;
    /* Hauteur = viewport visible + zone de scroll qui pin le hero pendant la transition */
    height: calc(100vh + 220px);
    height: calc(100svh + 220px);
    position: relative;
    background: #fff;
  }
  .gk-hero__inner {
    position: sticky;
    top: 0;
    /* Edge-to-edge UNIQUEMENT en bas (sous home indicator). Pas de margin-top
       negatif : la hero ne remonte plus sous status bar, le body blanc passe
       sous l encoche -> status bar = blanc. Hero deborde seulement en bas. */
    margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    height: calc(100vh + env(safe-area-inset-bottom, 0px));
    height: calc(100svh + env(safe-area-inset-bottom, 0px));
    padding: var(--hero-pad, 0px);
    background: #fff;
    transition: padding .08s linear;
    box-sizing: border-box;
    /* Reset des proprietes heritees du CSS desktop (border-radius/overflow) qui causaient
       un double effet de coins arrondis (inner clip card avant que la card ait son propre radius) */
    border-radius: 0;
    overflow: visible;
  }
  .gk-hero__card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--hero-radius, 0px);
    overflow: hidden;
    background: var(--gk-green-deep);
    transition: border-radius .08s linear;
  }
  .gk-hero__bg {
    position: absolute;
    inset: 0;
    /* Gradient OPAQUE en haut (0-20%) ET en bas (60-100%) pour masquer le fond
       green-screen non detoure de la photo (sinon une bande vert clair apparait
       sous la status bar iOS et entre la status bar et le mannequin). Centre
       transparent (20-60%) pour laisser le mannequin visible. Le gradient est
       AU-DESSUS de l img (via z-index sur ::after) pour masquer le greenscreen. */
    background-color: #081C14;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .gk-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(8,28,20,1) 0%,
      rgba(8,28,20,0.92) 10%,
      rgba(8,28,20,0.55) 22%,
      rgba(8,28,20,0.15) 36%,
      rgba(0,0,0,0) 50%,
      rgba(8,28,20,0.15) 64%,
      rgba(8,28,20,0.55) 78%,
      rgba(8,28,20,0.92) 90%,
      rgba(8,28,20,1) 100%
    );
    pointer-events: none;
    z-index: 2;
  }
  /* Override mobile : object-position centre, zoom transform sur l img, pas sur le wrapper */
  .gk-hero__bg-img {
    object-position: 50% 50%;
    transform: scale(var(--hero-zoom, 1));
    transform-origin: 50% 40%;
    will-change: transform;
    z-index: 1;
  }
  /* Sur mobile, le gradient global du .gk-hero__inner::after fait double emploi
     avec celui du .gk-hero__bg::after qui est plus opaque. On le neutralise. */
  .gk-hero__inner::after { display: none; }
  .gk-hero__content {
    position: relative;
    z-index: 1;
    height: 100%;
    /* Compense la safe area iOS pour que eyebrow/titre restent sous status bar,
       et que le CTA remonte au-dessus de l'url bar / home indicator */
    padding: max(96px, env(safe-area-inset-top, 0px) + 72px) 22px max(64px, env(safe-area-inset-bottom, 0px) + 40px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
  }
  /* Affiche les elements reserves mobile */
  .gk-hero__mobile-only { display: block; }
  .gk-hero__content {
    gap: 14px;
    width: 100%;
    max-width: none;
  }
  .gk-hero__eyebrow {
    font-family: var(--gk-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    margin-bottom: 2px;
  }
  .gk-hero__title {
    font-size: clamp(34px, 8.6vw, 42px);
    line-height: 1.03;
    letter-spacing: -0.022em;
    margin: 0;
  }
  .gk-hero__lede {
    font-family: var(--gk-sans);
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255,255,255,0.86);
    margin: 0;
    max-width: 32ch;
  }
  .gk-hero__info-row {
    list-style: none;
    margin: 6px 0 4px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .gk-hero__info-row li {
    font-family: var(--gk-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    padding: 6px 10px;
    border-radius: var(--gk-radius-pill);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(4px);
    white-space: nowrap;
  }
  .gk-hero__ctas {
    width: 100%;
    gap: 10px;
    margin-top: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .gk-hero__cta {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    min-height: 52px;
  }
  /* Decharge mobile : retire la pill 'Garantie 2 ans' (deco non SEO) */
  .gk-hero__info-row li:nth-child(2) { display: none; }
  /* Decharge mobile : retire le 2e CTA 'Comment ca marche' (anchor scroll superflu, le scroll naturel y mene) */
  .gk-hero__cta--secondary.gk-hero__mobile-only { display: none; }

  /* PRODUITS */
  .gk-section--products .gk-section__head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
  .gk-products__title { font-size: clamp(28px, 7.4vw, 38px); max-width: none; }
  .gk-products__cta { font-size: 11px; letter-spacing: 0.18em; }
  /* Slider horizontal snap, peek de la card suivante */
  .gk-products-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 20px 4px;
    margin: 0 -20px;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
  }
  .gk-products-grid::-webkit-scrollbar { display: none; }
  .gk-product-card {
    flex: 0 0 75vw;
    max-width: 320px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .gk-product-card:last-child { margin-right: 4px; }
  .gk-product-card__media { aspect-ratio: 4 / 5; border-radius: 20px; }
  .gk-product-card__title { font-size: 13px; }
  .gk-product-card__info { left: 20px; bottom: 18px; }

  /* Dots indicateur (genere par JS uniquement mobile) */
  .gk-products-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 0 20px;
  }
  .gk-products-dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: block;
    width: 8px;
    height: 6px;
    border-radius: 999px;
    background: var(--gk-line-strong);
    transition:
      background .25s ease,
      width .3s cubic-bezier(.34, 1.56, .64, 1);
    cursor: pointer;
    flex-shrink: 0;
  }
  .gk-products-dot.is-active {
    background: var(--gk-green-deep);
    width: 22px;
  }

  /* QUOTE 21 JOURS */
  .gk-section--quote h2 { max-width: 18ch; }
  .gk-guess { width: 100%; margin: 24px auto 16px; gap: 14px; }
  .gk-guess__value .gk-script-big { font-size: clamp(58px, 16vw, 76px); }
  .gk-guess__unit { font-size: 16px; }
  .gk-guess__submit { padding: 14px 28px; font-size: 12px; width: 100%; }
  .gk-guess__result { font-size: 14px; }

  /* ARGUMENTS PILLS : masques sur mobile (4 boutons trop redondants avec la nav) */
  .gk-arguments { display: none; }

  /* WASTE / GACHIS : carte verte verticale */
  .gk-waste__grid { gap: 14px; }
  .gk-waste__lead { padding: 0; gap: 12px; }
  .gk-waste__intro { font-size: 17px; line-height: 1.4; }
  .gk-waste__main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 22px;
    padding: 26px 22px;
    border-radius: 20px;
  }
  .gk-waste__head { gap: 16px; }
  .gk-waste__head h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.05; }
  .gk-waste__cta { width: 44px; height: 44px; }
  .gk-waste__chart { height: 140px; gap: 6%; }
  .gk-waste__bar { border-radius: 10px; }
  .gk-waste__counter { padding-bottom: 0; gap: 4px; align-items: flex-start; }
  .gk-waste__counter-value { font-size: clamp(48px, 13vw, 64px); }
  .gk-waste__counter-label { font-size: 12px; }

  /* PROS : section devient un accordeon collapsable */
  .gk-pros { padding-top: 24px; padding-bottom: 24px; }
  .gk-pros__collapse {
    background: var(--gk-paper);
    border: 1px solid var(--gk-line);
    border-radius: var(--gk-radius-md);
    padding: 18px 20px;
    transition: padding .3s ease;
  }
  .gk-pros__collapse[open] { padding-bottom: 22px; }
  .gk-pros__summary {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    margin: 0;
    cursor: pointer;
    padding: 4px 0;
  }
  .gk-pros__summary .gk-eyebrow,
  .gk-pros__summary .gk-eyebrow--leaf {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .gk-pros__summary h2 {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(20px, 5.4vw, 26px);
    max-width: none;
    line-height: 1.15;
    margin: 0;
  }
  .gk-pros__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gk-green-soft);
    color: var(--gk-green-deep);
    transition: transform .3s ease;
  }
  .gk-pros__collapse[open] .gk-pros__chev { transform: rotate(180deg); }
  .gk-pros__inner {
    padding: 16px 0 0;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 16px;
    border-top: 1px solid var(--gk-line);
  }
  .gk-pros__copy { gap: 16px; }
  .gk-pros__copy h2 { font-size: clamp(28px, 7.4vw, 38px); max-width: none; }
  .gk-pros__lede { font-size: 15.5px; line-height: 1.55; }
  .gk-pros__stats { width: 100%; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 0; }
  .gk-pros__stats strong { font-size: 24px; }
  .gk-pros__ctas { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .gk-pros__ctas .gk-btn { width: 100%; justify-content: center; }
  .gk-pros__card { padding: 22px 22px 24px; }
  .gk-pros__card ul { gap: 12px; }
  .gk-pros__card li { font-size: 13.5px; }

  /* GEKOFROST */
  /* GEKOFROST mobile : tightener visuel, garde tout le contenu, retire le 2e CTA Documentation (le menu nav y mene) */
  .gk-gekofrost__grid { gap: 18px; }
  .gk-gekofrost__media { min-height: 280px; padding: 22px; }
  .gk-gekofrost__title { font-size: clamp(30px, 8vw, 40px); }
  .gk-gekofrost__badge { width: clamp(96px, 26vw, 130px); }
  .gk-gekofrost__copy { gap: 16px; }
  .gk-feature { gap: 14px; }
  .gk-feature h4 { font-size: 16.5px; margin-bottom: 4px; }
  .gk-feature p { font-size: 13.5px; line-height: 1.55; }
  .gk-gekofrost__cta { gap: 10px; }
  .gk-gekofrost__cta .gk-btn { width: 100%; justify-content: center; }
  .gk-gekofrost__cta .gk-btn--ghost { display: none; }

  /* JOURNAL : carrousel horizontal scroll-snap sur mobile, dots geres par JS */
  .gk-journal__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .gk-journal__head .gk-btn { justify-self: start; }
  .gk-journal__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 20px;
    margin: 0 -20px;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
  }
  .gk-journal__grid::-webkit-scrollbar { display: none; }
  .gk-journal__card {
    flex: 0 0 78vw;
    max-width: 340px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .gk-journal__media { aspect-ratio: 16 / 10; border-radius: 16px; }
  .gk-journal__body { gap: 8px; }
  .gk-journal__title { font-size: 18px; line-height: 1.25; }
  /* Decharge mobile : cache l'excerpt (titre + meta suffisent en swipe) et le bouton 'Voir les articles' (le menu nav porte le lien) */
  .gk-journal__excerpt { display: none; }
  .gk-journal__head .gk-btn { display: none; }
  .gk-journal__cat { font-size: 9.5px; padding: 5px 10px; }

  /* Dots indicateur (injecte par JS) */
  .gk-journal-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 0 20px;
  }
  .gk-journal-dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: block;
    width: 8px;
    height: 6px;
    border-radius: 999px;
    background: var(--gk-line-strong);
    transition: background .25s ease, width .3s cubic-bezier(.34, 1.56, .64, 1);
    cursor: pointer;
    flex-shrink: 0;
  }
  .gk-journal-dot.is-active {
    background: var(--gk-green-deep);
    width: 22px;
  }

  /* FAQ : tightener mobile pour gagner de la respiration sans toucher au contenu */
  .gk-faq h2 { margin-bottom: 18px; max-width: 18ch; }
  .gk-faq__q { padding: 18px 4px; font-size: 15.5px; gap: 14px; }
  .gk-faq__icon { width: 22px; height: 22px; }
  .gk-faq__icon svg { width: 16px; height: 16px; }
  .gk-faq__a { padding: 0 4px 18px; font-size: 14px; line-height: 1.65; }

  /* Eyebrows mobile : un poil plus compactes */
  .home .gk-eyebrow,
  .home .gk-eyebrow--leaf { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 12px; }
}

/* Très petit (iPhone SE 375 et moins) */
@media (max-width: 380px) {
  .gk-hero__title { font-size: 32px; }
  .home .gk-display:not(.gk-hero__title),
  .home .gk-products__title,
  .home .gk-waste__head h2,
  .home .gk-pros h2,
  .home .gk-gekofrost__title,
  .home .gk-journal h2,
  .home .gk-faq h2,
  .home .gk-section--quote h2 { font-size: 27px; }
  .gk-arguments__row .gk-arg-pill { width: 80vw; }
}

/* Anti-overflow safety net */
.gk-home, .gk-home * { min-width: 0; }
.gk-home { overflow-x: clip; }

/* Dots slider produits : caches en desktop */
@media (min-width: 769px) {
  .gk-products-dots { display: none !important; }
}