/* =============================================================
   Clocky — Critical overrides (variables + header + boutons WC)
   Chargé sur toutes les pages, après clocky-main.
   ============================================================= */

/* ── Variables Paniez ── */
:root {
  --cream:       #FAFAF0;
  --cream-warm:  #F4F1E4;
  --paper:       #FFFFFF;
  --green:       #ABD082;
  --green-deep:  #6F9A4D;
  --green-dark:  #46622E;
  --green-ink:   #2C3E1B;
  --orange:      #E58A2E;
  --orange-warm: #D07020;
  --brown:       #2A1810;
  --brown-soft:  #6B4F40;
  --brown-mute:  #9C8676;
  --gray-line:   rgba(48,24,13,0.10);
  --line:        rgba(48,24,13,0.10);
  --line-soft:   rgba(48,24,13,0.05);
  --display:     "Fraunces", Georgia, serif;
  --serif:       "Fraunces", Georgia, serif;
  --sans:        "Inter", -apple-system, sans-serif;
  --logo:        "Fjalla One", sans-serif;
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Palette Blocksy → nos couleurs */
  --theme-palette-color-1: var(--orange);
  --theme-palette-color-2: var(--orange-warm);
  --theme-palette-color-3: var(--brown);
  --theme-palette-color-4: var(--green-deep);
  --theme-palette-color-5: var(--cream-warm);
  --theme-palette-color-6: var(--brown-mute);
  --theme-palette-color-7: var(--cream);
  --theme-palette-color-8: var(--green-ink);
}

/* ── Boutons WooCommerce → orange ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--orange) !important;
  color: #fff !important;
  border-color: var(--orange) !important;
  border-radius: var(--radius-pill) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover {
  background-color: var(--orange-warm) !important;
}

/* ── Header ── */
.clocky-header {
  padding: 18px 40px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  background: rgba(250,250,240,0.97) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(48,24,13,0.05) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.admin-bar .clocky-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .clocky-header { top: 46px !important; }
}

.clocky-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.clocky-logo img    { height: 50px !important; width: auto !important; }
.clocky-logo-text {
  font-family: "Fjalla One", sans-serif !important;
  font-size: 22px !important;
  color: var(--green-deep) !important;
  letter-spacing: 0.3px !important;
}

.clocky-nav {
  display: flex !important;
  gap: 32px !important;
  list-style: none !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.clocky-nav a {
  color: var(--brown) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: color 0.2s !important;
}
.clocky-nav a:hover { color: var(--green-dark) !important; }

.clocky-header-actions {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.clocky-cart-btn {
  background: var(--brown) !important;
  color: var(--cream) !important;
  border: none !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.clocky-cart-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: var(--orange) !important;
  color: var(--brown) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.clocky-cart-badge.is-hidden { display: none !important; }

.clocky-user-link {
  color: var(--brown) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── Header responsive ── */
@media (max-width: 1100px) {
  .clocky-header {
    padding: 14px 20px !important;
    grid-template-columns: 1fr auto !important;
  }
  body.woocommerce-checkout .clocky-header,
  body.woocommerce-order-received .clocky-header {
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  body.woocommerce-checkout .clocky-logo-text,
  body.woocommerce-order-received .clocky-logo-text { display: none !important; }
  .ck-step-label   { display: none !important; }
  .ck-header-progress { gap: 8px !important; }
  .ck-progress-step   { gap: 0 !important; }
  .ck-progress-line   { width: 16px !important; min-width: 16px !important; }
  .clocky-nav         { display: none !important; }
  .clocky-header > nav { display: none !important; }
}