/* Navette Girolata — page d'accueil.
   Chargée par index.php seulement, après app.css.

   Le mouvement ne s'applique que sous html.lx-motion, posé par
   assets/js/landing.js quand le visiteur n'a pas demandé à réduire les
   animations. Sans script, tout est affiché d'emblée. */

.is-landing {
  --lx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lx-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --lx-deep: #0b1a2c;
  --lx-wrap: 1160px;
}

/* --- Conteneurs ------------------------------------------------------------ */

.page--full {
  max-width: none;
  padding: 0 0 calc(28px + var(--safe-bottom));
}

.site-hero + .page--full {
  padding-top: 0;
}

.page--full.page--with-dock {
  padding-bottom: 24px;
}

.lx-wrap {
  width: 100%;
  max-width: var(--lx-wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 760px) {
  .lx-wrap {
    padding: 0 32px;
  }
}

/* --- Hero vidéo ------------------------------------------------------------ */

.is-landing .site-hero--video {
  background-color: var(--lx-deep);
}

.is-landing .site-hero--video::before {
  background: linear-gradient(
    to bottom,
    rgba(8, 20, 36, 0.62) 0%,
    rgba(8, 20, 36, 0.1) 24%,
    rgba(8, 20, 36, 0) 40%,
    rgba(8, 20, 36, 0.42) 64%,
    rgba(8, 20, 36, 0.86) 100%
  );
}

/* Parallaxe : le script pose --hero-p (0 en haut, 1 quand le hero est sorti). */
.is-landing .site-hero__video {
  scale: calc(1.06 + var(--hero-p, 0) * 0.12);
  translate: 0 calc(var(--hero-p, 0) * 7%);
}

.is-landing .site-hero__content {
  max-width: none;
  padding: 12px var(--gutter) 132px;
  transform: translate3d(0, calc(var(--hero-p, 0) * -80px), 0);
  opacity: calc(1 - var(--hero-p, 0) * 1.5);
}

.lx-hero {
  width: 100%;
  max-width: var(--lx-wrap);
  margin: 0 auto;
  color: #fff;
}

.lx-hero__kicker {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
}

.lx-hero__squiggle {
  width: 74px;
  height: 10px;
}

.lx-hero__squiggle path {
  stroke-dasharray: 140;
  stroke-dashoffset: 0;
}

.lx-hero__title {
  margin-top: 14px;
  max-width: 13ch;
  font-size: clamp(44px, 12.4vw, 108px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(8, 20, 36, 0.35);
}

/* Chaque mot glisse hors d'un masque. Le léger débord bas garde les jambages. */
.lx-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  vertical-align: top;
}

.lx-word__in {
  display: inline-block;
}

.lx-hero__facts {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lx-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 9px;
  border-radius: var(--radius-pill);
  background: rgba(8, 20, 36, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.lx-hero__facts svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.lx-hero__actions {
  margin-top: 26px;
  display: grid;
  gap: 10px;
}

@media (min-width: 560px) {
  .lx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* CTA bleu de réservation : dégradé, reflet qui passe, pulse conservé. */
.lx-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  padding: 0 26px;
  gap: 10px;
  font-size: 17px;
  background: linear-gradient(135deg, #3d7ab8 0%, var(--navy) 55%, var(--navy-700) 100%);
  color: #fff;
}

.lx-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.34) 50%, transparent 65%);
  transform: translateX(-120%);
}

.lx-arrow {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform 0.35s var(--lx-ease);
}

a:hover > .lx-arrow,
a:focus-visible > .lx-arrow {
  transform: translateX(4px);
}

[dir="rtl"] .lx-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] a:hover > .lx-arrow,
[dir="rtl"] a:focus-visible > .lx-arrow {
  transform: scaleX(-1) translateX(4px);
}

.lx-ghost {
  min-height: 58px;
  padding: 0 24px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lx-ghost:hover,
.lx-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

/* Indice de défilement, entre les boutons et les vagues. */
.lx-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 74px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  transform: translateX(-50%);
}

.lx-scrollcue__line {
  position: relative;
  width: 2px;
  height: 36px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.lx-scrollcue__line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  border-radius: 2px;
  background: #fff;
  transform: translateY(-100%);
}

@media (min-width: 760px) {
  .is-landing .site-hero--video .topbar__inner {
    max-width: var(--lx-wrap);
    padding: 0 14px;
  }

  .is-landing .site-hero__content {
    padding: 12px 32px 150px;
  }

  .lx-hero__facts li {
    font-size: 17px;
  }

  .lx-scrollcue {
    bottom: 92px;
  }

}

/* --- Bandeau défilant des ports -------------------------------------------- */

.lx-marquee {
  direction: ltr;
  padding: 26px 0 6px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.lx-marquee__row {
  display: flex;
  width: max-content;
  animation: lx-marquee 46s linear infinite;
}

.lx-marquee__row--outline {
  animation-direction: reverse;
  animation-duration: 58s;
}

.lx-marquee.is-driven .lx-marquee__row {
  animation: none;
  will-change: transform;
}

.lx-marquee__set {
  flex: none;
  display: flex;
  align-items: center;
}

.lx-marquee__item {
  padding: 0 0.16em;
  font-size: clamp(48px, 15vw, 136px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy-900);
}

.lx-marquee__row--outline .lx-marquee__item {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--navy) 50%, transparent);
}

.lx-marquee__star {
  flex: none;
  padding: 0 0.3em;
  font-size: clamp(20px, 5.4vw, 48px);
  color: var(--orange);
}

.lx-marquee__row--outline .lx-marquee__star {
  color: color-mix(in srgb, var(--sky) 70%, transparent);
}

@keyframes lx-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --- Sections -------------------------------------------------------------- */

.lx-section {
  padding: 60px 0;
}

.lx-section--tight {
  padding: 4px 0 56px;
}

@media (min-width: 960px) {
  .lx-section {
    padding: 112px 0;
  }

  .lx-section--tight {
    padding: 8px 0 96px;
  }
}

.lx-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 26px;
}

.lx-head__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--orange);
}

.lx-head__num::after {
  content: "";
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.lx-title {
  font-size: clamp(36px, 9.6vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy-900);
  text-wrap: balance;
}

.lx-lead {
  max-width: 44ch;
  font-size: 18px;
  line-height: 1.55;
  color: #34475b;
  text-wrap: pretty;
}

.lx-winter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--sky-100);
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 700;
}

.lx-winter svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* --- Passages déjà prévus : tableau des départs ----------------------------
   Pensé d'abord pour le téléphone et pour des yeux fatigués : fond clair,
   texte foncé (contraste de 7:1 et plus), gros caractères, cibles de 48 px,
   toutes les lignes visibles sans défilement caché. */

.lx-passages__grid {
  display: grid;
  gap: 4px;
}

@media (min-width: 960px) {
  .lx-passages__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }

  .lx-passages .lx-head {
    position: sticky;
    top: 48px;
    margin-bottom: 0;
  }
}

.lx-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 6px;
  padding: 8px;
  border-radius: 26px;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 0 0 1px #d8e2ec,
    0 26px 50px -30px rgba(20, 40, 66, 0.5);
}

.lx-board--empty {
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  font-size: 18px;
  line-height: 1.5;
}

/* Onglets en grille : chaque ligne reste visible, rien ne déborde à droite. */
.lx-board .planned__nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 20px;
  background: #e8eef4;
  overflow: visible;
}

.lx-ink {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  background: var(--navy-900);
  box-shadow: 0 8px 18px -8px rgba(20, 40, 66, 0.6);
  opacity: 0;
}

.lx-board.has-ink .lx-ink {
  opacity: 1;
}

.lx-board.has-ink.ink-ready .lx-ink {
  transition:
    transform 0.5s var(--lx-expo),
    width 0.5s var(--lx-expo),
    height 0.5s var(--lx-expo);
}

.lx-board .planned__tab {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 16px;
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: start;
  white-space: normal;
  transition: color 0.3s ease;
}

.lx-board .planned__tab[aria-selected="true"] {
  background: var(--navy-900);
  color: #fff;
  box-shadow: none;
}

.lx-board.has-ink .planned__tab[aria-selected="true"] {
  background: transparent;
}

.lx-board .planned__tab:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.lx-board .planned__dot {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 2px #fff;
}

.lx-board .planned__tab-label {
  flex: 1 1 auto;
}

.lx-board .planned__count {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: #fff;
  color: var(--navy-900);
  box-shadow: inset 0 0 0 1.5px #c3d1de;
  font-size: 14px;
  line-height: 26px;
}

.lx-board .planned__tab[aria-selected="true"] .planned__count {
  background: #fff;
  color: var(--navy-900);
  box-shadow: none;
}

.lx-board .planned__panel {
  padding: 0 4px 4px;
}

.lx-board .planned__empty {
  margin: 14px 8px;
  font-size: 17px;
  color: var(--ink);
}

.lx-board .planned__day {
  margin: 18px 8px 2px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy-900);
}

.lx-board .planned__day::first-letter {
  text-transform: uppercase;
}

.lx-board .planned__day:first-child {
  margin-top: 12px;
}

.lx-board .planned__row + .planned__row {
  border-top: 1px solid #e0e7ee;
}

/* Une ligne : à gauche l'heure, le trajet et les places ; à droite l'action. */
.lx-board .planned__hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  color: var(--ink);
}

.lx-board .planned__hit:hover,
.lx-board .planned__hit:active,
.lx-board .planned__hit.is-pressed {
  background: #eef3f8;
}

.lx-board .planned__hit:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: -3px;
  background: #eef3f8;
}

/* app.css estompe un passage fermé : illisible pour une vue qui baisse. */
.lx-board .planned__hit--off {
  opacity: 1;
}

.lx-board .planned__lead {
  gap: 6px;
}

.lx-board .planned__way {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: #2a3c50;
}

.planned__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lx-board .planned__left {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.lx-board .planned__off {
  max-width: 9.5em;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: #edf1f5;
  color: #2f4256;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.lx-board .planned__book {
  gap: 6px;
  min-height: 48px;
  padding: 0 14px 0 18px;
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 20px -12px rgba(20, 40, 66, 0.9);
}

.lx-board .planned__book .lx-arrow {
  width: 18px;
  height: 18px;
}

.lx-board .planned__hit:hover .lx-arrow {
  transform: translateX(3px);
}

[dir="rtl"] .lx-board .planned__hit:hover .lx-arrow {
  transform: scaleX(-1) translateX(3px);
}

.lx-board .planned__more {
  width: 44px;
  height: 44px;
  box-shadow:
    0 0 0 1.5px #c3d1de,
    var(--shadow-sm);
}

.lx-board .planned__more-icon {
  width: 22px;
  height: 22px;
}

/* À la souris, la molette repasse à la page une fois la liste au bout
   (sur téléphone, le défilement reste contenu dans la liste). */
@media (hover: hover) and (pointer: fine) {
  .lx-board .planned__scroll {
    overscroll-behavior: auto;
  }
}

/* Heure en tuiles de panneau à volets : chiffres blancs sur bleu nuit. */
.lx-board .planned__time {
  font-size: 26px;
  color: #fff;
}

.lx-flaps__tiles {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  perspective: 300px;
}

.lx-flap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.02em;
  height: 1.34em;
  border-radius: 7px;
  background: linear-gradient(to bottom, #24496f 0 50%, #1b3a5c 50% 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lx-flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.45);
}

.lx-flap--sep {
  width: 0.66em;
  background: none;
  box-shadow: none;
  color: #b8410f;
  font-size: 0.7em;
  font-weight: 900;
}

.lx-flap--sep::after {
  display: none;
}

/* Passage fermé ou trop tard : tuiles grises, chiffres toujours lisibles. */
.planned__hit--off .lx-flap {
  background: linear-gradient(to bottom, #e4eaf0 0 50%, #dae2ea 50% 100%);
  box-shadow: inset 0 -1px 0 rgba(20, 40, 66, 0.1);
  color: #2f4256;
}

.planned__hit--off .lx-flap::after {
  background: rgba(20, 40, 66, 0.14);
}

.planned__hit--off .lx-flap--sep {
  background: none;
  color: #2f4256;
}

.lx-flap.is-flipping {
  animation: lx-flip 0.11s linear infinite;
}

@keyframes lx-flip {
  50% {
    transform: rotateX(-80deg);
  }
}

/* Remplissage du passage. */
.lx-gauge {
  position: relative;
  flex: none;
  width: 56px;
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #dfe7ef;
}

.lx-gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--navy);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
}

[dir="rtl"] .lx-gauge::before {
  transform-origin: right center;
}

@media (max-width: 400px) {
  .lx-board .planned__time {
    font-size: 23px;
  }

  .lx-board .planned__book {
    padding: 0 16px;
  }

  .lx-board .planned__book .lx-arrow {
    display: none;
  }
}

/* --- Habitants ------------------------------------------------------------- */

.lx-habitant {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 24px;
  padding: 30px 22px 22px;
  border-radius: 32px;
  background: linear-gradient(135deg, #c24f2c 0%, #9c3b38 52%, #6e2a4c 100%);
  color: #fff;
  box-shadow: 0 34px 70px -30px rgba(156, 59, 56, 0.75);
}

.lx-habitant__blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
  pointer-events: none;
}

.lx-habitant__blob--a {
  top: -110px;
  right: -70px;
  width: 280px;
  height: 280px;
  background: var(--orange);
}

.lx-habitant__blob--b {
  bottom: -120px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: var(--plum);
}

.lx-habitant__kicker {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffd9c2;
}

.lx-habitant__title {
  margin-top: 10px;
  font-size: clamp(32px, 8.4vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lx-habitant__text {
  margin-top: 14px;
  max-width: 42ch;
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}

.lx-habitant__actions {
  display: grid;
  gap: 10px;
}

.lx-habitant__cta {
  gap: 10px;
  min-height: 58px;
  font-size: 17px;
  background: #fff;
  color: #9c3b38;
  box-shadow: 0 12px 26px -10px rgba(60, 12, 20, 0.55);
}

.lx-habitant__cta:hover,
.lx-habitant__cta:focus-visible {
  background: #fff6f0;
  color: #9c3b38;
}

.lx-habitant__login {
  min-height: 54px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.lx-habitant__login:hover,
.lx-habitant__login:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

@media (min-width: 860px) {
  .lx-habitant {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
    padding: 52px 52px 48px;
  }
}

/* --- À bord : la fenêtre s'ouvre au défilement ----------------------------- */

.lx-aboard {
  padding: 8px 0 12px;
}

.lx-aboard__frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: min(122vw, 86svh);
  margin: 0 auto;
  overflow: hidden;
  background: var(--lx-deep) url("../video/landing-aboard-poster.jpg") center / cover no-repeat;
  clip-path: inset(
    calc((1 - var(--open, 1)) * 9%) calc((1 - var(--open, 1)) * 7%)
    round calc((1 - var(--open, 1)) * 40px)
  );
}

.lx-aboard__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 20, 36, 0.78) 0%, rgba(8, 20, 36, 0.12) 46%, rgba(8, 20, 36, 0) 70%);
  pointer-events: none;
}

.lx-aboard__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: calc(1.2 - var(--open, 1) * 0.2);
}

.lx-aboard__caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--gutter) 34px;
  color: #fff;
}

.lx-aboard__kicker {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.lx-aboard__title {
  margin-top: 10px;
  max-width: 13ch;
  font-size: clamp(34px, 9.6vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

@media (min-width: 960px) {
  .lx-aboard {
    padding: 0 32px;
  }

  .lx-aboard__frame {
    max-width: var(--lx-wrap);
    height: min(740px, 82svh);
    border-radius: 32px;
    clip-path: inset(
      calc((1 - var(--open, 1)) * 10%) calc((1 - var(--open, 1)) * 12%)
      round 32px
    );
  }

  .lx-aboard__caption {
    padding: 0 56px 52px;
  }
}

/* --- Lignes et tarifs : plan + horaires ------------------------------------ */

.lx-lines__grid {
  display: grid;
  gap: 22px;
}

@media (min-width: 960px) {
  .lx-lines__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: start;
  }

  .lx-map {
    position: sticky;
    top: 32px;
  }
}

/* Plan des lignes : la mer en bleu, la terre en beige (côte OpenStreetMap),
   les lignes en traits pleins, les ports en points blancs cerclés. */
.lx-map {
  margin: 0;
  overflow: hidden;
  padding: 0 0 14px;
  border-radius: 28px;
  background: #fff;
  color: var(--navy);
  box-shadow:
    inset 0 0 0 1px rgba(39, 76, 119, 0.1),
    0 20px 50px -28px rgba(20, 40, 66, 0.45);
}

.lx-map__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh;
  background: linear-gradient(170deg, #d9eaf6 0%, #bcd6ea 100%);
}

.lx-map__land {
  fill: #efe7d3;
  stroke: #a99a76;
  stroke-width: 1;
  stroke-linejoin: round;
}

.lx-map__compass circle {
  fill: rgba(255, 255, 255, 0.85);
  stroke: rgba(20, 40, 66, 0.25);
  stroke-width: 1;
}

.lx-map__needle {
  fill: #c2410c;
}

.lx-map__needle-tail {
  fill: rgba(20, 40, 66, 0.45);
}

.lx-map__compass text {
  font-size: 10px;
  font-weight: 800;
  fill: var(--navy-900);
}

.lx-map__route {
  fill: none;
  stroke: var(--line);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lx-map__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.lx-map__dot {
  fill: #fff;
  stroke: var(--navy-900);
  stroke-width: 2.6;
}

.lx-map__label {
  font-size: 16px;
  font-weight: 800;
  fill: var(--navy-900);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4.5px;
  stroke-linejoin: round;
}

/* « Col de la Croix · Parking » sous Vignola, avec le panneau P. */
.lx-map__sub {
  font-size: 12.5px;
  font-weight: 700;
  fill: #26384c;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.lx-map__parking rect {
  fill: #1f5fae;
  stroke: #fff;
  stroke-width: 1.5;
}

.lx-map__parking text {
  font-size: 11px;
  font-weight: 900;
  fill: #fff;
}

.lx-map__port.is-idle {
  opacity: 0.45;
}

.lx-map__boat-body {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: lx-bob 2.8s ease-in-out infinite;
}

@keyframes lx-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-1.6px) rotate(4deg);
  }
}

.lx-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: #2a3c50;
}

.lx-map__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lx-map__key::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

/* Trajet avec escale : pas de trait à lui, il emprunte les deux autres lignes. */
.lx-map__key--via::before {
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px);
}

.lx-map__key small {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.lx-map__credit {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: end;
}

.lx-folds {
  gap: 12px;
}

.lx-folds .line-fold {
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(20, 40, 66, 0.04),
    0 14px 34px -18px rgba(20, 40, 66, 0.3);
}

.lx-folds .line-fold__toggle {
  min-height: 76px;
  padding: 14px 16px 14px 18px;
}

.lx-folds .line-fold__name {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.lx-folds .line-way__book {
  gap: 8px;
}

.lx-folds .line-way__book .lx-arrow {
  width: 18px;
  height: 18px;
}

.lx-folds .line-fold__meta {
  font-size: 15px;
  color: #34475b;
}

.lx-folds .line-fold__chevron {
  width: 26px;
  height: 26px;
  color: var(--navy);
}

.lx-folds .line-way__badge {
  font-size: 12px;
}

.lx-folds .line-way__label {
  font-size: 17px;
}

.lx-folds .line-way__group dt {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #34475b;
}

.lx-folds .time-chip {
  min-height: 36px;
  padding: 0 11px;
  font-size: 16px;
}

.lx-folds .line-way__note {
  font-size: 15px;
  color: #34475b;
}

/* Ligne sans départ régulier en ce moment, et passages ajoutés par le pilote. */
.lx-folds .line-way__none {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: #34475b;
}

.lx-folds .line-way__extra {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--line-soft, #eef3f8);
}

.lx-folds .line-way__extra-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #34475b;
}

.lx-folds .line-way__extra-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-folds .line-way__extra-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 6px 6px 6px 12px;
  border-radius: 12px;
  background: #fff;
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(20, 40, 66, 0.1);
}

.lx-folds .line-way__extra-link:hover,
.lx-folds .line-way__extra-link:focus-visible {
  box-shadow: 0 0 0 2px var(--line, var(--navy));
}

.is-landing .dock__summary {
  font-size: 15px;
  color: #34475b;
}

.is-landing .dock__summary strong {
  font-size: 17px;
  color: var(--navy-900);
}

.is-landing .landing-dock__cta {
  min-height: 52px;
  font-size: 17px;
}

/* --- Mouvement ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .lx-scrollcue__line::after {
    animation: lx-cue 1.9s var(--lx-ease) infinite;
  }

  .lx-cta::after {
    animation: lx-shine 5s var(--lx-ease) 2.6s infinite;
  }

  .lx-habitant__blob--a {
    animation: lx-blob 14s ease-in-out infinite alternate;
  }

  .lx-habitant__blob--b {
    animation: lx-blob 18s ease-in-out infinite alternate-reverse;
  }
}

@keyframes lx-cue {
  to {
    transform: translateY(260%);
  }
}

@keyframes lx-shine {
  0% {
    transform: translateX(-120%);
  }
  28%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes lx-blob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-36px, 24px) scale(1.18);
  }
  100% {
    transform: translate(24px, -12px) scale(0.94);
  }
}

/* Entrée du hero, une fois le splash parti. */
.lx-motion .site-hero--video .lx-word__in {
  transform: translate3d(0, 112%, 0) rotate(7deg);
}

.lx-motion body:not(.has-splash) .site-hero--video .topbar {
  animation: lx-fade-down 0.9s var(--lx-ease) both;
}

.lx-motion body:not(.has-splash) .lx-hero__kicker {
  animation: lx-fade-up 0.8s var(--lx-ease) 0.1s both;
}

.lx-motion body:not(.has-splash) .lx-hero__squiggle path {
  animation: lx-draw 1.4s var(--lx-ease) 0.35s both;
}

.lx-motion body:not(.has-splash) .site-hero--video .lx-word__in {
  animation: lx-rise 1.15s var(--lx-expo) both;
  animation-delay: calc(0.18s + var(--i) * 0.075s);
}

.lx-motion body:not(.has-splash) .lx-hero__facts li {
  animation: lx-pop 0.8s var(--lx-expo) both;
  animation-delay: calc(0.85s + var(--i) * 0.14s);
}

.lx-motion body:not(.has-splash) .lx-hero__actions > * {
  animation: lx-fade-up 0.9s var(--lx-expo) both;
}

.lx-motion body:not(.has-splash) .lx-hero__actions > :nth-child(1) {
  animation-delay: 1.25s;
}

.lx-motion body:not(.has-splash) .lx-hero__actions > :nth-child(2) {
  animation-delay: 1.37s;
}

.lx-motion body:not(.has-splash) .lx-scrollcue {
  animation: lx-fade 1s ease 1.8s both;
}

.lx-motion body:not(.has-splash) .site-hero__video.is-playing {
  transition: opacity 1.4s ease;
}

@keyframes lx-rise {
  from {
    transform: translate3d(0, 112%, 0) rotate(7deg);
  }
  to {
    transform: none;
  }
}

@keyframes lx-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lx-fade-down {
  from {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lx-fade {
  from {
    opacity: 0;
  }
}

@keyframes lx-pop {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lx-draw {
  from {
    stroke-dashoffset: 140;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Apparitions au défilement (le script ajoute .is-in). */
.lx-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 0.9s var(--lx-ease) var(--d, 0s),
    transform 1.15s var(--lx-expo) var(--d, 0s);
}

.lx-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.lx-motion [data-reveal-words] .lx-word__in {
  transform: translate3d(0, 112%, 0) rotate(6deg);
  transition: transform 1.05s var(--lx-expo);
  transition-delay: calc(var(--i) * 0.07s);
}

.lx-motion [data-reveal-words].is-in .lx-word__in {
  transform: none;
}

.lx-motion .lx-head__num::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--lx-expo) 0.2s;
}

.lx-motion .lx-head__num.is-in::after {
  transform: none;
}

[dir="rtl"] .lx-motion .lx-head__num::after {
  transform-origin: right center;
}

.lx-motion .lx-board .lx-gauge::before {
  transform: scaleX(0);
  transition: transform 1.2s var(--lx-expo) 0.5s;
}

.lx-motion .lx-board.is-in .lx-gauge::before {
  transform: scaleX(var(--fill, 0));
}

.lx-motion .lx-board.is-in .planned__row {
  animation: lx-fade-up 0.7s var(--lx-expo) both;
}

.lx-motion .lx-board.is-in .planned__row:nth-child(2) { animation-delay: 0.06s; }
.lx-motion .lx-board.is-in .planned__row:nth-child(3) { animation-delay: 0.12s; }
.lx-motion .lx-board.is-in .planned__row:nth-child(4) { animation-delay: 0.18s; }
.lx-motion .lx-board.is-in .planned__row:nth-child(5) { animation-delay: 0.24s; }

/* Boutons aimantés (souris seulement) : le script pose --mx / --my. */
.lx-motion [data-magnet] {
  translate: var(--mx, 0) var(--my, 0);
  transition:
    transform 0.1s ease,
    translate 0.5s var(--lx-ease),
    background 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .is-landing .site-hero__video,
  .lx-aboard__video {
    scale: none;
    translate: none;
  }

  .is-landing .site-hero__content {
    transform: none;
    opacity: 1;
  }

  .lx-map__boat-body,
  .lx-marquee__row {
    animation: none;
  }

  .lx-marquee__row--outline {
    display: none;
  }
}

/* --- Mode appli : l'accueil devient un écran d'appli ----------------------
   Pas de vidéo plein écran, pas de bandeau défilant ni de vidéo à bord : un
   en-tête bleu nuit (salut, titre, bouton Réserver), puis les passages et
   les lignes. La barre d'onglets remplace la barre « Réserver » du bas. */

.is-app .site-hero--video {
  min-height: 0;
  border-radius: 0 0 30px 30px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(96, 150, 186, 0.35) 0%, transparent 60%),
    linear-gradient(165deg, #16304f 0%, var(--lx-deep) 100%);
}

.is-app .site-hero--video::before,
.is-app .site-hero--video .site-hero__media,
.is-app .lx-scrollcue,
.is-app .lx-hero__facts,
.is-app .lx-marquee,
.is-app .lx-aboard,
.is-app .landing-dock,
.is-app .lx-head__num {
  display: none !important;
}

.is-app .site-hero--video .topbar {
  padding-bottom: 4px;
}

.is-app .is-landing .site-hero__content {
  padding: 8px var(--gutter) 30px;
  transform: none;
  opacity: 1;
}

.is-app .lx-hero__kicker {
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.is-app .lx-hero__title {
  margin-top: 10px;
  max-width: 15ch;
  font-size: clamp(32px, 9vw, 54px);
}

.is-app .lx-hero__actions {
  margin-top: 22px;
}

.is-app .lx-passages {
  padding-top: 30px;
}

.is-app .lx-title {
  font-size: clamp(28px, 7.6vw, 46px);
}

.is-app .lx-section--tight {
  padding-bottom: 30px;
}