/* ==========================================================================
   Complexe Aquatique de Sanary-sur-Mer — thème Bootstrap 5
   Palette tirée du logo : cyan, rose, indigo, sur un bleu marine profond.

   COMMENT S'Y RETROUVER
   - Les couleurs, arrondis et polices sont dans le bloc :root juste en dessous.
   - Chaque grand bloc commence par un titre encadré de tirets (---------- Titre ----------) :
     cherchez ce titre (Ctrl+F) pour y aller directement.

   SOMMAIRE
      1. Base
      2. Boutons : l'eau monte au survol
      3. Navigation
      4. Bandeau d'information (fermeture, travaux…)
      5. Hero
      6. Sections
      7. Bloc image + texte
      8. Cartes photo (école de natation)
      9. Tuiles activités
     10. Galerie détente
     11. Bandeau d'appel (soirée privée)
     12. Horaires (accordéon)
     13. Tarifs
     14. Hygiène & sécurité
     15. Contact
     16. Pages intérieures
     17. Pages intérieures : barre de navigation entre les offres
     18. Pages intérieures : fiche d’une offre (photo + horaires + tarifs)
     19. Pages intérieures : âge / durée, horaires des cours
     20. Pages intérieures : vignettes de tarifs (1 cours / forfait 10 / annuel)
     21. Détente : cartes de services
     22. Détente : bandeau chiffres
     23. Détente : cartes tarifs
     24. Bloc « Et aussi au Complexe Aquatique »
     25. Textes longs (mentions légales, règlement intérieur)
     26. Plan du site
     27. Pied de page
     28. Bouton retour en haut
     29. Apparition au défilement (discrète)
     30. Mouvement réduit
     31. Ajustements responsive
     32. Repères de bassin : carreaux, profondeurs peintes, ligne d’eau, bulles
     33. Horaires : période en cours
     34. Accueil : thermomètre « eau à 30 °C »
     35. Pages intérieures : barre de capsules (flèches, glisser à la souris)
     36. Hygiène & sécurité : tenue de bain
     37. Détente : précautions d'usage (sauna / hammam)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     COULEURS DE LA MARQUE  (changez ici : tout le site suit)
     ------------------------------------------------------------------ */
  --ink: #0b2a4a; /* bleu marine : textes, titres, boutons sombres          */
  --ink-soft: #3a5470; /* bleu marine adouci : textes secondaires                */
  --ink-deep: #061d35; /* marine très profond : hero, pied de page, menu mobile  */
  --sea: #14b4e8; /* cyan du logo : pastilles, icônes, accents              */
  --sea-deep: #0877ad; /* cyan foncé : liens, repères, tarifs                    */
  --pink: #c9307f; /* rose du logo : boutons principaux                      */
  --pink-deep: #a8226a; /* rose foncé : prix et horaires « roses »                */
  --pink-bright: #ee5fa7; /* rose clair : soulignement du menu, cœur du pied de page */
  --pink-soft: #fde7f1; /* rose très pâle : pastilles, fonds                      */
  --indigo: #4a3fa0; /* indigo du logo : tarifs, dégradés                      */

  /* Fonds de sections */
  --foam: #eaf7fd; /* bleu très pâle (sections alternées)                    */
  --mist: #f5fafd; /* quasi blanc bleuté (cartes, fonds discrets)            */
  --white: #fff;

  /* Bandeau d'information (fermeture, travaux…) */
  --notice-bg: #fff3cd;
  --notice-text: #5c4400;
  --notice-border: #f3dc8b;

  /* Bord de bassin décoratif (carreaux) */
  --tile-color: #a9e6f7;

  /* Traits et ombres (dérivés des couleurs ci-dessus) */
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--ink) 38%, transparent);
  --shadow-lg: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 34px 60px -24px color-mix(in srgb, var(--ink) 50%, transparent);

  /* ------------------------------------------------------------------
     FORMES ET TYPOGRAPHIE
     ------------------------------------------------------------------ */
  --r-md: 1rem; /* arrondi des petites cartes, champs */
  --r-lg: 1.75rem; /* arrondi des grandes cartes, photos */

  --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; /* titres */
  --font-body: "Figtree Variable", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* texte  */

  /* Menu : hauteur au repos / une fois la page défilée */
  --nav-h: 84px;
  --nav-h-solid: 64px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* courbe des animations */

  /* ------------------------------------------------------------------
     SURCHARGES DE BOOTSTRAP 5
     ------------------------------------------------------------------ */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--white);
  --bs-link-color: var(--sea-deep);
  --bs-link-hover-color: var(--pink);
  --bs-border-radius: var(--r-md);
}

/* ---------- Base ---------- */
.container {
  --bs-gutter-x: 3rem;
} /* >= marge négative des .row.g-5, évite tout débordement mobile */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h-solid) + 1rem);
}
body {
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
a {
  text-underline-offset: 0.2em;
}
::selection {
  background: var(--sea);
  color: var(--ink-deep);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 2000;
  background: var(--white);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Boutons : l'eau monte au survol ---------- */
.btn-sea,
.btn-outline-sea,
.btn-ghost {
  --b-color: var(--white);
  --b-bg: var(--pink);
  --b-fill: var(--ink);
  --b-border: var(--b-bg);
  --b-color-hover: var(--white);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--b-color);
  background: var(--b-bg);
  border: 2px solid var(--b-border);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink) 55%, transparent);
  transition:
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    transform 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}
.btn-sea::before,
.btn-outline-sea::before,
.btn-ghost::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -20%;
  right: -20%;
  background: var(--b-fill);
  transform: translateX(-105%) skewX(-18deg);
  transition: transform 0.5s var(--ease);
}
.btn-sea:hover,
.btn-outline-sea:hover,
.btn-ghost:hover,
.btn-sea:focus-visible,
.btn-outline-sea:focus-visible,
.btn-ghost:focus-visible {
  color: var(--b-color-hover);
  border-color: var(--b-fill);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -14px color-mix(in srgb, var(--ink) 65%, transparent);
}
.btn-sea:hover::before,
.btn-outline-sea:hover::before,
.btn-ghost:hover::before,
.btn-sea:focus-visible::before,
.btn-outline-sea:focus-visible::before,
.btn-ghost:focus-visible::before {
  transform: translateX(0) skewX(-18deg);
}
.btn-sea:active,
.btn-outline-sea:active,
.btn-ghost:active {
  transform: translateY(0) scale(0.97);
}

.btn-outline-sea {
  --b-color: var(--ink);
  --b-bg: transparent;
  --b-border: var(--ink);
  --b-fill: var(--ink);
  box-shadow: none;
}
.btn-ghost {
  --b-color: var(--white);
  --b-bg: color-mix(in srgb, var(--white) 6%, transparent);
  --b-border: color-mix(in srgb, var(--white) 70%, transparent);
  --b-fill: var(--white);
  --b-color-hover: var(--ink);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.btn-sea--cyan {
  --b-bg: var(--sea);
  --b-color: var(--ink-deep);
  --b-fill: var(--white);
  --b-color-hover: var(--ink-deep);
}
.btn-sea--light {
  --b-bg: var(--white);
  --b-color: var(--ink);
  --b-fill: var(--pink);
  --b-color-hover: var(--white);
}
.btn-sm-pill {
  padding: 0.55rem 1.15rem;
  font-size: 0.95rem;
}
.btn .fa-solid,
.btn .fa-regular {
  font-size: 0.95em;
}

/* ---------- Navigation ---------- */
.site-nav {
  --bs-navbar-color: var(--white);
  --bs-navbar-hover-color: var(--white);
  --bs-navbar-active-color: var(--white);
  padding: 0.9rem 0;
  transition:
    background-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    padding 0.35s var(--ease);
}
.site-nav .navbar-brand {
  padding: 0;
  margin-right: 1.25rem;
}
.site-nav .navbar-brand img {
  width: auto;
  height: 72px;
  transition:
    width 0.35s var(--ease),
    height 0.35s var(--ease);
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--ink-deep) 35%, transparent));
}
.site-nav.is-solid {
  --bs-navbar-color: var(--ink);
  --bs-navbar-hover-color: var(--ink);
  --bs-navbar-active-color: var(--ink);
  padding: 0.35rem 0;
  background: color-mix(in srgb, var(--white) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    0 1px 0 var(--line),
    0 14px 30px -22px color-mix(in srgb, var(--ink) 55%, transparent);
}
.site-nav.is-solid .navbar-brand img {
  width: auto;
  height: 56px;
  filter: none;
}

.site-nav .nav-link {
  position: relative;
  color: var(--white);
  font-weight: 650;
  padding: 0.55rem 0.95rem;
}
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.2rem;
  height: 3px;
  border-radius: 3px;
  background: var(--pink-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.site-nav .nav-link:hover::after,
.site-nav .nav-link:focus-visible::after,
.site-nav .nav-link.active::after,
.site-nav .nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* bouton menu (mobile) */
.nav-burger {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 16%, transparent);
  color: var(--white);
  display: inline-grid;
  place-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background-color 0.3s,
    color 0.3s;
}
.site-nav.is-solid .nav-burger {
  background: var(--foam);
  color: var(--ink);
}

/* menu mobile = tiroir */
@media (max-width: 991.98px) {
  .site-nav .offcanvas {
    background: var(--ink-deep);
    color: var(--white);
    width: min(86vw, 360px);
  }
  .site-nav .offcanvas {
    --bs-navbar-color: var(--white);
    --bs-navbar-hover-color: var(--white);
    --bs-navbar-active-color: var(--white);
  }
  .site-nav .offcanvas .nav-link {
    color: var(--white);
    font-size: 1.35rem;
    font-family: var(--font-display);
    font-weight: 600;
    padding: 0.7rem 0;
  }
  .site-nav .offcanvas .nav-link::after {
    left: 0;
    right: auto;
    width: 2.5rem;
  }
  .site-nav .offcanvas .btn-close {
    filter: invert(1);
    opacity: 0.9;
  }
  .site-nav .offcanvas-header img {
    width: 56px;
    height: 56px;
  }
}
@media (min-width: 992px) {
  .site-nav .offcanvas {
    background: transparent;
  }
  .site-nav.is-solid .nav-link {
    color: var(--ink);
  }
  .site-nav .navbar-nav {
    gap: 0.1rem;
  }
}

/* ---------- Bandeau d'information (fermeture, travaux…) ---------- */
.notice {
  position: relative;
  z-index: 3;
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  border: 1px solid var(--notice-border);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--white);
  background: var(--ink-deep);
  overflow: hidden;
  padding: calc(var(--nav-h) + 1.5rem) 0 8rem;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url(../img/banner2.jpg) 72% 40% / cover no-repeat;
  transform-origin: 70% 50%;
  animation: drift 26s ease-in-out infinite alternate;
}
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      98deg,
      color-mix(in srgb, var(--ink-deep) 94%, transparent) 0%,
      color-mix(in srgb, var(--ink-deep) 78%, transparent) 36%,
      color-mix(in srgb, var(--ink-deep) 18%, transparent) 72%,
      color-mix(in srgb, var(--ink-deep) 5%, transparent) 100%
    ),
    linear-gradient(0deg, color-mix(in srgb, var(--ink-deep) 55%, transparent), transparent 40%);
}
@keyframes drift {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.15) translate(-1.5%, -1%);
  }
}

.hero h1 .nowrap {
  white-space: nowrap;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
}
.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 34rem;
  color: color-mix(in srgb, var(--white) 92%, transparent);
}
.hero__sub {
  max-width: 34rem;
  color: color-mix(in srgb, var(--white) 80%, transparent);
}
.hero__sub a {
  color: var(--white);
  text-decoration-color: var(--pink-bright);
  text-decoration-thickness: 2px;
}
.hero__sub a:hover {
  color: var(--pink-bright);
}

/* Chorégraphie d'entrée : une seule, à l'ouverture de la page */
.hero .rise {
  opacity: 0;
  transform: translateY(26px);
  animation: rise 0.9s var(--ease) forwards;
}
.hero .rise:nth-child(1) {
  animation-delay: 0.1s;
}
.hero .rise:nth-child(2) {
  animation-delay: 0.25s;
}
.hero .rise:nth-child(3) {
  animation-delay: 0.4s;
}
.hero .rise:nth-child(4) {
  animation-delay: 0.55s;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}
.section--foam {
  background: var(--foam);
  --section-bg: var(--foam);
}
.section--mist {
  background: var(--mist);
  --section-bg: var(--mist);
}
.section--white {
  background: var(--white);
  --section-bg: var(--white);
}
.section--ink {
  background: var(--ink-deep);
  color: var(--white);
  --section-bg: var(--ink-deep);
}

.section-head {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.section-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin-bottom: 1rem;
}
.section-head p {
  color: var(--ink-soft);
  font-size: 1.15rem;
}
.section--ink .section-head p {
  color: color-mix(in srgb, var(--white) 80%, transparent);
}

/* pastilles (listes séparées par « | » dans l'ancien site) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.section-head .chips,
.page-hero .chips {
  justify-content: center;
}
.chips li {
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}
.section--foam .chips li {
  background: var(--white);
}
.page-hero .chips li {
  background: color-mix(in srgb, var(--white) 14%, transparent);
  color: var(--white);
  border-color: color-mix(in srgb, var(--white) 35%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- Bloc image + texte ---------- */
.split__media {
  position: relative;
  display: grid;
  place-items: center;
}
.split__media::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--sea), transparent 68%);
  opacity: 0.35;
  filter: blur(30px);
  z-index: 0;
}
.split__media img {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  50% {
    transform: translateY(-12px) rotate(-1deg);
  }
}
.split h2 {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  margin-bottom: 1rem;
}
.split .fine {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.split + .split {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.price-tag {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink-deep);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

/* ---------- Cartes photo (école de natation) ---------- */
.group-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 3rem 0 1.25rem;
}
.group-title:first-of-type {
  margin-top: 0;
}
.group-title::after {
  content: "";
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sea), transparent);
}

.photo-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: clamp(270px, 28vw, 320px);
  overflow: hidden;
  border-radius: var(--r-lg);
  color: var(--white);
  text-decoration: none;
  background: var(--ink);
  box-shadow: var(--shadow);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--ink-deep) 88%, transparent) 4%,
    color-mix(in srgb, var(--ink-deep) 0%, transparent) 45%,
    color-mix(in srgb, var(--ink-deep) 5%, transparent)
  );
  transition: opacity 0.4s;
}
.photo-card:hover::after { opacity: .1; }

.photo-card__body {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.5rem;
}
.photo-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}
.photo-card__text {
  display: block;
  font-size: 0.96rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--white) 88%, transparent);
}
a.photo-card:hover,
a.photo-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
a.photo-card:hover img,
a.photo-card:focus-visible img {
  transform: scale(1.07);
}
.photo-card--bare::after {
  display: none;
}

/* ---------- Tuiles activités ---------- */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  text-decoration: none;
  background: var(--sea);
  box-shadow: var(--shadow);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.tile__label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.45s var(--ease);
}
a.tile:hover img,
a.tile:focus-visible img {
  transform: scale(1.08);
}
a.tile:hover .tile__label,
a.tile:focus-visible .tile__label {
  background: var(--pink);
  color: var(--white);
  transform: translateY(-4px);
}

/* ---------- Galerie détente ---------- */
.rail-wrap {
  position: relative;
}
.rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail__item {
  flex: 0 0 clamp(190px, 62vw, 250px);
  scroll-snap-align: start;
  aspect-ratio: 9 / 14;
  border: 0;
  padding: 0;
  background: var(--sea);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  position: relative;
}
.rail__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.rail__item:hover img,
.rail__item:focus-visible img {
  transform: scale(1.07);
}
.rail-nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.round-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.25s var(--ease);
}
.round-btn:hover {
  background: var(--ink);
  color: var(--white);
  transform: scale(1.06);
}
.round-btn:active {
  transform: scale(0.94);
}

.lightbox .modal-content {
  background: transparent;
  border: 0;
}
.lightbox img {
  max-height: 86vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.lightbox .round-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  border-color: var(--white);
  color: var(--white);
  background: color-mix(in srgb, var(--ink-deep) 50%, transparent);
  z-index: 5;
}
.lightbox .round-btn:hover {
  background: var(--white);
  color: var(--ink);
}
.lightbox .lb-prev {
  left: 1rem;
}
.lightbox .lb-next {
  right: 1rem;
}
.lightbox .btn-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  filter: invert(1);
  opacity: 1;
  z-index: 5;
}

/* ---------- Bandeau d'appel (soirée privée) ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: url(../img/banner6.jpg) center / cover no-repeat;
  background-attachment: fixed;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ink-deep) 84%, transparent),
    color-mix(in srgb, var(--sea-deep) 55%, transparent)
  );
}
@media (hover: none), (max-width: 991.98px) {
  .cta-band {
    background-attachment: scroll;
  }
}
.cta-band h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  max-width: 22ch;
  margin: 0 auto 1.5rem;
}
.cta-band p {
  max-width: 40rem;
  margin: 0 auto 1rem;
  font-size: 1.15rem;
  color: color-mix(in srgb, var(--white) 92%, transparent);
}
.cta-band .btn {
  margin-top: 1.25rem;
}

/* ---------- Horaires (accordéon) ---------- */
.hours-accordion {
  --bs-accordion-border-color: transparent;
  --bs-accordion-bg: transparent;
  display: grid;
  gap: 1rem;
}
.hours-accordion .accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}
.hours-accordion .accordion-button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 1.3rem 1.6rem;
  color: var(--ink);
  background: var(--white);
  box-shadow: none;
  letter-spacing: -0.01em;
}
.hours-accordion .accordion-button:not(.collapsed) {
  background: var(--ink);
  color: var(--white);
}
.hours-accordion .accordion-button::after {
  filter: none;
  transition: transform 0.35s var(--ease);
}
.hours-accordion .accordion-button:not(.collapsed)::after {
  filter: invert(1) brightness(2);
}
.hours-accordion .accordion-body {
  padding: 1rem 1.6rem 1.6rem;
}

.hours {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.hours li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.8rem;
  border-bottom: 1px dashed var(--line);
}
.hours li:last-child {
  border-bottom: 0;
}
.hours .day {
  flex: 0 0 7.5rem;
  font-weight: 700;
}
.hours .time {
  flex: 1 1 auto;
}
.rose {
  display: inline-block;
  padding: 0.05rem 0.65rem;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink-deep);
  font-weight: 700;
}
.bleu {
  display: inline-block;
  padding: 0.05rem 0.65rem;
  border-radius: 999px;
  background: var(--foam);
  color: var(--sea-deep);
  font-weight: 700;
}
.hours li.is-today {
  background: var(--foam);
  border-bottom-color: transparent;
  box-shadow: inset 4px 0 0 var(--sea);
}
.hours li.is-today .day::after {
  content: "aujourd’hui";
  margin-left: 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--sea);
  color: var(--ink-deep);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}
.callout {
  margin: 0.75rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--mist);
  border-left: 4px solid var(--sea);
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.callout + .callout {
  margin-top: 0.75rem;
}
.callout strong {
  color: var(--ink);
}

/* ---------- Tarifs ---------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.8rem 1.6rem;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.price-card__icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1.1rem;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: var(--foam);
  color: var(--sea-deep);
  margin-bottom: 1rem;
}
.price-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.price-card__incl {
  color: var(--ink-soft);
  font-size: 0.98rem;
}
@media (min-width: 1400px) {
  .price-card__incl {
    min-height: 5.6em;
  }
}
.price-list {
  margin: 1rem 0 0;
  display: grid;
}
.price-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px dashed var(--line);
}
.price-list dt {
  font-weight: 500;
  color: var(--ink-soft);
}
.price-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
}
.price-card--pink {
  background: linear-gradient(180deg, var(--pink-soft), var(--white) 60%);
  border-color: color-mix(in srgb, var(--pink) 25%, transparent);
}
.price-card--pink .price-card__icon {
  background: var(--pink);
  color: var(--white);
}
.price-card--pink .price-list dd {
  color: var(--pink-deep);
}

/* ---------- Hygiène & sécurité ---------- */
.feature {
  height: 100%;
  padding: 1.8rem 1.6rem;
  border-radius: var(--r-lg);
  background: var(--mist);
  border: 1px solid var(--line);
  transition:
    background-color 0.35s,
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.feature:hover {
  background: var(--white);
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.feature__icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: var(--sea);
  color: var(--ink-deep);
  margin-bottom: 1.1rem;
  transition:
    background-color 0.35s,
    color 0.35s;
}
.feature:hover .feature__icon {
  background: var(--ink);
  color: var(--white);
}
.feature h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.feature p {
  margin: 0;
  color: var(--ink-soft);
}
.feature a {
  font-weight: 700;
}

/* ---------- Contact ---------- */
.contact-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.3rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    background-color 0.3s,
    color 0.3s;
}
.contact-tile i {
  flex: 0 0 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--foam);
  color: var(--sea-deep);
  font-size: 1.2rem;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.contact-tile span {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.contact-tile:hover {
  transform: translateY(-5px);
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.contact-tile:hover i {
  background: var(--pink);
  color: var(--white);
}

.form-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.form-card .form-control {
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--mist);
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    background-color 0.25s;
}
.form-card .form-control:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sea) 20%, transparent);
  background: var(--white);
}
.form-card .form-floating > label {
  color: var(--ink-soft);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  min-height: 1.5rem;
}

/* ---------- Pages intérieures ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  color: var(--white);
  text-align: center;
  padding: calc(var(--nav-h) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(6rem, 11vw, 9rem);
  background: var(--ink-deep) center / cover no-repeat;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink-deep) 78%, transparent),
    color-mix(in srgb, var(--ink-deep) 55%, transparent) 60%,
    color-mix(in srgb, var(--sea-deep) 40%, transparent)
  );
}
.page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.page-hero .lead {
  max-width: 44rem;
  margin: 0 auto 1.25rem;
  color: color-mix(in srgb, var(--white) 95%, transparent);
}
.page-hero .hero-lines p {
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
}
.page-hero--short {
  padding-bottom: clamp(5rem, 9vw, 7rem);
}

/* navigation entre les offres */
/* ---------- Pages intérieures : barre de navigation entre les offres ---------- */
.jumpnav {
  position: sticky;
  top: var(--nav-h-solid);
  z-index: 1020;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.jumpnav ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.jumpnav ul::-webkit-scrollbar {
  display: none;
}
.jumpnav a {
  display: block;
  white-space: nowrap;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--line);
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.jumpnav a:hover {
  background: var(--foam);
  border-color: var(--sea);
}
.jumpnav a.is-current {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* offre = photo + fiche */
/* ---------- Pages intérieures : fiche d’une offre (photo + horaires + tarifs) ---------- */
.offer {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  position: relative;
}
.offer--alt {
  background: var(--mist);
}
.offer__media {
  position: relative;
  margin: 0;
}
.offer__media::before {
  content: "";
  position: absolute;
  inset: 6% -3% -5% 3%;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--sea), var(--indigo));
  opacity: 0.22;
  transform: rotate(-2.2deg);
}
.offer--flip .offer__media::before {
  inset: 6% 3% -5% -3%;
  transform: rotate(2.2deg);
  background: linear-gradient(135deg, var(--pink-bright), var(--sea));
}
.offer__media img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.offer__card h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 0.75rem;
}
.offer__desc {
  font-size: 1.1rem;
  color: var(--ink-soft);
}

/* ---------- Pages intérieures : âge / durée, horaires des cours ---------- */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}
.facts > div {
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  background: var(--foam);
}
.facts dt {
  display: inline;
  font-weight: 600;
  color: var(--ink-soft);
}
.facts dt::after {
  content: " : ";
}
.facts dd {
  display: inline;
  margin: 0;
  font-weight: 700;
}

.schedule {
  margin: 1.5rem 0;
  padding: 1.2rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
}
.schedule h3 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.schedule h3 i {
  color: var(--sea-deep);
}
.schedule ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.schedule li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}
.schedule .d {
  flex: 0 0 6.2rem;
  font-weight: 700;
}
.schedule .t {
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  background: var(--foam);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.schedule .raw {
  color: var(--ink-soft);
}

/* ---------- Pages intérieures : vignettes de tarifs (1 cours / forfait 10 / annuel) ---------- */
.rates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.25rem 0 1.75rem;
}
.rate {
  display: flex;
  flex-direction: column;
  padding: 0.8rem 0.85rem;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
}
.rate small {
  flex: 1;
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  margin-bottom: 0.25rem;
}
.rate strong {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.45vw, 1.4rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .rate {
    padding: 0.9rem 1rem;
  }
  .rate small {
    font-size: 0.82rem;
  }
  .rate strong {
    font-size: 1.3rem;
  }
}
@media (max-width: 359.98px) {
  .rates {
    grid-template-columns: 1fr;
  }
}
.rate:nth-child(2) {
  background: var(--indigo);
}
.rate:nth-child(3) {
  background: var(--sea-deep);
}

/* services détente */
/* ---------- Détente : cartes de services ---------- */
.service {
  height: 100%;
  padding: 2rem 1.7rem;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.service:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.service .feature__icon {
  width: 3.8rem;
  height: 3.8rem;
  font-size: 1.5rem;
}
.service:hover .feature__icon {
  background: var(--pink);
  color: var(--white);
}
.service h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.service p {
  margin: 0;
  color: var(--ink-soft);
}
.service a {
  font-weight: 700;
  color: var(--pink);
}

/* bandeau chiffres */
/* ---------- Détente : bandeau chiffres ---------- */
.stats-band {
  position: relative;
  isolation: isolate;
  color: var(--white);
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: url(../img/explore.jpg) center / cover no-repeat;
}
.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ink-deep) 92%, transparent),
    color-mix(in srgb, var(--ink-deep) 55%, transparent)
  );
}
.stats-band h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.stats-band .kicker {
  font-size: 1.25rem;
  color: color-mix(in srgb, var(--white) 85%, transparent);
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
}
.stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  margin-top: 2rem;
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sea);
}

.stat strong .fa-infinity {
  font-size: 0.82em;
  line-height: 1;
  vertical-align: baseline;
}

.stat span {
  color: color-mix(in srgb, var(--white) 85%, transparent);
}

/* tarifs détente */
/* ---------- Détente : cartes tarifs ---------- */
.deal {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.deal:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.deal__top {
  padding: 1.9rem 1.7rem 1.4rem;
  text-align: center;
  background: var(--foam);
}
.deal__top i {
  font-size: 1.7rem;
  color: var(--sea-deep);
  margin-bottom: 0.6rem;
  display: block;
}
.deal__top h3 {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}
.deal__top p {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  min-height: 1.6em;
}
.deal__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.deal__price span {
  font-size: 1.4rem;
  font-weight: 700;
}
.deal__body {
  padding: 1.4rem 1.7rem 1.9rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.deal__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}
.deal__body li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
}
.deal__body li i {
  color: var(--sea-deep);
}
.deal__body .btn {
  align-self: center;
}
.deal--main {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-8px);
}
.deal--main:hover {
  transform: translateY(-14px);
}
.deal--main .deal__top {
  background: linear-gradient(160deg, var(--indigo), var(--ink));
}
.deal--main .deal__top i,
.deal--main .deal__body li i {
  color: var(--sea);
}
.deal--main .deal__top p {
  color: color-mix(in srgb, var(--white) 80%, transparent);
}
.deal--main .deal__body li {
  border-bottom-color: color-mix(in srgb, var(--white) 20%, transparent);
}

/* « et aussi… » */
/* ---------- Bloc « Et aussi au Complexe Aquatique » ---------- */
.also-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  color: var(--white);
  text-decoration: none;
  background: var(--ink);
  box-shadow: var(--shadow);
}
.also-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.also-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--ink-deep) 85%, transparent),
    color-mix(in srgb, var(--ink-deep) 10%, transparent) 65%
  );
}
.also-tile span {
  position: absolute;
  z-index: 1;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
}
.also-tile:hover img,
.also-tile:focus-visible img {
  transform: scale(1.1);
}

/* texte juridique */
/* ---------- Textes longs (mentions légales, règlement intérieur) ---------- */
.prose {
  max-width: 52rem;
  margin: 0 auto;
}
.prose p {
  margin-bottom: 1.1rem;
}
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--sea);
}
.prose .toc {
  padding: 1.3rem 1.6rem;
  border-radius: var(--r-md);
  background: var(--foam);
  margin-bottom: 2rem;
}
.prose .toc ol {
  margin: 0;
  padding: 0;
  columns: 2 16rem;
  column-gap: 2rem;
  list-style: none;
}
.prose .toc li {
  padding: 0.15rem 0;
  break-inside: avoid;
}
.prose .toc a {
  font-weight: 600;
}
.prose h2[id] {
  scroll-margin-top: calc(var(--nav-h-solid) + 1rem);
}

/* plan du site */
/* ---------- Plan du site ---------- */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.sitemap-grid .card-lite {
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: var(--mist);
  border: 1px solid var(--line);
}
.sitemap-grid h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.sitemap-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.sitemap-grid a {
  font-weight: 600;
}

/* ---------- Pied de page ---------- */
.site-footer {
  position: relative;
  background: var(--ink-deep);
  color: color-mix(in srgb, var(--white) 82%, transparent);
  padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
  --section-bg: var(--ink-deep);
}
.site-footer a {
  color: var(--white);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--pink-bright);
  text-decoration: underline;
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--white);
  margin-bottom: 1rem;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.site-footer .brand img {
  width: 84px;
  height: auto;
  margin-bottom: 1rem;
}
.social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.social a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: color-mix(in srgb, var(--white) 10%, transparent);
  transition:
    background-color 0.3s,
    transform 0.3s var(--ease);
}
.social a:hover {
  background: var(--pink);
  transform: translateY(-4px) rotate(-6deg);
  text-decoration: none;
  color: var(--white);
}
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--white) 15%, transparent);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
}
.footer-bottom .fa-heart {
  color: var(--pink-bright);
}

/* ---------- Bouton retour en haut ---------- */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--ink) 70%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease),
    visibility 0.3s,
    background-color 0.3s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--ink);
}

/* ---------- Apparition au défilement (discrète) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .hero .rise {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Ajustements responsive ---------- */
@media (max-width: 991.98px) {
  :root {
    --nav-h: 76px;
  }
  .hero {
    padding-bottom: 7rem;
  }
  .hero__bg {
    background-position: 66% 40%;
  }
  .hero__shade {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--ink-deep) 55%, transparent),
      color-mix(in srgb, var(--ink-deep) 85%, transparent) 70%
    );
  }
  .deal--main {
    transform: none;
  }
  .deal--main:hover {
    transform: translateY(-6px);
  }
  .hours .day {
    flex-basis: 100%;
  }
}
@media (max-width: 575.98px) {
  body {
    font-size: 1rem;
  }
  .btn-sea,
  .btn-outline-sea,
  .btn-ghost {
    width: 100%;
  }
  .hero .btn-row {
    display: grid;
    gap: 0.75rem;
  }
  .price-card__incl {
    min-height: 0;
  }
  .lightbox .lb-prev {
    left: 0.25rem;
  }
  .lightbox .lb-next {
    right: 0.25rem;
  }
}

/* ---------- Repères de bassin : carreaux, profondeurs peintes, ligne d’eau, bulles ---------- */

/* bord de bassin : deux rangées de carreaux + profondeurs peintes */
.edge,
.site-footer::before {
  --tile: 32px;
  background-color: var(--tile-color);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--white) 80%, transparent) 2px, transparent 2px),
    linear-gradient(0deg, color-mix(in srgb, var(--white) 80%, transparent) 2px, transparent 2px),
    linear-gradient(180deg, color-mix(in srgb, var(--sea-deep) 30%, transparent), color-mix(in srgb, var(--sea-deep) 0%, transparent) 70%);
  background-size:
    var(--tile) var(--tile),
    var(--tile) var(--tile),
    100% 100%;
}
.edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 -10px 24px -10px color-mix(in srgb, var(--ink-deep) 50%, transparent);
}
.edge span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: var(--sea-deep);
  opacity: 0.85;
  white-space: nowrap;
}
.edge span small {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 0.15em;
}
.edge span:nth-child(1) {
  left: 6%;
}
.edge span:nth-child(2) {
  left: 31%;
}
.edge span:nth-child(3) {
  left: 56%;
}
.edge span:nth-child(4) {
  left: 81%;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
}

/* ligne d'eau : le trait noir au fond du bassin, avec son T au mur */
.section-head h2::after,
.lane {
  content: "";
  display: block;
  width: 132px;
  height: 28px;
  margin: 1.1rem auto 0;
  background:
    linear-gradient(var(--ink), var(--ink)) left center / calc(100% - 6px) 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right center / 6px 28px no-repeat;
  border-radius: 3px;
}
.section--ink .section-head h2::after {
  filter: invert(1);
}

/* bulles (accueil) : quelques bulles seulement, lentes */
.bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bubbles i {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--white) 60%, transparent);
  background: radial-gradient(
    circle at 30% 28%,
    color-mix(in srgb, var(--white) 55%, transparent),
    color-mix(in srgb, var(--white) 6%, transparent) 55%
  );
  opacity: 0;
  animation: bubble var(--t) linear var(--d) infinite;
}
@keyframes bubble {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translate(calc(var(--sway) * 1px), -55vh);
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translate(0, -112vh);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bubbles {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .edge {
    height: 48px;
    --tile: 24px;
  }
  .edge span {
    font-size: 1.2rem;
  }
  .edge span:nth-child(2),
  .edge span:nth-child(3) {
    display: none;
  }
  .edge span:nth-child(4) {
    left: 62%;
  }
}

/* ---------- Horaires : période en cours ---------- */
.now-pill {
  margin-left: 0.75rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--sea);
  color: var(--ink-deep);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
}
.period-note {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}
.period-note i {
  margin-top: 0.25rem;
  color: var(--sea);
}

/* ---------- Accueil : thermomètre « eau à 30 °C » ---------- */
/* Décoratif. Pour changer le niveau : --lvl dans le HTML (0.75 = 30 °C sur une échelle de 15 à 35 °C).
   En dessous de 1200 px de large il passe à l'horizontale, sous les boutons. */
.thermo {
  --glass: color-mix(in srgb, var(--white) 16%, transparent);
  --glass-line: color-mix(in srgb, var(--white) 62%, transparent);
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 2rem;
  animation: thermo-in 0.9s var(--ease) 0.9s both;
  transform: scale(1);
  transform-origin: left center;
}
.thermo__scale {
  display: none;
}
.thermo__bulb {
  order: 0;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-right: -1.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-bright), var(--pink));
  border: 2px solid var(--glass-line);
  box-shadow: 0 0 22px color-mix(in srgb, var(--pink-bright) 55%, transparent);
  z-index: 1;
}

/* Thermomètre à l'horizontale (mobile / tablette) : graduations sous le tube */
@media (max-width: 1199.98px) {
  .thermo {
    --tw: min(220px, 52vw); /* même largeur que le tube */
    margin-bottom: 1.6rem;
  }
  .thermo__scale {
    display: block;
    position: absolute;
    left: 16px; /* début du tube (après l'ampoule) */
    top: calc(50% + 14px);
    width: var(--tw);
    height: 1.4rem;
  }
  .thermo__scale span {
    position: absolute;
    left: calc(var(--at) * 100%);
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--white) 80%, transparent);
  }
  .thermo__scale span::after {
    content: "";
    width: 2px;
    height: 6px;
    border-radius: 2px;
    background: var(--glass-line);
  }
}

.thermo__tube {
  order: 1;
  position: relative;
  width: var(--tw, min(220px, 52vw));
  height: 18px;
  border-radius: 0 9px 9px 0;
  background: var(--glass);
  border: 2px solid var(--glass-line);
  border-left: 0;
  overflow: hidden;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.thermo__mercury {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--lvl) * 100%);
  background: linear-gradient(90deg, var(--pink), var(--pink-bright));
  border-radius: 0 9px 9px 0;
  animation: mercury-x 2s var(--ease) 1.1s both;
}
.thermo__value {
  order: 2;
  margin-left: 0.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  text-shadow: 0 2px 14px color-mix(in srgb, var(--ink-deep) 60%, transparent);
}
.thermo__value sup {
  top: 0.02em;
  font-size: 0.8em;
  color: var(--pink-bright);
}
@keyframes thermo-in {
  from {
    opacity: 0;
  }
}
@keyframes mercury-x {
  from {
    width: 8%;
  }
}
@keyframes mercury-y {
  from {
    height: 6%;
  }
}

@media (min-width: 1200px) {
  .thermo {
    --h: 270px; /* hauteur du tube */
    position: absolute;
    z-index: 1;
    right: clamp(2rem, 7vw, 9rem);
    top: 50%;
    display: block;
    width: 200px;
    height: calc(var(--h) + 40px);
    margin: calc((var(--h) + 40px) / -2) 0 0;
    transform: scale(1);
    transform-origin: center;
  }
  .thermo__scale {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: var(--h);
  }
  .thermo__scale span {
    position: absolute;
    right: 0;
    bottom: calc(var(--at) * 100%);
    transform: translateY(50%);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--white) 80%, transparent);
  }
  .thermo__scale span::after {
    content: "";
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--glass-line);
  }
  .thermo__tube {
    position: absolute;
    left: 42px;
    top: 0;
    width: 26px;
    height: var(--h);
    border: 2px solid var(--glass-line);
    border-bottom: 0;
    border-radius: 13px 13px 0 0;
  }
  .thermo__mercury {
    inset: auto 0 0 0;
    width: auto;
    height: calc(var(--lvl) * 100%);
    background: linear-gradient(0deg, var(--pink), var(--pink-bright));
    border-radius: 11px 11px 0 0;
    animation-name: mercury-y;
  }
  .thermo__bulb {
    position: absolute;
    left: 30px;
    top: calc(var(--h) - 16px);
    width: 50px;
    height: 50px;
    margin: 0;
  }
  .thermo__value {
    position: absolute;
    left: 88px;
    top: calc(var(--h) * (1 - var(--lvl)));
    margin: 0;
    transform: translateY(-50%);
    font-size: clamp(3rem, 4.2vw, 4rem);
  }
  .thermo__value::before {
    content: "";
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--pink-bright);
  }
}

/* ---------- Pages intérieures : barre de capsules (flèches, glisser à la souris) ---------- */
/* Les flèches sont ajoutées par js/site.js quand la barre dépasse la largeur de l'écran. */
.jumpnav .container {
  position: relative;
}
.jumpnav ul {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
@media (hover: hover) {
  .jumpnav.can-prev ul,
  .jumpnav.can-next ul {
    cursor: grab;
  }
}
.jumpnav ul.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}
.jumpnav ul.is-dragging a {
  pointer-events: none;
}
.jumpnav__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 0.8rem;
  box-shadow: var(--shadow);
  transform: translateY(-50%);
  transition:
    background-color 0.25s,
    color 0.25s,
    transform 0.25s var(--ease);
}
.jumpnav__btn--prev {
  left: 0.25rem;
}
.jumpnav__btn--next {
  right: 0.25rem;
}
.jumpnav__btn:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-50%) scale(1.08);
}
.jumpnav.can-prev .jumpnav__btn--prev,
.jumpnav.can-next .jumpnav__btn--next {
  display: grid;
}
@media (hover: none) {
  .jumpnav .jumpnav__btn {
    display: none;
  }
}

/* ---------- Hygiène & sécurité : tenue de bain ---------- */
.dress-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin:  2.5rem 0 0;
  padding: 1.5rem 2rem;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--pink-soft), var(--white) 85%);
  border: 1px solid color-mix(in srgb, var(--pink) 28%, transparent);
  border-left: 6px solid var(--pink);
}
.dress-code__title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dress-code__title i {
  flex: 0 0 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.4rem;
  background: var(--pink);
  color: var(--white);
}
.dress-code__title h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.dress-code__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dress-code__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
}
.dress-code__list i {
  color: var(--pink-deep);
  font-size: 1.3rem;
}
.dress-code__list strong {
  font-family: var(--font-display);
}
.dress-code__list span {
  color: var(--ink-soft);
  font-weight: 600;
}

/* ---------- Détente : précautions d'usage (sauna / hammam) ---------- */
.precautions {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  max-width: 52rem;
  margin: 2.5rem auto 0;
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-lg);
  background: var(--notice-bg);
  color: var(--notice-text);
  border: 1px solid var(--notice-border);
}
.precautions > i {
  flex: 0 0 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.25rem;
  background: var(--white);
  color: var(--pink-deep);
}
.precautions h3 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  color: inherit;
}
.precautions p {
  margin: 0;
}

/* Logo du menu : 100 px de haut sur grand écran, largeur automatique (ratio conservé) */
@media (min-width: 992px) {
  .site-nav .navbar-brand img {
    height: 100px;
  }
  .site-nav.is-solid .navbar-brand img {
    height: 64px;
  }
}