/* ============================================================
   KEIHAL DIAMONDS — overrides.css
   Design refresh: Cormorant Garamond + Tenor Sans, B&W palette
   ============================================================ */

/* ════════════════════════════════════════════════════════════════
   À PROPOS — scroll reveal system (ap-reveal)
   Géré par IntersectionObserver dans apropos.html uniquement.
   Ne pas utiliser sur d'autres pages.
   ════════════════════════════════════════════════════════════════ */
.ap-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.ap-reveal-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.ap-reveal-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.ap-reveal.in,
.ap-reveal-left.in,
.ap-reveal-right.in {
  opacity: 1;
  transform: none;
}
.ap-delay-1 { transition-delay: 0.12s; }
.ap-delay-2 { transition-delay: 0.24s; }
.ap-delay-3 { transition-delay: 0.38s; }
.ap-delay-4 { transition-delay: 0.52s; }

/* ---- Updated Variables ---- */
:root {
  --kd-black:    #0a0a0a;
  --kd-white:    #ffffff;
  --kd-gray-100: #f5f5f3;
  --kd-gray-300: #d0d0ce;
  --kd-gray-500: #888886;
  --kd-gray-700: #444442;
  --font-sans:   'Tenor Sans', Arial, sans-serif;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --transition:  0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --navbar-h:    88px;
  /* Remap gold to gray so var(--gold) usages become gray */
  --gold: #d0d0ce;
  --grey-dark: #111111;
  --black: #0a0a0a;
  --off-white: #f5f5f3;
}

/* ---- Base typography ---- */
body {
  font-family: 'Tenor Sans', Arial, sans-serif;
}

button {
  font-family: 'Tenor Sans', Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
}

.section-label {
  font-family: 'Tenor Sans', Arial, sans-serif;
  color: var(--kd-gray-500);
}

.gold-text { color: var(--kd-gray-500); }

/* ---- Gold line → dark thin line ---- */
.gold-line {
  background: #111;
  height: 0.5px;
}

/* ---- Gold divider ---- */
.gold-divider {
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
}

/* ============================================================
   POPUP — épuré : KEIHAL + Bienvenue / Welcome
   ============================================================ */
.popup-card {
  background: #0a0a0a;
  border: none;
  padding: 5rem 3.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  min-width: 320px;
}

.popup-keihal-name {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 28px;
  letter-spacing: 0.45em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

.popup-lang-btns {
  display: flex;
  gap: 1.5rem;
}

.popup-lang-btn {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: none;
  border: 0.5px solid rgba(255,255,255,0.2);
  padding: 0.9rem 2.4rem;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.popup-lang-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}

/* ============================================================
   NAVBAR — fond blanc permanent + logo sombre
   ============================================================ */
#navbar,
#navbar.scrolled {
  background: #ffffff !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}

.navbar-logo-diamond {
  display: none;
}

.navbar-logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-decoration: none;
}

.navbar-logo-keihal {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.38em;
  color: #0a0a0a;
  line-height: 1;
  text-transform: uppercase;
}

.navbar-logo-diamonds {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 6.5px;
  letter-spacing: 0.44em;
  color: #999;
  text-transform: uppercase;
  line-height: 1;
}

/* Keep .navbar-logo-text hidden (replaced) */
.navbar-logo-text {
  display: none;
}

/* Nav links — sombre sur blanc */
.navbar-nav a {
  color: #555555;
}

/* Nav underline → dark */
.navbar-nav a::after {
  background: #0a0a0a;
}

.navbar-nav a:hover,
.navbar-nav a.active {
  color: #0a0a0a;
}

/* Lang toggle */
.lang-toggle button {
  color: #999;
}

.lang-toggle button.active,
.lang-toggle button:hover {
  color: #0a0a0a;
}

.lang-toggle span {
  color: #ccc;
}

/* Navbar WA button */
.navbar-wa {
  border-color: rgba(0,0,0,0.15);
  border-radius: 0;
  color: #888;
}

.navbar-wa:hover {
  border-color: #0a0a0a;
  background: #0a0a0a;
  color: #fff;
}

/* Hamburger */
.hamburger span {
  background: #0a0a0a;
}

/* Mobile nav */
#mobile-nav a:hover {
  color: rgba(255,255,255,0.6);
}

.mobile-nav-lang button.active,
.mobile-nav-lang button:hover {
  color: #fff;
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
#whatsapp-float {
  background: #0a0a0a;
  border: 0.5px solid #333;
  animation: none;
}

#whatsapp-float:hover {
  background: #1a1a1a;
  transform: scale(1.08);
}

/* ============================================================
   REASSURANCE STRIP — remove gold borders
   ============================================================ */
.reassurance-strip {
  border-top-color: rgba(255,255,255,0.06);
  border-bottom-color: rgba(255,255,255,0.06);
}

.reassurance-text {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
}

.reassurance-icon {
  font-size: 0; /* Hide emoji */
  line-height: 0;
}

.reassurance-icon svg {
  display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top-color: rgba(255,255,255,0.08);
}

.footer-brand .footer-tagline {
  color: var(--kd-gray-500);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-contact .footer-wa-btn {
  border-color: rgba(255,255,255,0.2);
  font-family: 'Tenor Sans', Arial, sans-serif;
}

.footer-contact .footer-wa-btn:hover {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 0;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.btn-gold,
.btn-primary {
  background: #0a0a0a;
  color: #fff;
  border: 1px solid #0a0a0a;
}

.btn-gold:hover,
.btn-primary:hover {
  background: transparent;
  color: #0a0a0a;
}

.btn-outline {
  background: transparent;
  border: 1px solid #ccc;
  color: #555;
}

.btn-outline:hover {
  border-color: #0a0a0a;
  color: #0a0a0a;
  background: transparent;
}

.btn-outline-white {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.5);
}

.btn-outline-white:hover {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ============================================================
   HOME — HERO (2 columns, full viewport, no scroll needed)
   ============================================================ */
#hero {
  height: 100vh;
  min-height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

/* Left column */
.hero-left {
  background: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* Logo zone — prend tout l'espace dispo, logo centré dedans */
.hero-left-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 32%;
}

/* Zone infos bas */
.hero-left-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 3.5rem;
}

.hero-eyebrow {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7.5px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.30em;
  margin-bottom: 1.5rem;
}

.hero-title-new {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 1.15;
  color: #0a0a0a;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}

.hero-title-new em {
  font-style: italic;
}

.hero-thin-line {
  width: 32px;
  height: 0.5px;
  background: #111;
  margin: 20px 0;
  flex-shrink: 0;
}

.hero-body {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 11.5px;
  color: #777;
  line-height: 1.95;
  margin-bottom: 1.5rem;
  max-width: 420px;
}

/* Stats row */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.25rem;
  flex: 1;
}

.hero-stat:first-child {
  padding-left: 0;
}

.hero-stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 26px;
  color: #0a0a0a;
  line-height: 1;
}

.hero-stat-label {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7px;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: 0.1em;
  margin-top: 3px;
}

.hero-stat-sep {
  width: 0.5px;
  height: 28px;
  background: #e0e0e0;
  flex-shrink: 0;
}

/* Hero buttons */
.hero-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-btn-primary {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 13px 28px;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid #0a0a0a;
  border-radius: 0;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-btn-primary:hover {
  background: transparent;
  color: #0a0a0a;
}

.hero-btn-secondary {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 13px 28px;
  background: transparent;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 0;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.hero-btn-secondary:hover {
  border-color: #0a0a0a;
  color: #0a0a0a;
}

/* Right column */
.hero-right {
  background: #0a0a0a;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  padding: 0;
  padding-top: 6vh;
  border-radius: 0;
}

.hero-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 0;
}

.hero-ring-img {
  width: 84%;
  max-width: 395px;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  animation: none;
  mix-blend-mode: lighten;
  object-fit: contain;
}

@keyframes ringContinuous {
  0%   {
    transform: perspective(800px) rotateY(0deg) scale(1);
    filter: brightness(1.05) contrast(1.05);
  }
  20%  {
    transform: perspective(800px) rotateY(72deg) scaleX(0.75) scale(1.02);
    filter: brightness(0.95) contrast(1.08);
  }
  25%  {
    transform: perspective(800px) rotateY(90deg) scaleX(0.06) scale(1);
    filter: brightness(0.7) contrast(1.1);
  }
  30%  {
    transform: perspective(800px) rotateY(108deg) scaleX(0.75) scale(1.02);
    filter: brightness(0.95) contrast(1.05);
  }
  50%  {
    transform: perspective(800px) rotateY(180deg) scale(1);
    filter: brightness(1.05) contrast(1.05);
  }
  70%  {
    transform: perspective(800px) rotateY(252deg) scaleX(0.75) scale(1.02);
    filter: brightness(0.95) contrast(1.08);
  }
  75%  {
    transform: perspective(800px) rotateY(270deg) scaleX(0.06) scale(1);
    filter: brightness(0.7) contrast(1.1);
  }
  80%  {
    transform: perspective(800px) rotateY(288deg) scaleX(0.75) scale(1.02);
    filter: brightness(0.95) contrast(1.05);
  }
  100% {
    transform: perspective(800px) rotateY(360deg) scale(1);
    filter: brightness(1.05) contrast(1.05);
  }
}

/* Particles */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-particle {
  position: absolute;
  border-radius: 50%;
  animation: particleTwinkle 4s ease-in-out infinite;
}

.hero-particle:nth-child(1) { width: 2px; height: 2px; background: rgba(255,255,255,0.6); top: 20%; left: 25%; animation-delay: 0s; }
.hero-particle:nth-child(2) { width: 3px; height: 3px; background: rgba(255,255,255,0.4); top: 35%; left: 70%; animation-delay: 0.8s; }
.hero-particle:nth-child(3) { width: 2px; height: 2px; background: rgba(200,200,200,0.5); top: 65%; left: 30%; animation-delay: 1.6s; }
.hero-particle:nth-child(4) { width: 2px; height: 2px; background: rgba(255,255,255,0.5); top: 75%; left: 65%; animation-delay: 2.4s; }
.hero-particle:nth-child(5) { width: 3px; height: 3px; background: rgba(200,200,200,0.4); top: 50%; left: 15%; animation-delay: 3.2s; }

@keyframes particleTwinkle {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* Hero badge */
.hero-badge {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  border: 0.5px solid rgba(255,255,255,0.10);
  padding: 7px 12px;
  z-index: 3;
}

.hero-badge-line1 {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
}

.hero-badge-line2 {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7px;
  color: rgba(255,255,255,0.2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 2px;
}

/* Hide old hero elements */
.hero-diamond,
.hero-title:not(.hero-title-new),
.hero-gold-line,
.hero-scroll {
  display: none;
}

/* ============================================================
   HERO — Logo-centré redesign
   ============================================================ */
.hero-logo-img {
  display: block;
  width: 85%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  flex-shrink: 0;
}

.hero-ornament {
  width: 28px;
  height: 0.5px;
  background: #ccc;
  margin: 0 auto 1.2rem;
  flex-shrink: 0;
}

.hero-tagline {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  color: #666;
  letter-spacing: 0.03em;
  text-align: center;
  margin: 0 auto 1.6rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.hero-pre-logo {
  margin-bottom: 1.2rem;
}

.hero-diamond-symbol {
  font-size: 9px;
  color: #ccc;
  letter-spacing: 0.5em;
}

.hero-micro-stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.8rem;
  flex-shrink: 0;
}

.hero-micro-item {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: #bbb;
}

.hero-micro-sep {
  color: #ddd;
  font-size: 9px;
}

.hero-cta-link {
  display: inline-block;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #0a0a0a;
  text-decoration: none;
  padding: 13px 0 12px;
  border-bottom: 0.5px solid #0a0a0a;
  transition: letter-spacing 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
}

.hero-cta-link:hover {
  letter-spacing: 0.38em;
  opacity: 0.55;
}

/* ============================================================
   HOME — NAV CARDS (remove gold border)
   ============================================================ */
.nav-card {
  border-color: rgba(255,255,255,0.06);
}

.nav-card::before {
  border-color: rgba(255,255,255,0.2);
}

.nav-card-icon {
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   HOME — PROMESSE section → hidden (replaced by statement)
   ============================================================ */
#promesse {
  display: none;
}

/* ============================================================
   HOME — STATEMENT NOIR
   ============================================================ */
#statement-noir {
  background: #0a0a0a;
  padding: 80px 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.statement-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15));
  margin-bottom: 2.5rem;
}

.statement-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 28px;
  color: #fff;
  max-width: 560px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

.statement-attr {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.28em;
  color: #444;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.statement-cta {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  padding: 11px 24px;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.5);
  background: transparent;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
  cursor: pointer;
}

.statement-cta:hover {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ============================================================
   HOME — CTA section
   ============================================================ */
#home-cta {
  background: var(--kd-gray-100);
}

#home-cta .home-cta-quote {
  color: rgba(0,0,0,0.75);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
}

/* ============================================================
   HOME — CATALOGUE PREVIEW
   ============================================================ */
#home-catalogue {
  background: #fff;
  padding: 5rem 2rem;
}

.home-catalogue-header {
  text-align: center;
  margin-bottom: 3rem;
}

.home-catalogue-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 30px;
  color: #0a0a0a;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.home-catalogue-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: #888;
  margin-bottom: 2rem;
}

/* Filter pills */
.home-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.home-filter-btn {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid #d0d0ce;
  color: #888;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  border-radius: 0;
}

.home-filter-btn:hover,
.home-filter-btn.active {
  border-color: #0a0a0a;
  color: #0a0a0a;
}

/* Catalogue grid on homepage */
.home-product-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.home-product-card {
  background: #0a0a0a;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  border: 0.5px solid transparent;
}

.home-product-card:hover {
  border-color: rgba(255,255,255,0.3);
}

.home-product-card .product-img-wrap {
  background: #0a0a0a;
  padding: 0;
}

.home-product-card .product-img-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.home-product-card .product-info {
  background: #0a0a0a;
  border-top: 0.5px solid rgba(255,255,255,0.08);
}

.home-product-card .product-category {
  color: var(--kd-gray-500);
}

.home-product-card .product-name {
  color: #fff;
}

.home-product-card .product-desc {
  color: rgba(255,255,255,0.4);
}

.home-product-card .product-btn {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px;
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  background: transparent;
}

.home-product-card .product-btn:hover {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

/* Catalogue footer */
.home-catalogue-footer {
  max-width: var(--max-width);
  margin: 2rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 0.5px solid #e8e8e8;
}

.home-catalogue-notes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-catalogue-gia-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #aaa;
}

.home-catalogue-order-note {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  color: #bbb;
  letter-spacing: 0.05em;
}

.home-catalogue-link {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #0a0a0a;
  text-decoration: none;
  border-bottom: 0.5px solid #0a0a0a;
  padding-bottom: 2px;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.home-catalogue-link:hover {
  opacity: 0.6;
}

/* ============================================================
   CATALOGUE — product cards (dark bg)
   ============================================================ */
.product-card {
  background: #0a0a0a;
  border-color: rgba(255,255,255,0.05);
  border-radius: 0;
}

.product-card:hover {
  border-color: rgba(255,255,255,0.3);
  transform: none;
}

.product-img-wrap {
  background: #0a0a0a;
  padding: 0;
}

.product-img-wrap img {
  object-fit: contain;
  background: #0a0a0a;
}

.product-category {
  color: var(--kd-gray-500);
  font-family: 'Tenor Sans', Arial, sans-serif;
}

.product-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
}

.product-btn {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px;
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
}

.product-btn:hover {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

/* placeholder icon */
.product-placeholder-icon {
  color: rgba(255,255,255,0.08);
}

/* Filter btns — catalogue */
.filter-btn:hover,
.filter-btn.active {
  border-color: #fff;
  color: #fff;
}

/* ============================================================
   CATALOGUE NOTE
   ============================================================ */
.catalogue-note {
  font-family: 'Tenor Sans', Arial, sans-serif;
}

/* ============================================================
   PAGE HERO (shared inner pages)
   ============================================================ */
.page-hero {
  background: #0a0a0a;
}

/* ============================================================
   PERSONNALISATION
   ============================================================ */
.perso-card {
  border-color: rgba(255,255,255,0.06);
}

.perso-card:hover {
  border-color: rgba(255,255,255,0.15);
}

.perso-card-number {
  font-family: 'Tenor Sans', Arial, sans-serif;
  color: var(--kd-gray-500);
}

/* ============================================================
   PERSONNALISATION — Grille des montures
   ============================================================ */
.monture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}

.monture-card {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.08);
  padding: 1.6rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  outline: none;
}

.monture-card:hover,
.monture-card:focus {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
}

.monture-svg-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.monture-svg-wrap svg {
  width: 100%;
  height: 100%;
  stroke: rgba(255,255,255,0.55);
  fill: none;
  stroke-width: 1.2;
  transition: stroke 0.3s;
}

.monture-card:hover .monture-svg-wrap svg,
.monture-card:focus .monture-svg-wrap svg {
  stroke: rgba(255,255,255,0.9);
}

.monture-name {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
}

.monture-tag {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  margin-top: -0.2rem;
}

.monture-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  font-style: italic;
}

.metal-swatch:hover .swatch-circle,
.metal-swatch.selected .swatch-circle {
  border-color: #fff;
}

.stone-option {
  border-color: rgba(255,255,255,0.1);
}

.stone-option:hover,
.stone-option.selected {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
}

.stone-option-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
}

.cut-svg-wrap {
  border-color: rgba(255,255,255,0.1);
}

.cut-option:hover .cut-svg-wrap,
.cut-option.selected .cut-svg-wrap {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
}

.cut-option svg {
  fill: rgba(255,255,255,0.3);
  stroke: rgba(255,255,255,0.5);
}

.cut-option:hover svg,
.cut-option.selected svg {
  fill: rgba(255,255,255,0.6);
  stroke: rgba(255,255,255,0.8);
}

.gravure-tag {
  border-color: rgba(255,255,255,0.1);
}

.gravure-tag:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

/* GIA natural diamonds note */
.gia-natural-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #aaa;
  margin-top: 1rem;
  display: block;
}

/* ============================================================
   CONSEILS
   ============================================================ */
.four-c-card {
  border-color: rgba(255,255,255,0.06);
}

.four-c-icon {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.grade-table th {
  color: var(--kd-gray-500);
  border-bottom-color: rgba(255,255,255,0.12);
}

.compare-col {
  border-color: rgba(255,255,255,0.06);
}

.compare-col h3 {
  border-bottom-color: rgba(255,255,255,0.1);
}

.compare-list li::before {
  color: rgba(255,255,255,0.3);
}

.cert-diagram {
  border-color: rgba(255,255,255,0.1);
}

.cert-diagram-title {
  color: var(--kd-gray-500);
  font-family: 'Tenor Sans', Arial, sans-serif;
}

/* Occasion icons — hide emoji */
.occasion-icon {
  font-size: 0;
  line-height: 0;
}

/* ============================================================
   CTA sections
   ============================================================ */
.cta-section {
  background: #0a0a0a;
}

.cta-section .section-title {
  color: #fff;
}

/* ============================================================
   COMMANDER — category filter buttons
   ============================================================ */
.cat-filter-btn {
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.15);
  padding: 9px 16px;
  cursor: pointer;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: all 0.25s;
}
.cat-filter-btn:hover {
  border-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.8);
}
.cat-filter-btn.active {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,0.05);
}

/* ============================================================
   BOOKING CALENDAR — redesign premium
   ============================================================ */
#booking-widget {
  background: rgba(255,255,255,0.02) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  padding: 2rem 1.8rem 2.2rem !important;
}

.bk-title {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-bottom: 1.8rem;
}

/* Calendar header */
.bk-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.bk-month-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
  text-transform: capitalize;
}

.bk-nav {
  background: none;
  border: none;
  color: rgba(255,255,255,0.28);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.bk-nav:hover { color: rgba(255,255,255,0.75); }
.bk-nav svg  { width: 14px; height: 14px; }

/* Weekday headers */
.bk-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.bk-weekday-cell {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  text-align: center;
  padding: 4px 0;
}

/* Days grid */
.bk-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.bk-day-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  color: rgba(255,255,255,0.16);
  border: none;
  background: none;
  cursor: default;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  padding: 0;
  line-height: 1;
}

.bk-day-cell.available {
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.bk-day-cell.available:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.bk-day-cell.selected {
  background: #fff !important;
  color: #0a0a0a !important;
}
.bk-day-cell.past,
.bk-day-cell.sunday {
  color: rgba(255,255,255,0.1);
  cursor: default;
}

/* Thin divider */
.bk-divider {
  height: 0.5px;
  background: rgba(255,255,255,0.07);
  margin: 1.6rem 0;
}

/* Selected date label */
.bk-times-selected-date {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}

/* Time slot buttons */
.bk-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bk-slot-btn {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.38);
  background: none;
  border: 0.5px solid rgba(255,255,255,0.1);
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.bk-slot-btn:hover {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.8);
}
.bk-slot-btn.active {
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
}

/* Confirmation block */
#booking-confirm { margin-top: 1.4rem; }

#booking-summary {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,0.62);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

#booking-whatsapp-btn {
  display: inline-block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 13px 24px;
  background: #fff;
  color: #0a0a0a;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
#booking-whatsapp-btn:hover { background: rgba(255,255,255,0.88); }

@media (max-width: 768px) {
  #session-conseil .container > div {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}

/* ============================================================
   SPLIT SECTIONS — 50/50 image + texte (style Ivan Toma / Simuéro)
   ============================================================ */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 75vh;
  background: #0a0a0a;
  overflow: hidden;
}

.split-section--reverse {
  direction: rtl;
}
.split-section--reverse > * {
  direction: ltr;
}

.split-media {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.split-img,
.split-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 5rem 5rem 6rem;
  gap: 1.6rem;
  background: #0a0a0a;
}

.split-eyebrow {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.split-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 52px;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}

.split-body {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(255,255,255,0.45);
  max-width: 340px;
  margin: 0;
}

.split-cta {
  display: inline-block;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.4);
  padding-bottom: 4px;
  width: fit-content;
  margin-top: 0.5rem;
  transition: border-color 0.3s, color 0.3s;
}

.split-cta:hover {
  border-color: #fff;
  color: rgba(255,255,255,0.8);
}

/* Mobile split → stack */
@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .split-section--reverse {
    direction: ltr;
  }
  .split-media {
    height: 55vw;
    min-height: 240px;
  }
  .split-text {
    padding: 3rem 2rem;
    gap: 1.2rem;
  }
  .split-heading {
    font-size: 34px;
  }
}

/* ============================================================
   CATALOGUE — sections par catégorie
   ============================================================ */
.cat-section-header {
  padding: 5rem 4rem 2.5rem;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  margin-top: 2rem;
}

.cat-section-header:first-child {
  border-top: none;
  margin-top: 0;
}

.cat-section-label {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.8rem;
}

.cat-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 32px;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: 0.03em;
}

.cat-section-count {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
  margin: 0;
}

.cat-grid {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

/* ============================================================
   HERO — plein écran façon Graff (override colonnes)
   ============================================================ */
#hero {
  position: relative !important;
  height: 100vh !important;
  display: block !important;
  overflow: hidden !important;
  background: #0a0a0a;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

/* ── Vidéo hero — même comportement que l'image, autoplay muted loop ── */
.hero-bg-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  /* Évite le flash blanc au démarrage */
  background: #080808;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.72) 100%
  );
  z-index: 1;
}

.hero-content {
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

.hero-content .hero-tagline {
  display: block !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 38px;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0;
}

.hero-content .hero-cta-link {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  border-bottom: 0.5px solid rgba(255,255,255,0.45);
  padding-bottom: 4px;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}

.hero-content .hero-cta-link:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.85);
}

/* Masquer les anciennes colonnes */
.hero-left,
.hero-right {
  display: none !important;
}

/* ============================================================
   VIDEO SHOWCASE — section dans le scroll
   ============================================================ */
#video-showcase {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-showcase-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-showcase-label {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}

/* ============================================================
   FOND NOIR — uniformisation de toutes les sections
   ============================================================ */
body,
#nav-cards,
#promesse,
#statement-noir,
#home-catalogue,
#home-cta,
.reassurance-strip,
#home-catalogue .home-catalogue-footer {
  background: #0a0a0a !important;
}

.reassurance-strip {
  display: none !important;
}

/* Nav cards sur fond noir */
.nav-card {
  background: rgba(255,255,255,0.03) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
}

.nav-card:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Promesse sur fond noir */
.promesse-item {
  background: transparent !important;
  border: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  /* ── Hero mobile : plein écran ── */
  #hero {
    display: block !important;
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Vidéo : fond plein écran */
  .hero-right {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: unset;
    order: 0;
    padding-top: 0;
  }

  .hero-ring-img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
  }

  /* Logo + texte : overlay en bas */
  .hero-left {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    background: linear-gradient(to top,
      rgba(0,0,0,0.90) 0%,
      rgba(0,0,0,0.55) 55%,
      transparent 100%);
    padding: 0 2rem 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 10;
  }

  /* Logo caché sur mobile (fond blanc illisible sur overlay sombre) */
  .hero-left-center {
    display: none;
  }

  /* Ornement caché sur mobile */
  .hero-ornament {
    display: none;
  }

  /* Micro-stats cachés sur mobile */
  .hero-micro-stats {
    display: none;
  }

  /* Badge GIA caché sur mobile */
  .hero-badge {
    display: none;
  }

  .hero-tagline {
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    margin-bottom: 1.6rem;
  }

  .hero-cta-link {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.55);
  }

  .hero-left-bottom {
    padding-bottom: 0;
    width: 100%;
  }

  /* Bouton WhatsApp flottant caché sur mobile */
  #whatsapp-float {
    display: none;
  }

  .home-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-title-new {
    font-size: 30px;
  }

  .home-product-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-catalogue-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .home-product-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EMERALD ACCENT — couleur signature discrète
   ============================================================ */
:root {
  --kd-emerald:      #2d6a4f;
  --kd-emerald-soft: rgba(45, 106, 79, 0.12);
  --kd-emerald-pale: #c2ddd3;
}

/* ============================================================
   OVERFLOW / MOBILE SAFETY — aucun scroll horizontal
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

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

section, footer, nav {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ============================================================
   FONT — Inter pour le corps de texte
   ============================================================ */
body,
p,
li,
.featured-card-label,
.brand-intro-body,
.brand-intro-label,
.brand-intro-cta,
.featured-viewall,
.category-tiles-eyebrow,
.split-body,
.split-eyebrow,
.split-cta,
.hero-cta-link,
.popup-lang-btn,
.statement-cta,
button {
  font-family: 'Inter', 'Tenor Sans', Arial, sans-serif;
}

/* ============================================================
   NAVBAR — hover emerald
   ============================================================ */
.navbar-nav a:hover,
.navbar-nav a.active {
  color: var(--kd-emerald) !important;
}

.navbar-nav a::after {
  background: var(--kd-emerald) !important;
}

/* ============================================================
   POPUP — hover emerald
   ============================================================ */
.popup-lang-btn:hover {
  color: #fff !important;
  border-color: rgba(45, 106, 79, 0.55) !important;
  background: var(--kd-emerald-soft) !important;
}

/* ============================================================
   HERO — mobile tagline size
   ============================================================ */
@media (max-width: 768px) {
  .hero-content .hero-tagline {
    font-size: 28px !important;
  }

  .hero-content {
    bottom: 8% !important;
    gap: 1.4rem !important;
  }
}

/* ============================================================
   BRAND INTRO — section texte pure
   ============================================================ */
#brand-intro {
  background: #0a0a0a;
  padding: 9rem 2rem 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.brand-intro-inner {
  max-width: 660px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-intro-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  display: block;
  margin-bottom: 2.4rem;
}

.brand-intro-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 72px;
  line-height: 1.02;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0 0 2.5rem;
}

/* Thin divider rule between heading and body */
.brand-intro-rule {
  width: 28px;
  height: 0.5px;
  background: rgba(255,255,255,0.14);
  margin: 0 auto 2.5rem;
  flex-shrink: 0;
}

.brand-intro-body {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 2;
  color: rgba(255,255,255,0.38);
  max-width: 480px;
  letter-spacing: 0.02em;
  margin-bottom: 2.8rem;
}

.brand-intro-cta {
  display: inline-block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 7.5px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.18);
  padding-bottom: 5px;
  transition: color 0.35s, border-color 0.35s;
}

.brand-intro-cta:hover {
  color: var(--kd-emerald-pale);
  border-color: var(--kd-emerald);
}

/* ============================================================
   FEATURED PRODUCTS — grille 4 colonnes
   ============================================================ */
#featured-products {
  background: #0a0a0a;
  padding: 1rem 5vw 5rem;
  overflow: hidden;
}

.featured-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}

.featured-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.08em;
  margin: 0;
}

.featured-viewall {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 7.5px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  text-decoration: none;
  transition: color 0.3s;
}

.featured-viewall:hover {
  color: var(--kd-emerald-pale);
}

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

.featured-card {
  display: block;
  text-decoration: none;
  background: #0f0f0f;
  overflow: hidden;
  position: relative;
}

.featured-img-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 122%;  /* 4:5 portrait ratio */
  overflow: hidden;
  background: #0f0f0f;
}

.featured-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-card:hover .featured-img-wrap img {
  transform: scale(1.05);
}

.featured-card-info {
  padding: 1rem 0 0.8rem;
  background: #0a0a0a;
  border-top: 0.5px solid rgba(255,255,255,0.04);
}

.featured-card-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 7.5px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  display: block;
  transition: color 0.3s;
}

.featured-card:hover .featured-card-label {
  color: rgba(255,255,255,0.65);
}

/* ============================================================
   CATEGORY TILES — 5 colonnes portrait
   ============================================================ */
#category-tiles {
  background: #0a0a0a;
  padding: 1rem 5vw 6rem;
  overflow: hidden;
}

.category-tiles-header {
  display: flex;
  align-items: baseline;
  gap: 1.8rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}

.category-tiles-eyebrow {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 7.5px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}

.category-tiles-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 20px;
  color: #fff;
  margin: 0;
  letter-spacing: 0.08em;
}

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

.category-tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #111;
}

/* Portrait ratio via pseudo-element */
.category-tile::before {
  content: '';
  display: block;
  padding-bottom: 148%;
}

.category-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-tile:hover img {
  transform: scale(1.06);
}

.category-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.06) 50%
  );
  z-index: 1;
  transition: background 0.5s;
}

.category-tile:hover .category-tile-overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.18) 50%
  );
}

.category-tile-label {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  z-index: 2;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  font-style: italic;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.06em;
  transition: color 0.3s;
  line-height: 1;
}

.category-tile:hover .category-tile-label {
  color: #fff;
}

/* ============================================================
   SPLIT SECTION — CTA hover emerald
   ============================================================ */
.split-cta:hover {
  color: var(--kd-emerald-pale) !important;
  border-color: var(--kd-emerald) !important;
}

/* ============================================================
   STATEMENT SECTION — refinements + emerald CTA
   ============================================================ */
#statement-noir {
  padding: 9rem 2rem 8.5rem;
}

#statement-noir::before {
  content: '';
  display: block;
  width: 0.5px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1));
  margin: 0 auto 3.5rem;
}

.statement-quote {
  font-size: 30px;
  line-height: 1.45;
}

.statement-cta:hover {
  border-color: var(--kd-emerald) !important;
  color: var(--kd-emerald-pale) !important;
  background: var(--kd-emerald-soft) !important;
}

/* ============================================================
   HERO CTA — hover emerald
   ============================================================ */
.hero-content .hero-cta-link:hover {
  color: var(--kd-emerald-pale) !important;
  border-color: var(--kd-emerald) !important;
}

/* ============================================================
   FOOTER — refinements
   ============================================================ */
.footer-nav a:hover {
  color: var(--kd-emerald-pale) !important;
}

.footer-contact .footer-wa-btn:hover {
  background: var(--kd-emerald) !important;
  border-color: var(--kd-emerald) !important;
  color: #fff !important;
}

/* ============================================================
   RESPONSIVE — nouveaux sections
   ============================================================ */

/* --- Tablet large (≤1200px) --- */
@media (max-width: 1200px) {
  .brand-intro-heading {
    font-size: 60px;
  }
}

/* --- Tablet (≤1024px) --- */
@media (max-width: 1024px) {
  #brand-intro {
    padding: 7rem 2.5rem 6rem;
  }

  .brand-intro-heading {
    font-size: 50px;
  }

  #featured-products {
    padding: 1rem 3rem 4.5rem;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  #category-tiles {
    padding: 1rem 3rem 4.5rem;
  }

  .category-tiles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
}

/* --- Mobile (≤768px) --- */
@media (max-width: 768px) {
  #brand-intro {
    padding: 5.5rem 1.8rem 5rem;
  }

  .brand-intro-heading {
    font-size: 40px;
  }

  .brand-intro-body {
    font-size: 11px;
    line-height: 1.9;
  }

  #featured-products {
    padding: 1rem 1.5rem 3.5rem;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5px;
  }

  .featured-title,
  .category-tiles-title {
    font-size: 17px;
  }

  #category-tiles {
    padding: 1rem 1.5rem 3.5rem;
  }

  .category-tiles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5px;
  }

  #statement-noir {
    padding: 6rem 1.8rem 6rem;
  }

  .statement-quote {
    font-size: 22px;
  }
}

/* --- Petit mobile (≤480px) --- */
@media (max-width: 480px) {
  #brand-intro {
    padding: 4.5rem 1.5rem 4rem;
  }

  .brand-intro-heading {
    font-size: 34px;
    line-height: 1.04;
  }

  .brand-intro-label {
    font-size: 7px;
    letter-spacing: 0.32em;
  }

  .brand-intro-body {
    font-size: 10.5px;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }

  .category-tiles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }

  .category-tile-label {
    font-size: 13px;
    bottom: 1rem;
    left: 1rem;
  }

  .featured-card-label {
    font-size: 7px;
    letter-spacing: 0.2em;
  }

  #statement-noir {
    padding: 5rem 1.5rem 5rem;
  }

  .statement-quote {
    font-size: 19px;
    max-width: 100%;
  }
}

/* ============================================================
   INNER PAGES — GLOBAL REFINEMENTS
   ============================================================ */

/* Page hero — all inner pages */
.page-hero {
  padding: 7rem 2rem 5rem !important;
  background: #0a0a0a !important;
  text-align: center;
  border-bottom: 0.5px solid rgba(255,255,255,0.05) !important;
  overflow: hidden;
}

.page-hero .section-label {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px !important;
  letter-spacing: 0.44em !important;
  color: rgba(255,255,255,0.22) !important;
  margin-bottom: 2rem;
  display: block;
}

.page-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 56px !important;
  color: #fff !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
  margin: 0 0 2rem !important;
}

/* Hide old gold line — replace with CSS rule */
.gold-line {
  display: none !important;
}

.page-hero-subtitle {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.95 !important;
  color: rgba(255,255,255,0.32) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  font-weight: 300 !important;
}

/* CTA sections — all pages */
.cta-section {
  padding: 7rem 2rem !important;
}

.cta-section .section-label {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px !important;
  letter-spacing: 0.42em !important;
  color: rgba(255,255,255,0.22) !important;
  margin-bottom: 1.8rem;
}

.cta-section .section-title {
  font-size: 42px !important;
  font-weight: 300 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 2.5rem !important;
}

.cta-section .btn {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px !important;
  letter-spacing: 0.38em !important;
}

.cta-section .btn-outline {
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.5) !important;
}

.cta-section .btn-outline:hover {
  border-color: var(--kd-emerald) !important;
  color: var(--kd-emerald-pale) !important;
  background: var(--kd-emerald-soft) !important;
}

/* ============================================================
   CATALOGUE PAGE — filter bar, grid, cards
   ============================================================ */

/* Sticky filter bar */
.filter-bar {
  position: sticky !important;
  top: 64px !important;
  z-index: 40 !important;
  background: #0a0a0a !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 0 4vw !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.filter-bar::-webkit-scrollbar {
  display: none !important;
}

.filter-btn {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  padding: 1.15rem 1.3rem !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid transparent !important;
  color: rgba(255,255,255,0.28) !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.3s, border-color 0.3s !important;
  border-radius: 0 !important;
}

.filter-btn:hover {
  color: rgba(255,255,255,0.62) !important;
  border-bottom-color: rgba(255,255,255,0.18) !important;
}

.filter-btn.active {
  color: #fff !important;
  border-bottom-color: var(--kd-emerald) !important;
}

/* Catalogue anchor — zero height */
#catalogue-anchor {
  display: block;
  height: 0;
  visibility: hidden;
}

/* Main section */
main {
  background: #0a0a0a;
  min-height: 40vh;
}

/* Cat section headers */
.cat-section-header {
  padding: 3.5rem 5vw 1.5rem !important;
  margin-top: 0 !important;
  border-top: 0.5px solid rgba(255,255,255,0.06) !important;
}

.cat-section-header:first-of-type {
  border-top: none !important;
}

/* Product grid */
.product-grid {
  padding: 0 5vw 1.5rem !important;
  gap: 2px !important;
}

/* Product card */
.product-card {
  transition: opacity 0.4s !important;
  overflow: hidden;
}

/* Product image — cover fill */
.product-img-wrap {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 108% !important;
  overflow: hidden !important;
  background: #111 !important;
}

.product-img-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #0f0f0f !important;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.04) !important;
}

/* Product info */
.product-info {
  padding: 0.9rem 0 0.7rem !important;
  background: #0a0a0a !important;
  border-top: 0.5px solid rgba(255,255,255,0.04) !important;
}

.product-category {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7px !important;
  letter-spacing: 0.28em !important;
  color: rgba(255,255,255,0.25) !important;
  margin-bottom: 0.5rem;
}

.product-btn {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
  padding: 5px 0 !important;
  color: rgba(255,255,255,0.3) !important;
  text-decoration: none;
  display: inline-block;
  transition: color 0.3s, border-color 0.3s !important;
  cursor: pointer;
  border-radius: 0 !important;
}

.product-btn:hover {
  color: var(--kd-emerald-pale) !important;
  border-bottom-color: var(--kd-emerald) !important;
  background: transparent !important;
}

/* Catalogue note */
.catalogue-note {
  text-align: center !important;
  padding: 2.5rem 2rem 5rem !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8.5px !important;
  letter-spacing: 0.2em !important;
  color: rgba(255,255,255,0.18) !important;
  text-transform: uppercase !important;
  border-top: 0.5px solid rgba(255,255,255,0.05) !important;
  margin-top: 1rem !important;
}

/* ============================================================
   PERSONNALISATION PAGE
   ============================================================ */

.perso-section {
  padding: 3rem 0 2rem;
  background: #0a0a0a;
}

.perso-card {
  padding: 5rem 8vw 4.5rem !important;
  border-top: 0.5px solid rgba(255,255,255,0.06) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: #0a0a0a !important;
  max-width: 100% !important;
}

.perso-card:first-child {
  border-top: none !important;
}

.perso-card-number {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7.5px !important;
  letter-spacing: 0.42em !important;
  color: rgba(255,255,255,0.2) !important;
  text-transform: uppercase !important;
  margin-bottom: 1.8rem;
  display: block;
}

.perso-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 36px !important;
  color: #fff !important;
  margin: 0 0 2rem !important;
  letter-spacing: 0.02em !important;
}

.perso-card > p {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.95 !important;
  color: rgba(255,255,255,0.38) !important;
  max-width: 600px !important;
  margin-bottom: 2.5rem !important;
  font-weight: 300 !important;
}

/* Metal swatches */
.metal-swatches {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.metal-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.swatch-circle {
  transition: transform 0.3s, box-shadow 0.3s;
}

.metal-swatch:hover .swatch-circle {
  transform: scale(1.1);
}

.swatch-label {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7.5px !important;
  letter-spacing: 0.25em !important;
  color: rgba(255,255,255,0.35) !important;
  text-transform: uppercase !important;
}

/* Stone options */
.stone-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 0.5rem;
}

.stone-option {
  padding: 1.4rem 1.8rem !important;
  border: none !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.06) !important;
  background: transparent !important;
  cursor: pointer;
  transition: background 0.3s;
}

.stone-option:first-child {
  border-top: 0.5px solid rgba(255,255,255,0.06) !important;
}

.stone-option:hover {
  background: rgba(255,255,255,0.03) !important;
}

.stone-option.selected {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.stone-option-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  color: #fff !important;
  margin-bottom: 0.4rem;
}

.stone-option-desc {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 10.5px !important;
  color: rgba(255,255,255,0.32) !important;
  line-height: 1.7 !important;
}

/* Cut options */
.cut-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.cut-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.cut-svg-wrap {
  width: 56px !important;
  height: 56px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  padding: 10px;
  transition: border-color 0.3s, background 0.3s;
}

.cut-option:hover .cut-svg-wrap,
.cut-option.selected .cut-svg-wrap {
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.04) !important;
}

.cut-label {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
}

/* Monture grid */
.monture-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 1px !important;
  margin-top: 1.5rem !important;
}

.monture-card {
  padding: 2rem 1.5rem 1.8rem !important;
  border: 0.5px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
  transition: background 0.3s, border-color 0.3s !important;
}

.monture-card:hover,
.monture-card:focus {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

.monture-name {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.8) !important;
}

.monture-tag {
  color: rgba(255,255,255,0.25) !important;
  font-size: 7px !important;
  letter-spacing: 0.2em !important;
}

.monture-desc {
  font-size: 11px !important;
  color: rgba(255,255,255,0.38) !important;
  line-height: 1.75 !important;
}

/* Gravure tags */
.gravure-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.gravure-tag {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.7rem 1.4rem !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.4) !important;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.gravure-tag:hover {
  color: var(--kd-emerald-pale) !important;
  border-color: var(--kd-emerald) !important;
  background: var(--kd-emerald-soft) !important;
}

/* Gravure italic quote — override gold color */
.perso-card p[style*="color:rgba(201,168,76"] {
  color: rgba(255,255,255,0.18) !important;
  font-size: 1.1rem !important;
}

.gia-natural-note {
  font-size: 11px !important;
  color: rgba(255,255,255,0.22) !important;
  font-style: italic !important;
  margin-top: 1.8rem !important;
  display: block !important;
}

.custom-design-text {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 20px !important;
  color: rgba(255,255,255,0.25) !important;
  line-height: 1.6 !important;
  max-width: 560px !important;
  margin-top: 1.5rem !important;
  letter-spacing: 0.03em !important;
}

/* ============================================================
   CONSEILS PAGE
   ============================================================ */

.conseils-section {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 5vw !important;
}

#session-conseil {
  padding: 6rem 5vw !important;
}

/* 4C grid */
.four-c-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  margin-top: 2.5rem !important;
}

.four-c-card {
  padding: 2.5rem 2rem !important;
  border: 0.5px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
  transition: background 0.3s !important;
}

.four-c-card:hover {
  background: rgba(255,255,255,0.04) !important;
}

.four-c-icon {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.06) !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

.four-c-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 20px !important;
  color: #fff !important;
  margin: 0 0 1rem !important;
  letter-spacing: 0.04em !important;
}

.four-c-card p {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,0.35) !important;
  font-weight: 300 !important;
  margin: 0 !important;
}

/* Grade table */
.grade-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 1.5rem !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

.grade-table th {
  font-size: 8px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  padding: 1rem 1.2rem !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.1) !important;
  text-align: left !important;
  font-weight: 400 !important;
}

.grade-table td {
  font-size: 11px !important;
  color: rgba(255,255,255,0.45) !important;
  padding: 0.85rem 1.2rem !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.05) !important;
  vertical-align: top !important;
}

.grade-table tbody tr:hover td {
  background: rgba(255,255,255,0.02) !important;
}

/* Compare grid */
.compare-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  margin-top: 2rem !important;
}

.compare-col {
  padding: 2rem 2rem 2.5rem !important;
  border: 0.5px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
}

.compare-col h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  color: #fff !important;
  margin: 0 0 1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.08) !important;
}

.compare-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
}

.compare-list li {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.38) !important;
  line-height: 1.7 !important;
  padding-left: 1.2rem !important;
  position: relative !important;
  font-weight: 300 !important;
}

.compare-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.55em !important;
  width: 4px !important;
  height: 0.5px !important;
  background: rgba(255,255,255,0.25) !important;
}

/* Section labels + titles on conseils page */
.conseils-section .section-label {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7.5px !important;
  letter-spacing: 0.42em !important;
  color: rgba(255,255,255,0.2) !important;
  margin-bottom: 1.5rem;
  display: block;
}

.conseils-section .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 40px !important;
  color: #fff !important;
  margin: 0 0 1.5rem !important;
}

.conseils-section p {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,0.35) !important;
  max-width: 600px !important;
  font-weight: 300 !important;
}

/* Booking widget — styles in BOOKING CALENDAR section above */

/* ============================================================
   COMMANDER PAGE
   ============================================================ */

.commander-section {
  padding: 4rem 5vw 6rem !important;
  background: #0a0a0a;
}

.step-card {
  border: 0.5px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
  padding: 3.5rem 3.5rem !important;
  margin-bottom: 1px !important;
  border-radius: 0 !important;
}

.timeline {
  background: #0a0a0a !important;
  padding: 1.5rem 5vw !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.06) !important;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

#apropos-hero {
  padding: 9rem 2rem 8rem !important;
  background: #0a0a0a !important;
  text-align: center;
  border-bottom: 0.5px solid rgba(255,255,255,0.05) !important;
  flex-direction: column !important;
}

.apropos-hero-quote {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 36px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.75) !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  letter-spacing: 0.02em !important;
}

.brand-story {
  padding: 7rem 5vw !important;
  background: #0a0a0a !important;
}

.brand-story-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6rem !important;
  align-items: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.brand-story-text .section-label {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 7.5px !important;
  letter-spacing: 0.42em !important;
  color: rgba(255,255,255,0.22) !important;
  margin-bottom: 1.5rem;
  display: block;
}

.brand-story-text h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 40px !important;
  color: #fff !important;
  margin: 0 0 2rem !important;
  line-height: 1.1 !important;
}

.brand-story-text p {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 2 !important;
  color: rgba(255,255,255,0.38) !important;
  margin-bottom: 1.2rem !important;
  font-weight: 300 !important;
}

.brand-story-img {
  overflow: hidden;
  position: relative;
}

.brand-story-img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.values-section {
  padding: 6rem 5vw !important;
  background: #0a0a0a !important;
  border-top: 0.5px solid rgba(255,255,255,0.05) !important;
}

.values-section .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 36px !important;
  color: #fff !important;
  margin-bottom: 3rem !important;
  text-align: center !important;
}

.apropos-contact {
  padding: 7rem 2rem !important;
  text-align: center !important;
  background: #0a0a0a !important;
  border-top: 0.5px solid rgba(255,255,255,0.05) !important;
}

.apropos-contact .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 36px !important;
  color: #fff !important;
  margin-bottom: 2.5rem !important;
}

.response-note {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  color: rgba(255,255,255,0.2) !important;
  text-transform: uppercase !important;
  margin-top: 1.5rem !important;
}

/* ============================================================
   INNER PAGE MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .page-hero-title {
    font-size: 44px !important;
  }

  .brand-story-inner {
    grid-template-columns: 1fr !important;
    gap: 3.5rem !important;
  }

  .four-c-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .compare-grid {
    grid-template-columns: 1fr !important;
  }

  .perso-card {
    padding: 4rem 5vw 3.5rem !important;
  }

  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 5.5rem 1.5rem 4rem !important;
  }

  .page-hero-title {
    font-size: 34px !important;
  }

  .page-hero-subtitle {
    font-size: 11px !important;
  }

  .four-c-grid {
    grid-template-columns: 1fr !important;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 3vw 1.5rem !important;
  }

  .cat-section-header {
    padding: 2.5rem 3vw 1.2rem !important;
  }

  .filter-bar {
    padding: 0 3vw !important;
  }

  .filter-btn {
    padding: 1rem 1rem !important;
    font-size: 7px !important;
  }

  .apropos-hero-quote {
    font-size: 26px !important;
  }

  .brand-story {
    padding: 5rem 5vw !important;
  }

  .perso-card {
    padding: 3rem 5vw 2.5rem !important;
  }

  .monture-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .conseils-section .section-title {
    font-size: 32px !important;
  }

  .cta-section {
    padding: 5rem 1.8rem !important;
  }

  .cta-section .section-title {
    font-size: 32px !important;
  }
}

@media (max-width: 480px) {
  .page-hero-title {
    font-size: 28px !important;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }

  .filter-btn {
    font-size: 6.5px !important;
    padding: 0.9rem 0.8rem !important;
    letter-spacing: 0.22em !important;
  }

  .four-c-grid {
    grid-template-columns: 1fr !important;
  }

  .compare-grid {
    grid-template-columns: 1fr !important;
  }

  .monture-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .apropos-hero-quote {
    font-size: 22px !important;
  }

  .perso-card-title {
    font-size: 28px !important;
  }

  .conseils-section .section-title {
    font-size: 28px !important;
  }

  .brand-story-text h2 {
    font-size: 30px !important;
  }
}

/* ============================================================
   CATALOGUE — PRODUCT NAME TYPOGRAPHY
   ============================================================ */
.product-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #0a0a0a;
  margin: 0 0 4px;
  line-height: 1.2;
}

.product-info {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-category {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}

/* ============================================================
   COMMANDER — MINI-ITEM NAME OVERLAY
   ============================================================ */
.catalogue-mini-item {
  position: relative !important;
  overflow: hidden;
}

.mini-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 8px 7px;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.92);
  text-align: center;
  pointer-events: none;
  line-height: 1.2;
}

/* ============================================================
   COMMANDER — SELECTION PREVIEW
   ============================================================ */
#selection-preview {
  margin-bottom: 1.5rem;
}

.selection-preview-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 4px;
}

.preview-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}

.preview-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.preview-cat {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}

.preview-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.92);
  line-height: 1.1;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#change-selection-btn {
  flex-shrink: 0;
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

#change-selection-btn:hover {
  border-color: rgba(201,168,76,0.6);
  color: rgba(201,168,76,0.9);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .selection-preview-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .preview-thumb {
    width: 60px;
    height: 60px;
  }
  .preview-name {
    font-size: 17px;
  }
  #change-selection-btn {
    width: 100%;
    text-align: center;
    padding: 9px 12px;
  }
}

/* ============================================================
   EDITORIAL SLIDER — Homepage Collections
   ============================================================ */

/* ── Section wrapper ── */
#editorial-slider {
  position: relative;
  background: #080808;
  display: block;
  padding: 0 !important;  /* override global section { padding: 6rem 0 } */
  margin: 0;
}

/* ── Slide visual area ── */
.editorial-slides-wrap {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 520px;
  max-height: 940px;
  overflow: hidden;
  background: #0a0a0a;
}

/* ── Individual slide ── */
.editorial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.05s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.editorial-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ── Slide background ── */
.editorial-slide-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.editorial-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.0);
  will-change: transform;
}

.editorial-slide.active .editorial-slide-img {
  transform: scale(1.07);
  transition: transform 7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Gradient overlay ── */
.editorial-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,  rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.36) 42%, rgba(0,0,0,0.10) 70%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,0.22) 0%, transparent 55%);
}

/* ── Slide body (bottom content) ── */
.editorial-slide-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 8% 3.4rem 8%;
  display: flex;
  align-items: flex-end;
  gap: 2.6rem;
  z-index: 4;
}

/* ── Slide index block ── */
.editorial-index-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 4px;
  opacity: 0;
}

.editorial-slide.active .editorial-index-block {
  opacity: 1;
  transition: opacity 0.65s ease 0.22s;
}

.editorial-idx-num {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 30px;
  font-weight: 200;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
  line-height: 1;
  display: block;
}

.editorial-idx-total {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  display: block;
  margin-top: 6px;
}

/* ── Vertical divider ── */
.editorial-vline {
  flex-shrink: 0;
  width: 1px;
  height: 68px;
  background: rgba(255,255,255,0.13);
  opacity: 0;
  align-self: flex-end;
  margin-bottom: 7px;
}

.editorial-slide.active .editorial-vline {
  opacity: 1;
  transition: opacity 0.65s ease 0.30s;
}

/* ── Text block ── */
.editorial-textblock {
  flex: 1;
  opacity: 0;
  transform: translateY(14px);
  min-width: 0;
}

.editorial-slide.active .editorial-textblock {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.82s ease 0.42s, transform 0.82s cubic-bezier(0.25, 0.1, 0.25, 1) 0.42s;
}

.editorial-eyebrow {
  display: block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 11px;
}

.editorial-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(30px, 3.8vw, 54px);
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.96);
  margin: 0 0 13px;
  line-height: 1.1;
}

.editorial-desc {
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(0.70rem, 0.92vw, 0.82rem);
  font-weight: 300;
  letter-spacing: 0.025em;
  color: rgba(255,255,255,0.44);
  line-height: 1.70;
  max-width: 400px;
  margin: 0 0 22px;
}

/* ── CTA Button ── */
.editorial-cta {
  display: inline-block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  border: 0.5px solid rgba(255,255,255,0.28);
  padding: 11px 24px;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}

.editorial-cta:hover,
.editorial-cta:focus-visible {
  border-color: rgba(201,168,76,0.75);
  color: rgba(201,168,76,0.95);
  background: rgba(201,168,76,0.04);
  outline: none;
}

/* ── Navigation arrows ── */
.editorial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.55);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.22s, color 0.22s, background 0.22s;
  margin-top: -2.5rem; /* offset upward from dead-center so it clears the text area */
}

.editorial-arrow:hover {
  border-color: rgba(201,168,76,0.55);
  color: rgba(201,168,76,0.90);
  background: rgba(0,0,0,0.30);
}

.editorial-arrow svg {
  width: 18px;
  height: 18px;
}

.editorial-arrow--prev { left: 4%; }
.editorial-arrow--next { right: 4%; }

/* ── Category navigation bar ── */
.editorial-cat-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #0a0a0a;
  border-top: 0.5px solid rgba(255,255,255,0.07);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.editorial-cat-nav::-webkit-scrollbar { display: none; }

.editorial-cat-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 110px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px 0;
  background: transparent;
  border: none;
  border-right: 0.5px solid rgba(255,255,255,0.055);
  cursor: pointer;
  transition: background 0.22s;
}

.editorial-cat-btn:last-child {
  border-right: none;
}

.editorial-cat-btn:hover {
  background: rgba(255,255,255,0.025);
}

.editorial-cat-label {
  display: block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.26);
  transition: color 0.22s;
  margin-bottom: 14px;
  white-space: nowrap;
}

.editorial-cat-btn.active .editorial-cat-label {
  color: rgba(255,255,255,0.80);
}

.editorial-cat-btn:hover .editorial-cat-label {
  color: rgba(255,255,255,0.48);
}

/* ── Progress line on active tab ── */
.editorial-cat-progress {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1.5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: transparent;
}

@keyframes editorial-progress-run {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.editorial-cat-btn.active .editorial-cat-progress {
  background: rgba(201,168,76,0.75);
  animation: editorial-progress-run 5.5s linear forwards;
}

/* ── Tablet ── */
@media (max-width: 960px) {
  .editorial-slide-body {
    padding: 0 6% 2.8rem 6%;
    gap: 1.8rem;
  }
  .editorial-idx-num { font-size: 24px; }
}

/* ── Mobile landscape / tablet portrait ── */
@media (max-width: 768px) {
  .editorial-slides-wrap {
    height: 86vh;
    min-height: 480px;
  }

  .editorial-slide-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 6% 3rem 6%;
  }

  .editorial-index-block {
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 14px;
  }

  .editorial-idx-num { font-size: 20px; }
  .editorial-idx-total { margin-top: 0; }

  .editorial-vline { display: none; }

  .editorial-desc { max-width: 100%; }

  .editorial-arrow {
    width: 38px;
    height: 38px;
    margin-top: -3rem;
  }

  .editorial-arrow--prev { left: 3%; }
  .editorial-arrow--next { right: 3%; }

  .editorial-cat-btn {
    min-width: 96px;
    padding: 13px 12px 0;
  }

  .editorial-cat-label {
    font-size: 7.5px;
    letter-spacing: 0.16em;
    margin-bottom: 12px;
  }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
  .editorial-slides-wrap {
    height: 88vh;
    min-height: 460px;
  }

  /* Hide arrows — rely on swipe */
  .editorial-arrow { display: none; }

  .editorial-cat-nav {
    justify-content: flex-start;
  }

  .editorial-cat-btn {
    min-width: 86px;
    flex-shrink: 0;
    max-width: none;
  }

  .editorial-title {
    font-size: clamp(26px, 8.5vw, 36px);
  }

  .editorial-desc {
    font-size: 0.70rem;
    line-height: 1.65;
  }
}

/* ============================================================
   EDITORIAL CATEGORIES — Alternating magazine modules
   ============================================================ */

#editorial-categories {
  padding: 0 !important;
  background: #080808;
  overflow: hidden;
}

/* ── Module layout ── */
.ed-cat-mod {
  display: flex;
  flex-direction: row;
  min-height: 560px;
  border-top: none;
  overflow: hidden;
}

.ed-cat-mod--r {
  flex-direction: row-reverse;
}

/* ── Figure / image side ── */
.ed-cat-fig {
  flex: 0 0 58%;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.ed-cat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ed-cat-mod:hover .ed-cat-img {
  transform: scale(1.04);
}

/* Gradient veil — blends image edge into the dark text panel */
.ed-cat-fig-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent 50%, rgba(8, 8, 8, 0.62) 100%);
}

/* Reversed veil for right-image modules */
.ed-cat-fig-veil--r {
  background: linear-gradient(to left, transparent 50%, rgba(8, 8, 8, 0.62) 100%);
}

/* ── Text side ── */
.ed-cat-text {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 7% 5rem 8%;
  background: #080808;
  position: relative;
}

/* Subtle left border accent */
.ed-cat-mod:not(.ed-cat-mod--r) .ed-cat-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 0.5px;
  background: rgba(201, 168, 76, 0.22);
}

/* For reversed modules, border on the right */
.ed-cat-mod--r .ed-cat-text {
  padding: 5rem 8% 5rem 7%;
}

.ed-cat-mod--r .ed-cat-text::before {
  content: '';
  position: absolute;
  right: 0;
  left: auto;
  top: 15%;
  height: 70%;
  width: 0.5px;
  background: rgba(201, 168, 76, 0.22);
}

/* ── Counter ── */
.ed-cat-counter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.ed-cat-n {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: rgba(201, 168, 76, 0.60);
  line-height: 1;
}

.ed-cat-rule {
  flex: 0 0 40px;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.16);
  display: block;
}

/* ── Eyebrow ── */
.ed-cat-eyebrow {
  display: block;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  margin-bottom: 14px;
}

/* ── Title ── */
.ed-cat-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 1.08;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

/* ── Description ── */
.ed-cat-desc {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.46);
  margin: 0 0 36px;
  max-width: 340px;
  letter-spacing: 0.02em;
}

/* ── CTA link ── */
.ed-cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  text-decoration: none;
  transition: color 0.3s, gap 0.3s;
  align-self: flex-start;
}

/* Extending line after CTA */
.ed-cat-cta::after {
  content: '';
  display: block;
  width: 28px;
  height: 0.5px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.ed-cat-cta:hover {
  color: rgba(255, 255, 255, 1);
}

.ed-cat-cta:hover::after {
  width: 52px;
}

/* ── Last module: bottom border ── */
.ed-cat-mod:last-child {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}

/* ── Responsive: tablet (960px) ── */
@media (max-width: 960px) {
  .ed-cat-mod {
    min-height: 520px;
  }

  .ed-cat-fig {
    flex: 0 0 50%;
  }

  .ed-cat-text {
    flex: 0 0 50%;
    padding: 4rem 6% 4rem 6%;
  }

  .ed-cat-mod--r .ed-cat-text {
    padding: 4rem 6% 4rem 6%;
  }

  .ed-cat-title {
    font-size: clamp(28px, 4vw, 44px);
  }

  .ed-cat-desc {
    font-size: 0.74rem;
    max-width: none;
  }
}

/* ── Responsive: mobile (768px) ── */
@media (max-width: 768px) {
  .ed-cat-mod,
  .ed-cat-mod--r {
    flex-direction: column !important;
    min-height: auto;
  }

  .ed-cat-fig {
    flex: none;
    width: 100%;
    height: 60vw;
    min-height: 260px;
    position: relative;
  }

  .ed-cat-fig-veil {
    background: linear-gradient(to bottom, transparent 50%, rgba(8, 8, 8, 0.65) 100%) !important;
  }

  .ed-cat-text {
    flex: none;
    width: 100%;
    padding: 3.2rem 7vw 3.6rem;
    align-items: flex-start;
  }

  .ed-cat-mod--r .ed-cat-text {
    padding: 3.2rem 7vw 3.6rem;
  }

  .ed-cat-mod:not(.ed-cat-mod--r) .ed-cat-text::before,
  .ed-cat-mod--r .ed-cat-text::before {
    display: none;
  }

  .ed-cat-title {
    font-size: clamp(28px, 8vw, 42px);
  }

  .ed-cat-desc {
    font-size: 0.76rem;
    max-width: none;
  }
}

/* ── Responsive: small mobile (480px) ── */
@media (max-width: 480px) {
  .ed-cat-fig {
    height: 70vw;
  }

  .ed-cat-title {
    font-size: clamp(26px, 8.5vw, 38px);
  }

  .ed-cat-eyebrow {
    font-size: 8px;
  }

  .ed-cat-cta {
    font-size: 9px;
  }
}

/* ============================================================
   LUXURY REDESIGN — Graff editorial × Messika catalogue clarity
   ============================================================ */

/* ── Global section breathing ── */
section,
.split-section,
#brand-intro,
#statement-noir {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

#editorial-categories {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

#hero {
  padding: 0 !important;
}

/* ── Homepage: modules — proportions Graff-alignées ── */
.ed-cat-mod {
  min-height: 560px;
}

.ed-cat-mod + .ed-cat-mod {
  border-top: none;
}

/* Hauteur uniforme — pas d'alternance */
.ed-cat-mod:nth-child(odd),
.ed-cat-mod:nth-child(even) {
  min-height: 560px;
}

/* Text padding aligné Graff */
.ed-cat-text {
  padding: 4.5rem 7% 4.5rem 8% !important;
}

.ed-cat-mod--r .ed-cat-text {
  padding: 4.5rem 8% 4.5rem 7% !important;
}

/* Narrower, more poised text column */
.ed-cat-title {
  max-width: 420px;
}

.ed-cat-desc {
  max-width: 320px;
  line-height: 2;
  margin-bottom: 44px;
}

/* Stronger counter */
.ed-cat-counter {
  margin-bottom: 32px;
}

.ed-cat-rule {
  flex: 0 0 56px;
}

/* ── Brand intro — more breathing ── */
#brand-intro .brand-intro-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 0 2rem;
}

.brand-intro-label {
  letter-spacing: 0.28em;
  font-size: 9px;
  margin-bottom: 2rem;
  display: block;
}

.brand-intro-heading {
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1.06 !important;
  margin-bottom: 2.4rem;
}

.brand-intro-rule {
  margin: 2.8rem auto !important;
}

.brand-intro-body {
  font-size: 0.82rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.50);
  max-width: 460px;
  margin: 0 auto 3rem;
}

/* ── Statement section — more proportioned ── */
#statement-noir {
  padding: 10rem 2rem !important;
}

.statement-quote {
  font-size: clamp(24px, 3vw, 36px) !important;
  max-width: 600px !important;
  line-height: 1.5 !important;
  margin-bottom: 3rem !important;
}

/* ── Split section — more breathing ── */
.split-section .split-text {
  padding: 5rem 8%;
}

.split-heading {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.6rem;
}

.split-body {
  font-size: 0.80rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.48);
  max-width: 380px;
}

/* ── Catalogue page hero — editorial treatment ── */
.page-hero {
  padding: 7rem 2rem 3.5rem !important;
  text-align: center;
  background: #080808;
  border-bottom: none;
}

.page-hero .section-label {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.55);
  display: block;
  margin-bottom: 1.6rem;
}

.page-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.90) !important;
  line-height: 1.08 !important;
  margin-bottom: 1.2rem !important;
}

.gold-line {
  width: 32px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  margin: 1.6rem auto !important;
}

.page-hero-subtitle {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 0.72rem !important;
  line-height: 1.9 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  letter-spacing: 0.04em;
  max-width: 440px;
  margin: 0 auto !important;
}

/* ── Filter bar — premium horizontal tab navigation ── */
.filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-wrap: wrap;
  padding: 0 2rem !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
  background: #080808;
  position: sticky;
  top: 60px;
  z-index: 50;
}

.filter-btn {
  position: relative;
  padding: 1.4rem 1.8rem !important;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.38) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap;
}

.filter-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 0.5px;
  background: rgba(201, 168, 76, 0.80);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

.filter-btn:hover {
  color: rgba(255, 255, 255, 0.72) !important;
}

.filter-btn.active {
  color: rgba(255, 255, 255, 0.92) !important;
}

.filter-btn.active::after {
  transform: translateX(-50%) scaleX(1);
}

.filter-count {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(201, 168, 76, 0.50);
  text-transform: uppercase;
  margin-left: 2rem;
  white-space: nowrap;
}

/* ── Catalogue main — generous top space ── */
main {
  padding-top: 0;
  padding-bottom: 6rem;
}

/* ── Category section wrapper ── */
.cat-section {
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}

.cat-section + .cat-section {
  border-top: 0.5px solid rgba(255, 255, 255, 0.05);
  padding-top: 5rem;
}

/* ── Category section header ── */
.cat-section-header {
  max-width: 1320px;
  margin: 0 auto 3.5rem;
  padding: 0 2rem 2.5rem;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: baseline;
  gap: 2rem;
}

.cat-section-label {
  display: none !important;
}

.cat-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.5vw, 46px) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.cat-section-count {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin: 0 !important;
  flex-shrink: 0;
}

/* ── Product grid — luxury 4-column ── */
.product-grid.cat-grid {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 2rem 4rem !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px !important;
}

/* ── Product card — premium minimal ── */
.product-card {
  background: #0d0d0d !important;
  border: none !important;
  cursor: pointer;
  overflow: hidden;
  transition: none !important;
  position: relative;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.5px solid rgba(255, 255, 255, 0);
  transition: border-color 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 1;
}

.product-card:hover::after {
  border-color: rgba(255, 255, 255, 0.12);
}

.product-card:hover {
  transform: none !important;
}

/* ── Product image ── */
.product-img-wrap {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  background: #111 !important;
  overflow: hidden !important;
  position: relative !important;
}

.product-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.04) !important;
}

/* ── Product info ── */
.product-info {
  padding: 1.6rem 1.4rem 2rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-category {
  font-size: 8px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(201, 168, 76, 0.55) !important;
  margin-bottom: 0 !important;
}

.product-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 !important;
  line-height: 1.2;
}

.product-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  width: auto !important;
  padding: 0 !important;
  text-align: left !important;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.42) !important;
  border: none !important;
  background: transparent !important;
  margin-top: 0.6rem;
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-btn::after {
  content: '';
  display: block;
  width: 22px;
  height: 0.5px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-shrink: 0;
}

.product-btn:hover {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

.product-btn:hover::after {
  width: 36px;
}

/* ── Catalogue note ── */
.catalogue-note {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  text-align: center;
  padding: 4rem 2rem 2rem;
  max-width: 1320px;
  margin: 0 auto;
}

/* ── Scroll reveal — premium fade-up ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Navigation — more stately spacing ── */
.navbar-inner {
  padding: 0 3rem !important;
}

.navbar-nav {
  gap: 3rem !important;
}

/* ── Responsive — tablet (1100px) ── */
@media (max-width: 1100px) {
  .product-grid.cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .ed-cat-mod,
  .ed-cat-mod:nth-child(odd),
  .ed-cat-mod:nth-child(even) {
    min-height: 480px !important;
  }

  .ed-cat-fig {
    flex: 0 0 55% !important;
  }

  .ed-cat-text {
    flex: 0 0 45% !important;
  }
}

/* ── Responsive — tablet portrait (768px) ── */
@media (max-width: 768px) {
  section,
  .split-section,
  #brand-intro,
  #statement-noir {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }

  .product-grid.cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }

  .cat-section-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .filter-bar {
    top: 52px;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.2rem !important;
    gap: 0 !important;
  }

  .filter-btn {
    padding: 1.2rem 1.2rem !important;
    font-size: 8.5px !important;
    flex-shrink: 0;
  }

  .navbar-inner {
    padding: 0 1.5rem !important;
  }

  .navbar-nav {
    gap: 2rem !important;
  }

  .ed-cat-text,
  .ed-cat-mod--r .ed-cat-text {
    padding: 4rem 7vw !important;
  }
}

/* ── Responsive — mobile (480px) ── */
@media (max-width: 480px) {
  .product-grid.cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 0.8rem 3rem !important;
  }

  .product-img-wrap {
    aspect-ratio: 1/1 !important;
  }

  .product-name {
    font-size: 0.92rem !important;
  }

  .page-hero {
    padding: 7rem 1.5rem 3rem !important;
  }
}

/* ── Navbar — typographie plus clean et raffinée ── */
.navbar-nav a {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color 0.35s !important;
}

.navbar-nav a:hover,
.navbar-nav a.active {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Retirer la ligne soulignée dorée sur les pages sombres */
.navbar-nav a::after {
  background: rgba(255, 255, 255, 0.40) !important;
  height: 0.5px !important;
}

/* ============================================================
   NAVBAR — transparent sur l'image, fond sombre au scroll
   ============================================================ */

/* Fond blanc retiré — navbar transparente par défaut */
#navbar {
  background: transparent !important;
  transition: background 0.4s ease, backdrop-filter 0.4s ease !important;
}

/* Fond sombre + flou quand on scrolle */
#navbar.scrolled {
  background: rgba(8,8,8,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Hamburger — blanc sur fond sombre/transparent */
.hamburger span {
  background: rgba(255,255,255,0.82) !important;
}

/* Lang toggle FR / EN — blanc visible */
.lang-toggle button,
.lang-btn-fr,
.lang-btn-en {
  color: rgba(255,255,255,0.65) !important;
}

.lang-toggle span {
  color: rgba(255,255,255,0.3) !important;
}

/* ============================================================
   LUXURY HERO REDESIGN — editorial centered brand identity
   Applies to: homepage hero + navbar (all pages)
   ============================================================ */

/* ── Navbar: 3-column grid, logo centered ──────────────────── */

.navbar-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 0 4vw !important;
}

/* Nav links → left column */
.navbar-nav {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* Logo → center column */
.navbar-logo {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  /* clear any old positioning */
  position: static !important;
  transform: none !important;
}

/* Groupe droite (liens droits + contrôles) → col 3 */
.navbar-right {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2.4rem !important;
}

/* Liens nav côté droit — même style que côté gauche */
.navbar-nav-r {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  gap: 2.4rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Controls : flex item dans navbar-right (plus enfant direct du grid) */
.navbar-controls {
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
}

/* Logo wordmark — plus grand, plus présent */
.navbar-logo-keihal {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 26px !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.94) !important;
  line-height: 1 !important;
  display: block !important;
  transition: color 0.3s !important;
}

.navbar-logo-diamonds {
  font-family: 'Inter', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 6px !important;
  letter-spacing: 0.55em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.38) !important;
  line-height: 1 !important;
  display: block !important;
}

/* Navbar hover on logo */
.navbar-logo:hover .navbar-logo-keihal {
  color: #fff !important;
}

/* ── Hero overlay: gradient sombre en haut (navbar lisible) et en bas (tagline lisible) ── */

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.16) 30%,
    rgba(0,0,0,0.08) 54%,
    rgba(0,0,0,0.45) 76%,
    rgba(0,0,0,0.86) 100%
  ) !important;
  z-index: 1 !important;
}

/* ── Hero brand block: centered, large, editorial ──────────── */

.hero-brand-block {
  position: absolute !important;
  top: 46% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: none;
  animation: heroBrandReveal 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

@keyframes heroBrandReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.hero-brand-keihal {
  display: block !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(72px, 9.8vw, 134px) !important;
  color: #fff !important;
  letter-spacing: 0.14em !important;
  line-height: 0.88 !important;
  text-shadow: 0 2px 60px rgba(0,0,0,0.45) !important;
}

.hero-brand-sep {
  width: 38px !important;
  height: 0.5px !important;
  background: rgba(255,255,255,0.26) !important;
  margin: 1.6rem 0 1.4rem !important;
  flex-shrink: 0 !important;
}

.hero-brand-diamonds {
  display: block !important;
  font-family: 'Inter', 'Tenor Sans', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(7.5px, 0.80vw, 11px) !important;
  color: rgba(255,255,255,0.48) !important;
  letter-spacing: 0.60em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

/* ── Hero content: tagline + CTA en bas, seul élément texte du hero ── */

.hero-content {
  z-index: 3 !important;
  bottom: 10% !important;
  gap: 2.2rem !important;
}

.hero-content .hero-tagline {
  font-size: clamp(26px, 3.2vw, 48px) !important;
  color: rgba(255,255,255,0.90) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
}

/* ── Hero scroll indicator: thin animated line ─────────────── */

.hero-scroll-line {
  position: absolute !important;
  bottom: 2.4rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0.5px !important;
  height: 0 !important;
  background: rgba(255,255,255,0.22) !important;
  z-index: 3 !important;
  animation: heroScrollLineGrow 0.9s ease 2.4s forwards !important;
}

@keyframes heroScrollLineGrow {
  to { height: 44px; }
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero-brand-keihal {
    font-size: clamp(60px, 10vw, 96px) !important;
  }
}

@media (max-width: 768px) {
  /* Navbar mobile: nav droite cachée, seul le hamburger reste */
  .navbar-nav-r {
    display: none !important;
  }
  .navbar-logo-keihal {
    font-size: 20px !important;
  }
  .navbar-logo-diamonds {
    font-size: 5.5px !important;
    letter-spacing: 0.42em !important;
  }

  /* Hero: tagline seule → taille adaptée */
  .hero-content .hero-tagline {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    letter-spacing: 0.03em !important;
  }
  .hero-content {
    bottom: 8% !important;
    gap: 1.8rem !important;
  }
}

@media (max-width: 480px) {
  .hero-content .hero-tagline {
    font-size: 20px !important;
  }
  .hero-content {
    bottom: 7% !important;
  }
}

/* ============================================================
   EDITORIAL CATEGORIES — Layout centré, image réduite,
   fond noir visible des deux côtés (style Graff encadré)
   ============================================================ */

/* Marges latérales → fond noir encadre les modules des 2 côtés */
#editorial-categories {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 6vw !important;
  overflow: visible !important;
  background: #080808;
}

/* Hauteur : revenir à la valeur initiale */
.ed-cat-mod,
.ed-cat-mod--r,
.ed-cat-mod:nth-child(odd),
.ed-cat-mod:nth-child(even) {
  min-height: 560px !important;
}

/* Séparateur très discret entre modules */
.ed-cat-mod + .ed-cat-mod {
  border-top: 0.5px solid rgba(255,255,255,0.05) !important;
}

/* Image réduite — laisse le fond noir visible sur les bords */
.ed-cat-fig {
  flex: 0 0 50% !important;
}

/* Colonne texte */
.ed-cat-text {
  flex: 0 0 50% !important;
  padding: 5rem 7% 5rem 8% !important;
  justify-content: center !important;
}

.ed-cat-mod--r .ed-cat-text {
  padding: 5rem 8% 5rem 7% !important;
}

/* Titre — taille modérée */
.ed-cat-title {
  font-size: clamp(32px, 3.5vw, 52px) !important;
  margin: 0 0 1.2rem !important;
  max-width: 380px !important;
}

/* Description */
.ed-cat-desc {
  max-width: 300px !important;
  margin: 0 0 2.5rem !important;
  line-height: 1.95 !important;
}

/* ── Responsive tablet (1100px) ── */
@media (max-width: 1100px) {
  #editorial-categories {
    padding: 0 4vw !important;
  }

  .ed-cat-mod,
  .ed-cat-mod--r,
  .ed-cat-mod:nth-child(odd),
  .ed-cat-mod:nth-child(even) {
    min-height: 480px !important;
  }

  .ed-cat-fig {
    flex: 0 0 50% !important;
  }

  .ed-cat-text {
    flex: 0 0 50% !important;
    padding: 4rem 6% 4rem 7% !important;
  }

  .ed-cat-mod--r .ed-cat-text {
    padding: 4rem 7% 4rem 6% !important;
  }
}

/* ── Responsive mobile (768px) ── */
@media (max-width: 768px) {
  #editorial-categories {
    padding: 0 3vw !important;
  }

  .ed-cat-mod,
  .ed-cat-mod--r,
  .ed-cat-mod:nth-child(odd),
  .ed-cat-mod:nth-child(even) {
    min-height: auto !important;
  }

  .ed-cat-fig {
    flex: none !important;
    width: 100% !important;
    height: 60vw !important;
    min-height: 260px !important;
  }

  .ed-cat-text {
    flex: none !important;
    width: 100% !important;
    padding: 3rem 6vw 3.5rem !important;
  }

  .ed-cat-mod--r .ed-cat-text {
    padding: 3rem 6vw 3.5rem !important;
  }

  .ed-cat-title {
    font-size: clamp(28px, 8vw, 42px) !important;
  }

  .ed-cat-desc {
    max-width: none !important;
    margin-bottom: 2rem !important;
  }
}

/* ── Responsive small mobile (480px) ── */
@media (max-width: 480px) {
  #editorial-categories {
    padding: 0 2vw !important;
  }

  .ed-cat-fig {
    height: 68vw !important;
  }

  .ed-cat-text {
    padding: 2.8rem 5vw 3.2rem !important;
  }

  .ed-cat-mod--r .ed-cat-text {
    padding: 2.8rem 5vw 3.2rem !important;
  }
}

/* ============================================================
   CATALOGUE — MOOD CARD intégrée dans la grille (style Graff)
   Position 3 dans le grid : cols 3-4, rows 1-2
   ============================================================ */

/* Header catégorie : simple, titre + count en ligne */
.cat-section-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 2rem !important;
  padding: 3.5rem 5vw 2rem !important;
  margin: 0 !important;
  border-top: 0.5px solid rgba(255,255,255,0.06) !important;
}

.cat-section-header:first-of-type {
  border-top: none !important;
}

.cat-section-header .cat-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  color: rgba(255,255,255,0.94) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.cat-section-header .cat-section-count {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 8.5px !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.22) !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* Mood card : occupe colonnes 3-4, lignes 1-2 dans la grille */
.cat-mood-card {
  grid-column: 3 / span 2 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #111 !important;
  /* hauteur = 2 cartes produit (~108% each + 2px gap) */
  min-height: 200px;
}

.cat-mood-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.cat-mood-card:hover img {
  transform: scale(1.04) !important;
}

/* Responsive — tablet : mood card prend cols 3-4, rows 1-2 sur grille 3 colonnes */
@media (max-width: 1100px) {
  .cat-mood-card {
    grid-column: 3 / span 1 !important;
    grid-row: 1 / span 2 !important;
  }
}

/* Responsive — mobile : mood card plein largeur, hauteur fixe */
@media (max-width: 768px) {
  .cat-mood-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 16/9 !important;
    min-height: 240px !important;
    order: -1 !important;
  }
}

/* ============================================================
   CATALOGUE — Gap fix + Mood overlay + Image update
   ============================================================ */

/* ── 1. Supprime l'espace vide entre la barre filtres et le catalogue ── */
.cat-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.cat-section + .cat-section {
  padding-top: 0 !important;
  border-top: none !important;
}

/* Titre catégorie : padding minimal — colle au filtre */
.cat-section-header {
  padding: 0.5rem 5vw 0.8rem !important;
}

/* ── 2. Image mood sombre + encadrée (plus petite visuellement) ── */
.cat-mood-card img {
  filter: brightness(0.45) !important;
  transform: scale(0.86) !important;
  transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.5s ease !important;
}

.cat-mood-card:hover img {
  transform: scale(0.89) !important;
  filter: brightness(0.50) !important;
}

/* ── 3. Overlay texte ── */
.cat-mood-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 2rem !important;
  z-index: 2 !important;
  /* Gradient subtil pour lisibilité du texte */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.32) 100%
  ) !important;
}

.cat-mood-label {
  display: block !important;
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 7px !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.42) !important;
  margin: 0 0 1.1rem !important;
}

.cat-mood-text {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(18px, 2vw, 30px) !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

.cat-mood-rule {
  width: 20px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  margin: 1rem auto 0 !important;
}

/* Responsive — tablet */
@media (max-width: 1100px) {
  .cat-mood-text {
    font-size: clamp(16px, 2.5vw, 26px) !important;
  }
}

/* Responsive — mobile (overlay plein format) */
@media (max-width: 768px) {
  .cat-mood-overlay {
    padding: 1.5rem !important;
  }
  .cat-mood-text {
    font-size: clamp(18px, 5vw, 28px) !important;
  }
}

/* ============================================================
   KEIHAL DIAMONDS — SYSTÈME NEUTRE v3
   Palette : NOIR · BLANC — minimaliste, épuré, premium
   ============================================================ */

:root {
  /* ── Blancs atténués pour les LIGNES (fond sombre) ── */
  --kd-brd-line:  rgba(255,255,255,0.50);      /* Ligne pleine — lisible       */
  --kd-brd-mid:   rgba(255,255,255,0.28);      /* Ligne semi — standard        */
  --kd-brd-low:   rgba(255,255,255,0.12);      /* Séparateur discret           */
  --kd-brd-faint: rgba(255,255,255,0.05);      /* Fantôme — fond/hover         */

  /* ── Blancs atténués pour le TEXTE (lisible sur #080808) ── */
  --kd-brd-text:  rgba(255,255,255,0.70);      /* Labels, catégories, numéros  */
  --kd-brd-dim:   rgba(255,255,255,0.42);      /* Texte secondaire             */
}

/* ==========================================================
   PIÈCES FORTES
   ========================================================== */

/* Barre gauche bordeaux sur les titres de catégorie catalogue */
.cat-section-header .cat-section-title {
  border-left: 1.5px solid var(--kd-brd-line) !important;
  padding-left: 1rem !important;
}

/* Trait actif sous le filtre sélectionné */
.filter-btn::after {
  background: var(--kd-brd-line) !important;
}

/* Ligne décorative page-hero (remplace l'ancien trait blanc/or) */
.gold-line {
  background: var(--kd-brd-line) !important;
  width: 22px !important;
}

/* Ligne thin sur le hero d'accueil */
.hero-thin-line {
  background: var(--kd-brd-mid) !important;
}

/* ==========================================================
   TEXTES BORDEAUX (remplace tout le beige/or sur texte)
   ========================================================== */

/* Label de section : "COLLECTIONS", "FIANÇAILLES"… */
.page-hero .section-label,
.section-label {
  color: var(--kd-brd-text) !important;
}

/* Catégorie sur chaque carte produit : "Bague de fiançailles" */
.product-category {
  color: var(--kd-brd-text) !important;
}

/* Compteur de résultats dans la barre de filtres */
.filter-count {
  color: var(--kd-brd-text) !important;
}

/* Numéros 01, 02… dans les modules éditoriaux accueil */
.ed-cat-n {
  color: var(--kd-brd-text) !important;
}

/* Label catégorie dans les mood cards */
.cat-mood-label {
  color: var(--kd-brd-dim) !important;
}

/* ==========================================================
   LIGNES & SÉPARATEURS BORDEAUX
   ========================================================== */

/* Règle courte dans les mood cards catalogue */
.cat-mood-rule {
  background: var(--kd-brd-mid) !important;
  width: 18px !important;
}

/* Règle horizontale entre le numéro et le titre éditorial */
.ed-cat-rule {
  background: var(--kd-brd-mid) !important;
}

/* Séparateur vertical dans les modules éditoriaux accueil */
.ed-cat-mod:not(.ed-cat-mod--r) .ed-cat-text::before,
.ed-cat-mod--r .ed-cat-text::before {
  background: var(--kd-brd-low) !important;
}

/* Séparateur entre modules éditoriaux */
.ed-cat-mod + .ed-cat-mod {
  border-top-color: var(--kd-brd-faint) !important;
}

/* Flèche / underline des CTA éditoriaux au hover */
.ed-cat-cta::after,
.ed-cat-cta:hover::after {
  background: var(--kd-brd-line) !important;
}

/* Bordure basse de la barre de filtres */
.filter-bar {
  border-bottom-color: var(--kd-brd-low) !important;
}

/* Séparateurs entre sections catalogue */
.cat-section-header {
  border-top-color: var(--kd-brd-faint) !important;
}

/* Hover carte produit — contour bordeaux */
.product-card:hover::after {
  border-color: var(--kd-brd-low) !important;
}

/* Underline navbar — lien actif/hover */
.navbar-nav a::after {
  background: var(--kd-brd-mid) !important;
}

/* Footer — bordure haute */
footer {
  border-top-color: var(--kd-brd-low) !important;
}

/* Reassurance strip */
.reassurance-strip {
  border-top-color: var(--kd-brd-faint) !important;
  border-bottom-color: var(--kd-brd-faint) !important;
}

/* ============================================================
   WIZARD — commander.html
   Step-by-step animated order form
   ============================================================ */

/* ── Main container ── */
#wizard {
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 2.5rem 5vw 5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── Sticky timeline bar ── */
.wiz-timeline {
  position: sticky !important;
  top: 62px !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.85rem 5vw !important;
  background: rgba(8, 8, 8, 0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.wiz-tl-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.wiz-tl-dot {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.28) !important;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease !important;
  letter-spacing: 0 !important;
}

.wiz-tl-step.active .wiz-tl-dot {
  background: var(--kd-brd-line) !important;
  border-color: var(--kd-brd-line) !important;
  color: #fff !important;
}

.wiz-tl-step.completed .wiz-tl-dot {
  background: rgba(255,255,255,0.10) !important;
  border-color: var(--kd-brd-mid) !important;
  color: rgba(255,255,255,0.55) !important;
}

.wiz-tl-label {
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 8.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.25) !important;
  white-space: nowrap !important;
  transition: color 0.35s ease !important;
}

.wiz-tl-step.active .wiz-tl-label {
  color: var(--kd-brd-text) !important;
}

.wiz-tl-step.completed .wiz-tl-label {
  color: rgba(255,255,255,0.35) !important;
}

.wiz-tl-line {
  flex: 1 !important;
  max-width: 90px !important;
  min-width: 16px !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 0 10px !important;
  margin-bottom: 13px !important;
}

/* ── Wizard step panels ── */
.wizard-step {
  display: none !important;
  position: relative !important;
  /* Transition fires when enter/leave classes are added/removed by JS */
  transition: opacity 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.wizard-step.active {
  display: block !important;
}

/*
   Animation pattern (CSS transition, not keyframes):
   ENTER: JS adds wiz-enter-right (offset state), double-rAF, removes it
          → browser transitions from offset back to natural (opacity:1, translateX:0)
   LEAVE: JS adds wiz-leave-left (exit state) while element is still displayed
          → browser transitions from natural to exit state
*/

/* ── Enter classes — initial off-screen position ── */
.wiz-enter-right {
  opacity: 0 !important;
  transform: translateX(38px) !important;
}

.wiz-enter-left {
  opacity: 0 !important;
  transform: translateX(-38px) !important;
}

/* ── Leave classes — exit position + absolute to remove from flow ── */
.wiz-leave-left {
  opacity: 0 !important;
  transform: translateX(-38px) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
}

.wiz-leave-right {
  opacity: 0 !important;
  transform: translateX(38px) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
}

/* ── Step header ── */
.wiz-step-header {
  margin-bottom: 2rem !important;
  padding-bottom: 1.2rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.wiz-step-eyebrow {
  display: block !important;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--kd-brd-text) !important;
  margin-bottom: 0.5rem !important;
}

.wiz-step-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* ── Hint text ── */
.wiz-hint {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.38) !important;
  margin-bottom: 0.8rem !important;
  letter-spacing: 0.02em !important;
}

/* ── Model toggle (A / B) ── */
.model-toggle {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.8rem !important;
}

.model-toggle-btn {
  flex: 1 !important;
  min-width: 160px !important;
  padding: 0.65rem 1rem !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.38) !important;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.24s, color 0.24s !important;
}

.model-toggle-btn:hover {
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

.model-toggle-btn.active {
  border-color: var(--kd-brd-line) !important;
  color: var(--kd-brd-text) !important;
}

/* ── Category filter chips ── */
.cat-filter-btn {
  padding: 0.4rem 0.9rem !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  transition: border-color 0.22s, color 0.22s, background 0.22s !important;
}

.cat-filter-btn:hover {
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.cat-filter-btn.active {
  border-color: var(--kd-brd-line) !important;
  color: var(--kd-brd-text) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ── Mini grid ── */
.catalogue-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 0.6rem !important;
}

.catalogue-mini-item {
  position: relative !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  overflow: hidden !important;
  transition: border-color 0.22s !important;
}

.catalogue-mini-item img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.catalogue-mini-item:hover {
  border-color: rgba(255,255,255,0.22) !important;
}

.catalogue-mini-item:hover img {
  transform: scale(1.05) !important;
}

.catalogue-mini-item.selected {
  border-color: var(--kd-brd-line) !important;
  box-shadow: 0 0 0 1px var(--kd-brd-line) !important;
}

.mini-item-name {
  display: block !important;
  padding: 4px 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(8, 8, 8, 0.88) !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Selection preview (step 1 — after model chosen) ── */
.selection-preview-inner {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: rgba(255,255,255,0.03) !important;
  margin-bottom: 0.8rem !important;
}

.preview-thumb {
  width: 58px !important;
  height: 58px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.preview-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.preview-cat {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kd-brd-dim) !important;
}

.preview-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

#change-selection-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  padding: 1px 0 !important;
  transition: color 0.2s, border-color 0.2s !important;
  flex-shrink: 0 !important;
}

#change-selection-btn:hover {
  color: rgba(255, 255, 255, 0.7) !important;
  border-bottom-color: var(--kd-brd-mid) !important;
}

/* ── Model recap (step 2 top) ── */
.wiz-model-recap {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  padding: 0.6rem 0.9rem !important;
  border-left: 2px solid var(--kd-brd-line) !important;
  background: rgba(255,255,255,0.03) !important;
  margin-bottom: 1.8rem !important;
}

.wiz-model-recap img {
  width: 46px !important;
  height: 46px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.recap-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.recap-info span {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kd-brd-dim) !important;
}

.recap-info strong {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ── Form groups ── */
.form-group {
  margin-bottom: 1.6rem !important;
}

/* ── Form label ── */
.form-label {
  display: block !important;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 0.6rem !important;
}

/* ── Radio group ── */
.radio-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.radio-option {
  display: flex !important;
  align-items: center !important;
}

.radio-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.radio-option label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0.42rem 0.85rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  transition: border-color 0.22s, color 0.22s, background 0.22s !important;
  user-select: none !important;
  line-height: 1.2 !important;
}

.radio-option label:hover {
  border-color: rgba(255,255,255,0.20) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.radio-option input[type="radio"]:checked + label {
  border-color: var(--kd-brd-line) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(255,255,255,0.04) !important;
}

.radio-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* ── Yes / No toggle ── */
.toggle-btn-group {
  display: flex !important;
  gap: 8px !important;
}

.toggle-yes-no {
  padding: 0.42rem 1.1rem !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.38) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  transition: border-color 0.22s, color 0.22s, background 0.22s !important;
}

.toggle-yes-no:hover {
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255, 255, 255, 0.68) !important;
}

.toggle-yes-no.active {
  border-color: var(--kd-brd-line) !important;
  color: var(--kd-brd-text) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ── Gravure input wrap ── */
/* Shown/hidden via inline JS (style.display). .visible class from commander.js */
.gravure-input-wrap.visible {
  display: block !important;
}

/* ── Text inputs & textareas ── */
.text-input,
.idea-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  padding: 0.65rem 0.8rem !important;
  outline: none !important;
  resize: vertical !important;
  transition: border-color 0.22s, background 0.22s !important;
  caret-color: var(--kd-brd-line) !important;
  letter-spacing: 0.02em !important;
}

.text-input:focus,
.idea-textarea:focus {
  border-color: var(--kd-brd-mid) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.text-input::placeholder,
.idea-textarea::placeholder {
  color: rgba(255, 255, 255, 0.18) !important;
}

.idea-textarea {
  min-height: 110px !important;
}

/* ── Summary box ── */
.summary-box {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-left: 2px solid var(--kd-brd-line) !important;
  padding: 1.2rem 1.3rem 0.7rem !important;
  margin-bottom: 1.8rem !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

.summary-title {
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.3) !important;
  margin-bottom: 1rem !important;
}

.summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 1rem !important;
  padding: 0.42rem 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.summary-key {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.3) !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.04em !important;
}

.summary-val {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-align: right !important;
}

/* ── WhatsApp send button ── */
.wa-send-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  background: #25D366 !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.22s, transform 0.15s !important;
  outline: none !important;
}

.wa-send-btn:hover {
  background: #1ebe5d !important;
  transform: translateY(-1px) !important;
}

.wa-send-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* ── Reassurance line ── */
.wiz-reassure {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.25) !important;
  text-align: center !important;
  margin-top: 0.75rem !important;
}

/* ── Wizard navigation bar ── */
.wiz-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.4rem 5vw !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.wiz-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.6rem 1.3rem !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: border-color 0.22s, color 0.22s, background 0.22s !important;
}

.wiz-btn:hover {
  border-color: var(--kd-brd-mid) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.wiz-btn svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

.wiz-btn-next {
  border-color: var(--kd-brd-line) !important;
  color: var(--kd-brd-text) !important;
  margin-left: auto !important;
}

.wiz-btn-next:hover {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--kd-brd-line) !important;
}

/* ── Responsive ── */
@media (max-width: 580px) {
  #wizard {
    padding: 1.8rem 4vw 4rem !important;
  }

  .wiz-tl-label {
    display: none !important;
  }

  .wiz-tl-line {
    max-width: 40px !important;
    min-width: 10px !important;
  }

  .catalogue-mini-grid {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
    gap: 6px !important;
  }

  .model-toggle-btn {
    min-width: 130px !important;
    font-size: 9.5px !important;
  }

  .wiz-nav {
    padding: 1.2rem 4vw !important;
  }
}

/* ============================================================
   MOBILE LUXURY — Adaptation téléphone (Messika / Graff style)
   Tout ce bloc arrive EN DERNIER → priorité maximale
   Breakpoints : 768px (téléphones), 480px (petits téléphones)
   ============================================================ */

/* ────────────────────────────────────────────────
   VIEWPORT SAFETY — pas de scroll horizontal
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }
}

/* ────────────────────────────────────────────────
   NAVBAR — centrage logo + hamburger uniquement
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #navbar {
    height: 58px !important;
  }

  .navbar-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 0 1.4rem !important;
    height: 58px !important;
  }

  /* Left nav hidden → colonne gauche vide mais garde l'espace */
  .navbar-nav:not(.navbar-nav-r) {
    display: none !important;
  }

  /* Logo : colonne centrale */
  .navbar-logo {
    grid-column: 2 !important;
    justify-self: center !important;
  }

  .navbar-logo-keihal {
    font-size: 19px !important;
    letter-spacing: 0.18em !important;
  }

  .navbar-logo-diamonds {
    font-size: 5px !important;
    letter-spacing: 0.38em !important;
  }

  /* Droite : hamburger + lang */
  .navbar-right {
    grid-column: 3 !important;
    justify-self: end !important;
    gap: 1rem !important;
  }

  /* Nav droite cachée sur mobile */
  .navbar-nav-r {
    display: none !important;
  }

  /* Lang toggle — taille tap */
  .lang-toggle {
    gap: 0.4rem !important;
  }

  .lang-btn-fr,
  .lang-btn-en {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    min-height: 32px !important;
    padding: 0 6px !important;
  }
}

/* ────────────────────────────────────────────────
   MENU MOBILE OVERLAY — élégance Graff
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #mobile-nav {
    background: #060606 !important;
    padding: 6rem 2.5rem 3rem !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #mobile-nav a {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.9rem !important;
    font-weight: 300 !important;
    font-style: italic !important;
    letter-spacing: 0.08em !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
    padding: 0.9rem 0 !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.05) !important;
    width: 100% !important;
    display: block !important;
    transition: color 0.28s, padding-left 0.28s !important;
  }

  #mobile-nav a:hover,
  #mobile-nav a:active {
    color: #fff !important;
    padding-left: 0.4rem !important;
    border-bottom-color: rgba(255,255,255,0.12) !important;
  }

  .mobile-nav-lang {
    margin-top: 2rem !important;
    gap: 1.2rem !important;
  }

  .mobile-nav-lang button {
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    color: rgba(255, 255, 255, 0.38) !important;
  }

  .mobile-nav-lang button:hover,
  .mobile-nav-lang button.active {
    color: var(--kd-brd-text) !important;
  }
}

/* ────────────────────────────────────────────────
   HERO — plein écran (iOS Safari safe)
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #hero {
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport — iOS Chrome, Safari 15.4+ */
  }

  .hero-brand-keihal {
    font-size: clamp(56px, 16vw, 80px) !important;
    letter-spacing: 0.10em !important;
  }

  .hero-brand-sep {
    width: 28px !important;
    margin: 1.2rem 0 1rem !important;
  }

  .hero-brand-diamonds {
    font-size: clamp(7px, 1.8vw, 9px) !important;
    letter-spacing: 0.45em !important;
  }

  .hero-content {
    bottom: 8% !important;
    padding: 0 6vw !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-content .hero-tagline {
    font-size: clamp(18px, 5.2vw, 26px) !important;
    letter-spacing: 0.03em !important;
  }

  .hero-cta-link {
    font-size: 9.5px !important;
    letter-spacing: 0.24em !important;
    padding: 0.75rem 2rem !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ────────────────────────────────────────────────
   SECTION SPACINGS — aéré mais pas excessif
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  section,
  .split-section,
  #brand-intro,
  #statement-noir {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  #editorial-categories {
    padding: 0 2vw !important;
    gap: 0 !important;
  }

  #statement-noir {
    padding: 4.5rem 1.8rem !important;
  }

  #brand-intro {
    padding: 5rem 1.8rem !important;
  }
}

@media (max-width: 480px) {
  section,
  .split-section,
  #brand-intro,
  #statement-noir {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #statement-noir {
    padding: 3.5rem 1.2rem !important;
  }

  #brand-intro {
    padding: 3.5rem 1.2rem !important;
  }
}

/* ────────────────────────────────────────────────
   BRAND INTRO — texte signature
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .brand-intro-inner {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .brand-intro-heading {
    font-size: clamp(34px, 10vw, 52px) !important;
    line-height: 1.04 !important;
    margin-bottom: 2rem !important;
  }

  .brand-intro-body {
    font-size: 12px !important;
    line-height: 1.85 !important;
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }

  .brand-intro-label {
    font-size: 8px !important;
    margin-bottom: 1.6rem !important;
  }

  .brand-intro-rule {
    margin: 2rem auto !important;
  }
}

@media (max-width: 480px) {
  .brand-intro-heading {
    font-size: clamp(28px, 9.5vw, 40px) !important;
  }
}

/* ────────────────────────────────────────────────
   STATEMENT SECTION
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .statement-quote {
    font-size: clamp(20px, 6.5vw, 30px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .statement-cta {
    font-size: 9px !important;
    min-height: 44px !important;
    padding: 0.8rem 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ────────────────────────────────────────────────
   SPLIT SECTION (image + texte)
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr !important;
  }

  .split-section--reverse {
    direction: ltr !important;
  }

  .split-media {
    height: 62vw !important;
    min-height: 220px !important;
  }

  .split-text {
    padding: 3rem 1.8rem !important;
    gap: 1.2rem !important;
  }

  .split-heading {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.12 !important;
  }

  .split-body {
    font-size: 12px !important;
    max-width: 100% !important;
    line-height: 1.9 !important;
  }

  .split-cta {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: flex-end !important;
  }
}

/* ────────────────────────────────────────────────
   EDITORIAL MODULES — déjà stackés, affinage
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ed-cat-mod,
  .ed-cat-mod--r {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .ed-cat-fig {
    flex: none !important;
    width: 100% !important;
    height: 64vw !important;
    min-height: 240px !important;
  }

  .ed-cat-text {
    padding: 2.8rem 6vw 3.2rem !important;
    flex: none !important;
    width: 100% !important;
  }

  .ed-cat-mod--r .ed-cat-text {
    padding: 2.8rem 6vw 3.2rem !important;
  }

  .ed-cat-title {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    max-width: 100% !important;
  }

  .ed-cat-desc {
    font-size: 12px !important;
    max-width: 100% !important;
    line-height: 1.9 !important;
    margin-bottom: 1.8rem !important;
  }

  .ed-cat-eyebrow {
    font-size: 8px !important;
  }

  .ed-cat-cta {
    font-size: 9px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: flex-end !important;
  }

  .ed-cat-mod:not(.ed-cat-mod--r) .ed-cat-text::before,
  .ed-cat-mod--r .ed-cat-text::before {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .ed-cat-fig {
    height: 70vw !important;
  }

  .ed-cat-text {
    padding: 2.4rem 5vw 2.8rem !important;
  }

  .ed-cat-mod--r .ed-cat-text {
    padding: 2.4rem 5vw 2.8rem !important;
  }
}

/* ────────────────────────────────────────────────
   PAGE HERO (pages intérieures)
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero {
    padding: 5.5rem 1.8rem 2.5rem !important;
  }

  .page-hero-title {
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.1 !important;
  }

  .page-hero-subtitle {
    font-size: 11.5px !important;
    max-width: 100% !important;
    line-height: 1.85 !important;
  }

  .page-hero .section-label {
    font-size: 8px !important;
    margin-bottom: 1.2rem !important;
  }

  .gold-line {
    margin: 1.2rem auto !important;
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 5rem 1.2rem 2rem !important;
  }

  .page-hero-title {
    font-size: clamp(24px, 7.5vw, 34px) !important;
  }
}

/* ────────────────────────────────────────────────
   FILTER BAR — scrollable, touch-friendly
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .filter-bar {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 1rem !important;
    top: 58px !important;
    gap: 0 !important;
  }

  .filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .filter-btn {
    padding: 1rem 1.1rem !important;
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
    flex-shrink: 0 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  .filter-count {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────
   CATALOGUE SECTION HEADERS
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-section-header {
    padding: 1.2rem 4vw 0.8rem !important;
    flex-wrap: wrap !important;
    gap: 0.3rem 1rem !important;
    align-items: center !important;
  }

  .cat-section-header .cat-section-title {
    font-size: clamp(22px, 6.5vw, 32px) !important;
  }

  .cat-section-header .cat-section-count {
    font-size: 8px !important;
  }
}

/* ────────────────────────────────────────────────
   PRODUCT GRID & CARDS
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .product-grid,
  .product-grid.cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
    padding: 0 0 2rem !important;
  }

  .product-card {
    padding-bottom: 0.9rem !important;
  }

  .product-img-wrap {
    aspect-ratio: 1 / 1 !important;
  }

  .product-name {
    font-size: 0.84rem !important;
    line-height: 1.3 !important;
    padding: 0 0.6rem !important;
  }

  .product-category {
    font-size: 9px !important;
    padding: 0 0.6rem !important;
  }

  /* Catalogue mood card — plein-largeur, ratio paysage */
  .cat-mood-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 7 !important;
    min-height: 200px !important;
    order: -1 !important;
  }

  .cat-mood-text {
    font-size: clamp(15px, 4.5vw, 22px) !important;
  }

  .cat-mood-label {
    font-size: 7px !important;
    letter-spacing: 0.28em !important;
  }
}

/* ────────────────────────────────────────────────
   REASSURANCE STRIP
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .reassurance-strip {
    padding: 1.5rem 1.5rem !important;
  }

  .reassurance-inner {
    flex-wrap: wrap !important;
    gap: 1rem 0 !important;
    justify-content: flex-start !important;
  }

  .reassurance-item {
    min-width: 50% !important;
    flex: 0 0 50% !important;
    gap: 0.5rem !important;
  }

  .reassurance-text {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 480px) {
  .reassurance-item {
    min-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ────────────────────────────────────────────────
   FOOTER — colonne unique élégante
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer {
    padding: 0 !important;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 3rem 1.8rem !important;
  }

  .footer-logo {
    font-size: 1.1rem !important;
    letter-spacing: 0.18em !important;
  }

  .footer-tagline {
    font-size: 10px !important;
    margin-top: 0.4rem !important;
  }

  .footer-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem 2rem !important;
  }

  .footer-nav a {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  .footer-contact {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.2rem !important;
  }

  .footer-wa-btn {
    padding: 0.55rem 1.2rem !important;
    font-size: 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-delivery {
    font-size: 9px !important;
  }

  .footer-bottom {
    padding: 1rem 1.8rem !important;
  }

  .footer-bottom p {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }
}

/* ────────────────────────────────────────────────
   WHATSAPP FLOAT BUTTON
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #whatsapp-float {
    bottom: 1.2rem !important;
    right: 1.2rem !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* ────────────────────────────────────────────────
   WIZARD (commander page) — mobile complet
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wiz-timeline {
    top: 58px !important;
    padding: 0.7rem 3vw !important;
  }

  .wiz-tl-dot {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }

  #wizard {
    padding: 2rem 4vw 4rem !important;
  }

  .wiz-step-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
  }

  .wiz-nav {
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 1rem 4vw !important;
  }

  .wiz-btn {
    padding: 0.65rem 1.1rem !important;
    font-size: 9.5px !important;
    min-height: 44px !important;
  }

  .wiz-btn-next {
    margin-left: auto !important;
  }

  /* Sur mobile : si seul le Suivant est affiché, full-width */
  .wiz-btn-prev[style*="hidden"] + .wiz-btn-next {
    width: 100% !important;
    justify-content: center !important;
  }

  .catalogue-mini-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .model-toggle {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .model-toggle-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .summary-box {
    padding: 1rem 1rem 0.6rem !important;
  }

  .wa-send-btn {
    padding: 0.9rem 1rem !important;
    font-size: 10.5px !important;
    min-height: 50px !important;
  }

  .radio-group {
    gap: 6px !important;
  }

  .radio-option label {
    padding: 0.5rem 0.7rem !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 480px) {
  .catalogue-mini-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
  }

  .wiz-tl-label {
    display: none !important;
  }

  .wiz-tl-line {
    max-width: 30px !important;
    min-width: 8px !important;
  }
}

/* ────────────────────────────────────────────────
   PERSONNALISATION PAGE — mobile
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .perso-card {
    padding: 1.6rem 1.4rem !important;
    margin-bottom: 1.5rem !important;
  }

  .step-card {
    padding: 1.5rem 1.2rem !important;
  }

  /* Stone & cut options → col unique */
  .stone-options,
  .cut-options {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem !important;
  }

  .stone-option,
  .cut-option {
    padding: 1rem 0.6rem !important;
    min-height: 56px !important;
  }

  /* Metal swatches */
  .metal-swatches {
    gap: 0.6rem !important;
  }

  .metal-swatch {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ────────────────────────────────────────────────
   GENERAL TOUCH TARGETS — min 44px
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tout bouton et lien interactif doit être tappable */
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .lang-btn-fr,
  .lang-btn-en {
    min-height: 36px !important;
  }

  /* Popup langue */
  .popup-lang-btn {
    padding: 0.85rem 2rem !important;
    font-size: 11px !important;
    min-height: 50px !important;
    width: 100% !important;
  }

  .popup-lang-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.8rem !important;
    width: 100% !important;
  }

  .popup-card {
    padding: 2.5rem 1.5rem !important;
    width: calc(100vw - 2.5rem) !important;
    max-width: 360px !important;
  }

  .popup-keihal-name {
    font-size: clamp(24px, 8vw, 36px) !important;
    margin-bottom: 2rem !important;
  }
}

/* ────────────────────────────────────────────────
   LOOKBOOK — mobile
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mosaic-row-a,
  .mosaic-row-b,
  .mosaic-row-c {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .mosaic-item {
    height: 72vw !important;
    min-height: 220px !important;
    max-height: 380px !important;
  }
}

/* ────────────────────────────────────────────────
   CONSEILS PAGE — mobile
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .four-c-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .cert-fields {
    grid-template-columns: 1fr !important;
  }

  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ────────────────────────────────────────────────
   À PROPOS — mobile
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .brand-story-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .brand-story-img {
    aspect-ratio: 4 / 3 !important;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .values-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────
   SCROLL REVEAL — pas de délai sur mobile (CPU limité)
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .ed-cat-mod,
  .reveal-section {
    transition-duration: 0.4s !important;
    transition-delay: 0s !important;
  }
}

/* ================================================================
   REFONTE ÉDITORIALE STYLE GRAFF
   Modules pleine-hauteur · Alternance sombre/clair · Grid aéré
   Inspiré de graff.com — dynamisme, respiration, typographie bold
   ================================================================ */

/* ────────────────────────────────────────────────
   A. HOMEPAGE — Modules éditoriaux pleine hauteur
   ──────────────────────────────────────────────── */

/* Hauteur dramatique — chaque module occupe 80% de l'écran */
#editorial-categories .ed-cat-mod {
  min-height: 80vh !important;
}

/* Décoration latérale — sans or, pure ligne blanche */
.ed-cat-mod:not(.ed-cat-mod--r) .ed-cat-text::before,
.ed-cat-mod--r .ed-cat-text::before {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Numéro de section — sobre */
.ed-cat-n {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.20) !important;
  letter-spacing: 0.30em !important;
}

.ed-cat-rule {
  flex: 0 0 56px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Eyebrow "COLLECTION" — aéré, très tracé */
.ed-cat-eyebrow {
  font-size: 8px !important;
  letter-spacing: 0.44em !important;
  color: rgba(255, 255, 255, 0.24) !important;
  margin-bottom: 1.2rem !important;
}

/* Titre — grand, serré, signature Graff */
.ed-cat-title {
  font-size: clamp(42px, 5.8vw, 76px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.028em !important;
  color: rgba(255, 255, 255, 0.90) !important;
  margin-bottom: 2.2rem !important;
}

/* Description — corps discret */
.ed-cat-desc {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: clamp(13px, 1.05vw, 14.5px) !important;
  font-weight: 300 !important;
  line-height: 1.82 !important;
  color: rgba(255, 255, 255, 0.40) !important;
  max-width: 340px !important;
  margin-bottom: 3rem !important;
}

/* CTA — texte + ligne extensible à la survol */
.ed-cat-cta {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 8.5px !important;
  letter-spacing: 0.40em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.46) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  transition: color 0.4s ease !important;
}

.ed-cat-cta::after {
  content: '' !important;
  display: block !important;
  width: 30px !important;
  height: 0.5px !important;
  background: currentColor !important;
  flex-shrink: 0 !important;
  transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ed-cat-cta:hover {
  color: rgba(255, 255, 255, 0.84) !important;
}

.ed-cat-cta:hover::after {
  width: 54px !important;
}

/* ── TOUS les modules → fond NOIR uniforme — pas de damier ── */
#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-text {
  background: transparent !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-title {
  color: rgba(255, 255, 255, 0.90) !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-desc {
  color: rgba(255, 255, 255, 0.40) !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-eyebrow {
  color: rgba(255, 255, 255, 0.24) !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-n {
  color: rgba(255, 255, 255, 0.20) !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-rule {
  background: rgba(255, 255, 255, 0.08) !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-cta {
  color: rgba(255, 255, 255, 0.46) !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-cta:hover {
  color: rgba(255, 255, 255, 0.84) !important;
}

#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-text::before {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Gradient veil modules pairs : fondu vers NOIR */
#editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-fig-veil--r {
  background: linear-gradient(to left, transparent 52%, rgba(8, 8, 8, 0.72) 100%) !important;
}

/* ── PROPORTIONS FINALES — image 58% / texte 42% — sans cadre, sans dégradé ── */

/* Image bord-à-bord, occupe 58% de la largeur */
#editorial-categories .ed-cat-fig {
  flex: 0 0 58% !important;
  padding: 0 !important;
  background: #080808 !important;
}

/* Image remplit exactement son conteneur */
#editorial-categories .ed-cat-img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Suppression du dégradé sombre sur les photos — couleurs naturelles */
#editorial-categories .ed-cat-fig-veil,
#editorial-categories .ed-cat-fig-veil--r {
  display: none !important;
}

/* Colonne texte : 42%, fond noir, contenu centré verticalement */
#editorial-categories .ed-cat-text {
  flex: 0 0 42% !important;
  background: #080808 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* Espace de 3px entre chaque module — blocs clairement distincts */
#editorial-categories .ed-cat-mod + .ed-cat-mod {
  margin-top: 3px !important;
  border-top: none !important;
}

/* ────────────────────────────────────────────────
   B. CATALOGUE — Catégorie labels éditoriaux
      Numéro incrémental + titre grande typo
   ──────────────────────────────────────────────── */

/* Compteur CSS auto pour les numéros de section */
main {
  counter-reset: kd-section !important;
}

.cat-section {
  counter-increment: kd-section !important;
}

/* Section header — layout Graff : numéro gauche + titre droite */
.cat-section-header {
  display: grid !important;
  grid-template-columns: 80px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 3rem !important;
  row-gap: 0 !important;
  align-items: start !important;
  padding: 4.5rem 5vw 3rem !important;
  margin: 0 !important;
  max-width: none !important;
  border-top: 0.5px solid rgba(255, 255, 255, 0.07) !important;
  border-bottom: none !important;
}

/* Pseudo-élément = numéro "01", "02"... */
.cat-section-header::before {
  content: "0" counter(kd-section) !important;
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: 0.34em !important;
  color: rgba(255, 255, 255, 0.18) !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  padding-top: 0.5rem !important;
  text-align: right !important;
  line-height: 1 !important;
}

/* Titre — colonne droite, grand, italic Cormorant */
.cat-section-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: clamp(34px, 4.8vw, 64px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.026em !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* Suppression barre bordeaux (spécificité = même sélecteur imbriqué) */
.cat-section-header .cat-section-title {
  border-left: none !important;
  padding-left: 0 !important;
}

/* Compteur de créations — sous le titre */
.cat-section-count {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 7.5px !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.18) !important;
  margin: 1.1rem 0 0 !important;
  display: block !important;
}

/* Suppression de l'ancienne étiquette de catégorie */
.cat-section-label {
  display: none !important;
}

/* ────────────────────────────────────────────────
   C. CATALOGUE — Product grid aéré & dynamique
   ──────────────────────────────────────────────── */

/* Grid : grille uniforme centrée */
.product-grid.cat-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  padding: 0 5vw 5rem !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Toutes les cartes ont la même taille — aucune carte vedette */
.cat-grid .product-card:first-child {
  grid-column: span 1 !important;
}

.cat-grid .product-card:first-child .product-img-wrap {
  aspect-ratio: 3/4 !important;
}

/* Étiquette catégorie : sans or */
.product-category {
  color: rgba(255, 255, 255, 0.26) !important;
}

/* Espacement inter-sections */
.cat-section + .cat-section {
  margin-top: 1.5rem !important;
}

.cat-section {
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ────────────────────────────────────────────────
   D. RESPONSIVE — Tablet (≤ 1100px)
   ──────────────────────────────────────────────── */

@media (max-width: 1100px) {
  #editorial-categories .ed-cat-mod {
    min-height: 60vh !important;
  }

  .ed-cat-title {
    font-size: clamp(36px, 5vw, 60px) !important;
  }

  .product-grid.cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .cat-grid .cat-mood-card {
    grid-column: 3 / span 1 !important;
    grid-row: 1 / span 2 !important;
  }

  .cat-section-header {
    grid-template-columns: 60px 1fr !important;
    column-gap: 2rem !important;
    padding: 3.5rem 4vw 2.5rem !important;
  }
}

/* ────────────────────────────────────────────────
   E. RESPONSIVE — Mobile (≤ 768px)
   ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Modules éditoriaux : stacked vertical */
  #editorial-categories .ed-cat-mod,
  #editorial-categories .ed-cat-mod--r {
    flex-direction: column !important;
    min-height: 0 !important;
  }

  #editorial-categories .ed-cat-fig {
    flex: none !important;
    width: 100% !important;
    height: 64vw !important;
    min-height: 260px !important;
    max-height: 420px !important;
    padding: 0 !important;
  }

  #editorial-categories .ed-cat-img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  #editorial-categories .ed-cat-text {
    flex: none !important;
    width: 100% !important;
    padding: 2.8rem 1.4rem 3.2rem !important;
  }

  .ed-cat-title {
    font-size: clamp(36px, 11vw, 58px) !important;
    line-height: 0.90 !important;
  }

  .ed-cat-desc {
    max-width: 100% !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.42) !important;
  }

  /* Modules pairs mobile : desc même couleur claire (fond noir) */
  #editorial-categories .ed-cat-mod:nth-child(even) .ed-cat-desc {
    color: rgba(255, 255, 255, 0.40) !important;
  }

  /* Section header mobile */
  .cat-section-header {
    grid-template-columns: 44px 1fr !important;
    column-gap: 1.2rem !important;
    padding: 3rem 1.2rem 2.2rem !important;
  }

  .cat-section-header::before {
    font-size: 8.5px !important;
  }

  .cat-section-title {
    font-size: clamp(28px, 8.5vw, 44px) !important;
  }

  /* Grid 2-col */
  .product-grid.cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
    padding: 0 0.8rem 3rem !important;
  }

  /* Première carte : même taille que les autres sur mobile */
  .cat-grid .product-card:first-child {
    grid-column: span 1 !important;
  }

  .cat-grid .product-card:first-child .product-img-wrap {
    aspect-ratio: 3/4 !important;
  }

  /* Mood card : pleine largeur */
  .cat-grid .cat-mood-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 21/9 !important;
    min-height: 200px !important;
  }
}

/* ────────────────────────────────────────────────
   F. RESPONSIVE — Petit mobile (≤ 480px)
   ──────────────────────────────────────────────── */

@media (max-width: 480px) {
  .product-grid.cat-grid {
    gap: 5px !important;
    padding: 0 0.5rem 2.5rem !important;
  }

  .cat-section-header {
    padding: 2.5rem 0.9rem 2rem !important;
    grid-template-columns: 38px 1fr !important;
    column-gap: 1rem !important;
  }

  .cat-section-title {
    font-size: clamp(26px, 9vw, 40px) !important;
  }

  .ed-cat-title {
    font-size: clamp(32px, 10.5vw, 50px) !important;
  }
}

/* ================================================================
   LOOKBOOK — Disposition éditoriale asymétrique
   Seul le LAYOUT est modifié. Fond, couleurs, images = inchangés.
   ================================================================

   Structure visuelle (desktop) :

   Col :   [ 1.8fr large ]  [ 1.1fr ]  [ 1.5fr ]
   Row 1:  [ lb-1 (portrait, 2 rows) ]  [ lb-2  ]  [ lb-3  ]
   Row 2:  [ lb-1 continue            ]  [    lb-4 (wide 2 cols)  ]
   Row 3:  [ lb-5 ]  [    lb-6 (wide 2 cols)    ]
   Row 4:  [ lb-7 ]  [ lb-8  ]  [  lb-9 (tall, 2 rows)  ]
   Row 5:  [    lb-10 (wide 2 cols)   ]  [  lb-9 continue  ]
   Row 6:  [ lb-11 ]  [ lb-12  ]  [     espace     ]

   ================================================================ */

/* ── Rows → transparents (enfants participent à la grille parente) ── */
.lookbook-mosaic .mosaic-row {
  display: contents !important;
}

/* ── Grille principale : asymétrique 3 colonnes ── */
.lookbook-mosaic {
  display: grid !important;
  grid-template-columns: 1.8fr 1.1fr 1.5fr !important;
  grid-template-rows:
    380px   /* row 1 : grande image + deux petites */
    210px   /* row 2 : continuation lb-1 + large horizontale */
    310px   /* row 3 : petite + large horizontale */
    260px   /* row 4 : petite + petite + début portrait */
    280px   /* row 5 : large horizontale + portrait continue */
    240px   /* row 6 : deux petites + espace négatif */
    !important;
  gap: 10px !important;
  padding: 0 2rem 5rem !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* ── Placement explicite de chaque image ── */

/* lb-1 : IMAGE VEDETTE — portrait haut, 2 rangées */
.lb-1 {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;     /* 380+10+210 = 600px de hauteur */
}

/* lb-2 : petite, col droite, row 1 */
.lb-2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* lb-3 : petite, col très droite, row 1 */
.lb-3 {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* lb-4 : large horizontale, 2 cols, row 2 — décalée à droite */
.lb-4 {
  grid-column: 2 / span 2 !important;  /* cols 2–3 */
  grid-row: 2 !important;
}

/* lb-5 : petite seule à gauche, row 3 */
.lb-5 {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

/* lb-6 : large horizontale, 2 cols, row 3 */
.lb-6 {
  grid-column: 2 / span 2 !important;  /* cols 2–3 */
  grid-row: 3 !important;
}

/* lb-7 : petite, col 1, row 4 */
.lb-7 {
  grid-column: 1 !important;
  grid-row: 4 !important;
}

/* lb-8 : petite, col 2, row 4 */
.lb-8 {
  grid-column: 2 !important;
  grid-row: 4 !important;
}

/* lb-9 : portrait haut, col 3, span 2 rows */
.lb-9 {
  grid-column: 3 !important;
  grid-row: 4 / span 2 !important;     /* 260+10+280 = 550px */
}

/* lb-10 : large horizontale, 2 cols, row 5 */
.lb-10 {
  grid-column: 1 / span 2 !important;  /* cols 1–2 */
  grid-row: 5 !important;
}

/* lb-11 : petite, col 1, row 6 */
.lb-11 {
  grid-column: 1 !important;
  grid-row: 6 !important;
}

/* lb-12 : petite, col 2, row 6 — col 3 reste vide (espace négatif) */
.lb-12 {
  grid-column: 2 !important;
  grid-row: 6 !important;
}

/* ── Mobile (≤ 768px) : grille 2 colonnes fluides ── */
@media (max-width: 768px) {
  /* Grille 2 colonnes, hauteurs gérées par min-height des items */
  .lookbook-mosaic {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important; /* Auto — les items définissent leur hauteur */
    grid-auto-rows: auto !important;
    gap: 6px !important;
    padding: 0 0.8rem 3rem !important;
  }

  /* Reset tous les placements desktop */
  .lb-1, .lb-2, .lb-3, .lb-4, .lb-5, .lb-6,
  .lb-7, .lb-8, .lb-9, .lb-10, .lb-11, .lb-12 {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 46vw !important; /* ~173px sur 375px */
  }

  /* Grandes images : pleine largeur */
  .lb-1  { grid-column: 1 / span 2 !important; min-height: 62vw !important; } /* vedette */
  .lb-4  { grid-column: 1 / span 2 !important; min-height: 48vw !important; }
  .lb-6  { grid-column: 1 / span 2 !important; min-height: 52vw !important; }
  .lb-10 { grid-column: 1 / span 2 !important; min-height: 48vw !important; }

  /* Supprime les hauteurs fixes héritées de style.css sur mobile */
  .lookbook-mosaic .mosaic-item {
    height: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR MESSIKA-STYLE — Keihal Diamonds
   ════════════════════════════════════════════════════════════════ */

/* Masquer les anciens éléments de nav */
#navbar .navbar-nav,
#navbar .navbar-right > ul.navbar-nav-r,
#navbar .navbar-controls .hamburger,
#navbar .navbar-controls .lang-toggle,
#navbar .navbar-controls,
#navbar .navbar-right { display: none !important; }

/* Nouvelle structure interne */
#navbar .navbar-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 0 clamp(2.5rem, 5vw, 5rem) !important;
  height: 88px !important;
  gap: 0 !important;
}

/* ── Gauche : burger + lien liste d'envies ── */
.kd-nb-left {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.kd-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  color: rgba(255,255,255,0.78);
  transition: color 0.25s;
  flex-shrink: 0;
}
.kd-burger:hover { color: #fff; }
.kd-burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.kd-wl-link {
  display: none !important;
}

/* ── Centre : Logo ── */
#navbar .navbar-logo {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  text-align: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  justify-self: center !important;
  line-height: 1 !important;
}

.navbar-logo-keihal {
  display: block !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  letter-spacing: 0.38em !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.navbar-logo-diamonds {
  display: block !important;
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 8.5px !important;
  letter-spacing: 0.5em !important;
  color: rgba(255,255,255,0.35) !important;
  text-align: center !important;
  margin-top: 5px !important;
  text-transform: uppercase !important;
}

/* ── Droite : icônes ── */
.kd-nb-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: flex-end;
}

.kd-nb-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.62);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s;
  position: relative;
}
.kd-nb-icon:hover,
.kd-nb-icon.logged { color: rgba(255,255,255,0.95); }

.kd-nb-icon svg {
  width: 21px;
  height: 21px;
}

/* Badge wishlist */
#kd-wl-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 13px;
  height: 13px;
  background: rgba(255,255,255,0.88);
  color: #080808;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 7.5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#kd-wl-count.visible { opacity: 1; }

/* Lang toggle droite */
.kd-lang {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.38);
  margin-left: 0.4rem;
}
.kd-lang button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 2px 3px;
  transition: color 0.2s;
}
.kd-lang button:hover { color: rgba(255,255,255,0.8); }

/* ════════════════════════════════════════════════════════════════
   DRAWER (slide from left)
   ════════════════════════════════════════════════════════════════ */
#kd-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 340px;
  max-width: 88vw;
  background: #080808;
  border-right: 0.5px solid rgba(255,255,255,0.07);
  z-index: 9900;
  transform: translateX(-100%);
  transition: transform 0.46s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
}
#kd-drawer.open { transform: translateX(0); }

.kd-drawer-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4.5rem 2.5rem 2.5rem;
  overflow-y: auto;
}

#kd-drawer-cls {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  background: none; border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer; padding: 10px;
  transition: color 0.25s;
}
#kd-drawer-cls:hover { color: #fff; }

.kd-drawer-nav {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.kd-drawer-nav a {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  transition: color 0.22s, padding-left 0.22s;
  letter-spacing: -0.01em;
}
.kd-drawer-nav a:hover,
.kd-drawer-nav a.active {
  color: #fff;
  padding-left: 0.55rem;
}

.kd-drawer-foot {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.kd-drawer-foot-lang {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
}
.kd-drawer-foot-lang button {
  background: none; border: none; cursor: pointer;
  color: inherit; font: inherit; padding: 2px 4px;
  transition: color 0.2s;
}
.kd-drawer-foot-lang button:hover { color: rgba(255,255,255,0.7); }
/* Legacy plain WA link (fallback) */
.kd-drawer-wa {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); text-decoration: none;
  transition: color 0.25s;
}
.kd-drawer-wa:hover { color: rgba(255,255,255,0.65); }
/* Premium WhatsApp CTA */
.kd-drawer-wa--premium {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(37,211,102,0.10);
  border: 1px solid rgba(37,211,102,0.28);
  border-radius: 6px;
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 0;          /* reset, children set their own size */
  letter-spacing: normal;
  text-transform: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.kd-drawer-wa--premium:hover {
  background: rgba(37,211,102,0.20);
  border-color: rgba(37,211,102,0.55);
  color: #fff;
}
.kd-wa-icon {
  flex-shrink: 0;
  color: #25d366;
  transition: color 0.25s;
}
.kd-drawer-wa--premium:hover .kd-wa-icon { color: #3be07a; }
.kd-wa-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}
.kd-wa-num {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  margin-left: auto;
  white-space: nowrap;
  transition: color 0.25s;
}
.kd-drawer-wa--premium:hover .kd-wa-num { color: rgba(255,255,255,0.8); }

#kd-drawer-ov {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 9899;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
#kd-drawer-ov.open { opacity: 1; pointer-events: all; }

/* ════════════════════════════════════════════════════════════════
   PANEL WISHLIST (slide from right)
   ════════════════════════════════════════════════════════════════ */
#kd-wl-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: #0a0a0a;
  border-left: 0.5px solid rgba(255,255,255,0.07);
  z-index: 9900;
  transform: translateX(100%);
  transition: transform 0.46s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
}
#kd-wl-panel.open { transform: translateX(0); }

.kd-wl-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4.5rem 2rem 2rem;
}

.kd-wl-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  padding-bottom: 1.2rem; margin-bottom: 2rem;
}
.kd-wl-head h2 {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin: 0;
}
#kd-wl-cls {
  background: none; border: none;
  color: rgba(255,255,255,0.35); cursor: pointer; padding: 8px;
  transition: color 0.25s;
}
#kd-wl-cls:hover { color: #fff; }

#kd-wl-items { flex: 1; overflow-y: auto; }
.kd-wl-empty {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-style: italic;
  color: rgba(255,255,255,0.22); text-align: center; margin-top: 4rem;
}

.kd-wl-item {
  display: flex; gap: 1rem; padding: 1.2rem 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  align-items: flex-start;
}
.kd-wl-img {
  width: 68px; height: 68px; object-fit: cover;
  flex-shrink: 0; background: rgba(255,255,255,0.04);
}
.kd-wl-info { flex: 1; }
.kd-wl-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-style: italic;
  color: rgba(255,255,255,0.78); margin: 0 0 4px;
}
.kd-wl-cat {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.kd-wl-rm {
  background: none; border: none;
  color: rgba(255,255,255,0.2); cursor: pointer; font-size: 12px;
  padding: 4px; transition: color 0.2s;
}
.kd-wl-rm:hover { color: rgba(255,255,255,0.7); }

.kd-wl-foot {
  padding-top: 1.4rem;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.kd-wl-cta {
  display: block; text-align: center;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border: 0.5px solid rgba(255,255,255,0.18);
  padding: 1rem 1.5rem; text-decoration: none;
  transition: color 0.25s, border-color 0.25s;
}
.kd-wl-cta:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

#kd-wl-ov {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 9899;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
#kd-wl-ov.open { opacity: 1; pointer-events: all; }

/* ════════════════════════════════════════════════════════════════
   MODAL COMPTE (slide from right)
   ════════════════════════════════════════════════════════════════ */
#kd-acct-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: #080808;
  border-left: 0.5px solid rgba(255,255,255,0.07);
  z-index: 9901;
  transform: translateX(100%);
  transition: transform 0.46s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
}
#kd-acct-modal.open { transform: translateX(0); }

.kd-acct-inner {
  padding: 4.5rem 2.5rem 3rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#kd-acct-cls {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  background: none; border: none;
  color: rgba(255,255,255,0.35); cursor: pointer; padding: 10px;
  transition: color 0.25s;
}
#kd-acct-cls:hover { color: #fff; }

.kd-tabs {
  display: flex; gap: 2.2rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  padding-bottom: 1rem; margin-bottom: 2.2rem;
}
.kd-tab {
  background: none; border: none;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.28); cursor: pointer; padding: 0;
  transition: color 0.25s; position: relative;
}
.kd-tab.active { color: rgba(255,255,255,0.88); }
.kd-tab.active::after {
  content: '';
  position: absolute; bottom: -1rem; left: 0; right: 0;
  height: 0.5px; background: rgba(255,255,255,0.5);
}

.kd-acct-form {
  display: flex; flex-direction: column; gap: 1.5rem;
}

.kd-field {
  display: flex; flex-direction: column; gap: 7px;
}
.kd-field label {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.kd-field input[type="text"],
.kd-field input[type="email"],
.kd-field input[type="password"] {
  background: transparent; border: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.18);
  padding: 0.55rem 0;
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  color: rgba(255,255,255,0.86); outline: none;
  transition: border-color 0.25s;
  -webkit-appearance: none;
}
.kd-field input:focus { border-color: rgba(255,255,255,0.48); }

.kd-field-check {
  flex-direction: row; align-items: flex-start; gap: 10px;
}
.kd-field-check input[type="checkbox"] {
  margin-top: 2px; accent-color: rgba(255,255,255,0.8);
  flex-shrink: 0;
}
.kd-field-check label {
  font-size: 7.5px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.3); cursor: pointer; line-height: 1.7;
}

.kd-submit {
  margin-top: 0.8rem;
  background: rgba(255,255,255,0.90); color: #080808;
  border: none;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px; letter-spacing: 0.34em; text-transform: uppercase;
  padding: 1rem 2rem; cursor: pointer;
  transition: background 0.25s; width: 100%;
}
.kd-submit:hover { background: #fff; }

.kd-form-hint {
  text-align: center;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7.5px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.25); margin-top: 0.5rem;
}
.kd-form-hint a { color: rgba(255,255,255,0.45); text-decoration: none; }

#kd-acct-ov {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 9900;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
#kd-acct-ov.open { opacity: 1; pointer-events: all; }

/* ════════════════════════════════════════════════════════════════
   CŒUR sur les cartes produits
   ════════════════════════════════════════════════════════════════ */
.product-card { position: relative !important; }

.kd-heart {
  position: absolute;
  top: 9px; right: 9px;
  width: 30px; height: 30px;
  background: rgba(8,8,8,0.58);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0;
  transition: opacity 0.22s, background 0.22s;
  color: rgba(255,255,255,0.72);
  backdrop-filter: blur(4px);
  z-index: 3;
}
.kd-heart svg { width: 12px; height: 12px; pointer-events: none; }
.product-card:hover .kd-heart { opacity: 1; }
.kd-heart.on,
.kd-heart:hover {
  opacity: 1;
  background: rgba(8,8,8,0.82);
  color: #fff;
}
.kd-heart.on svg { fill: currentColor; }

/* ════════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════════ */
#kd-toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.93); color: #080808;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.85rem 2rem;
  z-index: 99999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  white-space: nowrap;
}
#kd-toast.kd-toast-err {
  background: rgba(60,10,10,0.95); color: rgba(255,255,255,0.85);
}


/* ════════════════════════════════════════════════════════════════
   CATEGORY CAROUSEL  —  #kd-categories
   Premium luxury card layout replacing editorial mosaic
   ════════════════════════════════════════════════════════════════ */

#kd-categories {
  padding: 7rem 0 8rem !important;
  background: #080808 !important;
  overflow: hidden !important;
}

/* ── Section header ── */
.kd-cat-header {
  text-align: center !important;
  margin-bottom: 4.5rem !important;
  padding: 0 5vw !important;
}

.kd-cat-surtitle {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.22) !important;
  margin: 0 0 1rem !important;
}

.kd-cat-heading {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.6rem, 4.5vw, 4rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.88) !important;
  letter-spacing: 0.06em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

/* ── Outer wrapper — positions arrows ── */
.kd-cat-outer {
  position: relative !important;
}

/* ── Scroll viewport ── */
.kd-cat-viewport {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  /* left/right padding creates gutters + allows first card to snap neatly */
  padding: 0 5vw !important;
  /* scroll-padding aligns snap to content edge (after padding) */
  scroll-padding-left: 5vw !important;
}
.kd-cat-viewport::-webkit-scrollbar {
  display: none !important;
}

/* ── Track ── */
.kd-cat-track {
  display: flex !important;
  gap: 1.5rem !important;
  /* track must not wrap */
  flex-wrap: nowrap !important;
  /* trailing space so last card can snap to left at 5vw */
  padding-right: 5vw !important;
}

/* ── Cards ── */
.kd-cat-card {
  /* 3 visible: (90vw viewport – 2 gaps of 1.5rem) / 3 */
  flex: 0 0 calc((90vw - 3rem) / 3) !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
}

/* ── Card link (full clickable area) ── */
.kd-cat-card-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  outline-offset: 4px !important;
}

/* ── Image container ── */
.kd-cat-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: #111 !important;
  /* very subtle inside shadow for depth */
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.05) !important;
}

.kd-cat-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.kd-cat-card-link:hover .kd-cat-img-wrap img {
  transform: scale(1.045) !important;
}

/* ── Text block ── */
.kd-cat-info {
  padding: 1.5rem 0 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.kd-cat-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  transition: color 0.3s ease !important;
}

.kd-cat-card-link:hover .kd-cat-name {
  color: rgba(255, 255, 255, 1) !important;
}

.kd-cat-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.36) !important;
  margin: 0 !important;
  letter-spacing: 0.01em !important;
}

/* ── CTA text-link ── */
.kd-cat-cta-link {
  display: inline-block !important;
  margin-top: 0.6rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.38) !important;
  position: relative !important;
  padding-bottom: 4px !important;
  transition: color 0.3s ease !important;
}

.kd-cat-cta-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 20px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.3s ease !important;
}

.kd-cat-card-link:hover .kd-cat-cta-link {
  color: rgba(255, 255, 255, 0.78) !important;
}

.kd-cat-card-link:hover .kd-cat-cta-link::after {
  width: 52px !important;
  background: rgba(255, 255, 255, 0.52) !important;
}

/* ── Arrow buttons ── */
.kd-cat-arrow {
  position: absolute !important;
  /* vertically centred on the image zone (aspect 3:4 → img height ≈ 40vw,
     so image mid ≈ 20vw; as % of card height ≈ 40% from top of .kd-cat-outer) */
  top: 40% !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 0.5px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(8, 8, 8, 0.60) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.60) !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: border-color 0.25s ease, color 0.25s ease,
              background 0.25s ease, opacity 0.25s ease !important;
}

.kd-cat-arrow:hover {
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(18, 18, 18, 0.85) !important;
}

.kd-cat-arrow--prev {
  left: 1.2vw !important;
}

.kd-cat-arrow--next {
  right: 1.2vw !important;
}

/* Hidden state */
.kd-cat-disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Dots ── */
.kd-cat-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 3rem !important;
  padding: 0 5vw !important;
}

.kd-cat-dot {
  width: 20px !important;
  height: 1px !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.16) !important;
  cursor: pointer !important;
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.35s ease !important;
  outline: none !important;
}

.kd-cat-dot-active {
  width: 36px !important;
  background: rgba(255, 255, 255, 0.60) !important;
}

/* ── Tablet: 2 cards visible ── */
@media (min-width: 640px) and (max-width: 1023px) {
  .kd-cat-card {
    flex: 0 0 calc((90vw - 1.5rem) / 2) !important;
  }

  .kd-cat-arrow--prev { left: 0.8vw !important; }
  .kd-cat-arrow--next { right: 0.8vw !important; }
}

/* ── Mobile: 1.2 cards visible ── */
@media (max-width: 639px) {
  #kd-categories {
    padding: 5rem 0 6rem !important;
  }

  .kd-cat-header {
    margin-bottom: 3rem !important;
  }

  .kd-cat-heading {
    font-size: 2.6rem !important;
  }

  .kd-cat-viewport {
    padding: 0 6vw !important;
    scroll-padding-left: 6vw !important;
  }

  .kd-cat-track {
    gap: 1rem !important;
    padding-right: 6vw !important;
  }

  /* 1.2 cards: visible = 88vw / 1.2 ≈ 73vw */
  .kd-cat-card {
    flex: 0 0 73vw !important;
  }

  /* Hide arrows on mobile (swipe only) */
  .kd-cat-arrow {
    display: none !important;
  }

  .kd-cat-name {
    font-size: 1.2rem !important;
  }

  .kd-cat-desc {
    font-size: 0.70rem !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   CATEGORY CAROUSEL v2 — Title on image · Luxury immersive cards
   Overrides the text-below layout with an on-image overlay design
   ════════════════════════════════════════════════════════════════ */

/* Card link: positioning context for the absolute info block */
#kd-categories .kd-cat-card-link {
  position: relative !important;
  display: block !important;
}

/* Image: subtle exposure reduction — beautiful but legible */
#kd-categories .kd-cat-img-wrap img {
  filter: brightness(0.88) !important;
  transition: transform 0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter  0.55s ease !important;
}

#kd-categories .kd-cat-card-link:hover .kd-cat-img-wrap img {
  transform: scale(1.048) !important;
  filter: brightness(0.80) !important;
}

/* Bottom-vignette gradient overlay — refined, not harsh */
#kd-categories .kd-cat-img-wrap::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.38) 30%,
    rgba(0, 0, 0, 0.10) 56%,
    transparent 80%
  ) !important;
  transition: opacity 0.45s ease !important;
}

#kd-categories .kd-cat-card-link:hover .kd-cat-img-wrap::after {
  opacity: 0.88 !important;
}

/* Info block: lifted out of flow, anchored to image bottom */
#kd-categories .kd-cat-info {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  padding: 2rem 1.6rem 1.7rem !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  background: transparent !important;
  /* no border, no shadow from parent — clean overlay */
}

/* Category name — on image, Cormorant italic */
#kd-categories .kd-cat-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  margin: 0 !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.38) !important;
  transition: color 0.3s ease !important;
}

#kd-categories .kd-cat-card-link:hover .kd-cat-name {
  color: #ffffff !important;
}

/* Short description — very subtle on-image caption */
#kd-categories .kd-cat-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.48) !important;
  margin: 0 !important;
  /* max two lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.3s ease !important;
}

#kd-categories .kd-cat-card-link:hover .kd-cat-desc {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* CTA — discreet, spaced, with expanding underline */
#kd-categories .kd-cat-cta-link {
  display: inline-block !important;
  margin-top: 0.5rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.48) !important;
  padding-bottom: 3px !important;
  position: relative !important;
  transition: color 0.3s ease !important;
}

#kd-categories .kd-cat-cta-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 18px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.32) !important;
  transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.3s ease !important;
}

#kd-categories .kd-cat-card-link:hover .kd-cat-cta-link {
  color: rgba(255, 255, 255, 0.88) !important;
}

#kd-categories .kd-cat-card-link:hover .kd-cat-cta-link::after {
  width: 48px !important;
  background: rgba(255, 255, 255, 0.60) !important;
}

/* Arrow position: vertically centred on image (card height = image height) */
#kd-categories .kd-cat-arrow {
  top: 42% !important;
  transform: translateY(-50%) !important;
}

/* Mobile: title larger on wider cards, no desc */
@media (max-width: 639px) {
  #kd-categories .kd-cat-info {
    padding: 1.6rem 1.2rem 1.4rem !important;
    gap: 0.35rem !important;
  }

  #kd-categories .kd-cat-name {
    font-size: 1.3rem !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45) !important;
  }

  #kd-categories .kd-cat-desc {
    display: none !important;
  }

  #kd-categories .kd-cat-cta-link {
    margin-top: 0.3rem !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   NOTRE SÉLECTION  —  #kd-selection
   Curated featured products carousel — 4-up desktop · 1.2 mobile
   ════════════════════════════════════════════════════════════════ */

#kd-selection {
  padding: 8rem 0 9rem !important;
  background: #080808 !important;
  overflow: hidden !important;
  border-top: 0.5px solid rgba(255, 255, 255, 0.055) !important;
}

/* ── Section header ── */
.kd-sel-header {
  text-align: center !important;
  margin-bottom: 4.5rem !important;
  padding: 0 5vw !important;
}

.kd-sel-surtitle {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.20) !important;
  margin: 0 0 1.1rem !important;
}

.kd-sel-heading {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.88) !important;
  letter-spacing: 0.07em !important;
  line-height: 1.1 !important;
  margin: 0 0 2rem !important;
}

/* Thin centered rule */
.kd-sel-rule {
  width: 32px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  margin: 0 auto !important;
}

/* ── Outer wrapper: positions arrows ── */
.kd-sel-outer {
  position: relative !important;
}

/* ── Scroll viewport ── */
.kd-sel-viewport {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 0 5vw !important;
  scroll-padding-left: 5vw !important;
}
.kd-sel-viewport::-webkit-scrollbar {
  display: none !important;
}

/* ── Track ── */
.kd-sel-track {
  display: flex !important;
  gap: 1.5rem !important;
  flex-wrap: nowrap !important;
  /* trailing space matches left padding so last card can fully snap */
  padding-right: 5vw !important;
}

/* ── Cards — 4 visible on desktop ── */
.kd-sel-card {
  /* (90vw - 3 gaps × 1.5rem) / 4 */
  flex: 0 0 calc((90vw - 4.5rem) / 4) !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
}

/* ── Card link ── */
.kd-sel-card-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  outline-offset: 4px !important;
}

/* ── Image container — 4:5 portrait ── */
.kd-sel-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  background: #0d0d0d !important;
}

.kd-sel-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.kd-sel-card-link:hover .kd-sel-img-wrap img {
  transform: scale(1.038) !important;
}

/* ── Info block (below image) ── */
.kd-sel-info {
  padding: 1.2rem 0 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

/* Category label */
.kd-sel-cat {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.57rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.22) !important;
}

/* Product name */
.kd-sel-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: 0.03em !important;
  color: rgba(255, 255, 255, 0.84) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  transition: color 0.3s ease !important;
}

.kd-sel-card-link:hover .kd-sel-name {
  color: rgba(255, 255, 255, 0.98) !important;
}

/* CTA text-link */
.kd-sel-cta-txt {
  display: inline-block !important;
  margin-top: 0.45rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.57rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.28) !important;
  position: relative !important;
  padding-bottom: 3px !important;
  transition: color 0.3s ease !important;
}

.kd-sel-cta-txt::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 16px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.20) !important;
  transition: width 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.3s ease !important;
}

.kd-sel-card-link:hover .kd-sel-cta-txt {
  color: rgba(255, 255, 255, 0.72) !important;
}

.kd-sel-card-link:hover .kd-sel-cta-txt::after {
  width: 42px !important;
  background: rgba(255, 255, 255, 0.48) !important;
}

/* ── Arrow buttons ── */
.kd-sel-arrow {
  position: absolute !important;
  /* image is 4:5 — image mid ≈ (card_width * 5/4) / 2 / card_height */
  top: 38% !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 0.5px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(8, 8, 8, 0.60) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.58) !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: border-color 0.25s ease, color 0.25s ease,
              background 0.25s ease, opacity 0.25s ease !important;
}

.kd-sel-arrow:hover {
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(18, 18, 18, 0.85) !important;
}

.kd-sel-arrow--prev { left:  1.2vw !important; }
.kd-sel-arrow--next { right: 1.2vw !important; }

.kd-sel-disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Dot indicators ── */
.kd-sel-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 2.8rem !important;
  padding: 0 5vw !important;
}

.kd-sel-dot {
  width: 20px !important;
  height: 1px !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.35s ease !important;
}

.kd-sel-dot-active {
  width: 36px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

/* ── View all CTA ── */
.kd-sel-footer {
  text-align: center !important;
  margin-top: 3.8rem !important;
  padding: 0 5vw !important;
}

.kd-sel-all-cta {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.38) !important;
  text-decoration: none !important;
  position: relative !important;
  padding-bottom: 4px !important;
  transition: color 0.3s ease !important;
}

.kd-sel-all-cta::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 28px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.20) !important;
  transition: width 0.4s ease, background 0.3s ease !important;
}

.kd-sel-all-cta:hover {
  color: rgba(255, 255, 255, 0.78) !important;
}

.kd-sel-all-cta:hover::after {
  width: 80px !important;
  background: rgba(255, 255, 255, 0.48) !important;
}

/* ── Tablet: 2 cards ── */
@media (min-width: 640px) and (max-width: 1023px) {
  .kd-sel-card {
    flex: 0 0 calc((90vw - 1.5rem) / 2) !important;
  }
  .kd-sel-arrow--prev { left:  0.8vw !important; }
  .kd-sel-arrow--next { right: 0.8vw !important; }
}

/* ── Mobile: 1.2 cards ── */
@media (max-width: 639px) {
  #kd-selection {
    padding: 5.5rem 0 6.5rem !important;
  }

  .kd-sel-header {
    margin-bottom: 3rem !important;
  }

  .kd-sel-viewport {
    padding: 0 6vw !important;
    scroll-padding-left: 6vw !important;
  }

  .kd-sel-track {
    gap: 1rem !important;
    padding-right: 6vw !important;
  }

  .kd-sel-card {
    /* 88vw / 1.22 ≈ 72vw — ~1.2 cards visible */
    flex: 0 0 72vw !important;
  }

  .kd-sel-arrow {
    display: none !important;
  }

  .kd-sel-name {
    font-size: 1rem !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   SESSION DE CONSEIL PRIVÉE — v2
   Calendrier agrandi · Contrastes renforcés · Composition premium
   ════════════════════════════════════════════════════════════════ */

/* ── Section ── */
#session-conseil {
  background: #080808 !important;
  padding: calc(var(--navbar-h, 62px) + 5rem) 5vw 8rem !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.055) !important;
}

/* ── Grille deux colonnes — texte | calendrier (plus dominant) ── */
.sc-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  gap: 7rem !important;
  align-items: start !important;
}

/* ─────────────────────────────
   COLONNE GAUCHE — Texte
   ───────────────────────────── */

.sc-eyebrow {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.44) !important;
  margin-bottom: 1.3rem !important;
}

.sc-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 1.8rem !important;
}

.sc-rule {
  width: 28px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  margin-bottom: 1.8rem !important;
}

.sc-body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.83rem !important;
  line-height: 1.95 !important;
  color: rgba(255, 255, 255, 0.60) !important;
  margin-bottom: 2.6rem !important;
  letter-spacing: 0.01em !important;
}

.sc-meta {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.9rem !important;
}

.sc-meta li {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.63rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.42) !important;
}

.sc-meta-dash {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ─────────────────────────────
   COLONNE DROITE — Calendrier
   ───────────────────────────── */

/* Carte du widget */
#session-conseil #booking-widget {
  background: rgba(255, 255, 255, 0.026) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.10) !important;
  padding: 3rem 2.6rem 2.8rem !important;
}

/* Titre "Choisir un créneau" */
#session-conseil .bk-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.38) !important;
  margin-bottom: 2.2rem !important;
}

/* En-tête calendrier */
#session-conseil .bk-cal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.6rem !important;
}

/* Nom du mois — bien plus grand et lisible */
#session-conseil .bk-month-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  text-transform: capitalize !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Flèches navigation — plus grandes, plus visibles */
#session-conseil .bk-nav {
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.44) !important;
  cursor: pointer !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: color 0.2s, background 0.2s !important;
}
#session-conseil .bk-nav:hover {
  color: rgba(255, 255, 255, 0.96) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
#session-conseil .bk-nav svg {
  width: 22px !important;
  height: 22px !important;
}

/* Jours de la semaine — beaucoup plus lisibles */
#session-conseil .bk-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}

#session-conseil .bk-weekday-cell {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.38) !important;
  text-align: center !important;
  padding: 8px 0 !important;
}

/* Grille des jours */
#session-conseil .bk-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 3px !important;
  margin-top: 6px !important;
}

/* Cellule de jour — sensiblement agrandie */
#session-conseil .bk-day-cell {
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.18) !important;
  border: none !important;
  background: none !important;
  cursor: default !important;
  border-radius: 50% !important;
  transition: background 0.18s, color 0.18s !important;
  padding: 0 !important;
  line-height: 1 !important;
  min-height: 38px !important;
}

/* Jours disponibles */
#session-conseil .bk-day-cell.available {
  color: rgba(255, 255, 255, 0.80) !important;
  cursor: pointer !important;
}
#session-conseil .bk-day-cell.available:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 1) !important;
}

/* Jour sélectionné */
#session-conseil .bk-day-cell.selected {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #060606 !important;
  font-weight: 400 !important;
}

/* Jours passés / dimanche */
#session-conseil .bk-day-cell.past,
#session-conseil .bk-day-cell.sunday {
  color: rgba(255, 255, 255, 0.14) !important;
  cursor: default !important;
}

/* Séparateur fin */
#session-conseil .bk-divider {
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 2rem 0 !important;
}

/* Date sélectionnée — label */
#session-conseil .bk-times-selected-date {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin-bottom: 1.2rem !important;
  letter-spacing: 0.03em !important;
}

/* Grille des créneaux */
#session-conseil .bk-slots {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

/* Boutons créneaux — plus lisibles */
#session-conseil .bk-slot-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.10em !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: none !important;
  border: 0.5px solid rgba(255, 255, 255, 0.16) !important;
  padding: 11px 18px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
}
#session-conseil .bk-slot-btn:hover {
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
#session-conseil .bk-slot-btn.active {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.96) !important;
  color: #060606 !important;
}

/* Bloc de confirmation */
#session-conseil #booking-confirm {
  margin-top: 2rem !important;
}

#session-conseil #booking-summary {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  color: rgba(255, 255, 255, 0.80) !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em !important;
}

/* Bouton WhatsApp — clair et premium */
#session-conseil #booking-whatsapp-btn {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  padding: 16px 30px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #060606 !important;
  text-decoration: none !important;
  transition: background 0.3s !important;
}
#session-conseil #booking-whatsapp-btn:hover {
  background: #ffffff !important;
}

/* ─────────────────────────────
   RESPONSIVE
   ───────────────────────────── */

/* Tablette */
@media (min-width: 640px) and (max-width: 1023px) {
  #session-conseil {
    padding: 6rem 5vw !important;
  }
  .sc-inner {
    grid-template-columns: 1fr !important;
    max-width: 700px !important;
    gap: 4rem !important;
  }
}

/* Mobile */
@media (max-width: 639px) {
  #session-conseil {
    padding: 5rem 5vw !important;
  }
  .sc-inner {
    grid-template-columns: 1fr !important;
    gap: 3.5rem !important;
    max-width: none !important;
  }
  .sc-title {
    font-size: 2.3rem !important;
  }
  .sc-body {
    font-size: 0.80rem !important;
  }
  #session-conseil #booking-widget {
    padding: 2rem 1.6rem !important;
  }
  #session-conseil .bk-month-name {
    font-size: 1.15rem !important;
  }
  #session-conseil .bk-nav svg {
    width: 18px !important;
    height: 18px !important;
  }
  #session-conseil .bk-day-cell {
    font-size: 0.92rem !important;
    min-height: 32px !important;
  }
  #session-conseil .bk-weekday-cell {
    font-size: 0.58rem !important;
  }
  #session-conseil .bk-slot-btn {
    font-size: 0.68rem !important;
    padding: 9px 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   BRAND INTRO — split éditorial v2
   Image portrait respectée · mise en scène luxe · ratio naturel
   ════════════════════════════════════════════════════════════════ */

/* Reset anciens styles #brand-intro */
#brand-intro {
  padding: 0 !important;
  display: block !important;
  background: #080808 !important;
  overflow: visible !important;
}

/* ── Grille : ~40 % texte · ~60 % image ── */
.kd-bi-wrap {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 90vh;
  align-items: stretch;
}

/* ── Colonne gauche : texte ── */
.kd-bi-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 4.5rem 8rem 5vw;
  position: relative;
  z-index: 1;
  /* Filet vertical — signature haute joaillerie */
  border-right: 0.5px solid rgba(255,255,255,0.07);
}

/* Surtitre */
.kd-bi-eyebrow {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  display: block;
  margin-bottom: 2.8rem;
}

/* Titre principal */
.kd-bi-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.6rem, 3.0vw, 3.8rem);
  line-height: 1.16;
  color: rgba(255,255,255,0.93);
  margin: 0 0 2.4rem;
  letter-spacing: -0.01em;
}

/* Filet séparateur */
.kd-bi-rule {
  width: 30px;
  height: 0.5px;
  background: rgba(255,255,255,0.18);
  margin-bottom: 2rem;
  flex-shrink: 0;
}

/* Corps de texte */
.kd-bi-body {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 2;
  color: rgba(255,255,255,0.40);
  margin: 0 0 3rem;
  max-width: 30ch;
}

/* Lien CTA */
.kd-bi-cta {
  display: inline-block;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.22);
  padding-bottom: 4px;
  transition: color 0.28s ease, border-color 0.28s ease;
  width: fit-content;
}
.kd-bi-cta:hover {
  color: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.60);
}

/* ── Colonne droite : image mise en scène éditoriale ──
   L'image n'est PAS étirée pour remplir la boîte.
   Elle est centrée dans son ratio naturel (portrait),
   avec de la respiration autour — fond sombre visible.
   C'est la convention des maisons de joaillerie luxe.         */
.kd-bi-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 4.5rem 5rem 3.5rem;
  background: #080808;
}

.kd-bi-img {
  display: block;
  /* Portrait : on pilote par la hauteur, largeur suit le ratio */
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  /* Pas d'object-fit nécessaire — le ratio naturel est préservé */
  transition: opacity 0.6s ease;
}
.kd-bi-media:hover .kd-bi-img {
  opacity: 0.92;
}

/* ── Tablette (≤ 960px) : empilé — texte · image ── */
@media (max-width: 960px) {
  .kd-bi-wrap {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .kd-bi-text {
    padding: 5.5rem 7vw 4rem;
    order: 1;
    border-right: none;
    border-bottom: 0.5px solid rgba(255,255,255,0.07);
  }
  .kd-bi-body {
    max-width: 50ch;
  }
  .kd-bi-media {
    order: 2;
    padding: 3.5rem 7vw 4.5rem;
  }
  .kd-bi-img {
    max-height: 64vw;
    max-width: 72%;
  }
}

/* ── Mobile (≤ 540px) ── */
@media (max-width: 540px) {
  .kd-bi-headline {
    font-size: clamp(2.2rem, 9.5vw, 3rem);
  }
  .kd-bi-text {
    padding: 4rem 5vw 3rem;
  }
  .kd-bi-media {
    padding: 2.5rem 5vw 3.5rem;
  }
  .kd-bi-img {
    max-height: none;
    max-width: 88%;
    width: 100%;
  }
  .kd-bi-body {
    max-width: 100%;
    font-size: 0.75rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   CATALOGUE ENTRY PAGE — kd-ce-*
   Grille de sélection des 5 univers Keihal Diamonds
   ════════════════════════════════════════════════════════════════ */

/* Hero header */
.kd-ce-hero {
  background: #0a0a0a;
  text-align: center;
  padding: 9rem 2rem 6rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}

.kd-ce-eyebrow {
  display: block;
  font-family: 'Inter', 'Tenor Sans', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-bottom: 2rem;
}

.kd-ce-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 1.8rem;
  letter-spacing: 0.04em;
}

.kd-ce-sub {
  font-family: 'Inter', 'Tenor Sans', Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.32);
  max-width: 440px;
  margin: 0 auto;
  font-weight: 300;
}

/* Main wrapper */
.kd-ce-main {
  background: #0a0a0a;
  padding: calc(var(--navbar-h, 88px) + 3.5rem) 2vw 6rem;
}

/* ── NOS COLLECTIONS header ── */
.kd-ce-header {
  text-align: center;
  padding-bottom: 3.5rem;
}

.kd-ce-eyebrow {
  display: block;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 1.4rem;
}

.kd-ce-sep {
  width: 48px;
  height: 1px;
  background: rgba(180, 155, 90, 0.50);
  margin: 0 auto;
}

/* 5-column category grid */
.kd-ce-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 96vw;
  margin: 0 auto 3rem;
}

/* Card shell */
.kd-ce-card {
  display: flex;
  flex-direction: column;
  background: #0f0f0f;
  overflow: hidden;
}

/* Main card link (wraps image + info) */
.kd-ce-card-link {
  display: block;
  text-decoration: none;
  flex: 1;
}

/* Portrait image wrapper */
.kd-ce-img-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 140%;
  overflow: hidden;
  background: #111;
}

.kd-ce-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kd-ce-card-link:hover .kd-ce-img-wrap img {
  transform: scale(1.06);
}

/* Info block */
.kd-ce-info {
  padding: 1.2rem 1.2rem 1rem;
  background: #0a0a0a;
  border-top: 0.5px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.kd-ce-count {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  display: block;
}

.kd-ce-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.82);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: color 0.3s;
}

.kd-ce-card-link:hover .kd-ce-name {
  color: #fff;
}

.kd-ce-explore {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  display: block;
  margin-top: 0.3rem;
  transition: color 0.3s;
}

.kd-ce-card-link:hover .kd-ce-explore {
  color: rgba(255,255,255,0.65);
}

/* Bespoke extra link (fiançailles card only) */
.kd-ce-bespoke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 0.85rem 1.2rem;
  background: rgba(255,255,255,0.02);
  border-top: 0.5px solid rgba(255,255,255,0.06);
  transition: background 0.3s;
}

.kd-ce-bespoke:hover {
  background: rgba(255,255,255,0.05);
}

.kd-ce-bespoke-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  transition: color 0.3s;
}

.kd-ce-bespoke:hover .kd-ce-bespoke-label {
  color: rgba(255,255,255,0.68);
}

.kd-ce-bespoke-arrow {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.20);
  flex-shrink: 0;
  transition: color 0.3s, transform 0.3s;
}

.kd-ce-bespoke:hover .kd-ce-bespoke-arrow {
  color: rgba(255,255,255,0.55);
  transform: translateX(3px);
}

/* Bottom note */
.kd-ce-note {
  text-align: center;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.16);
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 0.5px solid rgba(255,255,255,0.05);
}

/* Responsive — catalogue entry */

/* Tablette large → 3 colonnes */
@media (max-width: 1200px) {
  .kd-ce-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
}

/* Tablette → 2 colonnes */
@media (max-width: 1024px) {
  .kd-ce-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-width: 100%;
  }
  .kd-ce-main {
    padding-left: 3vw;
    padding-right: 3vw;
  }
  .kd-ce-header {
    padding-bottom: 2.8rem;
  }
}

/* Mobile → 1 colonne */
@media (max-width: 768px) {
  .kd-ce-main {
    padding: calc(var(--navbar-h, 65px) + 2.5rem) 0 4rem;
  }
  .kd-ce-header {
    padding: 0 1.5rem 2.5rem;
  }
  .kd-ce-eyebrow {
    font-size: 10px;
    letter-spacing: 0.28em;
  }
  .kd-ce-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 100%;
  }
  .kd-ce-img-wrap {
    padding-bottom: 115% !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CATEGORY PAGES — kd-cp-*
   Héros, fil d'Ariane, choix bespoke, grille produits
   ════════════════════════════════════════════════════════════════ */

/* Category hero */
.kd-cp-hero {
  background: #0a0a0a;
  text-align: center;
  padding: 10rem 2rem 6rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Breadcrumb — ← Catalogue */
.kd-cp-breadcrumb {
  display: inline-block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  margin-bottom: 3.5rem;
  transition: color 0.3s;
}

.kd-cp-breadcrumb:hover {
  color: rgba(255,255,255,0.65);
}

/* Eyebrow label */
.kd-cp-eyebrow {
  display: block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-bottom: 1.8rem;
}

/* Page h1 */
.kd-cp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 2rem;
  letter-spacing: 0.03em;
}

/* Thin divider rule */
.kd-cp-rule {
  width: 28px;
  height: 0.5px;
  background: rgba(255,255,255,0.15);
  margin-bottom: 2rem;
  flex-shrink: 0;
}

/* Subtitle */
.kd-cp-sub {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.95;
  color: rgba(255,255,255,0.32);
  max-width: 500px;
  margin: 0 auto;
  font-weight: 300;
}

/* Bespoke choice bar (fiançailles only) */
.kd-cp-choice {
  background: #0a0a0a;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  padding: 1.6rem 5vw;
}

.kd-cp-choice-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.kd-cp-choice-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}

.kd-cp-choice-opt {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 0.5px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.kd-cp-choice-opt:hover {
  color: rgba(255,255,255,0.75);
  border-bottom-color: rgba(255,255,255,0.25);
}

.kd-cp-choice-opt--active {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.5);
}

.kd-cp-choice-sep {
  color: rgba(255,255,255,0.15);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Products section */
.kd-cp-products {
  background: #0a0a0a;
  padding: 4rem 5vw 5rem;
}

.kd-cp-products-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}

.kd-cp-products-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 1.25rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
}

.kd-cp-products-count {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}

/* Product grid — 4 columns on category pages, centered */
.kd-cp-products .product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  padding: 0 !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer CTA band */
.kd-cp-footer-cta {
  background: rgba(255,255,255,0.02);
  border-top: 0.5px solid rgba(255,255,255,0.06);
  padding: 3.5rem 5vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.kd-cp-footer-cta p {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.38) !important;
  margin: 0 !important;
  font-weight: 300;
}

.kd-cp-footer-cta a {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.22);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}

.kd-cp-footer-cta a:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.6);
}

/* Responsive — category pages */
@media (max-width: 960px) {
  .kd-cp-hero {
    padding: 8rem 2rem 5rem;
  }
  .kd-cp-products .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .kd-cp-hero {
    padding: 7rem 1.5rem 4rem;
  }
  .kd-cp-title {
    font-size: 2.5rem;
  }
  .kd-cp-choice-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .kd-cp-products .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CATEGORY PAGE HERO — espace réduit, produits plus haut
   ════════════════════════════════════════════════════════════════ */
.kd-cp-hero {
  padding: 7rem 2rem 3rem !important;
}

.kd-cp-products {
  padding: 2rem 5vw 4rem !important;
}

/* Uniform product card image ratio — all categories */
.kd-cp-products .product-img-wrap {
  padding-bottom: 115% !important;
}

.kd-cp-products .product-img-wrap img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #0a0a0a !important;
}

/* Product card — same minimal info height */
.kd-cp-products .product-info {
  padding: 0.85rem 0 0.65rem !important;
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — kd-pd-*
   Page produit premium façon maison de joaillerie
   ════════════════════════════════════════════════════════════════ */

/* Breadcrumb bar */
.kd-pd-breadcrumb-bar {
  background: #0a0a0a;
  padding: 1.1rem 5vw;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  position: sticky;
  top: 72px;
  z-index: 30;
}

.kd-pd-breadcrumb-bar a {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  transition: color 0.3s;
}

.kd-pd-breadcrumb-bar a:hover {
  color: rgba(255,255,255,0.65);
}

.kd-pd-breadcrumb-bar span {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.kd-pd-bc-current {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}

/* ── Main split layout ── */
.kd-pd-main {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: calc(100vh - 108px);
  background: #0a0a0a;
  align-items: start;
}

/* ── Left: image area ── */
.kd-pd-media {
  position: sticky;
  top: 108px;
  height: calc(100vh - 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 3rem;
  background: #0d0d0d;
  overflow: hidden;
}

.kd-pd-img {
  max-height: 80vh;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kd-pd-media:hover .kd-pd-img {
  transform: scale(1.04);
}

/* ── Right: details ── */
.kd-pd-info {
  padding: 5rem 5rem 5rem 4.5rem;
  border-left: 0.5px solid rgba(255,255,255,0.05);
  min-height: calc(100vh - 108px);
  display: flex;
  flex-direction: column;
}

/* Category label */
.kd-pd-cat-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  display: block;
  margin-bottom: 1.6rem;
}

/* Product name */
.kd-pd-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  line-height: 1.08;
  color: #fff;
  margin: 0 0 2rem;
  letter-spacing: 0.01em;
}

/* Thin rule */
.kd-pd-rule {
  width: 28px;
  height: 0.5px;
  background: rgba(255,255,255,0.15);
  margin-bottom: 2rem;
  flex-shrink: 0;
}

/* Description */
.kd-pd-desc {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 2.05;
  color: rgba(255,255,255,0.36);
  margin: 0 0 2.8rem;
  max-width: 36ch;
  font-weight: 300;
}

/* Characteristics table */
.kd-pd-chars {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}

.kd-pd-char-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.04);
  gap: 1.5rem;
}

.kd-pd-char-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  flex-shrink: 0;
}

.kd-pd-char-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.50);
  text-align: right;
  line-height: 1.4;
}

/* Metal options */
.kd-pd-metals {
  margin-bottom: 2.8rem;
}

.kd-pd-metals-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  display: block;
  margin-bottom: 1.1rem;
}

.kd-pd-metals-options {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.kd-pd-metal-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.kd-pd-metal-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  transition: border-color 0.25s, transform 0.25s;
  flex-shrink: 0;
}

.kd-pd-metal-opt.active .kd-pd-metal-circle,
.kd-pd-metal-opt:hover .kd-pd-metal-circle {
  border-color: rgba(255,255,255,0.6);
  transform: scale(1.14);
}

.kd-pd-metal-name {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.50rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  white-space: nowrap;
  transition: color 0.25s;
}

.kd-pd-metal-opt.active .kd-pd-metal-name,
.kd-pd-metal-opt:hover .kd-pd-metal-name {
  color: rgba(255,255,255,0.58);
}

/* Action buttons */
.kd-pd-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.kd-pd-wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.14);
  padding: 1rem 1.8rem;
  cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  transition: border-color 0.3s, color 0.3s;
  width: 100%;
}

.kd-pd-wishlist-btn:hover {
  border-color: rgba(255,255,255,0.38);
  color: rgba(255,255,255,0.72);
}

.kd-pd-wishlist-btn.active {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}

.kd-pd-wishlist-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.kd-pd-order-btn {
  display: block;
  text-align: center;
  background: #fff;
  color: #0a0a0a;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.1rem 2rem;
  transition: background 0.3s, color 0.3s;
  width: 100%;
  box-sizing: border-box;
}

.kd-pd-order-btn:hover {
  background: rgba(255,255,255,0.88);
}

/* Bottom note */
.kd-pd-note {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.14);
  margin-top: auto;
  padding-top: 2rem;
  border-top: 0.5px solid rgba(255,255,255,0.04);
  line-height: 2;
}

/* ── Related products ── */
.kd-pd-related {
  background: #0a0a0a;
  padding: 4.5rem 5vw 5rem;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}

.kd-pd-related-header {
  margin-bottom: 2.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}

.kd-pd-related-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
}

.kd-pd-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.kd-pd-related-card {
  display: block;
  text-decoration: none;
  background: #0f0f0f;
  overflow: hidden;
}

.kd-pd-related-img-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 115%;
  overflow: hidden;
  background: #0a0a0a;
}

.kd-pd-related-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kd-pd-related-card:hover .kd-pd-related-img-wrap img {
  transform: scale(1.05);
}

.kd-pd-related-info {
  padding: 0.85rem 0.85rem 0.75rem;
  background: #0a0a0a;
  border-top: 0.5px solid rgba(255,255,255,0.04);
}

.kd-pd-related-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.62);
  margin: 0;
  letter-spacing: 0.04em;
  transition: color 0.3s;
}

.kd-pd-related-card:hover .kd-pd-related-name {
  color: #fff;
}

/* ── Responsive — product detail ── */
@media (max-width: 960px) {
  .kd-pd-main {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .kd-pd-media {
    position: static;
    height: 72vw;
    min-height: 320px;
    padding: 3rem 2.5rem;
  }
  .kd-pd-info {
    padding: 3.5rem 5vw 4rem;
    border-left: none;
    border-top: 0.5px solid rgba(255,255,255,0.05);
    min-height: auto;
  }
  .kd-pd-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kd-pd-breadcrumb-bar {
    top: 72px;
  }
}

@media (max-width: 640px) {
  .kd-pd-media {
    height: 85vw;
    padding: 2rem 1.5rem;
  }
  .kd-pd-info {
    padding: 2.5rem 1.5rem 3rem;
  }
  .kd-pd-name {
    font-size: 2.2rem;
  }
  .kd-pd-desc {
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   CATEGORY CARDS — image & nom cliquables → produit.html
   ════════════════════════════════════════════════════════════════ */
.kd-pc-img-link {
  display: block;
  cursor: pointer;
}

.kd-pc-name-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kd-pc-name-link:hover .product-name {
  color: rgba(255,255,255,0.85);
}

/* ════════════════════════════════════════════════════════════════
   MOBILE PREMIUM — Keihal Diamonds
   Inspiration Messika / Cartier / Van Cleef
   Espace, lisibilité, images bien cadrées, luxe sobre
   Breakpoints : 960px · 720px · 640px · 420px
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   A. PAGE CATALOGUE ENTRÉE — catalogue.html (kd-ce-*)
   ────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Grid : espace généreux entre les cartes catégorie */
  .kd-ce-grid {
    gap: 10px;
  }

  /* Image : ratio légèrement moins haut sur petits écrans */
  .kd-ce-img-wrap {
    padding-bottom: 120%;
  }

  /* Info block : plus d'espace intérieur */
  .kd-ce-info {
    padding: 1.5rem 1.3rem 1.2rem;
  }

  /* Nom catégorie : lisible */
  .kd-ce-name {
    font-size: 1.1rem;
    letter-spacing: 0.03em;
  }

  /* Lien Explorer : cible tactile plus visible */
  .kd-ce-explore {
    font-size: 0.58rem;
    margin-top: 0.5rem;
  }

  /* Wrapper principal : padding mobile */
  .kd-ce-main {
    padding: calc(var(--navbar-h, 68px) + 2rem) 0 4rem;
  }
}

@media (max-width: 420px) {
  /* Une colonne : les cartes respirent, impact visuel maximal */
  .kd-ce-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Image : format 4:5 généreux */
  .kd-ce-img-wrap {
    padding-bottom: 125%;
  }

  /* Info : espace premium */
  .kd-ce-info {
    padding: 1.6rem 1.5rem 1.4rem;
  }

  /* Nom : beau sur une colonne */
  .kd-ce-name {
    font-size: 1.2rem;
  }

  /* Hero */
  .kd-ce-title {
    font-size: 2.1rem;
  }
  .kd-ce-hero {
    padding: 6rem 1.5rem 3rem;
  }
}

/* ──────────────────────────────────────────────────────────────
   B. PAGES CATÉGORIES — cat-*.html (kd-cp-*)
   ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Section produits : padding respectable */
  .kd-cp-products {
    padding: 1.5rem 4vw 3.5rem !important;
  }

  /* Grille 2 colonnes : espacement généreux */
  .kd-cp-products .product-grid {
    gap: 8px !important;
  }

  /* Image produit : format portrait uniforme */
  .kd-cp-products .product-img-wrap {
    padding-bottom: 120% !important;
  }

  /* Info produit : padding suffisant */
  .kd-cp-products .product-info {
    padding: 1rem 0.1rem 0.9rem !important;
  }

  /* Nom produit : lisible, élégant */
  .product-name {
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
  }

  /* "Commander ce modèle" : bien visible */
  .product-btn {
    font-size: 7.5px !important;
    margin-top: 0.5rem;
  }

  /* Header de section produits */
  .kd-cp-products-header {
    margin-bottom: 1.4rem;
    padding-bottom: 0.9rem;
  }
  .kd-cp-products-title {
    font-size: 1.05rem;
  }
}

@media (max-width: 420px) {
  /* Petit téléphone : 2 colonnes serrées mais élégantes */
  .kd-cp-products .product-grid {
    gap: 6px !important;
    padding: 0 !important;
  }

  /* Nom produit */
  .product-name {
    font-size: 0.88rem !important;
  }

  /* Bouton Commander */
  .product-btn {
    font-size: 7px !important;
    letter-spacing: 0.16em !important;
  }

  /* Padding produits section */
  .kd-cp-products {
    padding: 1.2rem 3vw 3rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   C. PAGE DÉTAIL PRODUIT — produit.html (kd-pd-*)
   ────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  /* Image : plus haute, plus visible */
  .kd-pd-media {
    height: 78vw;
    min-height: 360px;
    padding: 2.5rem 2rem;
  }

  /* Infos : padding équilibré */
  .kd-pd-info {
    padding: 3rem 5vw 3.5rem;
    border-top: 0.5px solid rgba(255,255,255,0.05);
  }

  /* Nom */
  .kd-pd-name {
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    margin-bottom: 1.6rem;
  }

  /* Caractéristiques : plus compactes */
  .kd-pd-char-row {
    padding: 0.75rem 0;
  }

  /* Options métal : cibles tactiles suffisantes */
  .kd-pd-metal-circle {
    width: 26px;
    height: 26px;
  }
  .kd-pd-metals-options {
    gap: 1.4rem;
  }

  /* Grille produits associés : 2 colonnes */
  .kd-pd-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Section associés */
  .kd-pd-related {
    padding: 3.5rem 5vw 4rem;
  }
}

@media (max-width: 640px) {
  /* Image produit : bien visible, centrée */
  .kd-pd-media {
    height: 82vw;
    min-height: 300px;
    padding: 1.8rem 1.5rem;
  }

  /* Infos : padding mobile confortable */
  .kd-pd-info {
    padding: 2.5rem 5vw 3rem;
  }

  /* Nom */
  .kd-pd-name {
    font-size: 2rem;
    margin-bottom: 1.3rem;
  }

  /* Description */
  .kd-pd-desc {
    font-size: 0.82rem;
    max-width: 100%;
  }

  /* Caractéristiques : bien espacées */
  .kd-pd-chars {
    margin-bottom: 2rem;
  }
  .kd-pd-char-row {
    padding: 0.72rem 0;
    gap: 1rem;
  }
  .kd-pd-char-label {
    font-size: 0.56rem;
  }
  .kd-pd-char-val {
    font-size: 0.82rem;
  }

  /* Options métal : cibles tactiles larges */
  .kd-pd-metal-circle {
    width: 30px;
    height: 30px;
  }
  .kd-pd-metals-options {
    gap: 1.8rem;
  }
  .kd-pd-metals {
    margin-bottom: 1.8rem;
  }
  .kd-pd-metal-name {
    font-size: 0.48rem;
  }

  /* Bouton wishlist : touch-friendly */
  .kd-pd-wishlist-btn {
    padding: 1rem 1.4rem;
    font-size: 0.58rem;
    min-height: 48px;
  }

  /* Bouton Commander : touch-friendly */
  .kd-pd-order-btn {
    padding: 1.1rem 1.5rem;
    font-size: 0.58rem;
    min-height: 48px;
  }

  /* Espace actions */
  .kd-pd-actions {
    gap: 0.7rem;
    margin-bottom: 1.6rem;
  }

  /* Breadcrumb plus compact */
  .kd-pd-breadcrumb-bar {
    padding: 0.85rem 5vw;
    top: 58px;
  }

  /* Produits associés */
  .kd-pd-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .kd-pd-related {
    padding: 3rem 5vw 3.5rem;
  }
  .kd-pd-related-info {
    padding: 0.7rem 0.65rem 0.65rem;
  }
  .kd-pd-related-name {
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  /* Image : encore plus haute sur très petit écran */
  .kd-pd-media {
    height: 90vw;
    min-height: 280px;
    padding: 1.5rem 1.2rem;
  }

  /* Infos */
  .kd-pd-info {
    padding: 2rem 5vw 2.5rem;
  }

  /* Nom */
  .kd-pd-name {
    font-size: 1.8rem;
  }

  /* Options métal : maximal sur petit écran */
  .kd-pd-metal-circle {
    width: 34px;
    height: 34px;
  }

  /* Boutons : pleine largeur, confortables */
  .kd-pd-wishlist-btn,
  .kd-pd-order-btn {
    font-size: 0.56rem;
    letter-spacing: 0.22em;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ROUND 5 — KEIHAL DIAMONDS  ·  New UI Components
   Search · Private Selection · Configurator · Filters · Metallic pastilles
   ═══════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────
   1. SEARCH BUTTON — header icon
   ──────────────────────────────────────────────────────────────────────── */
#kd-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #f0e8d8;
  opacity: 0.82;
  transition: opacity 0.22s ease;
  position: relative;
  top: 1px;
}
#kd-search-btn:hover { opacity: 1; }
#kd-search-btn svg { display: block; }


/* ────────────────────────────────────────────────────────────────────────
   2. SEARCH OVERLAY & PANEL
   ──────────────────────────────────────────────────────────────────────── */
#kd-search-ov {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
#kd-search-ov.open {
  opacity: 1;
  pointer-events: auto;
}

#kd-search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1201;
  background: #0d0d0d;
  border-bottom: 1px solid rgba(240, 232, 216, 0.12);
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#kd-search-panel.open {
  transform: translateY(0);
}

body.kd-sp-lock {
  overflow: hidden;
}

.kd-sp-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

/* Search top row — input + close */
.kd-sp-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 0 1.2rem;
  border-bottom: 1px solid rgba(240, 232, 216, 0.08);
  margin-bottom: 1.6rem;
}

#kd-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #f0e8d8;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  caret-color: rgba(240, 232, 216, 0.7);
}
#kd-search-input::placeholder {
  color: rgba(240, 232, 216, 0.28);
}

#kd-search-cls {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: 1px solid rgba(240, 232, 216, 0.14);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(240, 232, 216, 0.55);
  font-size: 1rem;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
  padding: 0;
}
#kd-search-cls:hover {
  border-color: rgba(240, 232, 216, 0.4);
  color: #f0e8d8;
}

/* Suggestions area */
#kd-sp-suggestions {
  display: block;
}

.kd-sp-sugg-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.35);
  margin-bottom: 0.85rem;
}

.kd-sp-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.kd-sp-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(240, 232, 216, 0.18);
  background: none;
  color: rgba(240, 232, 216, 0.72);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  border-radius: 2px;
}
.kd-sp-cat-pill:hover {
  border-color: rgba(240, 232, 216, 0.45);
  color: #f0e8d8;
  background: rgba(240, 232, 216, 0.05);
}

.kd-sp-kw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.kd-sp-kw {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  background: rgba(240, 232, 216, 0.05);
  border: none;
  color: rgba(240, 232, 216, 0.5);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  border-radius: 2px;
}
.kd-sp-kw:hover {
  background: rgba(240, 232, 216, 0.1);
  color: rgba(240, 232, 216, 0.85);
}

/* Results area */
#kd-sp-results {
  display: block;
}

.kd-sp-no-result {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(240, 232, 216, 0.38);
  padding: 1.2rem 0;
  letter-spacing: 0.03em;
}

.kd-sp-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.kd-sp-res-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(240, 232, 216, 0.07);
  transition: border-color 0.22s;
  overflow: hidden;
}
.kd-sp-res-card:hover {
  border-color: rgba(240, 232, 216, 0.2);
}

.kd-sp-res-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #111;
}

.kd-sp-res-body {
  padding: 0.7rem 0.8rem 0.85rem;
}

.kd-sp-res-cat {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.38);
  margin-bottom: 0.28rem;
  display: block;
}

.kd-sp-res-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(240, 232, 216, 0.9);
  margin-bottom: 0.5rem;
  display: block;
  letter-spacing: 0.01em;
}

.kd-sp-res-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s;
}
.kd-sp-res-card:hover .kd-sp-res-link {
  color: rgba(240, 232, 216, 0.9);
}


/* ────────────────────────────────────────────────────────────────────────
   3. PRIVATE SELECTION PANEL — upgrades over wishlist panel
   ──────────────────────────────────────────────────────────────────────── */

/* Panel description subtitle */
.kd-sel-panel-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.88rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(240, 232, 216, 0.38);
  margin: -0.6rem 0 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Empty state */
.kd-sel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  flex: 1;
}

.kd-sel-empty-icon {
  opacity: 0.18;
  margin-bottom: 1.2rem;
}

.kd-sel-empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 300;
  color: rgba(240, 232, 216, 0.65);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.kd-sel-empty-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.3);
  margin-bottom: 1.8rem;
  line-height: 1.6;
  max-width: 220px;
}

.kd-sel-empty-cta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 240px;
}

.kd-sel-explore-btn,
.kd-sel-custom-btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1.2rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.kd-sel-explore-btn {
  background: rgba(240, 232, 216, 0.92);
  color: #0d0d0d;
}
.kd-sel-explore-btn:hover {
  background: #f0e8d8;
}

.kd-sel-custom-btn {
  background: none;
  border: 1px solid rgba(240, 232, 216, 0.2);
  color: rgba(240, 232, 216, 0.65);
}
.kd-sel-custom-btn:hover {
  border-color: rgba(240, 232, 216, 0.4);
  color: #f0e8d8;
}

/* Selection item card */
.kd-sel-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(240, 232, 216, 0.07);
  align-items: flex-start;
}
.kd-sel-item:last-child {
  border-bottom: none;
}

.kd-sel-item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  background: #111;
  display: block;
}

.kd-sel-item-body {
  flex: 1;
  min-width: 0;
}

.kd-sel-item-cat {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.32);
  display: block;
  margin-bottom: 0.15rem;
}

.kd-sel-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(240, 232, 216, 0.9);
  display: block;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kd-sel-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Metal color dot */
.kd-sel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kd-sel-dot[data-metal="or-blanc"] {
  background: radial-gradient(circle at 36% 36%, #ffffff 0%, #d8d8de 55%, #b0b0bb 100%);
}
.kd-sel-dot[data-metal="or-jaune"] {
  background: radial-gradient(circle at 36% 36%, #f5e090 0%, #c9a84c 55%, #9a7a2a 100%);
}
.kd-sel-dot[data-metal="or-rose"] {
  background: radial-gradient(circle at 36% 36%, #f7cdc4 0%, #c98b84 55%, #a0625a 100%);
}
.kd-sel-dot[data-metal="platine"] {
  background: radial-gradient(circle at 36% 36%, #e8e8ef 0%, #c8c8d8 55%, #9898a8 100%);
}

.kd-sel-item-metal-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: rgba(240, 232, 216, 0.42);
}

.kd-sel-item-engraving {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(240, 232, 216, 0.32);
  width: 100%;
  margin-top: 0.1rem;
}

.kd-sel-item-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
}

.kd-sel-item-edit,
.kd-sel-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.48rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0;
  transition: color 0.2s;
}

.kd-sel-item-edit {
  color: rgba(240, 232, 216, 0.45);
  border-bottom: 1px solid rgba(240, 232, 216, 0.18);
}
.kd-sel-item-edit:hover { color: rgba(240, 232, 216, 0.85); }

.kd-sel-item-remove {
  color: rgba(200, 90, 90, 0.45);
}
.kd-sel-item-remove:hover { color: rgba(200, 90, 90, 0.85); }

/* Footer CTAs */
.kd-sel-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.25);
  color: rgba(200, 240, 210, 0.88);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
  margin-bottom: 0.6rem;
}
.kd-sel-wa-btn:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.45);
  color: rgba(220, 255, 230, 0.95);
}
.kd-sel-wa-btn svg {
  flex-shrink: 0;
}

.kd-sel-continue-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.2rem;
  background: none;
  border: 1px solid rgba(240, 232, 216, 0.12);
  color: rgba(240, 232, 216, 0.4);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.22s, color 0.22s;
}
.kd-sel-continue-btn:hover {
  border-color: rgba(240, 232, 216, 0.28);
  color: rgba(240, 232, 216, 0.7);
}


/* ────────────────────────────────────────────────────────────────────────
   4. PRODUCT CONFIGURATOR
   ──────────────────────────────────────────────────────────────────────── */
.kd-cfg {
  border-top: 1px solid rgba(240, 232, 216, 0.1);
  padding-top: 2rem;
  margin-top: 2rem;
}

.kd-cfg-block {
  margin-bottom: 1.6rem;
}

.kd-cfg-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.38);
  margin-bottom: 0.8rem;
}

/* Carat / intensity options */
.kd-cfg-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.kd-cfg-opt {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid rgba(240, 232, 216, 0.14);
  color: rgba(240, 232, 216, 0.5);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  border-radius: 2px;
}
.kd-cfg-opt:hover {
  border-color: rgba(240, 232, 216, 0.32);
  color: rgba(240, 232, 216, 0.8);
  background: rgba(240, 232, 216, 0.04);
}
.kd-cfg-opt.active {
  border-color: rgba(240, 232, 216, 0.55);
  color: #f0e8d8;
  background: rgba(240, 232, 216, 0.07);
}

/* Engraving input */
.kd-cfg-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(240, 232, 216, 0.12);
  border-radius: 2px;
  color: #f0e8d8;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.22s;
  box-sizing: border-box;
  caret-color: rgba(240, 232, 216, 0.6);
}
.kd-cfg-input::placeholder {
  color: rgba(240, 232, 216, 0.22);
  font-style: italic;
}
.kd-cfg-input:focus {
  border-color: rgba(240, 232, 216, 0.3);
}

/* Message textarea */
.kd-cfg-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(240, 232, 216, 0.12);
  border-radius: 2px;
  color: #f0e8d8;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.22s;
  box-sizing: border-box;
  resize: vertical;
  min-height: 80px;
  caret-color: rgba(240, 232, 216, 0.6);
  line-height: 1.5;
}
.kd-cfg-textarea::placeholder {
  color: rgba(240, 232, 216, 0.22);
  font-style: italic;
}
.kd-cfg-textarea:focus {
  border-color: rgba(240, 232, 216, 0.3);
}

/* CTA buttons */
.kd-cfg-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(240, 232, 216, 0.08);
  padding-top: 1.8rem;
}

/* "Ajouter à ma sélection privée" */
.kd-cfg-sel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 1.1rem 1.5rem;
  background: rgba(240, 232, 216, 0.92);
  border: none;
  color: #0d0d0d;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s, transform 0.15s;
}
.kd-cfg-sel-btn:hover {
  background: #f0e8d8;
}
.kd-cfg-sel-btn:active {
  transform: scale(0.985);
}
.kd-cfg-sel-btn.added {
  background: rgba(240, 232, 216, 0.55);
  color: rgba(13, 13, 13, 0.7);
}

/* "Envoyer directement sur WhatsApp" */
.kd-cfg-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: rgba(37, 211, 102, 0.09);
  border: 1px solid rgba(37, 211, 102, 0.22);
  color: rgba(200, 240, 210, 0.85);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.kd-cfg-wa-btn:hover {
  background: rgba(37, 211, 102, 0.16);
  border-color: rgba(37, 211, 102, 0.4);
  color: rgba(220, 255, 230, 0.95);
}

/* Selected metal display */
.kd-pd-metal-selected {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(240, 232, 216, 0.45);
  margin-top: 0.35rem;
  margin-left: 0.1rem;
  letter-spacing: 0.04em;
  min-height: 1.1rem;
  transition: color 0.22s;
}
.kd-pd-metal-selected:not(:empty) {
  color: rgba(240, 232, 216, 0.6);
}


/* ────────────────────────────────────────────────────────────────────────
   5. METALLIC PASTILLES — enhanced metal circle gradients
   ──────────────────────────────────────────────────────────────────────── */
.kd-pd-metal-circle {
  transition: box-shadow 0.22s, transform 0.18s;
}
.kd-pd-metal-opt.active .kd-pd-metal-circle,
.kd-pd-metal-opt:hover .kd-pd-metal-circle {
  box-shadow: 0 0 0 1.5px rgba(240, 232, 216, 0.55), 0 0 0 3px rgba(240, 232, 216, 0.12);
  transform: scale(1.12);
}


/* ────────────────────────────────────────────────────────────────────────
   6. CATEGORY FILTER BAR
   ──────────────────────────────────────────────────────────────────────── */
.kd-filter-bar {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
}

.kd-filter-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(240, 232, 216, 0.08);
  border-bottom: 1px solid rgba(240, 232, 216, 0.08);
}

.kd-filter-bar-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* Toggle button */
.kd-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid rgba(240, 232, 216, 0.18);
  color: rgba(240, 232, 216, 0.6);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 2px;
}
.kd-filter-toggle:hover,
.kd-filter-bar.drawer-open .kd-filter-toggle {
  border-color: rgba(240, 232, 216, 0.4);
  color: #f0e8d8;
}

/* Result count */
.kd-filter-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Active filter tags */
.kd-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.kd-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: rgba(240, 232, 216, 0.08);
  border: 1px solid rgba(240, 232, 216, 0.18);
  color: rgba(240, 232, 216, 0.72);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  border-radius: 2px;
}
.kd-active-tag:hover {
  background: rgba(240, 232, 216, 0.14);
  color: #f0e8d8;
}
.kd-active-tag span {
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.6;
}

/* Filter drawer */
.kd-filter-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.kd-filter-drawer.open {
  max-height: 520px;
}

.kd-filter-drawer-inner {
  padding: 1.4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border-bottom: 1px solid rgba(240, 232, 216, 0.08);
}

/* Filter sections */
.kd-filter-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.kd-filter-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.32);
}

.kd-filter-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Individual filter option buttons */
.kd-filter-opt {
  padding: 0.4rem 0.85rem;
  background: none;
  border: 1px solid rgba(240, 232, 216, 0.12);
  color: rgba(240, 232, 216, 0.45);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  border-radius: 2px;
}
.kd-filter-opt:hover {
  border-color: rgba(240, 232, 216, 0.28);
  color: rgba(240, 232, 216, 0.75);
}
.kd-filter-opt.active {
  border-color: rgba(240, 232, 216, 0.5);
  color: #f0e8d8;
  background: rgba(240, 232, 216, 0.07);
}

/* Drawer footer */
.kd-filter-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.kd-filter-reset {
  background: none;
  border: none;
  color: rgba(240, 232, 216, 0.32);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(240, 232, 216, 0.12);
  transition: color 0.18s, border-color 0.18s;
}
.kd-filter-reset:hover {
  color: rgba(240, 232, 216, 0.65);
  border-color: rgba(240, 232, 216, 0.3);
}

.kd-filter-apply {
  padding: 0.6rem 1.4rem;
  background: rgba(240, 232, 216, 0.9);
  border: none;
  color: #0d0d0d;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 2px;
}
.kd-filter-apply:hover {
  background: #f0e8d8;
}


/* ────────────────────────────────────────────────────────────────────────
   7. RESPONSIVE — Tablet  ≤ 960px
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .kd-sp-res-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kd-cfg-ctas {
    gap: 0.65rem;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   8. RESPONSIVE — Mobile  ≤ 640px
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Search panel */
  .kd-sp-inner {
    padding: 0 1.2rem 1.8rem;
  }
  .kd-sp-top {
    padding: 1.2rem 0 1rem;
    margin-bottom: 1.2rem;
  }
  #kd-search-input {
    font-size: 1.15rem;
  }
  .kd-sp-res-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }
  .kd-sp-cat-pills {
    gap: 0.4rem;
  }

  /* Private selection */
  .kd-sel-item-img {
    width: 52px;
    height: 52px;
  }
  .kd-sel-item-name {
    font-size: 0.88rem;
  }
  .kd-sel-item-actions {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }

  /* Configurator */
  .kd-cfg {
    padding-top: 1.6rem;
    margin-top: 1.6rem;
  }
  .kd-cfg-ctas {
    padding-top: 1.4rem;
    margin-top: 1.6rem;
  }
  .kd-cfg-sel-btn,
  .kd-cfg-wa-btn {
    padding: 1rem 1.2rem;
    font-size: 0.54rem;
    min-height: 52px; /* large tap target */
  }
  .kd-cfg-opt {
    padding: 0.55rem 0.9rem;
    font-size: 0.54rem;
    min-height: 40px;
  }
  .kd-cfg-input,
  .kd-cfg-textarea {
    font-size: 16px; /* prevents iOS zoom */
    padding: 0.85rem 0.9rem;
  }

  /* Filter bar */
  .kd-filter-bar-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.65rem 0;
  }
  .kd-filter-count {
    font-size: 0.5rem;
  }
  .kd-filter-drawer.open {
    max-height: 620px;
  }
  .kd-filter-drawer-inner {
    gap: 1rem;
  }
  .kd-filter-opt {
    font-size: 0.5rem;
    padding: 0.45rem 0.75rem;
    min-height: 36px;
  }
  .kd-filter-apply,
  .kd-filter-reset {
    min-height: 40px;
  }
  .kd-filter-apply {
    font-size: 0.5rem;
    padding: 0.55rem 1.1rem;
  }

  /* Private selection empty state buttons */
  .kd-sel-explore-btn,
  .kd-sel-custom-btn {
    min-height: 50px;
    font-size: 0.54rem;
  }

  /* WhatsApp button — mobile */
  .kd-sel-wa-btn {
    min-height: 54px;
    font-size: 0.56rem;
  }
  .kd-sel-continue-btn {
    min-height: 46px;
    font-size: 0.5rem;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   9. NARROW MOBILE  ≤ 400px
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .kd-sp-res-grid {
    grid-template-columns: 1fr;
  }
  .kd-cfg-opts {
    flex-direction: column;
  }
  .kd-cfg-opt {
    width: 100%;
    text-align: center;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   10. COMMANDER PAGE — private selection note banner
   ──────────────────────────────────────────────────────────────────────── */
.kd-cmd-sel-note {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
}

.kd-cmd-sel-note-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgba(240, 232, 216, 0.12);
  background: rgba(240, 232, 216, 0.03);
}

.kd-cmd-sel-note-inner svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: rgba(240, 232, 216, 0.35);
}

.kd-cmd-sel-note-inner p {
  flex: 1;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.92rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(240, 232, 216, 0.5);
  line-height: 1.55;
  margin: 0 0 0.55rem;
  letter-spacing: 0.01em;
}

.kd-cmd-sel-note-cta {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.5);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 232, 216, 0.18);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.kd-cmd-sel-note-cta:hover {
  color: rgba(240, 232, 216, 0.85);
  border-color: rgba(240, 232, 216, 0.4);
}

@media (max-width: 640px) {
  .kd-cmd-sel-note-inner {
    flex-direction: column;
    gap: 0.6rem;
  }
  .kd-cmd-sel-note-inner svg {
    margin-top: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ROUND 6 — MOBILE-FIRST UX OVERHAUL
   Bottom bar · Hero mobile · Editorial · Reassurance · Footer · Category
   ═══════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────
   1. BODY — padding-bottom on mobile for the fixed bar
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body {
    padding-bottom: 68px !important;
  }
  /* Ensure overlays cover full screen including bar area */
  #kd-wl-panel,
  #kd-acct-modal,
  #kd-search-panel,
  #kd-drawer {
    padding-bottom: 68px;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   2. MOBILE BOTTOM BAR  #kd-mob-bar
   ──────────────────────────────────────────────────────────────────────── */
#kd-mob-bar {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
  #kd-mob-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: 60px;
    background: rgba(8, 8, 8, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(240, 232, 216, 0.08);
    align-items: stretch;
    /* Safe area for notched phones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .kd-mob-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(240, 232, 216, 0.5);
    text-decoration: none;
    padding: 0 4px;
    transition: color 0.18s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .kd-mob-btn:hover,
  .kd-mob-btn:active {
    color: rgba(240, 232, 216, 0.92);
  }

  /* WhatsApp button gets subtle green tint */
  .kd-mob-btn--wa {
    color: rgba(130, 220, 160, 0.65);
  }
  .kd-mob-btn--wa:hover,
  .kd-mob-btn--wa:active {
    color: rgba(37, 211, 102, 0.9);
  }

  .kd-mob-btn-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kd-mob-btn-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.44rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* Badge on selection icon */
  .kd-mob-bar-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 15px;
    height: 15px;
    background: rgba(240, 232, 216, 0.9);
    color: #0a0a0a;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.42rem;
    font-weight: 600;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-sizing: border-box;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   3. HEADER MOBILE — cleaner, hide excess icons
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hide: account btn, wishlist btn, wishlist link text — replaced by bottom bar */
  #kd-acct-btn,
  #kd-wl-btn,
  .kd-wl-link {
    display: none !important;
  }

  /* Hide: search btn injected by kd-search.js — replaced by bottom bar */
  #kd-search-btn {
    display: none !important;
  }

  /* Keep: lang switcher, but make it compact */
  .kd-lang {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  /* Navbar inner mobile: burger gauche, logo centre, lang droite */
  #navbar .navbar-inner {
    grid-template-columns: 56px 1fr 56px !important;
    padding: 0 1.5rem !important;
    height: 68px !important;
  }
  :root { --navbar-h: 68px; }

  .kd-nb-left {
    grid-column: 1;
    justify-content: flex-start;
  }
  .navbar-logo {
    grid-column: 2;
    text-align: center;
  }
  .kd-nb-right {
    grid-column: 3;
    justify-content: flex-end;
    gap: 0 !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   4. HERO MOBILE — controlled aspect ratio + text below
   ──────────────────────────────────────────────────────────────────────── */

/* Desktop: video frame fills section absolutely (current behaviour) */
.hero-video-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  overflow: hidden;
}

/* Mobile caption — hidden on desktop */
.hero-mob-caption {
  display: none;
}

/* Mobile bottom block — hidden on desktop */
.hero-mob-bottom {
  display: none;
}

@media (max-width: 640px) {

  /* Hero becomes a block column instead of 100vh */
  #hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0a0a0a;
  }

  /* Video frame: relative so it pushes flow */
  .hero-video-frame {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* Video: controlled 4:5 ratio */
  .hero-bg-video {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    background: #080808;
  }

  /* Overlay stays inside the frame */
  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.2)  50%,
      rgba(0,0,0,0.75) 100%
    ) !important;
    z-index: 1;
  }

  /* Caption on the video */
  .hero-mob-caption {
    display: block;
    position: absolute;
    bottom: 1.6rem;
    left: 1.4rem;
    right: 1.4rem;
    z-index: 2;
  }
  .hero-mob-caption-pre {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.44rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.5rem;
  }
  .hero-mob-caption-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.08;
    margin: 0 0 0.35rem;
    letter-spacing: 0.01em;
  }
  .hero-mob-caption-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
  }

  /* Desktop hero-content: hidden on mobile */
  .hero-content {
    display: none !important;
  }

  /* Mobile bottom block */
  .hero-mob-bottom {
    display: block !important;
    background: #0a0a0a;
    padding: 1.6rem 1.4rem 2rem;
    border-bottom: 1px solid rgba(240, 232, 216, 0.07);
  }
  .hero-mob-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 300;
    color: rgba(240, 232, 216, 0.55);
    line-height: 1.55;
    margin: 0 0 1.4rem;
    letter-spacing: 0.01em;
  }
  .hero-mob-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .hero-mob-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.9rem 1.4rem;
    background: rgba(240, 232, 216, 0.92);
    color: #0a0a0a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.54rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
  }
  .hero-mob-cta-primary:hover { background: #f0e8d8; }

  .hero-mob-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.9rem 1.4rem;
    background: none;
    border: 1px solid rgba(240, 232, 216, 0.18);
    color: rgba(240, 232, 216, 0.65);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.54rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
  }
  .hero-mob-cta-secondary:hover {
    border-color: rgba(240, 232, 216, 0.38);
    color: rgba(240, 232, 216, 0.92);
  }
}


/* ────────────────────────────────────────────────────────────────────────
   5. ÉDITORIALE SECTION  #kd-editorial
   ──────────────────────────────────────────────────────────────────────── */
#kd-editorial {
  overflow: hidden;
}

.kd-ed-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
}

.kd-ed-media {
  position: relative;
  overflow: hidden;
}
.kd-ed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 0.6s ease;
}
#kd-editorial:hover .kd-ed-img {
  transform: scale(1.03);
}
.kd-ed-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(10,10,10,0.45) 100%);
  pointer-events: none;
}

.kd-ed-content {
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem;
}

.kd-ed-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.32);
  margin-bottom: 1.2rem;
}

.kd-ed-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
  color: rgba(240, 232, 216, 0.95);
  letter-spacing: 0.01em;
  margin: 0 0 1.4rem;
}

.kd-ed-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(240, 232, 216, 0.5);
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin: 0 0 2rem;
}

.kd-ed-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 232, 216, 0.2);
  padding-bottom: 3px;
  width: fit-content;
  transition: color 0.2s, border-color 0.2s;
}
.kd-ed-cta:hover {
  color: rgba(240, 232, 216, 0.95);
  border-color: rgba(240, 232, 216, 0.5);
}

/* Mobile: stacked layout */
@media (max-width: 768px) {
  .kd-ed-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .kd-ed-media {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .kd-ed-img-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(10,10,10,0.5) 100%);
  }
  .kd-ed-content {
    padding: 2rem 1.4rem 2.5rem;
  }
  .kd-ed-title {
    font-size: 2rem;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   6. CATEGORY CAROUSEL — mobile swipe improvements
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Show one card at a time, no gap peek */
  .kd-cat-viewport {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
  }
  .kd-cat-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 85vw !important;
  }
  /* Hide desktop arrows on mobile */
  .kd-cat-arrow {
    display: none !important;
  }
  /* Card image taller on mobile */
  .kd-cat-img-wrap {
    aspect-ratio: 3 / 4 !important;
  }
  /* Category name larger on mobile */
  .kd-cat-name {
    font-size: 1.35rem !important;
  }
  /* Description: single line, truncated */
  .kd-cat-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   7. PRODUCT SELECTION CAROUSEL — mobile improvements
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kd-sel-viewport {
    scroll-snap-type: x mandatory !important;
  }
  .kd-sel-card {
    scroll-snap-align: start;
    width: 75vw !important;
    flex-shrink: 0;
  }
  .kd-sel-arrow {
    display: none !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   8. REASSURANCE SECTION  #kd-reassurance
   ──────────────────────────────────────────────────────────────────────── */
#kd-reassurance {
  padding: 5rem 2rem;
  background: #060606;
  border-top: 1px solid rgba(240, 232, 216, 0.06);
}

.kd-reas-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.kd-reas-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.kd-reas-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.3);
  margin-bottom: 0.9rem;
}

.kd-reas-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  color: rgba(240, 232, 216, 0.88);
  letter-spacing: 0.02em;
  margin: 0 0 1.2rem;
}

.kd-reas-rule {
  width: 32px;
  height: 1px;
  background: rgba(240, 232, 216, 0.2);
  margin: 0 auto;
}

.kd-reas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.kd-reas-block {
  text-align: center;
  padding: 1.5rem 1rem;
}

.kd-reas-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 1.1rem;
  border: 1px solid rgba(240, 232, 216, 0.12);
  border-radius: 50%;
  color: rgba(240, 232, 216, 0.4);
}

.kd-reas-block-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(240, 232, 216, 0.85);
  letter-spacing: 0.02em;
  margin: 0 0 0.7rem;
}

.kd-reas-block-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(240, 232, 216, 0.38);
}

.kd-reas-cta-wrap {
  text-align: center;
}

.kd-reas-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2.2rem;
  border: 1px solid rgba(240, 232, 216, 0.2);
  color: rgba(240, 232, 216, 0.65);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.22s, color 0.22s, background 0.22s;
}
.kd-reas-cta:hover {
  border-color: rgba(240, 232, 216, 0.4);
  color: rgba(240, 232, 216, 0.95);
  background: rgba(240, 232, 216, 0.04);
}

/* Reassurance mobile */
@media (max-width: 960px) {
  .kd-reas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  #kd-reassurance {
    padding: 3.5rem 1.4rem;
  }
  .kd-reas-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
  .kd-reas-block {
    padding: 1.2rem 0.5rem;
  }
  .kd-reas-block-title {
    font-size: 0.95rem;
  }
  .kd-reas-block-text {
    font-size: 0.5rem;
  }
  .kd-reas-cta {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   9. FOOTER RESTRUCTURÉ  #kd-footer
   ──────────────────────────────────────────────────────────────────────── */
#kd-footer {
  background: #050505;
  border-top: 1px solid rgba(240, 232, 216, 0.07);
}

.kd-footer-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
}

/* Brand column */
.kd-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.kd-footer-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
}
.kd-footer-logo-keihal {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: rgba(240, 232, 216, 0.9);
  text-transform: uppercase;
  line-height: 1;
}
.kd-footer-logo-diamonds {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.44rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.35);
  line-height: 1;
}

.kd-footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(240, 232, 216, 0.35);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.kd-footer-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(37, 211, 102, 0.2);
  background: rgba(37, 211, 102, 0.05);
  color: rgba(130, 220, 160, 0.75);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  width: fit-content;
}
.kd-footer-wa-btn:hover {
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.38);
  color: rgba(200, 240, 210, 0.9);
}

/* Nav columns */
.kd-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.kd-footer-col h4,
.kd-footer-col-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.45);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(240, 232, 216, 0.07);
}

.kd-footer-col nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.kd-footer-col nav a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(240, 232, 216, 0.45);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.18s;
  line-height: 1.3;
}
.kd-footer-col nav a:hover {
  color: rgba(240, 232, 216, 0.85);
}

/* Footer bottom bar */
.kd-footer-bottom {
  border-top: 1px solid rgba(240, 232, 216, 0.05);
  padding: 1.2rem 2rem;
}

.kd-footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.kd-footer-copy {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  color: rgba(240, 232, 216, 0.2);
  margin: 0;
}

.kd-footer-legal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.kd-footer-legal a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  color: rgba(240, 232, 216, 0.2);
  text-decoration: none;
  transition: color 0.18s;
}
.kd-footer-legal a:hover { color: rgba(240, 232, 216, 0.5); }
.kd-footer-legal span {
  color: rgba(240, 232, 216, 0.12);
  font-size: 0.5rem;
}

/* Footer tablet */
@media (max-width: 960px) {
  .kd-footer-top {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 2.5rem;
    gap: 2.5rem;
  }
  .kd-footer-brand {
    text-align: center;
    align-items: center;
  }
  .kd-footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Footer mobile */
@media (max-width: 640px) {
  .kd-footer-top {
    padding: 2.5rem 1.4rem 2rem;
    gap: 2rem;
  }
  .kd-footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }
  /* Last col: full width */
  .kd-footer-col:last-child {
    grid-column: 1 / -1;
  }
  .kd-footer-bottom {
    padding: 1rem 1.4rem;
  }
  .kd-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  /* Extra bottom spacing for mobile bar */
  #kd-footer {
    padding-bottom: 0;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   10. CATEGORY PAGES — breadcrumb, description, product grid mobile
   ──────────────────────────────────────────────────────────────────────── */

/* Hero section mobile */
@media (max-width: 640px) {
  .kd-cp-hero {
    padding: 1.8rem 1.2rem 1.5rem !important;
  }
  .kd-cp-breadcrumb {
    font-size: 0.5rem !important;
    margin-bottom: 0.8rem !important;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(240, 232, 216, 0.35) !important;
  }
  .kd-cp-title {
    font-size: 2.2rem !important;
    line-height: 1.08 !important;
    margin-bottom: 0.8rem !important;
  }
  .kd-cp-sub {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    color: rgba(240, 232, 216, 0.5) !important;
  }
}

/* Bespoke choice mobile */
@media (max-width: 640px) {
  .kd-cp-choice-inner {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem 1.2rem;
  }
  .kd-cp-choice-opt {
    font-size: 0.5rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  .kd-cp-choice-sep {
    display: none;
  }
}

/* Product grid — 2 columns on mobile */
@media (max-width: 640px) {
  .product-grid.cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
    padding: 0 0.8rem !important;
  }
  .product-name {
    font-size: 0.85rem !important;
  }
  .product-category {
    font-size: 0.42rem !important;
  }
  .product-btn {
    font-size: 0.44rem !important;
    padding: 0.55rem 0.5rem !important;
    min-height: 38px;
  }
  /* Filter bar mobile improvements */
  .kd-cp-products {
    padding: 0 !important;
  }
  .kd-cp-products-header {
    padding: 0.8rem 1rem !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   11. BRAND INTRO — mobile stacked
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kd-bi-wrap {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .kd-bi-text {
    order: 2;
    padding: 2rem 1.4rem 2.5rem !important;
  }
  .kd-bi-media {
    order: 1;
    height: 280px !important;
  }
  .kd-bi-headline {
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   12. STATEMENT SECTION — mobile
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #statement-noir {
    padding: 3.5rem 1.4rem !important;
  }
  .statement-quote {
    font-size: 1.7rem !important;
    line-height: 1.15 !important;
  }
  .statement-cta {
    font-size: 0.52rem !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   13. PRODUIT PAGE — mobile improvements
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Sticky bottom bar for product CTAs */
  .kd-cfg-ctas {
    position: sticky !important;
    bottom: 68px; /* above mobile bar */
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(8px);
    padding: 1rem 1.2rem !important;
    margin: 0 -1.2rem !important;
    border-top: 1px solid rgba(240, 232, 216, 0.08) !important;
    z-index: 50;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   14. NAVBAR MOBILE — prevent overlap with bottom bar
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Drawer: ensure it doesn't go under the bottom bar */
  #kd-drawer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* WL panel / overlays */
  #kd-wl-panel,
  #kd-acct-modal {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   15. HORIZONTAL SCROLL IMPROVEMENTS — touch momentum
   ──────────────────────────────────────────────────────────────────────── */
.kd-cat-viewport,
.kd-sel-viewport {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kd-cat-viewport::-webkit-scrollbar,
.kd-sel-viewport::-webkit-scrollbar {
  display: none;
}


/* ────────────────────────────────────────────────────────────────────────
   16. HIDE OLD FOOTER if it conflicts
   ──────────────────────────────────────────────────────────────────────── */
/* The old footer element is replaced — hide any duplicate .footer-inner */
footer:not(#kd-footer) .footer-inner {
  display: none;
}



/* ════════════════════════════════════════════════════════════════════════════
   SESSION DE CONSEIL PRIVÉE — Redesign complet (Round 8)
   Layout : image éditoriale gauche (45%) / panneau formulaire droite (55%)
   Esthétique : fond noir, typographie premium, pastilles de dates, form dark
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
#session-conseil {
  display: grid !important;
  grid-template-columns: 45% 55% !important;
  min-height: 92vh !important;
  background: #0d0d0d !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── Colonne gauche : image éditoriale ────────────────────────────────────── */
.sc-media {
  position: relative !important;
  overflow: hidden !important;
}
.sc-media-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
}
.sc-media-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.05) 0%,
    rgba(13,13,13,0.55) 100%
  ) !important;
  pointer-events: none !important;
}
/* Badge flottant sur l'image */
.sc-media-badge {
  position: absolute !important;
  bottom: 2.2rem !important;
  left: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(13,13,13,0.75) !important;
  border: 1px solid rgba(184,152,106,0.35) !important;
  border-radius: 2px !important;
  padding: 0.55rem 0.9rem !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.sc-media-badge-icon {
  color: #b8986a !important;
  display: flex !important;
  align-items: center !important;
}
.sc-media-badge-text {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.75) !important;
}

/* ── Colonne droite : panneau formulaire ──────────────────────────────────── */
.sc-panel {
  overflow-y: auto !important;
  padding: 5.5rem 4.5rem 5.5rem 5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(184,152,106,0.3) transparent !important;
}
.sc-panel::-webkit-scrollbar { width: 3px; }
.sc-panel::-webkit-scrollbar-track { background: transparent; }
.sc-panel::-webkit-scrollbar-thumb { background: rgba(184,152,106,0.3); border-radius: 2px; }

.sc-panel-inner {
  max-width: 460px !important;
  width: 100% !important;
}

/* ── En-tête éditorial ────────────────────────────────────────────────────── */
.sc-eyebrow {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  color: #b8986a !important;
  margin-bottom: 1.6rem !important;
}
.sc-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  color: #f5f0e8 !important;
  margin: 0 0 1.6rem !important;
  letter-spacing: -0.01em !important;
}
.sc-title em {
  font-style: italic !important;
  color: #c9a86c !important;
}
.sc-rule {
  width: 38px !important;
  height: 1px !important;
  background: linear-gradient(90deg, #b8986a, rgba(184,152,106,0.3)) !important;
  margin-bottom: 2rem !important;
  border: none !important;
}

/* ── Texte intro ──────────────────────────────────────────────────────────── */
.sc-body {
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.88 !important;
  color: rgba(245,240,232,0.6) !important;
  margin: 0 0 2rem !important;
}

/* ── Points bénéfices ─────────────────────────────────────────────────────── */
.sc-benefits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0 !important;
}
.sc-benefit-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: rgba(245,240,232,0.5) !important;
  text-transform: uppercase !important;
  margin-bottom: 0.7rem !important;
  line-height: 1.5 !important;
}
.sc-benefit-icon {
  display: flex !important;
  align-items: center !important;
  color: #b8986a !important;
  flex-shrink: 0 !important;
}

/* ── Séparateurs ──────────────────────────────────────────────────────────── */
.sc-form-sep {
  height: 1px !important;
  background: rgba(255,255,255,0.07) !important;
  margin: 2.2rem 0 !important;
  border: none !important;
}

/* ── Composant de disponibilités ─────────────────────────────────────────── */
.sc-avail {
  margin-bottom: 0 !important;
}
.sc-avail-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.38) !important;
  margin-bottom: 1rem !important;
  display: block !important;
}
.sc-slots-label {
  margin-top: 1.5rem !important;
}

/* Pastilles de dates — défilement horizontal */
.sc-dates {
  display: flex !important;
  gap: 0.55rem !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0.6rem !important;
  scrollbar-width: none !important;
  margin-bottom: 0 !important;
}
.sc-dates::-webkit-scrollbar { display: none !important; }

.sc-date-card {
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.18rem !important;
  width: 58px !important;
  height: 72px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,0.03) !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
  outline: none !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.sc-date-card:hover {
  border-color: rgba(184,152,106,0.45) !important;
  background: rgba(184,152,106,0.07) !important;
}
.sc-date-card.active {
  border-color: #b8986a !important;
  background: rgba(184,152,106,0.11) !important;
}
.sc-date-card-day {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.38) !important;
  line-height: 1 !important;
}
.sc-date-card.active .sc-date-card-day {
  color: #b8986a !important;
}
.sc-date-card-num {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  color: rgba(245,240,232,0.7) !important;
  line-height: 1 !important;
}
.sc-date-card.active .sc-date-card-num {
  color: #f5f0e8 !important;
}
.sc-date-card-mon {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.28) !important;
  line-height: 1 !important;
}
.sc-date-card.active .sc-date-card-mon {
  color: rgba(184,152,106,0.8) !important;
}

/* Créneaux horaires */
.sc-slots-wrap {
  /* Masqué par défaut via style inline, shown par JS */
}
.sc-slots {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}
.sc-slot {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: rgba(245,240,232,0.5) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 2px !important;
  background: transparent !important;
  padding: 0.48rem 0.88rem !important;
  cursor: pointer !important;
  transition: border-color 0.18s, color 0.18s, background 0.18s !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.sc-slot:hover {
  border-color: rgba(184,152,106,0.5) !important;
  color: rgba(245,240,232,0.82) !important;
}
.sc-slot.active {
  border-color: #b8986a !important;
  background: rgba(184,152,106,0.13) !important;
  color: #f5f0e8 !important;
}

/* ── Formulaire client ────────────────────────────────────────────────────── */
.sc-form {
  display: flex !important;
  flex-direction: column !important;
}
.sc-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}
.sc-field {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 1.15rem !important;
}
.sc-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.4) !important;
  margin-bottom: 0.48rem !important;
  display: block !important;
}
.sc-input,
.sc-select,
.sc-textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 2px !important;
  color: #f5f0e8 !important;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 13px !important;
  padding: 0.72rem 0.95rem !important;
  outline: none !important;
  transition: border-color 0.2s, background 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.sc-input::placeholder,
.sc-textarea::placeholder {
  color: rgba(245,240,232,0.2) !important;
  font-size: 12px !important;
}
.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus {
  border-color: rgba(184,152,106,0.55) !important;
  background: rgba(255,255,255,0.055) !important;
}
.sc-textarea {
  resize: vertical !important;
  min-height: 82px !important;
  line-height: 1.65 !important;
}
.sc-select-wrap {
  position: relative !important;
}
.sc-select {
  padding-right: 2.4rem !important;
  cursor: pointer !important;
}
.sc-select option {
  background: #1c1c1c !important;
  color: #f5f0e8 !important;
}
.sc-select-arrow {
  position: absolute !important;
  right: 0.9rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: rgba(184,152,106,0.65) !important;
  display: flex !important;
  align-items: center !important;
}

/* Erreur de validation */
.sc-form-error {
  background: rgba(220,60,60,0.1) !important;
  border: 1px solid rgba(220,60,60,0.25) !important;
  border-radius: 2px !important;
  padding: 0.65rem 1rem !important;
  margin-bottom: 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.05em !important;
  color: rgba(255,140,140,0.9) !important;
}

/* Bouton de soumission */
.sc-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  width: 100% !important;
  background: #b8986a !important;
  color: #0d0d0d !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 1.05rem 1.6rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.22s, transform 0.18s !important;
  margin-top: 0.4rem !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.sc-submit:hover {
  background: #c9a86c !important;
}
.sc-submit:active {
  transform: scale(0.98) !important;
}
.sc-submit-arrow {
  transition: transform 0.2s !important;
  flex-shrink: 0 !important;
}
.sc-submit:hover .sc-submit-arrow {
  transform: translateX(4px) !important;
}

/* Note sous le bouton */
.sc-form-note {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: rgba(245,240,232,0.25) !important;
  text-align: center !important;
  margin: 0.9rem 0 0 !important;
  text-transform: uppercase !important;
}

/* ── Message de confirmation ──────────────────────────────────────────────── */
.sc-confirm {
  text-align: center !important;
  padding: 2.5rem 0 !important;
}
.sc-confirm-icon {
  color: #b8986a !important;
  margin-bottom: 1.4rem !important;
  display: flex !important;
  justify-content: center !important;
}
.sc-confirm-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.9rem !important;
  font-weight: 300 !important;
  color: #f5f0e8 !important;
  margin: 0 0 0.9rem !important;
  letter-spacing: 0.01em !important;
}
.sc-confirm-body {
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 13px !important;
  color: rgba(245,240,232,0.5) !important;
  line-height: 1.75 !important;
  margin: 0 0 1.8rem !important;
}
.sc-confirm-wa {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  background: #25d366 !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 0.75rem 1.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.sc-confirm-wa:hover {
  background: #22c55e !important;
}

/* ── Page hero anchors (liens de section) ─────────────────────────────────── */
.page-hero-anchors {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  margin-top: 1.6rem !important;
}
.pha-link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,0.45) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.pha-link:hover {
  color: #b8986a !important;
}
.pha-sep {
  font-size: 10px !important;
  color: rgba(0,0,0,0.2) !important;
}

/* ── Responsive — tablette (≤ 960px) ─────────────────────────────────────── */
@media (max-width: 960px) {
  #session-conseil {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* L'image passe en haut, compacte */
  .sc-media {
    height: 58vw !important;
    min-height: 260px !important;
    max-height: 440px !important;
    order: 1 !important;
  }
  .sc-panel {
    order: 2 !important;
    padding: 3rem 2.5rem 4.5rem !important;
    justify-content: flex-start !important;
  }
  .sc-panel-inner {
    max-width: 100% !important;
  }
}

/* ── Responsive — mobile (≤ 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  .sc-media {
    height: 68vw !important;
    min-height: 220px !important;
    max-height: 360px !important;
  }
  .sc-media-badge {
    bottom: 1.2rem !important;
    left: 1.2rem !important;
  }
  .sc-panel {
    padding: 2.4rem 1.4rem 6rem !important;
  }
  .sc-title {
    font-size: 2rem !important;
  }
  .sc-field-row {
    grid-template-columns: 1fr !important;
  }
  .sc-date-card {
    width: 52px !important;
    height: 66px !important;
  }
  .sc-date-card-num {
    font-size: 21px !important;
  }
  .page-hero-anchors {
    flex-wrap: wrap !important;
    gap: 0.4rem 0.75rem !important;
  }
}

/* ── Responsive — très petit (≤ 380px) ───────────────────────────────────── */
@media (max-width: 380px) {
  .sc-panel {
    padding: 2rem 1.1rem 6rem !important;
  }
  .sc-submit {
    font-size: 7.5px !important;
    letter-spacing: 0.2em !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 7 — Précisions manquantes
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero mobile topband ──────────────────────────────────────────────── */
.hero-mob-topband {
  display: none; /* desktop : caché */
}
@media (max-width: 640px) {
  .hero-mob-topband {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.6rem 1.4rem !important;
    background: #0a0a0a !important;
    border-bottom: 1px solid rgba(184,152,106,0.15) !important;
    z-index: 50 !important;
    order: -1 !important;
  }
  .hero-mob-topband-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: rgba(184,152,106,0.75) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ── 2. Hero mobile ratio 1:1 (remplace 4:5) ────────────────────────────── */
@media (max-width: 640px) {
  .hero-bg-video,
  .hero-video-frame {
    aspect-ratio: 1 / 1 !important;
  }
}

/* ── 3. Category page hero compactness ───────────────────────────────────── */
@media (max-width: 768px) {
  .kd-cp-hero {
    padding: 5rem 1.4rem 1.8rem !important;
    min-height: 0 !important;
  }
  .kd-cp-hero-eyebrow {
    font-size: 7.5px !important;
    margin-bottom: 0.6rem !important;
  }
  .kd-cp-hero-title {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
    margin-bottom: 0.5rem !important;
  }
  .kd-cp-hero-desc {
    font-size: 12.5px !important;
    margin-bottom: 0.8rem !important;
    line-height: 1.65 !important;
  }
}

/* ── 4. Product grid contrast & readability ──────────────────────────────── */
/* Titre de carte produit — plus de contraste */
.kd-card-name,
.product-name,
[class*="card"] h3,
[class*="card"] h4 {
  color: #1a1a1a !important;
}
/* Prix — lisibilité */
.kd-card-price,
.product-price,
[class*="price"] {
  color: #111 !important;
}
/* CTA card — fond sombre + texte clair */
.kd-card-cta,
.product-cta,
[class*="card"] .btn {
  background: #0d0d0d !important;
  color: #f5f0e8 !important;
  border: none !important;
}
.kd-card-cta:hover,
.product-cta:hover {
  background: #2a2a2a !important;
}

/* ── 5. Navbar — heart/selection icon styling ────────────────────────────── */
/* Rendre le badge de sélection plus visible */
#kd-wl-btn {
  position: relative !important;
}
#kd-wl-count {
  position: absolute !important;
  top: -2px !important;
  right: -4px !important;
  min-width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #b8986a !important;
  color: #0d0d0d !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 2px !important;
}
#kd-wl-count[aria-label="0 articles"],
#kd-wl-count:empty {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   CATEGORY PAGES — Espacement refait, rythme Messika (Round 8)
   Objectif : titres + filtres + grille dans le premier écran
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero intro — compact ──────────────────────────────────────────────── */
.kd-cp-hero {
  padding: 5rem 6vw 2.5rem !important;
  /* Supprime toutes les valeurs surdimensionnées précédentes  */
  min-height: 0 !important;
  height: auto !important;
}

/* Eyebrow — très proche du titre */
.kd-cp-eyebrow {
  font-size: 8px !important;
  letter-spacing: 0.38em !important;
  margin-bottom: 0.55rem !important;
}

/* Titre — taille réduite, marge basse compacte */
.kd-cp-title {
  font-size: clamp(1.9rem, 3vw, 2.8rem) !important;
  margin: 0 0 0.9rem !important;
  letter-spacing: 0.02em !important;
}

/* Description — directement sous le titre, compact */
.kd-cp-sub {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
  max-width: 540px !important;
  margin: 0 auto 2rem !important;
  color: rgba(255,255,255,0.35) !important;
}

/* ── 2. Breadcrumb fil d'Ariane (nouvelle nav .kd-cp-bc) ─────────────────── */
.kd-cp-bc {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.kd-cp-bc-link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.kd-cp-bc-link:hover {
  color: rgba(255,255,255,0.65) !important;
}
.kd-cp-bc-sep {
  font-size: 9px !important;
  color: rgba(255,255,255,0.14) !important;
  line-height: 1 !important;
}
.kd-cp-bc-current {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
}

/* Ancien breadcrumb "← Catalogue" — masqué (remplacé par .kd-cp-bc) */
.kd-cp-breadcrumb {
  display: none !important;
}

/* ── 3. Barre "Vous cherchez…" — compacte ────────────────────────────────── */
.kd-cp-choice {
  padding: 0.85rem 6vw !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.kd-cp-choice-inner {
  gap: 1rem !important;
}
.kd-cp-choice-label {
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.2) !important;
}
.kd-cp-choice-opt {
  font-size: 8.5px !important;
  letter-spacing: 0.18em !important;
}

/* ── 4. Section produits — remonte fortement ──────────────────────────────── */
.kd-cp-products {
  padding: 0 6vw 4rem !important;
  background: #0a0a0a !important;
}

/* "Collection" header — masqué (le filter bar remplace ce rôle) */
.kd-cp-products-header {
  display: none !important;
}

/* ── 5. Barre de filtres — intégrée, lignes fines, sans marge excessive ───── */
#kd-filter-bar,
.kd-filter-bar {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.kd-filter-bar-inner {
  padding: 0.85rem 0 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Toggle "Filtrer" — style cohérent */
.kd-filter-toggle {
  padding: 0.42rem 0.85rem !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
}

/* Count — affiché à droite */
.kd-filter-count {
  font-size: 8px !important;
  letter-spacing: 0.2em !important;
  color: rgba(255,255,255,0.28) !important;
}

/* Espace entre le filtre et les premières cartes */
.kd-cp-products .product-grid,
.kd-cp-products .product-grid.cat-grid {
  margin-top: 2rem !important;
}

/* ── 6. Cartes produits — contraste amélioré ─────────────────────────────── */
.kd-cp-products .product-name {
  color: rgba(255,255,255,0.9) !important;
}
.kd-cp-products .product-category {
  color: rgba(255,255,255,0.35) !important;
}
.kd-cp-products .product-btn {
  color: rgba(255,255,255,0.55) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.kd-cp-products .product-btn:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,0.45) !important;
}

/* ── 7. Responsive — tablette ≤ 960px ────────────────────────────────────── */
@media (max-width: 960px) {
  .kd-cp-hero {
    padding: 4.5rem 5vw 2rem !important;
  }
  .kd-cp-title {
    font-size: clamp(1.7rem, 5vw, 2.4rem) !important;
  }
  .kd-cp-sub {
    margin: 0 auto 1.6rem !important;
  }
  .kd-cp-products {
    padding: 0 4vw 3rem !important;
  }
}

/* ── 8. Responsive — mobile ≤ 640px ──────────────────────────────────────── */
@media (max-width: 640px) {
  .kd-cp-hero {
    padding: 4rem 1.4rem 2rem !important;
    text-align: center !important;
  }
  .kd-cp-title {
    font-size: 1.75rem !important;
    margin-bottom: 0.7rem !important;
  }
  .kd-cp-sub {
    font-size: 11.5px !important;
    line-height: 1.7 !important;
    margin: 0 auto 1.4rem !important;
    max-width: 100% !important;
  }
  .kd-cp-bc {
    gap: 0.4rem !important;
  }
  .kd-cp-bc-link,
  .kd-cp-bc-current {
    font-size: 7.5px !important;
  }
  .kd-cp-choice {
    padding: 0.7rem 1.4rem !important;
  }
  .kd-cp-choice-inner {
    gap: 0.6rem !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .kd-cp-products {
    padding: 0 0 3rem !important;
  }
  .kd-cp-products .product-grid,
  .kd-cp-products .product-grid.cat-grid {
    margin-top: 1.2rem !important;
    padding: 0 0.75rem 2rem !important;
  }
  .kd-filter-bar-inner {
    padding: 0.7rem 0 !important;
  }
  #kd-filter-bar,
  .kd-filter-bar {
    padding: 0 1.4rem !important;
  }
}

/* ── 9. Responsive — très petit ≤ 380px ──────────────────────────────────── */
@media (max-width: 380px) {
  .kd-cp-hero {
    padding: 3.5rem 1.1rem 1.8rem !important;
  }
  .kd-cp-title {
    font-size: 1.6rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGE CATALOGUE — Refonte éditoriale (Round 8)
   Titres centrés sur les images · Hero compact · Rendu premium
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero intro — fortement compressé ─────────────────────────────────── */
.kd-ce-hero {
  padding: 4.5rem 2rem 2rem !important;
  border-bottom: none !important;
}

.kd-ce-eyebrow {
  font-size: 7.5px !important;
  letter-spacing: 0.38em !important;
  margin-bottom: 0.55rem !important;
}

.kd-ce-title {
  font-size: clamp(1.9rem, 3vw, 2.9rem) !important;
  margin: 0 0 0.7rem !important;
  letter-spacing: 0.03em !important;
}

.kd-ce-sub {
  font-size: 12px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.3) !important;
  margin: 0 auto !important;
}

/* ── 2. Wrapper principal — remonte vers le haut ──────────────────────────── */
.kd-ce-main {
  padding: calc(var(--navbar-h, 88px) + 3.5rem) 2vw 6rem !important;
}

/* ── 3. Grille — resserrée ────────────────────────────────────────────────── */
.kd-ce-grid {
  gap: 3px !important;
  margin: 0 auto 2rem !important;
}

/* ── 4. Carte — supprimer le fond séparé en bas ───────────────────────────── */
.kd-ce-card {
  background: #0a0a0a !important;
}

/* ── 5. Image wrapper — conserve le ratio portrait ───────────────────────── */
.kd-ce-img-wrap {
  padding-bottom: 135% !important;  /* légèrement moins haut */
}

/* ── 6. Overlay sombre discret sur l'image ────────────────────────────────── */
.kd-ce-img-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.32) !important;
  transition: background 0.5s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.kd-ce-card-link:hover .kd-ce-img-overlay {
  background: rgba(0, 0, 0, 0.46) !important;
}

/* ── 7. Contenu overlay centré ────────────────────────────────────────────── */
.kd-ce-overlay-body {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1.5rem !important;
  text-align: center !important;
  pointer-events: none !important;
}

/* Nombre de créations — discret, au-dessus du titre */
.kd-ce-overlay-count {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.48) !important;
  display: block !important;
  order: 1 !important;
  transition: color 0.35s ease !important;
}

.kd-ce-card-link:hover .kd-ce-overlay-count {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Titre principal — MAJUSCULES, centré, élégant ── */
.kd-ce-overlay-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  order: 2 !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55) !important;
  transition: letter-spacing 0.5s ease !important;
}

.kd-ce-card-link:hover .kd-ce-overlay-name {
  letter-spacing: 0.28em !important;
}

/* CTA "Explorer" — invisible au repos, visible au hover ── */
.kd-ce-overlay-cta {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7px !important;
  font-weight: 400 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0) !important;
  display: block !important;
  order: 3 !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0) !important;
  padding-bottom: 3px !important;
  margin-top: 0.2rem !important;
  transition: color 0.45s ease 0.05s, border-color 0.45s ease 0.05s !important;
}

.kd-ce-card-link:hover .kd-ce-overlay-cta {
  color: rgba(255, 255, 255, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}

/* ── 8. Ancien bloc .kd-ce-info — masqué (éléments déplacés en overlay) ───── */
.kd-ce-info {
  display: none !important;
}

/* ── 9. Image hover zoom — légèrement réduit pour plus de subtilité ──────── */
.kd-ce-card-link:hover .kd-ce-img-wrap img {
  transform: scale(1.04) !important;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── 10. Bespoke link (fiançailles) — resserré ────────────────────────────── */
.kd-ce-bespoke {
  padding: 0.7rem 1rem !important;
  border-top: 0.5px solid rgba(255,255,255,0.06) !important;
}
.kd-ce-bespoke-label {
  font-size: 0.54rem !important;
  letter-spacing: 0.15em !important;
}

/* ── 11. Responsive — tablette ≤ 1100px ──────────────────────────────────── */
@media (max-width: 1100px) {
  .kd-ce-overlay-name {
    font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
  }
  .kd-ce-main {
    padding: calc(var(--navbar-h, 88px) + 2.5rem) 2vw 5rem !important;
  }
}

/* ── 12. Responsive — mobile ≤ 720px ──────────────────────────────────────── */
@media (max-width: 720px) {
  .kd-ce-main {
    padding: calc(var(--navbar-h, 68px) + 2rem) 10px 4rem !important;
  }
  .kd-ce-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kd-ce-img-wrap {
    padding-bottom: 115% !important;
  }
  .kd-ce-overlay-name {
    font-size: clamp(0.68rem, 3.5vw, 0.85rem) !important;
    letter-spacing: 0.14em !important;
  }
  .kd-ce-overlay-count {
    font-size: 6.5px !important;
  }
  .kd-ce-overlay-body {
    gap: 0.3rem !important;
    padding: 0.9rem !important;
  }
  /* CTA "Explorer" — visible en permanence sur mobile (pas de hover) */
  .kd-ce-overlay-cta {
    color: rgba(255, 255, 255, 0.48) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    font-size: 6px !important;
  }
}

/* ── 13. Responsive — petit mobile ≤ 420px ───────────────────────────────── */
@media (max-width: 420px) {
  .kd-ce-hero {
    padding: 3.5rem 1.1rem 1.4rem !important;
  }
  .kd-ce-title {
    font-size: 1.6rem !important;
  }
  .kd-ce-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .kd-ce-img-wrap {
    padding-bottom: 112% !important;
  }
  .kd-ce-overlay-name {
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1.3 !important;
  }
  .kd-ce-overlay-body {
    gap: 0.28rem !important;
    padding: 0.75rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGE HEADERS — Alignement gauche éditorial (Round 8)
   Remplace les titres centrés par une hiérarchie gauche premium,
   inspirée des maisons joaillières haut de gamme.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Inner wrapper : contraint le contenu, laisse le fond pleine largeur ──── */
.kd-ph-inner {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ══ 1. PAGE CATALOGUE — kd-ce-hero ══════════════════════════════════════════ */

.kd-ce-hero {
  text-align: left !important;
  padding: 4.5rem max(5vw, 2.5rem) 2rem !important;
}

/* Eyebrow compact, discret */
.kd-ce-eyebrow {
  text-align: left !important;
  margin-bottom: 0.5rem !important;
}

/* Titre gauche */
.kd-ce-title {
  text-align: left !important;
  margin: 0 0 0.7rem !important;
}

/* Description : alignée gauche, max-width limité */
.kd-ce-sub {
  text-align: left !important;
  margin: 0 0 1.4rem !important;
  max-width: 540px !important;
}

/* Main wrapper : padding cohérent avec le hero */
.kd-ce-main {
  padding: calc(var(--navbar-h, 88px) + 3.5rem) 2vw 6rem !important;
}

/* ══ 2. PAGES CATÉGORIES — kd-cp-hero ════════════════════════════════════════ */

.kd-cp-hero {
  text-align: left !important;
  padding: 4.5rem max(5vw, 2.5rem) 2.2rem !important;
}

.kd-cp-eyebrow {
  text-align: left !important;
  margin-bottom: 0.5rem !important;
}

.kd-cp-title {
  text-align: left !important;
  margin: 0 0 0.7rem !important;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem) !important;
}

.kd-cp-sub {
  text-align: left !important;
  margin: 0 0 1.4rem !important;
  max-width: 540px !important;
}

/* Breadcrumb : aligné gauche */
.kd-cp-bc {
  justify-content: flex-start !important;
}

/* Section produits : padding cohérent avec le hero */
.kd-cp-products {
  padding-left: max(5vw, 2.5rem) !important;
  padding-right: max(5vw, 2.5rem) !important;
}

/* Barre filtre : prend le padding du parent */
#kd-filter-bar,
.kd-filter-bar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Section "Vous cherchez…" : idem */
.kd-cp-choice {
  padding-left: max(5vw, 2.5rem) !important;
  padding-right: max(5vw, 2.5rem) !important;
}

/* ══ 3. PAGES INTÉRIEURES — page-hero ════════════════════════════════════════ */

.page-hero {
  text-align: left !important;
  padding: 4.5rem max(5vw, 2.5rem) 2rem !important;
}

/* Section label (eyebrow) */
.page-hero .section-label {
  text-align: left !important;
  margin-bottom: 0.5rem !important;
}

/* Titre principal : taille réduite, plus compact */
.page-hero-title {
  text-align: left !important;
  font-size: clamp(1.85rem, 2.8vw, 2.6rem) !important;
  margin: 0 0 0.8rem !important;
  letter-spacing: 0.02em !important;
}

/* Sous-titre / description */
.page-hero-subtitle {
  text-align: left !important;
  margin: 0 0 1.4rem !important;
  max-width: 540px !important;
}

/* Section anchors : flux gauche */
.page-hero-anchors {
  justify-content: flex-start !important;
  margin-top: 0.6rem !important;
}

/* ══ 4. FIL D'ARIANE .kd-ph-bc (catalogue + conseils) ════════════════════════ */
/* Réutilise les styles .kd-cp-bc-link / .kd-cp-bc-sep / .kd-cp-bc-current
   déjà définis pour les pages catégories. Seul le conteneur est nouveau. */

.kd-ph-bc {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* ══ 5. RESPONSIVE — tablette ≤ 960px ════════════════════════════════════════ */

@media (max-width: 960px) {
  .kd-ce-hero,
  .kd-cp-hero,
  .page-hero {
    padding: 4rem max(4vw, 1.8rem) 2rem !important;
  }
  .kd-cp-products {
    padding-left: max(4vw, 1.8rem) !important;
    padding-right: max(4vw, 1.8rem) !important;
  }
  .kd-cp-choice {
    padding-left: max(4vw, 1.8rem) !important;
    padding-right: max(4vw, 1.8rem) !important;
  }
  .kd-ce-main {
    padding-left: max(4vw, 1.8rem) !important;
    padding-right: max(4vw, 1.8rem) !important;
  }
}

/* ══ 6. RESPONSIVE — mobile ≤ 640px ══════════════════════════════════════════ */

@media (max-width: 640px) {
  .kd-ce-hero,
  .kd-cp-hero,
  .page-hero {
    padding: 3.8rem 1.4rem 1.8rem !important;
  }
  .kd-cp-title {
    font-size: 1.7rem !important;
  }
  .page-hero-title {
    font-size: 1.7rem !important;
  }
  .kd-ce-title {
    font-size: 1.75rem !important;
  }
  .kd-ce-sub,
  .kd-cp-sub,
  .page-hero-subtitle {
    max-width: 100% !important;
    font-size: 12px !important;
  }
  .kd-cp-products {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
    padding-top: 0 !important;
  }
  .kd-cp-choice {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
  .kd-ce-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ══ 7. RESPONSIVE — très petit ≤ 380px ══════════════════════════════════════ */

@media (max-width: 380px) {
  .kd-ce-hero,
  .kd-cp-hero,
  .page-hero {
    padding: 3.5rem 1.1rem 1.6rem !important;
  }
  .kd-cp-title,
  .page-hero-title,
  .kd-ce-title {
    font-size: 1.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO MOBILE — REDESIGN (Round 9)
   Suppression bande parasite + bloc CTA lourd
   Vidéo plein écran · slogan en overlay · CTA discret · barre icônes seules
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Bande parasite : supprimée définitivement ─────────────────────────── */
.hero-mob-topband,
.hero-mob-topband-text {
  display: none !important;
}

/* ── 2. Bloc bottom (deux gros CTAs) : supprimé ──────────────────────────── */
.hero-mob-bottom {
  display: none !important;
}

/* ── 3. Bottom bar : icônes uniquement (sans labels) ─────────────────────── */
@media (max-width: 768px) {
  .kd-mob-btn-label {
    display: none !important;
  }
  .kd-mob-btn {
    gap: 0 !important;
    padding: 0 8px !important;
  }
}

/* ── 4. Hero mobile — plein écran immersif ───────────────────────────────── */
@media (max-width: 640px) {

  /* Section hero : occupe 100% de la hauteur d'écran */
  #hero {
    position: relative !important;
    height: 100vh !important;     /* fallback navigateurs anciens */
    min-height: 560px !important;
    max-height: 940px !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    background: #080808 !important;
  }

  /* Video frame : couvre toute la section */
  .hero-video-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    overflow: hidden !important;
    flex-shrink: unset !important;
  }

  /* Vidéo : cover complet, cadrage centré légèrement haut */
  .hero-bg-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    display: block !important;
  }

  /* Overlay dégradé : efface vers le haut, dense en bas pour lisibilité */
  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.08)  0%,
      rgba(0,0,0,0.0)   28%,
      rgba(0,0,0,0.22)  55%,
      rgba(0,0,0,0.70)  78%,
      rgba(0,0,0,0.90) 100%
    ) !important;
    z-index: 1 !important;
  }

  /* Caption : centré, ancré au-dessus de la bottom bar */
  .hero-mob-caption {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: absolute !important;
    inset: auto !important;
    left: 2rem !important;
    right: 2rem !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 2.6rem) !important;
    z-index: 2 !important;
    gap: 0 !important;
    pointer-events: auto !important;
  }

  /* Eyebrow — très discret */
  .hero-mob-caption-pre {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    font-weight: 400 !important;
    letter-spacing: 0.35em !important;
    text-transform: uppercase !important;
    color: rgba(245, 240, 232, 0.4) !important;
    margin: 0 0 0.85rem !important;
  }

  /* Slogan "Votre bijou, votre personnalité." */
  .hero-mob-caption-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2rem, 8.5vw, 2.5rem) !important;
    font-weight: 300 !important;
    font-style: italic !important;
    line-height: 1.14 !important;
    letter-spacing: 0.01em !important;
    color: rgba(248, 244, 238, 0.97) !important;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5) !important;
    margin: 0 0 1.5rem !important;
  }

  /* Sous-label "en diamants certifiés" : masqué */
  .hero-mob-caption-sub {
    display: none !important;
  }

  /* CTA discret — underscore champagne */
  .hero-mob-caption-cta {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: rgba(196, 166, 110, 0.82) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(184, 152, 106, 0.35) !important;
    padding-bottom: 3px !important;
    transition: color 0.25s ease, border-color 0.25s ease !important;
  }
  .hero-mob-caption-cta:active {
    color: rgba(220, 192, 148, 1) !important;
    border-color: rgba(184, 152, 106, 0.68) !important;
  }

  /* Strip desktop : caché sur mobile */
  .hero-content {
    display: none !important;
  }
}

/* progressive enhancement : svh (iOS 16+, Chrome 108+) */
@supports (height: 1svh) {
  @media (max-width: 640px) {
    #hero {
      height: 100svh !important;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO MOBILE — REDESIGN (Round 10)
   Sandwich net : bande noire haute · vidéo plein centre · bande noire basse
   Remplace tous les blocs mobiles précédents (cascade = dernier gagne)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ A. NAVBAR MOBILE — bande haute noire, logo seul, rien d'autre ══════ */

@media (max-width: 640px) {

  /* Fond noir solide — même au scroll, même avec .scrolled */
  #navbar,
  #navbar.scrolled {
    background: #080808 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
    transition: none !important;
  }

  /* Navbar-inner → flex centré, logo seul dans le flux */
  .navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Contrôles gauche (burger) : invisibles MAIS dans le DOM */
  /* → kd-mobbar.js clique #kd-burger en JS, ça fonctionne toujours */
  .kd-nb-left {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Contrôles droite (FR/EN, icônes) : idem */
  .kd-nb-right {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Logo : seul élément visible, centré naturellement */
  .navbar-logo {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    text-align: center !important;
  }

  /* "KEIHAL" — ivoire sur fond noir */
  .navbar-logo-keihal {
    color: #f5f0e8 !important;
    font-size: clamp(1.1rem, 5.5vw, 1.4rem) !important;
    letter-spacing: 0.22em !important;
  }

  /* "DIAMONDS" — discret, espacement premium */
  .navbar-logo-diamonds {
    color: rgba(245, 240, 232, 0.42) !important;
    font-size: 8px !important;
    letter-spacing: 0.38em !important;
  }
}

/* ══ B. HERO MOBILE — encadré entre navbar et bottom bar ════════════════ */

@media (max-width: 640px) {

  /* Hero : commence juste sous la navbar, s'arrête juste au-dessus du bas */
  #hero {
    position: relative !important;
    display: block !important;
    margin-top: var(--navbar-h, 65px) !important;
    height: calc(100vh - var(--navbar-h, 65px) - 60px) !important;
    min-height: 400px !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #080808 !important;
    padding: 0 !important;
  }

  /* Video frame : couvre tout #hero */
  .hero-video-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    overflow: hidden !important;
    flex-shrink: unset !important;
  }

  /* Vidéo : cover, recadrée — bijou et visage bien visibles */
  .hero-bg-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center 22% !important;
    display: block !important;
    background: #080808 !important;
  }

  /* Overlay : transparent en haut, dense uniquement en bas */
  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.0)  0%,
      rgba(0,0,0,0.0)  32%,
      rgba(0,0,0,0.22) 55%,
      rgba(0,0,0,0.65) 78%,
      rgba(0,0,0,0.84) 100%
    ) !important;
    z-index: 1 !important;
  }

  /* Caption : ancré dans le bas du hero (relatif à #hero, pas à l'écran) */
  .hero-mob-caption {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: absolute !important;
    inset: auto !important;
    left: 1.8rem !important;
    right: 1.8rem !important;
    bottom: 2.4rem !important;
    z-index: 2 !important;
    gap: 0 !important;
    pointer-events: auto !important;
  }

  /* Eyebrow — micro, très discret */
  .hero-mob-caption-pre {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 6.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.36em !important;
    text-transform: uppercase !important;
    color: rgba(245, 240, 232, 0.34) !important;
    margin: 0 0 0.8rem !important;
  }

  /* Slogan */
  .hero-mob-caption-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.7rem, 7vw, 2.1rem) !important;
    font-weight: 300 !important;
    font-style: italic !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    color: rgba(248, 244, 238, 0.96) !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.42) !important;
    margin: 0 0 1.3rem !important;
  }

  /* Sous-label : masqué */
  .hero-mob-caption-sub {
    display: none !important;
  }

  /* CTA discret champagne underline */
  .hero-mob-caption-cta {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: rgba(196, 166, 110, 0.78) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(184, 152, 106, 0.32) !important;
    padding-bottom: 3px !important;
    transition: color 0.22s, border-color 0.22s !important;
  }
  .hero-mob-caption-cta:active {
    color: rgba(220, 192, 148, 1) !important;
    border-color: rgba(184, 152, 106, 0.65) !important;
  }

  /* Strip desktop : masqué sur mobile */
  .hero-content {
    display: none !important;
  }
}

/* ══ C. BOTTOM BAR — bande basse noire solide, icônes seules ════════════ */

@media (max-width: 768px) {
  #kd-mob-bar {
    background: #080808 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
  }
  .kd-mob-btn {
    align-items: center !important;
    justify-content: center !important;
  }
  /* WhatsApp : vert plus discret pour cohérence monochrome */
  .kd-mob-btn--wa {
    color: rgba(90, 195, 125, 0.52) !important;
  }
  .kd-mob-btn--wa:active {
    color: rgba(37, 211, 102, 0.88) !important;
  }
}

/* ══ D. SVH progressive enhancement (iOS 16+, Chrome 108+) ══════════════ */

@supports (height: 1svh) {
  @media (max-width: 640px) {
    #hero {
      height: calc(100svh - var(--navbar-h, 65px) - 60px) !important;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGUE MOBILE — REDESIGN
   Page "Notre Catalogue" · mobile ≤640px
   Grille 2 colonnes · cartes premium · bord perdu · texte centré
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Page background ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kd-ce-hero,
  .kd-ce-main,
  body:has(.kd-ce-hero) footer {
    background: #080808 !important;
  }
}

/* ── 1. Hero header : fond noir, padding navbar, texte gauche ───────────── */
@media (max-width: 640px) {

  .kd-ce-hero {
    padding-top: calc(var(--navbar-h, 65px) + 2rem) !important;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
    padding-bottom: 2rem !important;
    background: #080808 !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: none !important;
    text-align: left !important;
  }

  /* "Collections" : masqué */
  .kd-ce-eyebrow {
    display: none !important;
  }

  /* Titre — serif gauche, grand */
  .kd-ce-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2.1rem, 8.5vw, 2.6rem) !important;
    font-weight: 300 !important;
    color: #f5f0e8 !important;
    text-align: left !important;
    line-height: 1.08 !important;
    letter-spacing: 0.01em !important;
    margin: 0 0 0.8rem !important;
  }

  /* Description — gauche, gris ivoire */
  .kd-ce-sub {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: rgba(245, 240, 232, 0.4) !important;
    text-align: left !important;
    line-height: 1.72 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Breadcrumb : masqué */
  .kd-ph-bc {
    display: none !important;
  }
}

/* ── 2. Main : fond noir, padding avec clearance bottom bar ─────────────── */
@media (max-width: 640px) {

  .kd-ce-main {
    background: #080808 !important;
    padding: 1.6rem 1.2rem calc(72px + env(safe-area-inset-bottom, 0px) + 1.2rem) !important;
  }
}

/* ── 3. Grille : 2 colonnes, gap régulier ────────────────────────────────── */
@media (max-width: 640px) {

  .kd-ce-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }
}

/* ── 4. Carte : fond noir + bord perdu (padding interne) ─────────────────── */
@media (max-width: 640px) {

  .kd-ce-card {
    background: #080808 !important;
    padding: 3px !important;         /* bord perdu autour de l'image */
    border-radius: 1px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Supprime l'éventuel kd-ce-bespoke encore présent dans le DOM */
  .kd-ce-bespoke {
    display: none !important;
  }
}

/* ── 5. Image wrap : portrait 4:5, position relative pour l'overlay ─────── */
@media (max-width: 640px) {

  .kd-ce-img-wrap {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 128% !important;  /* ratio portrait ~4:5 */
    overflow: hidden !important;
    background: #111 !important;
  }

  /* Image : cover, légèrement assombrie */
  .kd-ce-img-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: brightness(0.7) !important;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
    display: block !important;
  }

  /* Touch feedback subtil */
  .kd-ce-card-link:active .kd-ce-img-wrap img {
    transform: scale(1.04) !important;
  }
}

/* ── 6. Overlay : voile sombre sur l'image ───────────────────────────────── */
@media (max-width: 640px) {

  .kd-ce-img-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.28) !important;
    z-index: 1 !important;
    transition: background 0.4s !important;
  }

  .kd-ce-card-link:active .kd-ce-img-overlay {
    background: rgba(0, 0, 0, 0.42) !important;
  }
}

/* ── 7. Overlay body : contenu centré verticalement ─────────────────────── */
@media (max-width: 640px) {

  .kd-ce-overlay-body {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.7rem !important;
    gap: 0 !important;
  }

  /* Compteur "22 créations" : masqué */
  .kd-ce-overlay-count {
    display: none !important;
  }

  /* Titre catégorie : uppercase centré, blanc ivoire */
  .kd-ce-overlay-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(0.78rem, 3.2vw, 0.95rem) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: rgba(255, 255, 255, 0.97) !important;
    text-align: center !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 0, 0, 0.4) !important;
    margin: 0 !important;
  }

  /* CTA "Explorer" : masqué */
  .kd-ce-overlay-cta {
    display: none !important;
  }
}

/* ── 8. Note bas de page : masquée sur mobile ───────────────────────────── */
@media (max-width: 640px) {

  .kd-ce-note {
    display: none !important;
  }
}

/* ── 9. Footer sur la page catalogue : fond noir ────────────────────────── */
@media (max-width: 640px) {

  /* Cible uniquement quand .kd-ce-main est présent */
  .kd-ce-main ~ footer,
  .kd-ce-main + footer {
    background: #080808 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
}

/* ── 10. Respect prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kd-anim-card,
  .kd-anim-text {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGES CATÉGORIE MOBILE — REDESIGN (cat-*.html)
   Grille produits premium · images uniformes (1:1) · filtre élégant
   S'applique à toutes les pages : fiançailles, alliances, boucles, etc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Background page ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kd-cp-products,
  .kd-cp-footer-cta {
    background: #080808 !important;
  }
}

/* ── 1. Hero — compact, gauche, épuré ───────────────────────────────────── */
@media (max-width: 640px) {

  .kd-cp-hero {
    padding-top: calc(var(--navbar-h, 65px) + 1.8rem) !important;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
    padding-bottom: 1.2rem !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: none !important;
    background: #080808 !important;
  }

  /* Eyebrow "Keihal" : masqué */
  .kd-cp-eyebrow {
    display: none !important;
  }

  /* Titre catégorie */
  .kd-cp-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.9rem, 7.5vw, 2.4rem) !important;
    font-weight: 300 !important;
    color: #f5f0e8 !important;
    text-align: left !important;
    line-height: 1.08 !important;
    letter-spacing: 0.01em !important;
    margin: 0 0 0.65rem !important;
  }

  /* Description */
  .kd-cp-sub {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 13.5px !important;
    font-weight: 300 !important;
    color: rgba(245, 240, 232, 0.34) !important;
    text-align: left !important;
    line-height: 1.72 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Breadcrumb : masqué */
  .kd-cp-bc {
    display: none !important;
  }
}

/* ── 2. Bloc "Vous cherchez…" : supprimé ───────────────────────────────── */
@media (max-width: 640px) {
  .kd-cp-choice {
    display: none !important;
  }
}

/* ── 3. Section produits ─────────────────────────────────────────────────── */
@media (max-width: 640px) {

  .kd-cp-products {
    padding: 0 1.2rem calc(72px + env(safe-area-inset-bottom, 0px) + 1.2rem) !important;
  }

  /* "Collection — 22 créations" : masqué (compte déjà dans la filter bar) */
  .kd-cp-products-header {
    display: none !important;
  }
}

/* ── 4. Filter bar redesign ─────────────────────────────────────────────── */
@media (max-width: 640px) {

  .kd-filter-bar {
    margin: 0 0 1.1rem !important;
    background: transparent !important;
  }

  .kd-filter-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.78rem 0 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: transparent !important;
  }

  .kd-filter-bar-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
  }

  /* Bouton "Filtrer" */
  .kd-filter-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42rem !important;
    background: none !important;
    border: 1px solid rgba(255,255,255,0.11) !important;
    color: rgba(245,240,232,0.62) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    padding: 0.46rem 0.82rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    outline: none !important;
    transition: border-color 0.2s, color 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .kd-filter-toggle svg {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 1.3 !important;
    flex-shrink: 0 !important;
  }

  /* Compteur "22 créations" */
  .kd-filter-count {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(245,240,232,0.22) !important;
  }

  /* Tags de filtre actif */
  .kd-active-tags {
    display: flex !important;
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
  }

  .kd-active-tag {
    background: rgba(184,152,106,0.1) !important;
    border: 1px solid rgba(184,152,106,0.28) !important;
    color: rgba(196,166,110,0.82) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 6.5px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 0.24rem 0.48rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    outline: none !important;
  }

  /* Drawer filtre */
  .kd-filter-drawer {
    background: #0c0c0c !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1) !important;
  }

  .kd-filter-drawer.open {
    max-height: 500px !important;
    overflow-y: auto !important;
  }

  .kd-filter-drawer-inner {
    padding: 1.3rem 0 !important;
  }

  .kd-filter-section {
    margin-bottom: 1.1rem !important;
  }

  .kd-filter-section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: rgba(245,240,232,0.24) !important;
    margin-bottom: 0.58rem !important;
  }

  .kd-filter-opts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.38rem !important;
  }

  .kd-filter-opt {
    background: none !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    color: rgba(245,240,232,0.48) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0.36rem 0.62rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    outline: none !important;
    transition: border-color 0.18s, color 0.18s, background 0.18s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .kd-filter-opt.active {
    border-color: rgba(184,152,106,0.48) !important;
    color: rgba(196,166,110,0.9) !important;
    background: rgba(184,152,106,0.08) !important;
  }

  /* Pied du drawer */
  .kd-filter-drawer-foot {
    display: flex !important;
    gap: 0.55rem !important;
    margin-top: 1.1rem !important;
    padding-top: 0.95rem !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
  }

  .kd-filter-reset {
    flex: 1 !important;
    background: none !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    color: rgba(245,240,232,0.35) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 0.54rem 0.75rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    outline: none !important;
  }

  .kd-filter-apply {
    flex: 2 !important;
    background: rgba(184,152,106,0.12) !important;
    border: 1px solid rgba(184,152,106,0.32) !important;
    color: rgba(196,166,110,0.88) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 0.54rem 0.75rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    outline: none !important;
  }
}

/* ── 5. Grille produits — 2 colonnes, gap régulier ─────────────────────── */
@media (max-width: 640px) {

  .product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }
}

/* ── 6. Carte produit — épurée ───────────────────────────────────────────── */
@media (max-width: 640px) {

  .product-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
}

/* ── 7. Image wrap — ratio 1:1 UNIFORME (clé de l'homogénéité) ──────────── */
@media (max-width: 640px) {

  .product-img-wrap {
    position: relative !important;
    width: 100% !important;
    /* padding-bottom: 100% = hauteur = largeur → carré parfait pour tous les produits */
    padding-bottom: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
    background: #111 !important;
    border-radius: 0 !important;
  }

  .product-img-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 0 !important;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .product-card:active .product-img-wrap img {
    transform: scale(1.04) !important;
  }
}

/* ── 8. Info produit ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  .product-info {
    padding: 0.6rem 0 0.85rem !important;
    background: transparent !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Nom — serif italic élégant */
  .product-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(0.88rem, 3.4vw, 1.05rem) !important;
    font-weight: 300 !important;
    font-style: italic !important;
    color: rgba(245, 240, 232, 0.88) !important;
    margin: 0 0 0.2rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
  }

  /* "Bague de fiançailles" dans chaque carte — redondant : masqué */
  .product-category {
    display: none !important;
  }

  /* CTA "Découvrir ce modèle" — réduit à un lien discret */
  .product-btn {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 6.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: rgba(184, 152, 106, 0.62) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(184, 152, 106, 0.2) !important;
    padding-bottom: 2px !important;
    margin-top: 0.15rem !important;
    align-self: flex-start !important;
    transition: color 0.2s, border-color 0.2s !important;
  }

  .product-btn:active {
    color: rgba(196, 166, 110, 0.95) !important;
    border-color: rgba(184, 152, 106, 0.5) !important;
  }
}

/* ── 9. Animations reveal — premium, douce ───────────────────────────────── */
@media (max-width: 640px) {

  /* Redéfinit la transition pour mobile — plus raffinée */
  .product-card.reveal {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* main.js ajoute .visible à l'entrée dans le viewport */
  .product-card.reveal.visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 10. Footer CTA ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  .kd-cp-footer-cta {
    background: #080808 !important;
    padding: 1.8rem 1.4rem !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    text-align: left !important;
  }

  .kd-cp-footer-cta p {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: rgba(245,240,232,0.3) !important;
    margin: 0 0 0.65rem !important;
    line-height: 1.55 !important;
  }

  .kd-cp-footer-cta a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7.5px !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: rgba(196,166,110,0.7) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(184,152,106,0.26) !important;
    padding-bottom: 2px !important;
  }
}

/* ── 11. Footer de la page : fond noir ───────────────────────────────────── */
@media (max-width: 640px) {
  .kd-cp-footer-cta + footer,
  .kd-cp-footer-cta ~ footer {
    background: #080808 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
  }
}

/* ── 12. prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   DESKTOP ADJUSTMENTS — DA round 11
   1. Section brand-intro : image droite agrandie
   2. Notre Sélection    : espace vertical réduit
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Brand Intro — image droite plus présente ──────────────────
   Principe : on passe .kd-bi-media en "position: relative; display: block"
   afin que l'image puisse se positionner en absolute et remplir toute
   la surface allouée (colonne droite – inset de 1.5 rem × 2.5 vw).
   object-fit: cover garantit l'absence de déformation.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {

  .kd-bi-media {
    display: block !important;           /* retire le flex-centering */
    position: relative !important;       /* ancre pour l'image absolue */
    padding: 0 !important;               /* supprime les grands paddings */
    overflow: hidden !important;
    background: #080808 !important;
  }

  .kd-bi-img {
    position: absolute !important;
    /* Respiration premium : 1.8 rem haut/bas · 2.5 vw droite · 1.2 rem gauche */
    top: 1.8rem !important;
    right: 2.5vw !important;
    bottom: 1.8rem !important;
    left: 1.2rem !important;
    /*
      Pour les <img>, width/height: auto + les 4 côtés = dimensions intrinsèques
      (bug navigateur sur replaced elements). On calcule EXPLICITEMENT :
    */
    width: calc(100% - 1.2rem - 2.5vw) !important;
    height: calc(100% - 3.6rem) !important;
    max-width: none !important;
    max-height: none !important;
    /* Remplissage sans déformation */
    object-fit: cover !important;
    object-position: center 20% !important;
    transition: opacity 0.55s ease !important;
  }

  /* Hover doux conservé */
  .kd-bi-media:hover .kd-bi-img {
    opacity: 0.90 !important;
  }
}

/* ── 2. Notre Sélection — réduire l'excès d'espace vertical ──────
   Avant : padding 8 rem 0 9 rem / header margin-bottom 4.5 rem
   Après : padding 5 rem 0 6.5 rem / header margin-bottom 3 rem
   On garde la respiration luxe — on retire seulement l'excès.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {

  #kd-selection {
    padding-top: 5rem !important;
    padding-bottom: 6.5rem !important;
  }

  .kd-sel-header {
    margin-bottom: 3rem !important;
  }

}


/* ════════════════════════════════════════════════════════════════
   CONFIGURATEUR PRODUIT LUXE — kd-configurator.js  v1.0
   Page produit : layout, sélecteurs, résumé, CTAs
   ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════
   1. PAGE PRODUIT — Layout
   ══════════════════════════ */

/* Fil d'Ariane */
.kd-pd-breadcrumb-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: calc(var(--navbar-h, 80px) + 1.2rem) 5vw 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.22) !important;
  background: #080808 !important;
}
.kd-pd-breadcrumb-bar a {
  color: rgba(255,255,255,0.28) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.kd-pd-breadcrumb-bar a:hover {
  color: rgba(255,255,255,0.60) !important;
}
.kd-pd-bc-current {
  color: rgba(255,255,255,0.50) !important;
}

/* Layout principal 2 colonnes */
.kd-pd-main {
  display: grid !important;
  grid-template-columns: 52% 48% !important;
  min-height: calc(100vh - var(--navbar-h, 80px)) !important;
  background: #080808 !important;
}

/* ── Colonne média (gauche) ── */
.kd-pd-media {
  position: sticky !important;
  top: var(--navbar-h, 80px) !important;
  height: calc(100vh - var(--navbar-h, 80px)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 3rem 3vw 3rem 5vw !important;
  background: #060606 !important;
  border-right: 0.5px solid rgba(255,255,255,0.05) !important;
  overflow: hidden !important;
}

/* Wrapper image principale */
.kd-pd-img-wrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Image produit */
.kd-pd-img {
  display: block !important;
  max-height: 72vh !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: opacity 0.3s ease !important;
}

/* Galerie de miniatures */
.kd-pd-gallery {
  display: flex !important;
  gap: 8px !important;
  margin-top: 1.4rem !important;
  flex-shrink: 0 !important;
}
.kd-pd-gallery-thumb {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  opacity: 0.38 !important;
  cursor: pointer !important;
  border: 0.5px solid transparent !important;
  transition: opacity 0.22s ease, border-color 0.22s ease !important;
}
.kd-pd-gallery-thumb:hover,
.kd-pd-gallery-thumb.active {
  opacity: 1 !important;
  border-color: rgba(184,152,106,0.42) !important;
}

/* Badge certification */
.kd-pd-cert-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 1.4rem !important;
  flex-shrink: 0 !important;
}
.kd-pd-cert-icon {
  color: rgba(184,152,106,0.55) !important;
}
.kd-pd-cert-text {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.22) !important;
}

/* ── Colonne info (droite) ── */
.kd-pd-info {
  padding: 3.5rem 5vw 6rem 4vw !important;
  overflow-y: auto !important;
  background: #080808 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Catégorie */
.kd-pd-cat-label {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: rgba(184,152,106,0.60) !important;
  margin-bottom: 1rem !important;
}

/* Nom du produit */
.kd-pd-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
  color: rgba(255,255,255,0.92) !important;
  margin: 0 0 1.4rem !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

/* Filet */
.kd-pd-rule {
  width: 28px !important;
  height: 0.5px !important;
  background: rgba(255,255,255,0.15) !important;
  margin-bottom: 1.6rem !important;
  flex-shrink: 0 !important;
}

/* Description */
.kd-pd-desc {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 0.78rem !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,0.38) !important;
  margin: 0 0 2rem !important;
  max-width: 46ch !important;
}

/* Caractéristiques */
.kd-pd-chars {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.9rem 1.5rem !important;
  margin-bottom: 2.2rem !important;
  padding: 1.4rem 1.6rem !important;
  border: 0.5px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.015) !important;
}
.kd-pd-char-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.kd-pd-char-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.54rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.22) !important;
}
.kd-pd-char-val {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.58) !important;
  font-style: italic !important;
}

/* ── Métaux ── */
.kd-pd-metals {
  margin-bottom: 2.2rem !important;
}
.kd-pd-metals-label {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.30) !important;
  margin-bottom: 1rem !important;
}
.kd-pd-metals-options {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Pastille métal */
.kd-pd-metal-opt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  position: relative !important;
}
.kd-pd-metal-circle {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid transparent !important;
  transition: border-color 0.22s ease, transform 0.22s ease !important;
}
.kd-pd-metal-opt:hover .kd-pd-metal-circle {
  transform: scale(1.08) !important;
}
.kd-pd-metal-opt.active .kd-pd-metal-circle {
  border-color: rgba(184,152,106,0.70) !important;
  box-shadow: 0 0 0 2px rgba(184,152,106,0.18) !important;
}
.kd-pd-metal-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  white-space: nowrap !important;
  transition: color 0.22s ease !important;
}
.kd-pd-metal-opt.active .kd-pd-metal-name {
  color: rgba(196,166,110,0.80) !important;
}
.kd-pd-metal-selected {
  display: block !important;
  margin-top: 0.7rem !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.78rem !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.44) !important;
}

/* Note bas de page */
.kd-pd-note {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.18) !important;
  letter-spacing: 0.10em !important;
  margin-top: 2rem !important;
  padding-top: 1.6rem !important;
  border-top: 0.5px solid rgba(255,255,255,0.06) !important;
}

/* ══════════════════════════
   2. CONFIGURATEUR — Blocs
   ══════════════════════════ */

.kd-cfg {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Bloc générique */
.kd-cfg-block {
  margin-bottom: 2rem !important;
}

/* Label de section */
.kd-cfg-label {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  margin-bottom: 0.9rem !important;
}

/* ══════════════════════════
   3. BOUTONS D'OPTIONS
   ══════════════════════════ */

.kd-cfg-opts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.kd-cfg-opt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.44) !important;
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.10) !important;
  cursor: pointer !important;
  transition: color 0.20s ease, border-color 0.20s ease, background 0.20s ease !important;
  white-space: nowrap !important;
}
.kd-cfg-opt:hover {
  color: rgba(255,255,255,0.72) !important;
  border-color: rgba(255,255,255,0.24) !important;
}
.kd-cfg-opt.active {
  color: rgba(196,166,110,0.92) !important;
  border-color: rgba(184,152,106,0.46) !important;
  background: rgba(184,152,106,0.06) !important;
}

/* ══════════════════════════
   4. FORMES DE PIERRE
   ══════════════════════════ */

.kd-cfg-shapes {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 7px !important;
}

.kd-cfg-shape {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0.75rem 0.3rem 0.65rem !important;
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.09) !important;
  cursor: pointer !important;
  transition: border-color 0.20s ease, background 0.20s ease !important;
}
.kd-cfg-shape:hover {
  border-color: rgba(255,255,255,0.22) !important;
}
.kd-cfg-shape.active {
  border-color: rgba(184,152,106,0.46) !important;
  background: rgba(184,152,106,0.055) !important;
}
.kd-cfg-shape-icon {
  width: 22px !important;
  height: 22px !important;
  color: rgba(255,255,255,0.38) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.20s ease !important;
}
.kd-cfg-shape-icon svg {
  width: 100% !important;
  height: 100% !important;
}
.kd-cfg-shape.active .kd-cfg-shape-icon {
  color: rgba(196,166,110,0.82) !important;
}
.kd-cfg-shape-lbl {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.50rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.30) !important;
  transition: color 0.20s ease !important;
  white-space: nowrap !important;
}
.kd-cfg-shape.active .kd-cfg-shape-lbl {
  color: rgba(196,166,110,0.80) !important;
}

/* ══════════════════════════
   5. DROPDOWN TAILLE / LONGUEUR
   ══════════════════════════ */

.kd-cfg-size-wrap { width: 100% !important; }

.kd-cfg-select {
  width: 100% !important;
  padding: 0.65rem 2.4rem 0.65rem 1rem !important;
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.56) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 10px !important;
  transition: border-color 0.22s ease !important;
}
.kd-cfg-select:focus {
  outline: none !important;
  border-color: rgba(184,152,106,0.38) !important;
}
.kd-cfg-select option {
  background: #111 !important;
  color: rgba(255,255,255,0.70) !important;
}
.kd-cfg-size-note {
  margin-top: 0.75rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  color: rgba(255,255,255,0.20) !important;
  letter-spacing: 0.10em !important;
}
.kd-cfg-guide-link {
  color: rgba(184,152,106,0.52) !important;
  text-decoration: none !important;
  transition: color 0.20s ease !important;
}
.kd-cfg-guide-link:hover {
  color: rgba(196,166,110,0.82) !important;
}

/* ══════════════════════════
   6. CHAMPS INPUT / TEXTAREA
   ══════════════════════════ */

.kd-cfg-engraving-wrap { width: 100% !important; }

.kd-cfg-input {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.72) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.94rem !important;
  font-style: italic !important;
  padding: 0.5rem 0 !important;
  outline: none !important;
  transition: border-color 0.22s ease !important;
  box-sizing: border-box !important;
}
.kd-cfg-input::placeholder {
  color: rgba(255,255,255,0.18) !important;
  font-style: italic !important;
}
.kd-cfg-input:focus {
  border-color: rgba(184,152,106,0.38) !important;
}

.kd-cfg-textarea {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.68) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.88rem !important;
  font-style: italic !important;
  padding: 0.75rem 1rem !important;
  outline: none !important;
  resize: none !important;
  transition: border-color 0.22s ease !important;
  box-sizing: border-box !important;
  line-height: 1.7 !important;
}
.kd-cfg-textarea::placeholder {
  color: rgba(255,255,255,0.16) !important;
  font-style: italic !important;
}
.kd-cfg-textarea:focus {
  border-color: rgba(184,152,106,0.34) !important;
}

/* Footer gravure */
.kd-cfg-engraving-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 0.55rem !important;
}
.kd-cfg-hint {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.54rem !important;
  color: rgba(255,255,255,0.18) !important;
  letter-spacing: 0.10em !important;
}
.kd-cfg-char-count {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  color: rgba(255,255,255,0.16) !important;
  letter-spacing: 0.08em !important;
  flex-shrink: 0 !important;
}
.kd-cfg-note-small {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.55rem !important;
  color: rgba(255,255,255,0.20) !important;
  letter-spacing: 0.10em !important;
  margin-top: 0.7rem !important;
}

/* ══════════════════════════
   7. RÉSUMÉ DES CHOIX
   ══════════════════════════ */

.kd-cfg-summary {
  margin: 1.6rem 0 2rem !important;
}
.kd-cfg-sum-inner {
  padding: 1.3rem 1.5rem !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.018) !important;
}
.kd-cfg-sum-title {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.54rem !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.20) !important;
  margin-bottom: 0.9rem !important;
}
.kd-cfg-sum-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 0.45rem !important;
}
.kd-cfg-sum-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 1rem !important;
}
.kd-cfg-sum-k {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.54rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.24) !important;
  flex-shrink: 0 !important;
}
.kd-cfg-sum-v {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.82rem !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.62) !important;
  text-align: right !important;
}

/* ══════════════════════════
   8. BOUTONS CTA
   ══════════════════════════ */

.kd-cfg-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 0.4rem !important;
}

/* Bouton sélection privée */
.kd-cfg-sel-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 0.88rem 1.4rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.68) !important;
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.16) !important;
  cursor: pointer !important;
  transition: color 0.24s ease, border-color 0.24s ease, background 0.24s ease !important;
}
.kd-cfg-sel-btn:hover {
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.36) !important;
  background: rgba(255,255,255,0.04) !important;
}
.kd-cfg-sel-btn.added {
  color: rgba(196,166,110,0.90) !important;
  border-color: rgba(184,152,106,0.38) !important;
  background: rgba(184,152,106,0.05) !important;
}

/* Bouton WhatsApp */
.kd-cfg-wa-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 0.88rem 1.4rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #080808 !important;
  background: rgba(196,166,110,0.88) !important;
  border: 0.5px solid rgba(196,166,110,0.92) !important;
  cursor: pointer !important;
  transition: background 0.24s ease, border-color 0.24s ease !important;
}
.kd-cfg-wa-btn:hover {
  background: rgba(196,166,110,1) !important;
  border-color: rgba(196,166,110,1) !important;
}

/* ══════════════════════════
   9. PRODUITS SIMILAIRES
   ══════════════════════════ */

.kd-pd-related {
  background: #060606 !important;
  padding: 5rem 5vw 7rem !important;
  border-top: 0.5px solid rgba(255,255,255,0.05) !important;
}
.kd-pd-related-header {
  margin-bottom: 3rem !important;
}
.kd-pd-related-eyebrow {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.24) !important;
}
.kd-pd-related-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}
.kd-pd-related-card {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}
.kd-pd-related-img-wrap {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  margin-bottom: 1rem !important;
}
.kd-pd-related-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.55s ease !important;
}
.kd-pd-related-card:hover .kd-pd-related-img-wrap img {
  transform: scale(1.04) !important;
}
.kd-pd-related-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: rgba(255,255,255,0.60) !important;
  transition: color 0.22s ease !important;
}
.kd-pd-related-card:hover .kd-pd-related-name {
  color: rgba(255,255,255,0.88) !important;
}

/* ══════════════════════════
   10. MOBILE ≤ 768px
   ══════════════════════════ */

@media (max-width: 768px) {

  /* Layout : empilement vertical */
  .kd-pd-main {
    display: block !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  /* Média : hauteur fixe, image centrée */
  .kd-pd-media {
    position: relative !important;
    top: auto !important;
    height: 62vw !important;
    min-height: 260px !important;
    max-height: 380px !important;
    padding: 1.5rem 5vw !important;
    border-right: none !important;
    border-bottom: 0.5px solid rgba(255,255,255,0.05) !important;
  }

  .kd-pd-img {
    max-height: 100% !important;
    width: auto !important;
  }

  /* Miniatures et badge cachés sur mobile */
  .kd-pd-gallery { display: none !important; }
  .kd-pd-cert-badge { margin-top: 0.8rem !important; }

  /* Info panel */
  .kd-pd-info {
    padding: 2rem 5vw 3rem !important;
  }

  /* Caractéristiques : 1 colonne */
  .kd-pd-chars {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Formes : 5 par ligne → 5 colonnes (icônes petites) */
  .kd-cfg-shapes {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px !important;
  }
  .kd-cfg-shape { padding: 0.6rem 0.2rem 0.5rem !important; }
  .kd-cfg-shape-icon { width: 18px !important; height: 18px !important; }
  .kd-cfg-shape-lbl { font-size: 0.45rem !important; }

  /* Breadcrumb */
  .kd-pd-breadcrumb-bar {
    padding: calc(var(--navbar-h, 65px) + 0.8rem) 5vw 0 !important;
  }

  /* Produits similaires */
  .kd-pd-related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kd-pd-img { transition: none !important; }
  .kd-cfg-sel-btn,
  .kd-cfg-wa-btn,
  .kd-cfg-opt,
  .kd-cfg-shape { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   KEIHAL DIAMONDS — Commander page premium redesign + spacing fix
   Appended 2026-04 — overrides all earlier conflicting rules
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Page hero spacing fix (beats the 4.5rem rule at ~line 14340) ── */
.page-hero,
.kd-ce-hero,
.kd-cp-hero {
  padding-top: 8rem !important;
}
@media (max-width: 768px) {
  .page-hero,
  .kd-ce-hero,
  .kd-cp-hero {
    padding-top: 5.5rem !important;
  }
}
@media (max-width: 480px) {
  .page-hero,
  .kd-ce-hero,
  .kd-cp-hero {
    padding-top: 5rem !important;
  }
}

/* ── 2. Animation keyframes ── */
@keyframes kd-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kd-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kd-anim-up  { animation: kd-fadeUp  0.55s cubic-bezier(0.22,1,0.36,1) both !important; }
.kd-anim-in  { animation: kd-fadeIn  0.40s ease both !important; }
.kd-anim-delay-1 { animation-delay: 0.08s !important; }
.kd-anim-delay-2 { animation-delay: 0.16s !important; }
.kd-anim-delay-3 { animation-delay: 0.24s !important; }
.kd-anim-delay-4 { animation-delay: 0.32s !important; }
.kd-anim-delay-5 { animation-delay: 0.40s !important; }

/* ── 3. Wizard Timeline (stepper) premium ── */
.wiz-timeline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 auto 3rem !important;
  max-width: 420px !important;
  position: relative !important;
  padding: 0 1rem !important;
}
.wiz-tl-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.wiz-tl-dot {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(196,166,110,0.2) !important;
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.28) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.35s ease !important;
}
.wiz-tl-step.active .wiz-tl-dot {
  border-color: rgba(196,166,110,0.8) !important;
  background: rgba(196,166,110,0.12) !important;
  color: rgba(196,166,110,0.95) !important;
  box-shadow: 0 0 0 5px rgba(196,166,110,0.07) !important;
}
.wiz-tl-step.done .wiz-tl-dot {
  border-color: rgba(196,166,110,0.45) !important;
  background: rgba(196,166,110,0.07) !important;
  color: rgba(196,166,110,0.55) !important;
}
.wiz-tl-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.25) !important;
  transition: color 0.35s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.wiz-tl-step.active .wiz-tl-label { color: rgba(196,166,110,0.85) !important; }
.wiz-tl-step.done  .wiz-tl-label  { color: rgba(196,166,110,0.45) !important; }
.wiz-tl-line {
  flex: 1 1 auto !important;
  height: 1px !important;
  background: rgba(196,166,110,0.12) !important;
  margin-bottom: 1.4rem !important;
  min-width: 40px !important;
  max-width: 90px !important;
  transition: background 0.4s ease !important;
}
.wiz-tl-line.done { background: rgba(196,166,110,0.45) !important; }

/* ── 4. Wizard step header ── */
.wiz-step-header { margin-bottom: 2rem !important; }
.wiz-step-eyebrow {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(196,166,110,0.65) !important;
  margin-bottom: 0.55rem !important;
}
.wiz-step-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.55rem, 4vw, 2.1rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.92) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* ── 5. Model choice cards (A / B selection) ── */
.kd-cmd-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  margin-bottom: 2.5rem !important;
}
.kd-cmd-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.45rem !important;
  padding: 1.4rem 1.2rem 2.2rem !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden !important;
}
.kd-cmd-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(196,166,110,0.06) 0%, transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}
.kd-cmd-card:hover {
  border-color: rgba(196,166,110,0.3) !important;
  background: rgba(196,166,110,0.04) !important;
}
.kd-cmd-card:hover::before { opacity: 1 !important; }
.kd-cmd-card.active {
  border-color: rgba(196,166,110,0.65) !important;
  background: rgba(196,166,110,0.07) !important;
  box-shadow: 0 0 0 1px rgba(196,166,110,0.18), inset 0 1px 0 rgba(196,166,110,0.12) !important;
}
.kd-cmd-card.active::before { opacity: 1 !important; }
.kd-cmd-card-letter {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.7rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(196,166,110,0.45) !important;
  line-height: 1 !important;
  transition: color 0.3s ease !important;
}
.kd-cmd-card.active .kd-cmd-card-letter { color: rgba(196,166,110,0.9) !important; }
.kd-cmd-card-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.8) !important;
  transition: color 0.3s ease !important;
  line-height: 1.3 !important;
}
.kd-cmd-card.active .kd-cmd-card-title { color: #fff !important; }
.kd-cmd-card-desc {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.35) !important;
  line-height: 1.55 !important;
}
.kd-cmd-card-arrow {
  position: absolute !important;
  right: 1rem !important;
  bottom: 0.9rem !important;
  font-size: 1rem !important;
  color: rgba(196,166,110,0.28) !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  font-style: normal !important;
}
.kd-cmd-card.active .kd-cmd-card-arrow,
.kd-cmd-card:hover  .kd-cmd-card-arrow {
  color: rgba(196,166,110,0.75) !important;
  transform: translateX(3px) !important;
}
@media (max-width: 560px) {
  .kd-cmd-cards {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ── 6. Category filter cards (icon + label grid) ── */
.kd-cmd-cats {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.65rem !important;
  margin-bottom: 0 !important;
}
.kd-cmd-cat-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  padding: 1rem 0.4rem !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
}
.kd-cmd-cat-btn:hover {
  border-color: rgba(196,166,110,0.35) !important;
  background: rgba(196,166,110,0.05) !important;
}
.kd-cmd-cat-btn.active {
  border-color: rgba(196,166,110,0.65) !important;
  background: rgba(196,166,110,0.09) !important;
}
.kd-cmd-cat-icon {
  width: 30px !important;
  height: 30px !important;
  stroke: rgba(196,166,110,0.55) !important;
  fill: none !important;
  stroke-width: 1.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.25s ease !important;
}
.kd-cmd-cat-btn.active .kd-cmd-cat-icon,
.kd-cmd-cat-btn:hover  .kd-cmd-cat-icon {
  stroke: rgba(196,166,110,0.95) !important;
}
.kd-cmd-cat-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  text-align: center !important;
  line-height: 1.35 !important;
  transition: color 0.25s ease !important;
}
.kd-cmd-cat-btn.active .kd-cmd-cat-label,
.kd-cmd-cat-btn:hover  .kd-cmd-cat-label {
  color: rgba(196,166,110,0.9) !important;
}
@media (max-width: 600px) {
  .kd-cmd-cats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
}
@media (max-width: 380px) {
  .kd-cmd-cats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 7. Mini-grid model cards ── */
.catalogue-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.7rem !important;
  margin-top: 1rem !important;
}
.catalogue-mini-item {
  position: relative !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
  aspect-ratio: 1 / 1 !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}
.catalogue-mini-item:hover {
  border-color: rgba(196,166,110,0.38) !important;
  transform: translateY(-2px) !important;
}
.catalogue-mini-item.selected {
  border-color: rgba(196,166,110,0.78) !important;
  box-shadow: 0 0 0 1px rgba(196,166,110,0.28) !important;
}
.catalogue-mini-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.catalogue-mini-item:hover img { transform: scale(1.05) !important; }
.mini-item-name {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1.6rem 0.5rem 0.45rem !important;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.7rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.88) !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  pointer-events: none !important;
}
@media (max-width: 600px) {
  .catalogue-mini-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* ── 8. Wizard hint text ── */
.wiz-hint {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.35) !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

/* ── 9. Form groups — Step 2 ── */
.form-group {
  margin-bottom: 1.8rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding-bottom: 1.8rem !important;
}
.form-group:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.form-label {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 1rem !important;
}
.radio-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
}
.radio-option {
  display: flex !important;
  align-items: center !important;
}
.radio-option input[type="radio"] {
  display: none !important;
}
.radio-option label {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.5rem 1rem !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.5) !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}
.radio-option label:hover {
  border-color: rgba(196,166,110,0.35) !important;
  color: rgba(255,255,255,0.8) !important;
}
.radio-option input[type="radio"]:checked + label {
  border-color: rgba(196,166,110,0.65) !important;
  background: rgba(196,166,110,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
}
.radio-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* ── 10. Gravure toggle ── */
.toggle-btn-group {
  display: flex !important;
  gap: 0.5rem !important;
}
.toggle-yes-no {
  padding: 0.5rem 1.4rem !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 3px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.42) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.toggle-yes-no:hover {
  border-color: rgba(196,166,110,0.3) !important;
  color: rgba(255,255,255,0.75) !important;
}
.toggle-yes-no.active {
  border-color: rgba(196,166,110,0.65) !important;
  background: rgba(196,166,110,0.08) !important;
  color: rgba(255,255,255,0.9) !important;
}
.gravure-input-wrap {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease !important;
}
.gravure-input-wrap.visible {
  max-height: 200px !important;
  opacity: 1 !important;
  transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease 0.1s !important;
}

/* ── 11. Text inputs & textareas ── */
.text-input,
.idea-textarea {
  width: 100% !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 3px !important;
  padding: 0.85rem 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  color: rgba(255,255,255,0.8) !important;
  outline: none !important;
  resize: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  caret-color: rgba(196,166,110,0.8) !important;
}
.text-input:focus,
.idea-textarea:focus {
  border-color: rgba(196,166,110,0.5) !important;
  background: rgba(196,166,110,0.03) !important;
}
.text-input::placeholder,
.idea-textarea::placeholder {
  color: rgba(255,255,255,0.18) !important;
}

/* ── 12. Selection preview ── */
.selection-preview-inner {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.9rem 1rem !important;
  background: rgba(196,166,110,0.05) !important;
  border: 1px solid rgba(196,166,110,0.22) !important;
  border-radius: 4px !important;
  margin-bottom: 1rem !important;
}
.preview-thumb {
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
.preview-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}
.preview-cat {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(196,166,110,0.7) !important;
}
.preview-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.88) !important;
}
#change-selection-btn {
  padding: 0.38rem 0.9rem !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 2px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
#change-selection-btn:hover {
  border-color: rgba(196,166,110,0.4) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* ── 13. Summary box ── */
.summary-box {
  background: rgba(196,166,110,0.04) !important;
  border: 1px solid rgba(196,166,110,0.18) !important;
  border-radius: 4px !important;
  padding: 1.8rem !important;
  margin-bottom: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
}
.summary-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(196,166,110,0.55), transparent) !important;
}
.summary-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(196,166,110,0.65) !important;
  margin-bottom: 1.4rem !important;
}
.summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 1rem !important;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.summary-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.summary-key {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.summary-val {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.95rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.78) !important;
  text-align: right !important;
}

/* ── 14. WA send button ── */
.wa-send-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 1.1rem 2rem !important;
  background: rgba(196,166,110,0.9) !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  cursor: pointer !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
  margin-bottom: 1.2rem !important;
}
.wa-send-btn:hover {
  background: rgba(196,166,110,1) !important;
  box-shadow: 0 6px 24px rgba(196,166,110,0.22) !important;
}
.wa-send-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* ── 15. Reassurance note ── */
.wiz-reassure {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255,255,255,0.28) !important;
  text-align: center !important;
  line-height: 1.9 !important;
}

/* ── 16. Wiz navigation buttons ── */
.wiz-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 2.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.wiz-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.7rem 1.4rem !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 3px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}
.wiz-btn:hover {
  border-color: rgba(196,166,110,0.38) !important;
  color: rgba(255,255,255,0.82) !important;
}
.wiz-btn-next {
  border-color: rgba(196,166,110,0.45) !important;
  color: rgba(196,166,110,0.85) !important;
  background: rgba(196,166,110,0.06) !important;
}
.wiz-btn-next:hover {
  border-color: rgba(196,166,110,0.72) !important;
  background: rgba(196,166,110,0.12) !important;
  color: rgba(196,166,110,1) !important;
}
.wiz-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── 17. Model recap (Step 2 top) ── */
.wiz-model-recap {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  padding: 0.9rem 1rem !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 3px !important;
  margin-bottom: 1.8rem !important;
}
.wiz-model-recap img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
.recap-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}
.recap-info span {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(196,166,110,0.65) !important;
}
.recap-info strong {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ── prefers-reduced-motion (commander additions) ── */
@media (prefers-reduced-motion: reduce) {
  .kd-cmd-card,
  .kd-cmd-cat-btn,
  .catalogue-mini-item,
  .wiz-tl-dot,
  .wiz-btn,
  .wa-send-btn { transition: none !important; }
  .kd-anim-up,
  .kd-anim-in  { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   KEIHAL DIAMONDS — RESPONSIVE MOBILE AUDIT v3
   Full-site mobile review — all confirmed bugs fixed
   Breakpoints: 960 · 768 · 640 · 480 · 380 · 320
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   GLOBAL — overflow protection, iOS text-size, touch comfort
   ────────────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

@media (max-width: 768px) {
  img, video, iframe, svg, canvas {
    max-width: 100% !important;
  }
  /* Prevent long words/URLs from breaking layout */
  p, li, td, th, label, span:not(.kd-cmd-card-letter) {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ──────────────────────────────────────────────────────────────────
   NAVBAR — burger + lang visible, compact
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Show the burger and lang toggle (overrides the opacity:0 rule) */
  .kd-nb-left {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-left: 0.8rem !important;
  }
  .kd-nb-right {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-right: 0.8rem !important;
    gap: 0 !important;
  }
  /* Keep account/wishlist/search hidden — bottom bar handles them */
  #kd-acct-btn,
  #kd-wl-btn,
  #kd-search-btn {
    display: none !important;
  }
  /* Lang toggle: compact */
  .kd-lang {
    display: flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.06em !important;
  }
  .kd-lang button {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: rgba(245,240,232,0.5) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.06em !important;
    font-family: 'Montserrat', sans-serif !important;
    padding: 4px 2px !important;
    min-height: unset !important;
    min-width: unset !important;
  }
  .kd-lang span {
    color: rgba(245,240,232,0.2) !important;
    font-size: 0.5rem !important;
  }
  /* Burger: minimum tap target */
  .kd-burger {
    padding: 10px 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    gap: 4px !important;
  }
  .kd-burger span {
    width: 20px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE BOTTOM BAR — content clearance for all pages
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Old footer (catalogue, cat-*, personnalisation, conseils, apropos) */
  footer:not(#kd-footer) {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* New footer (index, produit) bottom bar */
  .kd-footer-bottom {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
  }

  /* Wizard page — bottom nav doesn't reach the bar */
  #wizard {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }

  /* Wiz-nav fixed inside wizard: add more bottom space */
  .wiz-nav {
    margin-bottom: 0.5rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   PAGE HERO — uniform breathing across all content pages
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-hero {
    padding-top: 5.2rem !important;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
    padding-bottom: 2.5rem !important;
  }
  .page-hero-title {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 0.8rem !important;
  }
  .gold-line {
    margin: 1rem 0 !important;
  }
  .page-hero-subtitle {
    font-size: 0.82rem !important;
    line-height: 1.7 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   CATALOGUE PAGE — touch overlay + hero
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* On touch: force overlay visible so users see the category name */
  .kd-ce-img-overlay {
    opacity: 1 !important;
    background: linear-gradient(
      to top,
      rgba(8,8,8,0.75) 0%,
      rgba(8,8,8,0.2)  45%,
      transparent      100%
    ) !important;
  }
  .kd-ce-overlay-name {
    opacity: 1 !important;
    transform: none !important;
  }
  .kd-ce-overlay-cta {
    opacity: 1 !important;
    transform: none !important;
    font-size: 0.5rem !important;
    padding: 0.4rem 0.9rem !important;
  }
  /* Catalogue hero */
  .kd-ce-hero {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
  .kd-ce-title {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.08 !important;
  }
  .kd-ce-sub {
    font-size: 0.82rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   CATEGORY PAGES — product grid, buttons, hero
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Grid: always 2 columns on mobile */
  .kd-cp-products .product-grid,
  .product-grid.cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    padding: 0 1.4rem !important;
  }

  /* Product card */
  .product-card {
    border-radius: 2px !important;
  }
  .product-name {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.2rem !important;
  }
  .product-category {
    font-size: 0.46rem !important;
    letter-spacing: 0.1em !important;
  }
  .product-btn {
    font-size: 0.48rem !important;
    letter-spacing: 0.12em !important;
    padding: 0.52rem 0.4rem !important;
    min-height: unset !important;
  }

  /* Hero */
  .kd-cp-hero {
    padding-top: 5.2rem !important;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
  .kd-cp-title {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }

  /* Choice bar (naturel vs sur mesure) */
  .kd-cp-choice-inner {
    padding: 1rem 1.4rem !important;
    gap: 0.6rem !important;
  }
  .kd-cp-choice-opt {
    font-size: 0.56rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* Single column on very narrow screens */
@media (max-width: 360px) {
  .kd-cp-products .product-grid,
  .product-grid.cat-grid {
    grid-template-columns: 1fr !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .product-name {
    font-size: 0.95rem !important;
  }
  .product-btn {
    font-size: 0.52rem !important;
    letter-spacing: 0.14em !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   PRODUCT PAGE — breadcrumb, related grid, name, configurator
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Breadcrumb: protect from overflow */
  .kd-pd-breadcrumb-bar {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Product name: scale with viewport */
  .kd-pd-name {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }

  /* Info panel horizontal padding */
  .kd-pd-info {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }

  /* Configurator metal/stone buttons: wrap cleanly */
  .kd-cfg-sel-btn {
    font-size: 0.56rem !important;
    padding: 0.5rem 0.7rem !important;
  }

  /* WA button in configurator */
  .kd-cfg-wa-btn {
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
  }
}

/* Related grid → 1 col on very small screens */
@media (max-width: 380px) {
  .kd-pd-related-grid {
    grid-template-columns: 1fr !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   PERSONNALISATION PAGE — section padding, monture grid
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .perso-section {
    padding: 3.5rem 1.4rem !important;
  }
  .perso-card {
    padding: 1.8rem 1.2rem !important;
  }
  .perso-card-number {
    font-size: 2.5rem !important;
  }

  /* Monture grid: 2 per row */
  .monture-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .monture-card {
    padding: 1.2rem 0.8rem !important;
  }
  .monture-svg-wrap {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0.7rem !important;
  }
  .monture-name {
    font-size: 0.8rem !important;
  }
  .monture-desc {
    font-size: 0.6rem !important;
    line-height: 1.5 !important;
  }

  /* Cut options: uniform wrap */
  .cut-options {
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
  }
  .cut-svg-wrap {
    width: 50px !important;
    height: 50px !important;
  }
  .cut-label {
    font-size: 0.5rem !important;
    letter-spacing: 0.08em !important;
  }

  /* CTA section */
  .cta-section {
    padding: 3.5rem 1.4rem !important;
    text-align: center !important;
  }
  .cta-section h2 {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }

  /* Stone options */
  .stone-option {
    padding: 1.2rem 1rem !important;
  }
  .stone-option h3 {
    font-size: 1.1rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   CONSEILS PAGE — session-conseil grid, grade table, spacing
   ────────────────────────────────────────────────────────────────── */

/* THE KEY BUG: #session-conseil rule targets the section, but the
   2-column grid is on .sc-inner. Fix the right element. */
@media (max-width: 960px) {
  .sc-inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: auto !important;
  }
  /* Image on top, panel below */
  .sc-media { order: 1 !important; }
  .sc-panel { order: 2 !important; }
}

@media (max-width: 640px) {
  #session-conseil {
    padding: 0 !important;
  }
  .sc-panel {
    padding: 2.5rem 1.4rem calc(60px + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
  }
  .sc-title {
    font-size: 1.9rem !important;
    line-height: 1.15 !important;
  }
  .sc-body {
    font-size: 0.8rem !important;
    line-height: 1.7 !important;
  }

  /* Conseils content sections */
  .conseils-section {
    padding: 3.5rem 1.4rem !important;
  }
  .four-c-card {
    padding: 1.8rem 1.2rem !important;
  }
}

/* Grade table: horizontal scroll on mobile — table has 4 columns
   and will overflow 375px without this. */
@media (max-width: 768px) {
  .grade-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 0.5px solid rgba(255,255,255,0.06) !important;
    border-radius: 2px !important;
  }
  .grade-table table,
  .grade-table thead,
  .grade-table tbody,
  .grade-table tfoot {
    display: table !important;
    width: 100% !important;
    min-width: 500px !important;
  }
  .grade-table tr {
    display: table-row !important;
  }
  .grade-table th,
  .grade-table td {
    display: table-cell !important;
    white-space: nowrap !important;
    padding: 0.7rem 0.9rem !important;
  }
  /* Scroll hint fade on right edge */
  .grade-table::after {
    content: '' !important;
    display: block !important;
    position: sticky !important;
    right: 0 !important;
  }
}

/* Page hero anchors — already have flex-wrap, add proper tap targets */
@media (max-width: 640px) {
  .pha-link {
    padding: 6px 4px !important;
    min-height: unset !important;
  }
  /* Compare grid */
  .compare-col {
    padding: 2rem 1.2rem !important;
  }
  .compare-col h3 {
    font-size: 1.1rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   À PROPOS PAGE — hero quote, brand story, values
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #apropos-hero {
    padding: 5.5rem 1.4rem 3rem !important;
  }
  .apropos-hero-quote {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    line-height: 1.4 !important;
  }
  .brand-story-inner {
    gap: 2.5rem !important;
  }
  .brand-story-text h2 {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }
  .values-section {
    padding: 3.5rem 1.4rem !important;
  }
  .value-item {
    padding: 1.5rem 1rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   COMMANDER PAGE — stepper, step content, section spacing
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Wizard container left/right breathing */
  #wizard {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  /* Step header typography */
  .wiz-step-title {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }

  /* Stepper dots: smaller on tiny screens */
  .wiz-tl-dot {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.6rem !important;
  }
  .wiz-tl-label {
    font-size: 0.47rem !important;
  }
  .wiz-tl-line {
    min-width: 28px !important;
  }

  /* Category selector cmd grid: already 2 col at ≤380px */

  /* Summary box */
  .summary-box {
    padding: 1.4rem 1rem !important;
  }

  /* Reassurance note under WA button */
  .wiz-reassure {
    font-size: 0.52rem !important;
  }

  /* Model choice cards A/B */
  .kd-cmd-cards {
    gap: 0.5rem !important;
  }
  .kd-cmd-card {
    padding: 0.9rem 1rem 1.5rem !important;
    gap: 0.3rem !important;
  }
  .kd-cmd-card-letter {
    font-size: 1.25rem !important;
  }
  .kd-cmd-card-title {
    font-size: 0.6rem !important;
  }
  .kd-cmd-card-desc {
    font-size: 0.55rem !important;
  }
  .kd-cmd-card-arrow {
    font-size: 0.8rem !important;
    bottom: 0.7rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   OLD FOOTER — pages using footer:not(#kd-footer)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  footer:not(#kd-footer) .footer-inner {
    padding: 2.5rem 1.4rem !important;
    gap: 2rem !important;
  }
  footer:not(#kd-footer) .footer-col-title {
    font-size: 0.5rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.7rem !important;
  }
  footer:not(#kd-footer) .footer-links a,
  footer:not(#kd-footer) .footer-col nav a {
    font-size: 0.82rem !important;
    line-height: 1.9 !important;
  }
  footer:not(#kd-footer) .footer-bottom {
    padding: 1rem 1.4rem !important;
    font-size: 0.45rem !important;
  }
  footer:not(#kd-footer) .footer-copy {
    font-size: 0.45rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   NEW FOOTER (#kd-footer) — mobile bar clearance + tiny screens
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kd-footer-top {
    padding: 2.5rem 1.4rem 2rem !important;
  }
  .kd-footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.2rem !important;
  }
  .kd-footer-logo-keihal {
    font-size: 1.15rem !important;
    letter-spacing: 0.3em !important;
  }
  .kd-footer-tagline {
    font-size: 0.78rem !important;
  }
  .kd-footer-wa-btn {
    font-size: 0.5rem !important;
    padding: 0.6rem 1rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   DRAWER NAV — tap targets on mobile
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kd-drawer-nav a {
    padding: 0.6rem 0 !important;
    display: block !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   320px — VERY SMALL PHONES (iPhone SE 1st gen, Galaxy A series)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 320px) {
  /* Logo: tighter */
  .navbar-logo-keihal {
    font-size: 1.05rem !important;
    letter-spacing: 0.18em !important;
  }
  .navbar-logo-diamonds {
    font-size: 7px !important;
    letter-spacing: 0.32em !important;
  }

  /* Section padding: slightly tighter */
  .perso-section,
  .conseils-section,
  .values-section,
  .cta-section {
    padding: 2.8rem 1rem !important;
  }
  #apropos-hero {
    padding: 4.8rem 1rem 2.5rem !important;
  }

  /* Wizard */
  #wizard {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .kd-cmd-cat-btn {
    padding: 0.8rem 0.25rem !important;
  }
  .kd-cmd-cat-label {
    font-size: 0.45rem !important;
  }

  /* Product grid */
  .kd-cp-products .product-grid,
  .product-grid.cat-grid {
    gap: 0.5rem !important;
    padding: 0 1rem !important;
  }
  .product-btn {
    font-size: 0.44rem !important;
    letter-spacing: 0.09em !important;
    padding: 0.45rem 0.3rem !important;
  }

  /* Footer */
  footer:not(#kd-footer) .footer-inner {
    padding: 2rem 1rem !important;
  }
  .kd-footer-top {
    padding: 2rem 1rem 1.5rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   ANIMATIONS — reduced motion respect
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sc-media-img,
  .kd-ed-img,
  .kd-bi-img,
  .kd-cat-img-wrap img,
  .kd-sel-img-wrap img {
    transition: none !important;
    transform: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   KEIHAL PREMIUM UI — Phase 2
   1. Search overlay — redesign complet (IDs corrects depuis kd-search.js)
   2. Drawer "Mes bijoux favoris"
   3. Header kd-wl-link — favoris
   4. Bouton flottant téléphone
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. SEARCH PANEL — fond, ombre ────────────────────────────────────── */
#kd-search-panel {
  background: #070707 !important;
  border-bottom: 1px solid rgba(196,166,110,0.1) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7) !important;
}

/* Inner container — breathing room */
.kd-sp-inner {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 2.2rem 2.5rem !important;
}

/* Top row (input + fermer) */
.kd-sp-top {
  display: flex !important;
  align-items: center !important;
  gap: 1.1rem !important;
  padding: 2rem 0 1.6rem !important;
  border-bottom: 1px solid rgba(240,232,216,0.07) !important;
  margin-bottom: 1.8rem !important;
}

/* ── Input wrapper (border + focus-within glow) ── */
.kd-sp-input-wrap {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  gap: 0.8rem !important;
  border: 0.5px solid rgba(240,232,216,0.18) !important;
  padding: 0.78rem 1.1rem !important;
  background: rgba(255,255,255,0.015) !important;
  transition: border-color 0.22s !important;
}
.kd-sp-input-wrap:focus-within {
  border-color: rgba(240,232,216,0.52) !important;
  background: rgba(255,255,255,0.025) !important;
}
/* Loupe icon */
.kd-sp-input-wrap > svg:first-child {
  flex-shrink: 0 !important;
  color: rgba(240,232,216,0.35) !important;
  width: 17px !important;
  height: 17px !important;
}

/* ── Actual input ── */
#kd-sp-input {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: rgba(240,232,216,0.92) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.15rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.025em !important;
  caret-color: rgba(196,166,110,0.85) !important;
  min-width: 0 !important;
}
#kd-sp-input:focus {
  outline: none !important;
  box-shadow: none !important;
}
#kd-sp-input::placeholder {
  color: rgba(240,232,216,0.25) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  font-style: normal !important;
  font-weight: 300 !important;
}

/* ── Clear button ── */
#kd-sp-clear {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(240,232,216,0.32) !important;
  padding: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  transition: color 0.2s !important;
}
#kd-sp-clear:hover { color: rgba(240,232,216,0.75) !important; }

/* ── Fermer button ── */
#kd-sp-close {
  flex-shrink: 0 !important;
  background: none !important;
  border: 0.5px solid rgba(240,232,216,0.18) !important;
  cursor: pointer !important;
  color: rgba(240,232,216,0.42) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  padding: 0.52rem 1.05rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  transition: border-color 0.22s, color 0.22s !important;
  white-space: nowrap !important;
}
#kd-sp-close svg { flex-shrink: 0 !important; }
#kd-sp-close:hover {
  border-color: rgba(240,232,216,0.42) !important;
  color: rgba(240,232,216,0.88) !important;
}

/* ── Section labels ── */
.kd-sp-section-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(240,232,216,0.26) !important;
  margin-bottom: 0.88rem !important;
  margin-top: 1.7rem !important;
}

/* ── Collections — category chips ── */
.kd-sp-cats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.52rem !important;
}
.kd-sp-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.48rem 1.05rem !important;
  border: 0.5px solid rgba(240,232,216,0.2) !important;
  background: none !important;
  color: rgba(240,232,216,0.62) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 1px !important;
  transition: border-color 0.22s, color 0.22s, background 0.22s !important;
}
.kd-sp-cat-pill:hover {
  border-color: rgba(196,166,110,0.55) !important;
  color: rgba(196,166,110,0.95) !important;
  background: rgba(196,166,110,0.06) !important;
}

/* ── Suggestions ── */
.kd-sp-sugs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.48rem 0.58rem !important;
}
.kd-sp-sug {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.38rem 0.88rem !important;
  background: rgba(240,232,216,0.04) !important;
  border: 0.5px solid rgba(240,232,216,0.1) !important;
  color: rgba(240,232,216,0.46) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  border-radius: 1px !important;
  text-transform: none !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
.kd-sp-sug:hover {
  background: rgba(240,232,216,0.08) !important;
  color: rgba(240,232,216,0.88) !important;
  border-color: rgba(240,232,216,0.22) !important;
}

/* ── Result image wrapper ── */
.kd-sp-res-img-wrap {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #111 !important;
}
.kd-sp-res-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.32s ease !important;
}
.kd-sp-res-card:hover .kd-sp-res-img-wrap img {
  transform: scale(1.05) !important;
}

/* ── Result info block ── */
.kd-sp-res-info {
  padding: 0.75rem 0.9rem 0.95rem !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── "Découvrir →" CTA ── */
.kd-sp-res-cta {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(240,232,216,0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  transition: color 0.22s !important;
  margin-top: 0.35rem !important;
}
.kd-sp-res-card:hover .kd-sp-res-cta { color: rgba(240,232,216,0.9) !important; }

/* ── Empty state ── */
.kd-sp-empty {
  padding: 2.2rem 0 1rem !important;
}
.kd-sp-empty p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(240,232,216,0.42) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.6rem !important;
}
.kd-sp-empty-hint {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.57rem !important;
  color: rgba(240,232,216,0.26) !important;
  letter-spacing: 0.1em !important;
  font-style: normal !important;
}


/* ── 2. DRAWER — "Mes bijoux favoris" ────────────────────────────────── */
.kd-drawer-fav {
  display: flex !important;
  align-items: center !important;
  margin-top: 1.6rem !important;
  padding-top: 1.6rem !important;
  border-top: 0.5px solid rgba(255,255,255,0.08) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(17px, 2.5vw, 24px) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.62) !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
  transition: color 0.22s !important;
}
.kd-drawer-fav:hover { color: #fff !important; padding-left: 0.55rem !important; }
.kd-drawer-fav svg {
  width: 13px !important;
  height: 13px !important;
  margin-right: 9px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: -1px !important;
  transition: inherit !important;
}


/* ── 3. HEADER — kd-wl-link favoris ─────────────────────────────────── */
.kd-wl-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(240,232,216,0.58) !important;
  text-decoration: none !important;
  transition: color 0.22s !important;
  white-space: nowrap !important;
}
.kd-wl-link:hover { color: rgba(240,232,216,0.95) !important; }
/* Petit cœur avant le texte via CSS */
.kd-wl-link::before {
  content: '' !important;
  display: inline-block !important;
  width: 11px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0e8d8' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  opacity: 0.55 !important;
}
.kd-wl-link:hover::before { opacity: 0.9 !important; }
/* Mobile : icône seule, texte masqué */
@media (max-width: 768px) {
  .kd-wl-link {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    gap: 0 !important;
  }
  .kd-wl-link::before {
    width: 14px !important;
    height: 13px !important;
    opacity: 0.65 !important;
  }
}


/* ── 4. BOUTON FLOTTANT TÉLÉPHONE ────────────────────────────────────── */
#whatsapp-float {
  background: #0b0b0b !important;
  border: 0.5px solid rgba(240,232,216,0.18) !important;
  color: rgba(240,232,216,0.72) !important;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s !important;
}
#whatsapp-float svg {
  stroke: currentColor !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
}
#whatsapp-float:hover {
  background: #181818 !important;
  border-color: rgba(240,232,216,0.38) !important;
  color: rgba(240,232,216,0.95) !important;
  transform: scale(1.07) !important;
}
#whatsapp-float:active {
  transform: scale(0.95) !important;
}


/* ── 5. RECHERCHE — mobile responsive ───────────────────────────────── */
@media (max-width: 768px) {
  .kd-sp-inner {
    padding: 0 1.4rem 2rem !important;
  }
  .kd-sp-top {
    padding: 1.6rem 0 1.2rem !important;
    gap: 0.8rem !important;
  }
  .kd-sp-input-wrap {
    padding: 0.65rem 0.85rem !important;
    gap: 0.6rem !important;
  }
  #kd-sp-input {
    font-size: 1rem !important;
  }
  #kd-sp-input::placeholder {
    font-size: 0.6rem !important;
  }
  #kd-sp-close {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.2em !important;
  }
  .kd-sp-cats {
    gap: 0.4rem !important;
  }
  .kd-sp-cat-pill {
    padding: 0.42rem 0.85rem !important;
    font-size: 0.54rem !important;
    letter-spacing: 0.14em !important;
  }
  .kd-sp-sugs { gap: 0.38rem 0.45rem !important; }
  .kd-sp-sug  { font-size: 0.54rem !important; padding: 0.35rem 0.72rem !important; }
  .kd-sp-res-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
  }
}
@media (max-width: 400px) {
  .kd-sp-res-grid { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════════════
   KEIHAL DIAMONDS — OVERRIDES BATCH 2
   Mobile UX, Lookbook removal cleanup, Conseils simplification,
   Header mobile épuré, Barre mobile 3 items, Fiche produit image
   ════════════════════════════════════════════════════════════════════ */

/* ── A2 : Barre mobile — 3 boutons équidistants gauche / centre / droite ── */
#kd-mob-bar {
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  padding: 0 8px !important;
}
#kd-mob-bar .kd-mob-btn {
  flex: 0 0 auto !important;
  min-width: 56px !important;
}

/* ── A3 : Header mobile — cacher le hamburger en haut ────────────── */
@media (max-width: 768px) {
  #navbar .kd-burger,
  #navbar button.kd-burger {
    display: none !important;
  }

  /* Recentrer le logo maintenant que le burger est retiré */
  .navbar-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }
  .kd-nb-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .navbar-logo {
    grid-column: 2 !important;
    justify-self: center !important;
  }
  .kd-nb-right {
    justify-content: flex-end !important;
  }
}

/* ── A1 : Fiche produit mobile — image plus grande ───────────────── */
@media (max-width: 768px) {
  .kd-pd-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .kd-pd-media {
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .kd-pd-img-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 72vw !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
  }

  .kd-pd-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .kd-pd-info {
    padding: 1.6rem 1.25rem 6rem !important;
  }

  /* Image moins petite et mieux cadrée aussi pour la galerie */
  .kd-pd-gallery {
    padding: 0.6rem 1rem !important;
    gap: 0.5rem !important;
  }
}

/* ── B5 / C1 : Conseils — cacher les sections 4C et Naturel vs Lab ─ */
#conseils-4c,
#conseils-nat-lab,
.page-hero-anchors {
  display: none !important;
}

/* Supprimer aussi le divider entre session-conseil et les sections supprimées */
#session-conseil + .gold-divider {
  display: none !important;
}

/* Réduire le padding en bas de la section session-conseil */
#session-conseil {
  padding-bottom: 0 !important;
}

/* ── B6 / C2 : Harmoniser espacements header → contenu ───────────── */
/* Réduire l'espace entre la navbar et les titres de pages */
.page-hero {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

@media (max-width: 768px) {
  .page-hero {
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }
  .page-hero-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    margin-bottom: 0.75rem !important;
  }
}

/* Harmoniser section-conseil desktop */
@media (min-width: 769px) {
  #session-conseil {
    min-height: 0 !important;
  }
  .sc-media {
    min-height: 0 !important;
    max-height: 85vh !important;
  }
}

/* ── B2 : Images cassées — masquer via CSS onerror (support JS) ──── */
/* Les images avec onerror déjà dans le HTML masquent le wrap */
/* Ajout d'un filet de sécurité pour les product-card sans image */
.product-card img[src=""],
.product-card img:not([src]) {
  display: none !important;
}

/* ── A4 : Personnalisation mobile — compacter les sections ────────── */
@media (max-width: 768px) {
  /* Réduction padding global */
  .kd-config-main,
  .configurator-main,
  [class*="config"] > * {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Swatches métal — rangée compacte */
  .kd-pd-metals-options,
  .metal-options,
  [class*="metal-opt"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
  }

  /* Pastilles métal plus petites et plus compactes */
  .kd-pd-metal-circle,
  .metal-circle,
  [class*="metal-circle"] {
    width: 28px !important;
    height: 28px !important;
  }

  /* Labels métal : taille réduite */
  .kd-pd-metals-label,
  .metal-label,
  [class*="metals-label"] {
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 0.75rem !important;
  }

  /* Champs de formulaire personnalisation : hauteur réduite */
  .kd-cfg input[type="text"],
  .kd-cfg textarea,
  .kd-cfg select {
    padding: 0.65rem 0.9rem !important;
    font-size: 0.82rem !important;
  }

  /* Section title dans personnalisation */
  .kd-cfg-section-title,
  .cfg-title,
  [class*="cfg"][class*="title"] {
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 0.8rem !important;
    margin-top: 1.6rem !important;
  }

  /* Réduire les grands vides dans les sections configurateur */
  .kd-cfg > * + * {
    margin-top: 1.2rem !important;
  }
}

/* ── A5 : Responsive global — sécurité universelle ───────────────── */
@media (max-width: 430px) {
  /* Textes ne débordent pas */
  body { overflow-x: hidden !important; }
  * { max-width: 100% !important; box-sizing: border-box !important; }
  img { max-width: 100% !important; height: auto !important; }

  /* Sauf override délibéré (badges, icônes, cercles) */
  .kd-mob-bar-badge,
  .kd-mob-btn-icon svg,
  .kd-pd-metal-circle { max-width: none !important; }

  /* Breadcrumbs sur mobile : wrap propre */
  .kd-pd-breadcrumb-bar,
  .kd-ph-bc {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }

  /* Section content ne sort pas du viewport */
  .page-hero, section, main > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* Safe area iPhone bottom — barre mobile ne cache pas le contenu */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #kd-mob-bar {
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom)) !important;
  }
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── Accessibilité : focus visible mais élégant ───────────────────── */
*:focus-visible {
  outline: 1px solid rgba(196, 166, 110, 0.6) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(196, 166, 110, 0.5) !important;
}

/* ── A1 FIX : Image produit mobile — height explicite ────────────── */
@media (max-width: 768px) {
  .kd-pd-media {
    height: auto !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }

  .kd-pd-img-wrap {
    height: min(75vw, 340px) !important;
    max-height: none !important;
    aspect-ratio: unset !important;
  }

  /* Main layout : flex colonne, media d'abord */
  .kd-pd-main {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   KEIHAL DIAMONDS — MOBILE PREMIUM OVERHAUL
   1. Brand-intro image immersive
   2. Header mobile : cœur retiré du haut
   3. Bottom bar : 4 colonnes (Menu · Recherche · Favoris · Panier)
   4. Fiche produit : image 65vh
   5. Catalogue : grille 2 colonnes sur mobile
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1. BRAND-INTRO — image immersive sur mobile
   La section sous le hero (ACCEUIL.jpg) doit être plus verticale,
   plus grande et plus editoriale sur téléphone.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Le texte passe en premier, l'image suit */
  .kd-bi-wrap {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .kd-bi-text {
    order: 1 !important;
    padding: 3.5rem 1.5rem 2.5rem !important;
    border-right: none !important;
    border-bottom: 0.5px solid rgba(255,255,255,0.07) !important;
  }
  /* Image : full-bleed, hauteur éditoriale immersive */
  .kd-bi-media {
    order: 2 !important;
    padding: 0 !important;
    height: clamp(260px, 75vw, 420px) !important;
    overflow: hidden !important;
    display: block !important;
  }
  .kd-bi-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 20% !important; /* garde le bijou/main visible */
    display: block !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   2. HEADER MOBILE — retirer le cœur / favoris de la barre du haut
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Cacher le lien "Mes bijoux favoris" dans le header */
  #navbar .kd-wl-link,
  #navbar a.kd-wl-link {
    display: none !important;
  }

  /* Le .kd-nb-left n'a plus rien d'utile (burger déjà caché) : mini-shrink */
  #navbar .kd-nb-left {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* S'assurer que le logo reste bien centré sans le cœur à gauche */
  .navbar-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 0 1rem !important;
  }
  .kd-nb-left  { justify-content: flex-start !important; }
  .navbar-logo { grid-column: 2 !important; justify-self: center !important; }
  .kd-nb-right { justify-content: flex-end !important; }
}

/* ══════════════════════════════════════════════════════════════════
   3. BOTTOM BAR — 3 boutons équidistants
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #kd-mob-bar {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
  }

  /* Légèrement réduire les labels pour 4 items */
  .kd-mob-btn-label {
    font-size: 0.48rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Icônes légèrement plus petites pour rester équilibrées */
  .kd-mob-btn-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   4. FICHE PRODUIT — image grande et immersive (60-70vh)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kd-pd-main {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .kd-pd-media {
    width: 100% !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .kd-pd-img-wrap {
    width: 100% !important;
    height: 65vh !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #080808 !important;
  }

  .kd-pd-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* Description et infos descendent juste en dessous */
  .kd-pd-info {
    padding: 1.8rem 1.25rem 6rem !important;
  }

  /* Badge certification : sous l'image, discret */
  .kd-pd-cert-badge {
    margin-top: 0.8rem !important;
    padding: 0 1.25rem !important;
  }

  /* Galerie de miniatures compacte */
  .kd-pd-gallery {
    padding: 0.6rem 1rem !important;
    gap: 0.4rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   5. CATALOGUE — grille 2 colonnes sur mobile
   Concerne :
   a) catalogue.html → .kd-ce-grid (5 catégories)
   b) cat-*.html    → .product-grid (produits individuels)
   ══════════════════════════════════════════════════════════════════ */

/* a) Page catalogue : 2 colonnes côte à côte sur mobile */
@media (max-width: 768px) {
  .kd-ce-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  /* Hauteur portrait des cartes catalogue mobile */
  .kd-ce-img-wrap {
    padding-bottom: 115% !important;
  }

  /* Overlay texte mobile — adapté aux demi-largeurs */
  .kd-ce-overlay-name {
    font-size: clamp(0.65rem, 3.5vw, 0.85rem) !important;
    letter-spacing: 0.13em !important;
    margin-bottom: 0.2rem !important;
  }
  .kd-ce-overlay-count {
    font-size: 6.5px !important;
  }
  .kd-ce-overlay-cta {
    font-size: 6px !important;
    color: rgba(255, 255, 255, 0.48) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
  }
  .kd-ce-overlay-body {
    gap: 0.28rem !important;
    padding: 0.85rem !important;
  }

  /* Padding principal catalogue mobile */
  .kd-ce-main {
    padding: calc(var(--navbar-h, 68px) + 2rem) 0 4rem !important;
  }
}

/* b) Pages catégorie (fiançailles, alliances…) : 2 produits par ligne */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Carte produit plus compacte */
  .product-card {
    border-radius: 0 !important;
  }

  /* Image carrée → plus haute pour mettre en valeur le bijou */
  .product-img-wrap {
    aspect-ratio: 3 / 4 !important;
  }

  /* Infos produit : texte réduit pour tenir en 2 colonnes */
  .product-name,
  .product-card h3,
  .product-card h2 {
    font-size: clamp(0.75rem, 3.5vw, 0.95rem) !important;
    padding: 0.6rem 0.75rem 0 !important;
  }

  .product-card a,
  .product-cta,
  .product-card .kd-sel-add-btn {
    font-size: 0.5rem !important;
    letter-spacing: 0.16em !important;
    padding: 0.5rem 0.75rem 0.75rem !important;
  }
}

/* Safe-area fix pour 4 boutons bottom bar */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #kd-mob-bar {
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom)) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   PERSONNALISATION — HERO CINÉMA
   ════════════════════════════════════════════════════════════════ */
.perso-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 2rem 90px;
  background: #060606;
  overflow: hidden;
}
.perso-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(180,155,90,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 20% 80%, rgba(180,155,90,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.perso-hero-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.perso-hero-label {
  margin-bottom: 1rem;
}
.perso-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0.3rem 0 1rem;
}
.perso-hero-title em {
  font-style: italic;
  color: rgba(180,155,90,0.85);
}
.perso-hero-sub {
  max-width: 520px;
  margin: 1.2rem auto 2rem;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
  line-height: 1.85;
}
.perso-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 34px;
  border: 1px solid rgba(180,155,90,0.45);
  color: rgba(180,155,90,0.85);
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.perso-hero-cta:hover {
  background: rgba(180,155,90,0.1);
  border-color: rgba(180,155,90,0.75);
  color: #b49b5a;
}
.perso-hero-scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.perso-hero-scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(180,155,90,0.55), transparent);
  animation: persoScrollAnim 1.9s ease-in-out infinite;
}
@keyframes persoScrollAnim {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6) translateY(-10px); }
  50% { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   CONFIGURATEUR — PROGRESS BAR
   ════════════════════════════════════════════════════════════════ */
.cfg-progress-wrap {
  position: sticky;
  top: 56px;
  z-index: 90;
  background: rgba(6,6,6,0.97);
  backdrop-filter: blur(8px);
  padding: 1rem 2rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cfg-progress-track {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 1rem;
  position: relative;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.cfg-progress-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: linear-gradient(to right, rgba(180,155,90,0.5), rgba(180,155,90,0.9));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 16.666%;
}
.cfg-steps-nav {
  display: flex;
  justify-content: space-between;
  max-width: 700px;
  margin: 0 auto;
  gap: 4px;
}
.cfg-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.3s;
  user-select: none;
}
.cfg-step-dot.active  { opacity: 1; }
.cfg-step-dot.done    { opacity: 0.75; }
.cfg-step-dot[tabindex="0"]:focus-visible { outline: 1px solid rgba(180,155,90,0.5); }
.cfg-step-num {
  width: 24px; height: 24px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.cfg-step-dot.active .cfg-step-num {
  border-color: rgba(180,155,90,0.8);
  color: rgba(180,155,90,0.9);
  background: rgba(180,155,90,0.1);
}
.cfg-step-dot.done .cfg-step-num {
  border-color: rgba(180,155,90,0.45);
  color: rgba(180,155,90,0.7);
  background: rgba(180,155,90,0.08);
}
.cfg-step-lbl {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}
.cfg-step-dot.active .cfg-step-lbl { color: rgba(255,255,255,0.7); }
.cfg-step-dot.done .cfg-step-lbl   { color: rgba(180,155,90,0.55); }

/* ════════════════════════════════════════════════════════════════
   CONFIGURATEUR — PANNEAUX
   ════════════════════════════════════════════════════════════════ */
.cfg-panels-wrap { min-height: 55vh; }
.cfg-panel { display: none; }
.cfg-panel.active {
  display: block;
  animation: cfgFadeIn 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes cfgFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cfg-panel-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem 2rem 2rem;
}
.cfg-step-label {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(180,155,90,0.65);
  margin-bottom: 0.7rem;
}
.cfg-panel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.cfg-panel-sub {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
  max-width: 540px;
  margin-bottom: 0;
}

/* ── Shared card base ── */
.cfg-type-card, .cfg-metal-card, .cfg-stone-card, .cfg-cut-card, .cfg-monture-card {
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color 0.22s, background 0.22s, transform 0.2s;
}
.cfg-type-card:hover, .cfg-metal-card:hover, .cfg-stone-card:hover,
.cfg-cut-card:hover, .cfg-monture-card:hover {
  border-color: rgba(180,155,90,0.35);
  background: rgba(180,155,90,0.04);
}
.cfg-type-card.selected, .cfg-metal-card.selected, .cfg-stone-card.selected,
.cfg-cut-card.selected, .cfg-monture-card.selected {
  border-color: rgba(180,155,90,0.7);
  background: rgba(180,155,90,0.09);
}
.cfg-type-card:focus-visible, .cfg-metal-card:focus-visible, .cfg-stone-card:focus-visible,
.cfg-cut-card:focus-visible, .cfg-monture-card:focus-visible {
  outline: 1px solid rgba(180,155,90,0.5);
}

/* ── Étape 1 : Type de bijou ── */
.cfg-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
}
.cfg-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.8rem 1rem;
}
.cfg-type-icon {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
}
.cfg-type-icon svg {
  width: 100%; height: 100%;
  stroke: rgba(255,255,255,0.5);
  transition: stroke 0.22s;
}
.cfg-type-card.selected .cfg-type-icon svg { stroke: rgba(180,155,90,0.9); }
.cfg-type-name {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
  transition: color 0.22s;
}
.cfg-type-card.selected .cfg-type-name { color: rgba(180,155,90,0.9); }

/* ── Étape 2 : Métal ── */
.cfg-metal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
}
.cfg-metal-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
}
.cfg-metal-swatch {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
}
.cfg-metal--blanc  { background: linear-gradient(135deg, #d2daea, #bbc3d4, #eaeef7); }
.cfg-metal--jaune  { background: linear-gradient(135deg, #d5a83f, #c89510, #e8bf5e); }
.cfg-metal--rose   { background: linear-gradient(135deg, #d4956a, #c17b57, #e1aa80); }
.cfg-metal--platine{ background: linear-gradient(135deg, #c2cad6, #aab2be, #dadfe8); }
.cfg-metal-info { display: flex; flex-direction: column; gap: 3px; }
.cfg-metal-name {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color 0.22s;
}
.cfg-metal-card.selected .cfg-metal-name { color: rgba(180,155,90,0.9); }
.cfg-metal-desc { font-size: 10px; color: rgba(255,255,255,0.3); }

/* ── Étape 3 : Pierre ── */
.cfg-stone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
}
.cfg-stone-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.4rem;
}
.cfg-stone-icon { flex-shrink: 0; width: 46px; height: 46px; }
.cfg-stone-icon svg { width: 100%; height: 100%; stroke: rgba(255,255,255,0.45); transition: stroke 0.22s; }
.cfg-stone-card.selected .cfg-stone-icon svg { stroke: rgba(180,155,90,0.9); }
.cfg-stone-body { display: flex; flex-direction: column; gap: 5px; }
.cfg-stone-name {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color 0.22s;
}
.cfg-stone-card.selected .cfg-stone-name { color: rgba(180,155,90,0.9); }
.cfg-stone-sub { font-size: 10px; color: rgba(255,255,255,0.3); line-height: 1.55; }

/* ── Étape 4 : Forme ── */
.cfg-cut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.9rem;
  margin-top: 2.2rem;
}
.cfg-cut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.3rem 0.7rem;
}
.cfg-cut-svg { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.cfg-cut-svg svg { width: 100%; height: 100%; stroke: rgba(255,255,255,0.48); fill: none; transition: stroke 0.22s; }
.cfg-cut-card.selected .cfg-cut-svg svg { stroke: rgba(180,155,90,0.9); }
.cfg-cut-lbl {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
  transition: color 0.22s;
}
.cfg-cut-card.selected .cfg-cut-lbl { color: rgba(180,155,90,0.9); }

/* ── Étape 5 : Monture ── */
.cfg-monture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
}
.cfg-monture-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.3rem 0.9rem 1rem;
}
.cfg-monture-svg { width: 80px; height: 70px; }
.cfg-monture-svg svg { width: 100%; height: 100%; stroke: rgba(255,255,255,0.45); transition: stroke 0.22s; }
.cfg-monture-card.selected .cfg-monture-svg svg { stroke: rgba(180,155,90,0.85); }
.cfg-monture-info { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.cfg-monture-name {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  transition: color 0.22s;
}
.cfg-monture-card.selected .cfg-monture-name { color: rgba(180,155,90,0.9); }
.cfg-monture-tag { font-size: 9px; color: rgba(255,255,255,0.27); }

/* ── Étape 6 : Gravure ── */
.cfg-gravure-wrap { margin-top: 2.2rem; }
.cfg-gravure-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.cfg-gravure-tag {
  padding: 11px 22px;
  border: 1px solid rgba(255,255,255,0.13);
  background: none;
  cursor: pointer;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: border-color 0.22s, color 0.22s, background 0.22s;
}
.cfg-gravure-tag:hover { border-color: rgba(180,155,90,0.38); color: rgba(180,155,90,0.8); }
.cfg-gravure-tag.selected {
  border-color: rgba(180,155,90,0.7);
  background: rgba(180,155,90,0.1);
  color: rgba(180,155,90,0.9);
}
.cfg-gravure-tag--skip { border-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.28); }
.cfg-gravure-tag--skip:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); }
.cfg-gravure-tag--skip.selected {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
}
.cfg-gravure-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(180,155,90,0.35);
  text-align: center;
  margin-top: 0.5rem;
}

/* ── Navigation Précédent / Suivant ── */
.cfg-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 2rem;
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cfg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid rgba(255,255,255,0.14);
  background: none;
  cursor: pointer;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: border-color 0.22s, color 0.22s, background 0.22s;
}
.cfg-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }
.cfg-btn--prev:hover:not(:disabled) { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); }
.cfg-btn--next {
  border-color: rgba(180,155,90,0.45);
  color: rgba(180,155,90,0.85);
}
.cfg-btn--next:hover { background: rgba(180,155,90,0.1); border-color: rgba(180,155,90,0.75); color: rgba(180,155,90,1); }
.cfg-step-counter {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
}

/* ── Récapitulatif ── */
.cfg-summary { display: none; padding: 5rem 2rem 4rem; }
.cfg-summary.visible {
  display: block;
  animation: cfgFadeIn 0.45s ease;
}
.cfg-summary-inner {
  max-width: 620px;
  margin: 0 auto;
}
.cfg-summary-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  margin: 0.4rem 0 1rem;
}
.cfg-summary-title em { font-style: italic; color: rgba(180,155,90,0.85); }
.cfg-summary-list {
  margin: 2rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cfg-summary-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cfg-summary-key {
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  min-width: 95px;
  flex-shrink: 0;
}
.cfg-summary-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
}
.cfg-summary-cta { margin-top: 2.5rem; }
.cfg-summary-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.38);
  line-height: 1.75;
  margin-bottom: 1.4rem;
}
.cfg-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 28px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.25s;
  margin-bottom: 0.9rem;
}
.cfg-wa-btn:hover { background: #1fb858; }
.cfg-order-btn {
  display: block;
  padding: 13px 28px;
  border: 1px solid rgba(255,255,255,0.18);
  text-align: center;
  text-decoration: none;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: border-color 0.22s, color 0.22s;
  margin-bottom: 0.85rem;
}
.cfg-order-btn:hover { border-color: rgba(255,255,255,0.38); color: rgba(255,255,255,0.9); }
.cfg-restart-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  padding: 0.5rem;
  transition: color 0.22s;
  text-align: center;
}
.cfg-restart-btn:hover { color: rgba(255,255,255,0.5); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — CONFIGURATEUR
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .perso-hero { min-height: 65vh; padding: 100px 1.5rem 70px; }
  .perso-hero-label { font-size: 0.58rem; letter-spacing: 0.2em; }
  .perso-hero-sub { font-size: 11px; }
  .perso-hero-cta { padding: 11px 26px; font-size: 9px; }
  .cfg-progress-wrap { padding: 0.8rem 1rem 0.65rem; }
  .cfg-step-lbl { display: none; }
  .cfg-panel-inner { padding: 2.5rem 1.2rem 1.5rem; }
  .cfg-type-grid { grid-template-columns: repeat(2, 1fr); }
  .cfg-metal-grid { grid-template-columns: 1fr; }
  .cfg-stone-grid { grid-template-columns: 1fr; }
  .cfg-cut-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .cfg-monture-grid { grid-template-columns: repeat(2, 1fr); }
  .cfg-cut-svg { width: 44px; height: 44px; }
  .cfg-btn { padding: 10px 16px; font-size: 8.5px; }
  .cfg-gravure-tag { padding: 9px 15px; font-size: 8.5px; }
  .cfg-summary { padding: 3rem 1.2rem 3rem; }
}

/* ============================================================
   ANIMATION PREMIUM — overrides finaux (après toutes les règles)
   ============================================================ */

/* ── Drawer : stagger élégant des liens à l'ouverture ──
   Ces règles doivent être APRÈS .kd-drawer-nav a du block
   précédent pour que la transition opacity/transform s'applique.
   ────────────────────────────────────────────────────────── */
.kd-drawer-nav a {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity   0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color     0.22s ease,
    padding-left 0.22s ease;
}
#kd-drawer.open .kd-drawer-nav a {
  opacity: 1;
  transform: none;
}
#kd-drawer.open .kd-drawer-nav a:nth-child(1) { transition-delay:  80ms; }
#kd-drawer.open .kd-drawer-nav a:nth-child(2) { transition-delay: 145ms; }
#kd-drawer.open .kd-drawer-nav a:nth-child(3) { transition-delay: 210ms; }
#kd-drawer.open .kd-drawer-nav a:nth-child(4) { transition-delay: 275ms; }
#kd-drawer.open .kd-drawer-nav a:nth-child(5) { transition-delay: 340ms; }
#kd-drawer.open .kd-drawer-nav a:nth-child(6) { transition-delay: 405ms; }

/* WhatsApp footer — apparaît en dernier */
.kd-drawer-foot {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   0.42s ease,
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#kd-drawer.open .kd-drawer-foot {
  opacity: 1;
  transform: none;
  transition-delay: 440ms;
}

/* ── prefers-reduced-motion : désactiver les animations drawer ── */
@media (prefers-reduced-motion: reduce) {
  .kd-drawer-nav a,
  .kd-drawer-foot {
    opacity: 1 !important;
    transform: none !important;
    transition: color 0.22s ease, padding-left 0.22s ease !important;
  }
}

/* ============================================================
   STATEMENT SECTION — background image + overlay
   imagewebsite4 as atmospheric dark backdrop
   ============================================================ */
#statement-noir {
  position: relative;
  overflow: hidden;
  /* keep background black as fallback */
  background: #0a0a0a;
}

/* Floating background image — covers section, parallax-ready */
.statement-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.statement-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.28;
  filter: grayscale(18%) contrast(1.05);
  transform: scale(1.04);
  transition: transform 12s ease;
}
#statement-noir:hover .statement-bg-img img {
  transform: scale(1.0);
}

/* Dark gradient overlay — ensures text stays readable */
.statement-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(10,10,10,0.72) 0%,
      rgba(10,10,10,0.55) 50%,
      rgba(10,10,10,0.72) 100%);
}

/* Push all text content above overlays */
#statement-noir .statement-quote,
#statement-noir .statement-cta,
#statement-noir::before {
  position: relative;
  z-index: 2;
}

/* ============================================================
   BRAND INTRO — kd-bi-img : object-position for portrait photo
   imagewebsite2 — hands with rings, portrait crop
   ============================================================ */
.kd-bi-img {
  object-position: center 20%;
}

/* ============================================================
   EDITORIAL — kd-ed-img : object-position for portrait photo
   imagewebsite3 — woman wearing jewelry, editorial portrait
   ============================================================ */
.kd-ed-img {
  object-position: center 15%;
}

/* ============================================================
   APROPOS — brand-story-img : portrait photo (imagewebsite5)
   ============================================================ */
.brand-story-img img {
  object-position: center 15%;
}

/* Hide SVG placeholder when real image is present */
.brand-story-img .brand-story-img-placeholder {
  display: none;
}

/* ── prefers-reduced-motion: disable statement image transition ── */
@media (prefers-reduced-motion: reduce) {
  .statement-bg-img img {
    transform: none !important;
    transition: none !important;
  }
  #statement-noir:hover .statement-bg-img img {
    transform: none !important;
  }
}

/* ============================================================
   TASK 1 + 2 — BRAND INTRO redesign
   • 50/50 desktop grid
   • Image smaller, centered with dark breathing room
   • Overlay text "We don't create, only recreate"
   • Better crop: focus on fingers + jewelry
   ============================================================ */

/* ── 50/50 desktop grid (overrides the 2fr/3fr) ── */
@media (min-width: 961px) {
  .kd-bi-wrap {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Image wrapper: constrained, centred, dark respiration ── */
.kd-bi-img-wrap {
  position: relative;
  width: 76%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0 auto;
}

/* ── Image: cover-crop with focus on hands/jewelry ── */
.kd-bi-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 62% !important;
  filter: brightness(0.68) !important;
  transition: filter 0.7s ease !important;
  transform-origin: center center;
}
.kd-bi-media:hover .kd-bi-img {
  filter: brightness(0.60) !important;
}

/* ── Overlay text — luxury editorial signature ── */
.kd-bi-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.0rem, 1.25vw, 1.45rem);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  line-height: 1.62;
  letter-spacing: 0.035em;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.60), 0 0 40px rgba(0, 0, 0, 0.35);
  margin: 0;
  padding: 0;
  z-index: 2;
}

/* ── Tablet: keep wrap proportional ── */
@media (max-width: 960px) {
  .kd-bi-img-wrap {
    width: 72%;
    aspect-ratio: 3 / 4;
  }
  .kd-bi-overlay {
    font-size: clamp(0.88rem, 2.4vw, 1.15rem);
  }
}

/* ── Mobile: full-bleed feel, overlay readable ── */
@media (max-width: 540px) {
  .kd-bi-img-wrap {
    width: 90%;
    aspect-ratio: 4 / 5;
  }
  .kd-bi-overlay {
    font-size: clamp(0.85rem, 4.2vw, 1.05rem);
    white-space: normal;
    width: 78%;
  }
}

/* ── Remove old object-position override that had no effect ── */
/* (was set on .kd-bi-img without object-fit:cover, now resolved above) */

/* ============================================================
   TASK 3 — Scroll + animation smoothness
   • Release will-change after animation (GPU layer cleanup)
   • Tighten transition durations — less heavy, more fluid
   ============================================================ */

/* After animation completes, free the compositing layer */
.kd-rv.kd-in {
  will-change: auto !important;
}

/* ── Overlay reveal: fade up after image ── */
.kd-bi-overlay {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px));
  transition:
    opacity  0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s,
    transform 0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
}
.kd-bi-img-wrap.kd-in .kd-bi-overlay,
.kd-bi-img-wrap:has(.kd-bi-img.kd-in) .kd-bi-overlay {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* ── prefers-reduced-motion: skip overlay animation ── */
@media (prefers-reduced-motion: reduce) {
  .kd-bi-overlay {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
  }
}

/* ============================================================
   BRAND INTRO — FINAL EDITORIAL REDESIGN
   Classic luxury: IMAGE LEFT | TEXT RIGHT
   Centred container · portrait crop · warm ivory type
   Must match the approved high-end jewelry editorial mockup
   ============================================================ */

/* ── Section ── */
#brand-intro {
  background: #080808 !important;
  padding: 6.5rem 0 !important;
  overflow: hidden !important;
}

/* ── Centred editorial grid ── */
.kd-bi-wrap {
  display: grid !important;
  grid-template-columns: 44fr 56fr !important;
  gap: 0 5rem !important;
  max-width: 1260px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 8vw !important;
  min-height: auto !important;
  align-items: center !important;
}

/* ── Image column: LEFT ── */
.kd-bi-media {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ── Text column: RIGHT ── */
.kd-bi-text {
  order: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 0 0 4rem !important;
  border-right: none !important;
  border-left: 0.5px solid rgba(255,255,255,0.06) !important;
  position: static !important;
}

/* ── Image wrapper: portrait ratio, thin luxury frame ── */
.kd-bi-img-wrap {
  position: relative !important;
  width: 90% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: 0.5px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) !important;
}

/* ── Image: clean, bright enough to show jewelry clearly ── */
.kd-bi-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 28% !important;
  filter: brightness(0.90) !important;
  transition: filter 0.7s ease !important;
  transform: none !important;
}
.kd-bi-media:hover .kd-bi-img {
  filter: brightness(0.82) !important;
}

/* ── Overlay text: hidden in this design ── */
.kd-bi-overlay {
  display: none !important;
}

/* ── Label: warm champagne, spaced tracking ── */
.kd-bi-eyebrow {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(210, 185, 130, 0.65) !important;
  display: block !important;
  margin: 0 0 1.4rem !important;
}

/* ── Divider: short warm line between label and heading ── */
.kd-bi-rule {
  width: 40px !important;
  height: 0.5px !important;
  background: rgba(210, 185, 130, 0.30) !important;
  margin: 0 0 2.8rem !important;
  flex-shrink: 0 !important;
}

/* ── Main heading: large elegant italic serif ── */
.kd-bi-headline {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(2.7rem, 3.4vw, 4.2rem) !important;
  line-height: 1.16 !important;
  color: rgba(255, 252, 245, 0.93) !important;
  margin: 0 0 2.8rem !important;
  letter-spacing: -0.015em !important;
}

/* ── Body paragraph: measured, quiet ── */
.kd-bi-body {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 0.77rem !important;
  line-height: 2.05 !important;
  color: rgba(255, 255, 255, 0.36) !important;
  margin: 0 0 3.4rem !important;
  max-width: 36ch !important;
}

/* ── CTA: refined, uppercase, understated ── */
.kd-bi-cta {
  font-family: 'Tenor Sans', Arial, sans-serif !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.48) !important;
  text-decoration: none !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.18) !important;
  padding-bottom: 5px !important;
  display: inline-block !important;
  width: fit-content !important;
  transition: color 0.30s ease, border-color 0.30s ease !important;
  background: none !important;
}
.kd-bi-cta:hover {
  color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(210, 185, 130, 0.55) !important;
}

/* ── Tablet: single column, image above text ── */
@media (max-width: 960px) {
  .kd-bi-wrap {
    grid-template-columns: 1fr !important;
    gap: 3.5rem 0 !important;
    padding: 0 7vw !important;
  }
  .kd-bi-media {
    order: 1 !important;
    justify-content: center !important;
  }
  .kd-bi-text {
    order: 2 !important;
    padding: 0 !important;
    border-left: none !important;
    border-top: 0.5px solid rgba(255,255,255,0.06) !important;
    padding-top: 3rem !important;
  }
  .kd-bi-img-wrap {
    width: 68% !important;
  }
  #brand-intro {
    padding: 5rem 0 !important;
  }
}

/* ── Mobile ── */
@media (max-width: 540px) {
  .kd-bi-wrap {
    padding: 0 5vw !important;
    gap: 2.8rem 0 !important;
  }
  .kd-bi-img-wrap {
    width: 88% !important;
    aspect-ratio: 4 / 5 !important;
  }
  .kd-bi-headline {
    font-size: clamp(2.3rem, 9vw, 3.2rem) !important;
  }
  .kd-bi-body {
    max-width: 100% !important;
  }
  #brand-intro {
    padding: 4rem 0 !important;
  }
}

/* ============================================================
   PORTRAIT VERTICAL — mobile uniquement (téléphone)
   Agencement : image encadrée, portrait complet, fond noir autour.
   Référence visuelle : photo portrait avec bordure fine et espace noir.
   Desktop inchangé.
   ============================================================ */
@media (max-width: 768px) {

  /* ── Section : débloquer le overflow qui tronque l'image ── */
  #brand-intro {
    overflow: visible !important;
    padding: 2rem 0 2.5rem !important;
  }

  /* ── Grille : pas de padding latéral (le media gère ses propres marges) ── */
  .kd-bi-wrap {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ── Colonne média : le padding crée le cadre noir autour de l'image ── */
  .kd-bi-media {
    display: block !important;
    padding: 0 1.4rem 1.4rem !important;  /* espace noir sur les côtés et en bas */
    background: #080808 !important;
    overflow: visible !important;
  }

  /* ── Wrapper : pleine largeur du media, bordure fine, sans crop ── */
  .kd-bi-img-wrap {
    width: 100% !important;
    aspect-ratio: unset !important;       /* Aucun ratio forcé */
    overflow: visible !important;         /* Jamais tronquée */
    margin: 0 !important;
    border: 0.5px solid rgba(255,255,255,0.10) !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* ── Image : ratio naturel complet — portrait 4635 × 6720 visible en entier ── */
  .kd-bi-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;              /* Hauteur proportionnelle, aucune coupure */
    max-height: none !important;
    object-fit: initial !important;
    object-position: initial !important;
    filter: brightness(0.95) !important;
    transform: none !important;
    transition: filter 0.5s ease !important;
  }

  /* ── Texte : espacement sous l'image ── */
  .kd-bi-text {
    padding: 3rem 1.5rem !important;
  }

  /* ══════════════════════════════════════════════════════
     2. Éditoriale — portrait complet (homepage)
  ══════════════════════════════════════════════════════ */
  #kd-editorial {
    overflow: visible !important;
  }
  .kd-ed-media {
    aspect-ratio: unset !important;
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
    background: #0a0a0a !important;
    display: block !important;
  }
  .kd-ed-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
    object-position: initial !important;
  }

  /* ══════════════════════════════════════════════════════
     3. À propos — portrait complet (brand story)
  ══════════════════════════════════════════════════════ */
  .brand-story {
    overflow: visible !important;
  }
  .brand-story-img {
    aspect-ratio: unset !important;
    overflow: visible !important;
    background: #080808 !important;
  }
  .brand-story-img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
    object-position: initial !important;
  }

}

/* ============================================================
   DRAWER — icône téléphone (remplace le bouton WhatsApp)
   Simple, monochrome, élégant — même couleur que le reste du menu
   FR / EN à gauche · icône téléphone à droite, même ligne
   ============================================================ */

/* Supprime l'ancien style WhatsApp si encore en cache */
.kd-drawer-wa,
.kd-drawer-wa--premium {
  display: none !important;
}

/* Footer drawer : lien groupé "téléphone + Nous contacter" */
.kd-drawer-foot {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding-top: 2rem !important;
  padding-bottom: 0.5rem !important;
}

/* Lien groupé — icône + texte côte à côte, tout cliquable vers WhatsApp */
.kd-drawer-contact-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.38) !important;
  transition: color 0.22s ease !important;
}
.kd-drawer-contact-link:hover,
.kd-drawer-contact-link:active {
  color: rgba(255, 255, 255, 0.80) !important;
}
.kd-drawer-contact-link svg {
  display: block !important;
  flex-shrink: 0 !important;
}

/* Label "Nous contacter" */
.kd-drawer-contact-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.56rem !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}

/* Nouveau bouton — icône téléphone épurée */
.kd-drawer-phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.25s ease;
  flex-shrink: 0;
}

.kd-drawer-phone-btn:hover,
.kd-drawer-phone-btn:active {
  color: rgba(255, 255, 255, 0.90);
}

.kd-drawer-phone-btn svg {
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   RECHERCHE — Redesign : barre flottante centrée
   Inspiré de la référence Graff : fond très sombre + flou,
   barre minimaliste centrée, animation douce fade+slide.
   Keihal reste sombre — on remplace le panel plein-écran
   par un cadre élégant flottant au centre de l'écran.
   ============================================================ */

/* ── Overlay : fond sombre très prononcé + flou intense ── */
#kd-search-ov {
  background: rgba(0, 0, 0, 0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: opacity 0.30s ease !important;
}

/* ── Panel : barre flottante centrée, aucun fond ni bordure visible ── */
#kd-search-panel {
  position: fixed !important;
  top: 28vh !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-10px) !important;
  width: min(88vw, 580px) !important;
  max-height: 65vh !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
  overflow: visible !important;
}
#kd-search-panel.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ── Inner : pas de rembourrage ── */
.kd-sp-inner {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Ligne principale : icône + input + FERMER ── */
.kd-sp-top {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  padding: 0 0 0.9rem 0 !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.22) !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

/* ── Wrapper input (icône + champ) ── */
.kd-sp-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.kd-sp-input-wrap svg {
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.40) !important;
}

/* ── Input ── */
#kd-sp-input {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  caret-color: rgba(255, 255, 255, 0.65) !important;
  width: 100% !important;
  min-width: 0 !important;
}
#kd-sp-input::placeholder {
  color: rgba(255, 255, 255, 0.28) !important;
  font-style: italic !important;
}

/* ── Bouton clear (×) : discret ── */
#kd-sp-clear {
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  padding: 3px !important;
  transition: color 0.18s !important;
}
#kd-sp-clear:hover { color: rgba(255,255,255,0.70) !important; }

/* ── Bouton FERMER : texte seul, sans bordure ── */
#kd-sp-close {
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.28) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  transition: color 0.18s !important;
}
#kd-sp-close:hover { color: rgba(255, 255, 255, 0.75) !important; }

/* ── Suggestions : masquées par défaut, jamais visibles ── */
#kd-sp-suggestions {
  display: none !important;
}

/* ── Résultats : panneau sombre qui apparaît sous la barre ── */
#kd-sp-results {
  background: rgba(8, 8, 8, 0.97) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.09) !important;
  margin-top: 0.6rem !important;
  padding: 1.2rem 1.4rem 1.4rem !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
}
.kd-sp-res-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.75rem !important;
}
.kd-sp-res-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.07) !important;
  overflow: hidden !important;
  transition: border-color 0.22s !important;
}
.kd-sp-res-card:hover { border-color: rgba(255,255,255,0.22) !important; }
.kd-sp-res-img-wrap {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  overflow: hidden !important;
  background: #111 !important;
}
.kd-sp-res-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.kd-sp-res-info {
  padding: 0.55rem 0.6rem 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}
.kd-sp-res-cat {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.46rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.28) !important;
}
.kd-sp-res-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.90rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.01em !important;
}
.kd-sp-res-cta {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.45rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.30) !important;
  margin-top: 0.15rem !important;
}
.kd-sp-empty {
  padding: 1.5rem 0 !important;
  text-align: center !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.28) !important;
}
.kd-sp-empty-hint {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.50rem !important;
  font-style: normal !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.18) !important;
  margin-top: 0.45rem !important;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  #kd-search-panel {
    top: 22vh !important;
    width: 90vw !important;
  }
  #kd-sp-input { font-size: 1.1rem !important; }
  .kd-sp-res-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #kd-sp-results { padding: 0.9rem 1rem 1rem !important; }
}

/* ============================================================
   GRILLE PRODUIT — Taille uniforme sur toutes les pages
   Problème résolu : conflit entre padding-bottom:108% (ancien hack)
   et aspect-ratio:3/4. Les deux s'additionnaient → hauteurs variables.
   Fix : padding-bottom:0, aspect-ratio fixe sur tous les breakpoints,
   image en position absolute pour remplir le cadre proprement.
   ============================================================ */

/* ── Desktop : toutes les cartes en carré 1:1 ── */
.product-img-wrap {
  padding-bottom: 0 !important;     /* Supprime l'ancien hack padding */
  aspect-ratio: 1 / 1 !important;   /* Carré uniforme */
  position: relative !important;
  overflow: hidden !important;
  background: #0d0d0d !important;
}

.product-img-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #0d0d0d !important;
}

/* ── Mobile : même carré 1:1 (cohérence desktop ↔ mobile) ── */
@media (max-width: 768px) {
  .product-img-wrap {
    padding-bottom: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (max-width: 480px) {
  .product-img-wrap {
    padding-bottom: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ============================================================
   PAGE PRODUIT — 3 corrections mobile
   1. Image bijou : plus verticale, prend plus d'espace
   2. Fil d'Ariane : plus petit, plus haut
   3. Badge "Diamants certifiés" : supprimé
   ============================================================ */

/* 1. Badge "DIAMANTS CERTIFIÉS" — supprimé sur toutes les tailles */
.kd-pd-cert-badge {
  display: none !important;
}

/* 2 & 3. Mobile uniquement */
@media (max-width: 768px) {

  /* ── Fil d'Ariane : moins de padding en haut + texte plus discret ── */
  .kd-pd-breadcrumb-bar {
    padding: calc(var(--navbar-h, 80px) + 0.25rem) 5vw 0 !important;
    font-size: 0.48rem !important;
    letter-spacing: 0.18em !important;
  }

  /* ── Image bijou : pleine largeur, hauteur naturelle ── */
  .kd-pd-media {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    padding: 1.2rem 3vw 1.2rem !important;
  }

  .kd-pd-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

}

/* ============================================================
   BRAND INTRO — Animation d'apparition au scroll
   Image : révélation progressive (scale + luminosité)
   Texte : montée élégante après l'image
   Classe déclencheur : .kd-scene-in (ajouté par JS)
   ============================================================ */

/* ── Image : état initial ── */
.kd-bi-img-wrap {
  opacity: 0;
  transform: scale(1.055);
  filter: brightness(0.65);
  transition:
    opacity    1.20s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform  1.45s cubic-bezier(0.16, 1, 0.3, 1),
    filter     1.20s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform, filter;
}

/* ── Image : état révélé ── */
.kd-bi-img-wrap.kd-scene-in {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: brightness(0.95) !important;
  will-change: auto !important;
}

/* ── Eyebrow "Keihal" : glisse depuis le bas, léger délai ── */
.kd-bi-eyebrow {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.30s,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1)        0.30s;
}
.kd-bi-eyebrow.kd-scene-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Règle dorée : scaleX ── */
.kd-bi-rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s;
}
.kd-bi-rule.kd-scene-in {
  transform: scaleX(1) !important;
}

/* ── Headline "Votre bijou…" : montée principale ── */
.kd-bi-headline {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.52s,
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.52s;
}
.kd-bi-headline.kd-scene-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Corps + CTA : fade simple ── */
.kd-bi-body,
.kd-bi-cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   0.80s ease 0.72s,
    transform 0.80s cubic-bezier(0.16, 1, 0.3, 1) 0.72s;
}
.kd-bi-cta {
  transition-delay: 0.85s;
}
.kd-bi-body.kd-scene-in,
.kd-bi-cta.kd-scene-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Mobile : pas de scale (évite le débordement horizontal) ── */
@media (max-width: 768px) {
  .kd-bi-img-wrap {
    transform: none !important;
    filter: brightness(0.65) !important;
    transition:
      opacity 1.10s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      filter  1.10s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }
  .kd-bi-img-wrap.kd-scene-in {
    filter: brightness(0.95) !important;
  }
}

/* ============================================================
   SPLASH SCREEN — logo Keihal sur fond noir
   ============================================================ */
#kd-splash {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ============================================================
   SYMBOLE KEIHAL — signature visuelle discrète
   ============================================================ */

/* Base */
.kd-sym {
  display: inline-block;
  width: 22px;
  height: 22px;
  opacity: 0.35;
  user-select: none;
  pointer-events: none;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Wrapper centré — pour les placements éditoriaux */
.kd-sym-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Avant la citation statement-noir */
.kd-sym-center--stmt {
  margin: 0 0 2.8rem;
}
.kd-sym-center--stmt .kd-sym {
  width: 24px;
  height: 24px;
  opacity: 0.40;
}

/* Sous la citation À propos */
.kd-sym-center--quote {
  margin: 2.5rem 0 0;
}
.kd-sym-center--quote .kd-sym {
  width: 20px;
  height: 20px;
  opacity: 0.30;
}

/* Wrapper flex pour CTA + symbole (brand-intro) */
.kd-bi-cta-row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.kd-sym--bi {
  width: 18px;
  height: 18px;
  opacity: 0.32;
}

/* Symbole dans le drawer — poussé à droite */
.kd-drawer-sym {
  margin-left: auto !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 0.22 !important;
  display: block !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Mobile — légèrement réduit */
@media (max-width: 768px) {
  .kd-sym-center--stmt .kd-sym { width: 20px; height: 20px; opacity: 0.35; }
  .kd-sym-center--quote .kd-sym { width: 18px; height: 18px; }
}

/* ============================================================
   SPLASH SCREEN — logo Keihal sur fond noir
   ============================================================ */

.kd-splash-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;         /* invisible au départ — JS l'anime */
}

.kd-splash-img {
  width: clamp(160px, 26vw, 280px);
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   WIZARD ADAPTATIF — cfg-option-tags
   Tags génériques (largeur, finition, longueur, poignet, etc.)
   Reprend exactement le style des cfg-gravure-tag
   ============================================================ */
.cfg-option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.cfg-option-tag {
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: none;
  cursor: pointer;
  font-family: 'Tenor Sans', Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: border-color 0.22s, color 0.22s, background 0.22s;
}

.cfg-option-tag:hover {
  border-color: rgba(180, 155, 90, 0.38);
  color: rgba(180, 155, 90, 0.8);
}

.cfg-option-tag.selected,
.cfg-option-tag[aria-checked="true"] {
  border-color: rgba(180, 155, 90, 0.7);
  background: rgba(180, 155, 90, 0.1);
  color: rgba(180, 155, 90, 0.9);
}

@media (max-width: 600px) {
  .cfg-option-tag {
    padding: 9px 15px;
    font-size: 8.5px;
  }
}

/* ============================================================
   KEIHAL DIAMONDS — Language Picker  (code-only, transparent)
   ============================================================ */

/* ── Wrapper ── */
.kd-lang { position: relative; }

/* ── Toggle button — just the 2-letter code ── */
#kd-lang-current {
  display:        flex;
  align-items:    center;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        2px 0;
  font-family:    'Tenor Sans', Arial, sans-serif;
  font-size:      0.60rem;
  letter-spacing: 0.18em;
  color:          inherit;
  opacity:        0.78;
  transition:     opacity 0.22s ease;
}
#kd-lang-current:hover { opacity: 1; }

/* Flag hidden, chevron hidden — only code text shows */
#kd-lang-flag,
.kd-lang-chevron { display: none; }

#kd-lang-code {
  font-family:    'Tenor Sans', Arial, sans-serif;
  font-size:      0.60rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Dropdown — fixed + transparent dark glass ── */
/* position:fixed beats iOS native video layer     */
.kd-lang-menu {
  display:               none;
  position:              fixed;
  top:                   0;        /* set by JS */
  right:                 0;        /* set by JS */
  min-width:             64px;
  text-align:            center;
  background:            rgba(12, 12, 12, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter:       blur(14px);
  list-style:            none;
  margin:                0;
  padding:               8px 0;
  border:                none;
  box-shadow:            none;
  z-index:               999999;
  transform:             translateZ(0);
}
.kd-lang-menu.open {
  display:   block;
  animation: kd-lang-fade 0.14s ease both;
}
@keyframes kd-lang-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Options — just the code, white on dark glass ── */
.kd-lang-option {
  display:        block;
  padding:        7px 16px;
  font-family:    'Tenor Sans', Arial, sans-serif;
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.68);
  cursor:         pointer;
  transition:     color 0.14s ease;
}
.kd-lang-option:hover  { color: rgba(255, 255, 255, 0.96); }
.kd-lang-option.active { color: rgba(180, 155, 90, 0.92); }

/* Hide flag spans inside options (not used in new HTML) */
.kd-lang-opt-flag { display: none; }

/* ── placeholder for mobile overrides ── */
@media (max-width: 480px) {
}

/* ── Spacer replacing page hero sections (catalogue / conseils / commander) ── */
.kd-page-spacer {
  height: calc(var(--navbar-h, 62px) + 4rem);
  background: #0a0a0a;
}

/* ══════════════════════════════════════════════════════════════════
   LOGO IMAGE — remplace le texte CSS KEIHAL
   ══════════════════════════════════════════════════════════════════ */
.navbar-logo-img {
  display: block !important;
  height: clamp(32px, 2.6vw, 38px) !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

/* Masque l'ancien span texte KEIHAL si présent */
.navbar-logo-keihal {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   CAT-PAGES — titre & description réduits sur mobile (override final)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kd-cp-title {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
  }
  .kd-cp-sub {
    font-size: 10.5px !important;
    line-height: 1.6 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   PRODUIT — breadcrumb réduit (override final)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kd-pd-breadcrumb-bar {
    font-size: 0.4rem !important;
    letter-spacing: 0.11em !important;
  }
  .kd-pd-breadcrumb-bar a,
  .kd-pd-breadcrumb-bar span {
    font-size: inherit !important;
    letter-spacing: inherit !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   CONFIGURATEUR — dropdown taille réduit sur mobile (override final)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kd-cfg-label {
    font-size: 0.48rem !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 0.65rem !important;
  }
  .kd-cfg-select {
    font-size: 0.56rem !important;
    padding: 0.52rem 2rem 0.52rem 0.9rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   PERSONNALISATION — cartes type de bijou réduites sur mobile
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cfg-type-card {
    padding: 1.2rem 0.7rem !important;
    gap: 0.6rem !important;
  }
  .cfg-type-icon {
    width: 44px !important;
    height: 44px !important;
  }
  .cfg-type-name {
    font-size: 8.5px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   INDEX — brand-intro : espace entre photo et texte sur mobile
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .kd-bi-wrap {
    gap: 0 !important;
  }
  .kd-bi-text {
    padding-top: 4.5rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   DROPDOWN TOUR DE DOIGT — custom élégant (sans fond natif)
   ────────────────────────────────────────────────────────────────── */
.kd-size-dd {
  position: relative;
  width: 100%;
}

.kd-size-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.52rem 0.9rem;
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.38);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.22s ease, color 0.22s ease;
}

.kd-size-trigger:hover,
.kd-size-dd.open .kd-size-trigger {
  border-color: rgba(184,152,106,0.32);
  color: rgba(255,255,255,0.55);
}

.kd-size-chevron {
  width: 9px;
  height: 5px;
  flex-shrink: 0;
  overflow: visible;
  transition: transform 0.22s ease;
}

.kd-size-dd.open .kd-size-chevron {
  transform: rotate(180deg);
}

.kd-size-list {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: rgba(7,7,7,0.97);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-top: none;
  max-height: 180px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 300;
}

.kd-size-dd.open .kd-size-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.kd-size-opt {
  padding: 0.38rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.36);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
  text-transform: uppercase;
}

.kd-size-opt:hover {
  color: rgba(196,166,110,0.8);
  background: rgba(255,255,255,0.02);
}

.kd-size-opt.active {
  color: rgba(196,166,110,0.9);
}

.kd-size-ph {
  display: none;
}

.kd-size-list::-webkit-scrollbar { width: 2px; }
.kd-size-list::-webkit-scrollbar-track { background: transparent; }
.kd-size-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }

/* ──────────────────────────────────────────────────────────────────
   NAVBAR — suppression ligne grise mobile (override final)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #navbar,
  #navbar.scrolled {
    border-bottom: none !important;
    box-shadow: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   LANGUE — affichage inline FR / EN (pas de dropdown, pas de couche vidéo)
   ────────────────────────────────────────────────────────────────── */

/* Masquer le bouton toggle et ses enfants */
#kd-lang-current { display: none !important; }

/* Afficher le menu toujours en ligne, jamais en dropdown */
.kd-lang-menu {
  display:        flex !important;
  position:       static !important;
  flex-direction: row !important;
  align-items:    center !important;
  gap:            0 !important;
  background:     none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border:         none !important;
  box-shadow:     none !important;
  padding:        0 !important;
  margin:         0 !important;
  min-width:      unset !important;
  z-index:        auto !important;
  transform:      none !important;
  animation:      none !important;
  opacity:        1 !important;
  pointer-events: auto !important;
}

/* Afficher seulement FR et EN */
.kd-lang-option { display: none !important; }
.kd-lang-option[data-lang="fr"],
.kd-lang-option[data-lang="en"] {
  display:        inline !important;
  padding:        2px 4px !important;
  font-family:    'Tenor Sans', Arial, sans-serif !important;
  font-size:      0.58rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color:          rgba(255,255,255,0.32) !important;
  cursor:         pointer !important;
  transition:     color 0.18s ease !important;
  white-space:    nowrap !important;
  line-height:    1 !important;
}

/* Séparateur "/" entre FR et EN */
.kd-lang-option[data-lang="fr"]::after {
  content:        ' /';
  color:          rgba(255,255,255,0.18) !important;
  pointer-events: none;
}

/* Option active : plus lumineuse */
.kd-lang-option.active {
  color: rgba(255,255,255,0.78) !important;
}

/* ============================================================
   STABILITÉ UNIVERSELLE — tous navigateurs, tous devices
   Empêche les sauts de scroll sur mobile et Instagram WebView
   ============================================================ */

/* 1 — Désactive le smooth-scroll natif (cause des sauts sur WebView) */
html {
  scroll-behavior: auto !important;
}

/* 2 — Débordement horizontal impossible */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* 3 — Hero height desktop uniquement (≥ 641px)
        Sur mobile ≤ 640px, le bloc "Round 10" gère le hero
        avec calc(100vh - navbar - bottombar) — ne pas écraser.
        dvh = dynamique, s'adapte à la barre d'adresse. */
@media (min-width: 641px) {
  #hero {
    height: 100dvh !important;
    min-height: 600px !important;
  }
}
@supports not (height: 100dvh) {
  @media (min-width: 641px) {
    #hero {
      height: calc(var(--vh, 1vh) * 100) !important;
      min-height: 600px !important;
    }
  }
}

/* 4 — GPU acceleration sur les éléments animés
        Évite les micro-tremblements et repaints pendant le scroll */
.kd-rv {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

/* 5 — Images catalogue : remplissent leur conteneur sans déborder */
img {
  display: block;
}
.product-img-wrap img,
.kd-cat-card-img img,
.kd-sel-card-img img,
.kd-ed-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* NB : .kd-bi-img-wrap img intentionnellement EXCLU —
   l'image brand-intro a son propre sizing (portrait libre, ratio naturel) */

/* 6 — Éléments fixes : compensation sûre pour Instagram WebView */
#navbar,
#kd-mobbar,
.kd-wa-float {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

/* ============================================================
   BRAND-INTRO — layout stable sur TOUS les supports
   Desktop : image gauche · texte droite (grid 2 colonnes)
   Tablette + Mobile : image en haut · texte en bas (flex colonne)
   Le texte ne chevauche JAMAIS l'image.
   ============================================================ */

/* ── Desktop ≥ 961px : grille 2 colonnes ── */
@media (min-width: 961px) {
  .kd-bi-wrap {
    display: grid !important;
    grid-template-columns: 3fr 2fr !important;
    min-height: 90vh !important;
    align-items: stretch !important;
  }
  .kd-bi-media {
    order: 1 !important;
    grid-column: 1 !important;
  }
  .kd-bi-text {
    order: 2 !important;
    grid-column: 2 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BRAND-INTRO MOBILE — Fidèle au modèle de référence
   Image avec marges · titre chevauchant bas de l'image · corps en-dessous
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* ── Section : espace respirant au-dessus et en-dessous ── */
  #brand-intro {
    padding-top: 56px !important;    /* espace noir premium entre hero et image */
    padding-bottom: 52px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #080808 !important;
    overflow: visible !important;
  }

  /* ── Conteneur : block simple, position relative pour z-index ── */
  #brand-intro .kd-bi-wrap {
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    min-height: unset !important;
  }

  /* ── Colonne image : marges latérales + hauteur fixe ── */
  #brand-intro .kd-bi-media {
    position: relative !important;
    display: block !important;
    width: calc(100% - 42px) !important;   /* ~21px de chaque côté */
    margin-left: auto !important;
    margin-right: auto !important;
    height: 580px !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    order: unset !important;
  }

  /* ── Dégradé discret en bas de l'image — lisibilité du titre ── */
  #brand-intro .kd-bi-media::after {
    content: '' !important;
    position: absolute !important;
    inset: 45% 0 0 0 !important;
    background: linear-gradient(
      to top,
      rgba(8,8,8,0.75) 0%,
      rgba(8,8,8,0.20) 55%,
      transparent 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* ── Wrapper image : remplit la colonne ── */
  #brand-intro .kd-bi-img-wrap {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
  }

  /* ── Image : cover dans le cadre, cadrage centré haut ── */
  #brand-intro .kd-bi-img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center 22% !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* ── Bloc texte : flux normal, remonté pour chevaucher le bas de l'image ──
     margin-top négatif = le titre monte visuellement sur l'image.
     Le corps de texte reste, lui, sous l'image grâce à son margin-top positif. ── */
  #brand-intro .kd-bi-text {
    position: relative !important;
    display: block !important;
    margin-top: -128px !important;         /* tire le bloc vers le haut */
    padding: 0 21px !important;            /* s'aligne avec les marges de l'image */
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    z-index: 2 !important;
    order: unset !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* ── Titre : visible sur l'image, bas-gauche ── */
  #brand-intro .kd-bi-headline {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2.7rem, 11.5vw, 3.3rem) !important;
    font-weight: 300 !important;
    font-style: italic !important;
    line-height: 1.06 !important;
    color: rgba(248, 244, 238, 0.97) !important;
    text-align: left !important;
    margin: 0 0 0 !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.38) !important;
  }

  /* ── Corps de texte : même style et taille que .kd-ed-body (éditorial) ── */
  #brand-intro .kd-bi-body {
    display: block !important;
    margin-top: 58px !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    letter-spacing: 0.01em !important;
    color: rgba(240, 232, 216, 0.5) !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  /* ── Ligne CTA + symbole : sous le corps de texte ── */
  #brand-intro .kd-bi-cta-row {
    margin-top: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
  }

  /* ── Symbole Keihal : petit, discret ── */
  #brand-intro .kd-sym--bi {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.45 !important;
    flex-shrink: 0 !important;
  }
}

/* ── Hero mobile : restauration hauteur Round 10 (version validée) ── */
@media (max-width: 640px) {
  #hero {
    height: calc(100vh - var(--navbar-h, 65px) - 60px) !important;
    min-height: 400px !important;
    max-height: none !important;
  }
}
@supports (height: 1svh) {
  @media (max-width: 640px) {
    #hero {
      height: calc(100svh - var(--navbar-h, 65px) - 60px) !important;
    }
  }
}