/* ═══════════════════════════════════════════════════
   VIBE TRANSIT TRANSPORT — style.css
   Palette : Bleu Maritime
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: #F0F4FA;
  color: #0B1F3A;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
img { max-width: 100%; display: block; }

:root {
  /* ── Maritime Blue palette ── */
  --navy:    #062544;   /* deep maritime navy */
  --marine:  #0A3A5C;   /* marine blue */
  --blue:    #135E8A;   /* steel blue */
  --sky:     #1A7FBF;   /* sky blue */
  --skylt:   #E6F3FB;   /* light sky tint */
  --accent:  #F0A500;   /* golden amber accent */
  --accentlt:#FFF4D6;
  --green:   #0E9B6A;
  --white:   #FFFFFF;
  --off:     #F0F4FA;
  --slate:   #4A647E;
  --border:  #D0E2EF;
  --text:    #0B1F3A;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --sh-sm: 0 2px 10px rgba(6,37,68,.08);
  --sh-md: 0 8px 30px rgba(6,37,68,.11);
  --sh-lg: 0 20px 60px rgba(6,37,68,.15);
  --sh-xl: 0 32px 80px rgba(6,37,68,.20);
}

/* ── Utilities ── */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px,5vw,52px); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--sky); margin-bottom:12px; }
.eyebrow::before { content:''; width:20px; height:2px; background:var(--sky); border-radius:2px; }
.s-title { font-family:'Fraunces',serif; font-size:clamp(26px,4.5vw,48px); font-weight:600; color:var(--navy); line-height:1.08; margin-bottom:14px; }
.s-title em { font-style:italic; color:var(--sky); }
.s-sub { font-size:clamp(14px,1.8vw,16px); color:var(--slate); line-height:1.78; max-width:560px; }
section { padding: clamp(56px,8vw,100px) clamp(18px,5vw,80px); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform:none; }

/* ── Buttons ── */
.btn-s { display:inline-block; background:var(--sky); color:#fff; padding:clamp(12px,2vw,15px) clamp(20px,2.5vw,28px); border-radius:var(--r-md); font-weight:700; font-size:clamp(13px,1.4vw,15px); box-shadow:0 6px 22px rgba(26,127,191,.32); transition:background .2s, transform .15s, box-shadow .2s; white-space:nowrap; font-family:'Outfit',sans-serif; }
.btn-s:hover { background:var(--navy); transform:translateY(-2px); box-shadow:0 10px 28px rgba(6,37,68,.24); }
.btn-g { display:inline-block; background:#fff; color:var(--navy); padding:clamp(12px,2vw,15px) clamp(20px,2.5vw,28px); border-radius:var(--r-md); border:1.5px solid var(--border); font-weight:600; font-size:clamp(13px,1.4vw,15px); transition:border-color .2s, background .2s, transform .15s; white-space:nowrap; }
.btn-g:hover { border-color:var(--sky); background:var(--skylt); transform:translateY(-2px); }

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:9000;
  height: 70px;
  background: rgba(240,244,250,.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
  display: flex; align-items: center;
}
#nav.solid { border-color:var(--border); box-shadow:var(--sh-sm); }
#nav.hero-top { background: rgba(6,37,68,.15); backdrop-filter: blur(12px); }
#nav.hero-top.solid { background: rgba(240,244,250,.97); border-color:var(--border); }

.nav-in { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(18px,5vw,52px); }

.logo { display:flex; align-items:center; gap:11px; }
.logo-mark { width:40px; height:40px; background:linear-gradient(135deg,var(--sky),var(--navy)); border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.logo-words { display:flex; flex-direction:column; line-height:1; }
.logo-words b { font-size:14px; font-weight:800; color:var(--navy); letter-spacing:.5px; }
.logo-words small { font-size:9.5px; font-weight:500; color:var(--slate); letter-spacing:2px; text-transform:uppercase; }
#nav.hero-top .logo-words b, #nav.hero-top .logo-words small { color:rgba(255,255,255,.92); }
#nav.hero-top.solid .logo-words b { color:var(--navy); }
#nav.hero-top.solid .logo-words small { color:var(--slate); }

.nav-links { display:flex; align-items:center; gap:26px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--slate); transition:color .2s; white-space:nowrap; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:2px; background:var(--sky); transform:scaleX(0); transition:transform .2s; }
.nav-links a:hover { color:var(--navy); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a.active { color:var(--navy); font-weight:700; }
#nav.hero-top .nav-links a { color:rgba(255,255,255,.82); }
#nav.hero-top .nav-links a:hover { color:#fff; }
#nav.hero-top.solid .nav-links a { color:var(--slate); }

.nav-cta { background:var(--sky)!important; color:#fff!important; padding:9px 20px!important; border-radius:var(--r-sm)!important; font-weight:700!important; font-size:13px!important; transition:background .2s, transform .15s!important; }
.nav-cta::after { display:none!important; }
.nav-cta:hover { background:var(--navy)!important; transform:translateY(-1px); color:#fff!important; }

.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; cursor:pointer; padding:4px; border-radius:9px; border:none; background:transparent; transition:background .2s; }
.burger:hover { background:var(--skylt); }
.burger span { width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .3s, opacity .3s; display:block; }
#nav.hero-top .burger span { background:#fff; }
#nav.hero-top.solid .burger span { background:var(--navy); }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.drawer { position:fixed; top:70px; left:0; right:0; z-index:8999; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--sh-lg); padding:16px clamp(18px,5vw,52px) 22px; transform:translateY(-110%); transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; gap:4px; }
.drawer.open { transform:translateY(0); }
.drawer a { display:block; padding:13px 15px; font-size:15px; font-weight:500; color:var(--slate); border-radius:var(--r-sm); transition:background .15s, color .15s; }
.drawer a:hover, .drawer a.active { background:var(--skylt); color:var(--navy); font-weight:700; }
.drawer .d-cta { background:var(--sky); color:#fff!important; text-align:center; margin-top:8px; font-weight:700; border-radius:var(--r-sm); }
.drawer .d-cta:hover { background:var(--navy); }

/* ═══════════════════════════════════════
   PAGE HERO (sous-pages)
═══════════════════════════════════════ */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--marine) 55%, var(--blue) 100%);
  padding: clamp(104px,14vw,144px) clamp(18px,5vw,80px) clamp(44px,6vw,68px);
  text-align: center; position: relative; overflow: hidden;
}
.page-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='white' fill-opacity='0.03'/%3E%3C/svg%3E"); }
.page-hero-inner { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.page-hero .eyebrow { color:var(--accent); }
.page-hero .eyebrow::before { background:var(--accent); }
.page-hero h1 { font-family:'Fraunces',serif; font-size:clamp(28px,5vw,54px); font-weight:600; color:#fff; line-height:1.1; margin-bottom:16px; }
.page-hero h1 em { font-style:italic; color:var(--accent); }
.page-hero p { font-size:clamp(14px,1.8vw,17px); color:rgba(255,255,255,.72); line-height:1.78; margin-bottom:28px; }
.breadcrumb { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:20px; }
.breadcrumb a { color:rgba(255,255,255,.65); transition:color .2s; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { color:rgba(255,255,255,.35); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer { background:var(--navy); padding:clamp(48px,6vw,72px) clamp(18px,5vw,80px) clamp(24px,3vw,34px); }
.ft-in { max-width:1180px; margin:0 auto; }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(28px,4vw,56px); margin-bottom:clamp(32px,4vw,52px); }
.ft-brand p { font-size:13px; color:rgba(255,255,255,.48); line-height:1.78; margin-top:14px; max-width:290px; }
.ft-brand .logo-words b { color:#fff; }
.ft-brand .logo-words small { color:rgba(255,255,255,.42); }
.f-col h5 { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:15px; }
.f-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.f-col ul a { font-size:13px; color:rgba(255,255,255,.56); transition:color .2s; }
.f-col ul a:hover { color:var(--accent); }
.ft-bot { border-top:1px solid rgba(255,255,255,.09); padding-top:22px; font-size:12px; color:rgba(255,255,255,.3); text-align:center; }

/* ═══════════════════════════════════════
   WhatsApp FAB
═══════════════════════════════════════ */
.wa-fab { position:fixed; bottom:26px; right:26px; z-index:9999; width:56px; height:56px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px rgba(37,211,102,.42); transition:transform .2s; animation:waP 2.8s ease-in-out infinite; }
.wa-fab:hover { transform:scale(1.1); }
.wa-fab svg { width:26px; height:26px; }
@keyframes waP { 0%,100%{box-shadow:0 6px 22px rgba(37,211,102,.42)} 50%{box-shadow:0 6px 30px rgba(37,211,102,.72)} }

/* ═══════════════════════════════════════
   ALERT (form)
═══════════════════════════════════════ */
.alert { padding:14px 18px; border-radius:var(--r-md); font-size:14px; font-weight:500; margin-bottom:18px; display:none; }
.alert.success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.alert.error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert.show    { display:block; }

/* ═══════════════════════════════════════
   RESPONSIVE NAV
═══════════════════════════════════════ */
@media(max-width:920px) { .nav-links { display:none; } .burger { display:flex; } }
@media(max-width:600px) { .ft-grid { grid-template-columns:1fr; } .f-col { display:none; } }
@media(max-width:380px) { .logo-words { display:none; } }