/* ============================================================
   BoatsFun — Styles globaux partagés (toutes les pages)
   Charte : Navy #002244 · Lagoon Teal #00B5E2 · Solar Orange #FF8200
   Sea Mist #F0F8FF · Deep Ink #111111
   Poppins (titres) · Inter (UI / texte)
   ============================================================ */

/* ---- Tokens, reset, typographie ---- */
.bf {
  --navy:#002244; --teal:#00B5E2; --orange:#FF8200;
  --sea-mist:#F0F8FF; --ink:#111111;
  --body:#3A4A5A; --muted:#6B7A8C; --hair:#D9E2EE;
  --teal-soft:#CCF1F9; --orange-soft:#FFE6CC;
  --cta-radius:999px;
  --cta-shadow-orange:0 8px 24px -8px rgba(255,130,0,.45);
  --cta-shadow-orange-hover:0 14px 32px -10px rgba(255,130,0,.6);
  /* Fluid spacing — desktop/tablet/mobile share rhythm */
  --container-pad: clamp(20px, 4vw, 40px);
  --section-pad: clamp(56px, 7vw, 96px);
  font-family:'Inter', system-ui, sans-serif;
  background:var(--sea-mist); color:var(--ink); width:100%;
  overflow-x:clip;
}
.bf *, .bf *::before, .bf *::after { box-sizing:border-box; }
.bf h1, .bf h2, .bf h3, .bf h4, .bf h5 { font-family:'Poppins', sans-serif; color:var(--navy); letter-spacing:-0.02em; margin:0; }
.bf p { margin:0; }
.bf img { max-width:100%; }
.bf .container { max-width:1280px; margin:0 auto; padding:0 var(--container-pad); }

/* ---- Sections + heads ---- */
.bf section.s { padding:var(--section-pad) 0; }
.bf .s-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.bf .s-head h2 { font-size:40px; line-height:1.1; font-weight:800; }
.bf .s-head p.sub { font-size:16px; color:var(--body); margin-top:10px; max-width:560px; }
.bf .eyebrow { font-family:'Inter', sans-serif; font-size:11.5px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--teal); }

/* ---- CTA SYSTEM (3 tiers, unifiés) ---- */
/* TIER 1 — Primary orange pill : .btn-reserve, .offer-cta, .ml-cta */
.bf .btn-reserve, .bf .offer-cta, .bf .mobile-menu .ml-cta { background:#FF8200; color:#fff; font-family:'Inter', sans-serif; font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:none; padding:16px 32px; border-radius:var(--cta-radius); border:none; box-shadow:var(--cta-shadow-orange); cursor:pointer; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; transition:all .22s ease; }
.bf .btn-reserve:hover, .bf .offer-cta:hover, .bf .mobile-menu .ml-cta:hover { background:#FF9420; box-shadow:var(--cta-shadow-orange-hover); transform:translateY(-2px); }
.bf .btn-reserve:active, .bf .offer-cta:active, .bf .mobile-menu .ml-cta:active { transform:translateY(0); box-shadow:0 6px 16px -6px rgba(255,130,0,.5); }

/* TIER 1 — Hero primary orange pill (signature CTA : "Faire une offre") */
.bf .hero-cta { background:#FF8200; color:#fff; border:2px solid #FF8200; font-family:'Inter', sans-serif; font-weight:600; font-size:14px; line-height:1.2; letter-spacing:.04em; text-transform:none; padding:15px 32px; min-width:220px; height:52px; border-radius:999px; box-sizing:border-box; box-shadow:0 8px 24px -8px rgba(255,130,0,.45); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.bf .hero-cta:hover { background:#FF9420; border-color:#FF9420; transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(255,130,0,.6); }
.bf .hero-cta:active { transform:translateY(0); box-shadow:0 6px 16px -6px rgba(255,130,0,.5); }

/* TIER 1 secondary — Hero outline white (sur image hero sombre) */
.bf .hero-cta-secondary { background:transparent; color:#fff; border:2px solid #fff; font-family:'Inter', sans-serif; font-weight:600; font-size:14px; line-height:1.2; letter-spacing:.04em; text-transform:none; padding:15px 32px; min-width:220px; height:52px; border-radius:999px; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:background .3s ease, color .3s ease, transform .3s ease; }
.bf .hero-cta-secondary:hover { background:#fff; color:var(--navy); transform:translateY(-2px); }

/* TIER 2 — Secondary outline pill : .btn-outline */
.bf .btn-outline { background:transparent; color:var(--navy); border:1.5px solid rgba(0,34,68,.2); font-family:'Inter', sans-serif; font-weight:600; font-size:14px; letter-spacing:.04em; padding:14px 28px; border-radius:var(--cta-radius); cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:all .22s ease; }
.bf .btn-outline:hover { background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,34,68,.4); }
.bf .btn-outline:active { transform:translateY(0); }

/* TIER 3 — Tertiary text link with arrow : .s-link */
.bf .s-link { color:var(--navy); font-family:'Inter', sans-serif; font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:gap .22s ease, color .22s ease; }
.bf .s-link:hover { color:var(--orange); gap:12px; }

/* ---- Hierarchy & spacing refinements ---- */
.bf .s-head h2, .bf .how-head h2, .bf .why-head h2, .bf .faq-head h2 { font-size:42px; letter-spacing:-1.2px; }
.bf .s-head p.sub, .bf .how-head .sub { font-size:16.5px; line-height:1.55; color:var(--body); }

/* ---- Responsive — typographie partagée ---- */
@media (max-width: 1024px) {
  .bf .s-head h2, .bf .how-head h2, .bf .why-head h2, .bf .faq-head h2 { font-size:36px; letter-spacing:-1px; }
}
@media (max-width: 900px) {
  .bf .s-head h2, .bf .how-head h2, .bf .why-head h2, .bf .faq-head h2 { font-size:32px; }
}
@media (max-width: 860px) {
  .bf .s-head { flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:24px; }
  .bf .s-head h2, .bf .how-head h2, .bf .why-head h2, .bf .faq-head h2 { font-size:28px; letter-spacing:-.6px; }
  .bf .s-head p.sub, .bf .how-head .sub { font-size:15px; }
}
@media (max-width: 500px) {
  .bf .s-head h2, .bf .how-head h2, .bf .why-head h2, .bf .faq-head h2 { font-size:25px; }
}
@media (max-width: 360px) {
  .bf .s-head h2, .bf .how-head h2, .bf .why-head h2, .bf .faq-head h2 { font-size:23px; }
}