/*
Theme Name: Kwendeal Maison
Theme URI: https://kwendeal.com
Author: Kwendeal
Author URI: https://kwendeal.com
Description: Thème maison de luxe inspiré des grandes maisons françaises — architecture éditoriale, navigation mega-menu, mise en page cinématique. WooCommerce compatible.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kwendeal-maison
Tags: e-commerce, luxury, woocommerce, editorial, minimalist, full-width-template, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, rtl-language-support, translation-ready
*/

/* ============================================================================
   DESIGN TOKENS
   Palette : remplacement de l'orange Hermès (#e27c30) par le système Kwendeal
   ============================================================================ */

:root {
  /* Couleurs principales */
  --km-white:        #ffffff;
  --km-cream:        #f9f7f4;
  --km-cream-2:      #f2efea;
  --km-border:       #e0dbd4;
  --km-mid:          #9a9590;
  --km-charcoal:     #2c2c2a;
  --km-ink:          #1a1a18;

  /* Accent (remplace l'orange Hermès) */
  --km-accent:       #7c6f5e;   /* taupe chaud */
  --km-gold:         #b8974d;   /* or */
  --km-gold-light:   #d4b87a;   /* or clair survol */

  /* Typographie */
  --km-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --km-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espacement */
  --km-space-xs:  4px;
  --km-space-sm:  8px;
  --km-space-md:  16px;
  --km-space-lg:  24px;
  --km-space-xl:  40px;
  --km-space-2xl: 64px;
  --km-space-3xl: 96px;
  --km-space-4xl: 128px;

  /* Mise en page */
  --km-container: 1440px;
  --km-gutter:    40px;
  --km-header-h:  44px;

  /* Transitions */
  --km-ease:       cubic-bezier(.25, .1, .25, 1);
  --km-ease-out:   cubic-bezier(.0, 0, .2, 1);
  --km-duration:   300ms;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--km-font-body);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--km-ink);
  background: var(--km-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }

/* Skip link */
.km-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--km-space-md);
  background: var(--km-ink);
  color: var(--km-white);
  padding: 8px 16px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 10000;
}
.km-skip-link:focus { left: var(--km-space-md); }

/* ============================================================================
   LAYOUT UTILITAIRES
   ============================================================================ */

.km-container {
  width: 100%;
  max-width: var(--km-container);
  margin-inline: auto;
  padding-inline: var(--km-gutter);
}

.km-container--narrow {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--km-gutter);
}

.km-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================================
   TYPOGRAPHIE GLOBALE
   ============================================================================ */

.km-eyebrow {
  display: inline-block;
  font-family: var(--km-font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--km-mid);
}

h1, h2, h3, h4 {
  font-family: var(--km-font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--km-ink);
}

/* ============================================================================
   BOUTONS
   ============================================================================ */

.km-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--km-font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--km-duration) var(--km-ease),
              opacity var(--km-duration) var(--km-ease);
  position: relative;
}

/* CTA avec ligne animée sous le texte */
.km-btn--underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--km-duration) var(--km-ease);
}
.km-btn--underline:hover::after { transform: scaleX(0); transform-origin: right; }

.km-btn--primary {
  background: var(--km-ink);
  color: var(--km-white);
  padding: 14px 32px;
  font-size: .6875rem;
  letter-spacing: .14em;
  transition: background var(--km-duration) var(--km-ease);
}
.km-btn--primary:hover { background: var(--km-accent); }

.km-btn--ghost {
  color: var(--km-ink);
  border: 1px solid var(--km-ink);
  padding: 13px 32px;
  font-size: .6875rem;
  letter-spacing: .14em;
  transition: background var(--km-duration) var(--km-ease),
              color var(--km-duration) var(--km-ease);
}
.km-btn--ghost:hover { background: var(--km-ink); color: var(--km-white); }

.km-btn--gold {
  color: var(--km-gold);
}
.km-btn--gold:hover { color: var(--km-gold-light); }

/* Flèche inline */
.km-arrow {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--km-duration) var(--km-ease);
}
.km-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.km-btn:hover .km-arrow { width: 40px; }

/* ============================================================================
   BARRE D'ANNONCE
   ============================================================================ */

.km-announcement {
  background: var(--km-ink);
  color: var(--km-white);
  text-align: center;
  padding: 7px var(--km-gutter);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .1em;
}

.km-announcement a {
  color: var(--km-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   HEADER — 2 lignes : top (logo + actions) | bottom (nav)
   ============================================================================ */

.km-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--km-white);
  transition: box-shadow var(--km-duration) var(--km-ease);
}

.km-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}

/* ── Ligne 1 : Logo centré + Actions droite ── */
.km-header__top {
  border-bottom: 1px solid var(--km-border);
}

.km-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 var(--km-gutter);
  position: relative;
}

/* Logo — centré absolument dans la ligne */
.km-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.km-logo {
  font-family: var(--km-font-display);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--km-ink);
  white-space: nowrap;
  text-decoration: none;
  display: block;
}

/* Actions — à droite */
.km-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.km-header__action {
  display: flex;
  align-items: center;
  color: var(--km-charcoal);
  transition: color var(--km-duration);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.km-header__action:hover { color: var(--km-accent); }
.km-header__action svg  { width: 17px; height: 17px; display: block; }

.km-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: var(--km-accent);
  color: var(--km-white);
  border-radius: 50%;
  font-size: .5rem;
  font-weight: 700;
  margin-left: 2px;
}

/* Burger mobile */
.km-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--km-ink);
  line-height: 1;
}

/* ── Ligne 2 : Navigation horizontale ── */
.km-header__bottom {
  border-bottom: 1px solid var(--km-border);
}

.km-header__nav {
  display: flex;
  justify-content: center;
}

.km-nav__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.km-nav__item {
  position: static;
}

.km-nav__trigger {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  height: 36px;
  font-family: var(--km-font-body);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--km-charcoal);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  transition: color var(--km-duration);
  text-decoration: none;
}

.km-nav__trigger:hover,
.km-nav__item.is-open > .km-nav__trigger {
  color: var(--km-accent);
}

/* ── Mega menu — sous la nav, pleine largeur ── */
.km-mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--km-white);
  border-top: 2px solid var(--km-accent);
  border-bottom: 1px solid var(--km-border);
  box-shadow: 0 12px 40px rgba(0,0,0,.09);
  padding: 32px 80px;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--km-duration) var(--km-ease);
  z-index: 490;
}

/* Positionner relativement au header__bottom */
.km-header__bottom {
  position: relative;
}

.km-nav__item.is-open > .km-mega-menu {
  display: grid;
  opacity: 1;
  pointer-events: auto;
}

.km-mega-menu__col-title {
  font-family: var(--km-font-body);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--km-mid);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--km-border);
}

.km-mega-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.km-mega-menu__link {
  display: block;
  font-size: .8125rem;
  color: var(--km-charcoal);
  padding: 6px 0;
  transition: color var(--km-duration);
  text-decoration: none;
}
.km-mega-menu__link:hover { color: var(--km-accent); }

/* ============================================================================
   MOBILE DRAWER
   ============================================================================ */

.km-drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.km-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background var(--km-duration) var(--km-ease);
}

.km-drawer__panel {
  position: absolute;
  top: 0; left: 0;
  width: min(380px, 90vw);
  height: 100%;
  background: var(--km-white);
  transform: translateX(-100%);
  transition: transform var(--km-duration) var(--km-ease-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.km-drawer.is-open { pointer-events: auto; }
.km-drawer.is-open .km-drawer__overlay { background: rgba(0,0,0,.4); }
.km-drawer.is-open .km-drawer__panel { transform: translateX(0); }

.km-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--km-space-lg) var(--km-space-lg);
  border-bottom: 1px solid var(--km-border);
}

.km-drawer__logo {
  font-family: var(--km-font-display);
  font-size: 1.125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.km-drawer__close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--km-charcoal);
  transition: color var(--km-duration);
}
.km-drawer__close:hover { color: var(--km-accent); }

.km-drawer__nav { flex: 1; padding: var(--km-space-lg); }

.km-drawer__section-title {
  font-family: var(--km-font-body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--km-mid);
  margin-bottom: var(--km-space-md);
  margin-top: var(--km-space-xl);
}

.km-drawer__link {
  display: block;
  padding: 10px 0;
  font-size: .9375rem;
  color: var(--km-charcoal);
  border-bottom: 1px solid var(--km-cream-2);
  transition: color var(--km-duration);
}
.km-drawer__link:hover { color: var(--km-accent); }

.km-drawer__footer {
  padding: var(--km-space-lg);
  border-top: 1px solid var(--km-border);
  display: flex;
  flex-direction: column;
  gap: var(--km-space-md);
}

/* ============================================================================
   SEARCH OVERLAY
   ============================================================================ */

.km-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.97);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--km-duration) var(--km-ease);
}

.km-search-overlay.is-open { opacity: 1; pointer-events: auto; }

.km-search-overlay__inner {
  width: min(600px, 90vw);
  text-align: center;
}

.km-search-overlay__label {
  font-family: var(--km-font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--km-ink);
  margin-bottom: var(--km-space-xl);
}

.km-search-overlay__form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--km-ink);
  gap: var(--km-space-md);
}

.km-search-overlay__input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--km-font-display);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--km-ink);
  padding: var(--km-space-md) 0;
  outline: none;
}

.km-search-overlay__submit {
  color: var(--km-charcoal);
  transition: color var(--km-duration);
}
.km-search-overlay__submit:hover { color: var(--km-accent); }

.km-search-overlay__close {
  position: absolute;
  top: var(--km-space-xl);
  right: var(--km-space-xl);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--km-mid);
  transition: color var(--km-duration);
}
.km-search-overlay__close:hover { color: var(--km-accent); }

/* ============================================================================
   HERO PLEIN ÉCRAN (style Hermès)
   ============================================================================ */

.km-hero {
  position: relative;
  overflow: hidden;
  background: var(--km-cream);
}

/* Héro principal : image pleine largeur, texte superposé en bas à gauche */
.km-hero--full {
  height: 75vh;
  min-height: 480px;
  max-height: 800px;
}

.km-hero__media {
  position: absolute;
  inset: 0;
}
.km-hero__media img,
.km-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.km-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,26,24,.55) 0%,
    rgba(26,26,24,.1) 50%,
    transparent 100%
  );
}

.km-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--km-space-3xl) var(--km-space-2xl);
  max-width: 680px;
}

.km-hero__eyebrow { color: rgba(255,255,255,.7); margin-bottom: var(--km-space-md); }

.km-hero__title {
  font-family: var(--km-font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--km-white);
  letter-spacing: -.02em;
  margin-bottom: var(--km-space-lg);
}

.km-hero__subtitle {
  font-size: .9375rem;
  color: rgba(255,255,255,.8);
  margin-bottom: var(--km-space-xl);
  max-width: 420px;
}

.km-hero__cta {
  display: flex;
  gap: var(--km-space-lg);
  flex-wrap: wrap;
}

/* Héro secondaire : demi-largeur */
.km-hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.km-hero--split .km-hero-half {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.km-hero--split .km-hero-half img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--km-ease);
}
.km-hero--split .km-hero-half:hover img { transform: scale(1.04); }

.km-hero-half__label {
  position: absolute;
  bottom: var(--km-space-xl);
  left: var(--km-space-xl);
  color: var(--km-white);
  z-index: 2;
}
.km-hero-half__label::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.km-hero-half__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 60%);
}

.km-hero-half__title {
  font-family: var(--km-font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--km-white);
  line-height: 1.1;
  margin-bottom: var(--km-space-sm);
}

/* ============================================================================
   SECTION ÉDITORIALE (rangées type Hermès)
   ============================================================================ */

/* Rangée : image gauche + texte droite */
.km-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.km-editorial--reverse { direction: rtl; }
.km-editorial--reverse > * { direction: ltr; }

.km-editorial__media {
  overflow: hidden;
  position: relative;
}
.km-editorial__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--km-ease);
}
.km-editorial__media:hover img { transform: scale(1.04); }

.km-editorial__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--km-space-3xl) var(--km-space-2xl);
  background: var(--km-cream);
}

.km-editorial__body--dark {
  background: var(--km-ink);
}

.km-editorial__body--dark .km-eyebrow { color: var(--km-gold); }
.km-editorial__body--dark h2 { color: var(--km-white); }
.km-editorial__body--dark p { color: rgba(255,255,255,.7); }
.km-editorial__body--dark .km-btn { color: var(--km-gold); }

.km-editorial__kicker {
  margin-bottom: var(--km-space-md);
}

.km-editorial__title {
  font-family: var(--km-font-display);
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--km-ink);
  margin-bottom: var(--km-space-lg);
}

.km-editorial__text {
  font-size: .9375rem;
  color: var(--km-mid);
  line-height: 1.75;
  margin-bottom: var(--km-space-xl);
  max-width: 440px;
}

/* ============================================================================
   GRILLE PRODUITS HOMEPAGE
   ============================================================================ */

.km-section { padding: var(--km-space-3xl) 0; }
.km-section--cream { background: var(--km-cream); }
.km-section--cream-2 { background: var(--km-cream-2); }
.km-section--ink { background: var(--km-ink); }

.km-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--km-space-2xl);
}

.km-section__title {
  font-family: var(--km-font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
}

.km-section--ink .km-section__title { color: var(--km-white); }
.km-section--ink .km-eyebrow { color: var(--km-gold); }
.km-section--ink .km-btn { color: var(--km-gold); }

/* Grille 4 colonnes */
.km-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--km-space-lg);
}

/* Grille 3 colonnes */
.km-product-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Card produit */
.km-product-card {
  position: relative;
}

.km-product-card__image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--km-cream-2);
  aspect-ratio: 3/4;
  margin-bottom: var(--km-space-md);
}

.km-product-card__image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--km-ease);
}

.km-product-card:hover .km-product-card__image-wrap img {
  transform: scale(1.06);
}

.km-product-card__badges {
  position: absolute;
  top: var(--km-space-md);
  left: var(--km-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--km-space-xs);
  z-index: 2;
}

.km-badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--km-font-body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.km-badge--new { background: var(--km-ink); color: var(--km-white); }
.km-badge--sale { background: #c0392b; color: var(--km-white); }
.km-badge--exclu { background: var(--km-gold); color: var(--km-white); }

/* Quick-add overlay */
.km-product-card__quick-add {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(26,26,24,.85);
  color: var(--km-white);
  text-align: center;
  padding: var(--km-space-md);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform var(--km-duration) var(--km-ease-out);
  cursor: pointer;
  border: none;
  width: 100%;
}
.km-product-card:hover .km-product-card__quick-add {
  transform: translateY(0);
}

/* Wishlist */
.km-product-card__wish {
  position: absolute;
  top: var(--km-space-md);
  right: var(--km-space-md);
  z-index: 2;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--km-charcoal);
  opacity: 0;
  transition: opacity var(--km-duration), color var(--km-duration);
}
.km-product-card:hover .km-product-card__wish { opacity: 1; }
.km-product-card__wish:hover { color: var(--km-accent); }

.km-product-card__meta { padding: 0 2px; }

.km-product-card__category {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--km-mid);
  margin-bottom: 4px;
}

.km-product-card__title {
  font-family: var(--km-font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--km-ink);
  margin-bottom: var(--km-space-xs);
  line-height: 1.3;
}

.km-product-card__price {
  font-size: .875rem;
  color: var(--km-charcoal);
}

.km-product-card__price del {
  color: var(--km-mid);
  margin-right: 6px;
}

.km-product-card__price ins {
  text-decoration: none;
  color: #c0392b;
  font-weight: 500;
}

/* ============================================================================
   GRILLE CATÉGORIES (style carrés Hermès)
   ============================================================================ */

.km-categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.km-category-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2/3;
  cursor: pointer;
}

.km-category-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--km-ease);
}
.km-category-tile:hover img { transform: scale(1.06); }

.km-category-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
}

.km-category-tile__label {
  position: absolute;
  bottom: var(--km-space-lg);
  left: var(--km-space-md);
  right: var(--km-space-md);
  color: var(--km-white);
}

.km-category-tile__name {
  font-family: var(--km-font-display);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 4px;
}

.km-category-tile__count {
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* ============================================================================
   BANDEAU MANIFESTE (pleine largeur, texte centré)
   ============================================================================ */

.km-manifesto {
  padding: var(--km-space-4xl) var(--km-gutter);
  text-align: center;
  background: var(--km-cream);
}

.km-manifesto__quote {
  font-family: var(--km-font-display);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--km-ink);
  max-width: 900px;
  margin-inline: auto;
  letter-spacing: -.01em;
}

.km-manifesto__quote em {
  font-style: italic;
  color: var(--km-accent);
}

.km-manifesto__source {
  margin-top: var(--km-space-xl);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--km-mid);
}

/* ============================================================================
   BANDE HORIZONTALE SCROLLABLE (lookbook)
   ============================================================================ */

.km-lookbook {
  padding: var(--km-space-2xl) 0;
  overflow: hidden;
}

.km-lookbook__track {
  display: flex;
  gap: 2px;
  transition: transform .6s var(--km-ease);
}

.km-lookbook__slide {
  flex-shrink: 0;
  width: 28vw;
  max-width: 400px;
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}
.km-lookbook__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--km-ease);
}
.km-lookbook__slide:hover img { transform: scale(1.05); }

/* ============================================================================
   SECTION "SAVOIR-FAIRE" (icônes horizontales)
   ============================================================================ */

.km-savoir-faire {
  padding: var(--km-space-3xl) 0;
  border-top: 1px solid var(--km-border);
  border-bottom: 1px solid var(--km-border);
}

.km-savoir-faire__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--km-space-xl);
}

.km-sf-item { text-align: center; }

.km-sf-item__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--km-space-md);
  color: var(--km-accent);
}

.km-sf-item__title {
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--km-charcoal);
  margin-bottom: var(--km-space-xs);
}

.km-sf-item__text {
  font-size: .8125rem;
  color: var(--km-mid);
  line-height: 1.65;
}

/* ============================================================================
   NEWSLETTER
   ============================================================================ */

.km-newsletter {
  padding: var(--km-space-3xl) var(--km-gutter);
  background: var(--km-ink);
  text-align: center;
}

.km-newsletter__title {
  font-family: var(--km-font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--km-white);
  margin-bottom: var(--km-space-sm);
}

.km-newsletter__sub {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--km-space-xl);
}

.km-newsletter__form {
  display: flex;
  gap: 0;
  max-width: 500px;
  margin-inline: auto;
}

.km-newsletter__input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-right: none;
  background: rgba(255,255,255,.06);
  color: var(--km-white);
  font-size: .875rem;
  outline: none;
  transition: border-color var(--km-duration);
}
.km-newsletter__input::placeholder { color: rgba(255,255,255,.35); }
.km-newsletter__input:focus { border-color: var(--km-gold); }

.km-newsletter__submit {
  padding: 14px 28px;
  background: var(--km-gold);
  color: var(--km-white);
  font-family: var(--km-font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background var(--km-duration);
}
.km-newsletter__submit:hover { background: var(--km-gold-light); }

.km-newsletter__legal {
  margin-top: var(--km-space-md);
  font-size: .75rem;
  color: rgba(255,255,255,.35);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.km-footer {
  background: var(--km-charcoal);
  color: rgba(255,255,255,.7);
}

.km-footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--km-space-2xl);
  padding: var(--km-space-3xl) var(--km-gutter);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.km-footer__brand-name {
  font-family: var(--km-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--km-white);
  margin-bottom: var(--km-space-md);
}

.km-footer__brand-desc {
  font-size: .8125rem;
  line-height: 1.75;
  margin-bottom: var(--km-space-xl);
  max-width: 280px;
}

.km-footer__social {
  display: flex;
  gap: var(--km-space-md);
}

.km-footer__social-link {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
  transition: border-color var(--km-duration), color var(--km-duration);
}
.km-footer__social-link:hover {
  border-color: var(--km-gold);
  color: var(--km-gold);
}

.km-footer__col-title {
  font-family: var(--km-font-body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--km-white);
  margin-bottom: var(--km-space-lg);
}

.km-footer__links { display: flex; flex-direction: column; gap: 10px; }

.km-footer__link {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  transition: color var(--km-duration);
}
.km-footer__link:hover { color: var(--km-gold); }

.km-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--km-space-lg) var(--km-gutter);
}

.km-footer__copy {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
}

.km-footer__legal {
  display: flex;
  gap: var(--km-space-xl);
}

.km-footer__legal a {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  transition: color var(--km-duration);
}
.km-footer__legal a:hover { color: rgba(255,255,255,.7); }

.km-footer__payment {
  display: flex;
  align-items: center;
  gap: var(--km-space-sm);
}

.km-payment-icon {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .35;
}

/* ============================================================================
   WOOCOMMERCE — SHOP PAGE
   ============================================================================ */

.km-shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--km-space-2xl);
  align-items: start;
  padding: var(--km-space-2xl) 0;
}

/* Breadcrumb WC */
.woocommerce-breadcrumb {
  font-size: .75rem;
  color: var(--km-mid);
  padding: var(--km-space-md) 0;
  letter-spacing: .05em;
}
.woocommerce-breadcrumb a { color: var(--km-mid); transition: color var(--km-duration); }
.woocommerce-breadcrumb a:hover { color: var(--km-accent); }

/* Résultats & tri */
.km-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--km-space-xl);
  padding-bottom: var(--km-space-md);
  border-bottom: 1px solid var(--km-border);
}

.woocommerce-result-count {
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--km-mid);
}

.woocommerce-ordering select {
  font-size: .75rem;
  letter-spacing: .06em;
  border: 1px solid var(--km-border);
  padding: 8px 12px;
  color: var(--km-charcoal);
  background: var(--km-white);
}

/* Sidebar filtres */
.km-shop-sidebar {}

.km-filter-widget { margin-bottom: var(--km-space-xl); }

.km-filter-title {
  font-family: var(--km-font-body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--km-charcoal);
  margin-bottom: var(--km-space-md);
  padding-bottom: var(--km-space-sm);
  border-bottom: 1px solid var(--km-border);
}

/* ============================================================================
   WOOCOMMERCE — PRODUCT SINGLE
   ============================================================================ */

.km-single-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--km-space-3xl);
  padding: var(--km-space-2xl) 0;
  align-items: start;
}

.km-single-product__gallery {
  position: sticky;
  top: calc(var(--km-header-h) + var(--km-space-lg));
}

.km-single-product__main-image {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  margin-bottom: var(--km-space-sm);
  background: var(--km-cream-2);
}

.km-single-product__thumbs {
  display: flex;
  gap: var(--km-space-sm);
}
.km-single-product__thumb {
  width: 72px;
  aspect-ratio: 3/4;
  object-fit: cover;
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--km-duration);
  background: var(--km-cream-2);
}
.km-single-product__thumb.is-active,
.km-single-product__thumb:hover { opacity: 1; }

.km-single-product__info {}

.km-product-category-link {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--km-mid);
  margin-bottom: var(--km-space-sm);
  display: block;
}

.km-product-title {
  font-family: var(--km-font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--km-ink);
  margin-bottom: var(--km-space-md);
}

.km-product-price {
  font-size: 1.125rem;
  color: var(--km-charcoal);
  margin-bottom: var(--km-space-xl);
  display: flex;
  align-items: center;
  gap: var(--km-space-md);
}
.km-product-price del { color: var(--km-mid); font-size: 1rem; }
.km-product-price ins { text-decoration: none; color: #c0392b; }

.km-product-short-desc {
  font-size: .9375rem;
  color: var(--km-mid);
  line-height: 1.75;
  margin-bottom: var(--km-space-xl);
  padding-bottom: var(--km-space-xl);
  border-bottom: 1px solid var(--km-border);
}

/* Quantité + ATC */
.km-quantity-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--km-border);
  width: fit-content;
  margin-bottom: var(--km-space-md);
}

.km-qty-btn {
  width: 40px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--km-charcoal);
  transition: background var(--km-duration);
  background: none;
  border: none;
  cursor: pointer;
}
.km-qty-btn:hover { background: var(--km-cream); }

.km-qty-input {
  width: 56px;
  height: 48px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--km-border);
  border-right: 1px solid var(--km-border);
  font-size: .875rem;
  color: var(--km-ink);
  background: none;
  -moz-appearance: textfield;
}
.km-qty-input::-webkit-outer-spin-button,
.km-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.km-atc-row {
  display: flex;
  gap: var(--km-space-md);
  margin-bottom: var(--km-space-xl);
  align-items: center;
}

.km-atc-btn {
  flex: 1;
  padding: 16px;
  background: var(--km-ink);
  color: var(--km-white);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background var(--km-duration);
}
.km-atc-btn:hover { background: var(--km-accent); }

.km-wish-btn {
  width: 52px; height: 52px;
  border: 1px solid var(--km-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--km-charcoal);
  transition: border-color var(--km-duration), color var(--km-duration);
  flex-shrink: 0;
}
.km-wish-btn:hover { border-color: var(--km-accent); color: var(--km-accent); }

/* Trust badges */
.km-trust {
  display: flex;
  flex-direction: column;
  gap: var(--km-space-sm);
  padding: var(--km-space-lg) 0;
  border-top: 1px solid var(--km-border);
  border-bottom: 1px solid var(--km-border);
  margin-bottom: var(--km-space-xl);
}
.km-trust__item {
  display: flex;
  align-items: center;
  gap: var(--km-space-sm);
  font-size: .8125rem;
  color: var(--km-charcoal);
}
.km-trust__item svg { color: var(--km-accent); flex-shrink: 0; }

/* ============================================================================
   WOOCOMMERCE — NOTICES
   ============================================================================ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  padding: var(--km-space-md) var(--km-space-lg);
  margin-bottom: var(--km-space-lg);
  font-size: .875rem;
  border-left: 3px solid var(--km-accent);
  background: var(--km-cream);
  display: flex;
  align-items: center;
  gap: var(--km-space-md);
}
.woocommerce-error {
  border-left-color: #c0392b;
  background: #fdf5f5;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* ============================================================================
   PAGINATION
   ============================================================================ */

.km-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--km-space-xs);
  padding: var(--km-space-2xl) 0;
}

.km-pagination a,
.km-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  font-size: .8125rem;
  border: 1px solid var(--km-border);
  color: var(--km-charcoal);
  transition: background var(--km-duration), border-color var(--km-duration), color var(--km-duration);
}

.km-pagination a:hover {
  background: var(--km-ink);
  color: var(--km-white);
  border-color: var(--km-ink);
}

.km-pagination .current {
  background: var(--km-accent);
  color: var(--km-white);
  border-color: var(--km-accent);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1200px) {
  .km-product-grid { grid-template-columns: repeat(3, 1fr); }
  .km-categories-grid { grid-template-columns: repeat(3, 1fr); }
  .km-footer__top { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 900px) {

  .km-header__bottom { display: none; }
  .km-header__burger { display: flex; }

  .km-editorial,
  .km-hero--split { grid-template-columns: 1fr; }
  .km-hero--split .km-hero-half { aspect-ratio: 16/9; }
  .km-editorial__body { padding: var(--km-space-xl) var(--km-space-lg); }

  .km-hero--full { height: 80vh; }
  .km-hero__content { padding: var(--km-space-xl) var(--km-space-lg); }

  .km-product-grid { grid-template-columns: repeat(2, 1fr); }
  .km-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .km-savoir-faire__grid { grid-template-columns: repeat(2, 1fr); }

  .km-newsletter__form { flex-direction: column; }
  .km-newsletter__input { border-right: 1px solid rgba(255,255,255,.2); border-bottom: none; }

  .km-footer__top { grid-template-columns: 1fr 1fr; }
  .km-footer__bottom { flex-direction: column; gap: var(--km-space-md); text-align: center; }

  .km-single-product { grid-template-columns: 1fr; }
  .km-single-product__gallery { position: static; }
  .km-shop-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --km-gutter: 20px; }
  .km-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--km-space-sm); }
  .km-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .km-savoir-faire__grid { grid-template-columns: 1fr 1fr; }
  .km-footer__top { grid-template-columns: 1fr; }
  .km-footer__legal { flex-wrap: wrap; gap: var(--km-space-md); }
}

/* ============================================================================
   BOUTON RETOUR EN HAUT
   ============================================================================ */

.km-back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 400;
  width: 48px;
  height: 48px;
  background: var(--km-ink);
  color: var(--km-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s;
}

.km-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.km-back-to-top:hover {
  background: var(--km-accent);
}

.km-back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   POPUP PROMO
   ============================================================================ */

.km-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.km-popup-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.km-promo-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(.97);
  z-index: 1001;
  background: var(--km-white);
  width: min(520px, 94vw);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s;
  overflow: hidden;
}

.km-promo-popup.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.km-promo-popup__image {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  display: block;
  background: var(--km-cream-2);
}

.km-promo-popup__image-placeholder {
  width: 100%;
  aspect-ratio: 16/7;
  background: linear-gradient(135deg, var(--km-cream-2), var(--km-border));
}

.km-promo-popup__body {
  padding: 32px 40px 40px;
  text-align: center;
}

.km-promo-popup__eyebrow {
  font-family: var(--km-font-body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--km-mid);
  margin-bottom: 12px;
  display: block;
}

.km-promo-popup__title {
  font-family: var(--km-font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--km-ink);
  margin-bottom: 12px;
  line-height: 1.15;
}

.km-promo-popup__text {
  font-size: .875rem;
  color: var(--km-mid);
  margin-bottom: 24px;
  line-height: 1.65;
}

.km-promo-popup__code {
  display: inline-block;
  background: var(--km-cream-2);
  border: 1px dashed var(--km-border);
  padding: 10px 24px;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--km-accent);
  margin-bottom: 24px;
  cursor: pointer;
  transition: background .2s;
}
.km-promo-popup__code:hover {
  background: var(--km-border);
}

.km-promo-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.km-popup-close {
  font-family: var(--km-font-body);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--km-mid);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
  padding: 4px 0;
}
.km-popup-close:hover { color: var(--km-ink); }

.km-promo-popup__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.8);
  color: var(--km-charcoal);
  cursor: pointer;
  border: none;
  transition: background .2s, color .2s;
  z-index: 2;
}
.km-promo-popup__x:hover { background: var(--km-ink); color: var(--km-white); }

/* ============================================================================
   BANNIÈRE PUB (widget zone)
   ============================================================================ */

.km-banner-zone {
  width: 100%;
  overflow: hidden;
}

.km-banner-zone img {
  width: 100%;
  display: block;
}

/* Bannière horizontale pleine largeur */
.km-banner--full {
  position: relative;
}

.km-banner--full a {
  display: block;
}

.km-banner--full img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
}

/* Bannière flottante (coin bas gauche) */
.km-banner--float {
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 399;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  transform: translateY(120%);
  transition: transform .5s cubic-bezier(.25,.1,.25,1);
}
.km-banner--float.is-visible {
  transform: translateY(0);
}
.km-banner--float-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

/* ============================================================================
   PALETTE — CUSTOMIZER live preview classes
   ============================================================================ */

/* Palettes via body class (ajouté par WordPress body_class filter) */

body.palette-taupe    { --km-accent: #7c6f5e; --km-gold: #b8974d; }
body.palette-marine   { --km-accent: #2c4a6e; --km-gold: #8ca8c8; }
body.palette-bordeaux { --km-accent: #6e2c3a; --km-gold: #c8a07a; }
body.palette-vert     { --km-accent: #3a5c48; --km-gold: #a8c070; }
body.palette-ardoise  { --km-accent: #4a4e5a; --km-gold: #b0a890; }
body.palette-noir     { --km-accent: #1a1a18; --km-gold: #c8b87a; }


/* ============================================================================
   BANNIÈRES PUBLICITAIRES
   ============================================================================ */

.km-banners {
  padding: var(--km-space-xl) 0;
  background: var(--km-cream-2);
}

.km-banners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--km-space-md);
}

.km-banner-item {
  overflow: hidden;
  position: relative;
}

.km-banner-item img {
  width: 100%;
  aspect-ratio: 16/6;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--km-ease);
}

.km-banner-item:hover img {
  transform: scale(1.03);
}

.km-banner-item__link {
  display: block;
  overflow: hidden;
}