/* ══════════════════════════════════════════════════════════════
   BATIMM RENOV — STYLE ÉLÉGANT — Couche de refinement visuel
   Design épuré · Aéré · Professionnel · Animations hover
   ══════════════════════════════════════════════════════════════ */

/* ── Variables de design élégant ── */
:root {
  --card-radius: 16px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(189, 147, 99, 0.08);
  --shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(189, 147, 99, 0.2), 0 0 60px rgba(189, 147, 99, 0.06);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --or-glow: rgba(189, 147, 99, 0.15);
  --border-subtle: rgba(189, 147, 99, 0.1);
  --bg-card: #162036;
  --bg-card-hover: #1c2a46;
}

/* ══════════════════════════════════════════════════════════════
   1. NAVIGATION — Plus élégante, plus aérée
   ══════════════════════════════════════════════════════════════ */
nav {
  padding: 20px 72px !important;
}

nav.sc {
  padding: 14px 72px !important;
  background: rgba(9, 14, 26, 0.88) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border-bottom: 1px solid rgba(189, 147, 99, 0.1) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25) !important;
}

.nav-links {
  gap: 44px !important;
}

.nav-links a {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  transition: color 0.3s ease, opacity 0.3s ease !important;
}

.nav-cta {
  padding: 10px 28px !important;
  border-radius: 8px !important;
  background: rgba(189, 147, 99, 0.07) !important;
  border: 1px solid rgba(189, 147, 99, 0.4) !important;
  letter-spacing: 1.5px !important;
  font-size: 11px !important;
  transition: all 0.35s var(--ease-premium) !important;
}

.nav-cta:hover {
  background: var(--or) !important;
  color: var(--noir) !important;
  border-color: var(--or) !important;
  box-shadow: 0 4px 24px rgba(189, 147, 99, 0.35) !important;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   2. GLOBAL SECTIONS — Espacement généreux
   ══════════════════════════════════════════════════════════════ */
section {
  padding: 130px 80px !important;
}

.sec-tag {
  font-size: 11px !important;
  letter-spacing: 5px !important;
  margin-bottom: 18px !important;
  opacity: 0.9 !important;
}

.sec-title {
  letter-spacing: 1px !important;
  margin-bottom: 18px !important;
}

.sec-sub {
  font-size: 15px !important;
  line-height: 1.85 !important;
  opacity: 0.65 !important;
}

/* Séparateur optique entre sections */
.services, .reals, .about, .testi, .faq-section, .zones-section, .contact {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* ══════════════════════════════════════════════════════════════
   3. CARTES SERVICES — Épurées avec hover élégant
   ══════════════════════════════════════════════════════════════ */

/* Grid plus aérée */
.svc-grid {
  gap: 14px !important;
}

.svc-hd {
  margin-bottom: 64px !important;
}

/* Carte de base — fond image toujours visible */
.svc-card {
  border-radius: var(--card-radius) !important;
  padding: 46px 38px 42px !important;
  background: #0e1726 !important;
  border: 1px solid rgba(189, 147, 99, 0.14) !important;
  box-shadow: var(--shadow-card) !important;
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium),
    border-color 0.4s ease !important;
}

/* Masquer les grands numéros de fond (trop chargés) */
.svc-n {
  display: none !important;
}

/* Icône : encadrée, épurée */
.svc-ic {
  width: 54px !important;
  height: 54px !important;
  border-radius: 12px !important;
  background: rgba(189, 147, 99, 0.08) !important;
  border: 1px solid rgba(189, 147, 99, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 28px !important;
  font-size: 0 !important;
  color: var(--or) !important;
  transition:
    background 0.4s var(--ease-premium),
    border-color 0.4s ease,
    transform 0.4s var(--ease-premium) !important;
}

.svc-ic svg {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--or) !important;
  display: block !important;
}

/* Titre de service */
.svc-nm {
  font-size: 17px !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 12px !important;
  line-height: 1.2 !important;
  transition: color 0.35s ease !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Description */
.svc-dc {
  font-size: 13.5px !important;
  line-height: 1.78 !important;
  color: rgba(234, 226, 215, 0.75) !important;
  margin-bottom: 24px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Lien "En savoir plus" */
.svc-more {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--or) !important;
  opacity: 0.6 !important;
  font-weight: 600 !important;
  transition: opacity 0.3s ease, letter-spacing 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Trait doré en bas de carte */
.svc-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--or), var(--or-clair), transparent) !important;
  border-radius: 0 0 var(--card-radius) var(--card-radius) !important;
  transition: width 0.55s var(--ease-premium) !important;
  animation: none !important;
  z-index: 10 !important;
}

/* HOVER — Élégant et précis */
.svc-card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(189, 147, 99, 0.22) !important;
  background: var(--bg-card-hover) !important;
  box-shadow: var(--shadow-hover) !important;
}

.svc-card:hover .svc-ic {
  background: rgba(189, 147, 99, 0.16) !important;
  border-color: rgba(189, 147, 99, 0.35) !important;
  transform: scale(1.06) !important;
}

.svc-card:hover .svc-nm {
  color: #d4aa7a !important;
}

.svc-card:hover .svc-more {
  opacity: 1 !important;
  letter-spacing: 3px !important;
}

.svc-card:hover::after {
  width: 100% !important;
  animation: none !important;
}

/* ── Image bien visible en fond de carte (effet premium) ── */
.svc-tex-bg {
  opacity: 0.75 !important;
  transform: scale(1.02) !important;
  transition: opacity 0.65s var(--ease-premium), transform 0.65s var(--ease-premium) !important;
}

/* Overlay : léger voile sombre uniquement pour la lisibilité du texte */
.svc-card .svc-wood-overlay {
  opacity: 1 !important;
  background: linear-gradient(
    170deg,
    rgba(5, 10, 20, 0.72) 0%,
    rgba(8, 14, 26, 0.50) 50%,
    rgba(5, 10, 20, 0.60) 100%
  ) !important;
  transition: background 0.65s var(--ease-premium) !important;
}

/* Au hover : image encore plus nette, voile encore plus léger */
.svc-card:hover .svc-tex-bg {
  opacity: 0.92 !important;
  transform: scale(1.06) !important;
}
.svc-card:hover .svc-wood-overlay {
  opacity: 1 !important;
  background: linear-gradient(
    170deg,
    rgba(5, 10, 20, 0.58) 0%,
    rgba(8, 14, 26, 0.32) 50%,
    rgba(189, 147, 99, 0.12) 100%
  ) !important;
}

/* Supprimer le reflet brillant (superflu) */
.svc-card .svc-shine,
.svc-card:hover .svc-shine {
  display: none !important;
}

/* S'assurer que tout le contenu texte est bien au-dessus */
.svc-ic,
.svc-nm,
.svc-dc,
.svc-more {
  position: relative !important;
  z-index: 4 !important;
}

/* Bouton toggle services */
.svc-toggle-btn {
  border-radius: 50px !important;
  padding: 14px 32px !important;
  background: rgba(189, 147, 99, 0.06) !important;
  border: 1px solid rgba(189, 147, 99, 0.2) !important;
  transition: all 0.35s var(--ease-premium) !important;
}
.svc-toggle-btn:hover {
  background: rgba(189, 147, 99, 0.12) !important;
  border-color: rgba(189, 147, 99, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. GALERIE RÉALISATIONS — Plus aérée et raffinée
   ══════════════════════════════════════════════════════════════ */

.rl-hd {
  margin-bottom: 60px !important;
}

.rl-grid {
  gap: 12px !important;
}

.rl-item {
  border-radius: 12px !important;
  overflow: hidden !important;
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium) !important;
}

.rl-item:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

.rl-img {
  transition: transform 0.75s var(--ease-premium) !important;
  display: block !important;
}

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

.rl-ov {
  background: linear-gradient(
    to top,
    rgba(9, 14, 26, 0.94) 0%,
    rgba(9, 14, 26, 0.5) 50%,
    transparent 100%
  ) !important;
  padding: 24px 22px !important;
  border-radius: 0 0 12px 12px !important;
}

.rl-lbl {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 4px !important;
}

.rl-sub {
  font-size: 12px !important;
  color: var(--or) !important;
  letter-spacing: 1.5px !important;
  opacity: 0.9 !important;
}

/* ══════════════════════════════════════════════════════════════
   5. AVANT / APRÈS — Plus aérée
   ══════════════════════════════════════════════════════════════ */
.avap {
  padding: 130px 80px !important;
}

.bt-grid {
  gap: 14px !important;
}

.bt-cell {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   6. À PROPOS — Plus claire
   ══════════════════════════════════════════════════════════════ */
.about {
  padding: 130px 80px !important;
}

.ab-wrap {
  gap: 80px !important;
}

.ab-intro {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(234, 226, 215, 0.72) !important;
  margin-bottom: 22px !important;
}

.ab-feat {
  border-radius: 12px !important;
  padding: 16px 18px !important;
  background: #131d30 !important;
  border: 1px solid rgba(189, 147, 99, 0.1) !important;
  transition: border-color 0.35s ease, background 0.35s ease !important;
}

.ab-feat:hover {
  border-color: rgba(189, 147, 99, 0.22) !important;
  background: #1a2840 !important;
}

.ab-feat-ic {
  border-radius: 10px !important;
  background: rgba(189, 147, 99, 0.08) !important;
  border: 1px solid rgba(189, 147, 99, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   7. TÉMOIGNAGES — Plus propres
   ══════════════════════════════════════════════════════════════ */
.testi {
  padding: 130px 80px !important;
}

/* ══════════════════════════════════════════════════════════════
   8. CONTACT — Épuré, professionnel
   ══════════════════════════════════════════════════════════════ */
.contact {
  padding: 130px 80px !important;
}

/* Infos contact : items épurés */
.ct-item {
  border-radius: 12px !important;
  padding: 16px 20px !important;
  background: #131d30 !important;
  border: 1px solid rgba(189, 147, 99, 0.1) !important;
  margin-bottom: 10px !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}

.ct-item:hover {
  border-color: rgba(189, 147, 99, 0.22) !important;
  background: #1a2840 !important;
}

.ct-ic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(189, 147, 99, 0.1) !important;
  border: 1px solid rgba(189, 147, 99, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.ct-lbl {
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(189, 147, 99, 0.8) !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.ct-val {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

/* Wizard de contact : inputs */
.fr-inp,
.fr-ta {
  border-radius: 10px !important;
  background: rgba(18, 28, 48, 0.5) !important;
  border: 1px solid rgba(189, 147, 99, 0.12) !important;
  color: var(--blanc) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-family: 'Barlow', sans-serif !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  width: 100% !important;
}

.fr-inp:focus,
.fr-ta:focus {
  outline: none !important;
  border-color: rgba(189, 147, 99, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(189, 147, 99, 0.07) !important;
  background: rgba(22, 34, 58, 0.6) !important;
}

.fr-inp::placeholder,
.fr-ta::placeholder {
  color: rgba(234, 226, 215, 0.3) !important;
}

.fr-lbl {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: rgba(189, 147, 99, 0.75) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Chips de sélection */
.wz-chip {
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  border: 1px solid rgba(189, 147, 99, 0.18) !important;
  background: rgba(189, 147, 99, 0.04) !important;
  color: rgba(234, 226, 215, 0.65) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  font-family: 'Barlow', sans-serif !important;
}

.wz-chip:hover,
.wz-chip.active {
  background: rgba(189, 147, 99, 0.14) !important;
  border-color: rgba(189, 147, 99, 0.5) !important;
  color: #d4aa7a !important;
}

/* Wizard : progression */
.wz-step span {
  border-radius: 50% !important;
}

/* ══════════════════════════════════════════════════════════════
   9. FAQ — Cartes épurées
   ══════════════════════════════════════════════════════════════ */
.faq-section {
  padding: 130px 80px !important;
  background:
    linear-gradient(rgba(10,16,28,0.90), rgba(10,16,28,0.90)),
    url('faq-bg.webp') center top / cover no-repeat !important;
}

.faq-hd {
  margin-bottom: 56px !important;
}

.faq-item {
  border-radius: 12px !important;
  background: #131d30 !important;
  border: 1px solid rgba(189, 147, 99, 0.1) !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}

.faq-item:hover {
  border-color: rgba(189, 147, 99, 0.22) !important;
  background: #1a2840 !important;
}

.faq-q {
  padding: 22px 28px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  color: var(--blanc) !important;
  cursor: pointer !important;
  text-align: left !important;
}

.faq-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(189, 147, 99, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: var(--or) !important;
  flex-shrink: 0 !important;
  transition: background 0.3s ease, transform 0.35s var(--ease-premium) !important;
}

.faq-q[aria-expanded="true"] .faq-icon {
  background: rgba(189, 147, 99, 0.15) !important;
  transform: rotate(45deg) !important;
}

.faq-a {
  padding: 0 28px 22px !important;
  font-size: 14px !important;
  line-height: 1.82 !important;
  color: rgba(234, 226, 215, 0.72) !important;
}

/* ══════════════════════════════════════════════════════════════
   10. ZONES D'INTERVENTION — Plus aérée
   ══════════════════════════════════════════════════════════════ */
.zones-section {
  padding: 130px 80px !important;
}

/* ══════════════════════════════════════════════════════════════
   11. STATS BAR — Raffinée
   ══════════════════════════════════════════════════════════════ */
/* .stats supprimé */


.st-div {
  background: rgba(234, 226, 215, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   12. BOUTONS — Raffinés, sans le clip-path agressif
   ══════════════════════════════════════════════════════════════ */
.btn-p {
  clip-path: none !important;
  border-radius: 8px !important;
  padding: 16px 42px !important;
  background: linear-gradient(135deg, #bd9363, #d4aa7a) !important;
  color: #0d1525 !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  font-size: 12.5px !important;
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), filter 0.35s ease !important;
  box-shadow: 0 4px 20px rgba(189, 147, 99, 0.22) !important;
}

.btn-p:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(189, 147, 99, 0.38) !important;
  filter: brightness(1.07) !important;
  background-position: unset !important;
}

/* Bouton secondaire */
.btn-s .arr {
  border-radius: 50% !important;
  transition: all 0.35s var(--ease-premium) !important;
}

/* ══════════════════════════════════════════════════════════════
   13. SCROLL REVEAL — Animations fluides
   ══════════════════════════════════════════════════════════════ */
.rv,
.rv-l,
.rv-r {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.9s var(--ease-premium),
    transform 0.9s var(--ease-premium) !important;
  filter: none !important;
}

.rv   { transform: translateY(40px) !important; }
.rv-l { transform: translateX(-40px) !important; }
.rv-r { transform: translateX(40px) !important; }

.rv.on,
.rv-l.on,
.rv-r.on {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Stagger delays */
.rv-d1 { transition-delay: 0.08s !important; }
.rv-d2 { transition-delay: 0.16s !important; }
.rv-d3 { transition-delay: 0.24s !important; }
.rv-d4 { transition-delay: 0.32s !important; }
.rv-d5 { transition-delay: 0.40s !important; }
.rv-d6 { transition-delay: 0.48s !important; }

/* ══════════════════════════════════════════════════════════════
   14. FOOTER — Plus propre
   ══════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid rgba(189, 147, 99, 0.1) !important;
  padding-top: 60px !important;
}

/* ══════════════════════════════════════════════════════════════
   15. SCROLLBAR — Plus fine et élégante
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 5px !important;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px !important;
  background: linear-gradient(to bottom, rgba(189,147,99,0.5), rgba(212,170,122,0.5)) !important;
}

/* ══════════════════════════════════════════════════════════════
   16. BADGE PHOTO À PROPOS
   ══════════════════════════════════════════════════════════════ */
.ab-badge {
  border-radius: 14px !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(189, 147, 99, 0.2) !important;
}

.ab-photo-frame {
  border-radius: 18px !important;
  overflow: hidden !important;
}

.ab-img {
  border-radius: 18px !important;
}

/* ══════════════════════════════════════════════════════════════
   17. HERO — Légèrement retravaillé
   ══════════════════════════════════════════════════════════════ */
.hero-c {
  padding: 0 80px !important;
}

.hero-btns {
  gap: 28px !important;
}

/* ══════════════════════════════════════════════════════════════
   18. MOBILE — Adaptations
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  nav {
    padding: 16px 28px !important;
  }
  nav.sc {
    padding: 12px 28px !important;
  }
  section {
    padding: 88px 28px !important;
  }
  .avap, .about, .testi, .faq-section, .zones-section, .contact {
    padding: 88px 28px !important;
  }
  .svc-grid {
    gap: 10px !important;
  }
  .svc-card {
    padding: 36px 28px !important;
  }
  .hero-c {
    padding: 0 28px !important;
  }
  .rl-grid {
    gap: 8px !important;
  }
}

@media (max-width: 600px) {
  section {
    padding: 72px 20px !important;
  }
  .svc-card {
    padding: 32px 24px !important;
  }
  .btn-p {
    padding: 15px 32px !important;
    font-size: 12px !important;
  }
  .faq-q {
    padding: 18px 20px !important;
    font-size: 14px !important;
  }
  .faq-a {
    padding: 0 20px 18px !important;
  }
  .ct-item {
    padding: 14px 16px !important;
  }
}


/* =====================================================
   BATIMM RENOV — Redesign Luxe  |  Avril 2026
   Chargé en dernier = priorité maximale
   ===================================================== */

/* Variables */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body-luxe: 'Inter', -apple-system, sans-serif;
  --gold: #BD9363;
  --gold-light: #D4AA7A;
  --gold-subtle: rgba(189,147,99,0.12);
  --border-subtle: rgba(189,147,99,0.08);
  --border-hover: rgba(189,147,99,0.25);
  --bg-deep: #0B1120;
  --bg-elevated: #111B2E;
  --text-primary: #EAE2D7;
  --text-body-color: #A8A09A;
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration-normal: 0.5s;
  --duration-slow: 0.8s;
}

/* Typographie - Cormorant sur les titres */
h1, h2, .hero h1, .hero h2 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  line-height: 1.08 !important;
}
h1, .hero h1 { font-size: clamp(3.2rem, 7vw, 6.5rem) !important; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important; }
body { font-family: var(--font-body-luxe) !important; font-weight: 300 !important; -webkit-font-smoothing: antialiased; }
p { font-weight: 300 !important; line-height: 1.75 !important; }

/* Navbar scroll */
header, .navbar, .site-header, #header {
  transition: background 0.5s ease, backdrop-filter 0.5s ease;
}
header.scrolled, .navbar.scrolled, .site-header.scrolled, #header.scrolled {
  background: rgba(11,17,32,0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* Slider avant/après */
.twentytwenty-handle {
  width: 2px !important;
  background: var(--gold) !important;
  border: none !important;
  box-shadow: none !important;
}
.twentytwenty-before-label::before, .twentytwenty-after-label::before {
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  background: rgba(11,17,32,0.55) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
}

/* Reveal scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal--left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal--scale { opacity: 0; transform: scale(0.94); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible, .reveal--left.is-visible, .reveal--scale.is-visible { opacity: 1 !important; transform: none !important; }
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
.reveal--d4 { transition-delay: 0.32s; }

/* Ligne dorée animée */
.line-grow { display: block; width: 0; height: 1px; background: var(--gold); opacity: 0.5; transition: width 0.9s var(--ease-out); }
.line-grow.is-visible { width: 56px; }

/* Cartes services */
.service-card { position: relative; overflow: hidden; transition: transform 0.5s ease; }
.service-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gold); transition: width 0.8s ease; }
.service-card:hover { transform: translateY(-4px); }
.service-card:hover::before { width: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--gold-subtle); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }


/* ═══════════════════════════════════════════════════════════════
   BATIMM RENOV — HERO ULTRA-PREMIUM  |  Avril 2026
   Remplace intégralement le traitement visuel du hero existant
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Désactivation des éléments "template" ── */
.h-line { display: none !important; }                       /* Lignes sweepantes = cheap */
@keyframes slowZoom { from { transform: scale(1.04); } to { transform: scale(1.08); } }
.hero-bg { animation: slowZoom 24s ease-in-out infinite alternate !important; filter: brightness(0.42) saturate(0.75) !important; }

/* ── 2. Overlay architectural (dégradé asymétrique) ── */
.hero-overlay {
  background:
    linear-gradient(135deg, rgba(11,17,32,0.82) 0%, rgba(11,17,32,0.3) 55%, rgba(11,17,32,0.55) 100%),
    linear-gradient(to bottom, rgba(11,17,32,0) 0%, rgba(11,17,32,0.95) 100%) !important;
}

/* ── 3. Conteneur hero — alignement gauche, max-width généreux ── */
.hero-c {
  padding: 0 clamp(32px, 7vw, 120px) !important;
  max-width: 820px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* ── 4. Tag / étiquette ── */
.hero-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(189,147,99,0.75) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}
.hero-tag::before {
  content: '' !important;
  width: 48px !important;
  height: 1px !important;
  background: rgba(189,147,99,0.5) !important;
  flex-shrink: 0 !important;
}

/* ── 5. Titre principal — Cormorant Garamond, fin & majestueux ── */
.hero-accroche {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(3.6rem, 7.5vw, 7rem) !important;
  font-weight: 300 !important;
  line-height: 1.0 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #EAE2D7 !important;
  margin: 0 0 28px 0 !important;
}
.hero-accroche span#hero-h1a {
  font-weight: 300 !important;
  color: #EAE2D7 !important;
  display: block !important;
}
.hero-accroche span#hero-h1b,
.hero-accroche .gold {
  font-weight: 300 !important;
  font-style: italic !important;
  color: #BD9363 !important;
  display: block !important;
}

/* ── 6. Sous-titre — Inter, léger, aéré ── */
#hero-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.88rem, 1.1vw, 1rem) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.01em !important;
  color: rgba(168, 160, 154, 0.85) !important;
  max-width: 480px !important;
  margin-bottom: 52px !important;
}

/* ── 7. Zone géographique — discret, architectural ── */
.hero-zone-bar {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
  padding: 14px 24px !important;
  border: 1px solid rgba(189,147,99,0.12) !important;
  background: rgba(11,17,32,0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  width: fit-content !important;
}
.hero-zone-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(189,147,99,0.6) !important;
}
.hero-zone-dep {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.hero-zone-num {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: #EAE2D7 !important;
  line-height: 1 !important;
}
.hero-zone-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.55rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(168,160,154,0.5) !important;
  margin-top: 2px !important;
}
.hero-zone-sep { color: rgba(189,147,99,0.25) !important; }
.hero-zone-region {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(168,160,154,0.4) !important;
}

/* ── 8. Boutons CTA — minimalisme total ── */
.hero-btns {
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
  flex-wrap: wrap !important;
}

/* CTA Principal : bordure fine, remplissage au hover */
.btn-p {
  padding: 18px 44px !important;
  background: transparent !important;
  background-image: none !important;
  color: #BD9363 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(189,147,99,0.6) !important;
  clip-path: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  transition: color 0.5s cubic-bezier(0.25,0.1,0.25,1) !important;
  cursor: pointer !important;
}
.btn-p::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: #BD9363 !important;
  transition: left 0.5s cubic-bezier(0.25,0.1,0.25,1) !important;
  z-index: 0 !important;
}
.btn-p:hover {
  color: #0B1120 !important;
  transform: none !important;
  box-shadow: none !important;
  background-position: unset !important;
}
.btn-p:hover::before { left: 0 !important; }
.btn-p > * { position: relative; z-index: 1; }

/* CTA Secondaire : texte épuré */
.btn-s {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(234,226,215,0.7) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: color 0.3s ease !important;
  position: relative !important;
}
.btn-s::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important; left: 0 !important;
  width: 0 !important; height: 1px !important;
  background: #BD9363 !important;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn-s:hover { color: #BD9363 !important; }
.btn-s:hover::after { width: 100% !important; }
.arr {
  width: 32px !important; height: 32px !important;
  border: 1px solid rgba(189,147,99,0.3) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}
.btn-s:hover .arr {
  border-color: #BD9363 !important;
  background: transparent !important;
  transform: translateX(4px) !important;
}

/* ── 9. Badge social proof — redesign épuré ── */
.ht-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin-top: 64px !important;
  padding: 20px 28px !important;
  border: 1px solid rgba(189,147,99,0.08) !important;
  background: rgba(11,17,32,0.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  width: fit-content !important;
}
.ht-header {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(189,147,99,0.6) !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  display: none !important;                   /* Remplacé par la disposition inline */
}
.ht-grid {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.ht-col { display: flex !important; align-items: center !important; gap: 16px !important; }
.ht-col + .ht-col { border-left: 1px solid rgba(189,147,99,0.1) !important; padding-left: 24px !important; }
.ht-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  color: rgba(168,160,154,0.75) !important;
}
.ht-ic {
  color: #BD9363 !important;
  font-size: 0.75rem !important;
}
.ht-google {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.ht-stars { color: #BD9363 !important; font-size: 0.75rem !important; letter-spacing: 1px !important; }
.ht-score {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: #EAE2D7 !important;
  line-height: 1 !important;
}
.ht-glbl {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: rgba(168,160,154,0.5) !important;
  text-transform: uppercase !important;
}

/* ── 10. Animations d'entrée séquentielles ── */
.hero-tag       { opacity: 0; animation: hReveal 0.9s cubic-bezier(0.25,0.1,0.25,1) 0.2s forwards; }
.hero-accroche  { opacity: 0; animation: hReveal 1.0s cubic-bezier(0.25,0.1,0.25,1) 0.45s forwards; }
#hero-desc      { opacity: 0; animation: hReveal 0.9s cubic-bezier(0.25,0.1,0.25,1) 0.7s forwards; }
.hero-zone-bar  { opacity: 0; animation: hReveal 0.8s cubic-bezier(0.25,0.1,0.25,1) 0.6s forwards; }
.hero-btns      { opacity: 0; animation: hReveal 0.8s cubic-bezier(0.25,0.1,0.25,1) 0.9s forwards; }
.ht-wrap        { opacity: 0; animation: hReveal 0.8s cubic-bezier(0.25,0.1,0.25,1) 1.1s forwards; }

@keyframes hReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 11. Scroll indicator ── */
.hero::after {
  content: '';
  position: absolute;
  bottom: 36px;
  left: clamp(32px, 7vw, 120px);
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(189,147,99,0.6), rgba(189,147,99,0));
  animation: scrollLine 2s ease-in-out infinite;
  z-index: 3;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ── 12. Responsive mobile ── */
@media (max-width: 768px) {
  .hero-c { padding: 0 24px !important; }
  .hero-accroche { font-size: clamp(2.8rem, 10vw, 4.5rem) !important; }
  .hero-btns { gap: 24px !important; }
  .ht-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .ht-grid { gap: 16px !important; }
  .ht-col + .ht-col { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(189,147,99,0.1) !important; padding-top: 16px !important; }
  .hero-zone-bar { flex-wrap: wrap !important; gap: 12px !important; }
  .hero::after { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   BATIMM RENOV — SPLIT HERO  "Architecte de Luxe"  |  Avril 2026
   Concept : Split Layout Asymétrique
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset hero existant ── */
.hero {
  position: relative !important;
  height: 100vh !important;
  min-height: 700px !important;
  display: grid !important;
  grid-template-columns: 52% 3px 1fr !important;
  grid-template-rows: 1fr !important;
  overflow: hidden !important;
  background: #0B1120 !important;
}
/* Cacher anciens éléments devenus inutiles */
.hero-bg, .hero-overlay, #hero-particles,
.hero-c, .hero-tag, .hero-accroche,
.hero-zone-bar, #hero-desc, .hero-btns,
.ht-wrap, .h-line { display: none !important; }

/* ── H1 SEO caché ── */
.seo-h1-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ══════════════════════════════════════
   CÔTÉ GAUCHE — Typographie & Contenu
   ══════════════════════════════════════ */
.sp-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 110px) clamp(40px, 6vw, 100px);
  background: #0B1120;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Fond texturé subtil — grain de papier */
.sp-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(189,147,99,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Numéro d'index architectural */
.sp-index {
  position: absolute;
  top: clamp(32px, 5vh, 56px);
  right: 40px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 5rem;
  font-weight: 300;
  color: rgba(189,147,99,0.06);
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}

/* Étiquette */
.sp-tag {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
  opacity: 0;
  animation: spFadeUp 0.8s cubic-bezier(0.25,0.1,0.25,1) 0.2s forwards;
}
.sp-tag-line {
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(189,147,99,0.5);
  flex-shrink: 0;
}
.sp-tag-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(189,147,99,0.7);
}

/* Titre massif — cœur du design */
.sp-title {
  display: flex;
  flex-direction: column;
  margin: 0 0 32px 0;
  opacity: 0;
  animation: spFadeUp 1s cubic-bezier(0.25,0.1,0.25,1) 0.4s forwards;
}
.sp-title-row {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3rem, 5.5vw, 5.8rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.sp-title-light {
  font-weight: 300;
  color: #EAE2D7;
}
.sp-title-italic {
  font-weight: 300;
  font-style: italic;
  color: rgba(234,226,213,0.65);
  padding-left: 2.2rem; /* Décalage éditorial */
}
.sp-title-gold {
  font-weight: 400;
  font-style: italic;
  color: #BD9363;
  padding-left: 0.8rem;
}

/* Séparateur */
.sp-sep {
  width: 48px;
  height: 1px;
  background: rgba(189,147,99,0.3);
  margin-bottom: 28px;
  opacity: 0;
  animation: spFadeUp 0.8s cubic-bezier(0.25,0.1,0.25,1) 0.6s forwards;
}

/* Sous-titre */
.sp-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: rgba(168,160,154,0.8);
  max-width: 380px;
  margin: 0 0 48px 0;
  opacity: 0;
  animation: spFadeUp 0.8s cubic-bezier(0.25,0.1,0.25,1) 0.75s forwards;
}

/* ── Boutons CTA ── */
.sp-cta-group {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-bottom: 64px;
  flex-wrap: wrap;
  opacity: 0;
  animation: spFadeUp 0.8s cubic-bezier(0.25,0.1,0.25,1) 0.9s forwards;
}

/* CTA principal — ghost avec remplissage */
.sp-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 15px 36px;
  border: 1px solid rgba(189,147,99,0.5);
  background: transparent;
  color: #BD9363;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.5s cubic-bezier(0.25,0.1,0.25,1),
              border-color 0.5s cubic-bezier(0.25,0.1,0.25,1);
  cursor: pointer;
}
.sp-cta-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: #BD9363;
  transition: left 0.5s cubic-bezier(0.25,0.1,0.25,1);
  z-index: 0;
}
.sp-cta-text, .sp-cta-icon {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
.sp-cta-primary:hover { color: #0B1120; border-color: #BD9363; }
.sp-cta-primary:hover::before { left: 0; }
.sp-cta-primary:hover .sp-cta-icon { transform: translateX(4px); }
.sp-cta-icon svg { display: block; }

/* CTA secondaire — texte avec ligne */
.sp-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(234,226,215,0.55);
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}
.sp-cta-ghost-line {
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: #BD9363;
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1);
}
.sp-cta-ghost:hover { color: #BD9363; }
.sp-cta-ghost:hover .sp-cta-ghost-line { width: 100%; }

/* ── Stats de confiance ── */
.sp-trust {
  display: flex;
  align-items: center;
  gap: 24px;
  opacity: 0;
  animation: spFadeUp 0.8s cubic-bezier(0.25,0.1,0.25,1) 1.1s forwards;
}
.sp-trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-trust-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #EAE2D7;
  line-height: 1;
}
.sp-trust-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168,160,154,0.5);
}
.sp-trust-div {
  width: 1px;
  height: 28px;
  background: rgba(189,147,99,0.12);
}

/* ══════════════════════════════════════
   LIGNE VERTICALE CENTRALE
   ══════════════════════════════════════ */
.sp-divider {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.sp-divider-line {
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(189,147,99,0) 0%,
    rgba(189,147,99,0.25) 20%,
    rgba(189,147,99,0.25) 80%,
    rgba(189,147,99,0) 100%
  );
  position: absolute;
  top: 0;
}
.sp-divider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #BD9363;
  position: relative;
  z-index: 1;
  opacity: 0.6;
  animation: dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.5); opacity: 1; }
}

/* ══════════════════════════════════════
   CÔTÉ DROIT — Image
   ══════════════════════════════════════ */
.sp-right {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: spFadeIn 1.2s cubic-bezier(0.25,0.1,0.25,1) 0.3s forwards;
}

/* Wrapper image (pour parallaxe) */
.sp-img-wrap {
  position: absolute;
  inset: -8% 0;
  overflow: hidden;
}
.sp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.78) saturate(0.85);
  transform: scale(1.06);
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Overlay dégradé sur l'image */
.sp-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(11,17,32,0.35) 0%, rgba(11,17,32,0) 40%),
    linear-gradient(to top, rgba(11,17,32,0.7) 0%, rgba(11,17,32,0) 50%);
}

/* Label flottant sur l'image */
.sp-img-label {
  position: absolute;
  bottom: 36px;
  left: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  background: rgba(11,17,32,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(189,147,99,0.12);
  opacity: 0;
  transform: translateY(12px);
  animation: spFadeUp 0.8s ease 1.2s forwards;
}
.sp-img-label-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(189,147,99,0.7);
}
.sp-img-label-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: #EAE2D7;
}

/* Départements en bas de l'image */
.sp-deps {
  position: absolute;
  bottom: 36px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: spFadeUp 0.8s ease 1.4s forwards;
}
.sp-dep {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(234,226,215,0.5);
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.sp-dep em {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: normal;
  color: rgba(234,226,215,0.8);
}
.sp-dep-sep { color: rgba(189,147,99,0.25); font-size: 0.6rem; }

/* ── Parallaxe image droite (JS) ── */

/* ══════════════════════════════════════
   SCROLL INDICATOR
   ══════════════════════════════════════ */
.sp-scroll {
  position: absolute;
  bottom: 36px;
  left: clamp(40px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
  opacity: 0;
  animation: spFadeIn 1s ease 1.6s forwards;
}
.sp-scroll-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(189,147,99,0.4);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
.sp-scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(189,147,99,0.5), transparent);
  animation: scrollDrop 2s cubic-bezier(0.25,0.1,0.25,1) infinite;
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ══════════════════════════════════════
   ANIMATIONS GLOBALES
   ══════════════════════════════════════ */
@keyframes spFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════
   RESPONSIVE MOBILE
   ══════════════════════════════════════ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 100dvh !important;
  }
  .sp-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 80px 28px 48px !important;
    order: 2;
  }
  .sp-divider { display: none !important; }
  .sp-right {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 45vh !important;
    min-height: 280px !important;
    order: 1;
    position: relative !important;
  }
  .sp-img-wrap { inset: 0 !important; }
  .sp-title-row { font-size: clamp(2.6rem, 9vw, 4rem) !important; }
  .sp-title-italic { padding-left: 1.2rem !important; }
  .sp-trust { gap: 18px !important; }
  .sp-index { display: none; }
  .sp-scroll { display: none !important; }
  .sp-cta-group { margin-bottom: 40px !important; }
  .sp-img-label { bottom: 16px; left: 16px; }
  .sp-deps { display: none; }
}

@media (max-width: 480px) {
  .sp-cta-group { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sp-trust { flex-wrap: wrap; gap: 16px; }
}


/* ════════════════════════════════════════════════════════════════════
   HERO FULL-BLEED IMMERSIF — BATIMM RENOV — v3.0 Avril 2026
   ════════════════════════════════════════════════════════════════════ */

/* 0. Reset layout split précédent */
.hero.fb-hero {
  display: block !important;
  grid-template-columns: none !important;
  position: relative !important;
  height: 100vh !important;
  min-height: 600px;
  overflow: hidden !important;
  background: #050810 !important;
  padding: 0 !important;
}

/* 1. Navbar — transparente au départ, glassmorphism au scroll */
#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background 0.6s ease, backdrop-filter 0.6s ease,
              -webkit-backdrop-filter 0.6s ease, box-shadow 0.6s ease,
              padding 0.4s ease !important;
  z-index: 1000 !important;
}
#navbar.scrolled {
  background: rgba(5, 8, 16, 0.78) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  box-shadow: 0 1px 0 rgba(189, 147, 99, 0.18) !important;
}
/* Logo légèrement réduit au scroll */
#navbar.scrolled .logo,
#navbar.scrolled .site-logo,
#navbar.scrolled [class*="logo"] img,
#navbar.scrolled .navbar-brand {
  transform: scale(0.88) !important;
  transition: transform 0.4s ease !important;
}

/* 2. Image de fond plein écran (parallaxe via JS) */
.fb-bg {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  bottom: -10%;
  background: url('hero-showroom.webp') center center / cover no-repeat;
  will-change: transform;
  transform: scale(1.06) translateY(0);
}

/* 3. Overlay gradient — lisibilité + ambiance luxe */
.fb-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 16, 0.60) 0%,
      rgba(5, 8, 16, 0.22) 45%,
      rgba(5, 8, 16, 0.68) 100%
    );
  z-index: 1;
}

/* 4. Contenu centré */
.fb-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 140px;
  z-index: 2;
}

/* 5. Eyebrow — petite étiquette au-dessus du titre */
.fb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #BD9363;
  margin-bottom: 28px;
  opacity: 0;
  animation: fbFadeUp 1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fb-eyebrow::before,
.fb-eyebrow::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: #BD9363;
  opacity: 0.5;
}

/* 6. Titre — grand serif display */
.fb-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(52px, 9.5vw, 136px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.10em !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
  margin: 0 0 24px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4) !important;
  opacity: 0;
  animation: fbFadeUp 1.1s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fb-title em {
  font-style: italic !important;
  color: #BD9363 !important;
  font-weight: 300 !important;
}

/* 7. Sous-titre */
.fb-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(11px, 1.4vw, 14px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.20em !important;
  color: rgba(255, 255, 255, 0.68) !important;
  text-transform: uppercase !important;
  line-height: 1.9 !important;
  max-width: 500px !important;
  margin: 0 0 52px !important;
  opacity: 0;
  animation: fbFadeUp 1s 0.80s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 8. CTA ghost — fill doré au hover */
.fb-cta {
  display: inline-block;
  padding: 17px 48px;
  border: 1px solid rgba(189, 147, 99, 0.65);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.5s ease, border-color 0.4s ease;
  opacity: 0;
  animation: fbFadeUp 1s 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fb-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #BD9363;
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fb-cta span {
  position: relative;
  z-index: 1;
}
.fb-cta:hover::before { transform: translateY(0); }
.fb-cta:hover {
  border-color: #BD9363;
  color: #050810;
}

/* 9. Bande de confiance — bas de hero */
.fb-trust {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(5, 8, 16, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(189, 147, 99, 0.15);
  z-index: 3;
  opacity: 0;
  animation: fbFadeIn 1s 1.4s ease forwards;
}
.fb-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 32px;
}
.fb-trust-google {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.fb-trust-sep {
  width: 1px;
  background: rgba(189, 147, 99, 0.20);
  align-self: stretch;
  margin: 12px 0;
}
.fb-trust-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: #BD9363;
  line-height: 1;
  letter-spacing: 0.03em;
}
.fb-trust-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.5;
  text-align: center;
}

/* 10. Indicateur scroll */
.fb-scroll {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 4;
  opacity: 0;
  animation: fbFadeIn 1s 1.6s ease forwards;
}
.fb-scroll-text {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.fb-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(189,147,99,0.55), transparent);
  transform-origin: top;
  animation: fbScrollPulse 2s 2s ease-in-out infinite;
}

/* 11. Keyframes */
@keyframes fbFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fbScrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(0.6); }
  50%       { opacity: 1;   transform: scaleY(1); }
}

/* 12. Responsive */
@media (max-width: 900px) {
  .fb-content { padding: 80px 20px 130px; }
  .fb-trust-item { padding: 12px 20px; }
}
@media (max-width: 600px) {
  .fb-title { letter-spacing: 0.06em !important; }
  .fb-sub   { letter-spacing: 0.12em !important; }
  .fb-cta   { padding: 15px 36px; }
  .fb-trust-item:last-child { display: none; }
  .fb-trust-sep:nth-child(6),
  .fb-trust-sep:nth-child(7) { display: none; }
}
@media (max-width: 400px) {
  .fb-trust-item:nth-child(5) { display: none; }
  .fb-trust-sep:nth-child(4) { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   HERO FULL-BLEED — CORRECTIFS V4 Avril 2026
   • Texte repositionné dans la zone terrazzo (bas de l'écran)
   • Header allégé (plus de CTA, logo aéré, links espacés)
   • Micro-animations entrée
   ════════════════════════════════════════════════════════════════════ */

/* 1. FOND — image wide, centrée, couvre tout */
.fb-bg {
  background: url('hero-showroom.webp') center center / cover no-repeat !important;
  background-attachment: local !important;
}

/* 2. OVERLAY — plus léger en haut pour ne pas masquer le logo BR,
               plus dense en bas pour faire ressortir le texte */
.fb-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 16, 0.30) 0%,
      rgba(5, 8, 16, 0.08) 40%,
      rgba(5, 8, 16, 0.72) 72%,
      rgba(5, 8, 16, 0.90) 100%
    ) !important;
}

/* 3. CONTENU — repositionné en bas dans la zone terrazzo */
.fb-content {
  justify-content: flex-end !important;
  padding-bottom: 116px !important; /* au-dessus de la bande trust */
  padding-top: 0 !important;
  gap: 0;
}

/* 4. EYEBROW — délai réduit pour cohérence */
.fb-eyebrow {
  margin-bottom: 14px !important;
  animation: fbFadeUp 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 5. TITRE — légèrement plus compact en bas */
.fb-title {
  margin: 0 0 12px !important;
  animation: fbFadeUp 1s 0.38s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 6. SOUS-TITRE */
.fb-sub {
  margin: 0 0 32px !important;
  animation: fbFadeUp 0.9s 0.56s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 7. CTA */
.fb-cta {
  animation: fbFadeUp 0.9s 0.74s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* ── HEADER — nettoyage ─────────────────────────────────────── */

/* 8. Logo — 20% plus petit */
#navbar .logo,
#navbar .site-logo,
#navbar [class*="logo"],
#navbar .navbar-brand,
#navbar a[href="/"],
#navbar a[href="index.html"],
#navbar > a:first-child {
  transform: scale(0.82) !important;
  transform-origin: left center !important;
}

/* 9. Liens nav — espacement accru */
#navbar ul,
#navbar nav ul,
#navbar .nav-links {
  gap: 40px !important;
}
#navbar ul li + li {
  margin-left: 0 !important;
}
#navbar ul li a:not(.nav-cta) {
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
}

/* 10. Bouton Devis Gratuit — masqué dans le header */
#navbar .nav-cta,
#navbar a.nav-cta,
#navbar li:has(a.nav-cta) {
  display: none !important;
}

/* ── MICRO-ANIMATIONS D'ENTRÉE ──────────────────────────────── */

/* 11. Logo navbar — slide down au chargement */
#navbar {
  animation: navbarSlideDown 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes navbarSlideDown {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 12. Bande trust — délai après le texte */
.fb-trust {
  animation: fbFadeIn 0.9s 1.0s ease both !important;
}

/* 13. Scroll indicator */
.fb-scroll {
  bottom: 105px !important;
  animation: fbFadeIn 0.8s 1.2s ease both !important;
}

/* ── CORRECTIFS PRÉCIS — Structure réelle du HTML ─────────────── */

/* Logo image — 20% plus petit + animation entrée */
.logo-img-nav {
  width: 128px !important;   /* 160 × 0.80 */
  height: auto !important;
  transition: transform 0.4s ease !important;
  animation: logoSlideDown 0.9s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes logoSlideDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo réduit au scroll */
#navbar.scrolled .logo-img-nav {
  width: 106px !important;
  transform: scale(1) !important; /* déjà réduit par width */
}

/* Suppression bouton Devis Gratuit dans la nav */
#nav-links li:has(a.nav-cta),
#nav-links .nav-cta,
li:has(> a.nav-cta) {
  display: none !important;
}

/* Espacement entre les liens nav — ciblage précis */
#nav-links {
  gap: 38px !important;
}
#nav-links li a:not(.nav-cta),
#nav-links li button.nav-dropdown-trigger {
  font-size: 11.5px !important;
  letter-spacing: 0.10em !important;
}

/* Navbar sans fond au départ — override les styles existants */
#navbar {
  background: transparent !important;
  padding: 18px 40px !important;
}
#navbar.scrolled {
  padding: 12px 40px !important;
}


/* ════════════════════════════════════════════════════════════════════
   HERO ASYMÉTRIQUE V5 — LAYOUT LUXE FINAL — Avril 2026
   Texte gauche (pierre sombre) · Logo BR droite · Air & Prestige
   ════════════════════════════════════════════════════════════════════ */

/* 0. Image de fond — zoom-out progressif à l'entrée */
.fb-bg {
  transform: scale(1.10) !important;
  animation: heroZoomOut 2.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
  /* NB: le parallax JS prend le relais après 2.4s */
}
@keyframes heroZoomOut {
  from { transform: scale(1.10) translateY(0); }
  to   { transform: scale(1.00) translateY(0); }
}

/* 1. Overlay bi-directionnel — très sombre à gauche, aéré au centre-droit */
.fb-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 16, 0.92) 0%,
      rgba(5, 8, 16, 0.70) 28%,
      rgba(5, 8, 16, 0.22) 58%,
      rgba(5, 8, 16, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 8, 16, 0.38) 0%,
      rgba(5, 8, 16, 0.04) 42%,
      rgba(5, 8, 16, 0.52) 78%,
      rgba(5, 8, 16, 0.85) 100%
    ) !important;
}

/* 2. Contenu — panel GAUCHE, aligné sur la pierre sombre */
.fb-content {
  padding-left: 8% !important;
  padding-right: 56% !important; /* laisse 44% à droite pour le logo BR */
  padding-top: 80px !important;
  padding-bottom: 100px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  /* override flex-end du correctif V4 */
}

/* 3. Eyebrow — ligne décorative à gauche seulement */
.fb-eyebrow {
  margin-bottom: 20px !important;
}
.fb-eyebrow::before { display: none !important; } /* pas de trait à gauche */
.fb-eyebrow::after  { width: 36px !important; opacity: 0.5 !important; }

/* 4. Titre — taille adaptée au panel gauche */
.fb-title {
  font-size: clamp(38px, 4.8vw, 86px) !important;
  letter-spacing: 0.12em !important;
  line-height: 0.95 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

/* 5. Sous-titre — compact & aéré */
.fb-sub {
  font-size: clamp(10px, 1.1vw, 13px) !important;
  letter-spacing: 0.22em !important;
  line-height: 2.0 !important;
  text-align: left !important;
  max-width: 380px !important;
  margin-bottom: 40px !important;
}

/* 6. CTA — aligné à gauche */
.fb-cta {
  align-self: flex-start !important;
}

/* 7. Scroll indicator — côté gauche, en bas */
.fb-scroll {
  left: 9% !important;
  transform: none !important;
  bottom: 100px !important;
}

/* ── HEADER V5 — Minimaliste Luxe ───────────────────────────────── */

/* 8. Logo — 15% plus petit (109px) */
.logo-img-nav {
  width: 109px !important;
}

/* 9. Liens — ultra-fins avec letter-spacing 0.2em */
#nav-links li a:not(.nav-cta),
#nav-links li button.nav-dropdown-trigger,
#nav-links li button.nav-tel-btn {
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
}

/* 10. Bouton Devis Gratuit — définitivement supprimé */
#nav-links li:has(a.nav-cta),
#nav-links a.nav-cta {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 11. Espacement nav */
#nav-links {
  gap: 42px !important;
}

/* 12. Padding navbar aéré */
#navbar {
  padding: 22px 48px !important;
}
#navbar.scrolled {
  padding: 14px 48px !important;
}

/* ── ANIMATIONS D'ENTRÉE — Séquence de prestige ─────────────────── */

/* 13. Texte gauche — apparaît après le fond (délai décalé) */
.fb-eyebrow {
  animation: fbFadeLeft 0.9s 0.50s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.fb-title {
  animation: fbFadeLeft 1.0s 0.70s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.fb-sub {
  animation: fbFadeLeft 0.9s 0.90s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.fb-cta {
  animation: fbFadeLeft 0.9s 1.10s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Fondu depuis la gauche (légèrement décalé en X) */
@keyframes fbFadeLeft {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 14. Trust strip & scroll */
.fb-trust {
  animation: fbFadeIn 0.8s 1.4s ease both !important;
}
.fb-scroll {
  animation: fbFadeIn 0.8s 1.6s ease both !important;
}

/* 15. Responsive — mobile : retour au centre */
@media (max-width: 768px) {
  .fb-content {
    padding-left: 6% !important;
    padding-right: 6% !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-end !important;
    padding-bottom: 120px !important;
  }
  .fb-title {
    font-size: clamp(34px, 8vw, 56px) !important;
    text-align: center !important;
  }
  .fb-sub { text-align: center !important; }
  .fb-cta { align-self: center !important; }
  .fb-scroll { left: 50% !important; transform: translateX(-50%) !important; }
  .fb-eyebrow::before { display: block !important; }
}


/* ════════════════════════════════════════════════════════════════════
   NAVIGATION V6 — Sticky · Blur · CTA Or · Smooth Hover
   ════════════════════════════════════════════════════════════════════ */

/* 1. Smooth scroll global */
html {
  scroll-behavior: smooth !important;
}

/* 2. Navbar — TOUJOURS FIXE avec backdrop-blur permanent léger */
#navbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  /* Blur léger permanent — élégant sur les images */
  background: rgba(5, 8, 16, 0.18) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(189, 147, 99, 0.08) !important;
  transition:
    background 0.5s ease,
    backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease,
    border-color 0.5s ease,
    padding 0.4s ease !important;
}

/* 3. Navbar au scroll — plus opaque, blur renforcé */
#navbar.scrolled {
  background: rgba(5, 8, 16, 0.82) !important;
  backdrop-filter: blur(22px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(189, 147, 99, 0.18) !important;
}

/* ── CTA 'ÉTUDIER VOTRE PROJET' ─────────────────────────────────── */

/* 4. Séparateur visuel avant le CTA */
.nav-etude-item {
  margin-left: 12px !important;
  padding-left: 16px !important;
  border-left: 1px solid rgba(189, 147, 99, 0.25) !important;
  display: flex !important;
  align-items: center !important;
}

/* 5. Style du lien CTA */
.nav-etude-link {
  display: inline-block;
  position: relative;
  color: rgba(255, 255, 255, 0.90) !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding-bottom: 4px !important;
  transition: color 0.3s ease, opacity 0.3s ease !important;
}

/* 6. Ligne dorée 1px — toujours visible */
.nav-etude-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: #BD9363 !important;
  transform-origin: left center !important;
  transform: scaleX(1) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease !important;
}

/* 7. Micro-interaction hover — ligne se rétracte puis revient */
.nav-etude-link:hover {
  color: #BD9363 !important;
  opacity: 1 !important;
}
.nav-etude-link:hover::after {
  transform: scaleX(0.55) !important;
  opacity: 0.70 !important;
}

/* ── BOUTON HERO 'INITIER VOTRE PROJET' — micro-interaction ─────── */

/* 8. Hover du CTA hero — ligne de fond se déplace + opacité */
.fb-cta {
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    opacity 0.3s ease !important;
}
.fb-cta:hover {
  opacity: 0.92 !important;
  letter-spacing: 0.28em !important;
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    letter-spacing 0.4s ease,
    opacity 0.3s ease !important;
}

/* 9. Assure que le lien nav-cta (devis gratuit) reste caché */
#nav-links a.nav-cta,
#nav-links li:has(a.nav-cta):not(.nav-etude-item) {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   HERO FUSION LUMINEUSE V7 — Pierre sombre → Blanc pur
   Le totem irradie, le Terrazzo s'illumine, la section suivante naît
   ════════════════════════════════════════════════════════════════════ */

/* 1. Suppression barre statistiques (trust strip) + scroll indicator */
.fb-trust   { display: none !important; }
.fb-scroll  { display: none !important; }

/* 2. Hero — fond transparent pour que le blanc du bas transparaisse */
.hero.fb-hero {
  background: transparent !important;
  /* overflow visible pour que le pseudo-élément de fusion puisse exister */
}

/* 3. Overlay tri-couche : pierre sombre gauche + halo central + fusion blanche bas
   Lecture de bas en haut :
   • Blanc pur à 100% (raccord parfait avec la section suivante)
   • Montée du blanc à partir de 62% (sous le totem, Terrazzo qui s'illumine)
   • Halo chaud radial centré sur la base du totem (~58% du haut)
   • Côté gauche sombre pour la lisibilité du texte */
.fb-overlay {
  background:
    /* Couche A — sombre gauche pour lisibilité texte */
    linear-gradient(
      108deg,
      rgba(5,  8, 16, 0.90) 0%,
      rgba(5,  8, 16, 0.62) 28%,
      rgba(5,  8, 16, 0.08) 52%,
      transparent            68%
    ),
    /* Couche B — halo lumineux radial, base du totem BR */
    radial-gradient(
      ellipse 72% 42% at 54% 60%,
      rgba(255, 248, 225, 0.42) 0%,
      rgba(255, 255, 255, 0.28) 28%,
      rgba(255, 255, 255, 0.08) 55%,
      transparent            72%
    ),
    /* Couche C — montée vers le blanc : Terrazzo qui s'éclaire */
    linear-gradient(
      180deg,
      rgba(5,  8, 16, 0.35) 0%,
      rgba(5,  8, 16, 0.12) 42%,
      rgba(255,255,255, 0.00) 55%,
      rgba(255,255,255, 0.55) 70%,
      rgba(255,255,255, 0.90) 86%,
      #ffffff                100%
    ) !important;
  z-index: 1 !important;
}

/* 4. Halo div — couche de lumière chaude séparée (animée au scroll via JS) */
.fb-halo {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: 58% !important;
  transform: translate(-50%, -50%) !important;
  width: 70% !important;
  height: 44% !important;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 246, 210, 0.30) 0%,
    rgba(255, 255, 255, 0.16) 38%,
    transparent               68%
  ) !important;
  pointer-events: none !important;
  opacity: 0.55;
  will-change: opacity;
  transition: opacity 0.15s linear !important;
}

/* 5. Repositionnement du texte — plus haut pour rester dans la zone sombre */
.fb-content {
  justify-content: center !important;
  padding-top: 90px !important;
  padding-bottom: 28vh !important;  /* pousse le texte dans le tiers supérieur */
}

/* 6. Raccord imperceptible avec la section suivante */
.hero.fb-hero {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}
/* La section directement après le hero */
#home + *,
.hero.fb-hero + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #ffffff !important;
}

/* 7. Image de fond — légère désaturation pour préparer la fusion lumineuse */
.fb-bg {
  filter: brightness(1.0) saturate(0.92);
  transition: filter 0.08s linear;
  will-change: filter, transform;
}

/* 8. Mobile */
@media (max-width: 768px) {
  .fb-content {
    padding-bottom: 20vh !important;
  }
  .fb-halo {
    width: 90% !important;
    height: 35% !important;
    top: 62% !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   CORRECTIF FINAL V8 — Rétablissement Hero + Fusion propre
   ════════════════════════════════════════════════════════════════════ */

/* 1. BARRE STATS (1000+, 15 ANS, 98%, 7J/7) — supprimée définitivement */
.stats,
div.stats,
.stats-inner {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 2. FB-TRUST (bande interne au hero) — cachée aussi */
.fb-trust  { display: none !important; }
.fb-scroll { display: none !important; }

/* ── RÉTABLISSEMENT COMPLET DU CONTENU HERO ──────────────────────── */

/* 3. Contenu — position gauche, centré verticalement, VISIBLE */
.fb-content {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  padding-top: 90px !important;
  padding-bottom: 0 !important;         /* reset du 28vh cassé */
  padding-left: 8% !important;
  padding-right: 58% !important;
  z-index: 3 !important;
}

/* 4. Eyebrow — visible */
.fb-eyebrow {
  opacity: 1 !important;
  display: inline-flex !important;
  margin-bottom: 18px !important;
  animation: fbFadeLeft 0.9s 0.50s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 5. Titre — visible */
.fb-title {
  opacity: 1 !important;
  display: block !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(38px, 4.8vw, 84px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  line-height: 0.95 !important;
  margin: 0 0 20px !important;
  animation: fbFadeLeft 1.0s 0.70s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.fb-title em {
  font-style: italic !important;
  color: #BD9363 !important;
}

/* 6. Sous-titre — visible */
.fb-sub {
  opacity: 1 !important;
  display: block !important;
  font-size: clamp(10px, 1.1vw, 13px) !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.70) !important;
  text-transform: uppercase !important;
  line-height: 2.0 !important;
  max-width: 380px !important;
  margin: 0 0 40px !important;
  animation: fbFadeLeft 0.9s 0.90s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* 7. CTA — visible */
.fb-cta {
  opacity: 1 !important;
  display: inline-block !important;
  align-self: flex-start !important;
  animation: fbFadeLeft 0.9s 1.10s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* ── OVERLAY — GRADIENT PROPRE : PIERRE SOMBRE → BLANC BAS 20% ───── */

/* 8. Overlay simplifié et lisible */
.fb-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    /* Côté gauche sombre — lisibilité du texte */
    linear-gradient(
      105deg,
      rgba(5,  8, 16, 0.88) 0%,
      rgba(5,  8, 16, 0.55) 30%,
      rgba(5,  8, 16, 0.08) 55%,
      transparent            70%
    ),
    /* Fusion blanche sur les 20% du bas uniquement */
    linear-gradient(
      to bottom,
      transparent  0%,
      transparent  78%,
      rgba(255,255,255, 0.45) 86%,
      rgba(255,255,255, 0.85) 93%,
      #ffffff               100%
    ) !important;
}

/* 9. Halo — doux et positionné sur la base du totem */
.fb-halo {
  position: absolute !important;
  z-index: 2 !important;
  left: 54% !important;
  top:  62% !important;
  transform: translate(-50%, -50%) !important;
  width:  62% !important;
  height: 38% !important;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 248, 225, 0.28) 0%,
    rgba(255, 255, 255, 0.14) 42%,
    transparent               70%
  ) !important;
  pointer-events: none !important;
}

/* 10. Raccord seamless avec la section suivante */
.hero.fb-hero {
  margin-bottom: 0 !important;
}
.stats + *,
.hero.fb-hero + div + * {
  margin-top: 0 !important;
  padding-top: 80px !important;
}

/* 11. Mobile */
@media (max-width: 768px) {
  .fb-content {
    align-items: center !important;
    text-align: center !important;
    padding-left: 6% !important;
    padding-right: 6% !important;
    padding-bottom: 80px !important;
    justify-content: flex-end !important;
  }
  .fb-cta { align-self: center !important; }
  .fb-title { font-size: clamp(32px, 9vw, 52px) !important; text-align: center !important; }
  .fb-sub   { text-align: center !important; }
}


/* ════════════════════════════════════════════════════════════════════
   HERO V9 FINAL — Fixed parallax · Mobile stack · Cleanup
   ════════════════════════════════════════════════════════════════════ */

/* 1. Hero — background-attachment: fixed (parallax CSS natif) */
.hero.fb-hero {
  background-image: url('hero-showroom.webp') !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
  /* overflow: clip évite le bug "fixed bg ignoré dans overflow:hidden" */
  overflow: clip !important;
}

/* 2. fb-bg div — neutralisé (le fond est maintenant sur le hero) */
.fb-bg {
  background: transparent !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* 3. Overlay — inchangé, mais z-index explicite pour surpasser le fixed bg */
.fb-overlay {
  z-index: 1 !important;
}

/* 4. Halo — toujours actif */
.fb-halo {
  z-index: 2 !important;
}

/* 5. Contenu — au-dessus de tout */
.fb-content {
  z-index: 3 !important;
}

/* ── MOBILE — Texte en haut, totem visible en bas ────────────────── */
@media (max-width: 768px) {
  /* iOS ne supporte pas background-attachment: fixed → scroll */
  .hero.fb-hero {
    background-attachment: scroll !important;
    /* Décale l'image : pierre sombre en haut pour le texte,
       totem visible dans la moitié basse */
    background-position: 42% top !important;
    background-size: 200% auto !important; /* zoom pour montrer juste le haut */
  }

  /* Texte : en haut, centré, lisible */
  .fb-content {
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: 110px !important;
    padding-bottom: 0 !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  .fb-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .fb-title {
    font-size: clamp(32px, 9.5vw, 54px) !important;
    text-align: center !important;
    letter-spacing: 0.08em !important;
  }
  .fb-sub {
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  .fb-cta {
    align-self: center !important;
  }

  /* Overlay mobile — assombrit le haut pour le texte */
  .fb-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(5, 8, 16, 0.82) 0%,
        rgba(5, 8, 16, 0.55) 38%,
        rgba(5, 8, 16, 0.15) 60%,
        rgba(255,255,255, 0.55) 82%,
        #ffffff 100%
      ) !important;
  }
}

@media (max-width: 480px) {
  .hero.fb-hero {
    background-size: 220% auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   MODALE TÉLÉPHONE — LUXE PREMIUM — Harmonie Hero
   Fond sombre architectural · Or brossé · Cormorant · Boutons fins
   ════════════════════════════════════════════════════════════════════ */

/* 1. Overlay de fond — brume sombre */
#phone-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
#phone-overlay.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. Flou d'arrière-plan */
#phone-blur {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(5, 8, 16, 0.70) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}

/* 3. Boîte modale — fond charbon, bordure or fine */
#phone-box {
  position: relative !important;
  z-index: 1 !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(197, 160, 89, 0.40) !important;
  border-radius: 6px !important;               /* architectural, peu arrondi */
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(197, 160, 89, 0.06) inset !important;
  padding: 40px 36px 32px !important;
  min-width: 300px !important;
  max-width: 360px !important;
  width: 90vw !important;
  text-align: center !important;
  /* Entrée animée */
  animation: phBoxIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes phBoxIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Supprime les décors angulaires de l'ancienne version */
.ph-corner-tr, .ph-corner-bl {
  display: none !important;
}

/* 4. Bouton fermeture — croix SVG fine */
.ph-close {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  background: none !important;
  border: none !important;
  padding: 6px !important;
  cursor: pointer !important;
  opacity: 0.55 !important;
  transition: opacity 0.25s ease !important;
  line-height: 0 !important;
  border-radius: 50% !important;
}
.ph-close:hover {
  opacity: 1 !important;
  background: rgba(197, 160, 89, 0.08) !important;
}
.ph-close svg line {
  transition: stroke 0.2s ease;
}

/* 5. Tag service relation client */
.ph-service-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(197, 160, 89, 0.60) !important;
  text-align: center !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.12) !important;
}

/* 6. Icône téléphone */
.ph-icon {
  color: rgba(197, 160, 89, 0.70) !important;
  margin-bottom: 10px !important;
}
.ph-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* 7. Label "Appelez-nous" */
.ph-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.36) !important;
  margin-bottom: 10px !important;
}

/* 8. Numéro — Cormorant Garamond, blanc cassé, élégant */
.ph-num {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  color: rgba(255, 248, 235, 0.92) !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

/* 9. Ligne séparatrice */
.ph-line {
  height: 1px !important;
  background: rgba(197, 160, 89, 0.15) !important;
  margin: 22px 0 !important;
  border: none !important;
}

/* 10. Horaires */
.ph-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.32) !important;
  margin-bottom: 28px !important;
}

/* 11. Bouton APPELER — contour doré, fond transparent → or au hover */
.ph-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 14px 20px !important;
  margin-bottom: 10px !important;
  background: transparent !important;
  border: 1px solid rgba(197, 160, 89, 0.65) !important;
  border-radius: 3px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition:
    background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s ease,
    border-color 0.35s ease !important;
  clip-path: none !important;
  border-radius: 3px !important;
}
.ph-btn:hover {
  background: #c5a059 !important;
  color: #111111 !important;
  border-color: #c5a059 !important;
}
.ph-btn svg {
  opacity: 0.70 !important;
  flex-shrink: 0 !important;
}
.ph-btn:hover svg {
  opacity: 1 !important;
  stroke: #111111 !important;
}

/* 12. Bouton WHATSAPP — minimaliste, gris doux, sans vert */
.ph-btn-wa {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-bottom: 0 !important;
}
.ph-btn-wa:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.ph-btn-wa svg {
  fill: currentColor !important;
  opacity: 0.60 !important;
}
.ph-btn-wa:hover svg {
  opacity: 0.85 !important;
}
/* Force override du vert depuis style.css / inline */
a.ph-btn-wa,
.ph-btn.ph-btn-wa {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ════════════════════════════════════════════════════════════════════
   MENU MOBILE LUXE — Overlay Plein Écran
   Burger 2 lignes asymétriques · Noir architectural · Grain · Cormorant
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. BURGER — 2 lignes asymétriques ─────────────────────────────── */
#burger {
  display: none !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 100001 !important;
  position: relative !important;
}

/* Ligne longue — blanche */
#burger .bur-l {
  display: block !important;
  width: 24px !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border-radius: 1px !important;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.30s ease,
    width     0.35s ease !important;
}

/* Ligne courte — or */
#burger .bur-s {
  display: block !important;
  width: 16px !important;
  height: 1px !important;
  background: #c5a059 !important;
  border-radius: 1px !important;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.30s ease,
    width     0.35s ease !important;
}

/* État ouvert → croix */
#burger.open .bur-l {
  width: 22px !important;
  transform: translateY(4px) rotate(45deg) !important;
  background: rgba(255, 255, 255, 0.90) !important;
}
#burger.open .bur-s {
  width: 22px !important;
  transform: translateY(-4px) rotate(-45deg) !important;
  background: #c5a059 !important;
}

/* Afficher burger uniquement sur mobile */
@media (max-width: 900px) {
  #burger { display: flex !important; }
}

/* ── 2. OVERLAY MENU — plein écran sombre ───────────────────────────── */
@keyframes menuFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes linkSlideIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

#nav-links {
  /* État fermé sur mobile */
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #0a0a0a !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
  /* Grain via pseudo */
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition:
    opacity    0.55s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.55s step-end !important;
  /* Override toute mise en page desktop */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* Grain texture SVG */
#nav-links::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 0 !important;
}

/* Liseré or vertical — décoration gauche */
#nav-links::after {
  content: '' !important;
  position: absolute !important;
  left: clamp(24px, 8vw, 64px) !important;
  top: 22% !important;
  height: 56% !important;
  width: 1px !important;
  background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.35) 30%, rgba(197,160,89,0.35) 70%, transparent) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* État ouvert */
#nav-links.open {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: menuFadeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  transition:
    opacity    0.55s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.55s step-start !important;
}

/* ── 3. ITEMS DE NAVIGATION — Cormorant, centré, majuscules ─────────── */
#nav-links li {
  position: relative !important;
  z-index: 1 !important;
  list-style: none !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  animation: none !important;
}

#nav-links.open li {
  animation: linkSlideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Stagger par enfant */
#nav-links.open li:nth-child(1)  { animation-delay: 0.10s !important; }
#nav-links.open li:nth-child(2)  { animation-delay: 0.17s !important; }
#nav-links.open li:nth-child(3)  { animation-delay: 0.24s !important; }
#nav-links.open li:nth-child(4)  { animation-delay: 0.31s !important; }
#nav-links.open li:nth-child(5)  { animation-delay: 0.38s !important; }
#nav-links.open li:nth-child(6)  { animation-delay: 0.45s !important; }
#nav-links.open li:nth-child(7)  { animation-delay: 0.50s !important; }
#nav-links.open li:nth-child(8)  { animation-delay: 0.55s !important; }

/* Liens — Cormorant Garamond, grande taille */
#nav-links li a,
#nav-links li button.nav-tel-btn {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(26px, 5.5vw, 44px) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 6px 0 !important;
  position: relative !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.30s ease !important;
}

/* Soulignement or au hover */
#nav-links li a::after,
#nav-links li button.nav-tel-btn::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: #c5a059 !important;
  transition: width 0.40s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#nav-links li a:hover,
#nav-links li button.nav-tel-btn:hover {
  color: rgba(255, 248, 235, 1) !important;
}
#nav-links li a:hover::after,
#nav-links li button.nav-tel-btn:hover::after {
  width: 100% !important;
}

/* Cacher le CTA "Devis Gratuit" en mobile (remplacé par footer CTA) */
#nav-links .nav-cta {
  display: none !important;
}
/* Cacher aussi le lien ÉTUDIER VOTRE PROJET dans l'overlay mobile */
#nav-links .nav-etude-item {
  display: none !important;
}

/* ── 4. HEADER MOBILE — logo centré ────────────────────────────────── */
.mob-nav-header {
  display: none !important;
}

nav.menu-open .mob-nav-header {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 72px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100002 !important;
  pointer-events: none !important;
}

.mob-nav-logo {
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.85 !important;
}

/* ── 5. FOOTER MOBILE — conciergerie + CTA ──────────────────────────── */
.mob-nav-footer {
  display: none !important;
}

nav.menu-open .mob-nav-footer {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 20px 24px 28px !important;
  z-index: 100002 !important;
  background: linear-gradient(to top, rgba(10,10,10,0.98) 70%, transparent) !important;
  pointer-events: auto !important;
  animation: menuFadeIn 0.70s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both !important;
}

/* Numéro de téléphone — Cormorant, or */
.mob-nav-tel {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  letter-spacing: 0.10em !important;
  color: rgba(197, 160, 89, 0.90) !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}
.mob-nav-tel:hover {
  color: #c5a059 !important;
}

/* Ville — Inter, minuscule, gris fin */
.mob-nav-city {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 300 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.28) !important;
  display: block !important;
}

/* CTA — bouton or outline */
.mob-nav-cta {
  display: inline-block !important;
  margin-top: 6px !important;
  padding: 13px 28px !important;
  border: 1px solid rgba(197, 160, 89, 0.70) !important;
  border-radius: 3px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition:
    background 0.40s cubic-bezier(0.16, 1, 0.3, 1),
    color      0.30s ease,
    border-color 0.30s ease !important;
}
.mob-nav-cta:hover {
  background: #c5a059 !important;
  color: #111 !important;
  border-color: #c5a059 !important;
}

/* ── 6. Masquer le menu desktop sur mobile ──────────────────────────── */
@media (max-width: 900px) {
  /* Sur mobile : nav-links cache la toolbar desktop et prend l'overlay */
  /* Les éléments desktop uniquement */
  #nav-links .nav-etude-item { display: none !important; }

  /* S'assurer que le navbar reste au-dessus de l'overlay */
  #navbar {
    z-index: 100001 !important;
  }

  /* Burger reste visible par-dessus l'overlay */
  #burger {
    z-index: 100002 !important;
  }

  /* Sur desktop : s'assurer que le menu overlay est désactivé */
}

@media (min-width: 901px) {
  /* Desktop — masquer tout ce qui est mobile-only */
  #burger               { display: none !important; }
  .mob-nav-header       { display: none !important; }
  .mob-nav-footer       { display: none !important; }

  /* Restaurer le nav desktop */
  #nav-links {
    position: static !important;
    inset: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 38px !important;
    height: auto !important;
    width: auto !important;
    animation: none !important;
  }
  #nav-links::before,
  #nav-links::after {
    display: none !important;
  }
  #nav-links li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  #nav-links li a,
  #nav-links li button.nav-tel-btn {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    color: rgba(255, 255, 255, 0.80) !important;
    text-transform: uppercase !important;
    padding: 0 !important;
  }
  #nav-links li a::after,
  #nav-links li button.nav-tel-btn::after {
    display: none !important;
  }
  #nav-links .nav-etude-item { display: list-item !important; }
}

/* ════════════════════════════════════════════════════════════════════
   NAVBAR — ARCHITECTURE 3 ZONES · SYMÉTRIE PARFAITE
   Logo gauche · Liens centrés · CTA droit · Underline or depuis centre
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Navbar — structure 3 colonnes ─────────────────────────────── */
#navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 clamp(20px, 4vw, 52px) !important;
  height: 72px !important;
  /* Glassmorphism permanent — toujours lisible */
  background: rgba(5, 8, 16, 0.55) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.10) !important;
  box-shadow: none !important;
  z-index: 100001 !important;
}

/* Au scroll : fond plus opaque */
#navbar.scrolled {
  background: rgba(5, 8, 16, 0.88) !important;
  backdrop-filter: blur(22px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.16) !important;
}

/* ── 2. Zone gauche — Logo ────────────────────────────────────────── */
.nav-zone-left {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  z-index: 2 !important;
}

.nav-zone-left .logo-wrap {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

.nav-zone-left .logo-img-nav,
.nav-zone-left img {
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.88 !important;
  transition: opacity 0.3s ease !important;
}
.nav-zone-left .logo-wrap:hover img {
  opacity: 1 !important;
}

/* ── 3. Zone centre — Navigation desktop ──────────────────────────── */

/* DESKTOP : nav-links en barre horizontale centrée */
@media (min-width: 901px) {
  #nav-links {
    /* Reset de TOUS les styles overlay mobile */
    position: static !important;
    inset: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;

    /* Layout 3-zones : zone centrale */
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(20px, 2.8vw, 44px) !important;

    /* Reset visual */
    padding: 0 !important;
    margin: 0 !important;
    height: 72px !important;
    width: auto !important;
    list-style: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Annuler les pseudo-éléments overlay (grain + liseré) */
  #nav-links::before,
  #nav-links::after {
    display: none !important;
  }

  /* Items — réinitialisation stagger et entrée */
  #nav-links li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    position: relative !important;
    list-style: none !important;
  }

  /* ── Liens — Inter ultra-fin, majuscules, espacement aéré ── */
  #nav-links li a,
  #nav-links li > button:not(.nav-etude-link) {
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 300 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.72) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    position: relative !important;
    /* Transition couleur */
    transition: color 0.30s ease !important;
    white-space: nowrap !important;
  }

  /* ── Underline or — s'étire depuis le centre ── */
  #nav-links li a::after,
  #nav-links li > button:not(.nav-etude-link)::after {
    display: block !important;    /* override display:none du bloc mobile-menu desktop */
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 50% !important;
    right: 50% !important;
    height: 1px !important;
    background: #c5a059 !important;
    transition: left 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  #nav-links li a:hover,
  #nav-links li > button:not(.nav-etude-link):hover {
    color: rgba(255, 255, 255, 0.96) !important;
  }
  #nav-links li a:hover::after,
  #nav-links li > button:not(.nav-etude-link):hover::after {
    left: 0 !important;
    right: 0 !important;
  }

  /* Dropdown trigger : chevron discret */
  #nav-links .nav-chevron {
    width: 9px !important;
    height: 9px !important;
    opacity: 0.55 !important;
    transition: transform 0.28s ease, opacity 0.2s ease !important;
  }
  #nav-links .nav-dropdown-trigger[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg) !important;
    opacity: 0.85 !important;
  }

  /* Masquer sur desktop : éléments mobile-only */
  #nav-links .nav-mob-only { display: none !important; }
  #nav-links .nav-cta      { display: none !important; }
  #nav-links .nav-etude-item { display: none !important; }
}

/* ── 4. Zone droite — Icône phone + CTA ──────────────────────────── */
.nav-zone-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  z-index: 2 !important;
}

/* Icône téléphone — cercle or discret */
.nav-phone-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  background: transparent !important;
  color: rgba(197, 160, 89, 0.80) !important;
  cursor: pointer !important;
  transition:
    background    0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color  0.35s ease,
    color         0.30s ease !important;
  padding: 0 !important;
}
.nav-phone-icon:hover {
  background: rgba(197, 160, 89, 0.12) !important;
  border-color: rgba(197, 160, 89, 0.70) !important;
  color: #c5a059 !important;
}
.nav-phone-icon svg {
  display: block !important;
}

/* Bouton ÉTUDIER VOTRE PROJET — encadré or, lettre fine */
.nav-etude-link,
a.nav-etude-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  border: 1px solid rgba(197, 160, 89, 0.60) !important;
  border-radius: 3px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  background: transparent !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    background    0.40s cubic-bezier(0.16, 1, 0.3, 1),
    color         0.30s ease,
    border-color  0.30s ease !important;
  /* Annuler l'underline or animé (c'est un bouton, pas un lien texte) */
  position: static !important;
}
.nav-etude-link::after,
a.nav-etude-link::after {
  display: none !important;
}
.nav-etude-link:hover,
a.nav-etude-link:hover {
  background: #c5a059 !important;
  color: #111111 !important;
  border-color: #c5a059 !important;
}

/* ── 5. Mobile — masquer zone droite, garder burger ──────────────── */
@media (max-width: 900px) {
  .nav-zone-right {
    display: none !important;
  }
  .nav-zone-left .logo-img-nav,
  .nav-zone-left img {
    height: 34px !important;
  }
  /* S'assurer que le burger reste positionné à droite */
  #navbar {
    justify-content: space-between !important;
  }
}

/* ── 6. Annuler les anciens overrides navbar qui entrent en conflit ── */
/* Anciens blocs V4/V6 */
#navbar ul,
#navbar nav ul,
#navbar .nav-links {
  gap: clamp(20px, 2.8vw, 44px) !important; /* spec ID+classe > ID seul — valeur correcte */
}
#navbar ul li + li {
  margin-left: 0 !important;
}
#navbar ul li a:not(.nav-cta) {
  letter-spacing: unset !important;
  font-size: unset !important;
}
/* Ancienne règle logo scale */
#navbar .logo,
#navbar .site-logo,
#navbar [class*="logo"],
#navbar .navbar-brand {
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   SECTION À PROPOS — LUXE ARCHITECTURAL
   Fond anthracite → blanc · Photo N&B · Stats or fines · Serif Cormorant
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Section — fond sombre architectural avec fondu vers le blanc ─ */
section.ab-luxe {
  background:
    linear-gradient(
      180deg,
      #0c0f14 0%,
      #111418 40%,
      #181c22 65%,
      rgba(240, 238, 234, 0.55) 88%,
      #f5f3ef 100%
    ) !important;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 100px) !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: none !important;
}

/* Grain subtil sur toute la section */
section.ab-luxe::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

section.ab-luxe .ab-wrap {
  position: relative !important;
  z-index: 1 !important;
  gap: clamp(40px, 6vw, 100px) !important;
}

/* ── 2. Photo — Noir & Blanc dramatique ──────────────────────────── */
.ab-img-bw {
  filter: grayscale(100%) contrast(1.08) brightness(0.92) !important;
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.ab-img-bw:hover {
  filter: grayscale(85%) contrast(1.05) brightness(0.96) !important;
}

/* Cadre photo — bord or discret */
.ab-photo-luxe {
  position: relative !important;
  border: 1px solid rgba(197, 160, 89, 0.20) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(197, 160, 89, 0.08) inset !important;
}

/* Suppression badge chiffre */
.ab-badge { display: none !important; }

/* ── 3. Signature chiffre — gravée dans le coin de la photo ─────── */
.ab-sig {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  padding: 18px 22px !important;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(5, 8, 14, 0.72) 60%,
    rgba(5, 8, 14, 0.90) 100%
  ) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  z-index: 2 !important;
}

.ab-sig-n {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #c5a059 !important;
  letter-spacing: 0.02em !important;
}
.ab-sig-n sup {
  font-size: 0.45em !important;
  vertical-align: super !important;
  letter-spacing: 0 !important;
}

.ab-sig-l {
  font-family: 'Inter', sans-serif !important;
  font-size: 8px !important;
  font-weight: 300 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(197, 160, 89, 0.65) !important;
}

/* Coins architecturaux — couleur or */
.ab-photo-luxe .ab-photo-corner {
  border-color: rgba(197, 160, 89, 0.50) !important;
}

/* ── 4. Tag "À Propos" — lettre-spacing élargi ───────────────────── */
.ab-sec-tag {
  letter-spacing: 0.38em !important;
  font-size: 9px !important;
  color: rgba(197, 160, 89, 0.75) !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  margin-bottom: 18px !important;
  display: block !important;
}

/* ── 5. Titre — Cormorant Garamond Serif, blanc cassé ───────────── */
.ab-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(36px, 5vw, 58px) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: rgba(255, 248, 235, 0.96) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 28px !important;
}
.ab-title em {
  font-style: italic !important;
  color: rgba(197, 160, 89, 0.90) !important;
}

/* ── 6. Corps de texte — Inter 200, ligne très aérée ─────────────── */
section.ab-luxe .ab-intro {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(13px, 1.4vw, 15px) !important;
  font-weight: 200 !important;
  line-height: 2.1 !important;
  color: rgba(220, 215, 205, 0.68) !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.01em !important;
}
section.ab-luxe .ab-intro strong {
  font-weight: 300 !important;
  color: rgba(220, 215, 205, 0.85) !important;
}

/* ── 7. Stats — séparateurs dorés 1px, chiffres petits Serif or ─── */
.ab-stats-luxe {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 28px 0 !important;
  border-top: 1px solid rgba(197, 160, 89, 0.14) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.14) !important;
  margin: 32px 0 36px !important;
}

.ab-stats-luxe .ab-stat {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
}

.ab-stats-luxe .ab-stat-n {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: rgba(197, 160, 89, 0.88) !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}
.ab-stats-luxe .ab-stat-n sup {
  font-size: 0.50em !important;
  vertical-align: super !important;
}

.ab-stats-luxe .ab-stat-l {
  font-family: 'Inter', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 300 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.30) !important;
}

/* Séparateurs — ligne or verticale 1px */
.ab-stat-div-luxe {
  width: 1px !important;
  height: 36px !important;
  background: rgba(197, 160, 89, 0.28) !important;
  flex-shrink: 0 !important;
  border: none !important;
}

/* ── 8. Certifications — épurées, pas de carte ───────────────────── */
.ab-feats-luxe {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 32px !important;
  margin-bottom: 40px !important;
}

.ab-feats-luxe .ab-feat {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.10) !important;
  padding-bottom: 16px !important;
  transition: border-color 0.3s ease !important;
}
.ab-feats-luxe .ab-feat:hover {
  border-color: rgba(197, 160, 89, 0.28) !important;
  background: none !important;
}

/* Icône — cercle or fin */
.ab-feats-luxe .ab-feat-ic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  background: transparent !important;
  color: rgba(197, 160, 89, 0.80) !important;
  flex-shrink: 0 !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}
.ab-feats-luxe .ab-feat-ic svg {
  stroke: currentColor !important;
  width: 14px !important;
  height: 14px !important;
}
.ab-feats-luxe .ab-feat:hover .ab-feat-ic {
  border-color: rgba(197, 160, 89, 0.65) !important;
  background: rgba(197, 160, 89, 0.07) !important;
}

/* Texte certif */
.ab-feat-txt {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.ab-feat-txt strong {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.80) !important;
}
.ab-feat-txt span {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 200 !important;
  color: rgba(255, 255, 255, 0.38) !important;
  line-height: 1.5 !important;
}

/* ── 9. CTA — Contour or, texte or, AUCUN fond ──────────────────── */
.ab-bottom-luxe {
  display: flex !important;
  align-items: center !important;
}

.ab-cta-luxe {
  display: inline-flex !important;
  align-items: center !important;
  padding: 16px 32px !important;
  border: 1px solid rgba(197, 160, 89, 0.65) !important;
  border-radius: 3px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(197, 160, 89, 0.90) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition:
    background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s ease,
    border-color 0.35s ease !important;
}
.ab-cta-luxe:hover {
  background: rgba(197, 160, 89, 0.10) !important;
  color: #c5a059 !important;
  border-color: #c5a059 !important;
}

/* Supprimer l'ancien bouton et la note "Devis gratuit" */
section.ab-luxe .btn-p,
section.ab-luxe .ab-bottom-note {
  display: none !important;
}

/* ── 10. Mobile — colonne unique, photo en pleine largeur ─────────── */
@media (max-width: 768px) {
  section.ab-luxe {
    padding: 60px 24px 80px !important;
  }
  .ab-feats-luxe {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ab-stats-luxe {
    gap: 0 !important;
  }
  .ab-stats-luxe .ab-stat {
    padding: 0 8px !important;
  }
  .ab-stats-luxe .ab-stat-n {
    font-size: 22px !important;
  }
  .ab-sig-n {
    font-size: 28px !important;
  }
  .ab-cta-luxe {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   NAVBAR — NIVEAU CABINET D'ARCHITECTE
   Montserrat 300 · Letter-spacing 0.20em · Séparateurs · · Verre
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Fond vitré — transparence profonde ───────────────────────── */
#navbar {
  background: rgba(4, 6, 12, 0.32) !important;
  backdrop-filter: blur(18px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.09) !important;
}
#navbar.scrolled {
  background: rgba(4, 6, 12, 0.72) !important;
  backdrop-filter: blur(22px) saturate(2.0) !important;
  -webkit-backdrop-filter: blur(22px) saturate(2.0) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.16) !important;
}

/* ── 2. Typographie Royale — Montserrat 300, 0.20em ─────────────── */
@media (min-width: 901px) {
  #nav-links li a,
  #nav-links li > button:not(.nav-etude-link) {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.70) !important;
    padding: 6px 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: color 0.40s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  #nav-links li a:hover,
  #nav-links li > button:not(.nav-etude-link):hover {
    color: rgba(255, 255, 255, 0.98) !important;
  }

  /* ── Underline or — étirement depuis le centre, 0.40s ── */
  #nav-links li a::after,
  #nav-links li > button:not(.nav-etude-link)::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: 0px !important;
    left: 50% !important;
    right: 50% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #c5a059, transparent) !important;
    transition:
      left  0.42s cubic-bezier(0.16, 1, 0.3, 1),
      right 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  #nav-links li a:hover::after,
  #nav-links li > button:not(.nav-etude-link):hover::after {
    left: 0 !important;
    right: 0 !important;
  }

  /* ── 3. Séparateurs · entre liens ── */
  /* Positionné en ::before sur chaque li qui suit un autre li */
  #nav-links > li + li:not(.nav-mob-only)::before {
    content: '·' !important;
    position: absolute !important;
    left: calc(-1 * clamp(12px, 1.6vw, 25px)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(197, 160, 89, 0.32) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  /* S'assurer que les li sont position: relative pour le ::before */
  #nav-links > li {
    position: relative !important;
  }

  /* Masquer le séparateur sur les li cachés (nav-mob-only etc.) */
  #nav-links > li.nav-mob-only::before,
  #nav-links > li:has(.nav-cta)::before,
  #nav-links > li.nav-etude-item::before {
    display: none !important;
  }

  /* ── 4. Bouton ÉTUDIER VOTRE PROJET — cadre or, padding généreux ── */
  .nav-etude-link,
  a.nav-etude-link,
  .nav-zone-right a.nav-etude-link {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 300 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: rgba(197, 160, 89, 0.88) !important;
    border: 1px solid rgba(197, 160, 89, 0.50) !important;
    border-radius: 2px !important;
    padding: 11px 22px !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition:
      background    0.45s cubic-bezier(0.16, 1, 0.3, 1),
      color         0.35s ease,
      border-color  0.35s ease !important;
    position: static !important;
  }
  .nav-etude-link::after,
  a.nav-etude-link::after {
    display: none !important;
  }
  .nav-etude-link:hover,
  a.nav-etude-link:hover {
    background: rgba(197, 160, 89, 0.10) !important;
    color: rgba(197, 160, 89, 1) !important;
    border-color: rgba(197, 160, 89, 0.80) !important;
  }

  /* ── 5. Icône téléphone — accord avec le nouveau style ── */
  .nav-phone-icon {
    border-color: rgba(197, 160, 89, 0.28) !important;
    color: rgba(197, 160, 89, 0.65) !important;
  }
  .nav-phone-icon:hover {
    border-color: rgba(197, 160, 89, 0.60) !important;
    color: rgba(197, 160, 89, 0.95) !important;
    background: rgba(197, 160, 89, 0.07) !important;
  }
}

/* ── Mobile — pas de séparateurs dans l'overlay ─────────────────── */
@media (max-width: 900px) {
  #nav-links > li + li::before {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   NAVBAR — FINITION ULTRA-PREMIUM · SIGNATURE ARCHITECTURALE
   Montserrat 200 · 12px · 0.30em · Underline opacité · Capillaire
   Override définitif de tous les blocs précédents
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {

  /* ── 1. Liens — finesse extrême ─────────────────────────────────── */
  #navbar #nav-links li a,
  #navbar #nav-links li > button:not(.nav-etude-link),
  #navbar .nav-links li a,
  #navbar .nav-links li > button:not(.nav-etude-link) {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 200 !important;
    letter-spacing: 0.30em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.62) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    position: relative !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.45s ease !important;
  }

  #navbar #nav-links li a:hover,
  #navbar #nav-links li > button:not(.nav-etude-link):hover,
  #navbar .nav-links li a:hover,
  #navbar .nav-links li > button:not(.nav-etude-link):hover {
    color: rgba(255, 255, 255, 0.95) !important;
  }

  /* ── 2. Underline cinétique — fondu pur, 0.50s ─────────────────── */
  #navbar #nav-links li a::after,
  #navbar #nav-links li > button:not(.nav-etude-link)::after,
  #navbar .nav-links li a::after,
  #navbar .nav-links li > button:not(.nav-etude-link)::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: 0px !important;     /* décalé de 4px sous le texte */
    left: 8% !important;
    right: 8% !important;
    height: 1px !important;
    background: #c5a059 !important;
    opacity: 0 !important;
    transition: opacity 0.50s ease !important;
    pointer-events: none !important;
  }

  #navbar #nav-links li a:hover::after,
  #navbar #nav-links li > button:not(.nav-etude-link):hover::after,
  #navbar .nav-links li a:hover::after,
  #navbar .nav-links li > button:not(.nav-etude-link):hover::after {
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ── 3. Bouton ÉTUDIER — même finesse, bordure capillaire ──────── */
  #navbar .nav-etude-link,
  #navbar a.nav-etude-link {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 9px !important;
    font-weight: 200 !important;
    letter-spacing: 0.30em !important;
    text-transform: uppercase !important;
    color: rgba(197, 160, 89, 0.80) !important;
    border: 1px solid rgba(197, 160, 89, 0.38) !important;
    border-radius: 2px !important;
    padding: 12px 28px !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition:
      background    0.50s ease,
      color         0.40s ease,
      border-color  0.40s ease !important;
    position: static !important;
  }
  #navbar .nav-etude-link::after,
  #navbar a.nav-etude-link::after {
    display: none !important;
  }
  #navbar .nav-etude-link:hover,
  #navbar a.nav-etude-link:hover {
    background: rgba(197, 160, 89, 0.07) !important;
    color: rgba(197, 160, 89, 0.98) !important;
    border-color: rgba(197, 160, 89, 0.60) !important;
  }

  /* ── 4. Icône téléphone — accord capillaire ─────────────────────── */
  #navbar .nav-phone-icon {
    width: 33px !important;
    height: 33px !important;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    color: rgba(197, 160, 89, 0.55) !important;
    transition: border-color 0.45s ease, color 0.40s ease, background 0.45s ease !important;
  }
  #navbar .nav-phone-icon:hover {
    border-color: rgba(197, 160, 89, 0.55) !important;
    color: rgba(197, 160, 89, 0.90) !important;
    background: rgba(197, 160, 89, 0.05) !important;
  }

  /* ── 5. Gap aéré entre les liens ────────────────────────────────── */
  #navbar #nav-links,
  #navbar .nav-links {
    gap: clamp(24px, 3.2vw, 52px) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   NAVBAR — LISIBILITÉ · 3 AJUSTEMENTS CHIRURGICAUX
   Vignetage · Text-shadow · Bouton contraste
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Vignetage de sécurité — assombrit le haut de l'image ────── */
#navbar {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(4, 6, 12, 0.22) 100%
    ) !important;
  backdrop-filter: blur(18px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.8) !important;
}
#navbar.scrolled {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(4, 6, 12, 0.70) 100%
    ) !important;
}

/* ── 2. Ombre portée invisible — décolle le texte du fond ───────── */
@media (min-width: 901px) {
  #navbar #nav-links li a,
  #navbar #nav-links li > button:not(.nav-etude-link),
  #navbar .nav-links li a,
  #navbar .nav-links li > button:not(.nav-etude-link) {
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.85) !important;
  }

  /* ── 3. Bouton ÉTUDIER — bordure 1.5px, texte blanc pur ─────── */
  #navbar .nav-etude-link,
  #navbar a.nav-etude-link {
    color: #ffffff !important;
    border: 1.5px solid rgba(197, 160, 89, 0.55) !important;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.70) !important;
  }
  #navbar .nav-etude-link:hover,
  #navbar a.nav-etude-link:hover {
    color: #ffffff !important;
    border-color: rgba(197, 160, 89, 0.85) !important;
    background: rgba(197, 160, 89, 0.10) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════


/* ═══════════════════════════════════════════════════════════════════════
   NOS RÉALISATIONS — GALERIE MAGAZINE LUXE · DÉFINITIF
   Bible visuelle : image_55.png
   Split-header · Moodboard bokeh · Color grading chaud · Séquençage pur
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section container ───────────────────────────────────────────────── */
.rl-v2-section {
  background: #f4f0e8 !important;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5.5vw, 84px) clamp(64px, 8vw, 112px) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── SPLIT HEADER : titre gauche | héro droite ───────────────────────── */
.rl-split {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: clamp(28px, 3.5vw, 48px) !important;
  align-items: stretch !important;
  min-height: clamp(280px, 38vw, 500px) !important;
  margin-bottom: 10px !important;
}

/* Colonne gauche — texte signature */
.rl-split-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(16px, 2vw, 28px) !important;
}

/* Titre principal — très grand, Cormorant, or sur crème */
.rl-v2-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(48px, 7vw, 96px) !important;
  font-weight: 300 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  color: #1c1508 !important;
  margin: 0 !important;
}

.rl-v2-title em {
  font-style: italic !important;
  color: #b08828 !important;
  font-weight: 300 !important;
}

/* Sous-titre — Montserrat fin */
.rl-v2-sub {
  font-family: 'Montserrat', 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 300 !important;
  letter-spacing: 0.10em !important;
  line-height: 2.0 !important;
  color: rgba(28, 21, 8, 0.44) !important;
  margin: 0 !important;
}

/* ── Items communs ───────────────────────────────────────────────────── */
.rl-v2-item {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #dcd7cc !important;
  display: block !important;
}

/* Voile au repos — disparaît au survol */
.rl-v2-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8, 5, 0, 0.10) !important;
  transition: background 0.55s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.rl-v2-item:hover::after {
  background: rgba(8, 5, 0, 0.02) !important;
}

/* ── COLOR GRADING GLOBAL — réchauffe, renforce, fait briller l'or ──── */
.rl-v2-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter:
    contrast(1.12)
    saturate(1.28)
    sepia(0.20)
    brightness(0.91)
    !important;
  transition:
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter     0.55s ease
    !important;
}

.rl-v2-item:hover .rl-v2-img {
  transform: scale(1.048) !important;
  filter:
    contrast(1.06)
    saturate(1.16)
    sepia(0.12)
    brightness(0.97)
    !important;
}

/* ── Héro split — colonne droite, pleine hauteur ─────────────────────── */
.rl-split-hero {
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(280px, 38vw, 500px) !important;
}

.rl-split-hero .rl-v2-img {
  filter:
    contrast(1.15)
    saturate(1.24)
    sepia(0.22)
    brightness(0.88)
    !important;
}

.rl-split-hero:hover .rl-v2-img {
  transform: scale(1.028) !important;
  filter:
    contrast(1.08)
    saturate(1.14)
    sepia(0.14)
    brightness(0.95)
    !important;
}

/* ── MOODBOARD GRID — 4 macros pleine largeur ────────────────────────── */
.rl-mood-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  height: clamp(160px, 20vw, 256px) !important;
  margin-bottom: 0 !important;
}

/* ── BOKEH ARTISTIQUE sur les macros — blur(20px) intentionnel ────────
   On vend la matière (bois, brique, pigment, relief), pas le chantier.
   ──────────────────────────────────────────────────────────────────── */
.rl-mood-img {
  filter:
    blur(20px)
    contrast(1.28)
    saturate(1.55)
    brightness(0.84)
    !important;
  transform: scale(1.18) !important; /* cache les bords floutés */
  transition:
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter     0.60s ease
    !important;
}

/* Au survol : légèrement moins flou, plus lumineux */
.rl-mood-item:hover .rl-mood-img {
  filter:
    blur(14px)
    contrast(1.20)
    saturate(1.40)
    brightness(0.90)
    !important;
  transform: scale(1.22) !important;
}

/* ── Captions — small-caps serif sur fondu noir ───────────────────────── */
.rl-v2-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 28px 16px 16px !important;
  background: linear-gradient(to top,
    rgba(8, 5, 0, 0.72) 0%,
    rgba(8, 5, 0, 0.28) 52%,
    transparent 100%) !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  transform: translateY(4px) !important;
  transition: transform 0.38s ease !important;
}

.rl-v2-item:hover .rl-v2-caption {
  transform: translateY(0) !important;
}

.rl-v2-cap-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(12px, 1.2vw, 16px) !important;
  font-weight: 400 !important;
  font-variant: small-caps !important;
  letter-spacing: 0.16em !important;
  color: #f5f0e8 !important;
  line-height: 1.2 !important;
}

.rl-v2-cap-meta {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 7px !important;
  font-weight: 300 !important;
  letter-spacing: 0.32em !important;
  color: #d4aa54 !important;
  opacity: 0.90 !important;
  text-transform: uppercase !important;
}

/* ── Bouton EXPLORER ─────────────────────────────────────────────────── */
.rl-v2-explore-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: clamp(28px, 3.5vw, 48px) !important;
}

.rl-v2-explore-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: transparent !important;
  border: 1px solid rgba(176, 136, 40, 0.42) !important;
  padding: 16px 48px !important;
  cursor: pointer !important;
  transition: border-color 0.40s ease, background 0.40s ease !important;
}

.rl-v2-explore-btn:hover {
  border-color: rgba(176, 136, 40, 0.78) !important;
  background: rgba(176, 136, 40, 0.05) !important;
}

.rl-explore-label {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 8.5px !important;
  font-weight: 300 !important;
  letter-spacing: 0.36em !important;
  color: #1c1508 !important;
  text-transform: uppercase !important;
}

.rl-explore-arrow {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #b08828 !important;
  transition: transform 0.35s ease !important;
  line-height: 1 !important;
}

.rl-v2-explore-btn:hover .rl-explore-arrow {
  transform: translateX(6px) !important;
}

.rl-v2-explore-btn[aria-expanded="true"] .rl-explore-arrow {
  transform: rotate(90deg) !important;
}

/* ── Collection cachée — fondu élégant ───────────────────────────────── */
#rl-luxe-more {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition:
    max-height 1.10s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.70s ease
    !important;
}

#rl-luxe-more.open {
  max-height: 3200px !important;
  opacity: 1 !important;
}

.rl-v2-more-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.rl-v2-more-grid .rl-v2-item {
  aspect-ratio: 4 / 3 !important;
}

/* Bokeh dans la collection aussi (r13, r16) */
.rl-v2-bokeh .rl-v2-img {
  filter:
    blur(14px)
    contrast(1.22)
    saturate(1.42)
    brightness(0.86)
    !important;
  transform: scale(1.14) !important;
}

.rl-v2-bokeh:hover .rl-v2-img {
  filter:
    blur(10px)
    contrast(1.16)
    saturate(1.32)
    brightness(0.92)
    !important;
  transform: scale(1.16) !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rl-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 20px !important;
  }

  .rl-split-hero {
    min-height: clamp(220px, 55vw, 380px) !important;
    height: clamp(220px, 55vw, 380px) !important;
  }

  .rl-mood-grid {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    gap: 8px !important;
  }

  .rl-mood-grid .rl-v2-item {
    aspect-ratio: 1 / 1 !important;
  }

  .rl-v2-more-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .rl-v2-explore-btn {
    padding: 14px 28px !important;
    gap: 12px !important;
  }
}

@media (max-width: 500px) {
  .rl-mood-grid {
    grid-template-columns: 1fr !important;
  }

  .rl-v2-more-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== TESTIMONIALS LUXE tlx-* ===== */

/* ── Section wrapper ── */
.testi {
  background: #f4efe6 !important;
  padding: clamp(72px,8vw,108px) clamp(24px,5.5vw,88px) !important;
  position: relative !important;
  overflow: hidden !important;
}
.testi::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 10% !important; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,rgba(176,136,40,0.28),transparent) !important;
}

/* ── 3-column grid ── */
.tlx-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1.55fr 0.85fr !important;
  gap: clamp(24px,3.5vw,52px) !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  align-items: start !important;
}

/* ═══════════════════════════════════════
   LEFT : Photo with gold frame + blur
═══════════════════════════════════════ */
.tlx-photo-col {
  height: 100% !important;
  min-height: clamp(380px,42vw,600px) !important;
}
.tlx-photo-frame {
  position: relative !important;
  width: 100% !important;
  height: clamp(380px,42vw,600px) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(120,90,30,0.12) !important;
}
.tlx-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: sepia(0.38) contrast(1.08) saturate(0.55) brightness(0.92) !important;
  display: block !important;
}
/* Gold frame (inset outline) */
.tlx-photo-gold-frame {
  position: absolute !important;
  inset: 10px !important;
  border: 1.5px solid rgba(176,136,40,0.42) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Foreground blur — bottom gradient (cream tinted) */
.tlx-photo-blur-bot {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 45% !important;
  background: linear-gradient(to top, rgba(244,239,230,0.65) 0%, rgba(244,239,230,0.10) 60%, transparent 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Foreground blur — top gradient */
.tlx-photo-blur-top {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 22% !important;
  background: linear-gradient(to bottom, rgba(244,239,230,0.40) 0%, transparent 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════
   CENTER : Stacked cards column
═══════════════════════════════════════ */
.tlx-cards-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Section label */
.tlx-section-tag {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: rgba(176,136,40,0.75) !important;
  margin-bottom: 14px !important;
}

/* Counter + nav */
.tlx-toprow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
}
.tlx-counter {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: rgba(40,28,10,0.40) !important;
  letter-spacing: 1px !important;
}
.tlx-counter span:first-child {
  color: #1c1508 !important;
  font-weight: 500 !important;
}
.tlx-sep { color: rgba(40,28,10,0.25) !important; }
.tlx-nav-btns { display: flex !important; gap: 8px !important; }
.tlx-btn {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.70) !important;
  border: 1px solid rgba(176,136,40,0.22) !important;
  color: rgba(40,28,10,0.55) !important;
  font-size: 15px !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
  line-height: 1 !important;
}
.tlx-btn:hover {
  background: #fff !important;
  border-color: rgba(176,136,40,0.55) !important;
  color: #b08828 !important;
}

/* ── Primary card ── */
.tlx-card {
  background: #ffffff !important;
  border: 1px solid rgba(176,136,40,0.15) !important;
  border-radius: 18px !important;
  padding: clamp(22px,2.8vw,34px) clamp(20px,2.5vw,30px) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(120,90,30,0.07) !important;
}
.tlx-card-primary {
  background: #ffffff !important;
  border-color: rgba(176,136,40,0.22) !important;
  margin-bottom: 8px !important;
  z-index: 2 !important;
  box-shadow: 0 8px 36px rgba(120,90,30,0.10) !important;
}
/* Fade-in animation on card switch */
@keyframes tlxFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tlx-card-primary.tlx-fade-in {
  animation: tlxFadeIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

.tlx-qmark {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 68px !important;
  line-height: 0.6 !important;
  color: rgba(176,136,40,0.22) !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.tlx-stars {
  color: #c9a84c !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
}
.tlx-txt {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(16px,1.4vw,18px) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.68 !important;
  color: rgba(28,21,8,0.78) !important;
  margin: 0 0 20px !important;
  min-height: 5em !important;
}
.tlx-author {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(176,136,40,0.12) !important;
}
.tlx-av {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #b08828, #d4a843) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 19px !important; font-weight: 600 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  text-transform: uppercase !important;
}
.tlx-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important; font-weight: 700 !important;
  color: #1c1508 !important; letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.tlx-role {
  font-size: 10.5px !important; color: rgba(28,21,8,0.42) !important;
  margin-top: 3px !important; letter-spacing: 0.2px !important;
}
.tlx-author-info { display: flex !important; flex-direction: column !important; }

/* ── Next card (preview) ── */
.tlx-card-next {
  position: relative !important;
  padding: clamp(12px,1.6vw,18px) clamp(16px,2vw,24px) !important;
  border-color: rgba(176,136,40,0.09) !important;
  background: #faf6f0 !important;
  z-index: 1 !important;
  box-shadow: 0 2px 12px rgba(120,90,30,0.04) !important;
}
.tlx-next-txt {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 13.5px !important; font-style: italic !important;
  color: rgba(28,21,8,0.38) !important;
  margin: 0 0 6px !important;
  overflow: hidden !important;
  display: -webkit-box !important; -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
.tlx-next-name {
  font-size: 10px !important; color: rgba(176,136,40,0.50) !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
}
/* Fade overlay on next card */
.tlx-next-overlay {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(to top, rgba(244,239,230,0.75) 0%, rgba(244,239,230,0.05) 65%, transparent 100%) !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}

/* ── Dots ── */
.tlx-dots {
  display: flex !important; gap: 7px !important;
  margin-top: 18px !important;
  padding-left: 2px !important;
  align-items: center !important;
}
.tlx-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: rgba(28,21,8,0.15) !important;
  border: none !important; cursor: pointer !important;
  transition: background 0.3s, width 0.3s !important;
  padding: 0 !important;
}
.tlx-dot.active {
  background: #b08828 !important;
  width: 22px !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════
   RIGHT : Rating panel
═══════════════════════════════════════ */
.tlx-rating-col {
  display: flex !important;
  flex-direction: column !important;
}
.tlx-rating-inner {
  background: #ffffff !important;
  border: 1px solid rgba(176,136,40,0.18) !important;
  border-radius: 20px !important;
  padding: clamp(22px,2.8vw,34px) clamp(18px,2vw,26px) !important;
  display: flex !important; flex-direction: column !important;
  gap: 0 !important;
  align-items: flex-start !important;
  box-shadow: 0 6px 28px rgba(120,90,30,0.08) !important;
}

/* Big score */
.tlx-score-num {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(60px,7.5vw,88px) !important;
  font-weight: 300 !important;
  color: #b08828 !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  letter-spacing: -2px !important;
}
.tlx-score-stars {
  color: #c9a84c !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  margin-bottom: 5px !important;
}
.tlx-score-sub {
  font-size: 10.5px !important;
  color: rgba(28,21,8,0.38) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase !important;
}

/* Google badge */
.tlx-google-badge {
  display: flex !important; align-items: center !important; gap: 10px !important;
  background: rgba(244,239,230,0.60) !important;
  border: 1px solid rgba(176,136,40,0.12) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s !important;
  width: 100% !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
}
.tlx-google-badge:hover {
  background: #fdf8f2 !important;
  border-color: rgba(176,136,40,0.28) !important;
}
.tlx-badge-text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.tlx-badge-stars { color: #c9a84c !important; font-size: 10px !important; letter-spacing: 2px !important; }
.tlx-badge-label {
  font-size: 10px !important; font-weight: 700 !important;
  color: rgba(28,21,8,0.55) !important;
  letter-spacing: 0.8px !important; text-transform: uppercase !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Divider */
.tlx-divider {
  width: 100% !important; height: 1px !important;
  background: linear-gradient(90deg, rgba(176,136,40,0.20), transparent) !important;
  margin-bottom: 18px !important;
}

/* CTA button */
.tlx-cta-btn {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(135deg, #a07820, #c9a84c) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9.5px !important; font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  padding: 13px 14px !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  line-height: 1.45 !important;
  transition: opacity 0.2s, transform 0.2s !important;
  box-sizing: border-box !important;
}
.tlx-cta-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-2px) !important;
}
.tlx-cta-sub {
  font-size: 10px !important;
  color: rgba(28,21,8,0.32) !important;
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.3px !important;
}

/* ═══════════════════════════════════════
   MOBILE : Stack layout ≤ 900px
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .tlx-wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .tlx-photo-col {
    display: none !important;
  }
  .tlx-txt { min-height: auto !important; }
  .tlx-score-num { font-size: 56px !important; }
}

/* ── Hide old ts2 classes to avoid conflicts ── */
.ts2-wrap { display: none !important; }

/* ===== END TESTIMONIALS LUXE ===== */

/* ===== CONTACT TRAVERTIN GLASS ===== */

/* ── Section travertin ── */
.contact {
  background-color: #d4c4a0 !important;
  background-image: url('travertin-bg.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: clamp(80px,9vw,120px) clamp(40px,6vw,90px) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: auto !important;
}

/* ── Panneau flottant – ombre douce 4 couches ── */
.ct-glass-wrap {
  max-width: 1060px !important;
  margin: 0 auto !important;
  border-radius: 18px 18px 0 0 !important;
  overflow: visible !important;
  position: relative !important;
  /* Chanfrein extérieur — arêtes qui captent la lumière */
  border-top:  1.5px solid rgba(255,240,150,0.62) !important;
  border-left:  1px solid rgba(255,228,120,0.28) !important;
  border-right: 1px solid rgba(10,5,0,0.55) !important;
  box-shadow:
    /* — Ombre nette sous le bord inférieur (projection volume) — */
    0 5px 0   rgba(0,0,0,0.72),
    0 7px 14px rgba(0,0,0,0.60),
    /* — Ombres douces volumétriques — */
    0 18px 40px  rgba(28,16,4,0.38),
    0 40px 72px  rgba(28,16,4,0.26),
    0 75px 110px rgba(28,16,4,0.14),
    /* — Lueur ambrée subtile (reflet travertin chaud) — */
    0 0 90px rgba(190,140,40,0.08) !important;
  filter: none !important;
}
/* Overlay chanfrein — filet lumineux sur tout le pourtour */
.ct-glass-wrap::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 19px 19px 0 0 !important;
  border-top:   1px solid rgba(255,245,165,0.45) !important;
  border-left:  1px solid rgba(255,230,120,0.18) !important;
  border-right: 1px solid rgba(0,0,0,0.35) !important;
  border-bottom: none !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

/* ── Grille : gauche | sphère | droite ── */
.contact .ct-in {
  display: grid !important;
  grid-template-columns: 0.68fr 1px 1.32fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  max-width: none !important; width: 100% !important;
  background: transparent !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════
   GAUCHE — Métal brossé sombre
═══════════════════════════════════════════ */
.contact .ct-info {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 2px,
      rgba(255,215,100,0.018) 2px, rgba(255,215,100,0.018) 3px,
      transparent 3px, transparent 5px,
      rgba(0,0,0,0.035) 5px, rgba(0,0,0,0.035) 6px
    ),
    linear-gradient(130deg,
      rgba(255,230,140,0.08) 0%, rgba(255,230,140,0.025) 18%,
      transparent 42%, rgba(0,0,0,0.08) 72%, rgba(0,0,0,0.14) 100%
    ),
    rgba(14, 9, 2, 0.96) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
  padding: 36px 30px 38px !important;
  display: flex !important; flex-direction: column !important;
  position: relative !important; overflow: hidden !important;
  border-radius: 18px 0 0 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,230,120,0.14) !important;
}
/* Ligne lumière haute */
.contact .ct-info::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,215,100,0.28) 28%,
    rgba(255,215,100,0.42) 50%, rgba(255,215,100,0.28) 72%, transparent 100%
  ) !important;
}
/* Lueur ambrée coin haut-droit */
.contact .ct-info::after {
  content: '' !important; position: absolute !important;
  top: -30px !important; right: -30px !important;
  width: 200px !important; height: 200px !important;
  background: radial-gradient(ellipse at center,
    rgba(200,152,48,0.09) 0%, transparent 68%
  ) !important;
  pointer-events: none !important;
}

/* CONTACT tag */
.contact .ct-info .sec-tag {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important; letter-spacing: 5px !important;
  color: rgba(200,155,50,0.60) !important; text-transform: uppercase !important;
  margin-bottom: 8px !important;
  background: none !important; border: none !important; padding: 0 !important;
}
/* Grand titre */
.contact .ct-info .sec-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(36px,3.8vw,52px) !important; font-weight: 300 !important;
  color: #ffffff !important; line-height: 1.04 !important;
  margin-bottom: 10px !important; letter-spacing: -0.5px !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55) !important;
}
/* "Projet" en or dégradé */
.contact .ct-info .sec-title .ol {
  font-style: italic !important;
  background: linear-gradient(175deg, #f4cc58 0%, #d4a030 42%, #a07020 100%) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important; -webkit-text-stroke: 0 !important;
}
/* Sous-titre */
.contact .ct-info > p {
  font-size: 12.5px !important; color: rgba(255,255,255,0.62) !important;
  line-height: 1.62 !important; margin-bottom: 22px !important;
  max-width: 265px !important; letter-spacing: 0.15px !important;
}

/* Masqués dans ce layout */
.ct-call-mobile, .ct-scroll-cue { display: none !important; }

/* Blocs contact */
.contact .ct-item {
  display: flex !important; align-items: center !important; gap: 12px !important;
  background: rgba(255,255,255,0.038) !important;
  border: 1px solid rgba(195,152,48,0.12) !important;
  border-radius: 10px !important; padding: 11px 13px !important;
  margin-bottom: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,225,130,0.055) !important;
  transition: background 0.18s, border-color 0.18s !important;
}
.contact .ct-item:last-child { margin-bottom: 0 !important; }
.contact .ct-item:hover {
  background: rgba(195,152,48,0.07) !important;
  border-color: rgba(195,152,48,0.24) !important;
}
/* Icône laiton avec reflet 3D */
.contact .ct-ic {
  width: 34px !important; height: 34px !important; flex-shrink: 0 !important;
  background:
    radial-gradient(ellipse at 34% 24%, rgba(255,220,95,0.24) 0%, transparent 56%),
    linear-gradient(145deg, rgba(195,152,48,0.28) 0%, rgba(155,112,24,0.10) 100%) !important;
  border: 1px solid rgba(195,152,48,0.24) !important;
  border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #d4a830 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,230,120,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 2px 6px rgba(0,0,0,0.28) !important;
}
.contact .ct-ic svg { width: 15px !important; height: 15px !important; }
.contact .ct-lbl {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8px !important; font-weight: 700 !important;
  letter-spacing: 2.8px !important; text-transform: uppercase !important;
  color: rgba(220,185,90,0.90) !important; margin-bottom: 2px !important;
}
.contact .ct-val {
  font-size: 12.5px !important; color: #ffffff !important;
  font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0.15px !important;
}
.contact .ct-link { color: #ffffff !important; text-decoration: none !important; }

/* ═══════════════════════════════════════════
   SÉPARATEUR VERTICAL — ligne fine dorée épurée
═══════════════════════════════════════════ */
.ct-sphere-sep {
  position: relative !important; align-self: stretch !important;
  width: 1px !important;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(195,152,48,0.18) 8%,
    rgba(195,152,48,0.48) 30%,
    rgba(210,168,56,0.60) 50%,
    rgba(195,152,48,0.48) 70%,
    rgba(195,152,48,0.18) 92%,
    transparent 100%
  ) !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.ct-sphere-sep::before { display: none !important; }
.ct-sphere-sep::after  { display: none !important; }

/* ═══════════════════════════════════════════
   DROITE — Verre fumé (frosted glass)
═══════════════════════════════════════════ */
#form-area {
  background:
    linear-gradient(180deg, rgba(255,238,195,0.045) 0%, transparent 12%),
    rgba(10, 7, 2, 0.94) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  padding: 28px 30px 30px !important;
  display: flex !important; flex-direction: column !important;
  position: relative !important;
  border-radius: 0 18px 0 0 !important; overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,230,140,0.09),
    inset 1px 0 0 rgba(255,230,140,0.04) !important;
}
/* Reflet coin verre haut-droit */
#form-area::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 55% !important; height: 28% !important;
  background: radial-gradient(ellipse at 90% 0%,
    rgba(255,238,185,0.055) 0%, transparent 62%
  ) !important; pointer-events: none !important;
}
/* Ligne lumière haut */
#form-area::after {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,215,100,0.16) 20%,
    rgba(255,215,100,0.30) 50%, rgba(255,215,100,0.16) 80%, transparent 100%
  ) !important; pointer-events: none !important;
}

/* Wizard transparent */
.contact .wizard {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
  border-radius: 0 !important; flex: 1 !important;
  display: flex !important; flex-direction: column !important;
}

/* ── Stepper 4 étapes élégant ── */
.contact .wz-progress {
  background: transparent !important; border-radius: 0 !important;
  height: auto !important; margin-bottom: 24px !important;
  overflow: visible !important; padding: 0 !important;
}
.contact .wz-bar { display: none !important; }
.contact .wz-steps {
  display: flex !important; align-items: flex-start !important;
  gap: 0 !important; position: relative !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(195,152,48,0.13) !important;
}
/* Ligne connexion entre étapes */
.contact .wz-steps::before {
  content: '' !important; position: absolute !important;
  top: 12px !important; left: 14px !important; right: 14px !important; height: 1px !important;
  background: linear-gradient(90deg,
    rgba(195,152,48,0.32) 0%, rgba(195,152,48,0.08) 100%
  ) !important; z-index: 0 !important;
}
.contact .wz-step {
  flex: 1 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 6px !important; position: relative !important; z-index: 1 !important;
}
/* Cercle numéroté */
.contact .wz-step span {
  width: 25px !important; height: 25px !important; border-radius: 50% !important;
  background: rgba(195,152,48,0.10) !important;
  border: 1px solid rgba(195,152,48,0.38) !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: rgba(220,185,90,0.80) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: all 0.28s ease !important;
}
/* Label étape */
.contact .wz-step em {
  display: block !important; font-style: normal !important;
  font-size: 7.5px !important; font-weight: 700 !important;
  letter-spacing: 1.8px !important; text-transform: uppercase !important;
  color: rgba(220,185,90,0.58) !important;
  font-family: 'Montserrat', sans-serif !important;
  white-space: nowrap !important; text-align: center !important;
  transition: color 0.28s ease !important;
}
/* Étape ACTIVE */
.contact .wz-step.wz-active span {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,232,120,0.50) 0%, transparent 48%),
    linear-gradient(145deg, #d4a830, #9c6810) !important;
  border-color: #d4a830 !important; color: #fff !important;
  font-size: 12px !important;
  box-shadow:
    0 0 0 3px rgba(212,168,48,0.18),
    0 0 14px rgba(212,168,48,0.38),
    inset 0 1px 0 rgba(255,238,150,0.35) !important;
}
.contact .wz-step.wz-active em {
  color: #d4a830 !important; letter-spacing: 2px !important;
}
/* Étape faite */
.contact .wz-step.wz-done span {
  background: rgba(195,152,48,0.14) !important;
  border-color: rgba(195,152,48,0.38) !important; color: #c9a030 !important;
}
.contact .wz-step.wz-done em { color: rgba(195,152,48,0.48) !important; }

/* ── Step label + question ── */
.contact .wz-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important;
  color: rgba(195,152,48,0.56) !important; margin-bottom: 5px !important;
}
.contact .wz-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(18px,2.0vw,24px) !important; font-weight: 500 !important;
  color: #ffffff !important; letter-spacing: 1.8px !important;
  text-transform: uppercase !important; margin-bottom: 18px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.50) !important;
}

/* ── Chips de services (3 colonnes) ── */
.contact .wz-chips {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 7px !important; margin-bottom: 18px !important;
}
.contact .wz-chip {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.052) 0%, rgba(255,255,255,0.026) 100%
  ) !important;
  border: 1px solid rgba(195,152,48,0.13) !important;
  border-radius: 9px !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 11px !important; font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important; letter-spacing: 0.25px !important;
  padding: 10px 9px !important; text-align: left !important;
  cursor: pointer !important; min-height: 42px !important;
  box-shadow: inset 0 1px 0 rgba(255,225,130,0.048) !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
.contact .wz-chip:hover {
  background: linear-gradient(160deg,
    rgba(195,152,48,0.14) 0%, rgba(195,152,48,0.06) 100%
  ) !important;
  border-color: rgba(195,152,48,0.36) !important;
  color: #ffffff !important;
}
/* ★ ÉTAT SÉLECTIONNÉ — lumière dorée visible ★ */
.contact .wz-chip.wz-selected {
  background:
    radial-gradient(ellipse at 38% 28%, rgba(255,218,70,0.20) 0%, transparent 62%),
    linear-gradient(160deg, rgba(210,165,48,0.32) 0%, rgba(160,120,20,0.16) 100%) !important;
  border: 1.5px solid #d4a830 !important;
  color: #fff8e0 !important;
  text-shadow: 0 0 10px rgba(212,168,48,0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,130,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 0 1px rgba(212,168,48,0.14),
    0 0 16px rgba(212,168,48,0.28),
    0 3px 10px rgba(0,0,0,0.20) !important;
  transform: translateY(-1px) !important;
}

/* ── Bouton navigation ── */
.contact .wz-nav {
  display: flex !important; justify-content: flex-end !important;
  align-items: center !important; gap: 12px !important;
  margin-top: auto !important; padding-top: 16px !important;
  border-top: 1px solid rgba(195,152,48,0.10) !important;
}
.contact .wz-nav .btn-p,
.contact .wz-nav .wz-next {
  background:
    linear-gradient(180deg, rgba(255,238,145,0.22) 0%, transparent 38%),
    linear-gradient(160deg, #c89018 0%, #d4a828 28%, #b08018 58%, #8a6010 100%) !important;
  color: #fff8e8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 2.5px !important; text-transform: uppercase !important;
  padding: 12px 26px !important; border-radius: 9px !important;
  border: 1px solid rgba(255,218,100,0.24) !important;
  cursor: pointer !important;
  text-shadow: 0 1px 2px rgba(70,38,0,0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,140,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 4px 14px rgba(138,96,16,0.40),
    0 1px 4px rgba(0,0,0,0.24) !important;
  transition: opacity 0.18s, transform 0.18s !important;
  min-height: auto !important; width: auto !important;
}
.contact .wz-nav .btn-p:hover,
.contact .wz-nav .wz-next:hover {
  opacity: 0.88 !important; transform: translateY(-2px) !important;
}
.contact .wz-back {
  color: rgba(228,215,192,0.30) !important; font-size: 11px !important;
  border: none !important; background: transparent !important;
  cursor: pointer !important; font-family: 'Montserrat', sans-serif !important;
  padding: 8px !important; letter-spacing: 0.5px !important;
  transition: color 0.18s !important;
}
.contact .wz-back:hover { color: rgba(228,215,192,0.60) !important; }

/* Inputs étape 4 */
.contact .wz-input, .contact .fr-inp, .contact .fr-ta {
  background: rgba(255,255,255,0.048) !important;
  border: 1px solid rgba(195,152,48,0.17) !important;
  border-radius: 9px !important; color: #ede4d0 !important;
  font-size: 13px !important; padding: 11px 14px !important; letter-spacing: 0.2px !important;
}
.contact .wz-input::placeholder, .contact .fr-inp::placeholder, .contact .fr-ta::placeholder {
  color: rgba(228,215,192,0.24) !important;
}
.contact .wz-input:focus, .contact .fr-inp:focus, .contact .fr-ta:focus {
  border-color: rgba(195,152,48,0.44) !important;
  outline: none !important; background: rgba(255,255,255,0.075) !important;
}
.contact .wz-field label {
  color: rgba(228,215,192,0.46) !important; font-size: 9px !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ═══════════════════════════════════════════
   SOCLE LAITON BROSSÉ + RIVETS
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   SOCLE LAITON BROSSÉ SATINÉ — référence exacte
═══════════════════════════════════════════ */
.ct-brass-base {
  position: relative !important;
  height: 46px !important;
  background:
    /* Grain horizontal satiné fin */
    repeating-linear-gradient(
      180deg,
      transparent 0px,     transparent 1.4px,
      rgba(255,225,80,0.028) 1.4px, rgba(255,225,80,0.028) 2px,
      transparent 2px,     transparent 3.6px,
      rgba(0,0,0,0.022)   3.6px, rgba(0,0,0,0.022) 4.4px,
      transparent 4.4px,   transparent 6px
    ),
    /* Reflet spéculaire diagonal satin */
    linear-gradient(165deg,
      rgba(255,238,140,0.18) 0%,
      rgba(255,230,110,0.08) 18%,
      transparent 40%,
      rgba(0,0,0,0.05) 72%,
      rgba(0,0,0,0.10) 100%
    ),
    /* Base laiton chaud — ton moyen lumineux comme la référence */
    linear-gradient(180deg,
      #d8b040 0%,
      #c8a030 18%,
      #b89028 40%,
      #aa8020 62%,
      #966e18 80%,
      #7e5a12 100%
    ) !important;
  /* Bordure top = arête vive du bloc laiton — marche nette avec les panneaux */
  border-top: 2.5px solid rgba(230,190,65,0.88) !important;
  border-left:  1px solid rgba(220,178,58,0.45) !important;
  border-right: 1px solid rgba(40,24,4,0.55) !important;
  border-radius: 0 0 16px 16px !important;
  overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  /* Relief massif : step entre panneaux et laiton + projection sur travertin */
  box-shadow:
    /* Highlight interne haut — dessus du bloc laiton capte la lumière */
    inset 0 2px 0 rgba(255,248,175,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    /* Ombre nette projetée sous la barre — séparation du travertin */
    0 6px 0   rgba(0,0,0,0.78),
    0 8px 18px rgba(0,0,0,0.60),
    0 18px 38px rgba(0,0,0,0.35) !important;
}
/* Brillance haut — ligne lumière fine */
.ct-brass-base::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 42% !important;
  background: linear-gradient(to bottom,
    rgba(255,245,160,0.22) 0%,
    rgba(255,235,130,0.06) 60%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}
/* Ombre basse — profondeur */
.ct-brass-base::after {
  content: '' !important; position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important; height: 32% !important;
  background: linear-gradient(to top,
    rgba(0,0,0,0.32) 0%, transparent 100%
  ) !important;
  pointer-events: none !important;
}

/* ── Rangée de rivets — radial-gradient pattern (3D highlight réel) ── */
.ct-rivets-row {
  position: relative !important; z-index: 2 !important;
  height: 11px !important;
  width: calc(100% - 60px) !important;
  /* Chaque tuile 19×11px = un rivet centré de 9px de diamètre */
  background-image: radial-gradient(
    circle 4.5px at 34% 30%,
    rgba(255,252,200,0.98) 0%,
    rgba(236,196,68,0.97)  22%,
    rgba(192,148,28,0.94)  50%,
    rgba(140,100,14,0.88)  72%,
    rgba(80,52,6,0.75)     90%,
    transparent            100%
  ) !important;
  background-size: 19px 11px !important;
  background-repeat: repeat-x !important;
  background-position: 2px 0 !important;
  /* Ombre douce sous chaque rivet via filter */
  filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.60)) !important;
}
/* Désactiver l'ancien pseudo-élément box-shadow */
.ct-rivets-row::before {
  display: none !important;
}

/* ═══════════════════════════════════════════
   MOBILE ≤ 860px
═══════════════════════════════════════════ */
@media (max-width: 860px) {
  .contact { padding: 48px 14px !important; }
  .ct-glass-wrap { border-radius: 14px 14px 0 0 !important; }
  .contact .ct-in { grid-template-columns: 1fr !important; border-radius: 14px 14px 0 0 !important; }
  .ct-sphere-sep { display: none !important; }
  .contact .ct-info { border-radius: 14px 14px 0 0 !important; padding: 26px 18px !important; }
  #form-area { border-radius: 0 !important; padding: 22px 14px !important; }
  .contact .wz-chips { grid-template-columns: repeat(2, 1fr) !important; }
  .ct-call-mobile { display: flex !important; }
  .ct-brass-base { border-radius: 0 0 12px 12px !important; }
}

/* Section padding override */
.contact {
  padding-top: clamp(80px,9vw,120px) !important;
  padding-bottom: clamp(80px,9vw,120px) !important;
}

/* ===== END CONTACT TRAVERTIN GLASS ===== */