/* =============================================
   TONIO COIFFURE — clair.css
   Light version: the cream panels of alternative 01 "Maison éditoriale".
   Loaded after style.css; style.css itself is unchanged.

   Rhythm: video hero → cream story → green services → cream gallery →
   green Keune → pale cream reviews → green booking → deep green footer.
   ============================================= */

:root {
  --cream-deep: #E8DDCB;   /* second light panel, for alternation (was #EDE5D8: too close to cream) */
  --ink:        #1A3D2B;   /* text on cream = the brand green */
  --ink-soft:   #34503F;   /* body copy on cream (8:1; was #4F6357, too faint at weight 300) */
  --gold-ink:   #715629;   /* gold for small text on cream (5.9:1, 5:1 on cream-deep); #C9A96E is 2:1 there */
  --gold-line:  #9C7B45;   /* gold for icons / hairlines on cream (3.5:1) */
  --green-deep: #13301F;   /* footer, a step below --green-dark */
}

body {
  background: var(--cream);
  color: var(--ink);
}

/* Section titles are green on cream by default; dark sections set them back. */
.section-title { color: var(--ink); }
.section-label { color: var(--gold-ink); }

/* ---------- Weight on cream ----------
   style.css sets text at weight 300 everywhere. Thin strokes read fine light-on-dark,
   but dark-on-cream they wash out, so on cream panels text goes up a weight and the
   tiny serif labels switch to the sans at 500. */
.section-philosophy .philosophy-body,
.section-gallery p,
.section-social p,
.team-hero-content p,
.service-detail-content > p,
.member-info > p,
.member-specialities li,
.service-price-list .item-name { font-weight: 400; }

.section-philosophy .section-label,
.section-gallery .section-label,
.section-social .section-label,
.team-hero-content .section-label,
.service-detail-content .section-label,
.member-info .section-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* ---------- Dark sections keep cream text + original gold ---------- */
.section-services .section-title,
.section-products .section-title,
.section-booking .section-title,
.section-team-cta .section-title { color: var(--cream); }
.section-services .section-label,
.section-products .section-label,
.section-booking .section-label,
.section-team-cta .section-label { color: var(--gold); }

/* =============================================
   NAVBAR — over the video it stays cream; once solid it turns cream-on-green
   ============================================= */
#navbar.scrolled {
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(26, 61, 43, 0.12);
}
#navbar.scrolled .nav-links a { color: var(--ink); }
#navbar.scrolled .nav-links a:hover,
#navbar.scrolled .nav-active { color: var(--gold-ink) !important; }
#navbar.scrolled .lang-toggle {
  color: var(--ink);
  border-color: rgba(26, 61, 43, 0.25);
}
#navbar.scrolled .lang-toggle button.lang-active { color: var(--gold-ink); }
#navbar.scrolled .hamburger span { background: var(--ink); }

.mobile-nav { background: var(--cream); }
.mobile-nav ul a { color: var(--ink); }
.mobile-nav ul a:hover { color: var(--gold-ink); }
.mobile-nav .lang-toggle { color: var(--ink); border-color: rgba(26, 61, 43, 0.25); }
.mobile-nav .lang-toggle button.lang-active { color: var(--gold-ink); }
/* The open menu is cream, so the close cross must be green even over the hero */
.hamburger.active span { background: var(--ink); }

/* =============================================
   HERO — same fullscreen video, a lighter veil
   ============================================= */
.hero-overlay { background: rgba(0, 0, 0, 0.36); }

/* =============================================
   PHILOSOPHY — cream panel: the page brightens straight out of the video
   ============================================= */
.section-philosophy { background: var(--cream); }
.philosophy-body { color: var(--ink-soft); }

/* =============================================
   SERVICES — green panel; cards keep style.css's cream-on-dark text and
   original gold, only their borders are retuned for green
   ============================================= */
.section-services { background: var(--green-dark); }
.service-card { border-color: rgba(245, 240, 232, 0.16); }
.service-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.service-card p { color: rgba(245, 240, 232, 0.78); }

/* =============================================
   GALLERY — cream panel
   ============================================= */
.section-gallery { background: var(--cream); }
.gallery-card { border-color: rgba(26, 61, 43, 0.14); }
.gallery-caption { color: var(--ink-soft); font-weight: 400; }
.gallery-instagram .instagram-link { color: var(--gold-ink); font-weight: 500; }   /* #C9A96E is only 2:1 on cream */
.gallery-card:hover {
  border-color: var(--gold-line);
  box-shadow: 0 10px 30px rgba(26, 61, 43, 0.1);
}
.gallery-arrow {
  background: rgba(245, 240, 232, 0.92);
  border-color: var(--gold-line);
  color: var(--ink);
}
.gallery-arrow:hover { background: var(--ink); color: var(--cream); }

/* =============================================
   PRODUCTS (KEUNE) — green panel (was charcoal)
   ============================================= */
.section-products { background: var(--green-dark); }
/* A green button disappears on a green panel: outline it in cream instead */
.section-products .btn-primary {
  background: transparent;
  border-color: rgba(245, 240, 232, 0.6);
  color: var(--cream);
}
.section-products .btn-primary:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

/* =============================================
   SOCIAL PROOF — pale cream panel
   ============================================= */
.section-social { background: var(--cream-deep); }
.rating-number { color: var(--gold-ink); }
.rating-scale  { color: rgba(125, 95, 46, 0.55); }
.rating-sub    { color: var(--ink-soft); }
.testimonial-card {
  background: var(--cream);
  border-color: rgba(26, 61, 43, 0.12);
}
.testimonial-card:hover { border-color: var(--gold-line); }
.quote-mark { color: var(--gold-line); opacity: 0.6; }
.testimonial-card p { color: var(--ink-soft); }
.testimonial-author { color: var(--gold-ink); }

/* =============================================
   BOOKING — green panel (was charcoal)
   ============================================= */
.section-booking {
  background: var(--green-dark);
  border-top: none;
  border-bottom: none;
  box-shadow: none;
}

/* =============================================
   FOOTER — deep green
   ============================================= */
#footer {
  background: var(--green-deep);
  border-top: 1px solid rgba(201, 169, 110, 0.3);
}

/* =============================================
   SERVICES + TEAM PAGES — cream page header and rows
   ============================================= */
.team-hero { background: linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 100%); }
.team-hero-content h1 { color: var(--ink); }
.team-hero-content p  { color: var(--ink-soft); }

/* Services detail rows */
.service-detail-row:nth-child(odd)  { background: var(--cream); }
.service-detail-row:nth-child(even) { background: var(--cream-deep); }
.service-medallion { border-color: rgba(156, 123, 69, 0.5); }
.service-medallion::before { border-color: rgba(156, 123, 69, 0.22); }
.service-medallion svg { color: var(--gold-line); }
.service-detail-content > p { color: var(--ink-soft); }
.service-price-list li { border-bottom-color: rgba(26, 61, 43, 0.16); }
.service-price-list .item-name   { color: var(--ink); }
.service-price-list .item-leader { border-bottom-color: rgba(26, 61, 43, 0.4); }
/* Prices: the thin serif at 300 was the least legible thing on the page */
.service-price-list .item-price  {
  color: var(--gold-ink);
  font-weight: 600;
  font-size: 1.32rem;
}

/* Team member rows */
.member-row:nth-child(odd)  { background: var(--cream); }
.member-row:nth-child(even) { background: var(--cream-deep); }
.member-info h2  { color: var(--ink); }
.member-info > p { color: var(--ink-soft); }
.member-specialities li { color: var(--ink-soft); }
.member-specialities li::before { background: var(--gold-line); }