/* ════════════════════════════════════════════════════
   Charter — Bénin Tours S.A. — Coming soon
   Palette reprise du site public charter-front
   (vert/or/rouge, police Aeonik).
   ════════════════════════════════════════════════════ */

:root {
  --green-dark:   #2C4220;
  --green:        #405F2E;
  --green-mid:    #7B9A28;
  --green-light:  #AAC513;
  --gold:         #F8BA00;
  --gold-ink:     #4A3406;
  --red:          #DD0C15;
  --text:         #113038;
  --muted:        #5C6E74;
  --line:         rgba(17, 43, 54, 0.08);
  --cream:        #F7F3EA;
  --ivory:        #F9F6EE;
  --mint:         #EFF5E3;

  --font-main: 'Aeonik', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-main);
  color: var(--text);
  background-color: var(--cream);
  overflow-x: hidden;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
}

body::before {
  background-image: url('assets/bg-illustration.webp');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  filter: saturate(125%) hue-rotate(15deg) brightness(0.86);
}

body::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(249, 246, 238, 0.38) 0%, rgba(249, 246, 238, 0.28) 40%, rgba(249, 246, 238, 0.6) 100%);
}

@media (max-width: 760px) {
  body::before, body::after { position: absolute; }
}

.u-hidden { display: none !important; }

/* ─── Header ─────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 24px 0;
}

.brand-logo { height: 60px; width: auto; }

.brand-logo--tours { height: 42px; }

.topbar-sep {
  width: 1px;
  height: 40px;
  background: rgba(17, 43, 54, 0.22);
}

/* ─── Hero ───────────────────────────────────────────── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 24px;
}

h1 {
  max-width: 980px;
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

/* on garde « sera bientôt disponible. » sur une seule ligne (sauf mobile) */
@media (min-width: 561px) {
  h1 .accent { white-space: nowrap; }
}

h1 .accent {
  font-family: var(--font-main);
  font-style: italic;
  font-weight: 700;
  color: var(--green-light);
}

.lead {
  max-width: 720px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px rgba(6, 18, 10, 0.55), 0 2px 16px rgba(6, 18, 10, 0.5);
  text-wrap: pretty;
}

/* ─── Bouton principal ───────────────────────────────── */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  box-shadow: 0 14px 30px -16px rgba(64, 95, 46, 0.65);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cta-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 32px -14px rgba(64, 95, 46, 0.6); }
.cta-btn:active { transform: translateY(0); }

/* ─── Footer ─────────────────────────────────────────── */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 24px 0;
  text-align: center;
}

.footer-mail {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.footer-mail:hover { text-decoration: underline; }

.footer-copy {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px rgba(6, 18, 10, 0.55), 0 2px 16px rgba(6, 18, 10, 0.5);
  padding-bottom: 18px;
}

.footer-bar { display: flex; width: 100%; height: 6px; }
.footer-bar > div { flex: 1; }
.bar-green  { background: var(--green); }
.bar-yellow { background: var(--gold); }
.bar-red    { background: var(--red); }

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { opacity: 0; animation: fadeInUp .8s ease forwards; }
.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .3s; }
.delay-3 { animation-delay: .45s; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 560px) {
  .topbar { gap: 14px; padding-top: 32px; }
  .brand-logo { height: 46px; }
  .brand-logo--tours { height: 32px; }
  .topbar-sep { height: 30px; }
}