/* ============================================================
   Fully's Lake — Design System
   Reconstruit pixel-perfect depuis la maquette Figma.
   Canvas de référence : 1440px.
   ============================================================ */

/* Polices : auto-hébergées via assets/css/fonts.css (enfilé en amont dans functions.php).
   L'ancien @import Google Fonts (render-blocking) a été retiré. */

/* Rend <picture> transparent à la mise en page : l'<img> se comporte comme s'il
   était l'enfant direct de son conteneur (préserve object-fit / position absolue). */
picture { display: contents; }

:root {
  /* Couleurs */
  --ink:        rgb(17, 24, 39);      /* #111827 texte/fond sombre */
  --ink-800:    rgb(31, 41, 55);      /* #1f2937 */
  --ink-700:    rgb(55, 65, 81);      /* #374151 */
  --gray-600:   rgb(75, 85, 99);      /* #4b5563 corps de texte */
  --gray-400:   rgb(156, 163, 175);
  --gray-300:   rgb(209, 213, 219);   /* #d1d5db footer */
  --gray-200:   rgb(229, 231, 235);
  --gray-100:   rgb(243, 244, 246);   /* #f3f4f6 bordures */
  --gray-50:    rgb(249, 250, 251);

  --lake:       rgb(25, 87, 115);     /* #195773 bleu signature */
  --lake-700:   rgb(12, 74, 110);     /* #0c4a6e */
  --lake-600:   rgb(2, 132, 199);
  --sky-500:    rgb(14, 165, 233);    /* #0ea5e9 */
  --sky-400:    rgb(56, 189, 248);    /* #38bdf8 */
  --sky-200:    rgb(186, 230, 253);   /* #bae6fd accent du titre hero */
  --sky-100:    rgb(240, 249, 255);   /* #f0f9ff */

  --green:      rgb(34, 197, 94);     /* #22c55e label */
  --gold:       rgb(179, 142, 60);    /* #b38e3c bouton or */
  --gold-dark:  rgb(150, 117, 45);

  --shadow-card:   0 3px 4px 0 rgba(0,0,0,.1);
  --shadow-soft:   0 8px 30px 0 rgba(0,0,0,.04);
  --shadow-lift:   0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-btn:    0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  --font:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-alt: "Poppins", var(--font);

  --maxw: 1440px;
  --pad: 80px;     /* gouttière latérale du contenu */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Conteneur principal — pleine largeur, fonds full-bleed, contenu centré */
.site { width: 100%; position: relative; overflow-x: clip; background: #fff; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }

/* ============================================================
   HEADER  (sticky : transparent en haut, BLANC au scroll)
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: box-shadow .3s ease;
}
/* Fond blanc sous la barre topbar uniquement pour la nav */
.site-header.scrolled::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 40px;        /* juste sous le topbar */
  height: 78px;     /* hauteur de la nav */
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.10);
  z-index: 0;
}
/* topbar : légèrement plus opaque au scroll */
.site-header.scrolled .topbar { background: rgba(8,29,52,.92); }
/* liens de nav en bleu quand fond blanc */
.site-header.scrolled .nav .menu a { color: var(--lake-700); }
.site-header.scrolled .nav .menu a:hover { color: var(--lake); }
.site-header.scrolled .nav .menu a.active { color: var(--lake-700); }
.site-header.scrolled .nav .menu a.active::after { background: var(--gold); }
/* bouton réservation en bleu foncé quand fond blanc */
.site-header.scrolled .nav .cta {
  background: var(--lake-700);
  color: #fff;
}
.site-header.scrolled .nav .cta:hover { background: var(--lake); }
/* logo toujours visible */
.site-header.scrolled .nav { position: relative; z-index: 1; }

/* barre utilitaire */
.topbar {
  height: 40px;
  background: rgba(8, 47, 73, .55);
  transition: background .3s ease;
}
.scrolled .topbar { background: rgba(0,0,0,.22); }
.topbar .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  color: #fff;
}
.topbar a { display: inline-flex; align-items: center; gap: 8px; opacity: .9; white-space: nowrap; }
.topbar a:hover { opacity: 1; }
.topbar .sep { flex: 1; }
.topbar i { color: var(--sky-400); font-size: 13px; width: 15px; text-align: center; }
.topbar .socials { display: flex; gap: 16px; }
.topbar .socials i { color: #fff; font-size: 15px; }

/* Sélecteur de langue (drapeaux FR/EN, à droite des réseaux sociaux) */
.topbar .lang-switch {
  display: flex; align-items: center; gap: 10px;
  margin-left: 6px; padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.25);
}
.topbar .lang-opt {
  display: inline-flex; align-items: center; gap: 6px;
  opacity: .55; transition: opacity .2s ease;
}
.topbar .lang-opt svg {
  width: 21px; height: 14px; border-radius: 2px; display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.topbar .lang-opt .lang-code {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff;
}
.topbar .lang-opt:hover { opacity: .9; }
.topbar .lang-opt.is-active { opacity: 1; }

/* navigation */
.nav {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav .logo { display: flex; align-items: center; }
.nav .logo img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }

.nav .menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.nav .menu a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}
.nav .menu a:hover { color: #fff; }
.nav .menu a.active { color: #fff; font-weight: 600; }
.nav .menu a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.nav .cta {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 10px 24px;
  border-radius: 9999px;
  background: #fff;
  color: var(--lake-700);
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-btn);
}
.nav .cta:hover { background: var(--sky-100); }

/* accent bleu signature (fins de titres) */
.accent { color: #175773; }

/* ============================================================
   GOUTTIÈRE LATÉRALE UNIVERSELLE
   Tous les blocs centrés gardent une marge sur les bords
   (corrige le "collé à gauche/droite" sur mobile & tablette).
   ============================================================ */
.cats-grid, .features-grid, .about-card, .bathy-card, .split, .sec-head,
.chips, .rules-grid, .rules-note, .contact-grid, .contact-map, .resa-grid,
.confort-box, .map-card, .poste-tabs, .poste-card {
  width: calc(100% - 2 * var(--pad));
  margin-left: auto;
  margin-right: auto;
}

/* ICÔNES — SVG inline injectés par site.js (remplacent Font Awesome, sans CDN) */
.svg-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.svg-icon svg { width: 1em; height: 1em; display: block; }
i[class*="fa-"] { font-style: normal; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 32px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lake { background: var(--lake); color: #fff; box-shadow: 0 10px 15px -3px rgba(14,165,233,.3), 0 4px 6px -4px rgba(14,165,233,.3); }
.btn-lake:hover { background: var(--lake-700); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.05);
}
.site-footer .cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.1fr;
  gap: 64px;
  padding: 65px 0 40px;
}
.site-footer .brand { display: flex; gap: 28px; align-items: flex-start; }
.site-footer .brand .brand-logo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; }
.site-footer .brand .brand-body { display: flex; flex-direction: column; }
.site-footer .brand p {
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  max-width: 300px;
  margin: 0 0 22px;
}
.site-footer .socials { display: flex; gap: 12px; }
.site-footer .socials a {
  width: 40px; height: 40px; border-radius: 9999px;
  background: rgba(255,255,255,.05);
  display: inline-flex; align-items: center; justify-content: center;
}
.site-footer .socials a:hover { background: rgba(255,255,255,.12); }
.site-footer .socials svg { width: 16px; height: 16px; fill: #fff; }

.site-footer h4 { font-size: 16px; font-weight: 700; margin-bottom: 22px; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.site-footer ul a { color: var(--gray-300); font-size: 14px; }
.site-footer ul a:hover { color: #fff; }

.site-footer .contact-list { display: flex; flex-direction: column; gap: 16px; }
.site-footer .contact-list li { display: flex; gap: 12px; color: var(--gray-300); font-size: 14px; line-height: 20px; }
.site-footer .contact-list i { color: var(--sky-400); font-size: 15px; flex: none; margin-top: 2px; width: 16px; text-align: center; }
.site-footer .socials i { color: #fff; font-size: 16px; }

.site-footer .legal {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gray-400);
}
.site-footer .legal .links { display: flex; gap: 28px; }
.site-footer .legal a:hover { color: #fff; }

/* ============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================ */
.section { padding: 80px 0; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--green);
}
h1, h2, h3 { line-height: 1.1; }

/* ============================================================
   CTA "Prêt pour l'aventure"
   ============================================================ */
.cta-band {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 86px 0 92px;
  background: linear-gradient(rgba(7,89,133,.7), rgba(7,89,133,.7)),
              url('../img/cta-water.jpg') center / cover no-repeat;
}
.cta-band h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; }
.cta-band p { font-size: 20px; font-weight: 700; margin: 0 auto 36px; max-width: 760px; }

/* ============================================================
   MENU MOBILE (hamburger + tiroir) — injecté par site.js
   ============================================================ */
.nav-toggle { display: none; }
.mobile-drawer, .mobile-backdrop { display: none; }

@media (max-width: 860px) {
  .nav .menu { display: none; }
  .nav > .cta { display: none; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto;
    border-radius: 10px; background: transparent;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2.5px; border-radius: 2px;
    background: #fff; margin: 0 auto; transition: transform .3s ease, opacity .2s ease, background .3s ease;
  }
  .site-header.scrolled .nav-toggle span { background: var(--lake-700); }
  body.nav-open .nav-toggle span { background: var(--lake-700); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .mobile-drawer {
    display: block;
    position: fixed; top: 110px; left: 0; right: 0; z-index: 49;
    background: #fff; padding: 8px 22px 26px;
    box-shadow: 0 20px 32px rgba(8,29,52,.18);
    transform: translateY(-135%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    max-height: calc(100dvh - 110px); overflow-y: auto;
  }
  body.nav-open .mobile-drawer { transform: translateY(0); }
  .mobile-drawer .menu { list-style: none; display: flex; flex-direction: column; }
  .mobile-drawer .menu li { border-bottom: 1px solid var(--gray-100); }
  .mobile-drawer .menu a {
    display: block; padding: 16px 4px; font-size: 17px; font-weight: 600;
    color: var(--ink-800); position: static;
  }
  .mobile-drawer .menu a.active { color: var(--lake); }
  .mobile-drawer .menu a.active::after { display: none; }
  .mobile-drawer .drawer-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 18px; padding: 15px; border-radius: 12px;
    background: var(--lake-700); color: #fff; font-weight: 700; font-size: 16px;
    box-shadow: 0 10px 20px -6px rgba(12,74,110,.5);
  }
  .mobile-backdrop {
    display: block; position: fixed; inset: 0; z-index: 48;
    background: rgba(8,29,52,.42); opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  body.nav-open .mobile-backdrop { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  /* le fond blanc au scroll suit la hauteur réelle de la nav mobile */
  .site-header.scrolled::before { top: 40px; height: 70px; }
}

/* ============================================================
   RESPONSIVE (tablette / mobile)
   ============================================================ */
@media (max-width: 1040px) {
  :root { --pad: 40px; }
  .nav .menu { gap: 22px; }
  .nav .menu a { font-size: 14px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 760px) {
  :root { --pad: 22px; }
  .topbar { font-size: 12px; }
  .topbar .wrap { gap: 16px; }
  .nav { height: 70px; }
  /* Footer compact : marque pleine largeur, puis Navigation + Contact côte à côte */
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding: 44px 0 28px; }
  .site-footer .brand { grid-column: 1 / -1; gap: 18px; align-items: center; }
  .site-footer .brand .brand-logo { width: 60px; height: 60px; }
  .site-footer .brand p { font-size: 13.5px; line-height: 21px; margin-bottom: 14px; max-width: none; }
  .site-footer h4 { font-size: 15px; margin-bottom: 14px; }
  .site-footer ul { gap: 10px; }
  .site-footer .contact-list { gap: 13px; }
  .site-footer .legal { flex-direction: column; gap: 12px; text-align: center; padding: 18px 0; }
  .site-footer .legal .links { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .cta-band { padding: 60px 0 64px; }
  .cta-band h2 { font-size: 30px; }
  .cta-band p { font-size: 16px; }
  .btn { font-size: 15px; padding: 13px 26px; }
}
@media (max-width: 520px) {
  /* topbar épurée : email masqué, on garde téléphone + réseaux (actionnables).
     NB : enfant direct (>) uniquement — sinon le sélecteur attrape aussi le
     premier lien des blocs imbriqués (drapeau FR du sélecteur de langue,
     icône Facebook des réseaux sociaux) et les masque à tort. */
  .topbar .wrap > a:first-child { display: none; }
  .topbar { font-size: 11.5px; }
  /* sélecteur de langue compact : drapeaux seuls */
  .topbar .lang-switch { gap: 8px; padding-left: 10px; margin-left: 2px; }
  .topbar .lang-opt .lang-code { display: none; }
}

/* ============================================================
   CALENDRIER SUR MESURE (composant partagé : accueil + réservation)
   Piloté par assets/js/flr-calendar.js
   ============================================================ */
.date-field { position: relative; }
.date-field .date-display { cursor: pointer; }
.cal-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  width: 300px; max-width: 92vw;
  background: #fff; border: 1px solid var(--gray-100); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: 14px;
}
.cal-pop[hidden] { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-size: 15px; font-weight: 700; color: var(--lake-700); text-transform: capitalize; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 30px; height: 30px; border: none; cursor: pointer; font-size: 12px;
  border-radius: 8px; background: var(--sky-100); color: var(--lake);
  display: flex; align-items: center; justify-content: center;
}
.cal-nav button:disabled { opacity: .4; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-wd { text-align: center; font-size: 11px; color: var(--gray-400); padding: 4px 0; }
.cal-day {
  height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border-radius: 9px; color: var(--ink-700);
  background: none; border: none; font-family: inherit; padding: 0;
}
.cal-day.is-selectable { cursor: pointer; }
.cal-day.is-selectable:hover { background: var(--sky-100); }
.cal-day.is-valid { color: var(--lake); font-weight: 600; box-shadow: inset 0 0 0 1.5px #cfe3ea; }
.cal-day.is-disabled { color: var(--gray-300); }
.cal-day.is-selected { background: var(--lake); color: #fff; font-weight: 600; box-shadow: none; }
.cal-hint {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray-100);
  font-size: 12px; color: var(--gray-600); display: flex; align-items: center; gap: 7px;
}
.cal-hint svg, .cal-hint i { color: var(--lake); }