/* =========================================================
   L'Oiseau Des Iles II — Design tokens & global stylesheet
   ========================================================= */

:root {
  /* Brand palette */
  --navy: #0A2E5C;
  --ocean: #2E6DA8;
  --sky: #4FC3E8;
  --gray-light: #D9DEE3;
  --sand: #B3A794;
  --ink-muted: #6B5D4B; /* darker sand-family tone used for text so small labels keep 4.5:1+ contrast on light backgrounds */
  --off-white: #FBFAF8;
  --white: #FFFFFF;
  --ink: #12181F;

  --gradient-deep: linear-gradient(135deg, var(--navy) 0%, var(--ocean) 100%);
  --gradient-surface: linear-gradient(135deg, var(--ocean) 0%, var(--sky) 100%);

  --font-serif: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-img: var(--radius-md); /* photo corners: rounded on the edges that don't butt against adjacent copy */

  --shadow-sm: 0 2px 10px rgba(10, 46, 92, 0.08);
  --shadow-md: 0 12px 32px rgba(10, 46, 92, 0.16);
  --shadow-lg: 0 24px 64px rgba(10, 46, 92, 0.24);

  --container: min(1180px, 92vw);
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--ocean); }
p { margin: 0 0 var(--space-2); }
ul, ol { margin: 0 0 var(--space-2); padding-left: 1.3em; }
li { margin-bottom: 0.35em; display: inline list-item;}
table { border-collapse: collapse; width: 100%; margin: var(--space-2) 0; }
table th, table td { border: 1px solid var(--gray-light); padding: 0.6em 0.9em; text-align: left; }
table th { background: var(--gray-light); color: var(--navy); font-family: var(--font-serif); }
strong { color: var(--navy); }

/* body copy links get an underline so they aren't distinguished by color alone */
.content a, .box a, .blog-content a, .brief a {
  color: var(--ocean);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.content a:hover, .box a:hover, .blog-content a:hover, .brief a:hover { color: var(--navy); }

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  background: var(--navy);
  color: var(--white);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  z-index: 2000;
  transition: top 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

.section { padding: var(--space-6) 0; }
.section .container, main > section > .container { width: var(--container); margin: 0 auto; }
main > section:not(.hero-video):not(.hero-slides):not(.banner):not(.pg-head) { width: var(--container); margin: 0 auto; padding: var(--space-5) 0; }
main > section.faq, main > section.blog-home, main > section.video, main > section.news { border-top: 1px solid var(--gray-light); }

.section-title, main > section > .title, main > section > h1.title, main > section > h2.title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--navy);
  text-align: center;
  margin-bottom: var(--space-4);
  position: relative;
}
main > section > h1.title::after, main > section > h2.title::after {
  content: '';
  display: block;
  width: 72px; height: 3px;
  margin: var(--space-2) auto 0;
  background: var(--gradient-surface);
  border-radius: 2px;
}

.box ul, ol, .content ul, ol, .blog-content ul, ol  { margin: 0 !important;  padding-left: 1.5rem !important;  width: 100% !important;  list-style-position: inside !important;}
.box li, .content li, .blog-content li { margin-bottom: 0.35em; display: list-item !important;}

/* ---------- Header / navigation ---------- */
.site-header {
  /* Not sticky: the header scrolls away with the page like a normal menu. */
  position: relative; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
  background: rgba(251, 250, 248, 0.82);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid transparent;
  min-height: var(--header-h);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;

}
/* solidifies once scrolled (is-scrolled toggled in main.js) */
.site-header.is-scrolled {
  background: rgba(251, 250, 248, 0.95);
  border-bottom-color: rgba(10, 46, 92, 0.14);
  box-shadow: 0 10px 40px rgba(7, 31, 63, 0.07);

}
.site-header .logo-link { display: flex; align-items: center; flex-shrink: 0; }
.site-header .logo-link img { width: 150px; height: auto; transition: all 0.3s ease-in-out;}

.mobile-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}
.mobile-nav-toggle svg { width: 22px; height: 22px; stroke: var(--navy); }

.primary-nav { flex: 1; display: flex; justify-content: center; }
.nav-list {
  display: flex; align-items: center; gap: var(--space-3);
  list-style: none; margin: 0; padding: 0;
}
.nav-item { position: relative; }
.nav-item > a, .nav-item--has-children > button {
  display: inline-flex; align-items: center; gap: 0.35em;
  border: none; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  padding: 0.5em 0.2em;
  background-color: transparent;
  background-image: linear-gradient(var(--ocean), var(--ocean));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 calc(100% - 4px);
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.nav-item > a:hover, .nav-item--has-children > button:hover,
.nav-item > a.is-active, .nav-item--has-children.is-active > button {
  background-size: 100% 1px;
  color: var(--ocean);
}
.nav-item--has-children > button svg { width: 12px; height: 12px; stroke: currentColor; transition: transform 0.2s ease; }
.nav-item--has-children > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.5em 0;
  list-style: none; margin: 6px 0 0;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-item--has-children > button[aria-expanded="true"] + .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block; padding: 0.6em 1.1em;
  text-decoration: none; color: var(--ink); font-size: 0.95rem;
}
.nav-dropdown a:hover { background: var(--gray-light); color: var(--navy); }
/* Desktop: dropdown opens on hover (or keyboard focus), not on click */
@media (min-width: 901px) {
  .nav-item--has-children:hover > .nav-dropdown,
  .nav-item--has-children:focus-within > .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .nav-item--has-children:hover > button svg,
  .nav-item--has-children:focus-within > button svg { transform: rotate(180deg); }
}

.header-aside { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.lang-switch { display: flex; align-items: center; gap: 0.4em; }
.lang-switch a { display: inline-flex; border-radius: 3px; overflow: hidden; line-height: 0; }
.lang-switch img { width: 24px; height: 16px; object-fit: cover; transition: all 0.3s ease-in-out;}
.lang-switch a[aria-current="true"] { outline: 2px solid var(--sky); outline-offset: 2px; }
.social-links { display: flex; gap: 0.6em; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gray-light); color: var(--navy);
}
.social-links a:hover { background: var(--sky); color: var(--white); }
.social-links svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

@media (max-width: 1050px) {  .whole-width   { grid-template-columns: max-content !important; display: inherit;  margin-top: 50px;}

.lang-switch a[aria-current="true"] { margin: 10px;}

#home-page .hm-hero-title { text-align: center !important;}
#home-page .hm-hero-actions { display: block !important; text-align: center !important;}
#home-page .hm-hero-lede { text-align: center !important; max-width: fit-content !important;}
#home-page .hm-hero-foot-inner { gap: 0 !important; text-align: center !important; width: 100% !important; display: block !important; }
#home-page .hm-hero-fact { flex-direction: column !important;  align-items: center !important;  gap: 0.8rem !important;  padding: 0 !important; }
#home-page .hm-eyebrow {display: block !important; text-align: center !important;}
#home-page .hm-manifesto, #home-page .hm-journal {padding-top: 30px !important;}
#home-page .hm-title, #home-page .faq .section-title {max-width: initial !important; text-align: center !important; width: 100% !important; display: block !important;}
#home-page .hm-spec li { grid-template-columns: auto !important;}
#home-page .hm-tech-meta p { max-width: initial !important;}
#home-page .hm-link { display: block !important; text-align: center !important;  width: 100% !important;}
#home-page .hm-stat { border-left: none !important; padding-left: 0 !important;}
#home-page .hm-stats { grid-template-columns: auto !important;}
#home-page .hm-kicker { max-width: initial !important;}
#home-page .hm-formula { display: block !important; }
 #home-page .hm-formula-cta { width: 100% !important; text-align: center !important;  display: block !important;  margin-top: 20px  !important; }
#home-page .hm-formula-price { padding: 20px !important;}
#home-page .hm-formulas { padding: 5px !important; }
#home-page .hm-facts li { grid-template-columns: auto !important;}
#home-page .hm-entry img, .pg_news .right picture img { max-width: initial !important; border-radius: var(--radius-img) !important;}
.site-footer { text-align: center !important; }
.footer-social { display: block !important;  text-align: center !important; }
.footer-bottom span { margin-left: auto !important;  margin-right: auto !important; }
#home-page .hm-tech-outro { justify-content: center !important; align-items: center !important;}
#home-page .hm-tech-outro p { max-width: fit-content !important;}
.pg_boat, .pg_peche, .pg_info, .pg_fares, .pg_news {padding:0 !important;}
h3 { text-align: center !important;}
.box h2 { text-align: center !important;}
.related-pages {padding-top: 30px !important;}
.pg-eyebrow, .pg-hero-title { display: block !important;  text-align: center !important; width: 100% !important;  max-width: initial !important;}
.box { text-align: center !important;}
}


@media (max-width: 900px) {
  /* backdrop-filter makes the header the containing block for fixed
     descendants, which would clip the full-screen nav panel to the header box */
  .site-header { backdrop-filter: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--white);
    display: none;
    overflow-y: auto;
    padding: var(--space-3);
  }
  .primary-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--gray-light); }
  .nav-item > a, .nav-item--has-children > button { width: 100%; padding: 1em 0.3em; justify-content: space-between; }
  .nav-dropdown {
    position: static; transform: none; box-shadow: none; border: none;
    opacity: 1; visibility: visible; display: none; padding-left: 1em;
  }
  .nav-item--has-children > button[aria-expanded="true"] + .nav-dropdown { display: block; transform: none; }
  #home-page .hm-dark .hm-title {text-align: center; display: contents;}
  #home-page [data-reveal].is-visible { text-align: center; max-width: initial;}
 .blog-card-body { padding: 25px !important; text-align: center !important;}
 .blog-content { text-align: center!important;}
 .floating-cta a, .floating-cta button { font-size: 14px !important;  min-height: 24px !important; padding: 5px !important; font-weight: 600 !important;}
 .cta-whatsapp img, .cta-quote img {width:20px !important;}

}

@media (max-width: 540px) {
#home-page .hm-entry img, .pg_news .right picture img, .pg_news .left picture img { max-width: initial !important; border-radius: var(--radius-img) !important;}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  width: var(--container); margin: 0 auto 35px; padding: var(--space-2) 0 0;
  font-size: 0.88rem; color: var(--ink);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 0.4em; }
.breadcrumb li:not(:last-child)::after { content: '/'; color: var(--ink-muted); }
.breadcrumb a { text-decoration: underline; color: var(--ocean); }
.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* ---------- Hero (video, on home) ---------- */
.hero-video {
  position: relative; overflow: hidden;
  min-height: min(88vh, 720px);
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-deep);
}
.hero-video video, .hero-video .hero-fallback-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-video .hero-fallback-img { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; }
  .hero-video .hero-fallback-img { display: block; }
}
.hero-video::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,46,92,0.55) 0%, rgba(10,46,92,0.35) 45%, rgba(10,46,92,0.75) 100%);
}
.hero-video-content {
  position: relative; z-index: 2;
  width: var(--container);
  color: var(--white);
  text-align: center;
  padding: var(--space-5) 0;
}
.hero-video-content h1 { color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.hero-video-content .hero-lede { max-width: 62ch; margin: 0 auto var(--space-3); font-size: 1.15rem; }
.hero-video-content .hero-lede p { margin: 0 0 0.8em; }

/* ---------- Hero (static image slideshow, inner pages) ---------- */
.hero-slides {
  position: relative;
  /* The hero photos are 2000x1155, so holding that exact ratio shows every slide
     whole at any width - nothing is cropped. This used to be capped at one screen
     below the header (which was sticky then), and that cap is what was cutting the
     tops and bottoms off on anything but a tall window. */
  width: 100%;              /* pin the width: with aspect-ratio alone, min-height below
                               would be turned back into a width and overflow the viewport */
  aspect-ratio: 2000 / 1155;
  min-height: 260px;        /* narrow phones only: room for the eyebrow + title overlay */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #071F3F;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-showing { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero-slides::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,46,92,0.35) 0%, rgba(10,46,92,0.12) 40%, rgba(7,31,63,0.8) 100%);
}

/* Copy overlaid on inner-page heroes (echoes the homepage hero treatment) */
.pg-hero-copy {
  position: relative; z-index: 2;
  width: var(--container); margin: 0 auto;
  padding: calc(var(--space-6) + 2rem) 0 var(--space-4);
  color: var(--off-white);
}
.pg-eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 1.2rem;
}
.pg-eyebrow::before {
  content: ''; width: 3.5rem; height: 1px;
  background: currentColor; opacity: 0.7; flex-shrink: 0;
}
.pg-hero-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.015em;
  color: var(--off-white);
  margin: 0; max-width: 20ch; text-wrap: balance;
  text-shadow: 0 4px 40px rgba(7, 31, 63, 0.55);
}
.pg-hero-title em { font-style: italic; font-weight: 500; color: var(--sky); }

/* Imageless page head (blog index & posts) */
.pg-head {
  background: linear-gradient(160deg, #071F3F 0%, var(--navy) 100%);
  color: var(--off-white);
  padding: var(--space-5) 0 var(--space-4);
}
.pg-head-inner { width: var(--container); margin: 0 auto; }
.pg-head .pg-hero-title { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 30ch; }
.pg-head .blog-meta { color: var(--gray-light); margin: var(--space-2) 0 0; }

/* ---------- Rich text content (ql-editor exports) ---------- */
.content, .brief, .blog-content, .faq-answer { color: var(--ink); }
.content h2, .blog-content h2 { margin-top: var(--space-4); }
.content h3, .blog-content h3 { margin-top: var(--space-3); }
.content p:empty, .blog-content p:empty, .brief p:empty { display: none; }

/* ---------- Left/right alternating editorial blocks (boat, gear, techniques, fares, news) ---------- */
main > section.pg_boat, main > section.pg_peche, main > section.pg_info,
main > section.pg_fares, main > section.pg_news { padding-top: var(--space-5); }
main > section.pg_boat > .content, main > section.pg_peche > .content,
main > section.pg_info > .content, main > section.pg_fares > .content {
  max-width: 120ch; margin: 0 auto var(--space-5); font-size: 1.08rem; text-align: center;
}
/* Section-level text blocks that sit outside the cards. The section intros are
   centred, but list-heavy copy (a day-by-day itinerary, a crew roster) reads badly
   that way - bullets go ragged and the last line of a long item is left stranded.
   These keep the centred heading and left-align the prose and the list. */
main > section > .content.text-left p,
main > section > .content.text-left ul,
main > section > .content.text-left li { text-align: left; }
/* NOTE: "left"/"right" mean two different things depending on the page:
   - on pg_boat/pg_peche/pg_info/pg_fares/pg_news these wrap BOTH an image and a text .box
     together, and need their own 2-column layout (scoped rules below);
   - on the home page's .boat/.peche/.info sections, .left/.right are plain grid *items*
     inside .block (each holding just one thing) and must NOT get a nested grid - see the
     "home page sections" rules further down. */
/* NOTE: pg_peche is deliberately absent from the rules below - the fishing-techniques
   page stacks photo-on-top / text-below at every width so its photos are never cropped.
   See "Fishing techniques" further down. */
.pg_boat > .left, .pg_boat > .right,
.pg_info > .left, .pg_info > .right, .pg_fares > .left, .pg_fares > .right,
.pg_news > .left, .pg_news > .right {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  align-items: stretch;
  margin-bottom: var(--space-5);
}
.pg_boat > .left picture, .pg_boat > .left > img,
.pg_info > .left picture, .pg_info > .left > img, .pg_fares > .left picture, .pg_fares > .left > img,
.pg_news > .left picture, .pg_news > .left > img { order: 1; }
.pg_boat > .right picture, .pg_boat > .right > img,
.pg_info > .right picture, .pg_info > .right > img, .pg_fares > .right picture, .pg_fares > .right > img,
.pg_news > .right picture, .pg_news > .right > img { order: 2; }
.pg_boat > .left .box, .pg_info > .left .box, .pg_fares > .left .box, .pg_news > .left .box { order: 2; }
.pg_boat > .right .box, .pg_info > .right .box, .pg_fares > .right .box, .pg_news > .right .box { order: 1; }
/* Image column matches the text box height (rows stretch, cover crops the excess) */
.pg_boat .left picture, .pg_boat .right picture,
.pg_info .left picture, .pg_info .right picture, .pg_fares .left picture, .pg_fares .right picture,
.pg_news .left picture, .pg_news .right picture { height: 100%; }
.pg_boat .left picture img, .pg_boat .right picture img, .pg_boat .left > img, .pg_boat .right > img,
.pg_info .left picture img, .pg_info .right picture img, .pg_info .left > img, .pg_info .right > img,
.pg_fares .left picture img, .pg_fares .right picture img, .pg_fares .left > img, .pg_fares .right > img,
.pg_news .left picture img, .pg_news .right picture img, .pg_news .left > img, .pg_news .right > img {
  box-shadow: 0 30px 80px rgba(7, 31, 63, 0.18);
  width: 100%; height: 100%; object-fit: cover;
}
/* Rounded on the outer edges only - the edge facing the text box stays flush so the
   photo and its copy still read as one joined unit. */
.pg_info .left picture img, .pg_info .left > img,
.pg_fares .left picture img, .pg_fares .left > img,
.pg_news .left picture img, .pg_news .left > img {
  border-radius: var(--radius-img) 0 0 var(--radius-img);
}
.pg_info .right picture img, .pg_info .right > img,
.pg_fares .right picture img, .pg_fares .right > img,
.pg_news .right picture img, .pg_news .right > img {
  border-radius: 0 var(--radius-img) var(--radius-img) 0;
}
/* Boat & crew: photos are rounded on all four corners, at every width. */
.pg_boat .left picture img, .pg_boat .left > img,
.pg_boat .right picture img, .pg_boat .right > img {
  border-radius: var(--radius-img);
}
.box .name {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-sans); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.32em; font-size: 0.7rem; color: var(--ocean);
  margin-bottom: 1rem;
}
.box .name::before { content: ''; width: 2.6rem; height: 1px; background: currentColor; opacity: 0.6; flex-shrink: 0; }
.pg_news .box .read, .pg_news .box a { display: inline-block; margin-top: 0.6em; }

.box p { margin: 10px;}

/* ---------- Editorial rhythm (echoes the homepage design language) ---------- */
/* Oversized outlined chapter numerals on each editorial row (echoes .hm-num) */
main > section.pg_boat, main > section.pg_peche, main > section.pg_info,
main > section.pg_news { counter-reset: pgrow; }
.pg_boat > .left, .pg_boat > .right, .pg_peche > .left, .pg_peche > .right,
.pg_info > .left, .pg_info > .right, .pg_news > .left, .pg_news > .right {
  counter-increment: pgrow;
  position: relative;
}
.pg_boat > .left::before, .pg_boat > .right::before, .pg_peche > .left::before,
.pg_peche > .right::before, .pg_info > .left::before, .pg_info > .right::before,
.pg_news > .left::before, .pg_news > .right::before {
  content: counter(pgrow, decimal-leading-zero);
  position: absolute; top: -0.5em; right: -0.03em; z-index: 0;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(5rem, 12vw, 9rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(10, 46, 92, 0.12);
  pointer-events: none; user-select: none;
}
/* Display-type headings with italic accent support */
.box h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.01em; position: relative; z-index: 1; }
.box h2 em, .box h3 em, .content h2 em { font-style: italic; font-weight: 500; color: var(--ocean); }
/* First heading of the centered intro reads like the homepage manifesto statement */
main > section.pg_boat > .content > h2:first-child, main > section.pg_peche > .content > h2:first-child,
main > section.pg_info > .content > h2:first-child, main > section.pg_fares > .content > h2:first-child,
main > section.pg_news > .content > h2:first-child {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.01em; text-wrap: balance; margin-top: 0;
}
/* Alternating dark panels: every .right row's text box becomes a deep-navy card */
.pg_boat > .right .box, .pg_peche > .right .box, .pg_info > .right .box, .pg_news > .right .box {
  background: linear-gradient(160deg, #071F3F 0%, var(--navy) 100%);
  color: rgba(251, 250, 248, 0.88);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--radius-img); border-top: 3px solid var(--sky);
  box-shadow: var(--shadow-md);
  margin-bottom: 30px;
}
.pg_boat > .right .box h2, .pg_peche > .right .box h2, .pg_info > .right .box h2, .pg_news > .right .box h2,
.pg_boat > .right .box h3, .pg_peche > .right .box h3, .pg_info > .right .box h3, .pg_news > .right .box h3,
.pg_boat > .right .box strong, .pg_peche > .right .box strong, .pg_info > .right .box strong, .pg_news > .right .box strong {
  color: var(--off-white);
}
.pg_boat > .right .box h3, .pg_peche > .right .box h3, .pg_info > .right .box h3, .pg_news > .right .box h3 { color: var(--sky); }
.pg_boat > .right .box .name, .pg_peche > .right .box .name, .pg_info > .right .box .name, .pg_news > .right .box .name { color: var(--sand); }
.pg_boat > .right .box a, .pg_peche > .right .box a, .pg_info > .right .box a, .pg_news > .right .box a { color: var(--sky); text-decoration-color: var(--sky); }
.pg_boat > .right .box h2 em, .pg_peche > .right .box h2 em, .pg_info > .right .box h2 em, .pg_news > .right .box h2 em { color: var(--sky); }
.pg_boat > .right .box .read, .pg_peche > .right .box .read, .pg_info > .right .box .read, .pg_news > .right .box .read {
  background: transparent; border: 1px solid rgba(251, 250, 248, 0.45); box-shadow: none;
}
/* Quill-pasted spec tables styled as a ledger (echoes .hm-spec) */
.box table { margin: var(--space-3) 0; border-collapse: collapse; border: 0; }
.box table th, .box table td { border: 0; border-top: 1px solid rgba(10, 46, 92, 0.14); padding: 0.8em 0.9em 0.8em 0; text-align: left; }
.box table tr:last-child td { border-bottom: 1px solid rgba(10, 46, 92, 0.14); }
.box table th { background: transparent; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ocean); }
.box table td:first-child { font-family: var(--font-serif); font-size: 1.05rem; color: var(--navy); }

/* Fares: split editorial panels (echoes the homepage formula cards) */
.pg_fares .box {
  background: linear-gradient(160deg, #071F3F 0%, var(--navy) 100%);
  color: rgba(251, 250, 248, 0.88);
  padding: 0; border-radius: var(--radius-img);
}
.pg_fares .box .name { color: var(--sand); }
.pg_fares .box h2, .pg_fares .box h3, .pg_fares .box strong { color: var(--off-white); }
.pg_fares .box h3 { color: var(--sky); }
.pg_fares .box a { color: var(--sky); text-decoration-color: var(--sky); }
.pg_fares > .box {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0;
  overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: var(--space-4);
  border-top: 3px solid var(--sky);
}
.pg_fares > .box picture { height: 100%; }
.pg_fares > .box picture img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.pg_fares > .box > .content { padding: clamp(1.6rem, 3.5vw, 2.8rem); margin: 0; color: rgba(251, 250, 248, 0.88); }
.pg_fares > .box:nth-child(even) picture { order: 2; }
.pg_fares > .box:not(:has(picture)) { grid-template-columns: 1fr; }

@media (max-width: 800px) {
  .pg_boat > .left, .pg_boat > .right,
  .pg_info > .left, .pg_info > .right, .pg_fares > .left, .pg_fares > .right,
  .pg_news > .left, .pg_news > .right { display: block; grid-template-columns: auto;}
  .pg_boat .left picture, .pg_boat .left > img, .pg_boat .right picture, .pg_boat .right > img,
  .pg_info .left picture, .pg_info .left > img, .pg_info .right picture, .pg_info .right > img,
  .pg_fares .left picture, .pg_fares .left > img, .pg_fares .right picture, .pg_fares .right > img,
  .pg_news .left picture, .pg_news .left > img, .pg_news .right picture, .pg_news .right > img,
  .pg_boat .left .box, .pg_boat .right .box,
  .pg_info .left .box, .pg_info .right .box, .pg_fares .left .box, .pg_fares .right .box,
  .pg_news .left .box, .pg_news .right .box { order: initial; }
  /* stacked single column: images return to a fixed editorial crop */
  .pg_boat .left picture, .pg_boat .right picture,
  .pg_info .left picture, .pg_info .right picture, .pg_fares .left picture, .pg_fares .right picture,
  .pg_news .left picture, .pg_news .right picture { height: auto; }
  .pg_boat .left picture img, .pg_boat .right picture img, .pg_boat .left > img, .pg_boat .right > img,
  .pg_info .left picture img, .pg_info .right picture img, .pg_info .left > img, .pg_info .right > img,
  .pg_fares .left picture img, .pg_fares .right picture img, .pg_fares .left > img, .pg_fares .right > img,
  .pg_news .left picture img, .pg_news .right picture img, .pg_news .left > img, .pg_news .right > img {
    height: auto; aspect-ratio: 4/3;
    /* stacked single column: the photo stands alone, so round all four corners */
    border-radius: var(--radius-img);
  }
  .pg_fares > .box { grid-template-columns: 1fr; }
  .pg_fares > .box:nth-child(even) picture { order: 0; }
  .pg_fares > .box picture { height: auto; }
  .pg_fares > .box picture img { aspect-ratio: 16/10; height: auto; }
}

/* ---------- Fishing techniques: photo on top, text below, never cropped ----------
   The shared .left/.right editorial grid stretches the image to the height of its
   neighbouring text box and lets object-fit: cover eat the overflow. On this page the
   photos have to be shown whole, so each row is a plain vertical stack at every width:
   full-width photo at its natural 1200x774 ratio, copy underneath. ".left"/".right"
   here no longer mean sides - they only still drive the alternating light/dark card. */
.pg_peche > .left, .pg_peche > .right {
  display: block;
  margin-bottom: var(--space-5);
  padding-top: clamp(2.5rem, 6vw, 4.5rem); /* reserves clear ground for the ::before numeral */
}
.pg_peche .left picture, .pg_peche .right picture {
  display: block;
  height: auto;
  margin-bottom: var(--space-3);
}
.pg_peche .left picture img, .pg_peche .right picture img {
  width: 100%;
  height: auto;        /* natural ratio - nothing is cut */
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--radius-img); /* stands alone above its copy, so all four corners */
  box-shadow: 0 30px 80px rgba(7, 31, 63, 0.18);
}
/* the oversized chapter numeral now sits in the gap above the photo */
.pg_peche > .left::before, .pg_peche > .right::before {
  top: 0;
  right: 0;
  font-size: clamp(3.5rem, 8vw, 6rem);
}

@media (max-width: 600px) {
  /* no min-height override here: it forced the banner taller than the photo's own
     ratio and cropped it. The base 320px floor already fits the title overlay. */
  .pg-hero-copy { padding: var(--space-6) 0 var(--space-3); }
  .pg-eyebrow { letter-spacing: 0.3em; }
  .pg_boat > .left::before, .pg_boat > .right::before,
  .pg_info > .left::before, .pg_info > .right::before,
  .pg_news > .left::before, .pg_news > .right::before { font-size: clamp(3.5rem, 18vw, 5rem); top: -0.4em; }
}

/* ---------- CTA "read" links/buttons ---------- */
.read, a.read, button.read, .blog-card-cta, .blog-home-read {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: var(--space-2);
  padding: 0.85em 1.6em;
  background: var(--navy);
  color: var(--white) !important;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none !important;
  border: none; border-radius: 2px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.read:hover, a.read:hover, button.read:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--ocean); }

/* ---------- Home page sections ---------- */
main > section.about { padding-top: var(--space-6); }
main > section.about .title { text-align: left; font-size: clamp(2rem, 4vw, 2.9rem); }
main > section.about .title::after { margin-left: 0; }
.about > div.left, .about > div.right { display: block; }
.about { display: grid; grid-template-columns: 1fr; }
.about .left img, .about .right img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-3); }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }

main > section.boat .block, main > section.peche .block, main > section.info .block {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center;
  margin-bottom: var(--space-5);
}
main > section.boat .block .left, main > section.peche .block .left, main > section.info .block .left { order: 1; }
main > section.boat .block .right, main > section.peche .block .right, main > section.info .block .right { order: 2; }
main > section.boat .name, main > section.peche .name { font-weight: 700; color: var(--ocean); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; margin-bottom: 0.4em; }
main > section.boat img, main > section.peche img, main > section.info img {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
@media (max-width: 800px) {
  main > section.boat .block, main > section.peche .block, main > section.info .block { grid-template-columns: 1fr; }
  main > section.boat .block .left, main > section.boat .block .right,
  main > section.peche .block .left, main > section.peche .block .right,
  main > section.info .block .left, main > section.info .block .right { order: initial; }
}

main > section.video .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
main > section.video iframe { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); border: none; box-shadow: var(--shadow-sm); }
@media (max-width: 700px) { main > section.video .container { grid-template-columns: 1fr; } }

main > section.map iframe { width: 100%; border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

main > section.news .box {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3);
  align-items: flex-start; margin-bottom: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--gray-light);
}
main > section.news .box picture, main > section.news .box img { border-radius: var(--radius-md); aspect-ratio: 1/1; object-fit: cover; }
main > section.news .name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy); margin-bottom: 0.3em; }
main > section.news .click { text-align: center; margin-top: var(--space-3); }
@media (max-width: 600px) { main > section.news .box { grid-template-columns: 88px 1fr; } }

.blog-home-grid, .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.blog-home-card, .blog-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-home-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-home-card img, .blog-card img { aspect-ratio: 16/10; object-fit: cover; }
.blog-home-body, .blog-card-body { padding: var(--space-3); }
.blog-home-name, .blog-card-title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--navy); margin-bottom: 0.3em; }
.blog-home-meta, .blog-card-meta { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 0.6em; }
@media (max-width: 700px) { .blog-home-grid, .blog-grid { grid-template-columns: 1fr; } }

/* ---------- Blog post ---------- */
.blog-breadcrumb { font-size: 0.88rem; margin-bottom: var(--space-2); color: var(--ink-muted); }
.blog-breadcrumb a { color: var(--ocean); text-decoration: underline; }
.blog-meta { color: var(--ink-muted); font-size: 0.9rem; margin-bottom: var(--space-3); }
.blog-hero { margin-bottom: var(--space-4); }
.blog-hero img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.blog-content { max-width: 74ch; margin: 0 auto; font-size: 1.08rem; }

/* ---------- FAQ ---------- */
.faq-container { max-width: 76ch; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-light); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: none; border: none; cursor: pointer;
  padding: 1.1em 0.2em; text-align: left;
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy);
}
.faq-icon { flex-shrink: 0; font-size: 1.4rem; color: var(--ocean); }
.faq-answer { padding: 0 0.2em 1.2em; }

/* ---------- Related pages ---------- */
.related-pages { border-top: 1px solid var(--gray-light); }
.related-pages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.related-pages-grid a {
  display: block; padding: var(--space-3); text-align: center;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  text-decoration: none; font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related-pages-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ocean); }
@media (max-width: 700px) { .related-pages-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--gradient-deep);
  color: var(--white);
  padding-bottom: 45px;
    padding-top: 45px;
}
.site-footer .container { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-4); }
.site-footer h2 { color: var(--white); font-size: 1.2rem; }
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer a { color: var(--gray-light); text-decoration: underline; }
.site-footer a:hover { color: var(--sky); }
.footer-social { display: flex; gap: 0.6em; margin-top: var(--space-2); }
.footer-social a { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.12); align-items: center; justify-content: center; text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; stroke: var(--white); fill: none; }
.footer-logo { width: clamp(150px, 15vw, 200px); height: auto; margin-top: var(--space-3); }
@media (max-width: 1050px) { .footer-logo { margin-left: auto; margin-right: auto; } }
.footer-bottom {
  width: var(--container); margin: var(--space-4) auto 0; padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; justify-content: space-between;
}
@media (max-width: 800px) { .site-footer .container { grid-template-columns: 1fr; } }

/* ---------- Floating CTA cluster ---------- */
.floating-cta {
  position: fixed; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px);
  z-index: 1000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
}
.floating-cta a, .floating-cta button {
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 48px; padding: 0 1.1em;
  border-radius: 999px; border: none; cursor: pointer;
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  box-shadow: var(--shadow-md);
}
.floating-cta svg { width: 20px; height: 20px; stroke: currentColor; fill: none; flex-shrink: 0; }
.cta-quote { background: var(--gradient-deep); color: var(--white); }
.cta-contact { background: var(--navy); color: var(--white); }
.cta-whatsapp { background: #08655E; color: var(--white); }
.floating-cta a:hover, .floating-cta button:hover { filter: brightness(1.08); }

@media (max-width: 480px) {
  .floating-cta span.cta-label { display: none; }
  .floating-cta a, .floating-cta button { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .site-header .logo-link img { width: 110px;   transition: all 0.3s ease-in-out;}
  .lang-switch img { width: 18px; height: 12px;  transition: all 0.3s ease-in-out;}
  .social-links { gap: 0.6em; transition: all 0.3s ease-in-out;}
  .social-links a { width: 25px;  height: 25px;  transition: all 0.3s ease-in-out;}
  .social-links svg { width: 13px; height: 13px;  transition: all 0.3s ease-in-out;}
}

/* ---------- Slide-in contact / quote panels ---------- */
.slide-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(380px, 92vw);
  background: var(--white); box-shadow: var(--shadow-lg);
  z-index: 1100; padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}
.slide-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.slide-panel-header h2 { margin: 0; font-size: 1.4rem; }
.slide-panel-close {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gray-light);
  background: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.slide-panel-close svg { width: 18px; height: 18px; stroke: var(--navy); }
.field-group { display: flex; flex-direction: column; gap: 0.3em; margin-bottom: var(--space-2); }
.field-group label { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.field-group input, .field-group select, .field-group textarea {
  padding: 0.7em 0.9em; border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: var(--off-white);
}
.field-group input:focus, .field-group select:focus, .field-group textarea:focus {
  outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--ocean);
}
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.slide-panel .submit-btn {
  width: 100%; padding: 0.85em; border: none; border-radius: 999px;
  background: var(--gradient-deep); color: var(--white); font-weight: 700; cursor: pointer;
}
.slide-panel .note { font-size: 0.82rem; color: var(--ink-muted); margin-top: var(--space-2); }
.slide-panel .submit-btn[disabled] { opacity: 0.6; cursor: progress; }
/* Réponse du handler PHP, injectée par main.js après l'envoi */
.form-status {
  margin-top: var(--space-2); padding: 0.8em 1em; border-radius: var(--radius-sm);
  border-left: 3px solid var(--ocean); background: #F4F7FA;
  font-size: 0.9rem; line-height: 1.5; color: var(--ink);
}
.form-status.is-ok { border-left-color: #1F7A5A; background: #EFF7F3; }
.form-status.is-error { border-left-color: #B3453A; background: #FBF1EF; }

/* ---------- 404 ---------- */
.error-page { width: var(--container); margin: 0 auto; padding: var(--space-6) 0; text-align: center; }
.error-page .links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 700px) { .error-page .links-grid { grid-template-columns: 1fr; } }