/* Hero, factures illustratives et section de lecture (facture fixe, texte qui défile). */
/* hero */
.hero{min-height:calc(100svh - 72px);display:flex;align-items:center;padding-block:clamp(40px, 6vw, 72px) clamp(56px, 7vw, 96px);overflow:clip}
.hero::before{content:"";position:absolute;right:-10%;top:-30%;width:80vw;height:120%;background:radial-gradient(closest-side, var(--lamp), transparent);pointer-events:none}
.hero .wrap{width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr);gap:clamp(24px, 4vw, 64px);align-items:center}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(2.7rem, 6vw, 5.6rem);line-height:.98;letter-spacing:-.018em;margin-top:26px;max-width:12ch}
.hero h1 em{font-style:normal;color:var(--brass-text)}
.hero .sub{margin-top:28px;font-size:clamp(1.05rem, 1.3vw, 1.2rem);color:var(--ink-2);max-width:50ch;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:38px}

.hero-stage{--sw:clamp(250px, 26.5vw, 385px);position:relative;height:calc(var(--sw) * 1.414 + 110px);perspective:1700px;perspective-origin:40% 30%}
.ground{position:absolute;left:8%;right:2%;bottom:18px;height:70px;background:radial-gradient(closest-side, rgb(var(--shadow) / .32), transparent);filter:blur(10px)}
.tilt{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.stack{position:relative;width:var(--sw);aspect-ratio:1 / 1.414;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-26deg) rotateZ(4deg)}
.layer,.px{position:absolute;inset:0;transform-style:preserve-3d}
.hero .s2{transform:translate3d(-9%, -5%, -70px) rotateZ(-4deg)}
.hero .s3{transform:translate3d(-18%, -10%, -140px) rotateZ(-8deg)}

/* invoice sheet */
.sheet{position:absolute;inset:0;container-type:inline-size;background:linear-gradient(150deg, rgb(var(--hi) / .75), rgb(var(--hi) / 0) 46%), var(--sheet);color:var(--sheet-ink);font-family:var(--f-sans);border-radius:2px;overflow:hidden;box-shadow:1px 1px 0 var(--sheet-edge-1), 2px 2px 0 var(--sheet-edge-2), 3px 3px 0 var(--sheet-edge-3), 6px 14px 22px -8px rgb(var(--shadow) / .3), 22px 44px 70px -22px rgb(var(--shadow) / .42)}
.sheet::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sh-in{position:relative;z-index:1;height:100%;padding:7cqw 7cqw 6cqw;display:flex;flex-direction:column;gap:3cqw}
.sh-in > *{flex-shrink:0}
.sh-top{display:flex;justify-content:space-between;align-items:flex-start}
.sh-brand{display:flex;align-items:center;gap:2.4cqw;font-family:var(--f-mono);font-size:2.6cqw;color:var(--sheet-muted)}
.sh-logo{width:6.4cqw;height:6.4cqw;border-radius:1px;background:var(--band);box-shadow:inset 0 0 0 .9cqw var(--band), inset 0 0 0 1.25cqw var(--brass)}
.sh-stamp{font-family:var(--f-mono);font-size:2.4cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);border:.4cqw solid var(--brass);padding:.9cqw 2cqw;transform:rotate(-5deg);border-radius:1px}
.sh-title{font-family:var(--f-display);font-size:6.6cqw;line-height:1.05;margin-top:1cqw}
.sh-sub{font-family:var(--f-mono);font-size:2.4cqw;color:var(--sheet-muted);margin-top:-2cqw}
.sh-meta{display:grid;grid-template-columns:1.25fr 1fr;gap:2.4cqw 4cqw;margin:0;padding-block:3cqw;border-block:1px solid var(--sheet-rule)}
.sh-meta dt{font-size:2.1cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--sheet-muted)}
.sh-meta dd{margin:.6cqw 0 0;font-family:var(--f-mono);font-size:2.9cqw}
.sh-bars{display:block;width:100%;height:9cqw;fill:var(--bar)}
.sh-bars + .sh-cap{font-family:var(--f-mono);font-size:2.1cqw;color:var(--sheet-muted);margin-top:-2.4cqw}
.sh-lines{display:flex;flex-direction:column}
.ln{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:3cqw;padding-block:1.75cqw;border-bottom:1px solid var(--sheet-rule);font-size:3.1cqw}
.ln span,.ln b{position:relative;z-index:1}
.ln b{font-family:var(--f-mono);font-weight:400;font-size:2.9cqw;color:var(--sheet-muted);letter-spacing:.04em}
.hl{position:absolute;top:0;bottom:0;left:-2.6cqw;right:-2.6cqw;background:var(--brass-wash);border-left:.7cqw solid var(--brass);transform-origin:left center}
.mk{position:absolute;left:-6.3cqw;top:calc(50% - 2.3cqw);width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--brass);color:var(--band-deep);font:500 2.5cqw/4.6cqw var(--f-mono);text-align:center;font-style:normal;z-index:2}
.sheet--plain .hl,.sheet--plain .mk{display:none}
.sh-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:1.4cqw;border-top:.5cqw solid var(--sheet-ink);font-weight:600;font-size:3.3cqw;margin-top:-2cqw}
.sh-total b{font-family:var(--f-mono);font-weight:500;font-size:3.1cqw}
.sh-foot{margin-top:auto;font-family:var(--f-mono);font-size:2.1cqw;color:var(--sheet-muted)}

/* lecture (signature) */
.lecture{min-height:100svh;display:flex;align-items:center;padding-block:clamp(96px, 10vw, 120px) clamp(56px, 6vw, 80px);overflow:clip}
.lecture .wrap{width:100%}
.l-grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:var(--gut);align-items:center}
.l-head h2{margin-top:20px}
.l-head .lede{margin-top:18px;font-size:1rem}
.notes{margin-top:34px;display:grid;gap:4px}
.note{position:relative;display:grid;grid-template-columns:30px 1fr;gap:4px 16px;padding-block:16px;border-top:1px solid var(--band-rule)}
.note::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--brass);transform-origin:left;transform:scaleX(var(--on, 1))}
.note .mk{position:static;width:24px;height:24px;font-size:.72rem;line-height:24px;margin-top:3px}
.note h3{font-family:var(--f-display);font-size:1.45rem;line-height:1.15}
.note p{grid-column:2;font-size:.93rem;color:var(--band-muted);line-height:1.55}
.note .ref{grid-column:2;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--brass-band);margin-top:4px}
.l-stage{--sw:min(390px, calc((100svh - 190px) / 1.414));position:relative;height:calc(var(--sw) * 1.414 + 40px);perspective:1800px;perspective-origin:30% 40%}
.l-stack{position:absolute;top:20px;left:0;width:var(--sw);aspect-ratio:1 / 1.414;transform-style:preserve-3d;transform:rotateY(-5deg)}
.l-stage .s2{transform:translate3d(22%, 2%, -60px) rotateZ(5deg)}
.l-stage .s3{transform:translate3d(42%, 4%, -120px) rotateZ(9deg)}
.l-stage .s2 .sheet,.l-stage .s3 .sheet{filter:brightness(.93)}
.l-cap{position:absolute;left:0;bottom:-34px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;color:var(--band-muted)}

/* bureau : la facture reste à l'écran pendant que les trois notes défilent, quelle que soit la hauteur de la fenêtre */
@media (min-width: 901px){
  .l-grid{align-items:start}
  .l-stage{position:sticky;top:max(92px, calc(50svh - (var(--sw) * 1.414 + 40px) / 2))}
  .is-scrub .notes{gap:12px}
  .is-scrub .note{padding-block:24px}
  .is-scrub .l-head{padding-bottom:22svh}
}