/* SCORE-V1 — partition visuelle, encre ou scène sombre */

:root {

  --ink-rgb: 232, 224, 208;

  --bg: #141210;

  --ink: #e8e0d0;

  --muted: #9a9080;

  --surface: #1c1916;

  --line: rgba(var(--ink-rgb), 0.14);

  --staff: rgba(var(--ink-rgb), 0.55);

  --accent: #f8cf9f;

  --accent-ink: #1a1915;

  --sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;

  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 4vw, 64px);

  --t-xl: clamp(44px, 8vw, 120px);

  --t-l: clamp(30px, 4.2vw, 62px);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);

  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

}

html[data-theme="light"] {

  --ink-rgb: 26, 22, 18;

  --bg: #f4efe4;

  --ink: #1a1612;

  --muted: #6e6458;

  --surface: #fffdf8;

  --line: rgba(var(--ink-rgb), 0.12);

  --staff: rgba(var(--ink-rgb), 0.45);

}

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

html { scroll-behavior: smooth; }

body {

  background: var(--bg); color: var(--ink);

  font-family: var(--sans); font-size: 18px; line-height: 1.35;

  -webkit-font-smoothing: antialiased; overflow-x: clip;

}

body.sc-music {

  --accent: #d4a24c;

  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent);

}

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

a { color: inherit; text-decoration: none; }

ol, ul { list-style: none; }

h1, h2, h3 { font-weight: 400; }

mark { background: none; color: inherit; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

.muted { color: var(--muted); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; }

.skip:focus { left: 12px; }



.si-loader {

  position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column;

  align-items: center; justify-content: center; gap: 18px; background: var(--bg);

  transition: clip-path .9s var(--ease-inout); clip-path: inset(0 0 0 0);

}

.si-loader p { font-size: 20px; }

.si-loader span { width: 120px; height: 1px; background: var(--line); overflow: hidden; }

.si-loader i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }

.si-loader.run i { transform: scaleX(1); }

.si-loader.out { clip-path: inset(0 0 100% 0); }



.scene { position: relative; height: calc(var(--len, 2) * 100vh); }

.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }

.rv.in { opacity: 1; transform: none; }



/* playhead rail */

.sc-rail {

  position: fixed; left: 0; right: 0; top: 0; height: 28px; z-index: 90;

  pointer-events: none; border-bottom: 1px solid var(--line);

  background: color-mix(in srgb, var(--bg) 92%, transparent);

  backdrop-filter: blur(6px);

}

.sc-rail-track {

  position: absolute; inset: 10px var(--gutter) auto;

  height: 10px; opacity: 0.35; overflow: hidden;

}

.sc-rail-track svg { width: 100%; height: 10px; }

.sc-staff-line { stroke: var(--staff); stroke-width: 1; vector-effect: non-scaling-stroke; }

.sc-playhead {

  position: absolute; top: 0; bottom: 0; width: 2px;

  left: calc(var(--play, 0) * (100% - 2px));

  background: var(--accent); transition: left 0.05s linear;

}

.sc-playhead i {

  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);

  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;

  border-top: 7px solid var(--accent);

}

.sc-playhead-tag {

  position: absolute; top: 6px; left: 8px; font-size: 9px; color: var(--accent);

}



.sc-bar {

  position: fixed; top: 28px; left: 0; right: 0; z-index: 100;

  display: flex; align-items: center; justify-content: space-between; gap: 16px;

  padding: 14px var(--gutter); transform: translateY(-120%);

  transition: transform .6s var(--ease-out), background .35s;

}

body.is-ready .sc-bar { transform: none; }

body.is-scrolled .sc-bar { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }

.sc-wordmark { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }

.sc-nav { display: flex; gap: 26px; }

.sc-cta { background: var(--accent); color: var(--accent-ink); padding: 11px 18px; border-radius: 999px; }



.sc-hero .sticky {

  display: flex; flex-direction: column; padding-top: 72px; background: var(--bg);

}

.sc-hero-score {

  display: flex; align-items: stretch; gap: 12px;

  padding: 12px var(--gutter) 0; border-bottom: 1px solid var(--line);

  min-height: 88px;

}

.sc-clef { font-size: 42px; line-height: 1; color: var(--staff); padding-top: 8px; }

.sc-strip { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-width: 0; }

.sc-strip-bar { position: relative; opacity: 0.35; transition: opacity .4s; }

.sc-strip-bar.on { opacity: 1; }

.sc-strip-n { position: absolute; left: 0; top: 0; font-size: 9px; color: var(--muted); }

.sc-staff-svg { width: 100%; height: 56px; display: block; }

.sc-bar-edge { stroke: var(--staff); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.sc-note-head { fill: var(--accent); opacity: 0; transition: opacity .35s; }

.sc-note-stem { stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity .35s; }

.sc-note-label { fill: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; opacity: 0; transition: opacity .35s; }

.sc-strip-bar.on .sc-note-head,

.sc-strip-bar.on .sc-note-stem,

.sc-strip-bar.on .sc-note-label { opacity: 1; }



.sc-hero-grid {

  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 0;

}

.sc-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 6vh var(--gutter); z-index: 2; }

.sc-title { font-size: var(--t-xl); line-height: 0.96; letter-spacing: -0.04em; margin: 18px 0; }

.sc-title span { display: block; }

.sc-title em { font-style: normal; color: var(--accent); }

body:not(.static) .sc-title span { opacity: 0; transform: translateY(36%); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }

body.is-ready .sc-title span { opacity: 1; transform: none; }

body.is-ready .sc-title span:nth-child(2) { transition-delay: .1s; }

.sc-pos { color: var(--muted); max-width: 26ch; }

.sc-tempo { margin-top: 20px; opacity: 0.7; }

.sc-hero-photo { overflow: hidden; border-left: 1px solid var(--line); }

.sc-hero-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }



.sc-manifesto .sticky {

  display: flex; flex-direction: column; justify-content: center;

  padding: 0 var(--gutter); background: var(--surface);

}

.sc-chapter { margin-bottom: 20px; }

.sc-man-text { font-size: clamp(28px, 4.2vw, 52px); letter-spacing: -0.03em; line-height: 1.18; max-width: 20ch; }

.sc-mark { box-shadow: inset 0 -0.35em 0 color-mix(in srgb, var(--accent) 45%, transparent); }



.sc-proof { padding: 16vh var(--gutter) 12vh; }

.sc-head { margin-bottom: 40px; }

.sc-h2 { font-size: var(--t-l); letter-spacing: -0.03em; margin: 10px 0; }

.sc-sub { color: var(--muted); max-width: 40ch; }

.sc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.sc-card-img { overflow: hidden; aspect-ratio: 4/5; background: var(--surface); border: 1px solid var(--line); }

.sc-card:nth-child(3n) .sc-card-img { aspect-ratio: 5/4; }

.sc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }

.sc-card:hover img { transform: scale(1.04); }

.sc-card figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 10px 2px 0; font-size: 14px; }

.sc-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 14px; }

.sc-big { grid-column: span 2; }

.sc-tall { grid-row: span 2; }

.sc-tile { background: var(--surface); border: 1px solid var(--line); }

.sc-tile-img { aspect-ratio: 3/2; overflow: hidden; }

.sc-tall .sc-tile-img { aspect-ratio: 3/4; height: calc(100% - 70px); }

.sc-tile-img img { width: 100%; height: 100%; object-fit: cover; }

.sc-tile figcaption { padding: 12px; display: flex; flex-direction: column; gap: 4px; }



.sc-motto .sticky {

  display: flex; flex-direction: column; justify-content: center;

  padding: 0 var(--gutter); background: var(--bg); position: relative;

}

.sc-measures {

  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 28px);

  margin-top: 36px; position: relative; z-index: 1;

}

.sc-measure {

  border: 1px solid var(--line); background: var(--surface);

  padding: 16px; opacity: 0.28; transform: translateY(8px);

  transition: opacity .45s, transform .45s, border-color .45s;

}

.sc-measure.on {

  opacity: 1; transform: none;

  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));

}

.sc-measure-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 10px; }

.sc-measure-word {

  font-size: clamp(28px, 3.5vw, 48px); letter-spacing: -0.04em;

  margin-top: 12px; color: var(--accent);

}

.sc-measure-playhead {

  position: absolute; left: var(--gutter); right: var(--gutter);

  top: 50%; height: 2px; background: var(--accent); pointer-events: none;

  transform: scaleX(var(--mh, 0)); transform-origin: left; opacity: 0.85;

  z-index: 2;

}



.sc-intro { padding: 14vh var(--gutter) 5vh; }

.sc-intro-line { font-size: var(--t-l); letter-spacing: -0.03em; margin-bottom: 24px; }

.sc-accent { color: var(--accent); }

.sc-band { overflow: hidden; max-height: 42vh; border: 1px solid var(--line); }

.sc-band img { width: 100%; height: 100%; object-fit: cover; }



.sc-steps .sticky { padding: 12vh var(--gutter); background: var(--surface); }

.sc-step-list { position: relative; min-height: 36vh; max-width: 28rem; }

.sc-step { position: absolute; inset: 0 auto auto 0; opacity: 0; visibility: hidden; max-width: 28rem; }

.sc-step h3 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.035em; margin: 8px 0 12px; }

.sc-step p { color: var(--muted); max-width: 32ch; }

.sc-step-rail { height: 2px; background: var(--line); margin-top: 48px; overflow: hidden; }

.sc-step-rail i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.sc-step-cta { display: inline-flex; margin-top: 22px; border: 1px solid var(--line); padding: 12px 18px; border-radius: 999px; opacity: 0; pointer-events: none; }



.sc-quote { padding: 16vh var(--gutter); border-top: 1px solid var(--line); }

.sc-q { font-size: clamp(26px, 3.6vw, 46px); letter-spacing: -0.03em; max-width: 18ch; margin-bottom: 28px; }

.sc-sign { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline; }

.sc-fig { font-size: clamp(44px, 6vw, 88px); letter-spacing: -0.04em; color: var(--accent); line-height: 1; }

.sc-fig-unit { font-size: .35em; color: var(--muted); margin-left: .1em; }



.sc-obj .sticky { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); }

.sc-obj-list { display: grid; gap: 12px; margin-bottom: 32px; }

.sc-obj-list li { font-size: clamp(22px, 3vw, 38px); letter-spacing: -0.025em; opacity: 0; transform: translateY(12px); }

.sc-finale { font-size: clamp(28px, 4vw, 52px); opacity: 0; }

.sc-pill { display: inline-block; padding: .05em .35em; background: var(--accent); color: var(--accent-ink); border-radius: 999px; }



.sc-footer { padding: 14vh var(--gutter) 40px; border-top: 1px solid var(--line); }

.sc-mail { display: inline-block; margin: 14px 0; font-size: clamp(28px, 5vw, 64px); letter-spacing: -0.035em; border-bottom: 1px solid var(--line); }

.sc-mail:hover { border-color: var(--accent); color: var(--accent); }

.sc-book { display: inline-flex; margin: 20px 0 36px; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }

.sc-giant { font-size: clamp(36px, 9vw, 120px); letter-spacing: -0.05em; color: color-mix(in srgb, var(--ink) 12%, transparent); margin: 6vh 0; white-space: nowrap; overflow: hidden; }

.sc-bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 20px; }

.sc-bottom a { margin-right: 12px; }



@media (max-width: 960px) {

  .sc-hero-grid { grid-template-columns: 1fr; }

  .sc-hero-photo { min-height: 36vh; border-left: 0; border-top: 1px solid var(--line); }

  .sc-strip { grid-template-columns: 1fr; }

  .sc-measures { grid-template-columns: 1fr; }

  .sc-nav { display: none; }

  .sc-grid, .sc-bento { grid-template-columns: 1fr 1fr; }

  .sc-big, .sc-tall { grid-column: span 1; grid-row: span 1; }

}

@media (max-width: 520px) { .sc-grid, .sc-bento { grid-template-columns: 1fr; } }



body.static .sc-strip-bar,

body.static .sc-measure { opacity: 1; transform: none; }

body.static .sc-note-head,

body.static .sc-note-stem,

body.static .sc-note-label { opacity: 1; }

body.static .sc-obj-list li, body.static .sc-finale, body.static .sc-step-cta { opacity: 1; transform: none; pointer-events: auto; }

body.static .sc-step { position: relative; opacity: 1; visibility: visible; margin-bottom: 24px; }

body.static .sc-step-rail i { transform: none; }

body.static .sc-playhead { left: 100%; }