/* ============================================================
   ESCAPE ROOM OUIDAH — Premium Design System v5
   Inspired by: Apple · Stripe · Linear · Framer
   ============================================================ */

/* ── Google Fonts : Inter + Cinzel ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@700&display=swap');

/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  /* Surfaces */
  --bg:          #06060A;
  --surface-1:   #0E0E16;
  --surface-2:   #16161F;
  --surface-3:   #1E1E2A;
  --surface-4:   #252532;

  /* Gold */
  --gold:        #C9A84C;
  --gold-bright: #E8C76A;
  --gold-soft:   #D4B86A;
  --gold-muted:  rgba(201,168,76,.12);
  --gold-glow:   rgba(201,168,76,.18);
  --gold-border: rgba(201,168,76,.14);
  --gold-border2:rgba(201,168,76,.28);

  /* Text */
  --text-1:  #F2F2F4;
  --text-2:  #A0A0B4;
  --text-3:  #60607A;
  --text-4:  #404058;

  /* Borders */
  --border:  rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.10);
  --border3: rgba(255,255,255,.16);

  /* Green WhatsApp */
  --wa:       #145a2e;
  --wa-hover: #0d3d1e;

  /* Spacing */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10:80px;
  --sp-12:96px;
  --sp-16:128px;

  /* Border radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill:999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --shadow-md:  0 2px 8px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.35);
  --shadow-lg:  0 4px 16px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.4);
  --shadow-gold:0 0 40px rgba(201,168,76,.08), 0 0 80px rgba(201,168,76,.04);

  /* Transitions */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast:  .15s;
  --t-base:  .25s;
  --t-slow:  .45s;
  --t-xslow: .7s;

  /* Nav */
  --nav-h: 72px;
  --max-w: 1180px;
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; tab-size:4 }
body {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text-1);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:var(--nav-h);
}
img { max-width:100%; display:block; object-fit:cover }
a   { color:inherit; text-decoration:none }
ul  { list-style:none }
button { font-family:inherit; cursor:auto; border:none; background:none }
input,select,textarea { font-family:inherit }

/* Scrollbar */
::-webkit-scrollbar       { width:3px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:rgba(201,168,76,.3); border-radius:2px }
::-webkit-scrollbar-thumb:hover { background:var(--gold) }

/* ══════════════════════════════════════
   CURSEUR PREMIUM
══════════════════════════════════════ */


 }

/* ══════════════════════════════════════
   PARTICULES
══════════════════════════════════════ */
#particles-canvas { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.7 }

/* ══════════════════════════════════════
   LOADER PREMIUM
══════════════════════════════════════ */









/* ══════════════════════════════════════
   PAGE TRANSITION
══════════════════════════════════════ */
#page-transition {
  position:fixed; inset:0; background:var(--surface-1);
  transform:scaleY(0); transform-origin:bottom; z-index:800;
  pointer-events:none; transition:transform .45s cubic-bezier(.76,0,.24,1);
}
#page-transition.active { transform:scaleY(1); pointer-events:all }

/* ══════════════════════════════════════
   NAVBAR PREMIUM — Glassmorphism
══════════════════════════════════════ */


/* ─── NAVBAR FIXE ─── */



/* ── NAVBAR fixe toujours visible ── */

.nav-logo { display:flex; align-items:center; gap:14px }
.logo-img-wrap { width:44px; height:44px; flex-shrink:0 }
.logo-img-wrap img { width:100%; height:100%; object-fit:contain; border-radius:var(--r-sm) }
.logo-img-door   { display:block }
.logo-img-circle { display:none }
.logo-texts { display:flex; flex-direction:column; gap:1px }
.logo-name  { font-family:'Cinzel', serif; font-size:12px; letter-spacing:3px; color:var(--text-1); line-height:1; font-weight:600 }
.logo-sub   { font-size:8px; letter-spacing:4px; color:var(--gold); font-weight:500 }

.nav-links { display:flex; gap:32px }
.nav-links a {
  font-size:12px; font-weight:500; letter-spacing:.3px;
  color:var(--text-2); position:relative;
  transition:color var(--t-base) var(--ease);
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background:var(--gold); border-radius:1px;
  transition:width var(--t-base) var(--ease);
}
.nav-links a:hover,.nav-links a.active { color:var(--text-1) }
.nav-links a:hover::after,.nav-links a.active::after { width:100% }

.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; background:var(--gold); color:#06060A;
  font-size:12px; font-weight:700; letter-spacing:.3px;
  border-radius:var(--r-pill); white-space:nowrap;
  transition:background var(--t-base) var(--ease),
             transform var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.nav-cta:hover {
  background:var(--gold-bright); transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(201,168,76,.3);
}

/* ── Hamburger ── */
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer }
.hamburger span { width:22px; height:1.5px; background:var(--gold); display:block; transition:all .35s var(--ease); border-radius:1px }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,5px) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-5px) }


/* ── Navbar fixe ── */


/* ── Menu mobile ── */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #06060A;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 80px 40px 40px;
  overflow-y: auto;
}
.mobile-menu.open { opacity:1; visibility:visible }
.mobile-menu img  { width:60px; height:60px; object-fit:contain; border-radius:50%; margin-bottom:12px; box-shadow:0 0 24px rgba(201,168,76,.2) }
.mobile-menu a {
  color: #FFFFFF !important;
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 18px 0;
  width: 100%;
  text-align: center;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu a:first-of-type { border-top:1px solid rgba(201,168,76,0.1) }
.mobile-menu a:hover, .mobile-menu a.active { color: #C9A84C !important }
.mobile-menu .btn-wa {
  margin-top:24px; font-size:13px; padding:14px 32px;
  background:#145a2e; color:#fff;
  border-radius:999px; display:inline-flex;
  align-items:center; gap:8px; text-decoration:none;
  border:none;
}

/* ── Flash ── */
.flash {
  position:fixed; top:calc(var(--nav-h) + 12px); left:50%;
  transform:translateX(-50%); z-index:1100;
  padding:12px 20px; display:flex; align-items:center; gap:10px;
  font-size:13px; border-radius:var(--r-pill);
  animation:slideDown .3s var(--ease); white-space:nowrap;
  box-shadow:var(--shadow-md);
}
.flash-success { background:#0a2218; border:1px solid rgba(20,90,46,.4); color:#3daa5c }
.flash-error   { background:#220a0a; border:1px solid rgba(122,45,45,.4); color:#ff8080 }
.flash button  { background:none; color:inherit; font-size:16px; margin-left:8px; opacity:.6 }
.flash button:hover { opacity:1 }
@keyframes slideDown {
  from { opacity:0; transform:translateX(-50%) translateY(-10px) }
  to   { opacity:1; transform:translateX(-50%) translateY(0) }
}

/* ── WA Float ── */
.wa-float {
  position:fixed !important;
  bottom:28px !important;
  right:28px !important;
  z-index:9000 !important;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { background:var(--wa-hover); transform:scale(1.1); animation:none; box-shadow:0 8px 32px rgba(20,90,46,.5) }
@keyframes waPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.section       { padding:var(--sp-16) 5%; position:relative }
.section-inner { max-width:var(--max-w); margin:0 auto }
/* ══ SÉCURITÉ LAYOUT — sections doivent s'empiler verticalement ══ */
main#main-content {
    display: block;
}
main#main-content > section,
main#main-content > div,
main#main-content > article {
    display: block;
    width: 100%;
    float: none;
    clear: both;
}

.section-sm    { padding:var(--sp-10) 5% }
.section-xs    { padding:var(--sp-8) 5% }

/* ══════════════════════════════════════
   TYPOGRAPHIE
══════════════════════════════════════ */
h1,h2,h3,h4 { font-family:'Cinzel', serif; line-height:1.1; font-weight:700; letter-spacing:-.5px }

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold);
}
.eyebrow::before { content:''; width:28px; height:1px; background:var(--gold); flex-shrink:0 }
.eyebrow.center  { justify-content:center }
.eyebrow.center::before,.eyebrow.center::after { content:''; width:28px; height:1px; background:var(--gold); flex-shrink:0 }

.label {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:var(--r-pill);
  background:var(--gold-muted); border:1px solid var(--gold-border2);
  font-size:11px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold);
}

.title-display { font-size:clamp(44px, 7vw, 96px); font-weight:900; letter-spacing:-2px; line-height:1 }
.title-xl { font-size:clamp(36px, 5.5vw, 76px); font-weight:900; letter-spacing:-1.5px }
.title-lg { font-size:clamp(26px, 4vw, 52px); font-weight:700; letter-spacing:-1px }
.title-md { font-size:clamp(18px, 2.5vw, 34px); font-weight:600; letter-spacing:-.5px }
.title-sm { font-size:clamp(15px, 1.8vw, 22px); font-weight:600 }

.gradient-text {
  background:linear-gradient(135deg, var(--text-1) 0%, var(--gold-soft) 50%, var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.body-lg { font-size:17px; line-height:1.8; color:var(--text-2); font-weight:400 }
.body-md { font-size:15px; line-height:1.8; color:var(--text-2) }
.body-sm { font-size:13px; line-height:1.75; color:var(--text-3) }

.text-gold   { color:var(--gold) }
.text-1      { color:var(--text-1) }
.text-2      { color:var(--text-2) }
.text-3      { color:var(--text-3) }

/* ══════════════════════════════════════
   BOUTONS PREMIUM
══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter', sans-serif; font-size:13px; font-weight:600; letter-spacing:.2px;
  padding:12px 24px; border-radius:var(--r-pill); cursor:auto;
  text-decoration:none; border:none; position:relative; overflow:hidden;
  transition:all var(--t-base) var(--ease);
  white-space:nowrap;
}
.btn::before {
  content:''; position:absolute; inset:0; opacity:0;
  transition:opacity var(--t-base) var(--ease);
}
.btn:hover::before { opacity:1 }

.btn-primary {
  background:var(--gold); color:#06060A;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 0 0 rgba(201,168,76,0);
}
.btn-primary::before { background:linear-gradient(135deg,rgba(255,255,255,.15),transparent) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 4px 20px rgba(201,168,76,.35), 0 1px 3px rgba(0,0,0,.4) }
.btn-primary:active { transform:translateY(0) }

.btn-secondary {
  background:var(--surface-3); color:var(--text-1);
  border:1px solid var(--border2);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover { background:var(--surface-4); border-color:var(--border3); transform:translateY(-1px) }

.btn-ghost {
  background:transparent; color:var(--text-2);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--surface-2); color:var(--text-1); border-color:var(--border2) }

.btn-wa {
  background:var(--wa); color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4), 0 0 0 0 rgba(20,90,46,0);
}
.btn-wa:hover { background:var(--wa-hover); transform:translateY(-2px); box-shadow:0 4px 20px rgba(20,90,46,.4) }

.btn-outline-gold {
  background:transparent; color:var(--gold);
  border:1px solid var(--gold-border2);
}
.btn-outline-gold:hover { background:var(--gold-muted); border-color:var(--gold) }

.btn-sm  { padding:8px 18px; font-size:12px }
.btn-lg  { padding:14px 32px; font-size:14px }
.btn-xl  { padding:16px 40px; font-size:15px }
.btn-full{ width:100% }

/* ══════════════════════════════════════
   CARTES PREMIUM
══════════════════════════════════════ */
.card {
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--sp-5) var(--sp-5);
  position:relative; overflow:hidden;
  transition:background var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             transform var(--t-slow) var(--ease-spring),
             box-shadow var(--t-slow) var(--ease);
}
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg, rgba(201,168,76,.04) 0%, transparent 60%);
  opacity:0; transition:opacity var(--t-base) var(--ease);
}
.card:hover { background:var(--surface-3); border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.card:hover::before { opacity:1 }

.card-glass {
  background:rgba(22,22,31,.6);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:var(--sp-5);
  transition:all var(--t-base) var(--ease);
}
.card-glass:hover { background:rgba(30,30,42,.7); border-color:var(--border2) }

.card-gold {
  background:linear-gradient(135deg, rgba(201,168,76,.08) 0%, transparent 60%);
  border:1px solid var(--gold-border2);
  border-radius:var(--r-xl);
  padding:var(--sp-5);
  position:relative; overflow:hidden;
}
.card-gold::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* ══════════════════════════════════════
   FORMULAIRES
══════════════════════════════════════ */
.form-group   { display:flex; flex-direction:column; gap:8px }
.form-row     { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-label   { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold) }
.form-input,
.form-select,
.form-textarea {
  width:100%; background:var(--surface-3);
  border:1px solid var(--border2);
  color:var(--text-1); padding:13px 16px;
  font-family:'Inter', sans-serif; font-size:14px;
  outline:none; border-radius:var(--r-md);
  transition:border-color var(--t-base) var(--ease),
             background var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color:var(--gold); background:var(--surface-4);
  box-shadow:0 0 0 3px rgba(201,168,76,.08);
}
.form-input::placeholder,
.form-textarea::placeholder { color:var(--text-4) }
.form-select {
  -webkit-appearance:none; appearance:none; cursor:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A84C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.form-select option { background:var(--surface-3) }
.form-textarea { resize:vertical; min-height:110px }
.form-hint  { font-size:11px; color:var(--text-3); line-height:1.5 }
.form-error { font-size:11px; color:#ff7070; margin-top:2px }

/* ══════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════ */
.hero-slide {
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.2s var(--ease); z-index:0;
}
.hero-slide.active { opacity:1; z-index:1 }
.hero-slide-bg { position:absolute; inset:0 }
.hero-slide-bg img { width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 8s var(--ease) }
.hero-slide.active .hero-slide-bg img { transform:scale(1) }
.hero-slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(6,6,10,.92) 0%, rgba(6,6,10,.72) 55%, rgba(6,6,10,.5) 100%);
}
.hero-slide-content { position:absolute; inset:0; display:flex; align-items:center; padding:0 5%; padding-top:var(--nav-h); z-index:2 }
.hero-slide-inner { max-width:760px; opacity:0; transform:translateY(20px); transition:opacity .7s .3s var(--ease), transform .7s .3s var(--ease) }
.hero-slide.active .hero-slide-inner { opacity:1; transform:none }

/* Textes hero */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:var(--r-pill);
  background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.2);
  font-size:11px; font-weight:500; letter-spacing:1px; color:var(--gold);
  margin-bottom:28px;
}
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:#3daa5c; flex-shrink:0 }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

.hero-title { font-family:'Cinzel', serif; font-weight:900; text-transform:uppercase; line-height:1 }
.hero-pre   { display:block; font-size:clamp(13px, 1.8vw, 18px); font-weight:400; color:var(--text-2); letter-spacing:2px; margin-bottom:6px; font-family:'Inter', sans-serif }
.hero-word-1{ display:block; font-size:clamp(50px, 9vw, 110px); color:var(--gold); letter-spacing:-2px; line-height:.95; text-shadow:0 0 80px rgba(201,168,76,.15) }
.hero-word-2{ display:block; font-size:clamp(36px, 6vw, 80px); color:var(--text-1); letter-spacing:-1px }
.hero-sub   { font-size:11px; letter-spacing:3px; color:var(--gold); margin:24px 0 36px; display:flex; align-items:center; gap:14px }
.hero-sub-line { flex:0 0 36px; height:1px; background:var(--gold) }
.hero-actions  { display:flex; gap:12px; flex-wrap:wrap }
.hero-scroll   { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:500 }
.hero-scroll-line { width:1px; height:48px; background:linear-gradient(var(--gold),transparent); animation:scrollLine 1.8s ease-in-out infinite }
@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* Slider controls */
.hero-slider-controls { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:10; display:flex; align-items:center; gap:16px }
.slider-arrow {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(201,168,76,.25); background:rgba(201,168,76,.06);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
   transition:all var(--t-base) var(--ease);
}
.slider-arrow:hover { background:var(--gold); color:var(--bg); border-color:var(--gold) }
.testi-dot { width:6px; height:6px; border-radius:50%; background:rgba(201,168,76,.25); border:none; cursor:auto; transition:all var(--t-base) var(--ease) }
.testi-dot.active { background:var(--gold); width:20px; border-radius:3px }

/* ══════════════════════════════════════
   PAGE HERO (pages intérieures)
══════════════════════════════════════ */
.page-hero {
  min-height:52vh; display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 80px) 5% 64px;
  position:relative; overflow:hidden;
}
.page-hero-bg { position:absolute; inset:0; z-index:0 }
.page-hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.22 }
.page-hero-bg-overlay {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(170deg, rgba(6,6,10,.92) 0%, rgba(6,6,10,.75) 60%, rgba(6,6,10,.88) 100%);
}
.page-hero-bg-grid { position:absolute; inset:0; z-index:0; opacity:.025; background:linear-gradient(var(--gold) 1px,transparent 1px),linear-gradient(90deg,var(--gold) 1px,transparent 1px); background-size:56px 56px }
.page-hero-content { max-width:var(--max-w); width:100%; margin:0 auto; padding:0 5%; position:relative; z-index:1 }

/* ══════════════════════════════════════
   MARQUEE
══════════════════════════════════════ */
.marquee-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0; background:var(--surface-1) }
.marquee-track { display:flex; gap:40px; animation:marqueeScroll 30s linear infinite; width:max-content }
.marquee-item { font-family:'Cinzel', serif; font-size:10px; letter-spacing:3px; color:var(--text-3); white-space:nowrap; display:flex; align-items:center; gap:14px; font-weight:400 }
.marquee-item::after { content:'◆'; font-size:6px; color:var(--gold); opacity:.5 }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════════════════════════════
   STATS
══════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr) }
/* ── Grilles page Expérience ── */
.exp-two-col       { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start }
.tarifs-exp-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.luxury-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }

.stat-item  { padding:64px 24px; text-align:center; border-right:1px solid var(--border); position:relative }
.stat-item:last-child { border-right:none }
.stat-num   { font-family:'Cinzel', serif; font-size:56px; font-weight:900; color:var(--gold); line-height:1; display:block; letter-spacing:-2px }
.stat-label { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); margin-top:10px; font-weight:500 }

/* ══════════════════════════════════════
   FEATURE ICON
══════════════════════════════════════ */
.feature-icon-wrap {
  width:52px; height:52px;
  border-radius:var(--r-md);
  border:1px solid var(--gold-border);
  background:var(--gold-muted);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--gold);
  transition:all var(--t-base) var(--ease);
}
.card:hover .feature-icon-wrap {
  background:var(--gold); color:var(--bg);
  box-shadow:0 0 24px rgba(201,168,76,.25);
}

/* ══════════════════════════════════════
   TÉMOIGNAGES
══════════════════════════════════════ */
.testi-wrapper { overflow:hidden }
.testi-track   { display:flex; gap:20px; transition:transform .5s var(--ease) }
.testi-card    { min-width:340px; padding:32px; flex-shrink:0; border-radius:var(--r-xl); background:var(--surface-2); border:1px solid var(--border); position:relative; overflow:hidden }
.testi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.2),transparent) }
.testi-stars   { display:flex; gap:3px; margin-bottom:16px }
.testi-stars .ero-icon { color:var(--gold) }
.testi-text    { font-size:14px; line-height:1.85; color:var(--text-2); font-style:italic; margin-bottom:20px }
.testi-author  { font-family:'Cinzel', serif; font-size:10px; letter-spacing:2px; color:var(--gold); font-weight:600 }
.testi-nav     { display:flex; gap:8px; margin-top:20px }
.testi-dots    { display:flex; gap:6px; align-items:center }

.testi-form-wrap { margin-top:72px; padding:48px; border-radius:var(--r-2xl); background:var(--surface-2); border:1px solid var(--border) }
.testi-form-title { font-family:'Cinzel', serif; font-size:18px; color:var(--text-1); margin-bottom:10px; display:flex; align-items:center; gap:10px }
.testi-form-sub   { font-size:14px; color:var(--text-2); margin-bottom:28px; line-height:1.7 }
.stars-select { display:flex; gap:4px; margin-bottom:4px }
.star-btn { background:none; border:none; cursor:auto; padding:2px }
.star-btn .ero-icon { color:rgba(201,168,76,.2); transition:color var(--t-base); display:block }
.star-btn.active .ero-icon,.star-btn:hover .ero-icon { color:var(--gold) }

/* ══════════════════════════════════════
   GALERIE
══════════════════════════════════════ */
.gallery-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px }
.filter-btn {
  padding:8px 20px; font-size:11px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text-3);
  border-radius:var(--r-pill); cursor:auto;
  transition:all var(--t-base) var(--ease);
}
.filter-btn:hover,.filter-btn.active { background:var(--gold-muted); border-color:var(--gold-border2); color:var(--gold) }
.gallery-masonry { columns:3; gap:10px }
.gallery-item    { break-inside:avoid; margin-bottom:10px; position:relative; overflow:hidden; border-radius:var(--r-lg); cursor:none }
.gallery-thumb   { width:100%; aspect-ratio:var(--ratio,4/3); overflow:hidden; background:var(--surface-2) }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease) }
.gallery-item:hover .gallery-thumb img { transform:scale(1.05) }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(transparent 40%,rgba(6,6,10,.85));
  opacity:0; transition:opacity .3s var(--ease);
  display:flex; align-items:flex-end; padding:16px;
  border-radius:var(--r-lg);
}
.gallery-item:hover .gallery-overlay { opacity:1 }
.gallery-caption { font-size:11px; letter-spacing:1.5px; color:var(--gold); font-weight:600 }

/* ══════════════════════════════════════
   CALENDRIER & RÉSERVATION
══════════════════════════════════════ */
.calendar-wrap { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px }
.cal-header    { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px }
.cal-month     { font-family:'Cinzel', serif; font-size:14px; letter-spacing:1.5px; color:var(--text-1) }
.cal-nav       { width:32px; height:32px; border-radius:50%; background:var(--surface-3); border:1px solid var(--border); color:var(--gold); cursor:auto; display:flex; align-items:center; justify-content:center; transition:all var(--t-base) var(--ease) }
.cal-nav:hover { background:var(--gold-muted); border-color:var(--gold-border2) }
.cal-grid      { display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.cal-day-name  { text-align:center; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); padding:8px 0; font-weight:600 }
.cal-day       { text-align:center; padding:9px 4px; font-size:13px; border-radius:var(--r-sm); color:var(--text-2); transition:all var(--t-base) var(--ease) }
.cal-day.available { cursor:none }
.cal-day.available:hover { background:var(--gold-muted); color:var(--gold) }
.cal-day.selected  { background:var(--gold); color:var(--bg); font-weight:700 }
.cal-day.disabled  { opacity:.25; cursor:not-allowed }
.cal-day.today     { border:1px solid var(--gold-border2) }

.slots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px }
.slot       { padding:11px 6px; text-align:center; font-size:12px; border-radius:var(--r-md); border:1px solid var(--border); color:var(--text-2); transition:all var(--t-base) var(--ease); font-weight:500 }
.slot.available { cursor:none }
.slot.available:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-muted) }
.slot.selected { background:var(--gold); color:var(--bg); font-weight:700; border-color:var(--gold) }
.slot.full     { opacity:.3; text-decoration:line-through }

.resa-summary { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; margin-top:22px }
.resa-summary-title { font-family:'Cinzel', serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; font-weight:600 }
.resa-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-2) }
.resa-row:last-child { border-bottom:none }
.resa-row span:last-child { color:var(--text-1); font-weight:600 }

/* ══════════════════════════════════════
   TIMELINE
══════════════════════════════════════ */
.timeline { position:relative; padding-left:52px }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(var(--gold),transparent) }

/* ── Timeline ── */
.timeline { position:relative; padding-left:68px }
.timeline::before {
    content:''; position:absolute; left:24px; top:8px; bottom:0;
    width:1px; background:linear-gradient(var(--gold),transparent);
}
.timeline-step { position:relative; padding-bottom:44px }
.timeline-step:last-child { padding-bottom:0 }
.timeline-step::before {
    content:attr(data-n);
    position:absolute; left:-52px; top:0;
    width:32px; height:32px; border-radius:50%;
    background:var(--gold); color:#06060A;
    font-family:'Cinzel', serif; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.timeline-step h4 { font-family:'Cinzel',serif; font-size:14px; color:var(--gold); margin-bottom:10px; letter-spacing:.5px }
.timeline-step p  { font-size:14px; line-height:1.8; color:var(--text-2) }





/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.contact-grid  { display:grid; grid-template-columns:1fr 1.3fr; gap:72px; align-items:start }
.contact-info  { display:flex; flex-direction:column; gap:28px }
.contact-item  { display:flex; gap:16px; align-items:flex-start }
.contact-icon-box { width:44px; height:44px; min-width:44px; border-radius:var(--r-md); background:var(--gold-muted); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; color:var(--gold) }
.contact-label { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-3); margin-bottom:3px; font-weight:600 }
.contact-value { font-size:15px; color:var(--text-1); font-weight:500 }
.contact-value a { color:inherit; transition:color var(--t-base) }
.contact-value a:hover { color:var(--gold) }
.schedule-row  { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:13px }
.schedule-day  { color:var(--text-2) }
.schedule-hours{ color:var(--gold); font-weight:600 }

/* ══════════════════════════════════════
   GROUPES
══════════════════════════════════════ */
.groups-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.group-card  { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-2xl); padding:44px 40px; position:relative; overflow:hidden; transition:all var(--t-slow) var(--ease-spring) }
.group-card:hover { background:var(--surface-3); border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.group-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-soft),transparent); opacity:0; transition:opacity var(--t-base) }
.group-card:hover::before { opacity:1 }
.group-num   { font-family:'Cinzel Decorative', serif; font-size:72px; color:rgba(201,168,76,.04); position:absolute; top:10px; right:20px; line-height:1 }
.group-icon  { margin-bottom:20px; color:var(--gold) }
.group-title { font-family:'Cinzel', serif; font-size:18px; color:var(--text-1); margin-bottom:14px; letter-spacing:.3px }
.group-desc  { font-size:14px; color:var(--text-2); line-height:1.8; margin-bottom:22px }
.group-list  { display:flex; flex-direction:column; gap:8px }
.group-list li { font-size:13px; color:var(--text-3); display:flex; align-items:center; gap:8px }
.group-list li::before { content:'◆'; color:var(--gold); font-size:5px; flex-shrink:0 }

/* ══════════════════════════════════════
   PROFILS
══════════════════════════════════════ */
.profiles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.profile-card  { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-xl); padding:36px; display:flex; gap:18px; align-items:flex-start; transition:all var(--t-base) var(--ease) }
.profile-card:hover { background:var(--surface-3); border-color:var(--border2) }
.profile-icon  { width:48px; height:48px; min-width:48px; border-radius:var(--r-md); background:var(--gold-muted); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; color:var(--gold) }
.profile-title { font-family:'Cinzel', serif; font-size:14px; color:var(--text-1); margin-bottom:8px }
.profile-desc  { font-size:13px; color:var(--text-2); line-height:1.75 }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
#footer { background:var(--surface-1); border-top:1px solid var(--border); padding:80px 5% 32px }
.footer-inner { max-width:var(--max-w); margin:0 auto }
.footer-top   { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:52px; margin-bottom:52px }
.footer-desc  { font-size:13px; color:var(--text-3); line-height:1.85; margin:16px 0 22px }
.footer-socials { display:flex; gap:8px }
.social-icon  { width:36px; height:36px; border-radius:var(--r-md); background:var(--surface-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--gold); transition:all var(--t-base) var(--ease) }
.social-icon:hover { background:var(--gold-muted); border-color:var(--gold-border2) }
.footer-col-title { font-family:'Cinzel', serif; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:20px; font-weight:600 }
.footer-links { display:flex; flex-direction:column; gap:10px }
.footer-links a { font-size:13px; color:var(--text-3); transition:color var(--t-base) }
.footer-links a:hover { color:var(--text-1) }
.footer-contact-items { display:flex; flex-direction:column; gap:12px }
.footer-contact-item  { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text-3) }
.footer-contact-item a { color:inherit; transition:color var(--t-base) }
.footer-contact-item a:hover { color:var(--gold) }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.footer-copy   { font-size:12px; color:var(--text-3) }
.footer-legal  { display:flex; gap:18px; flex-wrap:wrap }
.footer-legal a{ font-size:11px; color:var(--text-3); transition:color var(--t-base) }
.footer-legal a:hover { color:var(--gold) }
.footer-badge  { font-family:'Cinzel', serif; font-size:9px; letter-spacing:3px; color:var(--text-4) }

/* ══════════════════════════════════════
   VIDEO
══════════════════════════════════════ */
.video-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); border-radius:var(--r-lg); border:1px solid var(--border) }
.video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none }
.video-thumbnail { position:absolute; inset:0; cursor:pointer; transition:opacity .4s var(--ease) }
.video-thumbnail img { width:100%; height:100%; object-fit:cover }
.video-thumbnail::after { content:''; position:absolute; inset:0; background:rgba(6,6,10,.45) }
.video-play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:rgba(201,168,76,.9); display:flex; align-items:center; justify-content:center; color:var(--bg); transition:all var(--t-base) var(--ease-spring) }
.video-thumbnail:hover .video-play-btn { transform:translate(-50%,-50%) scale(1.1); background:var(--gold); box-shadow:0 0 32px rgba(201,168,76,.4) }
.video-thumbnail.hidden { opacity:0; pointer-events:none }

/* ══════════════════════════════════════
   SECTION AVEC IMAGE BG
══════════════════════════════════════ */
.section-with-bg  { position:relative; overflow:hidden }
.section-bg-img   { position:absolute; inset:0; z-index:0 }
.section-bg-img img { width:100%; height:100%; object-fit:cover; opacity:.07 }
.section-bg-overlay { position:absolute; inset:0; background:linear-gradient(var(--bg) 0%,rgba(6,6,10,.75) 50%,var(--bg) 100%); z-index:0 }
.section-bg-content { position:relative; z-index:1 }

/* ══════════════════════════════════════
   MOCKUP DEVICE PREMIUM
══════════════════════════════════════ */
.mockup-phone {
  width:240px; flex-shrink:0;
  background:linear-gradient(145deg, var(--surface-3), var(--surface-4));
  border-radius:36px; padding:8px;
  border:1px solid var(--border2);
  box-shadow:0 0 0 1px var(--border), var(--shadow-lg), 0 0 60px rgba(201,168,76,.04);
  position:relative;
}
.mockup-phone::before {
  content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:60px; height:5px; background:var(--surface-1); border-radius:3px; z-index:2;
}
.mockup-screen {
  background:var(--bg); border-radius:28px; overflow:hidden;
  aspect-ratio:9/19; padding:20px 14px 14px; position:relative;
}
.mockup-screen-content { font-size:11px; color:var(--text-3) }

.mockup-laptop {
  width:100%; max-width:520px;
  background:var(--surface-3); border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px 10px 0;
  border:1px solid var(--border2);
  box-shadow:var(--shadow-lg);
}
.mockup-laptop-screen { background:var(--surface-1); border-radius:var(--r-md) var(--r-md) 0 0; aspect-ratio:16/10; overflow:hidden; padding:16px }
.mockup-laptop-base   { height:8px; background:var(--surface-4); border-radius:0 0 8px 8px; margin:0 -10px }

/* ══════════════════════════════════════
   ADMIN
══════════════════════════════════════ */
.admin-body    { cursor:auto; background:var(--bg) }
.admin-layout  { display:grid; grid-template-columns:240px 1fr; min-height:100vh }
.admin-sidebar { background:var(--surface-1); border-right:1px solid var(--border); padding:28px 0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto }
.admin-nav     { padding:0 12px; display:flex; flex-direction:column; gap:2px; margin-top:8px }
.admin-nav a   { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:12px; font-weight:500; color:var(--text-3); border-radius:var(--r-md); transition:all var(--t-base) var(--ease) }
.admin-nav a:hover,.admin-nav a.active { color:var(--gold); background:var(--gold-muted) }
.admin-main    { padding:36px; background:var(--bg) }
.admin-header  { margin-bottom:36px }
.admin-header h1 { font-family:'Cinzel', serif; font-size:22px; color:var(--text-1) }
.kpi-grid  { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:36px }
.kpi-card  { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px }
.kpi-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; font-weight:600 }
.kpi-value { font-family:'Cinzel', serif; font-size:34px; font-weight:700; color:var(--gold) }
.kpi-sub   { font-size:12px; color:var(--text-3); margin-top:4px }
.table-wrap { overflow-x:auto }
table.data-table { width:100%; border-collapse:collapse; font-size:13px }
.data-table th { font-family:'Cinzel', serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); padding:13px 14px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; font-weight:600 }
.data-table td { padding:13px 14px; border-bottom:1px solid var(--border); color:var(--text-2) }
.data-table tr:hover td { background:var(--surface-2) }
.badge { display:inline-block; padding:3px 10px; font-size:10px; letter-spacing:1px; text-transform:uppercase; border-radius:var(--r-pill); font-weight:600 }
.badge-gold  { background:rgba(201,168,76,.12); color:var(--gold); border:1px solid rgba(201,168,76,.2) }
.badge-green { background:rgba(20,90,46,.15); color:#3daa5c; border:1px solid rgba(20,90,46,.3) }
.badge-red   { background:rgba(140,30,30,.12); color:#ff8080; border:1px solid rgba(140,30,30,.25) }
.badge-gray  { background:rgba(100,100,120,.1); color:var(--text-3); border:1px solid var(--border) }

/* ══════════════════════════════════════
   ICÔNES SVG
══════════════════════════════════════ */
.ero-icon { display:inline-block; vertical-align:middle; flex-shrink:0 }
.eyebrow .ero-icon, .contact-icon-box .ero-icon,
.feature-icon-wrap .ero-icon, .profile-icon .ero-icon,
.group-icon .ero-icon, .cal-nav .ero-icon,
.slider-arrow .ero-icon, .hero-badge .ero-icon { color:var(--gold) }
.btn .ero-icon { color:inherit }
.card:hover .feature-icon-wrap .ero-icon { color:var(--bg) }
.star-btn .ero-icon { color:rgba(201,168,76,.2); transition:color var(--t-base) }
.star-btn.active .ero-icon, .star-btn:hover .ero-icon { color:var(--gold) }
.testi-stars .ero-icon { color:var(--gold) }
.social-icon .ero-icon { color:var(--gold) }
.wa-float .ero-icon { color:#fff }

/* ══════════════════════════════════════
   DIVERS
══════════════════════════════════════ */
.spinner { width:20px; height:20px; border:2px solid rgba(201,168,76,.15); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; vertical-align:middle }
@keyframes spin { to{transform:rotate(360deg)} }

.gold-divider { display:flex; align-items:center; gap:16px; margin:28px 0 }
.gold-divider::before,.gold-divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-border2),transparent) }
.gold-divider span { color:var(--gold); font-size:10px }

.map-container { aspect-ratio:16/9; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); position:relative; overflow:hidden; margin-top:24px }
.map-placeholder-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-4) }

html,body { overflow-x:hidden !important }



/* ════ NAVBAR ════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: rgba(6,6,10,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#navbar.scrolled {
  background: rgba(6,6,10,1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  border-bottom-color: rgba(201,168,76,0.3);
}
#navbar.scrolled .logo-img-door   { display: none }
#navbar.scrolled .logo-img-circle { display: block }

/* ══ Overflow ciblé — NE PAS mettre overflow:hidden sur section ══ */
.marquee-wrap, .testi-wrapper { overflow: hidden }
.gallery-masonry { overflow: visible }
.table-wrap { overflow-x: auto; overflow-y: visible }
.table-wrap::-webkit-scrollbar { height: 3px }
.testi-track { overflow: visible }
.slots-grid { overflow: visible }
/* Seules les sections avec défilement horizontal en ont besoin */
.section-with-overflow { overflow: hidden }
/* Supprimer scroll natif mobile */
* { -webkit-overflow-scrolling: touch }
html { overflow-x: hidden !important }
body { overflow-x: hidden !important }

/* ══════════════════════════════════════
   TÉMOIGNAGES — texte wrappé + infinite scroll
══════════════════════════════════════ */
.testi-track {
    display: flex;
    gap: 22px;
    width: max-content;
    animation: infiniteScroll 40s linear infinite;
}
.testi-track:hover { animation-play-state: paused }

.testi-card {
    width: 320px;
    flex-shrink: 0;
    padding: 28px;
    border-radius: var(--r-xl);
    background: var(--surface-2);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.testi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.25), transparent);
}
.testi-text {
    font-size: 14px;
    line-height: 1.85;
    color: var(--text-2);
    font-style: italic;
    margin-bottom: 18px;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

@keyframes infiniteScroll {
    from { transform: translateX(0) }
    to   { transform: translateX(-50%) }
}

/* ══════════════════════════════════════
   GALERIE STRIP — défilement horizontal auto
══════════════════════════════════════ */
.gallery-strip-wrap {
    overflow: hidden;
    border-radius: var(--r-xl);
    margin-top: 24px;
}
.gallery-strip-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: gallerySlide 28s linear infinite;
}
.gallery-strip-track:hover { animation-play-state: paused }
.gallery-strip-item {
    width: 260px;
    height: 200px;
    border-radius: var(--r-lg);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}
.gallery-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.gallery-strip-item:hover img { transform: scale(1.07) }
.gallery-strip-item-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 50%, rgba(6,6,10,.8));
    opacity: 0; transition: opacity .3s var(--ease);
    display: flex; align-items: flex-end; padding: 14px;
    pointer-events: none;
}
.gallery-strip-item:hover .gallery-strip-item-overlay { opacity: 1 }

@keyframes gallerySlide {
    from { transform: translateX(0) }
    to   { transform: translateX(-50%) }
}

/* ══════════════════════════════════════
   ANIMATIONS VIE — éléments qui bougent seuls
══════════════════════════════════════ */

/* Lueur pulsante sur les cartes premium */
@keyframes cardGlow {
    0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0) }
    50%      { box-shadow: 0 0 28px 2px rgba(201,168,76,.07) }
}
.card-glow-anim { animation: cardGlow 4s ease-in-out infinite }

/* Ligne dorée animée */
@keyframes goldLine {
    0%   { transform: scaleX(0) translateX(-100%) }
    50%  { transform: scaleX(1) translateX(0) }
    100% { transform: scaleX(0) translateX(100%) }
}
.gold-line-anim {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: goldLine 3s ease-in-out infinite;
}

/* Compteur qui pulse */
@keyframes statPulse {
    0%,100% { opacity:1; transform: scale(1) }
    50%      { opacity:.85; transform: scale(1.03) }
}
.stat-num { animation: statPulse 3s ease-in-out infinite }

/* Badge live */

    50%      { opacity:.4; transform:scale(.75) }
}


/* Shimmer sur les gradient text */
@keyframes textShimmer {
    0%   { background-position: 0% 50% }
    50%  { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}
.gradient-text {
    background-size: 200% 200%;
    animation: textShimmer 5s ease infinite;
}

/* Flèche scroll bounce */
@keyframes arrowBounce {
    0%,100% { transform: translateY(0) }
    50%      { transform: translateY(6px) }
}
.hero-scroll { animation: arrowBounce 2s ease-in-out infinite }

/* Orbit décoratif */
@keyframes orbit {
    from { transform: rotate(0deg) translateX(80px) rotate(0deg) }
    to   { transform: rotate(360deg) translateX(80px) rotate(-360deg) }
}


/* Typing cursor */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.typing-cursor { animation: blink .8s step-end infinite }

/* Stars twinkling */
@keyframes twinkle {
    0%,100% { opacity:.15; transform:scale(1) }
    50%      { opacity:.6; transform:scale(1.3) }
}


/* Section entrance — plus dramatique */
.reveal-dramatic.visible { opacity: 1; transform: none }

/* Glow ring */
@keyframes glowRing {
    0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.3) }
    70%  { box-shadow: 0 0 0 14px rgba(201,168,76,0) }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0) }
}
.glow-ring { animation: glowRing 2.5s ease-out infinite }

/* Barre dorée qui scan */
@keyframes scanBar {
    0%   { left: -100% }
    100% { left: 100% }
}
.scan-bar {
    position: relative; overflow: hidden;
}
.scan-bar::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 40%; left: -100%;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.08), transparent);
    animation: scanBar 3s ease-in-out infinite;
}

/* ══════════════════════════════════════
   SECTIONS PLEINE LARGEUR PREMIUM
══════════════════════════════════════ */

/* Section image pleine largeur */
.section-fullbg {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-fullbg-img {
    position: absolute; inset: 0; z-index: 0;
}
.section-fullbg-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 8s ease;
    will-change: transform;
}
.section-fullbg:hover .section-fullbg-img img {
    transform: scale(1);
}
.section-fullbg-overlay {
    position: absolute; inset: 0; z-index: 1;
}
.section-fullbg-content {
    position: relative; z-index: 2;
    max-width: var(--max-w);
    width: 100%;
    padding: var(--sp-16) 5%;
    margin: 0 auto;
}

/* Dégradé or luxueux */
.section-gold-luxury {
    background:
        linear-gradient(160deg,
            #06060A 0%,
            #0d0a00 20%,
            #1c1500 40%,
            #241c00 50%,
            #1c1500 60%,
            #0d0a00 80%,
            #06060A 100%
        );
    position: relative;
    overflow: hidden;
}
.section-gold-luxury::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(201,168,76,.08) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.06) 0%, transparent 55%);
    pointer-events: none;
}
.section-gold-luxury::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    z-index: 1;
}
.section-gold-luxury > * { position: relative; z-index: 2 }

/* Lignes décoratives dorées */
.gold-deco-line {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0 auto;
}
.gold-deco-cross {
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.gold-deco-cross::before, .gold-deco-cross::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.4));
}
.gold-deco-cross::after {
    background: linear-gradient(90deg, rgba(201,168,76,.4), transparent);
}

/* Carte luxe avec glow */
.card-luxury {
    background: rgba(6,6,10,.7);
    border: 1px solid rgba(201,168,76,.2);
    border-radius: var(--r-2xl);
    padding: 36px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: all .4s var(--ease);
}
.card-luxury::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.card-luxury:hover {
    border-color: rgba(201,168,76,.4);
    box-shadow: 0 0 40px rgba(201,168,76,.1), 0 20px 60px rgba(0,0,0,.5);
    transform: translateY(-4px);
}

/* Numéro décoratif grand format */
.deco-number {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(80px, 15vw, 160px);
    font-weight: 700;
    color: rgba(201,168,76,.04);
    line-height: 1;
    position: absolute;
    pointer-events: none;
    user-select: none;
}

/* Tag premium */
.tag-premium {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px;
    border: 1px solid rgba(201,168,76,.25);
    border-radius: var(--r-pill);
    background: rgba(201,168,76,.06);
    font-size: 11px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold);
}
/* tag-premium::before supprimé */

/* Separateur or */
.gold-sep {
    display: flex; align-items: center; gap: 16px;
    margin: 48px 0;
}
.gold-sep::before, .gold-sep::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent);
}
.gold-sep span {
    font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; color: var(--gold);
    white-space: nowrap;
}

/* Texte masqué overlay */
.text-outline-gold {
    -webkit-text-stroke: 1px rgba(201,168,76,.3);
    color: transparent;
    font-family: 'Cinzel', serif;
}

/* Stats en ligne luxe */
.luxury-stats {
    display: flex; gap: 0;
    border: 1px solid rgba(201,168,76,.15);
    border-radius: var(--r-xl);
    overflow: hidden;
}
.luxury-stat-item {
    flex: 1; padding: 28px 20px; text-align: center;
    border-right: 1px solid rgba(201,168,76,.1);
    background: rgba(6,6,10,.5);
    transition: background .3s;
}
.luxury-stat-item:last-child { border-right: none }
.luxury-stat-item:hover { background: rgba(201,168,76,.05) }
.luxury-stat-num {
    font-family: 'Cinzel', serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700; color: var(--gold);
    line-height: 1; display: block;
}
.luxury-stat-label {
    font-size: 10px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-3);
    margin-top: 8px; display: block;
}

/* Icône cerclée gold */
.icon-circle-gold {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 1px solid var(--gold-border2);
    background: var(--gold-muted);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
    transition: all .3s var(--ease);
}
.icon-circle-gold:hover {
    background: var(--gold);
    color: var(--bg);
    box-shadow: 0 0 24px rgba(201,168,76,.3);
}

/* Responsive sections fullbg */
@media(max-width:768px) {
    .section-fullbg { min-height: 380px }
    .section-fullbg-content { padding: 64px 5% }
    .luxury-stats { flex-direction: column }
    .luxury-stat-item { border-right: none; border-bottom: 1px solid rgba(201,168,76,.1) }
    .luxury-stat-item:last-child { border-bottom: none }
    .card-luxury { padding: 24px 18px }
}
@media(max-width:480px) {
    .section-fullbg { min-height: 300px }
}

/* ══ Animation d'entrée de page ══ */
body {
    
}
/* Animation page sans transform (évite le containing block sur main) */
#main-content { animation: pageFadeIn 0.4s ease forwards }
@keyframes pageFadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}

/* ══ REVEAL — Progressive Enhancement ══
   Visible par défaut, animé seulement si JS actif (.js-loaded sur <html>)
══════════════════════════════════════ */
.reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal-up2,.reveal-dramatic {
    /* Visible par défaut — animations ajoutées par JS */
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* Quand JS est actif, cacher avant animation */
.js-loaded .reveal          { opacity:0; transform:translateY(24px) }
.js-loaded .reveal-left     { opacity:0; transform:translateX(-28px) }
.js-loaded .reveal-right    { opacity:0; transform:translateX(28px) }
.js-loaded .reveal-scale    { opacity:0; transform:scale(.96) }
.js-loaded .reveal-dramatic { opacity:0; transform:translateY(32px) scale(.97) }
/* État visible */
.js-loaded .reveal.visible,
.js-loaded .reveal-left.visible,
.js-loaded .reveal-right.visible,
.js-loaded .reveal-scale.visible,
.js-loaded .reveal-dramatic.visible { opacity:1; transform:none }
/* Délais */
.js-loaded .delay-1 { transition-delay:.1s }
.js-loaded .delay-2 { transition-delay:.2s }
.js-loaded .delay-3 { transition-delay:.3s }
.js-loaded .delay-4 { transition-delay:.4s }

/* ── Bouton fermer menu mobile ── */
.mobile-menu-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  padding: 0;
}
.mobile-menu-close span {
  width: 20px; height: 1.5px;
  background: #FFFFFF;
  display: block;
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.mobile-menu-close span:first-child { transform: rotate(45deg) translateY(3.75px) }
.mobile-menu-close span:last-child  { transform: rotate(-45deg) translateY(-3.75px) }
.mobile-menu-close:hover { background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.4) }
.mobile-menu-close:hover span { background: #C9A84C }

/* ── Cacher WA flottant quand menu mobile ouvert ── */
.menu-open .wa-float { opacity: 0 !important; pointer-events: none !important }

.exp-two-col > div,
.tarifs-exp-grid > div,
.profiles-grid > div {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ════ EFFET PAPIER DECHIRE ════ */
.torn-bottom {
    position: relative;
}
.torn-bottom::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 0; right: 0;
    height: 36px;
    background: inherit;
    clip-path: polygon(
        0% 0%, 3% 100%, 7% 20%, 11% 90%, 15% 10%,
        19% 80%, 23% 5%, 27% 95%, 31% 15%, 35% 85%,
        39% 0%, 43% 90%, 47% 20%, 51% 100%, 55% 10%,
        59% 80%, 63% 5%, 67% 95%, 71% 15%, 75% 85%,
        79% 0%, 83% 90%, 87% 20%, 91% 100%, 95% 15%,
        100% 85%, 100% 0%
    );
    z-index: 2;
    pointer-events: none;
}
.torn-top {
    position: relative;
}
.torn-top::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0; right: 0;
    height: 36px;
    background: inherit;
    clip-path: polygon(
        0% 100%, 3% 0%, 7% 80%, 11% 10%, 15% 90%,
        19% 20%, 23% 95%, 27% 5%, 31% 85%, 35% 15%,
        39% 100%, 43% 10%, 47% 80%, 51% 0%, 55% 90%,
        59% 20%, 63% 95%, 67% 5%, 71% 85%, 75% 15%,
        79% 100%, 83% 10%, 87% 80%, 91% 0%, 95% 85%,
        100% 15%, 100% 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* ── Select placeholder (option disabled selected) ── */
select option[disabled] { color: var(--text-4) }
select:invalid, select option[value=""] { color: var(--text-3) }
.form-select:required:invalid { color: var(--text-3) }

/* ── FAQ styles (depuis experience.php) ── */
.faq-item { border-bottom:1px solid var(--border) }
.faq-item:first-of-type { border-top:1px solid var(--border) }
.faq-q { padding:20px 0; font-family:'Cinzel',serif; font-size:14px; color:var(--text-1); list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; transition:color var(--t-base); user-select:none }
.faq-q::-webkit-details-marker { display:none }
.faq-q::after { content:'+'; color:var(--gold); font-size:22px; font-weight:300; transition:transform .3s; line-height:1; flex-shrink:0 }
details[open] .faq-q { color:var(--gold) }
details[open] .faq-q::after { transform:rotate(45deg) }
.faq-a { padding:0 0 20px; font-size:14px; line-height:1.85; color:var(--text-2) }