/* Kivenro v3 — the story (developer B).
   Dark ground, one red, light film grain. Anton for numbers and short titles, Instrument Sans for the rest.
   html.kv-on  = the experience (story.js running). Without it, the page is a readable static document. */

@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("media/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("media/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo: used by the app's titles (app.css names it; the host page declares it). Downloaded only if used. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("media/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("media/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0B0B0C;
  --bg-2: #141415;
  --ink: #F2EFEA;
  --mute: #8E8A84;
  --line: rgba(242, 239, 234, .12);
  --red: #FF3B2F;
  --green: #008F5F;
  --mur: #0B0B0C;                 /* the app's corner caps take the page ground */
  --display: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif-condensed, sans-serif;
  --text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --gut: 20px;
  --S: 100vh;
  --LH: 100vh;
  /* one type scale */
  --t-xs: 12px;
  --t-s: 15px;
  --t-m: 17px;
  --d-s: clamp(28px, 7.8vw, 40px);
  --d-m: clamp(40px, 11vw, 72px);
  --d-l: clamp(56px, 16vw, 112px);
  --d-xl: clamp(92px, 27vw, 200px);
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-s)/1.45 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;   /* no overflow on body: it would become a scroller and break sticky on old Safari */
}
p, h1, h2, h3, ol, ul, li { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.probe { position: fixed; top: 0; left: 0; width: 0; visibility: hidden; pointer-events: none; }
#vh-s { height: 100vh; height: 100svh; }
#vh-l { height: 100vh; height: 100lvh; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------------------------------------- grain */
.grain {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .085;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -2.6 1.45'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ============================================================================================== experience */
html.js:not(.kv-on):not(.kv-fail) #story,
html.js:not(.kv-on):not(.kv-fail) #dock { visibility: hidden; }

html.kv-on #run { position: relative; height: calc(var(--runL, 1500vh) + var(--LH)); }
html.kv-on #stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: var(--LH);
  overflow: hidden; overflow: clip;
  background: var(--bg);
  contain: layout paint;
}
html.kv-on .sc { position: absolute; inset: 0; }
html.kv-on .reels { display: none; }

/* ---------------------------------------------------------------------------------------------- 1 · ouverture */
html.kv-on .sc-open { pointer-events: none; }   /* no stacking context: « REGARDE » blends with the stage */
.op-box {
  position: absolute; left: var(--gut); right: var(--gut);
  top: var(--opTop, calc(var(--S) * .27));
  max-width: 1180px;
}
.op-l1 {
  font: 400 var(--opF1, clamp(30px, 8.4vw, 60px))/1.14 var(--display);   /* room for the accents of line 2 (É, À) under line 1 */
  text-transform: uppercase; letter-spacing: .004em;
  color: var(--ink);
  max-width: 15.5em;
}
.op-l2 {
  margin-top: .1em;
  font: 400 var(--opF2, var(--d-xl))/.9 var(--display);
  text-transform: uppercase; letter-spacing: -.004em;
  white-space: nowrap;
}
.op-dot { color: var(--red); }
.op-ghost { visibility: hidden; }
html.kv-on .op-knock {
  position: absolute; inset: 0; z-index: 6;
  background: #0B0B0C;            /* « écran noir », the page ground: multiplied over the white floor (or the opaque clip, at most #0B0B0C) it stays the ground; white letters let the clip through */
  mix-blend-mode: multiply;
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}
html.kv-on .op-knock .op-l2 { color: #0B0B0C; }
.op-floor { display: none; }
html.kv-on .op-floor { display: block; position: absolute; inset: 0; z-index: 0; background: #FFFFFF; visibility: hidden; pointer-events: none; }
html.kv-on .op-knock.is-fill .op-l2 { color: #FFFFFF; }
html.kv-on .op-solid { position: absolute; inset: 0; z-index: 7; }
html.kv-on .op-solid .ch { visibility: hidden; }
html.kv-on .op-solid .ch.on { visibility: inherit; }   /* inherit: hiding chapter 1 hides the typed letters too (a jump, a reload mid-page) */
html.kv-on.rm .op-solid.is-in .op-box { animation: kv-fade .18s linear both; }
.op-caret {
  position: absolute; left: 0; top: 0; width: 4px; height: 30px;
  background: var(--red); border-radius: 1px;
  opacity: 0;
}
html.kv-on .op-caret.on { opacity: 1; }
html.kv-on:not(.rm) .op-caret.blink { animation: kv-blink 1.06s steps(1) infinite; }
@keyframes kv-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes kv-fade { from { opacity: 0; } to { opacity: 1; } }

.op-glisse {
  position: absolute; z-index: 7; left: var(--gut); top: var(--glTop, calc(var(--S) - 128px));
  display: flex; align-items: center; gap: 12px;
  color: var(--mute); font: 600 var(--t-xs)/1 var(--text); letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity .5s linear;
}
html.rm .op-glisse { transition-duration: .15s; }
.op-glisse.on { opacity: 1; }
.op-glisse.gone { opacity: 0; transition-duration: .2s; }
.op-glisse__track { position: relative; width: 2px; height: 46px; border-radius: 1px; background: var(--line); overflow: hidden; }
.op-glisse__track i { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; border-radius: 1px; background: var(--ink); transform: translateY(0); }
html.kv-on:not(.rm) .op-glisse.on:not(.gone) .op-glisse__track i { animation: kv-glisse 1.7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes kv-glisse {
  0% { transform: translateY(18px); opacity: 0; }
  25% { opacity: 1; }
  80% { transform: translateY(-46px); opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}

/* ---------------------------------------------------------------------------------------------- 2 · the wall */
html.kv-on .wall {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;
  opacity: 0; visibility: hidden;
  transform-origin: var(--wfx, 50%) var(--wfy, 50%);
  will-change: transform, opacity;
}
.col { position: absolute; left: 0; top: 0; will-change: transform; }
.tile {
  position: absolute; left: 0; top: 0; width: var(--t, 96px); height: var(--t, 96px);
  border-radius: var(--tr, 3px); overflow: hidden; background: #19191a;
}
.tile.is-live { transform: translateZ(0); }   /* only the playing tiles get their own layer (rounded video clip); the stills ride their column's layer */
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wall.is-off .tile.is-fl, .wall .tile.is-hero > * { visibility: hidden; }
.views {
  position: absolute; left: 6px; bottom: 6px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 11px/1 var(--text); color: #FFFFFF; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .35);
  font-variant-numeric: tabular-nums;
}
.views svg { width: 8px; height: 9px; fill: #FFFFFF; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.wall__dim { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }

html.kv-on .hero {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: var(--VW, 100vw); height: var(--LH);
  transform-origin: 0 0; overflow: hidden;
  opacity: 0; visibility: hidden;
  will-change: transform;
}
.hero__in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hero__v { width: 100%; height: 100%; object-fit: cover; background: #19191a; }

html.kv-on .sc-wall { z-index: 8; pointer-events: none; }
.band {
  position: absolute; left: 0; right: 0; top: var(--bandTop, calc(var(--S) * .52));
  background: rgba(11, 11, 12, .82);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px var(--gut) 18px;
  transform-origin: 50% 50%;
  opacity: 0; will-change: transform, opacity;
}
.band__k { font: 600 var(--t-xs)/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.band__win { position: relative; height: var(--bandWin, 150px); overflow: hidden; }
.cnt { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.cnt__n {
  font: 400 var(--d-l)/.92 var(--display); color: var(--ink);
  white-space: nowrap; height: .92em; overflow: hidden;
  font-feature-settings: "tnum" 1;
}
.cnt__t { margin-top: 10px; font: 500 var(--t-m)/1.3 var(--text); color: var(--ink); opacity: .82; }
.od { display: inline-flex; align-items: flex-start; }
.od-d { display: inline-block; height: .92em; overflow: hidden; text-align: center; }
.od-s { display: block; will-change: transform; }
.od-s > span { display: block; height: 1.4em; line-height: 1.4em; }   /* spaced wider than the .92em window: no neighbour bleeds in */
.od-c { display: block; height: .92em; line-height: .92em; }
.od-c { display: inline-block; }
.od-sp { display: inline-block; width: .16em; }

/* ---------------------------------------------------------------------------------------------- 3 · 4 · 5 · the phone */
html.kv-on .phone {
  position: absolute; left: 0; top: 0; z-index: 20;
  width: var(--cw, 340px); height: var(--ch, 700px);
  transform-origin: 0 0;
  visibility: hidden;
}
html.kv-on .phone.is-anim { will-change: transform; }
#kv-mount { position: absolute; left: 0; top: 0; opacity: 0; }
.phone__shell {
  /* the titanium band: a plain gradient 3px wider than the app's black glass border, which covers its middle
     (no mask: a masked ring cost a long raster on the frame the phone first shows) */
  position: absolute; inset: -15px; border-radius: 61px;
  background: linear-gradient(152deg, #A5A39E 0%, #5E5C57 9%, #2E2D2B 24%, #1E1D1C 50%, #33322F 74%, #6B6964 90%, #A09E99 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 26px 30px -14px rgba(0, 0, 0, .9);   /* the phone's only drop shadow: a short blur */
  opacity: 0;
}
/* in the story the shell above draws the band and the buttons: the app's own (masked ring, side buttons) are not painted */
#kv-mount .kv-bezel::before, #kv-mount .kv-bezel::after { display: none; }
.pb { position: absolute; width: 4px; border-radius: 2px; background: #262626; box-shadow: inset 0 0 0 1px rgba(242, 239, 234, .10); }
.pb--a { left: -3px; top: 121px; height: 30px; }
.pb--b { left: -3px; top: 173px; height: 56px; }
.pb--c { left: -3px; top: 241px; height: 56px; }
.pb--d { right: -3px; top: 191px; height: 88px; }
.phone__off {
  position: absolute; inset: 0; border-radius: 46px; background: #060607;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 234, .05);
  opacity: 0; pointer-events: none;
}
.phone__glow {   /* the screen's bloom: a pre-softened gradient, not a blurred shadow (cheap to raster) */
  position: absolute; inset: -90px -110px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 239, 234, .22), rgba(242, 239, 234, .09) 62%, rgba(242, 239, 234, 0));
  opacity: 0; pointer-events: none;
}
.phone__fb { position: absolute; inset: 0; border-radius: 46px; background: #F6F4EF; display: none; }
html[data-noapp] .phone__fb, html.kv-noapp .phone__fb { display: block; }

html.kv-on .fly {
  position: absolute; inset: 0; z-index: 25; pointer-events: none;
  perspective: 1100px; perspective-origin: 50% 42%;
  visibility: hidden;
}
.fl {
  position: absolute; left: 0; top: 0; width: var(--t, 96px); height: var(--t, 96px);
  overflow: hidden; border-radius: var(--tr, 3px); background: #19191a;
  transform-origin: 50% 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  box-shadow: 0 16px 24px -12px rgba(0, 0, 0, .75);
}
.fl img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.fl .views { transition: none; }

/* the ebook */
html.kv-on .book {
  position: absolute; left: 0; top: 0; z-index: 26;
  width: var(--bw, 150px); height: var(--bh, 214px);
  perspective: 900px; pointer-events: none; visibility: hidden;
  will-change: transform, opacity;
}
.book__3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.book__front {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 3px 7px 7px 3px; background: #151515;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(242, 239, 234, .10);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.book__front img {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 66%;   /* same artwork and crop as the Programme cover it lands on (app.css .kv-book) */
  object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) contrast(1.08) brightness(.62);
}
.book__front::after { content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 18%; background: linear-gradient(#151515, rgba(21, 21, 21, 0)); }
.book__t {
  position: absolute; left: 12%; right: 10%; top: 9%; z-index: 1;
  font: 400 calc(var(--bw, 150px) * .175)/.92 var(--display); text-transform: uppercase; color: var(--ink);
  display: flex; flex-direction: column;
}
.book__t span + span { color: var(--red); }
.book__a { position: absolute; left: 12%; bottom: 7%; z-index: 1; font: 600 calc(var(--bw, 150px) * .068)/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.book__spine {
  position: absolute; left: 0; top: 0; width: 18px; height: 100%;
  background: #0d0d0d; box-shadow: inset 0 0 0 1px rgba(242, 239, 234, .08);
  transform-origin: 0 50%; transform: rotateY(90deg);
}
.book__pages {
  position: absolute; right: 0; top: 3px; bottom: 3px; width: 16px;
  background: repeating-linear-gradient(90deg, #E9E5DD 0 1px, #CFCAC0 1px 2px);
  transform-origin: 100% 50%; transform: rotateY(-90deg);
}
.book__sh {
  position: absolute; left: 6%; right: 6%; bottom: -8%; height: 10%; border-radius: 50%;
  background: rgba(0, 0, 0, .55); filter: blur(10px); opacity: 0;
}

/* steps indicator + captions */
html.kv-on .segs {
  position: absolute; z-index: 30; left: var(--capL, var(--gut)); width: var(--capW, calc(100% - 2 * var(--gut)));
  top: var(--segTop, 16px); height: 3px; display: flex; gap: 5px; opacity: 0; pointer-events: none;
}
.segs i { flex: 1; height: 100%; border-radius: 2px; background: rgba(242, 239, 234, .16); overflow: hidden; }
.segs b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.segs i.is-cur b { background: var(--red); }

html.kv-on .caps {
  position: absolute; z-index: 30; left: var(--capL, var(--gut)); top: var(--capTop, 34px);
  width: var(--capW, calc(100% - 2 * var(--gut)));
  pointer-events: none;
}
html.kv-on .cap { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; }
html.kv-on .cap.on { visibility: visible; }
.cap__k {
  font: 600 var(--t-xs)/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 12px;
}
.cap__t {
  font: 400 var(--capF, var(--d-s))/1.12 var(--display); text-transform: uppercase; letter-spacing: .004em;
  color: var(--ink); text-wrap: balance;
}
.cap__s { margin-top: 8px; font: 500 var(--t-m)/1.3 var(--text); color: var(--ink); opacity: .82; }
html.kv-on .cap .cap__s { opacity: 0; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .2em 0 .06em; margin: -.2em 0 -.06em; }   /* the mask clears the accents of the capitals */
.w > span { display: inline-block; }
html.kv-on .cap .w > span { transform: translate3d(0, 115%, 0); }
html.kv-on .cap .cap__k { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 6 · calcul */
html.kv-on .sc-calc { z-index: 12; visibility: hidden; pointer-events: none; }
.calc { position: relative; }
html.kv-on .calc { position: absolute; left: var(--gut); right: var(--gut); top: var(--calcTop, calc(var(--S) * .09)); max-width: 680px; }
.calc__k, .tl__k { font: 600 var(--t-xs)/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
.eq__l { overflow: hidden; padding: .06em 0 .02em; }
.eq__in { display: flex; align-items: baseline; gap: .28em; flex-wrap: nowrap; }
html.kv-on .eq__in { transform: translate3d(0, 110%, 0); }
.eq__n { font: 400 var(--calcF, var(--d-m))/1 var(--display); color: var(--ink); white-space: nowrap; font-feature-settings: "tnum" 1; }
.eq__o { display: inline-flex; justify-content: flex-start; width: 1.1em; flex: none; font: 400 calc(var(--calcF, var(--d-m)) * .56)/1 var(--text); color: var(--mute); align-self: center; }
.eq__o svg { width: .62em; height: .44em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; align-self: center; }
.eq__u { font: 500 var(--t-s)/1.2 var(--text); color: var(--mute); white-space: nowrap; }
.eq__rule { height: 1px; margin: 12px 0 10px; background: rgba(242, 239, 234, .28); transform-origin: 0 50%; }
html.kv-on .eq__rule { transform: scaleX(0); }
.eq__l--res .eq__n { color: var(--red); font-size: calc(var(--calcF, var(--d-m)) * 1.45); }
.eq__l--res .eq__o { color: var(--red); font-size: calc(var(--calcF, var(--d-m)) * .9); width: calc(var(--calcF, var(--d-m)) * .616); }   /* = 1.1em of the other operators: the result lines up with the numbers */
.eq__l--res .eq__u { color: var(--ink); }
.bend { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
html.kv-on .bend, html.kv-on .calc__foot { opacity: 0; transform: translate3d(0, 14px, 0); }
.bend__n { display: flex; align-items: baseline; gap: .3em; font: 400 var(--capF, var(--d-s))/1 var(--display); color: var(--ink); text-transform: uppercase; white-space: nowrap; }
.bend__name { color: var(--ink); }
.bend__n .eq__o { width: auto; font-size: 1em; color: var(--mute); }
.bend__t { margin-top: 8px; font: 400 var(--t-s)/1.4 var(--text); color: var(--mute); max-width: 30em; }
.calc__foot { margin-top: 18px; font: 400 var(--t-xs)/1.4 var(--text); color: var(--mute); letter-spacing: .01em; }

/* ---------------------------------------------------------------------------------------------- 7 · calendrier */
html.kv-on .sc-time { z-index: 12; visibility: hidden; pointer-events: none; }
html.kv-on .tl { position: absolute; left: var(--gut); right: var(--gut); top: var(--tlTop, calc(var(--S) * .09)); max-width: 680px; }
.tl__body { position: relative; padding-left: 40px; }
.tl__line { position: absolute; left: 8px; top: 10px; bottom: var(--tlLineB, 70px); width: 2px; border-radius: 1px; background: rgba(242, 239, 234, .14); overflow: hidden; }
.tl__line i { position: absolute; inset: 0; background: var(--red); transform-origin: 50% 0; }
html.kv-on .tl__line i { transform: scaleY(0); }
.tl__s { position: relative; padding-bottom: var(--tlGap, 34px); }
.tl__s:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: -40px; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(242, 239, 234, .28); background: var(--bg); transition: border-color .3s linear; }
.tl__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .35s var(--ease); }
.tl__h { font: 400 var(--tlF, clamp(36px, 10.5vw, 72px))/1 var(--display); text-transform: uppercase; color: var(--ink); transition: color .3s linear, opacity .3s linear; }
.tl__p { margin-top: 6px; font: 400 var(--t-m)/1.35 var(--text); color: var(--mute); transition: color .3s linear; }
html.kv-on .tl__s .tl__h { opacity: .22; }
html.kv-on .tl__s .tl__p { opacity: .4; }
html.kv-on .tl__s.lit .tl__h { opacity: 1; }
html.kv-on .tl__s.lit .tl__p { opacity: 1; color: var(--ink); }
html.kv-on .tl__s.lit .tl__dot { border-color: var(--red); }
html.kv-on .tl__s.lit .tl__dot::after { transform: scale(1); }
html.rm .tl__h, html.rm .tl__p, html.rm .tl__dot, html.rm .tl__dot::after { transition-duration: .15s; }
.tl__small { margin-top: 30px; font: 500 var(--t-xs)/1.5 var(--text); letter-spacing: .04em; color: var(--mute); }
html.kv-on .tl__k, html.kv-on .tl__small { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 8 · final */
#final { position: relative; background: var(--bg); }
/* the iPhone is a scene of the pinned stage: the calendar's line runs on and becomes the rail it rises on */
html.kv-on .sc-ios { position: absolute; inset: 0; z-index: 14; visibility: hidden; pointer-events: none; }
.thread { display: none; }
html.kv-on .thread {
  display: block; position: absolute; left: 0; top: 0; z-index: 13; width: 10px; height: 10px;   /* a solid quad, scaled to any bar */
  background: var(--red); transform-origin: 0 0; visibility: hidden; will-change: transform;
}
.ios {
  position: relative; width: 340px; height: 700px; margin: 0 auto;
  border-radius: 58px; padding: 12px; background: #121212;
  box-shadow: 0 0 0 1px rgba(242, 239, 234, .20), 0 0 0 2.5px #060606, 0 26px 30px -14px rgba(0, 0, 0, .9);
}
html.kv-on .ios { position: absolute; left: 0; top: 0; width: 364px; height: 724px; margin: 0; transform-origin: 0 0; will-change: transform, opacity; }
.ios__screen { position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden; background: #2a2a2a; transform: translateZ(0); }
.ios__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: contrast(1.08) saturate(1.08); }
.ios__dim { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .30), rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, .22)); }
.ios__status { position: absolute; left: 0; right: 0; top: 0; height: 50px; color: #FFFFFF; }
.ios__time { position: absolute; left: 32px; top: 17px; font: 600 15px/20px var(--text); font-variant-numeric: tabular-nums; }
.ios__icons { position: absolute; right: 26px; top: 20px; display: flex; gap: 6px; align-items: center; }
.ios__island { position: absolute; top: 11px; left: 50%; width: 112px; height: 32px; margin-left: -56px; border-radius: 16px; background: #000; }
.ios__bar { position: absolute; bottom: 8px; left: 50%; width: 124px; height: 5px; margin-left: -62px; border-radius: 3px; background: rgba(255, 255, 255, .9); }
.ios__grid {
  position: absolute; left: 24px; right: 24px; top: 74px;
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 18px; row-gap: 20px;
}
.ico { display: flex; flex-direction: column; align-items: center; gap: 7px; }
/* neutral apps: opaque, slightly varied muted fills with the iOS inner highlight (unbranded, glyph-free) */
.ico i { display: block; width: 100%; aspect-ratio: 1; border-radius: 23%; background: var(--c, #3A3A3C); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 0, 0, .18); }
.ico b { display: block; height: 5px; visibility: hidden; }   /* keeps the rows aligned with the « Kivenro » label */
.ico--k i { background: var(--green); position: relative; }
.ico--k i::after {
  content: "K"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 800 34px/1 "Archivo", var(--display); font-stretch: 125%; color: #FFFFFF;
}
.ico--k span { font: 500 12px/1 var(--text); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); height: 5px; line-height: 5px; overflow: visible; }
.ios__dock {
  position: absolute; left: 12px; right: 12px; bottom: 20px; height: 88px; border-radius: 32px;
  background: rgba(58, 54, 50, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); display: flex; align-items: center; justify-content: space-around; padding: 0 14px;
}
.ios__dock i { width: 60px; height: 60px; border-radius: 23%; background: #D8D3CA; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 0, 0, .18); }
.ios__dock i:nth-child(2) { background: #2E3B35; } .ios__dock i:nth-child(3) { background: #6B6560; } .ios__dock i:nth-child(4) { background: #1F1F21; }
.ios__notif {
  position: absolute; left: 10px; right: 10px; top: 56px; z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 24px;
  background: rgba(246, 244, 239, .95); color: #111;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
}
html.kv-on .ios__notif { transform: translate3d(0, -150%, 0); opacity: 0; will-change: transform, opacity; }
.ios__nic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--green); display: flex; align-items: center; justify-content: center; }
.ios__nic span { font: 800 22px/1 "Archivo", var(--display); font-stretch: 125%; color: #FFFFFF; }
.ios__ntx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ios__nhead { display: flex; justify-content: space-between; gap: 8px; font: 400 13px/1.2 var(--text); color: rgba(17, 17, 17, .55); }
.ios__nhead b { font-weight: 600; color: #111; }
.ios__nmsg { font: 500 15px/1.25 var(--text); color: #111; }

.fin {
  position: relative; z-index: 2; background: var(--bg);
  padding: 44px var(--gut) calc(64px + env(safe-area-inset-bottom, 0px));
}
/* a soft edge, not a hairline: the block rises over the pinned iPhone, which lifts and fades away (story.js) */
.fin::before { content: ""; position: absolute; left: 0; right: 0; top: -90px; height: 90px; background: linear-gradient(rgba(11, 11, 12, 0), var(--bg)); pointer-events: none; }
html.kv-on .fin { margin-top: calc(var(--S) * -.6); }
.fin > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.fin__faces { display: flex; }
.fin__faces img { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--bg); object-fit: cover; }
.fin__faces img + img { margin-left: -18px; }
.fin__h { margin-top: 22px; font: 400 min(var(--d-m), 11.2vw)/1.04 var(--display);   /* the medium display size; a touch smaller only under 383px, so « On l’a commencée. » holds on one line */ text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.fin__h > span { display: block; }   /* one sentence per line block: never « ON » orphaned at a line end */
.fin__acts { margin-top: 30px; }
.fin__lab { font: 600 var(--t-xs)/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin: 18px 0 10px; }
.fin__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 8px 16px 8px 8px; border-radius: 999px;
  font: 600 var(--t-m)/1 var(--text); text-decoration: none; letter-spacing: .01em;
  transition: transform .14s var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.btn span { flex: 1; text-align: left; }
.btn--ig { background: var(--red); color: #FFFFFF; }
.btn--wa { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(242, 239, 234, .32); }
.btn--s { min-height: 46px; padding: 0 16px; font-size: var(--t-s); flex: 1; }
.fin__foot { margin-top: 34px; font: 400 var(--t-xs)/1.5 var(--text); color: var(--mute); }

/* ---------------------------------------------------------------------------------------------- contact pill + sheet */
#dock {
  position: fixed; z-index: 900;
  right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transition: transform .32s var(--ease-ios), opacity .28s linear;
}
#dock.away { transform: translate3d(0, calc(100% + 28px), 0); opacity: 0; pointer-events: none; }
html.rm #dock { transition-duration: .15s; }
.pill {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 4px 16px 4px 4px;
  border-radius: 999px; background: rgba(20, 20, 21, .94); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(242, 239, 234, .16), 0 12px 30px -10px rgba(0, 0, 0, .8);
  font: 600 14px/1 var(--text); text-decoration: none; letter-spacing: .01em; white-space: nowrap;
  cursor: pointer; border: 0; touch-action: manipulation;
  transition: transform .14s var(--ease), opacity .2s linear;
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #141415; }
.pill__faces img + img { margin-left: -12px; }
#dock.open .pill { opacity: 0; }

#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .58); opacity: 0; transition: opacity .2s linear; }
#sheet-scrim.on { opacity: 1; }
#sheet {
  position: fixed; z-index: 960; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 520px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 26px; background: #161617; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(242, 239, 234, .12), 0 30px 80px -20px rgba(0, 0, 0, .9);
  transform: translate3d(0, 110%, 0); transition: transform .38s var(--ease-ios);
}
#sheet.on { transform: none; }
html.rm #sheet, html.rm #sheet-scrim { transition-duration: .15s; }
.sheet__grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(242, 239, 234, .22); margin: -8px auto 14px; }
.sheet__x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.sheet__h { font: 400 var(--d-s)/1 var(--display); text-transform: uppercase; }
.sheet__sub { margin-top: 10px; font: 400 var(--t-s)/1.45 var(--text); color: var(--mute); padding-right: 24px; }
.who { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 600 var(--t-m)/1.2 var(--text); }
.who__n span { font: 400 13px/1.2 var(--text); color: var(--mute); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }
.who__b .btn--ig { flex: 1.4; }
.sheet__note { margin-top: 16px; font: 400 var(--t-xs)/1.4 var(--text); color: var(--mute); }

/* ---------------------------------------------------------------------------------------------- a phone held sideways */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  html.kv-on body::after {
    content: "Tourne ton téléphone"; position: fixed; z-index: 905; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
    background: rgba(20, 20, 21, .94); box-shadow: inset 0 0 0 1px rgba(242, 239, 234, .16);
    font: 600 13px/1 var(--text); letter-spacing: .01em; color: var(--ink); white-space: nowrap; pointer-events: none;
  }
}

/* ---------------------------------------------------------------------------------------------- desktop */
@media (min-width: 1000px) {
  :root { --t-m: 18px; }
  html.kv-on .calc, html.kv-on .tl { left: 0; right: 0; margin: 0 auto; width: min(760px, 100% - 2 * var(--gut)); max-width: none; }
}
/* the four steps, as a vertical index on the right of the phone (side layout: desktop, or a phone held sideways) */
html.kv-on .segs.is-v { flex-direction: column; width: 3px; height: min(260px, 50%); gap: 8px; }
html.kv-on .segs.is-v b { transform-origin: 50% 0; }

/* ============================================================================================== static fallback
   (no JS, or a script failed to load): a readable document, same words, same order. */
html:not(.kv-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.kv-on) .wall, html:not(.kv-on) .hero, html:not(.kv-on) .op-knock, html:not(.kv-on) .op-caret,
html:not(.kv-on) .op-glisse, html:not(.kv-on) .fly, html:not(.kv-on) .phone, html:not(.kv-on) .book,
html:not(.kv-on) .segs, html:not(.kv-on) .band__k, html:not(.kv-on) .cap[data-cap="live"], html:not(.kv-on) .sr-story,
html:not(.kv-on) .cap[data-cap="wow"] { display: none; }
html:not(.kv-on) .sc, html:not(.kv-on) .caps { position: relative; padding: 0 var(--gut); max-width: 720px; margin: 0 auto; }
html:not(.kv-on) .sc-open { min-height: 92vh; display: flex; align-items: center; }
html:not(.kv-on) .op-solid, html:not(.kv-on) .op-box { position: static; }
html:not(.kv-on) .op-l2 { font-size: clamp(80px, 24vw, 200px); }
html:not(.kv-on) .band { position: static; opacity: 1; background: none; border: 0; padding: 32px 0; }
html:not(.kv-on) .band__win { height: auto; overflow: visible; }
html:not(.kv-on) .cnt { position: static; margin-bottom: 28px; }
html:not(.kv-on) .cnt__n .sr-only { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }
html:not(.kv-on) .reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 8px calc(var(--gut) * -1) 40px; }
html:not(.kv-on) .reels li { position: relative; }
html:not(.kv-on) .reels img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
html:not(.kv-on) .reels span { position: absolute; left: 6px; bottom: 6px; font: 600 12px/1 var(--text); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
html:not(.kv-on) .caps { display: flex; flex-direction: column; gap: 30px; padding-top: 40px; padding-bottom: 40px; }
html:not(.kv-on) .cap__t { font-size: clamp(30px, 8vw, 48px); }
html:not(.kv-on) .sc-calc, html:not(.kv-on) .sc-time { padding-top: 48px; padding-bottom: 48px; }
html:not(.kv-on) .sc-ios { padding: 40px 0; overflow: hidden; }
html:not(.kv-on) .ios { transform: scale(.82); transform-origin: 50% 0; margin-bottom: -120px; }