/* === GEKOMED - DESIGN SYSTEM === */

:root {
  /* Force le rendu en mode clair UNIQUEMENT. Samsung Internet + Chrome Android
     ont un "Mode Nuit" qui inverse les couleurs et casse notre palette vert pale.
     color-scheme: only light signale au navigateur de NE PAS adapter les couleurs
     systeme (selects, inputs natifs, scrollbar) au theme sombre. */
  color-scheme: only light;

  --gk-green-deep:   #0F3D2E;
  --gk-green-darker: #0A2E22;
  --gk-green-mid:    #2F5743;
  --gk-green-soft:   #E8F0E5;
  --gk-green-pale:   #F4F8F2;
  --gk-sage:         #5A7A5C;
  --gk-cream:        #FFFFFF;
  --gk-paper:        #FFFFFF;
  --gk-ink:          #0A0A0A;
  --gk-ink-soft:     #4A4A4A;
  --gk-line:         rgba(15, 61, 46, 0.12);
  --gk-line-strong:  rgba(15, 61, 46, 0.25);

  /* Palette reconditionne : blanc + beige doux, alignee sur gekomed.com.
     Beige discret, pas de marron lourd. Accent sable chaud comme signature. */
  --rc-bg:           #FAF7F1;        /* creme paper, comme gekomed.com */
  --rc-bg-2:         #F1EADB;        /* beige doux */
  --rc-card:         #FFFFFF;
  --rc-ink:          #1F1F1F;        /* noir neutre, pas brun */
  --rc-ink-soft:     #6B6B6B;
  --rc-line:         rgba(31, 31, 31, 0.12);
  --rc-line-strong:  rgba(31, 31, 31, 0.22);
  --rc-amber:        #B89968;        /* sable chaud, signature recond */
  --rc-amber-soft:   #EFE7D6;        /* beige clair pour fonds */
  --rc-tape:         #DCC9A6;        /* masking tape sable doux */
  --rc-accent:       #B89968;
  --rc-accent-dark:  #8A7148;

  --gk-display: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --gk-serif:  'Newsreader', 'EB Garamond', Georgia, serif;
  --gk-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --gk-script: 'Caveat', 'Homemade Apple', cursive;
  --gk-mono:   'JetBrains Mono', 'Courier New', monospace;

  --gk-radius-lg:   22px;
  --gk-radius-md:   14px;
  --gk-radius-sm:    8px;
  --gk-radius-pill: 999px;

  --gk-space-xs:   8px;
  --gk-space-sm:  16px;
  --gk-space-md:  32px;
  --gk-space-lg:  64px;
  --gk-space-xl: 100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--gk-sans);
  color: var(--gk-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.gk-ticker {
  background: var(--gk-green-deep);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gk-ticker__phone { display: flex; align-items: center; gap: 8px; }

.gk-nav {
  background: #fff;
  border-bottom: 1px solid var(--gk-line);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.gk-nav__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: var(--gk-radius-md);
  overflow: hidden;
  transition: transform .2s;
}
.gk-nav__logo:hover { transform: scale(1.02); }
.gk-nav__logo img {
  display: block;
  height: 48px;
  width: auto;
}
.gk-nav__links {
  display: flex;
  gap: 36px;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gk-nav__links li { display: inline-flex; align-items: center; }
.gk-nav__links a {
  padding: 6px 0;
  position: relative;
  transition: color .2s;
  color: var(--gk-ink);
  text-decoration: none;
}
.gk-nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--gk-green-deep);
  transition: right .25s cubic-bezier(.2,.8,.2,1);
}
.gk-nav__links a:hover { color: var(--gk-green-deep); }
.gk-nav__links a:hover::after { right: 0; }
.gk-nav__links .current-menu-item > a,
.gk-nav__links a.active { color: var(--gk-green-deep); }
.gk-nav__links .current-menu-item > a::after,
.gk-nav__links a.active::after { right: 0; }
.gk-nav__right { display: flex; align-items: center; gap: 24px; }
.gk-nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
  border-bottom: 2px solid var(--gk-green-deep);
  padding-bottom: 4px;
}
.gk-nav__cart-btn {
  position: relative;
  background: none;
  border: none;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--gk-ink);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.gk-nav__cart-btn:hover { color: var(--gk-green-deep); }
.gk-nav__cart-count {
  position: absolute;
  top: 0; right: 0;
  background: var(--gk-green-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--gk-radius-pill);
  background: #fff;
  border: 1px solid var(--gk-line);
  font-size: 13px;
  font-weight: 500;
  color: var(--gk-ink);
  transition: all .25s ease;
  cursor: pointer;
}
/* Hover restreint aux pills interactifs (a, button). Les <div class="gk-pill">
   statiques (boutique) ne doivent pas reagir au hover. */
a.gk-pill:hover, button.gk-pill:hover { background: var(--gk-green-soft); border-color: var(--gk-green-deep); }
.gk-pill--dark { background: var(--gk-green-deep); color: #fff; border-color: var(--gk-green-deep); }
a.gk-pill--dark:hover, button.gk-pill--dark:hover { background: var(--gk-green-darker); }
.gk-pill--active { background: var(--gk-green-deep); color: #fff; border-color: var(--gk-green-deep); }
.gk-pill__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gk-green-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
}
.gk-pill--dark .gk-pill__icon { background: rgba(255,255,255,0.12); }

.gk-display {
  font-family: var(--gk-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--gk-ink);
}
.gk-display em { font-style: italic; font-family: var(--gk-serif); }

/* Tous les em dans titres : serif italique Fraunces (accent word) */
h1 em, h2 em, h3 em, h4 em,
[class*="__title"] em, [class*="__heading"] em,
[class*="__hero-title"] em, [class*="__display"] em {
  font-family: var(--gk-serif);
  font-style: italic;
  font-weight: 400;
}

.gk-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gk-green-deep);
}

/* ============================================================
   SECTIONS & BANDES (composants generiques)
   ============================================================ */
.gk-section {
  padding: clamp(20px, 2.4vw, 36px) clamp(20px, 4vw, 64px);
  max-width: 1600px;
  margin: 0 auto;
}
.gk-band {
  width: 100%;
  display: flow-root;
}
.gk-band--white { background: var(--gk-paper); }
.gk-band--cream { background: var(--gk-cream); }
.gk-band--green-pale { background: var(--gk-green-pale); }
.gk-band--dark { background: var(--gk-green-deep); color: #fff; }
.gk-band > .gk-section { padding-top: clamp(24px, 2.6vw, 40px); padding-bottom: clamp(24px, 2.6vw, 40px); }

.gk-section__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--gk-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gk-green-deep);
  margin-bottom: 16px;
}

.gk-script-accent {
  font-family: var(--gk-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gk-ink);
  letter-spacing: -0.01em;
  font-size: 1em;
  line-height: inherit;
  display: inline;
  padding: 0;
}

/* ============================================================
   BOUTONS (composant unique)
   ============================================================ */
.gk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 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;
  transition: all .25s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
}
.gk-btn__arrow { transition: transform .25s ease; }
.gk-btn:hover .gk-btn__arrow { transform: translateX(4px); }

.gk-btn--dark { background: var(--gk-green-deep); color: #fff; border-color: var(--gk-green-deep); }
.gk-btn--dark:hover { background: var(--gk-green-darker); border-color: var(--gk-green-darker); color: #fff; }

.gk-btn--light { background: transparent; color: #fff; border-color: #fff; }
.gk-btn--light:hover { background: #fff; color: var(--gk-green-deep); }

.gk-btn--ghost {
  background: transparent;
  color: var(--gk-ink);
  border-bottom: 1.5px solid var(--gk-ink);
  border-radius: 0;
  padding: 8px 0;
}
.gk-btn--ghost:hover { color: var(--gk-green-deep); border-bottom-color: var(--gk-green-deep); }

.gk-btn--amber {
  background: var(--rc-ink);
  color: var(--rc-amber-soft);
  border-color: var(--rc-ink);
}
.gk-btn--amber:hover { background: var(--rc-accent-dark); border-color: var(--rc-accent-dark); color: #fff; }

.gk-btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}
.gk-btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

.gk-btn--lg { padding: 18px 32px; font-size: 13.5px; }

.gk-footer {
  background: var(--gk-green-deep);
  color: #fff;
  padding: 80px 64px 40px;
  margin-top: 0;
}
.gk-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.gk-footer h3 {
  font-family: var(--gk-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 16px;
}
.gk-footer h3 em { font-style: italic; }
.gk-footer__col h4 {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 18px;
  font-weight: 600;
}
.gk-footer__col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.gk-footer__bottom {
  max-width: 1400px;
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.6;
}

.gk-footer__newsletter-form {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  max-width: 360px;
}
.gk-footer__newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--gk-radius-pill);
  color: #fff;
  font-size: 13px;
  font-family: var(--gk-sans);
}
.gk-footer__newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }
.gk-footer__newsletter-form button {
  padding: 12px 18px;
  background: #fff;
  color: var(--gk-green-deep);
  border: none;
  border-radius: var(--gk-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.gk-img-ph {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 75%, transparent 75%),
    linear-gradient(var(--ph-bg, #3A6B52), var(--ph-bg-2, #2F5743));
  background-size: 14px 14px, 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-family: var(--gk-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.gk-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--gk-green-deep);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--gk-radius-pill);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gk-line-strong); border-radius: 4px; }

.gk-nav__menu-btn {
  display: none;
  background: none;
  border: none;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gk-ink);
}
/* Mobile menu : styles consolidés dans layout.css */

@media (max-width: 1100px) {
  .gk-nav { padding: 12px 24px; }
  .gk-nav__links { display: none; }
  .gk-nav__cta { display: none; }
  .gk-nav__menu-btn { display: inline-flex; }
  .gk-footer { padding: 60px 32px 32px; }
  .gk-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .gk-ticker { display: none; }
  .gk-nav { padding: 10px 16px; }
  .gk-nav__logo { font-size: 18px; padding: 8px 12px; }
  /* Bouton panier en cercle 36x36, jumeau du hamburger menu, a sa gauche.
     On masque l Espace Pro et le divider pour faire de la place.
     IMPORTANT : on utilise #gk-cart-open (ID) car mega-menu.css cache
     ce bouton via son ID sous 1100px (selecteur plus specifique que la classe). */
  .gk-nav__pro,
  .gk-nav__divider { display: none; }
  /* Bouton panier en cercle 48x48 (jumeau du hamburger menu).
     Fond blanc, bordure pour le distinguer du hamburger qui est plein vert. */
  #gk-cart-open {
    display: inline-flex !important;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--gk-line-strong);
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--gk-ink);
  }
  #gk-cart-open svg { width: 20px; height: 20px; }
  .gk-nav__cart-btn span:not(.gk-nav__cart-count) { display: none; }
  .gk-nav__cart-btn .gk-nav__cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gk-green-deep);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .gk-nav__right { gap: 8px; }
  .gk-footer { padding: 48px 20px 24px; }
  .gk-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .gk-footer h3 { font-size: 28px; }
  .gk-footer__bottom { flex-direction: column; gap: 8px; text-align: center; margin-top: 36px; }
}

/* ---------- FAQ shared component ---------- */
.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; }

/* ============================================================
 * COOKIE BANNER (informatif uniquement)
 * ============================================================
 * Bandeau bas de page rendu via inc/cookie-banner.php au hook wp_footer.
 * Etat memorise client-side (localStorage gk_cookie_seen, 365j).
 * z-index 9000 : au-dessus du header (50) et mega-menu (200), sous le
 * cart drawer (10000) pour ne pas bloquer la finalisation d achat.
 */
.gk-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: #fff;
  border-top: 1px solid var(--gk-line-strong);
  box-shadow: 0 -8px 28px rgba(15, 61, 46, 0.06);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 16px clamp(20px, 4vw, 32px);
}
.gk-cookie.is-visible { transform: translateY(0); }
.gk-cookie[hidden] { display: none; }

.gk-cookie__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.gk-cookie__text {
  flex: 1 1 380px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gk-ink-soft);
}

.gk-cookie__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gk-cookie .gk-btn { font-size: 12px; padding: 11px 22px; }
/* Override : ghost garde son padding horizontal nul pour que le soulignement
   ne deborde pas avant/apres le texte (spec plus haute que .gk-btn--ghost). */
.gk-cookie .gk-btn--ghost { padding: 8px 0; }

@media (max-width: 720px) {
  .gk-cookie { padding: 14px 16px 16px; }
  .gk-cookie__inner { gap: 12px; }
  .gk-cookie__text { font-size: 12.5px; flex-basis: 100%; }
  .gk-cookie__actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
 * PERF MOBILE : neutralise backdrop-filter sur <=1023px
 * ============================================================
 * iOS Safari recompute le blur a chaque frame de scroll quand l element
 * est position:sticky/fixed -> jank visible. Le mega-menu desactivait deja
 * son blur en mobile, mais le header .gk-nav, .gk-btn--outline, et les
 * pastilles .gk-hero__cta--secondary / .gk-recond-band__step / labels
 * restaient avec blur(4-8px). 14 occurrences au total sur la home -> rendu
 * mobile saccade.
 *
 * Override universel sur mobile <=1023px : aucun backdrop-filter actif.
 * Le fond rgba reste, juste sans le flou -> texte plus lisible sur fond
 * complexe et zero recompute GPU. Quand on aura Cloudflare devant et un
 * iPhone milieu de gamme moins penalise, on pourra reactiver selectivement.
 */
@media (max-width: 1023px) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}