/* Cassez votre vieux site : une expérience Kazura. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url(../../polices/bricolage-latin.a756882d8a.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../../polices/newsreader-normal-latin.6e4f2958c3.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(../../polices/newsreader-italic-latin.5dfcd10d24.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(../../polices/jetbrains-mono-latin.18be452724.woff2) format('woff2'); }

:root {
  --nuit: #05070b;
  --sol: #0b1013;
  --ink: #eef0ea;
  --ink-doux: #c6cec9;
  --jade: #10b981;
  --jade-clair: #6ee7b7;
  --violet-clair: #c9b8ff;
  --or: #e9c987;
  --titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --texte: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --barre-h: 78px;
  --hud-h: 54px;
}
@media (min-width: 760px) { :root { --barre-h: 84px; --hud-h: 60px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--nuit); color: var(--ink); font-family: var(--titre);
  overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--jade-clair); outline-offset: 3px; }

/* La lumière derrière la vieille page : on la voit par les trous. */
#nuit {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(16, 185, 129, .30), transparent 70%),
    radial-gradient(45% 40% at 22% 20%, rgba(139, 92, 246, .30), transparent 70%),
    radial-gradient(50% 45% at 82% 78%, rgba(233, 201, 135, .16), transparent 70%),
    var(--nuit);
}
#nuit img {
  position: absolute; left: 50%; top: 46%; width: min(56vmin, 520px); height: auto;
  transform: translate(-50%, -50%); opacity: .5;
  filter: drop-shadow(0 0 24px rgba(110, 231, 183, .7)) drop-shadow(0 0 60px rgba(139, 92, 246, .55));
  animation: souffle 6s ease-in-out infinite alternate;
}
@keyframes souffle { from { transform: translate(-50%, -50%) scale(.96); opacity: .42; } to { transform: translate(-50%, -50%) scale(1.04); opacity: .62; } }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; display: block; cursor: crosshair; }
#scene:focus-visible { outline-offset: -6px; }

/* Bandeau du haut */
.hud {
  position: fixed; inset: 0 0 auto 0; height: var(--hud-h); z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 14px; padding-top: env(safe-area-inset-top);
  background: linear-gradient(var(--nuit) 70%, rgba(5, 7, 11, .0));
}
.hud-retour {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none;
  font-weight: 650; font-size: 15px; min-height: 44px; padding-right: 6px;
}
.hud-retour svg { width: 26px; height: 26px; color: var(--jade-clair); }
.hud-titre { margin: 0; font-weight: 700; font-stretch: 85%; font-size: clamp(15px, 1.2vw + .4vh, 22px); letter-spacing: .01em; text-align: center; }
.hud-ruine { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--ink-doux); }
.hud-ruine-val { color: var(--jade-clair); font-weight: 700; min-width: 4ch; text-align: right; }
.hud-ruine-barre { width: 74px; height: 6px; border-radius: 6px; background: rgba(238, 240, 234, .14); overflow: hidden; }
.hud-ruine-barre i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--jade), var(--jade-clair)); border-radius: 6px; transition: width .3s; }
@media (max-width: 559px) {
  .hud-titre { display: none; }
  .hud-ruine-mot { display: none; }
}

/* Barre d'outils : c'est aussi le sol où tombent les débris. */
.outils {
  position: fixed; inset: auto 0 0 0; height: calc(var(--barre-h) + env(safe-area-inset-bottom)); z-index: 6;
  display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #11231c 0, var(--sol) 14px, var(--sol));
  border-top: 2px solid rgba(110, 231, 183, .55);
  transition: opacity .6s, transform .6s;
}
.outil {
  flex: 0 1 132px; min-width: 0; min-height: 56px; border-radius: 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(238, 240, 234, .07); border: 1.5px solid rgba(238, 240, 234, .22); color: var(--ink);
  font-weight: 650; font-size: 13px; line-height: 1.1; padding: 6px 6px; text-align: center;
  transition: background .2s, border-color .2s, transform .15s;
}
.outil svg { width: 24px; height: 24px; color: var(--jade-clair); }
.outil[aria-pressed="true"] { background: rgba(110, 231, 183, .16); border-color: var(--jade-clair); }
.outil:active { transform: scale(.96); }
.outil-liane { background: var(--jade-clair); border-color: var(--jade-clair); color: #04261a; }
.outil-liane svg { color: #04261a; }
@media (min-width: 760px) {
  .outil { flex-direction: row; gap: 9px; font-size: 15px; flex-basis: auto; padding: 8px 18px; }
}
body.phase-liane .outils, body.phase-eclosion .outils, body.phase-neuf .outils { opacity: 0; transform: translateY(30px); pointer-events: none; }
body.phase-neuf .hud, body.phase-neuf #scene, body.phase-neuf .bulle, body.phase-neuf .outils { display: none; }
body.phase-intro .outils { opacity: .55; pointer-events: none; }

/* Bulle de Kazu */
.bulle {
  position: fixed; z-index: 7; margin: 0; max-width: min(250px, 62vw);
  background: #fbfaf5; color: #10140f; border: 2px solid #05070b; border-radius: 16px 16px 16px 4px;
  padding: 9px 12px; font-weight: 650; font-size: 14.5px; line-height: 1.25;
  box-shadow: 3px 3px 0 #05070b; pointer-events: none;
  transform-origin: 0 100%; animation: bulle .35s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes bulle { from { transform: scale(.4); opacity: 0; } }

/* La fenêtre « message système » à l'ancienne */
.dialogue {
  position: fixed; z-index: 9; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-1.5deg);
  width: min(420px, calc(100vw - 32px));
  background: #d4d0c8; color: #000; font-family: Tahoma, 'Segoe UI', Verdana, Geneva, sans-serif; font-size: 15px;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000, 10px 14px 0 rgba(5, 7, 11, .55);
  animation: tombe .55s cubic-bezier(.2, 1.3, .35, 1);
}
@keyframes tombe { from { transform: translate(-50%, -120%) rotate(-8deg); opacity: 0; } }
.dlg-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(90deg, #000080, #1060b0); color: #fff; font-weight: 700; padding: 4px 4px 4px 8px;
}
.dlg-x { width: 30px; height: 26px; background: #d4d0c8; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font-weight: 700; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.dlg-corps { display: flex; gap: 14px; padding: 16px 16px 6px; align-items: flex-start; }
.dlg-icone { width: 40px; height: 40px; flex: none; }
.dlg-corps p { margin: 0 0 8px; line-height: 1.35; }
.dlg-question { font-weight: 700; }
.dlg-boutons { display: flex; justify-content: center; gap: 10px; padding: 8px 16px 16px; flex-wrap: wrap; }
.dlg-btn {
  min-width: 128px; min-height: 44px; padding: 6px 14px; cursor: pointer;
  background: #d4d0c8; color: #000; font-family: inherit; font-size: 15px;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000;
}
.dlg-btn:active { border-color: #404040 #fff #fff #404040; }
.dlg-btn:focus-visible { outline: 1px dotted #000; outline-offset: -6px; }
#dlgOui { font-weight: 700; }
.dialogue.parti { transition: transform .45s cubic-bezier(.5, 0, .9, .4), opacity .45s; transform: translate(-50%, 140%) rotate(14deg); opacity: 0; pointer-events: none; }

/* ---------------- Le nouveau site de Lila (exemple imaginaire) ----------------
   Direction artistique « L'heure bleue » : le monde (WebGL, lila.js) fait le décor ; le site plonge avec lui.
   Newsreader variable pour la voix (sa graisse respire), Bricolage pour les repères. Encre claire au-dessus de la mer
   du soir et sous l'eau ; encre de nuit dans l'aube (réservation, cabinet, pied). */
#monde { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: none; pointer-events: none; }
body.monde-on #monde { display: block; }
body.phase-liane #monde, body.phase-eclosion #monde { z-index: 3; }
#portail { display: none; }

#neuf {
  --l-creme: #f7f1ea; --l-creme-doux: #e6e0ee; --l-eteint: #aab9cb; --l-braise: #ffb99e;
  --l-encre: #1b1730; --l-encre-doux: #3b364f; --l-rose: #651a35; --l-verre: rgba(255, 252, 248, .64);
  --l-g: clamp(20px, 5vw, 110px); --l-ease: cubic-bezier(.2, .8, .2, 1); --l-doux: cubic-bezier(.65, 0, .35, 1);
  --souffle: 0;
  position: fixed; inset: 0; z-index: 4; overflow-y: auto; overflow-x: hidden; visibility: hidden;
  color: var(--l-creme); font-family: var(--texte); font-size: clamp(17px, .3vw + .78vh + 8px, 25px); line-height: 1.5;
  font-variation-settings: 'opsz' 16; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior: contain;
  -webkit-font-smoothing: antialiased;
}
body.phase-eclosion #neuf, body.phase-neuf #neuf { visibility: visible; }
body.phase-eclosion #neuf { pointer-events: none; }
#neuf ::selection { background: #ffb99e; color: #1b1730; }
#neuf :focus-visible { outline: 3px solid var(--l-braise); outline-offset: 4px; border-radius: 6px; }
#neuf[data-encre="sombre"] :focus-visible { outline-color: var(--l-rose); }
#neuf .l-h1:focus, #neuf .l-ok-titre:focus { outline: none; }
#neuf h1, #neuf h2, #neuf h3, #neuf p { margin: 0; }
:where(#neuf) a { color: inherit; }
#neuf em { font-style: italic; }

/* repères */
.l-sur {
  display: inline-flex; align-items: center; gap: .9em; font-family: var(--titre); font-size: .7em; font-weight: 650; font-stretch: 88%;
  letter-spacing: .24em; text-transform: uppercase; color: var(--l-braise);
}
.l-sur::before { content: ''; width: 2.4em; height: 1px; background: currentColor; opacity: .7; }
.l-h2 { font-weight: 300; font-variation-settings: 'opsz' 72; font-size: clamp(42px, 5.4vw, 10.5vh); line-height: .98; letter-spacing: -.028em; margin-top: .35em; }
.l-h2 em { font-weight: 300; color: var(--l-braise); }

/* En-tête : il change d'encre avec le monde, et se pose sur du verre dès qu'on descend */
.l-tete {
  position: fixed; inset: 0 0 auto 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) var(--l-g) 14px; color: var(--l-creme); transition: color .6s, background-color .6s, backdrop-filter .6s, padding .6s var(--l-ease);
}
.l-tete.defile { background: rgba(9, 10, 28, .38); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); padding-block: 10px; }
.l-tete[data-encre="sombre"] { color: var(--l-encre); }
.l-tete.cache { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.l-tete[data-encre="sombre"].defile { background: rgba(255, 250, 246, .55); }
.l-marque { display: inline-flex; align-items: center; gap: .7em; text-decoration: none; min-height: 44px; }
.l-crosse { width: 2.1em; height: 2.1em; flex: none; }
.l-crosse path:first-child { stroke-dasharray: 120; stroke-dashoffset: 0; }
.l-marque-nom { display: flex; flex-direction: column; line-height: 1.05; }
.l-marque b { font-family: var(--texte); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -.01em; }
.l-marque i { font-family: var(--titre); font-style: normal; font-size: .58em; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; opacity: .82; margin-top: .25em; }
.l-nav { display: flex; align-items: center; gap: .3em; font-family: var(--titre); font-size: .78em; font-weight: 550; }
.l-nav a { display: none; position: relative; padding: .7em .9em; min-height: 44px; align-items: center; text-decoration: none; }
.l-nav a:not(.l-nav-rdv)::after { content: ''; position: absolute; left: .9em; right: .9em; bottom: .55em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--l-ease); }
.l-nav a:not(.l-nav-rdv):hover::after { transform: scaleX(1); transform-origin: left; }
.l-nav .l-nav-rdv { display: inline-flex; margin-left: .5em; padding: .7em 1.4em; border-radius: 999px; border: 1px solid currentColor; transition: background-color .4s, color .4s; }
.l-nav .l-nav-rdv:hover { background: var(--l-creme); color: var(--l-encre); border-color: var(--l-creme); }
.l-tete[data-encre="sombre"] .l-nav-rdv:hover { background: var(--l-encre); color: var(--l-creme); border-color: var(--l-encre); }
@media (min-width: 860px) { .l-nav a:not(.l-nav-rdv) { display: inline-flex; } }

/* Ouverture : la mer du soir, la perle, le titre qui respire */
.l-hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding: 0 var(--l-g) clamp(92px, 12.5vh, 190px); }
.l-lieu { display: flex; align-items: center; gap: 1em; font-family: var(--titre); font-size: .7em; font-weight: 600; font-stretch: 88%; letter-spacing: .24em; text-transform: uppercase; color: var(--l-creme); margin-bottom: 1.6em; }
.l-lieu-sep { width: 3.2em; height: 1px; background: currentColor; opacity: .6; }
.l-h1 {
  font-weight: 250; font-variation-settings: 'opsz' 72, 'wght' 250; font-size: min(clamp(64px, 10.6vw, 300px), 18.5vh); line-height: .88; letter-spacing: -.045em;
  outline: none; text-wrap: balance;
}
.l-ligne { display: block; overflow: hidden; padding: 0 .06em .07em 0; margin-bottom: -.07em; }
.l-ligne > span { display: inline-block; }
.l-respire-mot { font-style: italic; color: var(--l-braise); letter-spacing: -.035em; font-variation-settings: 'opsz' 72, 'wght' calc(230 + var(--souffle) * 170); display: inline-block; }
.l-hero-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6em 3em; margin-top: clamp(22px, 3.4vh, 60px); }
.l-chapo { max-width: 31ch; font-size: 1.08em; line-height: 1.45; color: var(--l-creme-doux); }
.l-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.l-btn {
  --ax: 0px; --ay: 0px; position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: max(54px, 2.9em); padding: .7em 1.55em;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--l-creme); color: var(--l-encre); font-family: var(--titre); font-weight: 650; font-size: .9em; letter-spacing: .005em;
  transform: translate(var(--ax), var(--ay)); transition: transform .5s var(--l-ease), background-color .4s, color .4s, box-shadow .5s;
  box-shadow: 0 20px 40px -22px rgba(255, 185, 158, .75);
}
.l-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 210, 190, .9) 48%, rgba(190, 230, 255, .8) 56%, transparent 72%); transform: translateX(-110%); transition: transform .9s var(--l-ease); }
.l-btn:hover::before { transform: translateX(110%); }
.l-btn svg { width: 1.15em; height: 1.15em; transition: transform .5s var(--l-ease); }
.l-btn:hover svg { transform: translateX(4px); }
.l-respire {
  --ax: 0px; --ay: 0px; display: inline-flex; align-items: center; gap: .75em; min-height: max(54px, 2.9em); padding: .5em 1.3em .5em .55em; border-radius: 999px; cursor: pointer;
  background: rgba(247, 241, 234, .06); border: 1px solid rgba(247, 241, 234, .42); color: var(--l-creme); font-family: var(--titre); font-weight: 600; font-size: .9em;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translate(var(--ax), var(--ay)); transition: transform .5s var(--l-ease), background-color .4s, border-color .4s;
}
.l-respire:hover { background: rgba(247, 241, 234, .14); border-color: var(--l-creme); }
.l-respire-rond { position: relative; width: 2.3em; height: 2.3em; flex: none; display: grid; place-items: center; }
.l-respire-rond svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-respire-arc { stroke-dasharray: 100; stroke-dashoffset: 100; }
.l-respire-rond i { width: .7em; height: .7em; border-radius: 50%; background: var(--l-braise); transform: scale(calc(.55 + var(--souffle) * .75)); box-shadow: 0 0 calc(4px + var(--souffle) * 14px) rgba(255, 185, 158, .8); }
.l-respire[aria-pressed="true"] { background: rgba(255, 185, 158, .16); border-color: var(--l-braise); }
.l-guide {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; font-family: var(--texte); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 3.6vw, 7vh); color: #fffaf4; letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 2px 30px rgba(20, 10, 40, .55);
  opacity: 0; transition: opacity .8s;
}
#neuf.guide-on .l-guide { opacity: 1; }
.l-dispo {
  position: absolute; right: var(--l-g); top: clamp(96px, 15vh, 240px); display: flex; align-items: center; gap: .85em; padding: .7em 1.1em .7em .9em; border-radius: 18px;
  background: rgba(12, 10, 32, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(247, 241, 234, .16);
  font-family: var(--titre); font-size: .74em; line-height: 1.3; color: var(--l-creme-doux);
}
.l-dispo b { display: block; color: var(--l-creme); font-weight: 650; }
.l-dispo-point { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #8ff0c8; flex: none; }
.l-dispo-point::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #8ff0c8; animation: pouls 2.6s ease-out infinite; }
@keyframes pouls { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.l-descendre { position: absolute; right: var(--l-g); bottom: clamp(90px, 11vh, 170px); display: none; flex-direction: column; align-items: center; gap: 1em; text-decoration: none;
  font-family: var(--titre); font-size: .66em; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; writing-mode: vertical-rl; color: var(--l-creme-doux); }
.l-descendre i { position: relative; width: 1px; height: 64px; background: rgba(247, 241, 234, .25); overflow: hidden; }
.l-descendre i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--l-creme); animation: goutte 2.4s var(--l-doux) infinite; }
@keyframes goutte { to { top: 100%; } }
@media (min-width: 900px) { .l-descendre { display: flex; } .l-hero-bas { padding-right: 4em; } }
@media (max-width: 899px) {
  .l-hero { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .l-dispo { display: none; }
  .l-hero::before { content: ''; position: absolute; inset: 38% 0 -22vh; pointer-events: none; background: linear-gradient(rgba(8, 6, 26, 0), rgba(8, 6, 26, .5) 22%, rgba(8, 6, 26, .62) 62%, rgba(8, 6, 26, 0)); }
  .l-hero > * { position: relative; }
  .l-guide { position: fixed; }
  .l-h1 { font-size: min(18.2vw, 11.5vh); }
  .l-chapo { font-size: 1em; }
  .l-lieu { margin-bottom: 1.2em; font-size: .6em; letter-spacing: .18em; gap: .7em; }
  .l-lieu-sep { width: 1.8em; }
}

/* Pour qui : la phrase s'allume mot après mot, pendant qu'on plonge */
.l-pourqui { position: relative; min-height: 128vh; padding: 40vh var(--l-g) 24vh; }
/* repères de la surface : la ligne d'eau passe près d'eux, jamais sur un texte */
.l-surface { position: absolute; left: 0; top: 16vh; width: 1px; height: 1px; pointer-events: none; }
.l-rdv > .l-surface { top: 4vh; }
.l-grand {
  margin-top: .7em !important; max-width: 17.5em; font-weight: 300; font-variation-settings: 'opsz' 72; font-size: clamp(31px, 4.5vw, 8.8vh); line-height: 1.12; letter-spacing: -.022em;
  color: var(--l-eteint);
}
.l-mot { transition: color .7s var(--l-ease); }
.l-mot.allume { color: var(--l-creme); }
.l-grand em .l-mot.allume { color: var(--l-braise); }

/* Séances : trois bulles d'air qui remontent */
.l-seances { position: relative; padding: 14vh var(--l-g) 22vh; }
.l-seances .l-tete-section { text-align: center; }
.l-bulles { list-style: none; margin: clamp(48px, 10vh, 160px) auto 0; padding: 0; width: min(100%, 158vh, 1800px); display: grid; gap: clamp(28px, 4vh, 60px); }
.l-bulle {
  --monte: 0px; position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; justify-self: center; overflow: hidden;
  translate: 0 var(--monte);
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, .08) 16%, transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(10, 30, 50, .42) 0 55%, rgba(120, 220, 230, .1) 80%, rgba(220, 245, 255, .26) 98%, rgba(255, 255, 255, .45) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.5); backdrop-filter: blur(9px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 -50px 90px -50px rgba(110, 231, 210, .55), inset 0 40px 80px -60px rgba(255, 170, 210, .6), 0 60px 110px -60px rgba(0, 0, 0, .8);
  transition: transform 1s var(--l-ease);
}
.l-bulle::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 2px; pointer-events: none;
  background: conic-gradient(from 0deg, #ffb3d1, #ffe2a8, #a8f5d8, #a8d8ff, #d9b3ff, #ffb3d1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75; animation: tourne 14s linear infinite;
}
.l-bulle::after { content: ''; position: absolute; left: 17%; top: 8%; width: 17%; height: 8%; border-radius: 50%; background: rgba(255, 255, 255, .4); filter: blur(5px); transform: rotate(-32deg); pointer-events: none; }
@keyframes tourne { to { transform: rotate(1turn); } }
.l-bulle:hover { transform: scale(1.035); }
.l-bulle:hover::before { animation-duration: 5s; }
.l-bulle-in { position: absolute; inset: 14% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .55em; }
.l-bulle h3 { font-style: italic; font-weight: 400; font-variation-settings: 'opsz' 48; font-size: 1.45em; line-height: 1.05; letter-spacing: -.015em; }
.l-bulle p { font-size: .86em; line-height: 1.4; color: var(--l-creme-doux); max-width: 21ch; }
.l-bulle .l-meta { font-family: var(--titre); font-size: .62em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--l-braise); }
.l-bulle-bas { display: flex; align-items: center; gap: .9em; margin-top: .3em; }
.l-bulle .l-prix { font-weight: 300; font-variation-settings: 'opsz' 72; font-size: 2.15em; line-height: 1; letter-spacing: -.03em; color: var(--l-creme); max-width: none; }
.l-lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; border-radius: 999px; text-decoration: none;
  font-family: var(--titre); font-size: .74em; font-weight: 650; background: var(--l-creme); color: var(--l-encre); transition: background-color .4s, transform .4s var(--l-ease);
}
.l-lien:hover { background: var(--l-braise); transform: translateY(-2px); }
.l-remb { margin: clamp(40px, 8vh, 120px) auto 0 !important; max-width: 34ch; text-align: center; font-style: italic; color: var(--l-creme-doux); }
@media (min-width: 900px) {
  .l-bulles { grid-template-columns: repeat(3, 1fr); align-items: start; gap: 2.4vw; }
  .l-bulles { gap: 1.6vw; }
  .l-bulle { width: min(100%, 58vh, 760px); font-size: clamp(17px, .45vw + 1.15vh, 28px); }
  .l-bulle:nth-child(2) { margin-top: 16vh; }
  .l-bulle:nth-child(3) { margin-top: 5vh; }
}
@media (max-width: 899px) {
  .l-bulle { width: min(92vw, 400px); }
  .l-bulle:nth-child(odd) { justify-self: start; }
  .l-bulle:nth-child(even) { justify-self: end; }
  .l-bulle-in { inset: 12% 10%; }
}

/* Mon approche : au fond, dans le calme */
.l-approche { position: relative; min-height: 160vh; padding: 30vh var(--l-g) 46vh; text-align: center; }
.l-citation {
  margin: .8em auto 0 !important; max-width: 19ch; font-weight: 300; font-variation-settings: 'opsz' 72; font-size: clamp(34px, 5.1vw, 9.6vh); line-height: 1.08; letter-spacing: -.025em;
  color: var(--l-eteint); text-wrap: balance;
}
.l-citation em .l-mot.allume { color: var(--l-braise); }
.l-signature { margin-top: 1.6em !important; font-style: italic; color: var(--l-creme-doux); }
.l-piliers { list-style: none; padding: 0; margin: clamp(80px, 16vh, 240px) auto 0; width: min(100%, 1400px); display: grid; gap: clamp(36px, 6vh, 70px) 4vw; text-align: center; }
.l-piliers li { display: flex; flex-direction: column; align-items: center; gap: .55em; }
.l-piliers svg { width: 3.4em; height: 3.4em; fill: none; stroke: var(--l-braise); stroke-width: 1.4; stroke-linecap: round; margin-bottom: .4em; }
.l-piliers svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--l-ease) calc(var(--i, 0) * .2s + .2s); }
.l-piliers li.vu svg * { stroke-dashoffset: 0; }
.l-piliers b { font-style: italic; font-weight: 400; font-size: 1.5em; line-height: 1.1; }
.l-piliers span { color: var(--l-creme-doux); max-width: 24ch; }
@media (min-width: 760px) { .l-piliers { grid-template-columns: repeat(3, 1fr); } }

/* Réservation : on remonte dans l'aube */
.l-rdv { position: relative; color: var(--l-encre); padding: 30vh var(--l-g) 14vh; }
#neuf .l-rdv .l-sur, #neuf .l-infos .l-sur { color: var(--l-rose); }
.l-rdv .l-h2 em, .l-infos .l-h2 em { color: var(--l-rose); }
.l-rdv-intro { margin-top: 1.1em !important; max-width: 32ch; color: var(--l-encre-doux); }
.l-rdv-plus { list-style: none; padding: 0; margin: 1.6em 0 0; display: grid; gap: .55em; font-family: var(--titre); font-size: .8em; font-weight: 550; color: var(--l-encre); }
.l-rdv-plus li { display: flex; align-items: center; gap: .7em; }
.l-rdv-plus li::before { content: ''; width: 1.25em; height: 1.25em; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--l-rose) 0 28%, transparent 31%), rgba(147, 50, 79, .12); }
.l-resa {
  position: relative; margin-top: clamp(36px, 6vh, 80px); padding: clamp(18px, 2.4vw, 44px); border-radius: clamp(24px, 2vw, 36px);
  background: var(--l-verre); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 50px 100px -50px rgba(60, 30, 90, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
  font-family: var(--titre); font-size: .9em;
}
@media (min-width: 1000px) {
  .l-rdv { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 0 6vw; align-items: start; }
  .l-rdv-tete { position: sticky; top: 18vh; }
  .l-resa { margin-top: 0; }
}
.l-resa-choix { display: grid; gap: 1.5em; }
.l-pas-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .75em !important; font-size: .72em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--l-encre-doux); }
.l-pas-titre span { letter-spacing: .02em; text-transform: none; font-weight: 500; }
.l-types { position: relative; display: grid; gap: 6px; padding: 6px; border-radius: 20px; background: rgba(27, 23, 48, .07); }
@media (min-width: 560px) { .l-types { grid-template-columns: repeat(3, 1fr); } }
.l-types-curseur { position: absolute; left: 0; top: 0; border-radius: 15px; background: #fffdfb; box-shadow: 0 10px 24px -12px rgba(60, 30, 90, .45), 0 0 0 1px rgba(147, 50, 79, .35); pointer-events: none; }
.l-types-curseur.pret { transition: transform .55s var(--l-ease), width .55s var(--l-ease), height .55s var(--l-ease); }
.l-type { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: .6em; min-height: 52px; padding: .7em 1em; border: 0; border-radius: 15px; background: transparent; cursor: pointer; text-align: left; font-weight: 650; color: var(--l-encre-doux); transition: color .3s; }
.l-type small { font-size: .8em; font-weight: 500; color: var(--l-encre-doux); }
.l-type[aria-pressed="true"] { color: var(--l-encre); }
@media (min-width: 560px) { .l-type { flex-direction: column; align-items: flex-start; justify-content: center; gap: .2em; } }
.l-jours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.l-jour {
  display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .65em .2em .6em; min-height: 52px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(27, 23, 48, .14); background: rgba(255, 255, 255, .55); color: var(--l-encre); transition: background-color .35s, color .35s, transform .35s var(--l-ease), border-color .35s;
}
.l-jour span { font-size: .72em; font-weight: 600; letter-spacing: .06em; color: var(--l-encre-doux); }
.l-jour b { font-family: var(--texte); font-weight: 350; font-variation-settings: 'opsz' 48; font-size: 2em; line-height: 1; }
.l-jour i { font-style: normal; font-size: .68em; color: var(--l-encre-doux); }
.l-jour:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(27, 23, 48, .4); }
.l-jour[aria-pressed="true"] { background: var(--l-encre); color: var(--l-creme); border-color: var(--l-encre); }
.l-jour[aria-pressed="true"] span, .l-jour[aria-pressed="true"] i { color: #d8d2e6; }
.l-jour:disabled { cursor: not-allowed; opacity: .5; background: transparent; }
.l-creneaux { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; }
.l-creneau {
  min-height: 46px; min-width: 5.4em; padding: 0 1.1em; border-radius: 999px; cursor: pointer; font-weight: 600;
  border: 1px solid rgba(27, 23, 48, .2); background: rgba(255, 255, 255, .6); color: var(--l-encre);
  animation: creneau .6s var(--l-ease) both; animation-delay: calc(var(--i) * 50ms); transition: background-color .3s, color .3s, border-color .3s;
}
@keyframes creneau { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.l-creneau:hover:not(:disabled) { border-color: var(--l-rose); }
.l-creneau[aria-pressed="true"] { background: var(--l-rose); border-color: var(--l-rose); color: #fff; }
.l-creneau:disabled { text-decoration: line-through; opacity: .5; cursor: not-allowed; }
.l-resa-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.6em; padding-top: 1.3em; border-top: 1px solid rgba(27, 23, 48, .12); }
.l-resume { flex: 1 1 16em; font-size: .92em; color: var(--l-encre-doux); }
.l-resume b { color: var(--l-encre); }
.l-btn-encre { background: var(--l-encre); color: var(--l-creme); box-shadow: 0 20px 40px -22px rgba(27, 23, 48, .8); }
.l-btn-encre:disabled { background: rgba(27, 23, 48, .12); color: var(--l-encre-doux); box-shadow: none; cursor: not-allowed; }
.l-btn-encre:disabled::before { display: none; }
.l-btn-doux { background: transparent; color: var(--l-encre); box-shadow: inset 0 0 0 1px rgba(27, 23, 48, .3); }
.l-ok {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .7em;
  padding: 1.5em; border-radius: inherit; background: rgba(255, 251, 247, .96); color: var(--l-encre);
}
.l-ok:not([hidden]) { animation: ok .7s var(--l-ease) both; }
@keyframes ok { from { opacity: 0; transform: scale(.97); } }
.l-ok svg { width: 4em; height: 4em; color: var(--l-rose); }
.l-ok svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.1s var(--l-ease) .15s forwards; }
.l-ok svg path { animation-delay: .6s; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.l-ok-titre { font-family: var(--texte); font-style: italic; font-weight: 350; font-size: 2.3em; line-height: 1; outline: none; }
.l-ok-texte { max-width: 30ch; color: var(--l-encre-doux); }
.l-note { margin-top: 1.4em !important; font-size: .78em; color: var(--l-encre-doux); }

/* Le cabinet : le plan dans un hublot */
.l-infos { position: relative; color: var(--l-encre); padding: 12vh var(--l-g) 10vh; display: grid; gap: clamp(36px, 6vh, 90px) 7vw; align-items: center; }
@media (min-width: 900px) { .l-infos { grid-template-columns: auto minmax(0, 1fr); } }
.l-hublot {
  position: relative; width: min(84vw, 64vh, 720px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; justify-self: center;
  box-shadow: 0 0 0 clamp(8px, 1vw, 14px) rgba(255, 255, 255, .5), 0 0 0 calc(clamp(8px, 1vw, 14px) + 1px) rgba(27, 23, 48, .16), 0 60px 120px -60px rgba(60, 30, 90, .55);
}
.l-hublot svg { display: block; width: 100%; height: 100%; }
.l-hublot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 32%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(40, 30, 80, .16) 100%); }
.l-epingle { animation: epingle 3.2s var(--l-doux) infinite; transform-origin: 233px 217px; }
@keyframes epingle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.l-dl { margin: 1.8em 0 0; }
.l-dl > div { display: grid; grid-template-columns: minmax(6.5em, .32fr) 1fr; gap: 1em; padding: 1.05em 0; border-top: 1px solid rgba(27, 23, 48, .14); }
.l-dl dt { font-family: var(--titre); font-size: .7em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--l-encre-doux); padding-top: .35em; }
.l-dl dd { margin: 0; }

/* Pied : le nom, en grand */
.l-pied { position: relative; color: var(--l-encre); padding: 14vh var(--l-g) calc(110px + 6vh); text-align: center; overflow: hidden; }
.l-pied-mot { font-weight: 250; font-variation-settings: 'opsz' 72; font-size: min(16.5vw, 32vh); line-height: .86; letter-spacing: -.05em; white-space: nowrap; }
.l-pied-mot em { color: var(--l-rose); font-weight: 250; }
.l-pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em 3em; margin-top: 3.5em; padding-top: 1.4em; border-top: 1px solid rgba(27, 23, 48, .16); text-align: left; font-size: .82em; }
.l-pied-note { max-width: 46ch; color: var(--l-encre-doux); font-style: italic; }

/* Apparitions au défilement */
.l-vue { opacity: 0; transform: translateY(42px); transition: opacity 1.1s var(--l-ease), transform 1.3s var(--l-ease); transition-delay: calc(var(--i, 0) * 90ms); }
.l-vue.vu { opacity: 1; transform: none; }
.l-bulle.l-vue { transform: translateY(80px) scale(.86); transition: opacity 1.2s var(--l-ease), transform 1.6s cubic-bezier(.2, 1.15, .3, 1); transition-delay: calc(var(--i, 0) * 120ms); }
.l-bulle.l-vue.vu { transform: none; }
.l-bulle.l-vue.vu:hover { transform: scale(1.035); }

/* L'éclosion : le site se pose dans la lumière du portail (transitions : #neuf perd « l-avant ») */
.l-ligne > span { transition: transform 1.5s var(--l-ease); }
.l-ligne:nth-child(1) > span { transition-delay: .1s; }
.l-ligne:nth-child(2) > span { transition-delay: .26s; }
.l-entre { transition: opacity 1.3s var(--l-ease), transform 1.3s var(--l-ease); }
.l-lieu { transition-delay: 0s; }
.l-chapo { transition-delay: .5s; }
.l-actions { transition-delay: .64s; }
.l-dispo { transition-delay: .9s; }
.l-descendre { transition-delay: 1.1s; }
.l-tete { transition: color .6s, background-color .6s, padding .6s var(--l-ease), opacity .6s var(--l-ease), transform .6s var(--l-ease); }
.l-crosse path:first-child { transition: stroke-dashoffset 2.2s var(--l-ease) .7s; }
#neuf.l-avant .l-ligne > span { transform: translateY(108%) rotate(3deg); }
#neuf.l-avant .l-entre { opacity: 0; transform: translateY(30px); }
#neuf.l-avant .l-tete { opacity: 0; transform: translateY(-18px); }
#neuf.l-avant .l-crosse path:first-child { stroke-dashoffset: 120; }

/* Sans WebGL : le même voyage, en dégradés */
#neuf.sans-gl { background: #0b0a22; }
.sans-gl .l-hero { background: radial-gradient(circle at 70% 44%, #fff1e2 0 8vmin, #f7b08d 11vmin, rgba(150, 70, 110, .55) 20vmin, transparent 38vmin), linear-gradient(#0b0b22 0%, #261a46 40%, #5a2f5e 63.8%, #12112c 64%, #0a0a1e 100%); }
.sans-gl .l-pourqui { background: linear-gradient(#0a0a1e, #145060 6%, #0d3446 60%, #08263a); }
.sans-gl .l-seances { background: linear-gradient(#08263a, #061a2c); }
.sans-gl .l-approche { background: radial-gradient(50% 40% at 50% 50%, rgba(80, 200, 180, .12), transparent 70%), linear-gradient(#061a2c, #020a18 40%, #020a18 70%, #2c3d6a 96%, #c7c9ea 100%); }
.sans-gl .l-rdv, .sans-gl .l-infos { background: linear-gradient(#c7c9ea, #eed8d6 60%, #f8e3cf); }
.sans-gl .l-pied { background: radial-gradient(circle at 50% 70%, #fff3df 0 12vmin, #fbd8b6 18vmin, transparent 40vmin), linear-gradient(#f8e3cf, #f3d3c6); }

/* La fin : retour chez Kazura */
.fin { font-family: var(--titre); position: relative; overflow: hidden; isolation: isolate; background: var(--nuit); color: var(--ink); text-align: center; padding: clamp(80px, 14vh, 200px) var(--l-g) clamp(120px, 17vh, 220px); }
.fin-lueur { position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 34% at 50% 34%, rgba(16, 185, 129, .3), transparent 70%), radial-gradient(34% 30% at 18% 78%, rgba(139, 92, 246, .26), transparent 70%), radial-gradient(30% 28% at 84% 72%, rgba(233, 201, 135, .14), transparent 70%);
  animation: lueur 16s ease-in-out infinite alternate; }
@keyframes lueur { to { transform: translate(3%, -2%) scale(1.06); } }
.fin-sur { margin: 0; font-family: var(--mono); font-size: .76em; letter-spacing: .2em; text-transform: uppercase; color: var(--jade-clair); }
.fin-duo { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 44px); margin: clamp(26px, 5vh, 60px) auto clamp(36px, 6vh, 80px); }
.fin-duo figure { margin: 0; flex: 0 1 auto; }
.fin-duo figcaption { margin-top: 1em; font-family: var(--mono); font-size: .78em; color: var(--ink-doux); letter-spacing: .08em; }
.fin-avant img { display: block; width: clamp(118px, 24vw, 380px); height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; background: #8fa9c4;
  border: 3px solid #d4d0c8; box-shadow: 1px 1px 0 #404040, 8px 10px 0 rgba(0, 0, 0, .45); transform: rotate(-5deg); filter: saturate(1.1); }
.fin-fleche { width: clamp(46px, 8vw, 130px); height: auto; color: var(--jade-clair); flex: none; overflow: visible; }
.fin-tige { stroke-dasharray: 130; stroke-dashoffset: 0; }
.fin-mini { position: relative; width: clamp(118px, 24vw, 380px); aspect-ratio: 4 / 3; border-radius: clamp(8px, 1.2vw, 16px); overflow: hidden; transform: rotate(4deg);
  background: radial-gradient(circle at 68% 42%, #fff1e2 0 9%, #f7b08d 14%, rgba(150, 70, 110, .5) 26%, transparent 46%), linear-gradient(#0b0b22, #3a2350 60%, #12112c 60.5%, #0a0a1e);
  box-shadow: 0 30px 70px -24px rgba(255, 185, 158, .45), 0 0 0 1px rgba(255, 255, 255, .14); }
.fin-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fin-mini img:not([src]) { display: none; }
.fin-mini-titre { position: absolute; left: 8%; bottom: 9%; font-family: var(--texte); font-weight: 300; font-variation-settings: 'opsz' 72; color: #f7f1ea; font-size: clamp(13px, 2.4vw, 38px); line-height: .92; letter-spacing: -.035em; text-align: left; }
.fin-mini-titre em { display: block; font-style: italic; color: #ffb99e; }
.fin.vu .fin-avant { animation: fin-avant 1s var(--l-ease) both; }
.fin.vu .fin-apres { animation: fin-apres 1s var(--l-ease) .5s both; }
.fin.vu .fin-tige { animation: trace-tige 1s var(--l-ease) .3s both; }
@keyframes fin-avant { from { opacity: 0; transform: translateX(-30px) rotate(-8deg); } }
@keyframes fin-apres { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes trace-tige { from { stroke-dashoffset: 130; } }
.fin-titre { margin: 0 auto .55em; max-width: 17ch; font-weight: 750; font-stretch: 80%; font-size: clamp(38px, 2.5vw + 3.4vh, 140px); line-height: 1; letter-spacing: -.012em; }
.fin-titre span { display: block; }
.fin-titre em { display: block; margin-top: .14em; font-style: normal; color: var(--jade-clair); }
.fin-texte { font-family: var(--texte); font-size: 1.24em; line-height: 1.45; color: var(--ink-doux); max-width: 36ch; margin: 0 auto 1.9em; }
.fin-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.fin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: max(54px, 3em); padding: .7em 1.6em; border-radius: 999px; cursor: pointer;
  background: var(--jade-clair); color: #04261a; text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: 1.02em; border: 2px solid var(--jade-clair);
  box-shadow: 0 18px 40px -18px rgba(110, 231, 183, .7); transition: transform .3s var(--l-ease), background .3s, color .3s, border-color .3s;
}
.fin-btn svg { width: 1.15em; height: 1.15em; transition: transform .35s var(--l-ease); }
.fin-btn:hover { transform: translateY(-2px); background: #a7f3d0; border-color: #a7f3d0; }
.fin-btn:hover svg { transform: translateX(4px); }
.fin-btn-doux { background: transparent; color: var(--ink); border-color: rgba(238, 240, 234, .38); box-shadow: none; }
.fin-btn-doux:hover { background: rgba(238, 240, 234, .08); border-color: var(--ink); }
.fin-btn-doux:hover svg { transform: rotate(-200deg); }

/* Le bandeau Kazura, en bas du site de Lila */
.bandeau-k {
  font-family: var(--titre); position: fixed; left: 50%; translate: -50% 0; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 4; width: max-content; max-width: calc(100% - 20px);
  display: flex; align-items: center; gap: .9em; padding: 6px 6px 6px 14px; border-radius: 999px; font-size: .8em;
  background: rgba(10, 12, 16, .9); color: var(--ink-doux); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .5s, transform .6s var(--l-ease);
}
.bk-mot { display: inline-flex; align-items: center; gap: .55em; }
.bk-mot svg { width: 1.5em; height: 1.5em; color: var(--jade-clair); flex: none; }
.bandeau-k a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; border-radius: 999px; background: var(--jade-clair); color: #04261a; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 399px) { .bk-long { display: none; } }
.bandeau-k.cache { opacity: 0; transform: translateY(24px); pointer-events: none; }

.sans-js { position: fixed; inset: 0; z-index: 20; background: var(--nuit); color: var(--ink); display: grid; place-content: center; text-align: center; padding: 24px; font-size: 18px; }
.sans-js a { color: var(--jade-clair); }

/* Mouvement réduit : on adoucit, on ne coupe pas. */
@media (prefers-reduced-motion: reduce) {
  #nuit img { animation-duration: 12s; }
  .bulle { animation: none; }
  .dialogue { animation: apparait .6s ease-out; }
  @keyframes apparait { from { opacity: 0; } }
  #neuf { scroll-behavior: auto; }
  .l-vue, .l-bulle.l-vue { transform: none; transition: opacity 1.4s ease; }
  .l-bulle::before { animation-duration: 40s; }
  .l-bulle:hover, .l-bulle.l-vue.vu:hover { transform: none; }
  .l-dispo-point::after { animation-duration: 6s; }
  .l-descendre i::after { animation-duration: 6s; }
  .l-epingle { animation-duration: 9s; }
  .l-mot { transition-duration: 1.4s; }
  #neuf.l-avant .l-ligne > span, #neuf.l-avant .l-entre, #neuf.l-avant .l-tete { transform: none; }
  .l-ligne > span, .l-entre { transition-duration: 1.8s; }
  .l-creneau { animation-name: apparait; }
  .l-btn, .l-respire, .l-btn svg, .fin-btn, .fin-btn svg { transition-duration: .6s; }
  .fin.vu .fin-avant, .fin.vu .fin-apres { animation-name: apparait; animation-duration: 1.4s; }
  .fin-lueur { animation-duration: 40s; }
}

/* Passage vers le nouveau site */
.hud { transition: opacity .8s; }
body.phase-liane .hud, body.phase-eclosion .hud { opacity: 0; pointer-events: none; }
body.phase-liane #nuit img, body.phase-eclosion #nuit img { opacity: 0; transition: opacity 1.4s; animation: none; transform: translate(-50%, -50%); }

/* Grands écrans et ultra-larges : les tailles suivent aussi la hauteur */
:root { --barre-h: clamp(78px, 7.2vh, 108px); --hud-h: clamp(54px, 5.2vh, 78px); }
.hud-retour { font-size: clamp(15px, 1.35vh, 21px); }
.hud-retour svg { width: 1.7em; height: 1.7em; }
.hud-ruine { font-size: clamp(13px, 1.2vh, 19px); }
.hud-ruine-barre { width: 5.6em; }
.outil { font-size: clamp(13px, 1.25vh, 19px); }
.outil svg { width: 1.8em; height: 1.8em; }
@media (min-width: 760px) { .outil { font-size: clamp(15px, 1.45vh, 21px); min-height: clamp(56px, 5.6vh, 80px); padding: 8px 1.2em; } }
.bulle { font-size: clamp(14.5px, 1.35vh, 21px); max-width: min(16em, 62vw); }
.dialogue { width: min(calc(100vw - 32px), clamp(400px, 30vh + 200px, 760px)); font-size: clamp(15px, .75vh + 8px, 22px); }
.dlg-icone { width: 2.6em; height: 2.6em; }
.dlg-btn { font-size: inherit; min-width: 8.5em; min-height: max(44px, 2.8em); }
.dlg-x { width: 1.9em; height: 1.65em; }
#neuf { display: none; }
body.neuf-pret #neuf { display: block; }
body:not(.phase-neuf) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }