/* ByLemay Films: page CSS only where the kit has no class (the logo image, the film player, the two-field rows) */
.nav__logo { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 20px; }
.brand-mark { width: auto; height: 40px; display: block; }
.footer-logo img { width: 180px; height: auto; display: block; }
.film-hero { padding-top: calc(var(--nav) + var(--s-7)); padding-bottom: var(--s-8); }
.film-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; margin-top: var(--s-6); }
.film-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.page-top { padding-top: calc(var(--nav) + var(--s-8)); }
.form textarea { min-height: 120px; resize: vertical; }
.price-line { font-family: var(--font-display); font-size: var(--t-h3, 28px); }
.inline-link { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.contact-photo { position: sticky; top: calc(var(--nav) + var(--s-6)); }
.statement > .wrap { display: flex; flex-direction: column; }
.statement-photo { flex: 1 1 0; min-height: 240px; margin-top: var(--s-7); }
.brand-mark { height: 48px; }
/* the client asked for pale tones: the film hero's word box and play label sit on the page's cream ground */
.hero__over > :first-child {
  background: var(--p-bg); color: var(--p-ink);
  --bg: var(--p-bg); --ink: var(--p-ink); --muted: var(--p-muted); --action: var(--p-action); --action-ink: var(--p-action-ink);
  --line: color-mix(in oklab, var(--p-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 30%, transparent);
}
.hero__over .hero__lead { color: var(--p-ink); }
.hero--film .ly-play__label { background: var(--p-bg); color: var(--p-ink); }
.ly-play__label small { color: var(--p-muted); }
.faq-photo { position: sticky; top: calc(var(--nav) + var(--s-6)); }
/* sections grow with their content instead of laying it over the next one (the film player, the full FAQ) */
@media (min-width: 1280px) {
  main > :is(section, .section):not(.hero--film), footer.closing { height: auto; min-height: calc(var(--h, 1) * 100svh); }
  main > :is(section, .section):not(.hero--film) > .wrap, footer.closing > .wrap { height: auto; }
}
/* no word is cut with a hyphen in a heading */
h1, h2, h3, h4 { hyphens: manual; -webkit-hyphens: manual; }
.eyebrow { color: var(--muted); margin-bottom: var(--s-4); }
.footnote { color: var(--muted); font-size: var(--t-small); margin-top: var(--s-6); }
/* experience: three steps side by side */
.steps { counter-reset: step; }
.step { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.step__n { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--accent); }
.step h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: 0; }
.wide-photo { margin-top: var(--s-8); aspect-ratio: 21 / 9; }
@media (max-width: 1023px) { .wide-photo { aspect-ratio: 4 / 3; } }
/* FAQ page: the heading column stays in view beside the questions */
.faq-aside { position: sticky; top: calc(var(--nav) + var(--s-6)); align-self: start; }
.values .step__n { font-size: 28px; }
.faq-aside h1 { font-size: var(--t-h2); }
@media (min-width: 1280px) {
  main > section.section--auto { min-height: 0; }
  footer.closing { min-height: 0; }
}
.film-player + p { margin-top: var(--s-4); }
/* inner pages: every section is as tall as what it holds; the page head is compact with a 4:3 photograph */
@media (min-width: 1024px) {
  body[data-page="inner"] main > section:not(.hero) { height: auto; min-height: 0; }
  body[data-page="inner"] main > section:not(.hero) > .wrap { height: auto; }
  body[data-page="inner"] .hero--split { height: auto; min-height: 0; padding-top: calc(var(--nav) + var(--s-7)); padding-bottom: var(--s-8); }
  body[data-page="inner"] .hero--split .hero-text, body[data-page="inner"] .hero--split .wrap { height: auto; }
  body[data-page="inner"] .hero--split .hero-visual { height: auto; aspect-ratio: 4 / 3; }
  body[data-page="inner"] .hero-split > .hero-copy { align-self: center; }
}
.limit-row { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.limit-row h3 { font-size: var(--t-h3, 28px); }
.nowrap { white-space: nowrap; }
.rows__value::first-letter { text-transform: uppercase; }
/* ===== home: full-screen photograph, the brand and the title laid on it; the menu slides in once you scroll ===== */
body[data-page="home"] header.nav { transform: translateY(-100%); transition: transform 350ms var(--ease, ease); }
html.nav-shown body[data-page="home"] header.nav, body[data-page="home"] header.nav:focus-within, body[data-page="home"] header.nav.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { body[data-page="home"] header.nav { transition: none; } }
main > section.home-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; color: #fff; background: #2e2a25; }
.home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.home-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(26, 22, 18, .38) 0%, rgba(26, 22, 18, 0) 22%, rgba(26, 22, 18, 0) 50%, rgba(26, 22, 18, .55) 100%); }
main > section.home-hero > .home-hero__wrap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--s-6) var(--s-9); }
.home-hero__brand { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 22px; letter-spacing: .01em; }
.home-hero__brand img { height: 52px; width: auto; }
.home-hero__text { max-width: 760px; }
.home-hero h1 { color: #fff; font-size: clamp(48px, 7vw, 104px); line-height: 1; letter-spacing: var(--display-tracking-xl); }
.home-hero__lead { margin-top: var(--s-5); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .92); max-width: 34ch; }
@media (max-width: 639px) {
  .home-hero__img { object-position: 58% 50%; }
  main > section.home-hero > .home-hero__wrap { padding-block: var(--s-5) var(--s-8); }
  .home-hero__brand img { height: 42px; }
  .home-hero__brand { font-size: 19px; }
}
main > section.home-hero { height: 100vh !important; height: 100svh !important; }
main > section.home-hero > .home-hero__wrap { height: 100% !important; }
.home-hero__text { text-shadow: 0 1px 24px rgba(20, 16, 12, .25); }
/* home: the company name carries the title; "Vidéaste de mariage" sits small above it */
.home-hero h1 { display: grid; gap: var(--s-4); font-size: inherit; line-height: 1; }
.home-hero__kicker { font-family: var(--font-text); font-size: clamp(14px, 1.1vw, 16px); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.home-hero__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(56px, 8.4vw, 128px); line-height: .95; letter-spacing: var(--display-tracking-xl); color: #fff; }
.home-hero__brand img { height: 64px; }
@media (max-width: 639px) { .home-hero__brand img { height: 50px; } }
.home-hero__name { line-height: 1.12; }
@media (min-width: 1024px) { body[data-page="inner"] .hero--big .hero-visual { aspect-ratio: 1 / 1; } }
@media (min-width: 1024px) { .hero--big .hero-split { align-items: center; } .hero--big .hero-copy { align-self: center !important; } }
@media (min-width: 1024px) { .hero--big .hero-split > .hero-copy { height: auto !important; } }
/* ===== films page: a wide banner photograph with the title in it, then the three films ===== */
main > section.films-banner { height: auto !important; min-height: 0 !important; padding: calc(var(--nav) + var(--s-5)) 0 0; }
main > section.films-banner > .wrap { height: auto !important; }
.films-banner__frame { position: relative; overflow: hidden; border-radius: var(--r-lg); height: clamp(320px, 52vh, 560px); background: #2e2a25; }
.films-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.films-banner__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(26, 22, 18, .55) 0%, rgba(26, 22, 18, 0) 55%); }
.films-banner__title { position: absolute; z-index: 1; left: clamp(24px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px); margin: 0; color: #fff; font-size: clamp(48px, 7vw, 104px); line-height: 1.05; letter-spacing: var(--display-tracking-xl); }
main > section.films-list { padding-top: var(--s-7); }
.films-list__lead { margin-bottom: var(--s-7); max-width: 60ch; }
.films-list .tile h3 { font-size: 20px; }
@media (max-width: 767px) { .grid > a.tile { grid-column: 1 / -1; } }
@media (max-width: 767px) { main .grid > a.tile.tile:is(.span-4, .span-6) { grid-column: 1 / -1; } }