/* ============================================================
   VIPGS — Golden VIP Service · Charte graphique (thème CLAIR)
   Ivoire chaud + or + encre. Élégant, lumineux, premium.
   Typo : Playfair Display (titres) · Inter (texte)
   ============================================================ */

:root{
  --bg:#FBF9F4;          /* ivoire chaud */
  --bg-2:#F4EFE4;        /* bande douce */
  --surface:#FFFFFF;
  --ink:#1C1B19;         /* encre */
  --ink-soft:#46402F;
  --muted:#807A68;
  --gold:#B0894A;
  --gold-deep:#8A6A33;
  --gold-soft:#C9A24B;
  --gold-tint:#F5EDDB;
  --line:#EAE3D3;
  --shadow:0 20px 55px rgba(80,62,20,0.10);
  --shadow-sm:0 8px 24px rgba(80,62,20,0.08);
  --gold-grad:linear-gradient(135deg,#D9B871 0%,#B0894A 55%,#8A6A33 100%);

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --maxw:1180px;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  line-height:1.7; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.14; color:var(--ink)}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px}
img{max-width:100%}

.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.eyebrow{font-family:var(--sans); font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:500; margin-bottom:18px; display:inline-flex; align-items:center; gap:12px}
.eyebrow::before{content:""; width:30px; height:1px; background:var(--gold); opacity:0.7}

.section{padding:110px 0; position:relative}
.section-title{font-size:clamp(2rem,4vw,3.1rem); margin-bottom:22px}
.section-lead{color:var(--muted); max-width:620px; font-size:1.06rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 34px; font-family:var(--sans);
  font-size:0.76rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;
  border:1px solid var(--gold); background:transparent; color:var(--gold-deep);
  transition:all 0.4s var(--ease); border-radius:2px}
.btn:hover{background:var(--gold-grad); color:#fff; border-color:transparent; box-shadow:var(--shadow-sm)}
.btn-solid{background:var(--gold-grad); color:#fff; border-color:transparent}
.btn-solid:hover{filter:brightness(1.05); transform:translateY(-2px)}

/* Header */
.site-header{position:fixed; inset:0 0 auto 0; z-index:100; padding:20px 0; transition:all 0.4s var(--ease)}
.site-header.scrolled{background:rgba(251,249,244,0.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding:12px 0; box-shadow:0 6px 24px rgba(80,62,20,0.05)}
.nav{display:flex; align-items:center; justify-content:space-between}
.brand-lock{display:flex; align-items:center; gap:13px}
.brand-lock img{height:46px; transition:height 0.4s var(--ease)}
.site-header.scrolled .brand-lock img{height:40px}
.brand-lock .wm{line-height:1}
.brand-lock .wm b{font-family:var(--serif); font-size:1.4rem; letter-spacing:1px; color:var(--ink); display:block; line-height:1; font-weight:600}
.brand-lock .wm b i{font-style:italic; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.brand-lock .wm small{font-family:var(--sans); font-size:0.56rem; letter-spacing:0.3em; color:var(--gold-deep); display:block; margin-top:1px}
.nav-links{display:flex; gap:32px; align-items:center}
.nav-links a{font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:400; position:relative; transition:0.3s}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width 0.35s var(--ease)}
.nav-links a:hover{color:var(--gold-deep)} .nav-links a:hover::after{width:100%}
.nav-cta{padding:9px 20px; border:1px solid var(--gold); border-radius:2px; color:var(--gold-deep)!important}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--gold-grad); color:#fff!important}
.nav-toggle{display:none; background:none; border:none; color:var(--gold-deep); cursor:pointer}

.reveal{opacity:0; transform:translateY(30px); transition:all 0.9s var(--ease)}
.reveal.in{opacity:1; transform:none}

@media(max-width:880px){
  .section{padding:78px 0}
  .nav-links{position:fixed; inset:0 0 0 auto; width:80%; max-width:330px; flex-direction:column;
    justify-content:center; gap:26px; background:var(--surface); transform:translateX(100%);
    transition:transform 0.5s var(--ease); box-shadow:var(--shadow)}
  .nav-links.open{transform:none}
  .nav-toggle{display:block}
}