/* ============================================================
   LILIAN — LUMIÈRE DU DÉSERT
   v=001 · 2026-06-23
   Pivot lumineux inspiré de la photo « Un passeur au service de
   la voie » : sable doré, ciel pâle, plein jour, ondes de chaleur.
   Charge en DERNIER · surcharge lilian-monastique (encre/bronze).
   Esprit : lumineux, chaleureux, ondes douces, sérénité du désert.
   ============================================================ */

/* ------------------------------------------------------------
   1. PALETTE — dérivée pixel de la photo (sable · ciel · or)
   ------------------------------------------------------------ */
:root,
html, body, .main-content {
  /* tons désert */
  --d-ciel:        #d4e4ee;   /* bleu ciel pâle (haut) */
  --d-ciel-clair:  #e9f1f5;   /* ciel près de l'horizon */
  --d-brume:       #f4ecdd;   /* brume chaude de l'horizon */
  --d-sable-clair: #faf3e6;   /* sable lumineux — fond principal */
  --d-sable:       #f1e3c9;   /* sable */
  --d-sable-2:     #e7d3ac;   /* sable moyen */
  --d-dore:        #dcbb7c;   /* sable doré */
  --d-or:          #cf9f44;   /* OR lumineux — accent */
  --d-or-clair:    #e8bd5c;   /* or clair — hover/halo */
  --d-or-pale:     #f0d79a;   /* or très clair */
  --d-ocre:        #b07f42;   /* ocre terre */
  --d-terre:       #7c5a30;   /* terre chaude */
  --d-encre:       #3c2d1d;   /* brun très foncé chaud (≈ texte fort) */
  --d-texte:       #463525;   /* texte principal */
  --d-texte-doux:  #6e5a44;   /* texte secondaire */
  --d-blanc-chaud: #fffdf7;   /* cartes / blanc cassé chaud */
  --d-trait:       rgba(207,159,68,0.30);
  --d-trait-doux:  rgba(70,53,37,0.12);

  /* ----- remap des variables monastiques (réchauffe tout d'un coup) ----- */
  --m-encre:        var(--d-encre) !important;
  --m-encre-2:      #4a3826 !important;
  --m-ardoise:      var(--d-sable) !important;
  --m-pierre:       var(--d-texte-doux) !important;
  --m-lin:          var(--d-sable-clair) !important;
  --m-lin-2:        var(--d-sable) !important;
  --m-bronze:       var(--d-or) !important;
  --m-bronze-clair: var(--d-or-clair) !important;
  --m-cuivre-sombre:var(--d-ocre) !important;
  --m-os:           #fffaf0 !important;
  --m-ardoise-vert: var(--d-sable-2) !important;
  --m-trait:        var(--d-trait) !important;
  --m-trait-clair:  var(--d-trait-doux) !important;

  /* ----- remap des variables « Emilie » legacy (au cas où) ----- */
  --lumiere-doree:  var(--d-or) !important;
  --terre-sacree:   var(--d-ocre) !important;
  --foret-profonde: var(--d-terre) !important;
  --souffle-ivoire: var(--d-sable-clair) !important;
  --souffle-ivoire-deep: var(--d-sable) !important;
  --texte-principal:var(--d-texte) !important;
  --texte-doux:     var(--d-texte-doux) !important;
  --accent:         var(--d-or) !important;
  --bg-primary:     var(--d-sable-clair) !important;
  --bg-secondary:   var(--d-sable) !important;
}

/* ------------------------------------------------------------
   2. FOND GLOBAL — lumière de plein jour + ondes de chaleur
   ------------------------------------------------------------ */
body {
  background: var(--d-sable-clair) !important;
  color: var(--d-texte) !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse 60% 50% at 75% 8%,  rgba(244,207,120,0.22), transparent 60%),
    radial-gradient(ellipse 70% 55% at 12% 85%, rgba(207,159,68,0.10),  transparent 62%),
    radial-gradient(circle at 50% -8%,          rgba(212,228,238,0.45), transparent 55%) !important;
  mix-blend-mode: normal !important;
}

/* « belles ondes » : fines ondulations de lumière qui respirent */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: -10% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    repeating-radial-gradient(circle at 50% 120%,
      rgba(207,159,68,0.045) 0 1px,
      transparent 1px 64px);
  opacity: 0.7 !important;
  animation: desert-ondes 26s ease-in-out infinite alternate !important;
}
@keyframes desert-ondes {
  from { transform: scale(1)   translateY(0); opacity: 0.55; }
  to   { transform: scale(1.08) translateY(-14px); opacity: 0.8; }
}

.main-content > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   3. NAV — barre claire, translucide, lumineuse
   ------------------------------------------------------------ */
.nav, nav.nav,
.nav.scrolled, .nav.is-scrolled, .nav[class*="scroll"],
.nav-bar, .navbar, header.site-header, .lilian-header {
  background: rgba(250,243,230,0.82) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(14px) !important;
  backdrop-filter: saturate(1.1) blur(14px) !important;
  border-bottom: 1px solid var(--d-trait) !important;
  box-shadow: 0 4px 24px -16px rgba(124,90,48,0.45) !important;
}
.nav-brand-text, .nav.scrolled .nav-brand-text { color: var(--d-encre) !important; }
.nav-brand-text em { color: var(--d-or) !important; }

.nav-burger, .nav-menu-toggle, .menu-toggle {
  border: 1px solid var(--d-trait) !important;
  color: var(--d-terre) !important;
  background: rgba(255,253,247,0.5) !important;
}
.nav-burger .burger-icon path { stroke: var(--d-terre) !important; }
.nav-burger:hover { border-color: var(--d-or) !important; color: var(--d-ocre) !important; }
.nav-burger:hover .burger-icon path { stroke: var(--d-ocre) !important; }
.burger-label { color: var(--d-terre) !important; }

.nav-cta, .nav-cta-compact, a.nav-cta,
.nav.scrolled .nav-cta {
  background: transparent !important;
  color: var(--d-ocre) !important;
  border: 1px solid var(--d-or) !important;
}
.nav-cta:hover { background: var(--d-or) !important; color: #fff !important; }

/* logo central (cercle solaire) : on le RÉVÈLE de nouveau, doré */
.nav-brand .logo-mark, .nav-brand .brand-lilian, .logo-mark.brand-lilian {
  display: inline-flex !important;
}

/* robustesse burger (évitait le blanc sur blanc) */
.nav .nav-burger, .nav-burger.nav-burger-nature { color: var(--d-terre) !important; }

/* ------------------------------------------------------------
   3b. PANNEAU MENU OUVERT — fond sable solide
   (corrige le menu « invisible / blanc sur blanc » : il était transparent)
   ------------------------------------------------------------ */
.menu-panel {
  background: linear-gradient(165deg, var(--d-sable-clair) 0%, var(--d-sable) 52%, var(--d-dore) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.menu-panel-eyebrow { color: var(--d-ocre) !important; }
.menu-panel-links a { color: var(--d-encre) !important; }
.menu-panel-links a:hover, .menu-panel-links a:focus { color: var(--d-ocre) !important; }
.menu-panel-links a[data-i]::before { color: var(--d-or) !important; opacity: 0.8 !important; }
.menu-panel-close {
  color: var(--d-terre) !important;
  border: 1px solid var(--d-or) !important;
  background: rgba(255,255,255,0.45) !important;
}
.menu-panel-close svg path { stroke: var(--d-terre) !important; }
.menu-panel-footer, .menu-panel-footer span { color: var(--d-texte-doux) !important; }
.menu-panel-cta .btn-gold { color: #fff !important; }

/* ------------------------------------------------------------
   4. HERO — le désert lumineux de la photo
   ------------------------------------------------------------ */
.hero, .lilian-hero {
  background: #e7d6b6 !important; /* fallback sable */
  position: relative !important;
  overflow: hidden !important;
}
/* pas de soleil CSS : la vraie photo porte son ciel */
.hero::before { content: none !important; }

/* VRAIE PHOTO DU DÉSERT (Erg Chigaga, Maroc) en fond plein */
.hero-bg-img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
  background: #e7d6b6 url('../img/photos/desert-hero.webp') center 58% / cover no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1.05) contrast(1.02) !important;
  z-index: 0 !important;
  animation: hero-derive 38s ease-in-out infinite alternate !important;
}
@keyframes hero-derive {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.09) translateY(-10px); }
}
/* voile lumineux : éclaircit derrière le texte sombre, garde l'éclat du sable */
.hero-vignette {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 76% 56% at 50% 44%, rgba(250,244,232,0.62), rgba(250,244,232,0.12) 62%, transparent 78%),
    linear-gradient(180deg, rgba(248,240,225,0.34) 0%, rgba(248,240,225,0.04) 42%, rgba(238,221,193,0.30) 100%) !important;
}

.hero-eyebrow, .hero .section-eyebrow {
  color: var(--d-ocre) !important;
  text-shadow: 0 1px 10px rgba(255,250,240,0.9) !important;
}
.hero-title, .hero h1 {
  color: var(--d-encre) !important;
  text-shadow: 0 2px 22px rgba(255,250,240,0.9), 0 1px 0 rgba(255,255,255,0.65) !important;
}
.hero-title em, .hero h1 em {
  color: #b9842a !important;
  text-shadow: 0 2px 18px rgba(255,250,240,0.85) !important;
}
.hero-tagline, .hero-subtitle {
  color: var(--d-terre) !important;
  text-shadow: 0 1px 10px rgba(255,250,240,0.92) !important;
}
.hero-words, .hero .words-line {
  color: var(--d-ocre) !important;
  text-shadow: 0 1px 10px rgba(255,250,240,0.92) !important;
}
.scroll-cue { color: var(--d-terre) !important; text-shadow: 0 1px 8px rgba(255,250,240,0.9) !important; }

/* ------------------------------------------------------------
   5. BOUTONS — or lumineux, douceur (légère rondeur + halo)
   ------------------------------------------------------------ */
.btn-gold, .btn-primary,
.hero .btn, .hero a.btn,
.contact-form button, .form-submit {
  background: linear-gradient(135deg, var(--d-or-clair), var(--d-or)) !important;
  color: #fff !important;
  border: 1px solid var(--d-or) !important;
  border-radius: 9px !important;
  box-shadow: 0 12px 28px -12px rgba(207,159,68,0.7), inset 0 1px 0 rgba(255,255,255,0.35) !important;
  text-shadow: none !important;
}
.btn-gold:hover, .btn-primary:hover,
.contact-form button:hover {
  background: linear-gradient(135deg, #f0c96a, var(--d-or-clair)) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px -12px rgba(207,159,68,0.8) !important;
}
.btn-outline, .btn-ghost, .btn-secondary,
.hero .btn-outline {
  background: rgba(255,255,255,0.4) !important;
  color: var(--d-ocre) !important;
  border: 1.4px solid var(--d-or) !important;
  border-radius: 9px !important;
}
.btn-outline:hover, .hero .btn-outline:hover {
  background: var(--d-or) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   6. SECTIONS — tout passe au sable lumineux
   ------------------------------------------------------------ */
.section-light, .section-cream, .section-ivoire,
.about-section, #about,
section[class*="cream"], section[class*="ivoire"] {
  background: var(--d-sable-clair) !important;
}
.section-mid, .section-stone, section[class*="stone"],
.transmission, section.transmission, section[id="transmission"] {
  background: linear-gradient(180deg, var(--d-sable) 0%, var(--d-sable-clair) 100%) !important;
  background-image: linear-gradient(180deg, var(--d-sable) 0%, var(--d-sable-clair) 100%) !important;
}

/* sections jadis « sombres » → lumière + lisibilité */
.section-dark, section[class*="dark"], section[class*="forest"] {
  background: linear-gradient(180deg, var(--d-sable-clair) 0%, var(--d-sable) 100%) !important;
}
.section-dark .section-title, section[class*="dark"] h2 { color: var(--d-encre) !important; }

.section-title, section h2 { color: var(--d-encre) !important; }
.section-title em, h2 em {
  -webkit-text-fill-color: var(--d-or) !important;
  color: var(--d-or) !important;
}
.section-eyebrow, .soin-eyebrow {
  color: var(--d-ocre) !important;
}
.section-eyebrow::before, .section-eyebrow::after { color: var(--d-or) !important; }

/* séparateurs : courbe dorée douce (rappel de dune) */
hr, .separator, .section-divider {
  border: 0 !important;
  height: 2px !important;
  width: 120px !important;
  background: linear-gradient(90deg, transparent, var(--d-or), transparent) !important;
  margin: 48px auto !important;
}

/* ------------------------------------------------------------
   7. CITATIONS — clair lumineux (étaient encre)
   ------------------------------------------------------------ */
.quote-section, .ritual-break,
.contact-section, #contact {
  background: linear-gradient(180deg, var(--d-sable) 0%, var(--d-brume) 50%, var(--d-sable-clair) 100%) !important;
  border-top: 1px solid var(--d-trait) !important;
  border-bottom: 1px solid var(--d-trait) !important;
}
.quote-section blockquote, .quote-section p, .quote-section .quote-text,
.ritual-break p, .ritual-quote {
  color: var(--d-texte) !important;
}
.quote-section em, .ritual-break em, .quote-text em, .ritual-quote em {
  color: var(--d-ocre) !important;
}
.quote-author, .quote-section .quote-author,
.ritual-signature { color: var(--d-ocre) !important; }
.contact-section .section-title, .contact-section h2 { color: var(--d-encre) !important; }

/* ------------------------------------------------------------
   8. CARTES — blanc chaud, douceur, ombre dorée légère
   ------------------------------------------------------------ */
.soin-card, .promesse-card, .souffle-card,
.transmission-card, .ecrit-card,
.card, .stat-card, .sp-sb-stat,
.about-histoire, .about-mots-perso {
  background: var(--d-blanc-chaud) !important;
  background-image: none !important;
  border: 1px solid var(--d-trait) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px -28px rgba(124,90,48,0.5) !important;
}
.soin-card:hover, .promesse-card:hover, .souffle-card:hover,
.transmission-card:hover {
  border-color: var(--d-or) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 50px -28px rgba(207,159,68,0.65) !important;
}
.about-mots-perso { border-left: 3px solid var(--d-or) !important; }

/* carte signature : passe en OR lumineux (était encre) */
.soin-card.featured, .soin-card-signature, .card-signature {
  background: linear-gradient(150deg, var(--d-ocre), var(--d-terre)) !important;
  border-color: var(--d-or) !important;
  box-shadow: 0 24px 54px -24px rgba(124,90,48,0.7) !important;
}
.soin-card.featured *, .soin-card-signature * { color: var(--d-sable-clair) !important; }
.soin-card.featured .soin-title { color: #fff !important; }
.soin-card.featured .soin-price { color: var(--d-or-pale) !important; }

/* pills / badges / tags */
.tag, .pill, .badge, .transmission-tag, .transmission-pill,
.about-badges span {
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid var(--d-or) !important;
  color: var(--d-ocre) !important;
}
.tag.tag-featured, .transmission-pill.featured,
.about-badges span:last-child {
  background: linear-gradient(135deg, var(--d-or-clair), var(--d-or)) !important;
  color: #fff !important;
}

/* chiffres / stats / prix */
.promesse-card .promesse-number, .stat-number,
.soin-price, .price-tag,
.souffle-card .souffle-number, .souffle-eyebrow,
.soin-icon, .promesse-symbol, .promesse-icon { color: var(--d-or) !important; }
.promesse-label, .stat-label, .soin-price-suffix, .soin-meta { color: var(--d-texte-doux) !important; }

/* ------------------------------------------------------------
   9. FAQ / TEXTES
   ------------------------------------------------------------ */
.faq-item, .faq-card { border-bottom: 1px solid var(--d-trait) !important; }
.faq-question { color: var(--d-encre) !important; }
.faq-answer, p, li { color: var(--d-texte) !important; }
.about-text p, .section-sub, .section-sub-note { color: var(--d-texte) !important; }
.about-quote { color: var(--d-terre) !important; }
.about-histoire summary { color: var(--d-encre) !important; }
.about-histoire summary em { color: var(--d-or) !important; }

/* ------------------------------------------------------------
   10. CONTACT — formulaire blanc chaud lisible
   ------------------------------------------------------------ */
.contact-form, .form-container {
  background: var(--d-blanc-chaud) !important;
  border: 1px solid var(--d-or) !important;
  border-radius: 16px !important;
  box-shadow: 0 26px 60px -34px rgba(124,90,48,0.55) !important;
}
.contact-form input, .contact-form textarea, .contact-form select,
input[type="text"], input[type="email"], textarea {
  color: var(--d-encre) !important;
  border-bottom: 1px solid var(--d-trait) !important;
}
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--d-or) !important; }
.contact-form label { color: var(--d-texte-doux) !important; }

/* ------------------------------------------------------------
   11. FOOTER — sable au soleil, ancrage chaud mais lumineux
   ------------------------------------------------------------ */
.site-footer, footer {
  background:
    linear-gradient(180deg, rgba(248,240,225,0.74) 0%, rgba(236,219,189,0.80) 55%, rgba(224,201,160,0.86) 100%),
    url('../img/photos/desert-footer.webp') center 42% / cover no-repeat !important;
  color: var(--d-terre) !important;
  border-top: 1px solid var(--d-or) !important;
  padding-top: 96px !important;
}
.site-footer h3, .footer-brand h3 { color: var(--d-encre) !important; }
.site-footer a, .site-footer p, .site-footer span { color: var(--d-terre) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer a[style*="lumiere-doree"] { color: var(--d-encre) !important; }

/* ------------------------------------------------------------
   12. DIVERS — pills admin / chatbot / scroll
   ------------------------------------------------------------ */
.admin-pill, #admin-pill,
.lilia-bubble, .chatbot-launcher, #lilia-launcher {
  background: linear-gradient(135deg, var(--d-or-clair), var(--d-or)) !important;
  color: #fff !important;
  border: 1px solid var(--d-or) !important;
}

/* sceau / logo : redonner vie (le logo solaire colle au thème) */
.nav-brand svg, .nav-brand-mark { display: inline-block !important; }

/* ------------------------------------------------------------
   13. Accessibilité mouvement
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body::after, .hero::before { animation: none !important; }
}

/* ------------------------------------------------------------
   14. Mobile
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .hero-bg-img { background-position: center 50% !important; }
  .hero-vignette { background:
    radial-gradient(ellipse 95% 50% at 50% 42%, rgba(250,244,232,0.6), transparent 72%),
    linear-gradient(180deg, rgba(248,240,225,0.34) 0%, rgba(248,240,225,0.05) 45%, rgba(238,221,193,0.34) 100%) !important; }
  .site-footer, footer { padding-top: 72px !important; }
}

/* ============================================================
   PASSE 3 — LISIBILITÉ (retours Maha 2026-06-23)
   ============================================================ */

/* --- NAV : bouton « Me contacter » = pastille or pleine (était illisible) --- */
.nav-cta, .nav-cta-compact, a.nav-cta, a.nav-cta-compact,
.nav.scrolled .nav-cta, .nav.scrolled .nav-cta-compact {
  background: linear-gradient(135deg, var(--d-or-clair), var(--d-or)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid var(--d-or) !important;
  box-shadow: 0 8px 20px -10px rgba(207,159,68,0.7) !important;
}
.nav-cta:hover, .nav-cta-compact:hover { background: var(--d-ocre) !important; color: #fff !important; }

/* --- NAV : « Lilian Gourdet » agrandi --- */
.nav-brand-text, .nav.scrolled .nav-brand-text {
  font-size: 17px !important;
  letter-spacing: 0.14em !important;
  color: var(--d-encre) !important;
}
.nav-brand-text em { color: var(--d-or) !important; }

/* --- NAV : burger toujours visible (même après scroll) --- */
.nav-burger, .nav .nav-burger, .nav.scrolled .nav-burger,
.nav-burger-nature, .nav.scrolled .nav-burger-nature { color: var(--d-terre) !important; }
.nav-burger-nature .branch,
.nav.scrolled .nav-burger-nature .branch,
.nav-burger .burger-icon path { stroke: var(--d-terre) !important; }
.nav-burger-nature .leaf,
.nav.scrolled .nav-burger-nature .leaf { fill: var(--d-terre) !important; }
.burger-label, .nav.scrolled .burger-label,
.nav-burger-nature .burger-label { color: var(--d-terre) !important; }

/* --- HERO : « chemin » plus foncé + accroches plus contrastées --- */
.hero-title em, .hero h1 em {
  color: #8f6014 !important;
  -webkit-text-fill-color: #8f6014 !important;
  text-shadow: 0 2px 14px rgba(255,250,240,0.7) !important;
}
.hero-tagline, .hero-subtitle {
  color: var(--d-encre) !important;
  text-shadow: 0 1px 11px rgba(255,250,240,0.96) !important;
}

/* --- CARTE PROGRAMME (signature) : retrait déco + lisibilité --- */
.soin-card.signature::before, .soin-card.signature::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}
.soin-card .soin-icon, .soin-card.signature .soin-icon { display: none !important; }
.soin-card.signature h3 {
  color: var(--d-encre) !important;
  -webkit-text-fill-color: var(--d-encre) !important;
}
.soin-card.signature p, .soin-card.signature .soin-ideal,
.soin-card.signature .soin-ideal strong { color: var(--d-texte) !important; }
.soin-card.signature .soin-tarif { color: var(--d-or) !important; }
.soin-card.signature .soin-tarif small { color: var(--d-texte-doux) !important; }

/* --- INTERVIEW + TÉMOIGNAGES vidéo : légendes en doré (étaient marron/marron) --- */
.lil-temoin-caption, .lil-temoin-caption strong {
  color: #ecc97a !important;
  -webkit-text-fill-color: #ecc97a !important;
}
.lil-temoin-note {
  color: #e8c87c !important;
  -webkit-text-fill-color: #e8c87c !important;
}
.lil-temoin-note strong {
  color: #f4dca2 !important;
  -webkit-text-fill-color: #f4dca2 !important;
  background: none !important;
}
.lil-note-tag {
  background: rgba(212,175,106,0.22) !important;
  color: #f0d28a !important;
}

/* --- FAQ : le numéro ne chevauche plus la question --- */
.faq-item summary {
  padding-left: 84px !important;
  position: relative !important;
}
.faq-item summary::before { left: 26px !important; color: var(--d-or) !important; }
.faq-question { color: var(--d-encre) !important; }
.faq-item[open] .faq-question { color: var(--d-ocre) !important; }

/* --- FOOTER : tout le texte en marron foncé (sélecteur réel = <footer>) --- */
footer, footer p, footer li, footer a, footer span,
footer .footer-sub, footer .footer-col, footer .footer-brand,
footer .footer-disclaimer, footer .footer-bottom, footer .footer-bottom div,
footer .footer-coda-quote, footer .footer-coda-sign,
footer .footer-credit, footer .footer-legal a, footer .footer-bottom a,
footer ul li a { color: var(--d-terre) !important; }
footer h3, footer h4, footer .footer-brand h3 { color: var(--d-encre) !important; }
footer a:hover { color: var(--d-ocre) !important; }
footer a[style*="lumiere-doree"], footer [style*="lumiere-doree"] { color: var(--d-ocre) !important; }
footer input { color: var(--d-encre) !important; }
footer input::placeholder { color: var(--d-texte-doux) !important; }

@media (max-width: 768px) {
  .nav-brand-text { font-size: 12.5px !important; letter-spacing: 0.08em !important; }
}

/* ============================================================
   PASSE 4 — COMPACTION ERGONOMIQUE (moins de scroll, même contenu)
   Maha 2026-06-23 : la page était immense (~14 800px).
   ============================================================ */

/* Hero un peu moins haut */
.hero, .lilian-hero { min-height: 90vh !important; }

/* Paddings verticaux des sections divisés (~110px -> 56px) */
.quote-section, .ritual-break,
.about-section, #about,
.transmission, section.transmission, section[id="transmission"],
.methode, #methode,
.soins, #soins,
.promesses, #promesses,
.interview-section, #interview,
.ecrits-section, #ecrits,
.testimonials, #temoignages,
.faq, #faq,
.contact-section, #contact {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* Rythme des en-têtes resserré (sous-titre passait de 60px de marge à 28px) */
.section-eyebrow { margin-bottom: 11px !important; }
.section-title  { margin-bottom: 15px !important; }
.section-sub    { margin: 0 auto 28px !important; }
.section-sub + .section-sub-note { margin-top: -16px !important; margin-bottom: 26px !important; }

/* Cartes & grilles resserrées */
.soin-card, .promesse-card, .souffle-card,
.transmission-card, .ecrit-card, .card, .stat-card { padding: 24px 26px !important; }
.promesses-grid, .soins-grid { gap: 18px !important; }
blockquote.fade-in { margin-top: 36px !important; }

/* FAQ — la plus grosse section (2105px) : compaction forte */
.faq-category { margin: 24px 0 12px !important; }
.faq-category:first-child { margin-top: 6px !important; }
.faq-category-label { font-size: 23px !important; }
.faq-item { margin-bottom: 10px !important; }
.faq-item summary { padding-top: 15px !important; padding-bottom: 15px !important; }
.faq-answer { padding-bottom: 20px !important; }

/* Citations : un peu plus ramassées */
.quote-section .quote-text, .ritual-quote { margin: 0 auto !important; }

@media (max-width: 768px) {
  .quote-section, .ritual-break, #about, .transmission, #methode, #soins,
  #promesses, #interview, #ecrits, #temoignages, #faq, #contact {
    padding-top: 44px !important; padding-bottom: 44px !important;
  }
}

/* ============================================================
   PASSE 5 — COMPACTION FINE (gros postes restants)
   ============================================================ */

/* Interview : la vidéo unique passe en format medium (était ~1180px de large) */
#interview .lil-temoin-video { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }

/* FAQ : encore plus dense (reste la plus grande section) */
.faq-item summary { padding-top: 13px !important; padding-bottom: 13px !important; }
.faq-question { font-size: 18px !important; }
.faq-answer { font-size: 14.5px !important; padding-bottom: 18px !important; }
.faq-category { margin: 18px 0 10px !important; }
.faq-category-label { font-size: 21px !important; }

/* Contact & footer resserrés */
#contact, .contact-section { padding-top: 52px !important; padding-bottom: 52px !important; }
.contact-form, .form-container { padding: 32px 32px !important; }
.site-footer, footer { padding-top: 66px !important; padding-bottom: 34px !important; }

/* ============================================================
   PASSE 6 — ERGONOMIE COMMERCIALE (conversion)
   ============================================================ */

/* Réassurance sous le CTA du hero */
.hero-trust {
  margin: 18px auto 0 !important;
  font-family: 'Spectral','Cormorant Garamond',serif !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  color: var(--d-terre) !important;
  text-shadow: 0 1px 9px rgba(255,250,240,0.95) !important;
  font-style: italic !important;
}

/* Carte offre : bouton d'action + réassurance */
.soin-cta {
  display: inline-block !important;
  margin: 20px auto 6px !important;
  padding: 15px 30px !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
}
.soin-card.signature { text-align: center !important; }
.soin-card.signature .soin-ideal { text-align: left !important; }
.soin-reassure {
  margin: 4px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--d-texte-doux) !important;
  font-style: italic !important;
}
.soin-tarif { color: var(--d-or) !important; font-weight: 600 !important; }
.soin-tarif small { display:block !important; color: var(--d-texte-doux) !important; font-weight: 400 !important; margin-top: 2px !important; }

/* Barre CTA sticky — mobile uniquement (zone du pouce) */
.mobile-cta { display: none; }
@media (max-width: 768px) {
  .mobile-cta {
    display: block !important;
    position: fixed !important;
    left: 12px; right: 80px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9000 !important;
    text-align: center !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--d-or-clair), var(--d-or)) !important;
    color: #fff !important;
    font-family: 'Cinzel','Spectral',serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 14px 30px -8px rgba(124,90,48,0.6), inset 0 1px 0 rgba(255,255,255,0.35) !important;
  }
  /* espace pour ne pas masquer le bas du contenu */
  body { padding-bottom: 78px !important; }
  /* éviter le doublon visuel avec l'assistant flottant : on garde la barre prioritaire */
}

/* ============================================================
   PASSE 7 — DENSIFICATION (retirer l'espace vide, hauteurs ÷)
   Maha 2026-06-23 : "tout est immense" (footer, FAQ...).
   ============================================================ */

/* Sections encore resserrées : 56 -> 40 */
.quote-section, #about, .transmission, section.transmission, section[id="transmission"],
#methode, #soins, #promesses, #interview, #ecrits, #temoignages, #faq, #contact {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
@media (max-width: 768px) {
  .quote-section, #about, .transmission, #methode, #soins,
  #promesses, #interview, #ecrits, #temoignages, #faq, #contact {
    padding-top: 30px !important; padding-bottom: 30px !important;
  }
}

/* En-têtes plus ramassés */
.section-eyebrow { margin-bottom: 8px !important; }
.section-title  { margin-bottom: 11px !important; }
.section-sub    { margin: 0 auto 18px !important; line-height: 1.45 !important; }

/* Paragraphes : interligne resserré (lisible mais dense) */
.about-text p, .section p, .transmission p { line-height: 1.55 !important; margin-bottom: 11px !important; }

/* Cartes plus compactes */
.soin-card, .promesse-card, .souffle-card,
.transmission-card, .ecrit-card, .card, .stat-card { padding: 18px 20px !important; }

/* ---- FAQ : chaque question beaucoup plus basse ---- */
.faq-toggle { width: 28px !important; height: 28px !important; }
.faq-toggle::before { width: 11px !important; }
.faq-toggle::after  { height: 11px !important; }
.faq-item summary { padding-top: 9px !important; padding-bottom: 9px !important; padding-left: 76px !important; }
.faq-item { margin-bottom: 7px !important; }
.faq-question { font-size: 17px !important; line-height: 1.3 !important; }
.faq-answer { padding-top: 0 !important; padding-bottom: 14px !important; line-height: 1.55 !important; }
.faq-answer::before { display: none !important; }
.faq-category { margin: 14px 0 7px !important; }
.faq-category-label { font-size: 19px !important; }
.faq-footer { margin-top: 22px !important; padding: 20px !important; }
.faq-footer-text { margin-bottom: 12px !important; font-size: 18px !important; }

/* ---- FOOTER : fortement compacté (était immense) ---- */
.site-footer, footer { padding-top: 34px !important; padding-bottom: 12px !important; }
.footer-grid { gap: 26px !important; margin-bottom: 22px !important; }
.footer-col h4 { margin-bottom: 9px !important; }
.footer-col p, .footer-col a { line-height: 1.5 !important; }
.footer-col ul li { margin-bottom: 3px !important; }
.footer-brand h3 { margin-bottom: 4px !important; }
.footer-brand .footer-sub { margin-bottom: 8px !important; }
.newsletter-form { margin-top: 8px !important; }
.footer-disclaimer { padding: 12px 0 !important; line-height: 1.45 !important; }
.footer-bottom { padding-top: 12px !important; padding-bottom: 10px !important; }
.footer-credit { margin-top: 10px !important; padding-top: 10px !important; }

/* ---- HERO : un peu moins haut, espacements internes réduits ---- */
.hero, .lilian-hero { min-height: 84vh !important; }
.hero-eyebrow { margin-bottom: 16px !important; }
.hero-tagline, .hero-subtitle { margin-top: 14px !important; }
.hero-words { margin-top: 12px !important; }
.hero-cta { margin-top: 22px !important; }

/* ============================================================
   PASSE 8 — CHASSE À L'ESPACE LIBRE (exhaustif, tout le site)
   ============================================================ */

/* Sections 40 -> 32 (mobile 24) */
.quote-section, #about, .transmission, section.transmission, section[id="transmission"],
#methode, #soins, #promesses, #interview, #ecrits, #temoignages, #faq, #contact {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
@media (max-width: 768px) {
  .quote-section, #about, .transmission, #methode, #soins,
  #promesses, #interview, #ecrits, #temoignages, #faq, #contact {
    padding-top: 24px !important; padding-bottom: 24px !important;
  }
}

/* En-têtes & grilles encore plus serrés */
.section-sub { margin: 0 auto 14px !important; }
.about-grid { gap: 30px !important; }
.promesses-grid, .soins-grid { gap: 16px !important; }
.soin-card, .promesse-card, .souffle-card,
.transmission-card, .ecrit-card, .card, .stat-card { padding: 16px 18px !important; }
.promesse-cta, .soin-mention { margin-top: 14px !important; }

/* Citations / blockquotes : marges réduites */
.quote-section { padding-top: 30px !important; padding-bottom: 30px !important; }
.transmission blockquote, #transmission blockquote { margin-top: 16px !important; margin-bottom: 4px !important; }
blockquote.fade-in { margin-top: 20px !important; }

/* FAQ : derniers vides */
#faq .faq-list { margin-top: 4px !important; }
.faq-item { margin-bottom: 5px !important; }
.faq-answer { padding-bottom: 11px !important; }
.faq-category { margin: 10px 0 5px !important; }
.faq-category:first-child { margin-top: 2px !important; }
.faq-footer { margin-top: 16px !important; padding: 16px !important; }
.faq-footer-text { margin-bottom: 10px !important; }

/* Contact : colonne coordonnées resserrée + form */
.contact-grid { gap: 32px !important; margin-top: 12px !important; }
.contact-info h3 { margin-bottom: 12px !important; }
.contact-info-row { margin-bottom: 11px !important; }
.contact-form, .form-container { padding: 26px 28px !important; }

/* Footer : encore plus ramassé en bas */
.site-footer, footer { padding-top: 30px !important; padding-bottom: 8px !important; }
.footer-grid { margin-bottom: 16px !important; gap: 24px !important; }

/* ============================================================
   PASSE 9 — Lisibilité bas du hero sur les dunes dorées
   (réassurance + « Descendre » étaient brun sur brun)
   ============================================================ */
.hero-trust {
  color: #fff7ea !important;
  -webkit-text-fill-color: #fff7ea !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 4px rgba(48,32,14,0.9), 0 0 12px rgba(48,32,14,0.7), 0 1px 0 rgba(0,0,0,0.25) !important;
}
.hero .scroll-cue, .scroll-cue {
  color: #fff7ea !important;
  text-shadow: 0 1px 4px rgba(48,32,14,0.9), 0 0 10px rgba(48,32,14,0.65) !important;
  opacity: 1 !important;
}

/* ============================================================
   PASSE 7 — FORMULAIRE CONTACT 2026
   Champs nets, tiroir « Sujet » à flèche dorée maison, case de
   consentement en carte lisible avec coche dessinée. v=011 2026-06-23
   ============================================================ */
.contact-form .form-row { margin-bottom: 14px !important; }
.contact-form .form-row label {
  color: var(--d-terre) !important;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  margin-bottom: 7px !important;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: #fffdf7 !important;
  border: 1px solid var(--d-trait) !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  color: var(--d-encre) !important;
  font-size: 15px !important;
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--d-or) !important;
  box-shadow: 0 0 0 3px rgba(207,159,68,0.18) !important;
  outline: none !important;
  background: #fff !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(70,53,37,0.42) !important; }

/* --- Tiroir « Sujet » : flèche dorée dessinée, plus de chevron natif --- */
.contact-form select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23cf9f44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}
.contact-form select option { color: var(--d-encre); background: #fffdf7; }

/* --- Case de consentement : carte sable lisible + coche maison --- */
.contact-form .form-consent {
  align-items: center !important;
  gap: 13px !important;
  margin: 16px 0 6px !important;
  padding: 14px 16px !important;
  background: var(--d-sable-clair) !important;
  border: 1px solid var(--d-trait) !important;
  border-radius: 12px !important;
  color: var(--d-texte-doux) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}
.contact-form .form-consent input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 1.5px solid var(--d-or) !important;
  border-radius: 6px !important;
  background: #fffdf7 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background .2s, border-color .2s, box-shadow .2s !important;
}
.contact-form .form-consent input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--d-or-clair), var(--d-or)) !important;
  border-color: var(--d-or) !important;
}
.contact-form .form-consent input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 3px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
.contact-form .form-consent input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(207,159,68,0.28) !important;
}
.contact-form .form-consent,
.contact-form .form-consent span {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  font-family: 'Manrope', sans-serif !important;
}

/* ============================================================
   PASSE 8 — LISIBILITÉ & DENSITÉ 2026 (yeux + thème désert)
   ============================================================ */

/* --- 1. COORDONNÉES : valeurs lisibles (étaient quasi-blanches sur sable) --- */
.contact-info .ci-val { color: var(--d-texte) !important; }
.contact-info .ci-val small { color: var(--d-texte-doux) !important; }
.contact-info .ci-label { color: var(--d-terre) !important; }

/* --- 2. CASE DE CONSENTEMENT : plus discrète, alignée au texte --- */
.contact-form .form-consent { align-items: flex-start !important; padding: 12px 15px !important; }
.contact-form .form-consent input[type="checkbox"] {
  width: 18px !important; height: 18px !important;
  border-radius: 5px !important; margin-top: 1px !important;
}
.contact-form .form-consent input[type="checkbox"]:checked::after {
  left: 5px !important; top: 2px !important; width: 4px !important; height: 9px !important;
  border-width: 0 2px 2px 0 !important;
}

/* --- 3. TIROIR « SUJET » SUR-MESURE (remplace la liste native à l'ancienne) --- */
.lil-select { position: relative; }
.lil-select > select {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important; pointer-events: none !important; margin: 0 !important;
}
.lil-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: #fffdf7; border: 1px solid var(--d-trait);
  border-radius: 12px; padding: 13px 15px;
  font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--d-encre);
  transition: border-color .25s, box-shadow .25s;
}
.lil-select.open .lil-select-btn,
.lil-select-btn:focus-visible {
  border-color: var(--d-or); box-shadow: 0 0 0 3px rgba(207,159,68,0.18); outline: none;
}
.lil-select-label.placeholder { color: rgba(70,53,37,0.5); }
.lil-select-chevron {
  flex: 0 0 auto; width: 14px; height: 9px; transition: transform .25s;
}
.lil-select.open .lil-select-chevron { transform: rotate(180deg); }
.lil-select-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fffdf7; border: 1px solid var(--d-trait);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 22px 48px -20px rgba(124,90,48,0.45), 0 0 0 1px rgba(207,159,68,0.12);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.lil-select.open .lil-select-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lil-select-opt {
  padding: 11px 13px; border-radius: 9px; cursor: pointer;
  font-family: 'Manrope', sans-serif; font-size: 14.5px; color: var(--d-texte);
  transition: background .15s, color .15s;
}
.lil-select-opt:hover { background: var(--d-sable-clair); }
.lil-select-opt.sel { background: linear-gradient(135deg, var(--d-or-clair), var(--d-or)); color: #fff; }
.lil-select-opt.is-placeholder { color: rgba(70,53,37,0.5); }

/* --- 4. CARTE VIDÉO INTERVIEW : bas réchauffé (était vert-noir #0e1a14) --- */
.lil-temoin-card {
  background: var(--d-blanc-chaud) !important;
  box-shadow: 0 22px 50px -28px rgba(124,90,48,0.5), 0 0 0 1px var(--d-trait) !important;
}
.lil-temoin-caption { color: var(--d-texte) !important; -webkit-text-fill-color: var(--d-texte) !important; }
.lil-temoin-caption strong { color: var(--d-ocre) !important; -webkit-text-fill-color: var(--d-ocre) !important; }
.lil-temoin-note {
  color: var(--d-texte-doux) !important; -webkit-text-fill-color: var(--d-texte-doux) !important;
  border-top: 1px dashed var(--d-trait) !important;
}
.lil-temoin-note strong {
  color: var(--d-ocre) !important; -webkit-text-fill-color: var(--d-ocre) !important;
  background: none !important;
}
.lil-note-tag {
  background: rgba(176,127,66,0.16) !important;
  color: var(--d-terre) !important; -webkit-text-fill-color: var(--d-terre) !important;
}

/* --- 5. FAQ : densité resserrée (gagne ~40% de hauteur) --- */
#faq { padding-top: 40px !important; padding-bottom: 40px !important; }
.faq .faq-list { margin-top: 20px !important; }
.faq-category { margin: 26px 0 14px !important; }
.faq-category:first-child { margin-top: 6px !important; }
.faq-category-label { font-size: 24px !important; }
.faq-item { margin-bottom: 9px !important; }
.faq-item summary { padding: 15px 24px 15px 70px !important; }
.faq-item summary::before { left: 24px !important; font-size: 20px !important; min-width: 30px !important; }
.faq-question { font-size: 17px !important; line-height: 1.35 !important; }
.faq-toggle { width: 32px !important; height: 32px !important; }

/* --- 6. FOOTER : espace vide ramassé --- */
footer .footer-grid { gap: 32px !important; margin-bottom: 24px !important; }
footer .footer-col p, footer .footer-col a { line-height: 1.65 !important; }
footer .footer-disclaimer { margin: 14px 0 !important; }
footer .footer-bottom { margin-top: 14px !important; }
footer .footer-credit { margin-top: 12px !important; padding-top: 10px !important; }

/* --- PASSE 8b — correctifs ciblés --- */
/* Bouton du tiroir en casse normale (cohérent avec les autres champs) */
.lil-select-btn, .lil-select-label { text-transform: none !important; letter-spacing: normal !important; }
/* Footer réellement resserré (la marge grille avait été augmentée par erreur) */
footer { padding-top: 52px !important; }
footer .footer-grid { margin-bottom: 14px !important; }

/* --- PASSE 8c — le tiroir ne doit PAS hériter du bouton doré .contact-form button --- */
.contact-form .lil-select-btn {
  background: #fffdf7 !important;
  background-image: none !important;
  color: var(--d-encre) !important;
  border: 1px solid var(--d-trait) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 400 !important;
  padding: 13px 15px !important;
  transform: none !important;
}
.contact-form .lil-select.open .lil-select-btn,
.contact-form .lil-select-btn:hover,
.contact-form .lil-select-btn:focus-visible {
  background: #fff !important;
  background-image: none !important;
  color: var(--d-encre) !important;
  border-color: var(--d-or) !important;
  box-shadow: 0 0 0 3px rgba(207,159,68,0.18) !important;
  transform: none !important;
}