/*
=====================================================
  L'instant de Soie — Brand Override CSS
  Palette officielle extraite de "Lignes de la marque"
  S'applique PAR DESSUS style.css (charger après)
=====================================================

  Palette :
  Rose poudré    #CE9886  → accent principal (remplace gold)
  Beige rosé     #B29A8D  → accent secondaire
  Lavande gris   #DFDADD  → fond sombre (remplace cream-dark)
  Mauve gris     #93838A  → muted / textes secondaires
  Blanc doux     #F4F4F4  → fond clair (remplace cream)
  Noir doux      #3D3D3D  → texte principal (remplace ink)

  Typo :
  Display        Playfair Display  (proche de la police "Chloé")
  Body           DM Sans           (proche de NOURD)
  Script         Great Vibes       (proche de "Trully")
=====================================================
*/

/* ── Variables ── */
:root {
  --lum-gold:        #CE9886;
  --lum-gold-dark:   #B29A8D;
  --lum-ink:         #3D3D3D;
  --lum-muted:       #93838A;
  --lum-cream:       #F4F4F4;
  --lum-cream-dark:  #DFDADD;
  --lum-line:        #e8e2e5;
  --lum-shadow:      0 18px 40px -20px rgba(61, 61, 61, .15);
  --lum-shadow-sm:   0 8px 20px -10px rgba(61, 61, 61, .12);

  --font-display:    'Playfair Display', Georgia, serif;
  --font-body:       'DM Sans', 'Inter', system-ui, sans-serif;
  --font-script:     'Great Vibes', cursive;

  /* Sage non utilisé dans ce thème — neutralisé */
  --lum-sage:        #B29A8D;
  --lum-sage-dark:   #93838A;
  --lum-sage-light:  #DFDADD;
}

/* ── Body ── */
body { background: var(--lum-cream); }

/* ── Topbar ── */
.lum-topbar {
  background: #3D3D3D;
  border-bottom: 1px solid rgba(206,152,134,.2);
}

/* ── Header ── */
.lum-header { background: #F4F4F4; border-bottom: 1px solid rgba(206,152,134,.18); }
.lum-header.scrolled { background: rgba(244,244,244,.97); }

/* Brand name */
.lum-brand {
  font-family: var(--font-display);
  color: var(--lum-ink) !important;
  letter-spacing: .04em;
}
.lum-brand:hover { color: var(--lum-gold) !important; }

/* Nav links */
.lum-nav > li > a { color: var(--lum-ink); }
.lum-nav > li > a:hover,
.lum-nav > li.active > a { color: var(--lum-gold); }
.lum-nav > li > a::after { background: var(--lum-gold); }

/* Submenu — Lumera natif + classes WordPress */
.lum-submenu,
.lum-nav .sub-menu {
  background: #fff;
  border-top: 2px solid var(--lum-gold);
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  list-style: none;
  padding: .5rem 0;
  margin: 0;
}
.lum-submenu li a,
.lum-nav .sub-menu li a { color: var(--lum-ink); display: block; padding: .55rem 1.25rem; }
.lum-submenu li a:hover,
.lum-nav .sub-menu li a:hover { color: var(--lum-gold); background: #F4F4F4; }

/* Affichage au hover */
.has-sub:hover .lum-submenu,
.lum-nav .menu-item-has-children:hover .sub-menu { display: block; }

/* Position relative sur le parent */
.has-sub,
.lum-nav .menu-item-has-children { position: relative; }

/* ── Buttons ── */
.btn-lum {
  background: var(--lum-gold);
  color: #fff;
  border: 1px solid var(--lum-gold);
}
.btn-lum:hover {
  background: var(--lum-gold-dark);
  border-color: var(--lum-gold-dark);
  color: #fff;
}
.btn-lum-outline {
  border: 1px solid var(--lum-gold);
  color: var(--lum-gold);
  background: transparent;
}
.btn-lum-outline:hover {
  background: var(--lum-gold);
  color: #fff;
}
.btn-lum-light {
  background: rgba(206,152,134,.12);
  color: var(--lum-gold);
  border: 1px solid rgba(206,152,134,.3);
}
.btn-lum-light:hover {
  background: var(--lum-gold);
  color: #fff;
}

/* ── Eyebrow ── */
.eyebrow {
  color: var(--lum-gold);
  letter-spacing: .14em;
}

/* ── Hero pages internes — structure & couleurs ── */
.page-hero {
  position: relative;
  height: 55vh;
  min-height: 320px;
  max-height: 680px;
  overflow: hidden;
}
.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero-content {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 2;
}
.page-hero-content,
.page-hero-content h1,
.page-hero-content h2,
.page-hero-content p { color: #fff; }
.page-hero-content .eyebrow { color: var(--lum-gold); }

/* Overlay renforcé pour les pages internes */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30,27,24,.35) 0%,
    rgba(30,27,24,.60) 50%,
    rgba(30,27,24,.82) 100%
  );
  pointer-events: none;
}

/* ── Position du texte hero (option par page) ── */
.page-hero-content.hero-gauche {
  left: 5%;
  transform: none;
  text-align: left;
  width: 55%;
}
.page-hero-content.hero-droite {
  left: auto;
  right: 5%;
  transform: none;
  text-align: right;
  width: 55%;
}
.page-hero-content.hero-centre {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* ── Hero accueil ── */
.lum-hero::after {
  background: linear-gradient(
    to bottom,
    rgba(61,61,61,.45) 0%,
    rgba(61,61,61,.2) 60%,
    rgba(61,61,61,.5) 100%
  );
}

/* ── Slider dots ── */
.lum-dot.active,
.lum-dot:hover { background: var(--lum-gold); }
.lum-dot { border: 2px solid rgba(206,152,134,.5); }

/* ── Section titles ── */
.section-title em { color: var(--lum-gold); }

/* ── Section backgrounds ── */
.bg-cream      { background: var(--lum-cream); }
.bg-cream-dark { background: var(--lum-cream-dark); }

/* ── About section ── */
.about-label {
  background: var(--lum-gold);
  color: #fff;
}
.about-stat { border-color: rgba(206,152,134,.25); }
.about-stat .num { color: var(--lum-gold); }

/* ── Service cards ── */
.service-card {
  border: 1px solid rgba(206,152,134,.2);
  background: #fff;
}
.service-card:hover { border-color: var(--lum-gold); }
.service-card .price { color: var(--lum-gold); }
.service-card .tag {
  background: rgba(206,152,134,.12);
  color: var(--lum-gold);
}

/* ── Team cards ── */
.team-card .social a:hover { color: var(--lum-gold); }

/* ── Testimonials ── */
.testimonial { background: #fff; border: 1px solid rgba(206,152,134,.15); }
.testimonial .stars { color: var(--lum-gold); }
.testimonial::before { color: rgba(206,152,134,.2); }

/* ── CTA banner ── */
.cta-banner { background: var(--lum-gold); }
.cta-banner .eyebrow { color: rgba(255,255,255,.8); }
.cta-banner .btn-lum {
  background: #fff;
  color: var(--lum-gold);
  border-color: #fff;
}
.cta-banner .btn-lum:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* ── Footer ── */
.lum-footer { background: #3D3D3D; }
.lum-footer h3 { color: var(--lum-gold); }
.lum-footer a:hover { color: var(--lum-gold); }
.footer-brand {
  font-family: var(--font-display);
  color: #fff !important;
}
.footer-brand:hover { color: var(--lum-gold) !important; }
.lum-footer-bottom { border-top: 1px solid rgba(206,152,134,.2); }
.social a { border: 1px solid rgba(206,152,134,.3); color: rgba(255,255,255,.6); }
.social a:hover { border-color: var(--lum-gold); color: var(--lum-gold); background: rgba(206,152,134,.1); }

/* ── Scroll-up button ── */
.scroll-up { background: var(--lum-gold); }
.scroll-up:hover { background: var(--lum-gold-dark); }

/* ── Mobile drawer ── */
.lum-mobile-drawer { background: #3D3D3D; }
.lum-mobile-drawer .lum-brand { color: #fff !important; }
.lum-mobile-drawer ul li a { color: rgba(255,255,255,.8); border-bottom-color: rgba(206,152,134,.1); }
.lum-mobile-drawer ul li a:hover { color: var(--lum-gold); }
.lum-drawer-close { color: rgba(255,255,255,.6); }
.lum-drawer-close:hover { color: var(--lum-gold); }
.lum-burger span,
.lum-burger span::before,
.lum-burger span::after { background: var(--lum-ink); }

/* ── Accent script — utiliser Great Vibes pour les éléments signature ── */
.brand-script {
  font-family: var(--font-script);
  color: var(--lum-gold);
}

/* ── Inputs & forms ── */
input:focus, textarea:focus, select:focus {
  border-color: var(--lum-gold) !important;
}

/* ── Subtle refinements ── */
/* Teinte de fond légèrement rosée sur les cards dark */
.tarif-card-head,
.soin-groupe-head,
.contact-info-card,
.cta-epilation,
.cta-onglerie,
.cta-soins { background: var(--lum-gold); }

/* Ligne de séparation douce */
hr { border-color: rgba(206,152,134,.2); }

/* ── Mobile — reset des variantes hero en pleine largeur ───────────── */
@media (max-width: 767px) {
  .page-hero { height: 48vh; }
  .page-hero-content.hero-gauche,
  .page-hero-content.hero-droite {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
  }
}

/* ── Grands écrans : alignement hero sur le container ──────────────────
   Sur des écrans > 1440px, left:5% déplace le texte hors de la zone
   container. On recalcule dynamiquement pour coller au container.
   ───────────────────────────────────────────────────────────────────── */

/* ≥ 1440px — écrans larges (iMac 27", laptop rétina 1440p) */
@media (min-width: 1440px) {
  .page-hero-content.hero-gauche {
    left: max(5%, calc((100% - 1240px) / 2));
    width: 52%;
  }
  .page-hero-content.hero-droite {
    right: max(5%, calc((100% - 1240px) / 2));
    width: 52%;
  }
}

/* ≥ 1920px — Full HD / 2K */
@media (min-width: 1920px) {
  /* Container légèrement élargi */
  .container { max-width: 1400px; }
  .lum-header .container { max-width: 1560px; }

  /* Hero — hauteur et alignement du texte */
  .page-hero { max-height: 760px; }
  .page-hero-content.hero-gauche {
    left: calc((100% - 1400px) / 2);
    width: 50%;
  }
  .page-hero-content.hero-droite {
    right: calc((100% - 1400px) / 2);
    width: 50%;
  }
  .page-hero-content.hero-centre { max-width: 1400px; }

  /* Slider accueil */
  .lum-slider { max-height: 920px; }

  /* Sections — un peu plus d'air */
  .section { padding: 130px 0; }
}

/* ≥ 2560px — QHD / 4K */
@media (min-width: 2560px) {
  .container { max-width: 1600px; }
  .lum-header .container { max-width: 1760px; }

  .page-hero { max-height: 860px; }
  .page-hero-content.hero-gauche {
    left: calc((100% - 1600px) / 2);
    width: 48%;
  }
  .page-hero-content.hero-droite {
    right: calc((100% - 1600px) / 2);
    width: 48%;
  }
  .page-hero-content.hero-centre { max-width: 1600px; }

  .lum-slider { max-height: 1020px; }
  .section { padding: 160px 0; }
}