/*
 * KHELYPS'O : Swim Stars Lyon et Clermont-Ferrand.
 * La page suit une journée au bord de l'eau : la piscine le matin, la ligne d'eau à midi, la mer
 * l'après-midi, le coucher du soleil puis la nuit. Ivoire, sable et bleu nuit, l'eau en turquoise,
 * une seule touche de soleil. Titres en Lora (romain et italique), texte en Inter.
 * Les scènes d'eau sont calculées en WebGL (assets/js) ; sans WebGL, des fonds en CSS prennent le
 * relais ; sans JavaScript, la page s'affiche entière. Si le visiteur demande moins de mouvement
 * (prefers-reduced-motion), tout se fige.
 */
@import url("fonts.css");

:root {
  color-scheme: light;

  --ivory: #f6f1e8;
  --paper: #fbf8f2;
  --sand: #ede3d1;
  --ink: #0d1e2a;
  --ink-2: #33434f;
  --muted: #5b6771;
  --line: rgba(13, 30, 42, 0.12);
  --line-strong: rgba(13, 30, 42, 0.26);

  --aqua: #9fd3cf;
  --teal: #2a7f89;
  --deep: #0b3a47;
  --night: #0a1c28;
  --on-dark: #f2ece2;
  --on-dark-2: rgba(242, 236, 226, 0.74);
  --line-dark: rgba(242, 236, 226, 0.18);

  --sun: #dc5d27;
  --sun-soft: #f2a46c;
  /* Le soleil en petit texte : plus sombre, pour rester lisible sur l'ivoire. */
  --sun-ink: #ad4416;

  --serif: "Khelypso Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Khelypso Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --max: 86rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* Pas de faux gras ni de faux italique : Lora a son vrai italique. */
  font-synthesis: none;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 4px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
}

p {
  margin: 0 0 1em;
}

address {
  font-style: normal;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--ivory);
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* Petit intitulé en capitales espacées. */
.label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.roman {
  flex: none;
  padding-right: 0.85rem;
  white-space: nowrap;
  border-right: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sun-ink);
}

.sun-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sun);
}

/* Le point final du grand titre est un soleil. */
.sun-dot-lg {
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.06em;
  vertical-align: 0.02em;
}

.nowrap {
  white-space: nowrap;
}

/* Retour à la ligne voulu sur grand écran seulement. */
@media (max-width: 47.99rem) {
  .br-lg {
    display: none;
  }
}

/* L'apostrophe de KHELYPS'O est une goutte. */
.drop {
  display: inline-block;
  flex: none;
  width: 0.3em;
  height: 0.48em;
  margin: -0.02em 0.3em 0 -0.14em;
  fill: #17616c;
}

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.5s var(--ease),
    color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    transform 0.7s var(--ease);
}

.arrow {
  display: inline-block;
  letter-spacing: 0;
  transition: transform 0.5s var(--ease);
}

.btn:hover .arrow,
.link:hover .arrow,
.c-link:hover .arrow {
  transform: translateX(0.35rem);
}

.btn-ink {
  background: var(--ink);
  color: var(--ivory);
}

.btn-ink:hover {
  background: #1d3547;
}

.btn-line {
  padding: 0.85rem 1.35rem;
  border-color: currentColor;
}

.btn-line:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.btn-ivory {
  background: var(--on-dark);
  color: var(--night);
}

.btn-ivory:hover {
  background: #fff;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: background-size 0.6s var(--ease);
}

.link:hover {
  background-size: 35% 1px;
}

/* ---------- En-tête ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition:
    transform 0.8s var(--ease),
    background-color 0.6s var(--ease),
    border-color 0.6s var(--ease);
}

.bar.is-solid,
.bar.is-fixed {
  background: rgba(246, 241, 232, 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}

.bar.is-away {
  transform: translateY(-101%);
}

.menu-open .bar {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

.bar-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 5.25rem;
  padding-inline: var(--gutter);
}

.bar-nav {
  display: flex;
  gap: clamp(1rem, 2vw, 2.1rem);
}

.bar-nav a,
.sound {
  padding: 0.45rem 0;
  font: 500 0.66rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.6s var(--ease);
}

.bar-nav a:hover,
.bar-nav a[aria-current] {
  background-size: 100% 1px;
}

.mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.mark-name,
.footer-mark {
  display: inline-flex;
  align-items: flex-start;
  margin-right: -0.3em;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

.mark-name {
  font-size: 1.38rem;
}

.mark-sub {
  margin-top: 0.55rem;
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.bar-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
}

.sound {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}

.sound:hover {
  background-size: 100% 1px;
}

.sound[hidden] {
  display: none;
}

.sound-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.sound-bars i {
  width: 2px;
  height: 3px;
  background: currentColor;
}

.sound[aria-pressed="true"] .sound-bars i {
  animation: eq 1.2s ease-in-out infinite;
}

.sound-bars i:nth-child(2) {
  animation-delay: -0.45s !important;
}

.sound-bars i:nth-child(3) {
  animation-delay: -0.9s !important;
}

.sound-bars i:nth-child(4) {
  animation-delay: -0.2s !important;
}

.burger {
  display: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.burger span:first-child,
.burger span:first-child::before,
.burger span:first-child::after {
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition:
    transform 0.5s var(--ease),
    background-color 0.3s;
}

.burger span:first-child {
  position: relative;
}

.burger span:first-child::before,
.burger span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger span:first-child::before {
  top: -4px;
}

.burger span:first-child::after {
  top: 4px;
}

.burger[aria-expanded="true"] span:first-child {
  background-color: transparent;
}

.burger[aria-expanded="true"] span:first-child::before {
  transform: translateY(4px) rotate(45deg);
}

.burger[aria-expanded="true"] span:first-child::after {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 60rem) {
  .bar-in {
    grid-template-columns: auto 1fr;
    min-height: 4.4rem;
  }

  .bar-nav {
    display: none;
  }

  .mark {
    align-items: flex-start;
  }

  .mark-name {
    font-size: 1.12rem;
  }

  .bar-tools {
    gap: 1rem;
  }

  .sound-label {
    display: none;
  }

  .js .burger {
    display: inline-grid;
  }
}

@media (max-width: 30rem) {
  .mark-sub,
  .js .bar .btn-line {
    display: none;
  }
}

/* ---------- Réserver, toujours à un geste : un flotteur de ligne d'eau ---------- */
.float-book {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 59;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.35rem 1rem 1.5rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 0, 0, 0.08) 14px 16px),
    var(--sun-ink);
  color: #fff8f0;
  font: 500 0.7rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0.8rem 1.6rem -0.6rem rgba(10, 28, 40, 0.45);
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.7s var(--ease);
}

.float-book.is-shown {
  transform: none;
}

.menu-open .float-book {
  transform: translateY(calc(100% + 2rem));
}

.no-js .float-book {
  display: none;
}

/* ---------- Menu des petits écrans : il s'ouvre en cercle depuis le bouton ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  align-content: center;
  gap: 3rem;
  padding: 6rem var(--gutter) 2.5rem;
  background: var(--ivory);
  clip-path: circle(0 at calc(100% - var(--gutter) - 1.3rem) 2.2rem);
  transition: clip-path 0.9s var(--ease-in-out);
}

.menu[hidden] {
  display: none;
}

.menu.is-open {
  clip-path: circle(160% at calc(100% - var(--gutter) - 1.3rem) 2.2rem);
}

.menu ol {
  display: grid;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  overflow: hidden;
}

.menu ol a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}

.menu.is-open ol a {
  transform: none;
}

.menu li:nth-child(2) a {
  transition-delay: 0.05s;
}

.menu li:nth-child(3) a {
  transition-delay: 0.1s;
}

.menu li:nth-child(4) a {
  transition-delay: 0.15s;
}

.menu li:nth-child(5) a {
  transition-delay: 0.2s;
}

.menu ol a span {
  font: 500 0.66rem/1 var(--sans);
  letter-spacing: 0.22em;
  color: var(--sun-ink);
}

.menu-foot {
  display: grid;
  gap: 0.7rem;
  margin: 0;
}

.menu-foot a {
  color: var(--ink-2);
  text-decoration: none;
}

/* ---------- Curseur ---------- */
.has-cursor,
.has-cursor * {
  cursor: none !important;
}

.cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 101;
  pointer-events: none;
  transition: opacity 0.4s;
}

.cursor.is-hidden {
  opacity: 0;
}

.cursor-dot,
.cursor-ring {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--ink);
  transition:
    background-color 0.4s,
    opacity 0.3s;
}

.cursor-ring {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(13, 30, 42, 0.45);
  transition:
    width 0.6s var(--ease),
    height 0.6s var(--ease),
    margin 0.6s var(--ease),
    background-color 0.4s,
    border-color 0.4s;
}

.cursor-label {
  font: 500 0.52rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.35s;
}

.cursor.is-link .cursor-ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(13, 30, 42, 0.06);
}

.cursor.is-link .cursor-dot {
  opacity: 0;
}

.cursor.is-water .cursor-ring {
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border-color: rgba(13, 30, 42, 0.32);
}

.cursor.is-water .cursor-label {
  opacity: 1;
}

.cursor.is-down .cursor-ring {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
}

.cursor.is-dark .cursor-dot {
  background: var(--on-dark);
}

.cursor.is-dark .cursor-ring {
  border-color: rgba(242, 236, 226, 0.5);
}

.cursor.is-dark.is-link .cursor-ring {
  background: rgba(242, 236, 226, 0.08);
}

.cursor.is-dark .cursor-label {
  color: var(--on-dark);
}

/* ---------- L'heure du jour, dans la marge ---------- */
.clock {
  position: fixed;
  left: max(0.9rem, calc(var(--gutter) / 2 - 0.5rem));
  top: 50%;
  z-index: 40;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  color: var(--ink);
  transform: translateY(-50%);
  transition: color 0.6s var(--ease);
  pointer-events: none;
}

[data-tone="dark"] .clock {
  color: var(--on-dark);
}

.clock-time,
.clock-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.clock-time {
  font: 500 0.64rem/1 var(--sans);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.clock-label {
  font: italic 400 0.86rem/1 var(--serif);
}

.clock-rail {
  position: relative;
  width: 1px;
  height: 8rem;
}

.clock-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.25;
}

.clock-rail i {
  position: absolute;
  left: 50%;
  top: var(--p, 0%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px rgba(220, 93, 39, 0.16);
  transition:
    background-color 0.6s,
    box-shadow 0.6s;
}

/* La nuit, le soleil devient un croissant de lune. */
.clock.is-night .clock-rail i {
  background: transparent;
  box-shadow: inset -3px -1px 0 0 var(--on-dark);
}

.no-js .clock {
  display: none;
}

@media (max-width: 75rem) {
  .clock {
    display: none;
  }
}

/* ---------- Ouverture (première visite) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.3rem;
  background: var(--ivory);
  color: var(--ink);
  -webkit-mask: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent var(--r, 0px), #000 calc(var(--r, 0px) + 1.5px));
  mask: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent var(--r, 0px), #000 calc(var(--r, 0px) + 1.5px));
  transition: opacity 0.6s var(--ease);
}

.intro.is-gone {
  opacity: 0;
}

.intro-mark {
  display: inline-flex;
  align-items: flex-start;
  margin: 0 -0.3em 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: 0.3em;
}

.intro-mark > span:not(.intro-drop) {
  display: inline-block;
  overflow: hidden;
}

.intro-mark > span > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 120ms);
}

.intro-drop {
  display: inline-block;
  animation: fade-in 0.9s ease 0.55s both;
}

.intro-drop .drop {
  margin-top: 0.06em;
}

.intro-sub {
  margin: 0;
  font: 500 0.6rem/1 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  animation: fade-in 1s ease 0.75s both;
}

/* L'apostrophe attend le visiteur : elle se gonfle, prête à tomber. */
.intro-hint {
  margin: 0.6rem 0 0;
  font: italic 400 0.98rem/1.2 var(--serif);
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.intro.is-waiting .intro-hint {
  opacity: 1;
}

.intro.is-waiting .intro-drop .drop {
  transform-origin: 50% 10%;
  animation: tremble 1.6s ease-in-out infinite;
}

.intro.is-waiting-off .intro-hint,
.intro.is-open .intro-mark,
.intro.is-open .intro-sub {
  opacity: 0;
  transition: opacity 0.4s;
}

/* ---------- Le matin : la piscine ---------- */
.opening {
  position: relative;
}

.hero {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(160deg, #a9dad6, #86c6c4 60%, #6db5b8);
  --edge: 40px;
}

/* Sans WebGL : des reflets en CSS sur l'eau. */
.hero::before {
  content: "";
  position: absolute;
  inset: -420px;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.011 0.016' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -5 0 0 0 1.15'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 420px 420px;
  animation: drift 60s linear infinite;
}

.gl .hero::before {
  display: none;
}

.hero-gl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.no-gl .hero-gl,
.no-js .hero-gl {
  display: none;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--night);
  opacity: var(--cover, 0);
  pointer-events: none;
}

.hero-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 5rem;
  padding-bottom: calc(var(--edge) + 2.5rem);
}

.hero-label {
  margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  color: var(--ink-2);
}

.hero-label .roman[hidden] {
  display: none;
}

.hero-title {
  font-size: clamp(3rem, 1rem + 6.6vw, 8.8rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
}

.hero-title .line {
  display: block;
}

/* Le titre est peint au fond de l'eau ; celui de la page reste là, transparent, pour les
   lecteurs d'écran, la sélection et les moteurs de recherche. */
.hero.is-painted .hero-title {
  color: transparent;
  text-shadow: none;
}

.hero.is-painted .hero-title .sun-dot {
  background: transparent;
}

.hero-lead {
  max-width: 31rem;
  margin: clamp(3.6rem, 2.2rem + 3.6vw, 6.2rem) 0 0;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  line-height: 1.62;
}

.hero-hint,
.method-hint {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font: 500 0.6rem/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-hint {
  right: calc(var(--edge) + var(--gutter));
  bottom: calc(var(--edge) + 1.5rem);
  color: var(--ink-2);
}

.hint-ring {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
}

.hint-ring::before,
.hint-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  animation: hint 2.8s var(--ease) infinite;
}

.hint-ring::after {
  animation-delay: 1.4s;
}

.no-gl .hero-hint,
.no-js .hero-hint {
  display: none;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge) + 1.2rem);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  font: 500 0.58rem/1 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transform: translateX(-50%);
}

.hero-scroll i {
  position: relative;
  width: 1px;
  height: 2.8rem;
  overflow: hidden;
}

.hero-scroll i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  animation: scroll-line 2.4s var(--ease-in-out) infinite;
}

/* Écran bas (portable 13 pouces, fenêtre réduite) : on resserre, et l'invitation à défiler
   laisse la place aux boutons. */
@media (max-height: 50rem) {
  .hero-scroll {
    display: none;
  }

  .hero-lead {
    margin-top: clamp(2.8rem, 2rem + 2.4vw, 4.2rem);
  }
}

@media (max-width: 40rem) {
  .hero-scroll {
    display: none;
  }

  .hero-hint {
    right: auto;
    left: var(--gutter);
  }
}

/* ---------- La maison : le manifeste, posé sur la pierre de la margelle ---------- */
/* Un travertin clair, veiné, en dalles ; l'ombre des palmes le traverse selon le soleil (stone.js). */
.manifesto {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(7rem, 4rem + 10vw, 15rem) 0 clamp(5rem, 3rem + 6vw, 9rem);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(80, 60, 30, 0.07) calc(25% - 1px) 25%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.024' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.56 0 0 0 0 0.46 0 0 0 0 0.32 0 0 0.95 0 -0.4'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23v)'/%3E%3C/svg%3E") 0 0 / 600px 300px,
    linear-gradient(180deg, #f1e9da, #e9dfcd);
  box-shadow: 0 -2.5rem 5rem -2.5rem rgba(10, 28, 40, 0.45);
}

.manifesto .wrap {
  position: relative;
  z-index: 1;
}

.manifesto-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 0 0;
  translate: var(--shade-x, 0) var(--shade-y, 0);
  scale: var(--shade-s, 1);
  filter: brightness(0) blur(var(--shade-blur, 1px));
  opacity: var(--shade-o, 0.2);
  mix-blend-mode: multiply;
  animation: sway 7s ease-in-out infinite alternate;
}

/* La nuit, la pierre s'assombrit ; une lampe l'éclaire, en haut à droite. */
.manifesto[data-tone="dark"] {
  color: var(--on-dark);
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 205, 140, 0.16), transparent 38rem),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0, 0, 0, 0.25) calc(25% - 1px) 25%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.024' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0 -0.26'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23v)'/%3E%3C/svg%3E") 0 0 / 600px 300px,
    linear-gradient(180deg, #37352f, #2b2a26);
}

.manifesto[data-tone="dark"] .label,
.manifesto[data-tone="dark"] .manifesto-foot p {
  color: var(--on-dark-2);
}

.manifesto[data-tone="dark"] .manifesto-foot {
  border-top-color: var(--line-dark);
}

.scrub {
  max-width: 19.5em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 0.9rem + 3.2vw, 4.3rem);
  line-height: 1.13;
  letter-spacing: -0.022em;
}

.pill {
  display: inline-block;
  height: 0.74em;
  margin: 0 0.04em;
  border-radius: 999px;
  vertical-align: -0.02em;
}

.pill-water {
  width: 1.9em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.03 0.045' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -5 0 0 0 1.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 60px 60px,
    linear-gradient(120deg, #addcd7, #4f9fa8);
  animation: pill-water 12s linear infinite;
}

/* Le soleil de l'heure ; la nuit, la lune dans sa vraie phase. */
.pill-sun {
  width: 0.74em;
  background: radial-gradient(circle at 38% 34%, #fff3e0, var(--sun-light, #f7c08e) 30%, var(--sun) 72%);
  box-shadow: 0 0 1.2em rgba(220, 93, 39, 0.35);
}

.is-moonlit .pill-sun {
  background: radial-gradient(circle at 40% 36%, #fbfcff, #d9dee8 70%);
  box-shadow:
    inset var(--moon-shadow, 0) 0 0 0 rgba(22, 26, 32, 0.92),
    0 0 1.4em rgba(210, 222, 255, 0.35);
}

.is-moonlit .pill-water {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.03 0.045' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -5 0 0 0 1.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 60px 60px,
    radial-gradient(circle at 70% 50%, #64e0d8, #127079 60%, #0b3d47);
}

.manifesto-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-strong);
}

.manifesto-foot p {
  margin: 0;
  font: 500 0.64rem/1.5 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- I. Les programmes ---------- */
.programmes {
  position: relative;
  z-index: 2;
  background: var(--ivory);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
}

.lanes-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.2rem 2rem;
  padding-top: clamp(5rem, 3rem + 5vw, 8rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.lanes-head .label {
  grid-column: 1 / -1;
  margin-bottom: 1.2rem;
}

.lanes-head h2,
.head h2,
.sea-in h2 {
  font-size: clamp(2.5rem, 1.3rem + 4vw, 5.6rem);
  letter-spacing: -0.03em;
}

@media (max-width: 47.99rem) {
  .lanes-head {
    grid-template-columns: 1fr;
  }
}

.lanes-hint {
  display: none;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.9rem;
  font: 500 0.6rem/1.4 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lanes-on .lanes-hint {
  display: flex;
}

.track {
  display: grid;
  gap: 5rem;
  padding-inline: var(--gutter);
}

.prog {
  display: grid;
  align-content: start;
  gap: 1.6rem 3rem;
}

.prog-age {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0;
}

.prog-n {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(8rem, 1rem + 20vw, 30rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
}

.prog-u {
  padding-top: 0.8rem;
  font: 500 0.7rem/1.5 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.prog-art {
  width: clamp(9rem, 6rem + 8vw, 15rem);
  aspect-ratio: 1;
  margin: 0;
}

.prog-art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bébé Nageur : les premiers ronds dans l'eau. */
.art-ripples .ring {
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  animation: ripple 5.2s var(--ease) infinite;
}

.art-ripples .ring:nth-child(2) {
  animation-delay: -1.3s;
}

.art-ripples .ring:nth-child(3) {
  animation-delay: -2.6s;
}

.art-ripples .ring:nth-child(4) {
  animation-delay: -3.9s;
}

.art-ripples .core {
  fill: var(--sun);
  stroke: none;
}

/* Auto-Rescue : l'étoile de mer, qui flotte sur le dos. */
.art-star .wave {
  animation: swell 6s linear infinite;
}

.art-star .float {
  transform-box: fill-box;
  transform-origin: center;
  animation: bob 4.4s ease-in-out infinite;
}

.art-star .star {
  fill: rgba(220, 93, 39, 0.1);
  stroke: var(--sun-ink);
}

/* Apprentissage : les longueurs, aller et retour. */
.art-lengths .lane {
  stroke-dasharray: 2 6;
  stroke: var(--muted);
}

.art-lengths .lap {
  stroke-dasharray: 3 5;
  opacity: 0.55;
}

.art-lengths .swimmer {
  fill: var(--sun);
  stroke: none;
}

/* Débutant adulte : six étapes, une à une. */
.art-steps .horizon {
  stroke: var(--muted);
}

.art-steps .arc {
  stroke-dasharray: 2 6;
  opacity: 0.6;
}

.art-steps .step {
  fill: var(--ivory);
  animation: step 6s var(--ease) infinite;
}

.art-steps .step:nth-of-type(2) {
  animation-delay: 0.5s;
}

.art-steps .step:nth-of-type(3) {
  animation-delay: 1s;
}

.art-steps .step:nth-of-type(4) {
  animation-delay: 1.5s;
}

.art-steps .step:nth-of-type(5) {
  animation-delay: 2s;
}

.art-steps .step:nth-of-type(6) {
  animation-delay: 2.5s;
}

.prog-body h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3.4rem);
  letter-spacing: -0.025em;
}

.prog-body p {
  max-width: 30rem;
  margin: 0;
  color: var(--ink-2);
}

.prog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line-strong);
  font: 500 0.64rem/1.5 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.prog-when {
  display: none;
  margin: 0 0 0.5rem !important;
  font: 500 0.64rem/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun-ink) !important;
}

.prog-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin: 1.3rem 0 0 !important;
}

.prog-start {
  align-content: center;
  gap: 1.2rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  background: var(--paper);
  border: 1px solid var(--line);
}

.prog-start .label {
  margin: 0;
}

.start-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.prog-start p:not(.label):not(.start-title) {
  max-width: 26rem;
  margin: 0;
  color: var(--ink-2);
}

.prog-start .btn {
  justify-self: start;
}

.programmes > .wrap {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

/* ---------- Les lignes d'eau ---------- */
/* Une piscine vue du dessus, une ligne par programme ; chaque ligne est un bouton qui la couvre
   tout entière. Ses mots sont peints au fond (WebGL) et restent là, transparents. */
.lanes {
  position: relative;
}

.lanes-gl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.no-gl .lanes-gl {
  display: none;
}

.lanes-pick {
  position: relative;
  display: none;
  grid-template-rows: repeat(4, 1fr);
  height: clamp(26rem, 74svh, 44rem);
  padding: var(--lane-wall, 24px) 0;
  /* Sans WebGL : les lignes en CSS. */
  background:
    linear-gradient(90deg, #e6dccb 0 var(--lane-start, 64px), transparent 0),
    linear-gradient(180deg, #e6dccb 0 var(--lane-wall, 24px), transparent 0 calc(100% - var(--lane-wall, 24px)), #e6dccb 0),
    linear-gradient(160deg, #a9dad6, #7fc2c1 60%, #64aeb3);
}

.lanes-on .lanes-pick {
  display: grid;
}

.gl .lanes-pick {
  background: none;
}

.lane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.15rem;
  margin: 0;
  padding: 0 0 0 calc(var(--lane-start, 64px) + 1.1rem);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.no-gl .lane + .lane {
  border-top: 2px dashed rgba(220, 93, 39, 0.55);
}

.lane:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: -6px;
}

.lane-age {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--serif);
  font-style: italic;
  line-height: 1;
}

.lane-n {
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem);
  letter-spacing: -0.03em;
}

.lane-u {
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
}

.lane-name {
  font: 500 clamp(0.62rem, 0.58rem + 0.15vw, 0.72rem) / 1.3 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lanes.is-painted .lane {
  color: transparent;
}

.lanes.is-painted .lane[aria-pressed="true"]::after {
  content: none;
}

.no-gl .lane[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.22);
}

/* Avec moins de mouvement, les quatre fiches restent affichées, en liste sous la piscine. */
.lanes-list .lanes .track {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
  width: auto;
  padding: 2rem var(--gutter) 0;
  transform: none;
  pointer-events: auto;
}

.lanes-list .lanes .track .prog {
  width: auto;
  margin: 0;
}

/* La fiche remonte à la surface : floue et teintée sous l'eau, nette quand elle la crève. */
.lanes-on .track {
  display: block;
  padding: 0;
}

.lanes-on .track .prog {
  display: block;
  width: min(100% - 2 * var(--gutter), 30rem);
  margin: -2.5rem auto 0;
  padding: 1.6rem 1.6rem 1.5rem;
  border-radius: 0.4rem;
  background: var(--paper);
  box-shadow: 0 2.2rem 3.4rem -1.6rem rgba(10, 40, 50, 0.55);
}

.lanes-on .track .prog[hidden] {
  display: none;
}

.lanes-on .prog-age,
.lanes-on .prog-art {
  display: none;
}

.lanes-on .prog-when {
  display: block;
}

.lanes-on .prog-body h3 {
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem);
}

.lanes-on .prog.is-up {
  animation: surface 1.1s var(--ease) both;
}

@media (min-width: 64rem) {
  .lanes-on .track {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    width: min(30rem, 36vw);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .lanes-on .track .prog {
    width: auto;
    margin: 0;
    pointer-events: auto;
  }
}

/* La ligne d'eau : des flotteurs qui tournent sur leur corde quand on fait défiler. */
.rope {
  display: flex;
  gap: 3px;
  height: 1.5rem;
  margin-top: 3.5rem;
  padding-inline: var(--gutter);
  overflow: hidden;
}

.rope i {
  --c: #f3ece0;
  flex: none;
  width: 2.5rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border-radius: 0.625rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(180deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 76%, #000) 6px 8px) 0 var(--roll, 0) / 100% 16px;
  box-shadow: 0 0.35rem 0.6rem -0.2rem rgba(13, 30, 42, 0.25);
}

.rope i:nth-child(12n + 1),
.rope i:nth-child(12n + 2),
.rope i:nth-child(12n + 3),
.rope i:nth-child(12n + 4),
.rope i:nth-child(12n + 5),
.rope i:nth-child(12n + 6) {
  --c: var(--sun);
}

.rope i:nth-child(24n) {
  --c: var(--ink);
}

@media (min-width: 48rem) {
  .track .prog {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
  }

  .track .prog-age {
    grid-row: 1 / 3;
    align-self: center;
  }
}

/* ---------- II. La méthode, à midi ---------- */
.method {
  position: relative;
  z-index: 2;
  background: var(--deep);
  color: var(--on-dark);
}

.method-pin.is-pinned {
  height: 230svh;
}

.method-stage {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(180deg, #f6f1e8 0 56%, #8fd0cf 56%, #2c7f88 76%, var(--deep));
}

.method-pin.is-pinned .method-stage {
  position: sticky;
  top: 0;
}

.method-gl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.no-gl .method-gl,
.no-js .method-gl {
  display: none;
}

.method-label {
  position: absolute;
  top: clamp(5.5rem, 4rem + 4vw, 8rem);
  left: var(--gutter);
  z-index: 2;
  margin: 0;
}

.method-title {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  z-index: 2;
  margin: 0;
  font-size: clamp(3.2rem, 0.6rem + 8.8vw, 11.5rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-align: center;
  transform: translateY(-50%);
}

.method.is-painted .method-title {
  color: transparent;
}

.method-hint {
  right: var(--gutter);
  bottom: 1.8rem;
  color: var(--on-dark-2);
}

.no-gl .method-hint,
.no-js .method-hint {
  display: none;
}

.method-facts {
  padding: clamp(5rem, 3rem + 6vw, 10rem) 0 clamp(5rem, 3rem + 6vw, 9rem);
}

.method-lead {
  max-width: 21em;
  margin: 0 0 clamp(3rem, 2rem + 3vw, 5rem);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.facts {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
}

.facts li {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line-dark);
}

.facts .n {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sun-soft);
}

.facts h3 {
  margin: 0.5rem 0;
  font-size: 1.5rem;
}

.facts p {
  max-width: 22rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--on-dark-2);
}

@media (min-width: 56rem) {
  .facts {
    grid-template-columns: repeat(4, 1fr);
  }

  .facts li {
    padding: 1.8rem 1.8rem 0 0;
    border-bottom: 0;
  }

  .facts li + li {
    padding-left: 1.8rem;
    border-left: 1px solid var(--line-dark);
  }
}

/* ---------- À vous : les quatre réflexes ---------- */
.reflexes {
  position: relative;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  --stage-h: clamp(22rem, 58svh, 36rem);
}

.reflexes-head {
  display: grid;
  gap: 0.8rem 3rem;
  margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem);
}

.reflexes-head .label {
  margin: 0;
}

@media (min-width: 60rem) {
  .reflexes-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .reflexes-head .label {
    grid-column: 1 / -1;
  }
}

.reflexes-title {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem);
  letter-spacing: -0.03em;
}

.reflexes-steps {
  counter-reset: step;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 0.62rem/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.reflexes-steps li {
  counter-increment: step;
  transition: color 0.4s;
}

.reflexes-steps li::before {
  content: counter(step);
  margin-right: 0.5rem;
  font: italic 400 1rem/1 var(--serif);
  letter-spacing: 0;
  color: var(--sun-soft);
}

.reflexes-steps li.is-now {
  color: var(--on-dark);
}

.reflexes-steps li.is-done::before {
  content: "✓";
  font-style: normal;
}

.reflexes-stage {
  position: relative;
}

.reflexes-gl,
.reflexes-trace {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: var(--stage-h);
}

.reflexes-gl,
.reflexes-hit,
.reflexes-trace,
.reflexes-bar {
  display: none;
}

.reflexes-on.gl-ready .reflexes-gl,
.gl .reflexes-on .reflexes-gl {
  display: block;
}

.gl .reflexes-on .reflexes-stage {
  padding-top: var(--stage-h);
}

.gl .reflexes-on .reflexes-hit {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  touch-action: none;
}

.gl .reflexes-on .reflexes-trace {
  display: block;
  overflow: visible;
  pointer-events: none;
}

.reflexes-trace path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-dasharray: 3 8;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.5s;
}

.reflexes-trace.is-on path {
  opacity: 1;
  animation: trace 1.1s linear infinite;
}

.reflexes-on .reflexes-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.6rem;
}

.reflexes-now {
  margin: 0;
  max-width: 40rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.3;
}

.reflexes-end {
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.reflexes-end .link {
  margin: 1rem 1.8rem 0 0;
  letter-spacing: 0.2em;
}

.reflexes-on .reflexes-end:not([hidden]) {
  animation: surface 1.1s var(--ease) both;
}

.reflexes .facts {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
}

/* Sur grand écran, les quatre faits sont les légendes de la scène qu'on vient de vivre. */
@media (min-width: 64rem) {
  .gl .reflexes-on .facts {
    position: absolute;
    inset: var(--stage-top, 0) 0 auto;
    display: block;
    width: auto;
    height: var(--stage-h);
    margin: 0;
    border: 0;
    pointer-events: none;
  }

  .gl .reflexes-on .facts li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 14rem;
    padding: 0.75rem 0.95rem 0.85rem;
    border: 0;
    border-radius: 0.35rem;
    background: rgba(8, 26, 36, 0.74);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .gl .reflexes-on .facts li[data-side="right"] {
    translate: -100% 0;
  }

  .gl .reflexes-on .facts li[data-side="bottom"] {
    translate: 0 -100%;
  }

  .gl .reflexes-on .facts .n {
    font-size: 0.9rem;
  }

  .gl .reflexes-on .facts h3 {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.12rem;
  }

  .gl .reflexes-on .facts p {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

/* ---------- III. Les adresses ---------- */
.places {
  position: relative;
  z-index: 2;
  padding: clamp(6rem, 4rem + 6vw, 11rem) 0;
  background: var(--sand);
}

.head {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: clamp(3.5rem, 2.5rem + 3vw, 6rem);
}

.head p:not(.label) {
  max-width: 34rem;
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink-2);
}

@media (min-width: 60rem) {
  .head {
    grid-template-columns: 1fr minmax(18rem, 30rem);
    align-items: end;
  }

  .head .label {
    grid-column: 1 / -1;
    margin-bottom: 0.4rem;
  }
}

.cities {
  display: grid;
  gap: 5rem;
}

@media (min-width: 60rem) {
  .cities {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);
  }
}

.map {
  position: relative;
  margin: 0 0 2.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
}

.map svg {
  width: 100%;
  height: auto;
}

.map figcaption {
  position: absolute;
  left: 1.1rem;
  bottom: 0.9rem;
  font: 500 0.56rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.river .bank {
  fill: none;
  stroke: #bfe0dc;
  stroke-width: 16;
  stroke-linecap: round;
}

/* L'eau coule vers l'aval. */
.river .flow {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
  animation: flow 2.6s linear infinite;
}

.river-name {
  font: italic 400 16px var(--serif);
  letter-spacing: 0.03em;
  fill: var(--teal);
}

.pin-halo {
  fill: var(--sun);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.pin-dot {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 2.5;
  transition: fill 0.4s;
}

.pin text {
  font: 500 12px var(--sans);
  letter-spacing: 0.14em;
  fill: var(--ink);
}

.pin .stop {
  font: italic 400 18px var(--serif);
  letter-spacing: 0;
}

.pin.is-on .pin-dot {
  fill: var(--sun);
}

.pin.is-on .pin-halo {
  animation: halo 1.8s var(--ease) infinite;
}

/* Le programme choisi : ses piscines battent sur le plan, la liste le dit. */
.pin.is-offer .pin-dot {
  fill: var(--sun);
}

.pin.is-offer .pin-halo {
  animation: halo 2.4s var(--ease) infinite;
}

.a-offer {
  margin: 0 0 0.3rem;
  font: 500 0.6rem/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun-ink);
}

.addresses li.is-offer .a-name {
  color: var(--sun-ink);
}

.offer-sum {
  display: block;
  margin-top: 0.6rem;
  font-weight: 500;
  color: var(--ink);
}

.compass path,
.scale path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
}

.compass text,
.scale text {
  font: 500 11px var(--sans);
  letter-spacing: 0.14em;
  fill: var(--muted);
}

.puys {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.puys-far {
  stroke: var(--muted);
  stroke-width: 1;
  opacity: 0.5;
}

.peak,
.range {
  font: italic 400 16px var(--serif);
  fill: var(--muted);
}

.map .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
}

.city h3 {
  margin-bottom: 1.2rem;
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem);
}

.city h3 em {
  color: var(--muted);
}

.addresses {
  list-style: none;
  margin: 0;
  padding: 0;
}

.addresses li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-strong);
}

.addresses .n {
  padding-top: 0.2rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--sun-ink);
}

.a-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  transition: color 0.4s;
}

.addresses li.is-on .a-name {
  color: var(--sun-ink);
}

.a-venue {
  margin: 0.35rem 0 0.5rem;
  font: 500 0.64rem/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.addresses address {
  color: var(--ink-2);
}

.a-progs {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}

/* ---------- L'après-midi : la mer ---------- */
.sea {
  position: relative;
  z-index: 2;
  height: 118svh;
  min-height: 42rem;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(180deg, #eedfc4 0 var(--shore, 42%), #a3d9d2 var(--shore, 42%), #2b8ba0);
}

.sea-gl,
.sea-shadow,
.sea-fish {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sea-shadow {
  filter: blur(3px);
  mix-blend-mode: multiply;
}

.no-gl .sea canvas,
.no-js .sea canvas {
  display: none;
}

.sea-in {
  position: relative;
  z-index: 2;
  padding-top: clamp(6rem, 4rem + 5vw, 9rem);
}

.sea-in h2 {
  max-width: 13em;
  margin-bottom: 1.4rem;
}

.sea-in p:not(.label) {
  max-width: 31rem;
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink-2);
}

/* ---------- Le soir, puis la nuit ---------- */
.evening {
  position: relative;
  z-index: 2;
  overflow: clip;
  background: var(--night);
  color: var(--on-dark);
}

.evening-sky {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  overflow: hidden;
  background: linear-gradient(180deg, #1c2d48, #6d6178 52%, #e39a6a 75%, #12283a 75.4%, #08151f);
}

.dusk-gl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.no-gl .dusk-gl,
.no-js .dusk-gl {
  display: none;
}

/* Un voile à gauche, sous le texte, pour qu'il reste lisible à toute heure ; sur téléphone, le
   texte occupe toute la largeur : le voile aussi. */
.evening-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 18, 27, 0.55), rgba(7, 18, 27, 0.18) 55%, rgba(7, 18, 27, 0));
}

@media (max-width: 61.99rem) {
  .evening-scrim {
    background: rgba(7, 18, 27, 0.5);
  }
}

.concierge,
.contact,
.evening .footer {
  position: relative;
  z-index: 1;
}

.evening .label {
  color: var(--on-dark-2);
}

.evening .roman {
  border-right-color: var(--line-dark);
  color: var(--sun-soft);
}

.evening h2 {
  text-shadow: 0 2px 28px rgba(5, 14, 22, 0.35);
}

/* La lune passe parfois derrière un lien : une ombre douce le garde lisible. */
.evening .c-link,
.evening .footer nav a,
.evening .footer-text,
.evening .fine {
  text-shadow: 0 1px 12px rgba(5, 14, 22, 0.7);
}

.concierge {
  padding: clamp(7rem, 5rem + 6vw, 12rem) 0 clamp(5rem, 3rem + 5vw, 9rem);
}

.concierge-grid {
  display: grid;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .concierge-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(4rem, 7vw, 8rem);
  }
}

.concierge h2,
.contact h2 {
  margin-bottom: 1.4rem;
  font-size: clamp(2.5rem, 1.3rem + 4vw, 5.4rem);
  letter-spacing: -0.03em;
}

.concierge-lead {
  max-width: 33rem;
  font-size: 1.08rem;
  color: var(--on-dark-2);
}

.ticks {
  max-width: 33rem;
  list-style: none;
  margin: 2rem 0 2.6rem;
  padding: 0;
}

.ticks li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line-dark);
}

.ticks li:last-child {
  border-bottom: 1px solid var(--line-dark);
}

.ticks li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--sun-soft);
}

.fine {
  max-width: 33rem;
  margin-top: 1.8rem;
  font-size: 0.8rem;
  color: var(--on-dark-2);
}

.fine a {
  color: var(--on-dark);
}

/* La démonstration de Leo. */
.demo {
  justify-self: center;
  width: min(100%, 25.5rem);
  margin: 0;
  padding: 1.1rem;
  border-radius: 1.75rem;
  background: rgba(251, 248, 242, 0.97);
  color: var(--ink);
  box-shadow:
    0 3rem 6rem -2rem rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.demo-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem 0.4rem 1rem;
  border-bottom: 1px solid var(--line);
}

.demo-avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.1rem;
}

.demo-who {
  display: grid;
  line-height: 1.25;
}

.demo-who b {
  font-size: 0.95rem;
  font-weight: 600;
}

.demo-who span {
  font-size: 0.72rem;
  color: var(--muted);
}

.demo-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: 500 0.56rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1c7f4e;
}

.demo-live::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #25b46a;
  animation: live 2s ease-in-out infinite;
}

.demo-thread {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 22rem;
  padding: 1.1rem 0.3rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.demo-thread::-webkit-scrollbar {
  display: none;
}

.msg {
  max-width: 86%;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.msg.you {
  align-self: flex-end;
  border-bottom-right-radius: 0.35rem;
  background: var(--ink);
  color: var(--ivory);
}

.msg.leo {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 0.35rem;
  background: #fff;
}

.msg.is-new {
  animation: msg-in 0.7s var(--ease) both;
}

.msg.typing {
  display: inline-flex;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
}

.msg.typing i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--muted);
  animation: typing 1.1s ease-in-out infinite;
}

.msg.typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.msg.typing i:nth-child(3) {
  animation-delay: 0.3s;
}

.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 3.4rem;
  padding: 0.9rem 0.2rem 0.3rem;
  border-top: 1px solid var(--line);
}

.chip {
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 400 0.82rem/1.25 var(--sans);
  text-align: left;
  cursor: pointer;
  animation: msg-in 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.chip:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.demo-note {
  padding: 0.8rem 0.4rem 0;
  font: 500 0.54rem/1.6 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

/* V. Nous écrire */
.contact {
  padding: clamp(5rem, 3rem + 5vw, 9rem) 0;
}

.contact .head p:not(.label) {
  color: var(--on-dark-2);
}

.contacts {
  display: grid;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 56rem) {
  .contacts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contacts li {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-dark);
}

.contacts .label {
  margin-bottom: 0.8rem;
}

.c-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.5s var(--ease);
}

.c-link:hover {
  color: var(--sun-soft);
}

.c-link .arrow {
  font-size: 1rem;
}

.contacts li > p:last-child {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  color: var(--on-dark-2);
}

/* ---------- Pied de page : la nuit ---------- */
.footer {
  padding: clamp(6rem, 4rem + 8vw, 14rem) 0 2.4rem;
  background: var(--night);
  color: var(--on-dark);
}

.evening .footer {
  background: transparent;
}

.footer-line {
  margin: 0 0 clamp(4rem, 3rem + 4vw, 7rem);
  font-family: var(--serif);
  font-size: clamp(2.8rem, 1.2rem + 6vw, 8rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 30px rgba(5, 14, 22, 0.4);
}

.footer-grid {
  display: grid;
  gap: 2.5rem 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line-dark);
}

@media (min-width: 56rem) {
  .footer-grid {
    grid-template-columns: 1.7fr 1fr 1fr;
  }
}

.footer-mark {
  margin-bottom: 0;
  font-size: 1.9rem;
  line-height: 1;
}

.footer-mark .drop {
  fill: var(--aqua);
}

.footer-sub {
  margin: 0.8rem 0 1.6rem;
  font: 500 0.58rem/1.4 var(--sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.footer-text {
  max-width: 30rem;
  font-size: 0.9rem;
  color: var(--on-dark-2);
}

.footer .label {
  color: var(--on-dark-2);
}

.footer nav ul {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer nav a {
  font-size: 0.92rem;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.6s var(--ease);
}

.footer nav a:hover,
.footer nav a[aria-current="page"] {
  background-size: 100% 1px;
}

.footer-fine {
  margin: 2.6rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.74rem;
  color: var(--on-dark-2);
}

/* Champ à compléter avant la mise en ligne : visible exprès, à retirer une fois rempli. */
.todo {
  padding: 0 0.3rem;
  outline: 1px dashed #c98a00;
  background: #fff4d6;
  color: #7a4b00;
  font-weight: 600;
}

.evening .todo,
.footer .todo {
  background: #3a2c05;
  color: #ffd88a;
}

/* ---------- Pages légales ---------- */
.page-head {
  padding: clamp(8rem, 7rem + 4vw, 11rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.page-head h1 {
  margin: 0.15em 0 0.4em;
  font-size: clamp(2.6rem, 1.7rem + 3.6vw, 5rem);
  letter-spacing: -0.03em;
}

.page-head p:not(.label) {
  margin: 0;
  color: var(--muted);
}

.prose {
  max-width: 46rem;
  padding: clamp(3rem, 2rem + 3vw, 5rem) 0 clamp(5rem, 4rem + 4vw, 8rem);
  color: var(--ink-2);
}

.prose h2 {
  margin: 2.8rem 0 0.9rem;
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  color: var(--ink);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 2rem 0 0.7rem;
  font-size: 1.35rem;
  color: var(--ink);
}

.prose ul {
  padding-left: 1.2rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose a {
  color: var(--ink);
  text-underline-offset: 0.2em;
}

.prose strong {
  color: var(--ink);
}

.table-wrap {
  margin: 1.2rem 0 1.8rem;
  overflow-x: auto;
  border-top: 1px solid var(--line-strong);
}

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.93rem;
}

th,
td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

dl.legal {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--line-strong);
}

dl.legal dt,
dl.legal dd {
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

dl.legal dt {
  padding-top: 0.95rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

dl.legal dd {
  color: var(--ink);
}

@media (max-width: 40rem) {
  dl.legal {
    grid-template-columns: 1fr;
  }

  dl.legal dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 1.2rem 0 2rem;
  padding: 0 !important;
  border-top: 1px solid var(--line-strong);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 1fr;
  margin: 0 !important;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-style: italic;
  color: var(--sun-ink);
}

.callout {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--sun);
  background: var(--paper);
}

.callout p:last-child {
  margin: 0;
}

/* Page introuvable. */
.lost {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: 7rem 0 4rem;
}

.lost h1 {
  margin-bottom: 0.4em;
  font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.6rem);
  letter-spacing: -0.03em;
}

.lost p:not(.label) {
  max-width: 30rem;
  margin-bottom: 2.4rem;
  color: var(--muted);
}

.lost-art {
  position: absolute;
  right: 4%;
  top: 60%;
  width: clamp(12rem, 8rem + 14vw, 24rem);
  transform: translateY(-50%);
  opacity: 0.7;
  pointer-events: none;
}

.lost {
  position: relative;
}

/* ---------- La nuit : les scènes passent en ton sombre, le texte en ivoire ---------- */
.hero[data-tone="dark"],
.method[data-tone="dark"] .method-stage,
.sea[data-tone="dark"] {
  color: var(--on-dark);
}

.hero[data-tone="dark"] .hero-label,
.hero[data-tone="dark"] .hero-hint,
.hero[data-tone="dark"] .hero-scroll,
.method[data-tone="dark"] .label,
.sea[data-tone="dark"] .label,
.sea[data-tone="dark"] .sea-in p:not(.label) {
  color: var(--on-dark-2);
}

/* Les projecteurs passent parfois sous le texte : une ombre douce le garde lisible. */
.hero[data-tone="dark"] .hero-in,
.sea[data-tone="dark"] .sea-in {
  text-shadow: 0 1px 16px rgba(4, 20, 26, 0.55);
}

.hero[data-tone="dark"] .roman,
.method[data-tone="dark"] .roman,
.sea[data-tone="dark"] .roman {
  border-right-color: var(--line-dark);
  color: var(--sun-soft);
}

/* L'en-tête, tant qu'il est posé sur une scène de nuit. */
html[data-tone="dark"] .bar:not(.is-solid),
html[data-tone="dark"] .bar:not(.is-solid) .mark {
  color: var(--on-dark);
}

html[data-tone="dark"] .bar:not(.is-solid) .drop {
  fill: var(--aqua);
}

html[data-tone="dark"] .bar:not(.is-solid) .mark-sub {
  color: var(--on-dark-2);
}

html[data-tone="dark"] .bar:not(.is-solid) .burger {
  border-color: var(--line-dark);
}

html[data-tone="dark"] .bar:not(.is-solid) .btn-line:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--night);
}

/* Sans WebGL, les fonds en CSS prennent aussi la nuit. */
.hero[data-tone="dark"] {
  background: linear-gradient(160deg, #0f4650, #0a2f38 60%, #072229);
}

.method[data-tone="dark"] .method-stage {
  background: linear-gradient(180deg, #0b1724 0 56%, #0d3a44 56%, #062029);
}

.sea[data-tone="dark"] {
  background: linear-gradient(180deg, #2b2a2a 0 var(--shore, 42%), #0b2a33 var(--shore, 42%), #04161d);
}

/* ?mesure : le panneau des mesures. */
.measure {
  position: fixed;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 120;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  background: rgba(10, 28, 40, 0.86);
  color: #e8fff8;
  font: 500 0.66rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
  pointer-events: none;
}

/* ---------- Apparitions ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.facts li.reveal:nth-child(2),
.contacts li.reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.facts li.reveal:nth-child(3),
.contacts li.reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.facts li.reveal:nth-child(4) {
  transition-delay: 0.24s;
}

/* Titres découpés en mots : chaque mot monte depuis un masque, à son tour. */
.wd {
  display: inline-block;
  margin: 0 -0.1em -0.12em 0;
  padding: 0 0.1em 0.12em 0;
  overflow: hidden;
  vertical-align: top;
}

.wd > span {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 1.15s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.is-split.is-visible .wd > span {
  transform: none;
}

/* ---------- Animations ---------- */
@keyframes rise {
  to {
    transform: none;
  }
}

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

@keyframes drift {
  to {
    transform: translate(420px, 420px);
  }
}

@keyframes hint {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes sway {
  from {
    rotate: -0.6deg;
  }
  to {
    rotate: 0.8deg;
  }
}

@keyframes trace {
  to {
    stroke-dashoffset: -22;
  }
}

@keyframes tremble {
  50% {
    transform: translateY(1px) scale(0.93, 1.12);
  }
}

@keyframes scroll-line {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes pill-water {
  to {
    background-position:
      120px 60px,
      0 0;
  }
}

@keyframes ripple {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(5);
  }
}

@keyframes swell {
  to {
    transform: translateX(-50px);
  }
}

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

@keyframes step {
  0%,
  8% {
    fill: var(--ivory);
  }
  14%,
  70% {
    fill: var(--sun);
  }
  80%,
  100% {
    fill: var(--ivory);
  }
}

@keyframes flow {
  to {
    stroke-dashoffset: -28;
  }
}

@keyframes halo {
  from {
    opacity: 0.45;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes eq {
  0%,
  100% {
    height: 3px;
  }
  50% {
    height: 11px;
  }
}

@keyframes live {
  50% {
    opacity: 0.35;
  }
}

@keyframes typing {
  50% {
    opacity: 0.4;
    transform: translateY(-3px);
  }
}

@keyframes surface {
  from {
    opacity: 0.25;
    filter: blur(6px) sepia(0.6) hue-rotate(140deg) saturate(1.6);
    transform: translateY(1.6rem) scale(0.96);
  }
  55% {
    opacity: 1;
    filter: blur(0) sepia(0) hue-rotate(0) saturate(1);
  }
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Changement de page : l'ancienne s'efface vers le haut, la nouvelle monte (Chrome, Safari). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-out 0.45s var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: page-in 0.7s var(--ease) both;
}

@keyframes page-out {
  to {
    opacity: 0;
    transform: translateY(-1.2rem);
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal,
  .wd > span {
    opacity: 1;
    transform: none;
  }
}