/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Breizh Kruiser — Responsive + Hamburger menu
   Classes are injected by nav.js after React renders,
   because React CSSOM serialisation normalises inline
   styles (adding spaces) so attribute selectors are
   unreliable. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root { --accent: #C8AE82; }

/* ──────────────────────────────────────────────
   HAMBURGER BUTTON (injected by nav.js)
────────────────────────────────────────────── */
.bk-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 62;
}
.bk-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #F5F1E6;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s;
  transform-origin: center;
}
.bk-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bk-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bk-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ──────────────────────────────────────────────
   MOBILE MENU OVERLAY
────────────────────────────────────────────── */
.bk-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(7,11,18,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 36px;
  overflow: hidden;
}
.bk-mobile-menu.open { display: flex; }
body.bk-menu-open { overflow: hidden; }

.bk-menu-logo {
  position: absolute;
  top: 18px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F5F1E6;
  text-decoration: none;
}
.bk-menu-logo img {
  height: 36px;
  width: auto;
  filter: invert(1);
  mix-blend-mode: screen;
}
.bk-menu-logo span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bk-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: rgba(245,241,230,.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s;
}
.bk-menu-close:hover { color: #F5F1E6; }

.bk-mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.bk-mobile-menu nav a {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: rgba(245,241,230,.65);
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid rgba(245,241,230,.08);
  transition: color .2s;
  display: block;
}
.bk-mobile-menu nav a:first-child { border-top: 1px solid rgba(245,241,230,.08); }
.bk-mobile-menu nav a:hover,
.bk-mobile-menu nav a.bk-active { color: var(--accent); }

.bk-menu-contact {
  position: absolute;
  bottom: 32px;
  left: 36px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,241,230,.32);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE  ≤ 767px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {

  /* ── Header ── */
  header {
    padding: 14px 20px !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  header nav { display: none !important; }
  /* Hamburger: force to far right */
  .bk-burger {
    display: flex !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .bk-coords { display: none !important; }

  /* ── Global side padding ── */
  section { padding-left: 20px !important; padding-right: 20px !important; }
  footer   { padding-left: 20px !important; padding-right: 20px !important; }
  footer > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }

  /* ── Vertical padding reductions (via JS-added classes) ── */
  .bk-s180 { padding-top: 110px !important; padding-bottom: 64px !important; }
  .bk-s130 { padding-top: 64px  !important; padding-bottom: 80px !important; }
  .bk-s120 { padding-top: 72px  !important; padding-bottom: 72px !important; }
  .bk-s110 { padding-top: 64px  !important; padding-bottom: 64px !important; }
  .bk-s100 { padding-top: 60px  !important; padding-bottom: 60px !important; }
  .bk-s96  { padding-top: 56px  !important; padding-bottom: 56px !important; }
  .bk-s88  { padding-top: 52px  !important; padding-bottom: 52px !important; }

  /* ── Grid collapses ── */
  /* 3-col → 1-col (golf cards, departure cards) */
  .bk-g3 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* 4-col stats → 2-col */
  .bk-g4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Wide 2-col (boat, captain, golf sections) → 1-col */
  .bk-g-2wide {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Form + aside (1fr 340px) → 1-col */
  .bk-g-aside-340 {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Sidebar (280px 1fr) → 1-col */
  .bk-g-aside-280 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Captain/boat fixed-col (420px 1fr) → 1-col */
  .bk-g-col-420 {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Equal 2-col (1fr 1fr) — included/excluded lists, form row */
  .bk-g-1fr1fr {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── Heights ── */
  .bk-h480 { height: 240px !important; }
  .bk-h340 { height: 240px !important; }
  .bk-h200 { height: 160px !important; }
  /* Boat main image (560px inside #bateau) */
  #bateau .bk-h560 { height: 240px !important; }
  /* Calendar iframe (560px on reservation page) */
  iframe.bk-h560 { height: 340px !important; }

  /* ── Boat gallery figures ── */
  .bk-fig-wide, .bk-fig-med { grid-column: span 12 !important; grid-row: span 1 !important; }
  .bk-fig-sm  { grid-column: span 6  !important; grid-row: span 1 !important; }
  .bk-fig-12.bk-row-2 { grid-row: span 1 !important; height: 180px !important; }

  /* ── Sticky aside → static ── */
  .bk-sticky-aside { position: static !important; top: auto !important; }
  aside { position: static !important; top: auto !important; }

  /* ── Hero scroll hint ── */
  .bk-scroll-hint { display: none !important; }

  /* ── Reserve CTA buttons: stack ── */
  #reserver div[style] > div[style] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TRAVERSÉE — mobile opened state
     Strategy: map fills 100% of the stage. The cards
     container is also 100%×100% (transparent). Individual
     [data-card] elements keep their JS-driven opacity/
     transform animation — they appear as a centred
     floating card OVER the map when a stop is active,
     and are invisible (opacity:0) while at sea.
     This mirrors the desktop split-panel experience.
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* Stage: full viewport width, adjusted for mobile header */
  body.bk-seq-open [data-stage] {
    max-width: 100% !important;
    width: 100% !important;
    top: 72px !important;
    height: calc(100vh - 72px) !important;
    border-radius: 0 !important;
  }

  /* Map lane: expand to full stage */
  body.bk-seq-open [data-lane] {
    width: 100% !important;
    /* top:0 + bottom:0 already → full height */
  }

  /* Cards container: transparent full-stage overlay.
     The JS fades individual cards in/out so between stops
     the container is invisible, revealing the map. */
  body.bk-seq-open [data-cards] {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 20px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  body.bk-seq-open [data-cards] > div {
    max-width: 100% !important;
  }

  /* Hide placeholder image slots — keep cards compact */
  body.bk-seq-open .bk-card-img { display: none !important; }

  /* Cards: stronger shadow (floating over map) + compact text */
  body.bk-seq-open [data-card] {
    overflow: hidden !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.65) !important;
  }
  body.bk-seq-open [data-card] > div:first-child {
    padding: 16px 22px 0 !important;
    font-size: 9.5px !important;
  }
  body.bk-seq-open [data-card] h2 {
    font-size: clamp(28px, 7.5vw, 42px) !important;
    margin: 8px 22px 0 !important;
    line-height: 1.05 !important;
  }
  body.bk-seq-open [data-card] > [data-en] {
    margin: 5px 22px 0 !important;
    font-size: 10px !important;
  }
  body.bk-seq-open [data-card] p {
    font-size: 14px !important;
    margin: 10px 22px 0 !important;
    line-height: 1.55 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.bk-seq-open [data-card] > div:last-child {
    margin-top: 12px !important;
  }

  /* Card #6 — "La remontée" has transparent background + white text */
  body.bk-seq-open [data-card][data-idx="6"] h2 {
    font-size: clamp(32px, 9vw, 52px) !important;
    margin: 10px 0 0 !important;
  }
  body.bk-seq-open [data-card][data-idx="6"] p {
    margin: 12px 0 0 !important;
    font-size: 15px !important;
  }
  body.bk-seq-open [data-card][data-idx="6"] > div:last-child {
    padding-left: 0 !important;
  }

  /* Close button → top-right corner of the stage */
  body.bk-seq-open [data-close] {
    top: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    padding: 10px 16px !important;
    font-size: 10px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET  768px – 1023px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 768px) and (max-width: 1023px) {

  /* ── Header ── */
  header { padding: 14px 28px !important; }
  header nav { gap: 18px !important; font-size: 10.5px !important; }

  /* ── Global side padding ── */
  section { padding-left: 28px !important; padding-right: 28px !important; }
  footer   { padding-left: 28px !important; padding-right: 28px !important; }

  /* ── Vertical padding reductions ── */
  .bk-s180 { padding-top: 140px !important; padding-bottom: 80px !important; }
  .bk-s120 { padding-top: 88px  !important; padding-bottom: 88px !important; }
  .bk-s130 { padding-top: 88px  !important; padding-bottom: 100px !important; }

  /* ── Grid adjustments ── */
  /* Golf cards 3→2 */
  .bk-g3 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Stats 4→2 */
  .bk-g4 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Sidebar 280px → 200px */
  .bk-g-aside-280 { grid-template-columns: 200px 1fr !important; gap: 44px !important; }
  /* Form + aside → narrower */
  .bk-g-aside-340 { grid-template-columns: 1fr 280px !important; gap: 48px !important; }
  /* Captain: 300px col */
  .bk-g-col-300 { grid-template-columns: 300px 1fr !important; gap: 44px !important; }

  /* ── Heights ── */
  .bk-h480 { height: 380px !important; }

  /* ── Wide 2-col layouts: reduce gap (boat, golf sections) ── */
  .bk-g-2wide { gap: 44px !important; }

  /* ── Captain: shrink fixed column (420px → 300px) ── */
  .bk-g-col-420 { grid-template-columns: 300px 1fr !important; gap: 44px !important; }
}