/* ══════════════════════════════════════════════
   VRTX Consulting — style.css
   Savane & Émeraude — 2026
══════════════════════════════════════════════ */

:root {
  --em:     #0A6B4A;
  --em-d:   #085639;
  --em-l:   #E8F5F0;
  --em-m:   #C5E8DC;
  --gold:   #D4A853;
  --gold-l: #FBF5E6;
  --forest: #0A2018;
  --fern:   #1A8A60;
  --mint:   #F0F7F4;
  --white:  #FFFFFF;
  --off:    #F7F8F6;
  --muted:  #6E7870;
  --border: #DCE8E2;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Space Grotesk', sans-serif;
  --mono:   'DM Mono', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--white);
  color:var(--forest);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ══ NAV ══ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:64px;
  display:flex; align-items:center;
  padding:0 6%;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-wordmark { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--forest); letter-spacing:-0.5px; }
.nav-tag {
  font-family:var(--mono); font-size:9px; color:var(--muted);
  letter-spacing:0.14em; text-transform:uppercase;
  padding-left:12px; border-left:1px solid var(--border); margin-left:2px;
}
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links > li > a {
  font-size:14px; font-weight:500; color:var(--muted);
  text-decoration:none; transition:color 0.2s;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color:var(--em); }
.nav-cta {
  background:var(--em); color:var(--white) !important;
  padding:10px 22px; border-radius:40px;
  font-size:13px; font-weight:600;
  text-decoration:none; transition:background 0.2s, transform 0.15s;
}
.nav-cta:hover { background:var(--em-d) !important; transform:translateY(-1px); }

/* Dropdown */
.nav-dropdown { position:relative; }
.nav-drop-trigger {
  display:flex; align-items:center; gap:5px;
  font-size:14px; font-weight:500; color:var(--muted);
  text-decoration:none; cursor:pointer; transition:color 0.2s;
}
.nav-drop-trigger:hover,
.nav-drop-trigger.active { color:var(--em); }
.nav-drop-arrow { font-size:11px; transition:transform 0.2s; line-height:1; }
.nav-dropdown:hover .nav-drop-arrow { transform:rotate(180deg); }
.nav-drop-menu {
  position:absolute; top:100%; left:-16px;
  padding-top:8px;
  opacity:0; pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 0.18s, transform 0.18s;
  z-index:200;
}
.nav-dropdown:hover .nav-drop-menu { opacity:1; pointer-events:all; transform:translateY(0); }
.nav-drop-inner {
  background:white; border:1px solid var(--border);
  border-radius:12px; padding:8px; min-width:280px;
  box-shadow:0 8px 32px rgba(10,32,24,0.1);
}
.nav-drop-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px;
  text-decoration:none; transition:background 0.15s;
}
.nav-drop-item:hover { background:var(--mint); }
.nav-drop-num {
  font-family:var(--mono); font-size:10px; font-weight:500;
  color:var(--em); background:var(--em-l);
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-drop-label { font-size:13px; font-weight:500; color:var(--forest); line-height:1.3; }

/* ══ UTILITAIRES ══ */
.sec { padding:100px 0; }
.sec-off { background:var(--off); }
.sec-mint { background:var(--mint); }
.sec-forest { background:var(--forest); }
.wrap { max-width:1200px; margin:0 auto; padding:0 6%; }

.page-hero {
  padding-top:64px;
  background:var(--forest);
  padding-bottom:72px;
}
.page-hero-inner {
  max-width:1200px; margin:0 auto; padding:72px 6% 0;
}
.page-hero-label {
  font-family:var(--mono); font-size:11px; color:var(--gold);
  letter-spacing:0.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.page-hero-label::before { content:''; width:20px; height:2px; background:var(--gold); border-radius:2px; }
.page-hero-title {
  font-family:var(--serif);
  font-size:clamp(36px, 5vw, 68px);
  font-weight:400; line-height:1.06; letter-spacing:-1.5px;
  color:var(--white); margin-bottom:20px;
}
.page-hero-title em { font-style:italic; color:var(--gold); }
.page-hero-sub {
  font-size:16px; font-weight:300; color:rgba(255,255,255,0.5);
  line-height:1.8; max-width:560px;
}

.eyebrow {
  font-family:var(--mono); font-size:11px; color:var(--em);
  letter-spacing:0.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before { content:''; width:20px; height:2px; background:var(--em); border-radius:2px; }
.eyebrow.on-dark { color:var(--gold); }
.eyebrow.on-dark::before { background:var(--gold); }

.sec-h {
  font-family:var(--serif);
  font-size:clamp(30px, 3.8vw, 50px);
  font-weight:400; letter-spacing:-0.5px; line-height:1.12;
}
.sec-h em { font-style:italic; color:var(--em); }
.sec-h.light { color:var(--white); }
.sec-h.light em { color:var(--gold); }

/* ══ CONTACT INFOS (shared) ══ */
.ci-list { display:flex; flex-direction:column; gap:12px; }
.ci {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:var(--white);
  border:1.5px solid var(--border); border-radius:12px;
  transition:border-color 0.2s;
}
.ci:hover { border-color:var(--em-m); }
.ci-icon { width:36px; height:36px; background:var(--em-l); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ci-lbl { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:2px; }
.ci-val { font-size:14px; font-weight:500; color:var(--forest); }

/* ══ FORM ══ */
.contact-form {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:20px; padding:40px;
  box-shadow:0 8px 48px rgba(10,32,24,0.06);
  display:flex; flex-direction:column; gap:16px;
}
.form-title { font-family:var(--serif); font-size:26px; font-weight:400; margin-bottom:4px; }
.form-sub { font-size:14px; color:var(--muted); margin-bottom:8px; }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ff { display:flex; flex-direction:column; gap:6px; }
.fl { font-size:12px; font-weight:600; color:var(--forest); letter-spacing:0.02em; }
.fi, .fsel, .fta {
  background:var(--off); border:1.5px solid var(--border);
  border-radius:10px; padding:12px 14px;
  font-family:var(--sans); font-size:14px; color:var(--forest);
  outline:none; transition:border-color 0.2s, background 0.2s;
  width:100%; appearance:none;
}
.fi:focus, .fsel:focus, .fta:focus { border-color:var(--em); background:var(--white); }
.fta { resize:vertical; min-height:90px; }
.fsub {
  background:var(--em); color:var(--white);
  font-family:var(--sans); font-size:14px; font-weight:600;
  border:none; border-radius:40px; padding:14px 28px;
  cursor:pointer; transition:background 0.2s, transform 0.15s;
  align-self:flex-start;
}
.fsub:hover { background:var(--em-d); transform:translateY(-1px); }

/* ══ FOOTER ══ */
footer {
  background:var(--forest);
  padding:48px 6%;
  border-top:1px solid rgba(255,255,255,0.04);
}
.foot-inner {
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
}
.foot-logo { display:flex; align-items:center; gap:10px; }
.foot-word { font-family:var(--serif); font-size:20px; font-weight:600; color:rgba(255,255,255,0.6); }
.foot-copy { font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.2); letter-spacing:0.08em; }
.foot-tag { font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.15); letter-spacing:0.18em; text-transform:uppercase; }
.foot-links { display:flex; gap:24px; }
.foot-links a { font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.25); text-decoration:none; letter-spacing:0.08em; transition:color 0.2s; }
.foot-links a:hover { color:rgba(255,255,255,0.6); }

/* ══ ANIMATIONS ══ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ RESPONSIVE ══ */
@media (max-width:1024px) {
  .form-2col { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .foot-inner { flex-direction:column; text-align:center; gap:16px; }
  .foot-links { flex-wrap:wrap; justify-content:center; }
}