/* Hallmark · v2.0.0 · direction: custom, brand-pinned (Aube app tokens: dark ground, Inter, app score colours) · shape: one night, scrolled (impeccable pick seed:e796efa6717dcab9) · genre: atmospheric · job: download · signature: recovery rising like the sun, the app's 270° gauge drawn 0 to 78 by the scroll at 07:00 */
/* critique: the page is a night that passes; a fixed sky whose colour follows a scroll clock (23:00 to 22:30 the next evening), stars that fade at dawn and return for the closing call; real app screenshots carry the proof; one live fragment (bedtime planner); no eyebrows, no cards in cards */
/* waive 58: about 800 visible words, carried by the privacy table and the FAQ, which are the page's proof (taste-skill asks for complete content) */
/* waive 58b: the hero carries two short sentences (14 words): the second is the privacy promise, the confirmed lead argument */
/* waive gradient: the sky is the direction the user chose (« Le ciel de la nuit à l'aube »): one vertical sky gradient and one horizon glow, both fixed behind the page; no gradient on any element */
/* waive 29: the blurred light behind the gauge is the sun itself, the page's signature, not a decorative wash */
/* answered F3: text-wrap: balance is set on the shared heading rule (.mega, .display, .h2, .h3) */

@font-face { font-family: "Inter"; src: url("/fonts/inter-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }


:root {
  /* Couleurs de l'app Aube (ui/theme/Color.kt) */
  --bg: #0A0A0C;
  --surface: #16161A;
  --surface-2: #1C1C22;
  --surface-3: #26262E;
  --ink: #F5F5F7;
  --ink-2: #D2D2DA;
  --muted: #A9A9B6;
  --accent: #7FE3F0;
  --on-accent: #0A0A0C;
  --good: #2FD98B;
  --mid: #F5C84B;
  --white: #FCFCFE;
  --step-hover: #33333D;
  /* Voiles posés sur le ciel : assez sombres pour garder le texte lisible à toute heure */
  --veil: rgba(6, 7, 16, 0.52);
  --veil-2: rgba(6, 7, 16, 0.34);
  --track: rgba(245, 245, 247, 0.14);
  /* Le ciel : la nuit par défaut ; site.js le fait tourner avec l'horloge */
  --sky-top: #05060E;
  --sky-mid: #080A18;
  --sky-low: #0B0C1A;
  --glow: #C4613A;
  --glow-a: 0;
  --sun: #F5C84B;
  --star: #F4F1FF;
  --opaque: #000;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle : six tailles, tout le texte s'y range */
  --t-mega: clamp(3.25rem, 9vw, 8.5rem);
  --t-display: clamp(2.5rem, 5.6vw, 5.25rem);
  --t-h2: clamp(2rem, 3.8vw, 3.25rem);
  --t-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;

  --radius: 28px;
  --radius-sm: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --col-gap: clamp(32px, 5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--sky-top); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.clock, .panel__time, .sun__value, .ctl__label b { font-variant-numeric: tabular-nums; }
body:has(.sky) { background: transparent; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; transition: none; }
html { scrollbar-color: var(--surface-3) var(--bg); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--accent); color: var(--on-accent); padding: 12px 16px; border-radius: 999px; z-index: 30; font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: 12px; }

.mega, .display, .h2, .h3 { font-weight: 600; letter-spacing: -0.035em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; margin: 0; }
.mega { font-size: var(--t-mega); line-height: 0.94; letter-spacing: -0.05em; }
.display { font-size: var(--t-display); line-height: 1; letter-spacing: -0.045em; }
.h2 { font-size: var(--t-h2); line-height: 1.04; }
.h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
.lead { font-size: var(--t-h3); line-height: 1.45; letter-spacing: -0.01em; max-width: 34rem; }
.note { font-size: var(--t-small); color: var(--muted); margin: 0; }
.note a { color: var(--ink); font-weight: 600; }
.muted { color: var(--ink-2); max-width: 34rem; }

/* Le ciel : fixe derrière tout, sa couleur suit l'heure de la page */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( /* taste-skill-ignore: the sky is the chosen direction */to bottom, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%); }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.glow { position: absolute; inset: auto -20% -38vh; height: 80vh; border-radius: 50%; background: var(--glow); opacity: var(--glow-a); filter: blur(90px); }

/* Boutons : une seule forme, la pilule de l'app */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 16px 28px; border-radius: 999px; border: 0;
  font: inherit; font-weight: 600; font-size: var(--t-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--ink); color: var(--bg);
  transition: transform 160ms var(--ease), background-color 160ms var(--ease), opacity 160ms var(--ease);
}
.btn:hover { background: var(--white); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--small { min-height: 40px; padding: 8px 20px; font-size: var(--t-small); }
.btn[aria-disabled="true"] { background: var(--veil); color: var(--ink); cursor: default; pointer-events: none; outline: 1.5px solid var(--track); outline-offset: -1.5px; }
.btn--quiet { background: var(--veil); color: var(--ink); }
.btn--quiet:hover { background: var(--surface-3); }
.textlink { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--track); text-decoration-thickness: 2px; transition: text-decoration-color 160ms var(--ease); }
.textlink:hover { text-decoration-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 32px 0 16px; }

/* En-tête : le nom, l'heure de la nuit, quelques liens, une action */
.bar { position: sticky; top: 0; z-index: 10; transition: background-color 300ms var(--ease); }
.bar.is-scrolled { background: var(--sky-top); }
.bar .wrap { display: flex; align-items: center; gap: 8px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.02em; }
.brand svg { width: 32px; height: 32px; }
.brand { margin-right: auto; }
.clock { order: 9; margin-left: 20px; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); min-width: 4.6ch; text-align: right; }
.clock.is-tick { animation: aube-tick 360ms var(--ease); }
.bar__link { color: var(--ink-2); text-decoration: none; font-size: var(--t-small); padding: 12px; border-radius: 999px; transition: color 160ms var(--ease), background-color 160ms var(--ease); }
.bar__link:hover { color: var(--ink); background: var(--veil); }
@media (max-width: 760px) { .bar__link--wide { display: none; } .clock { margin-left: 12px; } }
@media (max-width: 480px) { .bar .btn--small { display: none; } }

/* Chapitres : chacun tient l'écran, l'heure avance de l'un à l'autre */
.chapter { display: grid; align-content: center; padding-block: clamp(80px, 9vw, 140px); }
.sleep, .cta { min-height: 100svh; }

/* 23:00 : le titre géant sur le ciel étoilé */
.hero { position: relative; min-height: calc(100svh - 76px); padding-block: clamp(24px, 4vw, 56px) 112px; }
.hero .mega { max-width: 11ch; }
.hero__lead { font-size: var(--t-h3); line-height: 1.45; margin-top: 32px; max-width: 30rem; }
.hero__sun { position: absolute; left: 50%; bottom: 0; width: min(64vw, 440px); aspect-ratio: 1; transform: translate(-50%, 78%); pointer-events: none; -webkit-mask-image: linear-gradient(to top, transparent 62%, var(--opaque) 92%); mask-image: linear-gradient(to top, transparent 62%, var(--opaque) 92%); }
.hero__sun svg { width: 100%; height: 100%; }
.hero__sun .sun__arc { stroke-dashoffset: 68; }
.hero__scroll { position: absolute; left: 0; right: 0; bottom: 132px; text-align: center; }

/* 00:40 : la nuit s'écrit */
.sleep__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: center; }
.sleep__text .h2 { margin-bottom: 24px; }
.sleep__shot { position: relative; margin: 0; }
.sleep__shot .note { margin-top: 16px; }
.shot { width: 100%; border-radius: var(--radius); background: var(--surface); }
.shot--card { border-radius: var(--radius-sm); }
@media (max-width: 860px) { .sleep__grid { grid-template-columns: minmax(0, 1fr); } }

/* 02:30 : où vont tes données */
.privacy__head { max-width: 52rem; margin-bottom: 48px; }
.privacy__head .display { margin-bottom: 24px; }
.table { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { text-align: left; vertical-align: top; padding: 20px 24px; font-size: var(--t-body); }
th { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); background: var(--veil); }
tbody tr:nth-child(odd) td { background: var(--veil-2); }
tbody tr:nth-child(even) td { background: var(--veil); }
td:first-child { font-weight: 600; width: 30%; }
td.is-key, th.is-key { color: var(--accent); }
th.is-key { font-weight: 700; }
td.is-key { font-weight: 500; }
td.is-nothing { font-weight: 700; }
.privacy__more { margin: 28px 0 0; }
@media (max-width: 760px) {
  table { min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { display: block; margin-bottom: 8px; border-radius: var(--radius-sm); overflow: hidden; }
  td { display: block; width: auto !important; padding: 12px 20px; }
  td[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-small); font-weight: 500; opacity: 0.75; margin-bottom: 2px; }
  td:first-child { padding-top: 20px; }
}

/* 04:30 : comparé à toi */
.own__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); align-items: center; }
.own__shot { margin: 0; max-width: 480px; }
.own__text .h2 { margin-bottom: 24px; }
@media (max-width: 860px) { .own__grid { grid-template-columns: minmax(0, 1fr); } .own__text { order: -1; } }

/* 06:00 : l'outil vivant, la règle de l'app */
.planner__head { max-width: 40rem; margin-bottom: 40px; }
.planner__head .h2 { margin-bottom: 16px; }
.panel { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); max-width: 920px; border-radius: var(--radius); overflow: hidden; background: var(--veil); }
.panel__result { padding: clamp(28px, 4vw, 48px); background: var(--veil); }
.panel__go { font-size: var(--t-h3); margin: 0; color: var(--ink-2); }
.panel__time { font-size: var(--t-mega); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 8px 0 24px; overflow: hidden; }
.panel__explain { color: var(--ink-2); max-width: 30rem; }
.panel__catchup { color: var(--mid); min-height: 1.55em; margin: 0; }
.panel__controls { padding: 12px clamp(16px, 2.4vw, 28px); display: grid; align-content: center; gap: 8px; }
.ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding-inline: 16px; border-radius: var(--radius-sm); background: var(--veil); }
.ctl__label { display: grid; font-size: var(--t-small); color: var(--muted); }
.ctl__label b { font-size: var(--t-body); color: var(--ink); font-weight: 600; }
.ctl__btns { display: flex; gap: 8px; }
.step {
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--surface-3); color: var(--ink); display: grid; place-items: center;
  transition: transform 140ms var(--ease), background-color 140ms var(--ease);
}
.step svg { width: 18px; height: 18px; }
.step:hover { background: var(--step-hover); }
.step:active { transform: scale(0.92); }
.step:disabled { opacity: 0.35; cursor: default; }
.planner__foot { margin-top: 20px; }
.panel.is-static .step { display: none; }
@media (max-width: 760px) { .panel { grid-template-columns: minmax(0, 1fr); } }

/* 07:00 : la récupération se lève comme le soleil.
   --k (0 → 1) avance avec le défilement dans la section ; sans script, --k vaut 1 et tout est déjà levé. */
.sunrise { position: relative; height: 240svh; }
.sunrise__stage { position: sticky; top: 76px; height: calc(100svh - 76px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; text-align: center; padding: clamp(16px, 4svh, 48px) var(--gutter) clamp(28px, 6svh, 56px); }
.sunrise__title { max-width: 14ch; }
/* Le masque fond le bas de la scène dans la brume d'horizon ; la marge haute laisse la place au halo du soleil */
.sunrise__horizon { --rise: clamp(0, calc(var(--k, 1) / 0.5), 1); position: relative; width: calc(100% + 2 * var(--gutter)); margin: -34svh calc(-1 * var(--gutter)) 0; padding: 34svh 0 7svh; display: grid; place-items: end center; overflow: hidden; -webkit-mask-image: linear-gradient(to top, transparent 0, var(--opaque) 15%, var(--opaque) 60%, transparent 100%); mask-image: linear-gradient(to top, transparent 0, var(--opaque) 15%, var(--opaque) 60%, transparent 100%); /* taste-skill-ignore: a mask, not a fill */ pointer-events: none; }
.sun { --draw: clamp(0, calc(var(--k, 1) / 0.55), 1); position: relative; width: min(76vw, 46svh, 440px); aspect-ratio: 1; display: grid; place-items: center; transform: translateY(calc((1 - var(--rise)) * 45%)); }
.sun::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: var(--sun); opacity: calc(var(--rise) * 0.42); filter: blur(80px); }
.sun__gauge { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun__track, .sun__arc { fill: none; stroke-width: 13; stroke-linecap: round; }
.sun__track { stroke: var(--track); }
.sun__arc { stroke: var(--good); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--draw) * 78); }
.sun__value, .sun__label { z-index: 1; }
.sun__value { position: relative; margin: 0; font-size: clamp(4rem, 12svh, 7.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.sun__value b { font-weight: inherit; }
.sun__label { position: absolute; bottom: 20%; margin: 0; color: var(--ink); font-size: var(--t-h3); font-weight: 600; }
.sunrise__note { margin: 20px 0 0; font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); text-wrap: balance; position: relative; opacity: clamp(0, calc((var(--k, 1) - 0.55) / 0.12), 1); }
.sunrise__end { position: absolute; bottom: 0; left: 0; }

/* 09:00 : la journée, trois réponses entre deux écrans */
.day__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--col-gap); align-items: center; }
.day__shot { margin: 0; }
.day__shot--2 { align-self: end; }
.day__text .h2 { margin-bottom: 32px; }
.answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.answers p { margin: 0; color: var(--ink-2); }
@media (max-width: 960px) {
  .day__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .day__text { grid-column: 1 / -1; order: -1; }
}

/* 13:00 : gratuit, et le don en second */
.free__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--col-gap); align-items: start; }
.free__body .btn { margin-top: 8px; }
.free__support { margin-top: 40px; color: var(--ink-2); max-width: 30rem; }
@media (max-width: 760px) { .free__grid { grid-template-columns: minmax(0, 1fr); } }

/* 18:00 : questions */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); align-items: start; }
.faq__title { position: sticky; top: 108px; }
.faq__list { display: grid; gap: 8px; }
details { background: var(--veil); border-radius: var(--radius-sm); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
details:hover { background: var(--surface-2); }
details[open] { background: var(--ink); color: var(--bg); }
summary {
  list-style: none; cursor: pointer; min-height: 72px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; border-radius: var(--radius-sm);
}
summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 16px; height: 16px; flex: none; transition: transform 260ms var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--ease); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0deg); }
summary:hover .plus { transform: rotate(90deg); }
details p { margin: 0; padding: 0 24px 24px; max-width: 52ch; }
@media (max-width: 760px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__title { position: static; }
  summary { font-size: var(--t-body); }
}

/* 22:30 : la nuit revient, essaie dès ce soir */
.cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--col-gap); align-items: center; }
.cta .mega { margin-bottom: 32px; max-width: 9ch; }
.cta .note { max-width: 30rem; margin-bottom: 8px; }
.cta__screen { margin: 0; justify-self: end; width: min(100%, 340px); }
@media (max-width: 760px) {
  .cta__grid { grid-template-columns: minmax(0, 1fr); }
  .cta__screen { justify-self: start; width: min(100%, 300px); }
}

/* Pied de page : une ligne calme, sous le ciel de nuit */
.foot { padding-block: clamp(48px, 8vw, 96px) 32px; }
.foot__line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px 32px; align-items: baseline; font-size: var(--t-small); color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.foot__links a { color: var(--ink); text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
.foot__end { text-align: right; }
.foot__medical { margin-top: 24px; font-size: var(--t-small); color: var(--muted); max-width: 60rem; }
@media (max-width: 760px) {
  .foot__line { grid-template-columns: minmax(0, 1fr); }
  .foot__links { justify-content: flex-start; }
  .foot__end { text-align: left; }
}

/* Pages de texte */
.prose { max-width: 46rem; padding-block: 48px 128px; }
.prose h1 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; }
.prose h2 { font-size: var(--t-h3); letter-spacing: -0.02em; margin: 48px 0 12px; }
.prose h3 { font-size: var(--t-body); margin: 32px 0 8px; }
.prose li { margin: 8px 0; }
.prose .todo { color: var(--mid); font-weight: 600; }

/* Mouvement : tout est visible sans script (classe .js posée avant le rendu) ; chaque mouvement a sa version réduite plus bas. */
:root { interpolate-size: allow-keywords; }

/* Titres : chaque mot sort de son masque */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.split .w > span { display: inline-block; }
.js .split .w > span { transform: translateY(108%); transition: transform 1000ms var(--ease); }
.js .split.is-in .w > span { transform: none; }
.js .split .w:nth-child(2) > span { transition-delay: 70ms; }
.js .split .w:nth-child(3) > span { transition-delay: 140ms; }
.js .split .w:nth-child(4) > span { transition-delay: 210ms; }
.js .split .w:nth-child(5) > span { transition-delay: 280ms; }
.js .split .w:nth-child(6) > span { transition-delay: 350ms; }
.js .split .w:nth-child(n+7) > span { transition-delay: 420ms; }

/* Premier écran : le titre, puis le texte, l'action, et l'invitation à faire passer la nuit */
.js .hero__lead, .js .hero .actions, .js .hero .wrap > .note { opacity: 0; transform: translateY(16px); animation: aube-rise 900ms var(--ease) forwards; }
.js .hero__lead { animation-delay: 650ms; }
.js .hero .actions { animation-delay: 800ms; }
.js .hero .wrap > .note { animation-delay: 950ms; }
.js .hero__scroll { opacity: 0; animation: aube-rise 900ms var(--ease) 1600ms forwards, aube-breathe 3.2s ease-in-out 2600ms 4; }
.js .clock { opacity: 0; animation: aube-rise 900ms var(--ease) 400ms forwards; }
@keyframes aube-rise { to { opacity: 1; transform: none; } }
@keyframes aube-breathe { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.55; transform: translateY(6px); } }
.js .hero__scroll { transform: translateY(16px); }

/* Blocs : montée douce à l'arrivée */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* La nuit s'écrit : l'hypnogramme se dévoile de gauche à droite avec le défilement, une tête de lecture en bord */
.sleep__shot { --k: 1; }
.js .sleep__shot img { clip-path: inset(0 calc((1 - var(--k)) * 100%) 0 0 round var(--radius-sm)); }
.js .sleep__shot::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1040 / 690; border-right: 2px solid var(--accent); transform: translateX(calc((var(--k) - 1) * 100%)); opacity: calc(min(var(--k) * 12, (1 - var(--k)) * 12, 1)); pointer-events: none; }

/* Captures : un léger relief au défilement */
@supports (animation-timeline: view()) {
  .js .drift { animation: aube-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .js .day__shot--2 { animation-name: aube-drift-2; }
  @keyframes aube-drift { from { transform: translateY(56px); } to { transform: translateY(-56px); } }
  @keyframes aube-drift-2 { from { transform: translateY(120px); } to { transform: translateY(-80px); } }
}

/* Lignes de tableau, réponses et questions : une à une */
.js .reveal--rows tr, .js .reveal--rows details, .js .reveal--rows li { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal--rows.is-in tr, .js .reveal--rows.is-in details, .js .reveal--rows.is-in li { opacity: 1; transform: none; }
.js .reveal--rows.is-in :is(tr, details, li):nth-child(2) { transition-delay: 90ms; }
.js .reveal--rows.is-in :is(tr, details, li):nth-child(3) { transition-delay: 180ms; }
.js .reveal--rows.is-in :is(tr, details, li):nth-child(4) { transition-delay: 270ms; }
.js .reveal--rows.is-in :is(tr, details, li):nth-child(5) { transition-delay: 360ms; }
.js .reveal--rows.is-in :is(tr, details, li):nth-child(6) { transition-delay: 450ms; }

/* Planificateur : l'heure glisse quand elle change */
.panel__time.is-tick { animation: aube-tick 420ms var(--ease); }
@keyframes aube-tick { from { opacity: 0; transform: translateY(0.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.panel__explain.is-tick, .panel__catchup.is-tick { animation: aube-soft 420ms var(--ease); }
@keyframes aube-soft { from { opacity: 0.2; } to { opacity: 1; } }
.step.is-pressed { background: var(--accent); color: var(--on-accent); transform: scale(0.9); }

/* Questions : la réponse s'ouvre en douceur */
details::details-content { block-size: 0; overflow: hidden; transition: block-size 380ms var(--ease), content-visibility 380ms allow-discrete; }
details[open]::details-content { block-size: auto; }
details p { transition: opacity 380ms var(--ease) 60ms; }
details:not([open]) p { opacity: 0; }

/* Dernier appel : l'écran flotte doucement tant qu'il est visible */
.js .cta__screen img { animation: aube-float 7s ease-in-out infinite; animation-play-state: paused; }
.js .cta.is-in .cta__screen img { animation-play-state: running; }
@keyframes aube-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(0.5deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .split .w > span, .js .reveal, .js .reveal--rows tr, .js .reveal--rows details, .js .reveal--rows li { transform: none; transition: opacity 300ms linear; }
  .js .hero__lead, .js .hero .actions, .js .hero .wrap > .note, .js .clock { animation: aube-soft 300ms linear forwards; transform: none; }
  .js .hero__scroll { animation: none; opacity: 1; transform: none; }
  .js .drift, .js .cta__screen img, .clock.is-tick { animation: none; }
  .sleep__shot, .sunrise { --k: 1 !important; }
  .js .sleep__shot::after { display: none; }
  .sunrise { height: auto; }
  .sunrise__stage { position: relative; top: 0; height: auto; min-height: 100svh; }
  .panel__time.is-tick { animation: aube-soft 200ms linear; }
  details::details-content { transition: none; }
  .btn, .step, details, .plus, .bar { transition: none; }
}