/* JG67 SERVICES — Design System Commun
   Remplace Tailwind CDN + Montserrat/Metropolis sur toutes les pages secondaires
   Palette : Bleu nuit #0E1E2A · Champagne #B7935B · Lin #F6F4EF
   Typo    : Cormorant Garamond (display) · Outfit (body)
*/

/* ─── Variables ─────────────────────────────────────────── */
:root {
  --nuit:        #0E1E2A;
  --nuit-2:      #16303F;
  --champagne:   #B7935B;
  --champagne-2: #D8BD8A;
  --or-texte:    #80621C;
  --lin:         #F6F4EF;
  --blanc:       #FFFFFF;
  --encre:       #2B3A44;
  --gris:        #616C75;
  --ligne:       rgba(14,30,42,.10);
  --f-display:   'Cormorant Garamond', Georgia, serif;
  --f-body:      'Outfit', -apple-system, sans-serif;
  --ease:        cubic-bezier(.22,.61,.21,1);
  --maxw:        1180px;
}

/* ─── Reset ─────────────────────────────────────────────── */
*  { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: var(--f-body);
  color: var(--encre);
  background: var(--blanc);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block }
a   { text-decoration:none; color:inherit }
ul  { list-style:none }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px }
:focus-visible {
  outline:2px solid var(--champagne);
  outline-offset:4px;
}

/* ─── Typographie ───────────────────────────────────────── */
h1,h2,h3 { font-family:var(--f-display); color:var(--nuit); font-weight:600; line-height:1.15 }
h1 { font-size:clamp(2.4rem,5vw,4rem); letter-spacing:-.01em }
h2 { font-size:clamp(1.8rem,3.2vw,2.7rem) }
h3 { font-size:1.35rem }
p  { line-height:1.75 }
.eyebrow {
  display:inline-flex; align-items:center; gap:14px;
  font-size:.72rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--or-texte);
}
.eyebrow::before { content:""; width:34px; height:1px; background:var(--champagne); flex:none }
.lead { color:var(--gris); font-size:1.05rem; max-width:60ch }
em.gold { font-style:italic; color:var(--champagne) }

/* ─── Scroll reveal ─────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease),transform .9s var(--ease) }
.reveal.in { opacity:1; transform:none }
.reveal.d1 { transition-delay:.12s }
.reveal.d2 { transition-delay:.24s }
.reveal.d3 { transition-delay:.36s }
@media(prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none }
}

/* ─── Header ────────────────────────────────────────────── */
header {
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
header .bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; transition:padding .35s var(--ease);
}
header.scrolled {
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--ligne);
}
header.scrolled .bar { padding:12px 0 }

.brand { display:flex; align-items:center; gap:12px; color:#fff; transition:color .4s }
header.scrolled .brand { color:var(--nuit) }
.brand img { width:42px; height:42px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.3) }
.brand b { font-family:var(--f-display); font-size:1.25rem; font-weight:700; letter-spacing:.04em }
.brand small { font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--champagne-2); font-weight:500 }

nav.main { display:flex; gap:34px }
nav.main a {
  position:relative; font-size:.84rem; font-weight:400; letter-spacing:.05em;
  color:rgba(255,255,255,.85); padding:6px 0; transition:color .3s;
}
header.scrolled nav.main a { color:var(--encre) }
nav.main a::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--champagne); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
nav.main a:hover::after,
nav.main a.active::after { transform:scaleX(1); transform-origin:left }
nav.main a:hover,
nav.main a.active { color:var(--champagne-2) }
header.scrolled nav.main a:hover,
header.scrolled nav.main a.active { color:var(--champagne) }

/* ─── Boutons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:.8rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 28px; border:1px solid var(--champagne); color:var(--champagne-2);
  background:transparent; border-radius:2px; cursor:pointer;
  position:relative; overflow:hidden; transition:color .4s var(--ease);
}
.btn span { position:relative; z-index:1 }
.btn::before {
  content:""; position:absolute; inset:0; background:var(--champagne);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.btn:hover::before { transform:scaleX(1); transform-origin:left }
.btn:hover { color:var(--nuit) }
.btn:active { transform:translateY(1px) }
.btn.solid { background:var(--champagne); color:var(--nuit) }
.btn.solid::before { background:var(--champagne-2) }
.btn.dark { border-color:var(--nuit); color:var(--nuit) }
.btn.dark::before { background:var(--nuit) }
.btn.dark:hover { color:#fff }
header .btn { padding:10px 20px }

/* ─── Burger mobile ─────────────────────────────────────── */
.burger { display:none; background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer; line-height:1 }
header.scrolled .burger { color:var(--nuit) }

/* ─── Mobile overlay ────────────────────────────────────── */
#mobile-overlay {
  position:fixed; inset:0; z-index:100; background:var(--nuit);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(0); transition:opacity .35s var(--ease),visibility .35s var(--ease);
  display:flex; flex-direction:column; padding:32px 28px; overflow-y:auto;
}
#mobile-overlay.open { opacity:1; visibility:visible; pointer-events:auto }
.mob-close {
  align-self:flex-end; background:none; border:none;
  color:rgba(255,255,255,.7); font-size:2rem; cursor:pointer; padding:4px; margin-bottom:40px; line-height:1;
}
.mob-brand {
  font-family:var(--f-display); font-size:1.6rem; font-weight:700;
  color:#fff; margin-bottom:44px; letter-spacing:.04em;
}
#mobile-overlay nav a {
  display:block; font-size:1.4rem; font-family:var(--f-display); font-weight:500;
  color:rgba(255,255,255,.85); padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1);
  transition:color .3s,padding-left .3s var(--ease);
}
#mobile-overlay nav a:hover { color:var(--champagne-2); padding-left:10px }
.mob-cta { margin-top:36px }

/* ─── Section utilities ─────────────────────────────────── */
section { padding:110px 0 }
.sec-head { margin-bottom:52px }
.sec-head h2 { margin:16px 0 12px; max-width:24ch }

/* ─── Footer ────────────────────────────────────────────── */
footer { background:var(--nuit); color:rgba(255,255,255,.7); padding:90px 0 0 }
.f-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:50px; padding-bottom:70px }
footer h4, footer .foot-h { font-family:var(--f-display); color:#fff; font-size:1.1rem; font-weight:600; margin-bottom:18px; letter-spacing:.03em }
footer .brandfoot b { font-family:var(--f-display); font-size:1.4rem; color:#fff; font-weight:700 }
footer .brandfoot p { margin-top:12px; font-size:.92rem; color:rgba(255,255,255,.5); max-width:28ch }
footer li { padding:5px 0 }
footer li a { font-size:.9rem; color:rgba(255,255,255,.58); transition:color .3s,padding-left .3s var(--ease) }
footer li a:hover { color:var(--champagne-2); padding-left:6px }
footer .contact li { display:flex; gap:10px; align-items:center; font-size:.9rem; color:rgba(255,255,255,.58) }
footer .contact .material-icons-outlined { font-size:1rem; color:var(--champagne) }
.f-bottom {
  border-top:1px solid rgba(255,255,255,.1); padding:24px 0;
  font-size:.8rem; color:rgba(255,255,255,.6); text-align:center; letter-spacing:.04em;
}

/* ─── WhatsApp flottant ─────────────────────────────────── */
.wa {
  position:fixed; right:26px; bottom:26px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.5); transition:transform .4s var(--ease);
}
.wa:hover { transform:scale(1.1) rotate(6deg) }
.wa svg { width:26px; height:26px; fill:#fff }
.wa::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid #25D366; animation:wa-pulse 2.4s var(--ease) infinite;
}
@keyframes wa-pulse { 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(1.7); opacity:0 } }

/* ─── Responsive ────────────────────────────────────────── */
@media(max-width:980px) {
  nav.main, header .btn { display:none }
  .burger { display:block }
  .f-grid { grid-template-columns:1fr 1fr }
  section { padding:80px 0 }
}
@media(max-width:560px) {
  .f-grid { grid-template-columns:1fr }
  .wrap { padding:0 20px }
  .btn { width:100%; justify-content:center; text-align:center }
  .wa {
    right:18px;
    bottom:18px;
    width:52px;
    height:52px;
  }
  .wa svg { width:24px; height:24px }
}