/* Marble theme: Calacatta ground, Nero Marquina for the dark beats. Loaded after the page styles. */
:root {
  --sc-canvas: #f2efe9; --sc-surface: #faf8f4;
  --sc-ink: #151412; --sc-ink-soft: #6b6760;
  --sc-accent: #151412; --sc-accent-ink: #f6f3ee;
  --gold: #151412;
  --gold-dim: color-mix(in oklab, #151412 22%, transparent);
  --vein: #8f8a82;
  --line: rgba(21,20,18,.14);
  --line-strong: rgba(21,20,18,.3);
  --paper: #f6f3ee;
}
html, body { background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: #151412; color: #f6f3ee; }

/* the stone itself: fixed Calacatta layer, multiplied into the drift colour */
.marble-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("assets/marble-white.jpg") center / cover no-repeat; opacity: .9; transform: translateZ(0); }
#ink { mix-blend-mode: multiply; opacity: .55; z-index: 0; }

.kicker { color: var(--vein); font-style: italic; }
.disp em { color: inherit; font-style: italic; }
.sc-grain { opacity: .35; }
[data-sc-progress] { background: #151412 !important; }

/* light device chrome, like brushed aluminium */
.browser { background: #e8e5df; box-shadow: 0 70px 120px -60px rgba(40,34,26,.55), 0 30px 50px -30px rgba(40,34,26,.35), 0 0 0 1px rgba(21,20,18,.08), inset 0 1px 0 rgba(255,255,255,.7); }
.chrome { background: linear-gradient(#f1eee9, #e4e0d9); border-bottom: 1px solid rgba(21,20,18,.08); }
.dots span { background: #cfcac2; }
.url { background: #f8f6f2; color: #6b6760; box-shadow: inset 0 0 0 1px rgba(21,20,18,.06); }
.url::before { border-color: #6b6760; }
.phone { background: linear-gradient(145deg, #2b2a28, #0f0e0d); box-shadow: 0 50px 90px -30px rgba(40,34,26,.6), 0 0 0 1px rgba(21,20,18,.3), inset 0 0 0 1px rgba(255,255,255,.12); }

/* hero on stone */
.hero .amp { -webkit-text-stroke: 1px rgba(21,20,18,.16); }
.hero .scrim { background: radial-gradient(ellipse 50% 42% at 50% 52%, rgba(244,241,236,.9), rgba(244,241,236,.5) 62%, transparent 88%); }
.hero h1 .brand i { color: var(--vein); }
.hero .sculpt { display: grid; place-items: center; }
.hero .sculpt img { height: min(92vh, 60rem); width: auto; mix-blend-mode: multiply; opacity: .85; -webkit-mask-image: radial-gradient(ellipse 46% 48% at 50% 46%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 46% 48% at 50% 46%, #000 52%, transparent 100%); filter: contrast(1.05) brightness(1.06); }
.hero .scrim { background: radial-gradient(ellipse 42% 30% at 50% 55%, rgba(244,241,236,.7), transparent 80%); }
@media (max-width: 820px) { .hero .sculpt img { height: 78vh; opacity: .7; } }
.hero .sub { color: var(--sc-ink-soft); }
.hero .sub b { color: var(--sc-ink); }

/* Nero Marquina beats */
/* quiet beats: pure Calacatta, ink type, a single hairline of vein */
.nero { color: var(--sc-ink); }
.nero .lines p em, .nero .disp em { color: var(--vein); }
.contact.nero .sub { color: var(--sc-ink-soft); }
.contact.nero .mail { color: var(--sc-ink); border-color: var(--line-strong); }
.contact.nero .mail:hover, .contact.nero .mail:focus-visible { border-color: var(--sc-ink); }
.contact.nero .foot { color: var(--sc-ink-soft); }
.manif .lines p em { color: inherit; }

/* œuvre */
.oeuvre .glow { background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.7), transparent 62%); }
.oeuvre .label p, .oeuvre .label dt { color: var(--sc-ink-soft); }

/* collection + méthode */
.rail .intro p, .steps p { color: var(--sc-ink-soft); }
.steps li, .steps li:last-child { border-color: var(--line); }
.steps .when { color: var(--vein); }
.work .tag { color: var(--sc-ink-soft); }

/* tarifs: honed stone cards, the Ultime cut from black marble */
.tarifs .head p { color: var(--sc-ink-soft); }
.plan { background: rgba(250,248,244,.72); border-color: var(--line); box-shadow: 0 30px 60px -40px rgba(40,34,26,.35); }
.plan:hover { border-color: var(--line-strong); }
.plan .kicker { color: var(--vein); }
.plan h3 em { color: inherit; }
.plan .price small { color: var(--vein); }
.plan .delay { border-color: var(--line-strong); }
.plan .delay::before { background: #151412; }
.plan ul { color: var(--sc-ink-soft); }
.plan li::before { background: #151412; }
.plan a { color: #151412; border-color: var(--line); }
.plan.ultime { color: var(--sc-ink); background: #fbfaf7 url("assets/marble-white.jpg") 30% 40% / 260% auto; border: 1px solid #151412; box-shadow: 0 60px 110px -50px rgba(40,34,26,.55), 0 20px 40px -24px rgba(40,34,26,.3), inset 0 0 0 6px rgba(251,250,247,.6), inset 0 0 0 7px rgba(21,20,18,.12); }
.plan.ultime::before { background: #151412; color: #f6f3ee; }
.plan.ultime a { background: #151412; color: #f6f3ee; }

/* ================= Typography: Didone + geometric ================= */
:root {
  --sc-font-display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --sc-font-text: "Jost", "Futura", system-ui, sans-serif;
}
/* mockups keep their own voice */
.screen, .phone { --sc-font-display: "Cormorant Garamond", serif; --sc-font-text: "Inter", system-ui, sans-serif; }

body { font-family: var(--sc-font-text); font-weight: 300; font-optical-sizing: auto; text-rendering: optimizeLegibility; font-kerning: normal; }
p, li { font-weight: 300; }
b, strong { font-weight: 400; }

.disp { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -.028em; line-height: .94; font-feature-settings: "kern", "liga", "dlig"; }
.disp em { font-weight: 400; letter-spacing: -.02em; }

/* labels: wide-tracked geometric capitals, not italics */
.kicker, .plan .kicker { font-family: var(--sc-font-text); font-style: normal; font-weight: 400; font-size: .7rem; letter-spacing: .38em; text-transform: uppercase; color: var(--vein); }

/* nav */
.bar .mark { font-family: var(--sc-font-display); font-size: 1.3rem; letter-spacing: -.01em; }
.bar .mark i { font-style: italic; }
.bar .call { font-family: var(--sc-font-text); font-weight: 400; font-size: .68rem; letter-spacing: .36em; }

/* hero */
.hero h1 { font-size: clamp(3rem, 8.2vw, 8.8rem); line-height: .92; }
.hero h1 .brand { font-family: var(--sc-font-text); font-size: .11em; font-weight: 400; letter-spacing: .5em; text-transform: uppercase; margin-bottom: 1.6em; padding-left: .5em; }
.hero h1 .brand i { font-style: normal; color: var(--vein); }
.hero .sub { font-size: 1.05rem; line-height: 1.75; letter-spacing: .005em; max-width: 42ch; }

/* manifesto: big Didone, italics carry the voice */
.manif .lines p { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(2rem, 4.8vw, 4.8rem); }
.manif .lines p em { font-style: italic; }

/* œuvre + collection */
.oeuvre .label h2 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); }
.oeuvre .label p, .rail .intro p { font-size: .98rem; line-height: 1.8; }
.oeuvre .label dl { font-family: var(--sc-font-text); font-weight: 400; font-size: .68rem; letter-spacing: .3em; }
.work h3 { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; }
.work .tag { font-family: var(--sc-font-text); font-weight: 400; font-size: .64rem; letter-spacing: .32em; }

/* méthode */
.steps .when { font-family: var(--sc-font-display); font-style: italic; font-size: 1.25rem; }
.steps h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.9rem; letter-spacing: -.02em; }
.steps p { font-size: 1rem; line-height: 1.8; }

/* tarifs: Didone numerals are the jewel */
.plan h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 2.1rem; letter-spacing: -.025em; line-height: 1; }
.plan .price { font-family: var(--sc-font-display); font-weight: 400; font-size: 5.2rem; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.plan .price small { font-family: var(--sc-font-text); font-size: 1rem; font-weight: 400; letter-spacing: .1em; margin-left: .2rem; }
.plan .delay { font-family: var(--sc-font-text); font-weight: 400; font-size: .64rem; letter-spacing: .3em; }
.plan ul { font-size: .95rem; line-height: 1.6; }
.plan a { font-family: var(--sc-font-display); font-style: italic; font-size: 1.15rem; }
.plan.ultime a, .plan.ultime::before { font-family: var(--sc-font-text); font-style: normal; font-weight: 400; letter-spacing: .34em; }

/* contact */
.contact h2 { font-size: clamp(3rem, 8.4vw, 8.4rem); }
.contact .sub { font-family: var(--sc-font-text); font-style: normal; font-weight: 300; font-size: 1.05rem; line-height: 1.75; }
.contact .mail { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; letter-spacing: -.015em; }
.contact .foot { font-family: var(--sc-font-text); font-weight: 400; font-size: .62rem; letter-spacing: .38em; }

/* ================= Manifesto gallery: statues rising from the stone ================= */
.manif [data-sc-stage] { overflow: hidden; }
.manif .statue { position: absolute; pointer-events: none; z-index: 0; }
.manif .statue img { height: 100%; width: auto; mix-blend-mode: multiply; filter: contrast(1.05) brightness(1.07);
  -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 48%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 48% 50% at 50% 48%, #000 50%, transparent 100%); }
.manif .s1 { left: -3%; bottom: -8%; height: 96vh; opacity: .9; }
.manif .s2 { right: -4%; top: 2%; height: 90vh; opacity: .85; }
.manif .s3 { left: 0; right: 0; bottom: -14%; height: 46vh; display: flex; justify-content: center; opacity: .38; }
.manif .lines { position: relative; z-index: 2; }
.manif .lines::before { content: ""; position: absolute; inset: -20% -10%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(246,244,240,.85), rgba(246,244,240,0) 72%); z-index: -1; }
@media (max-width: 820px) {
  .manif .s1 { height: 58vh; left: -24%; bottom: -4%; opacity: .6; }
  .manif .s2 { height: 54vh; right: -26%; top: 6%; opacity: .55; }
  .manif .s3 { height: 30vh; }
}
/* sleeping head: stays inside the stage, fades out before the bottom edge */
.manif .s3 { bottom: 2%; height: 40vh; }
.manif .s3 img { -webkit-mask-image: radial-gradient(ellipse 44% 40% at 50% 46%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 44% 40% at 50% 46%, #000 40%, transparent 100%); }
@media (max-width: 820px) { .manif .s3 { height: 26vh; bottom: 2%; } }

/* upgrade */
.plan.ultime::before { content: "Réservation en ligne"; }