/* gozpie.com — sobre, façon site de photographe : fond blanc, un seul corps de texte, les films au centre */
@font-face { font-family: "Geist"; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f2f1ee;
  --ink: #161616;
  --muted: #75736e;
  --line: #dcdad4;
  --night: #111110;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --g: clamp(18px, 2.2vw, 64px);
  --size: clamp(13px, .22vw + 10.5px, 17px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--size)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* En-tête : blanc sur la vidéo d'ouverture, puis blanc plein en descendant */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: calc(var(--g) * .8 + env(safe-area-inset-top, 0px)) max(var(--g), env(safe-area-inset-right, 0px)) calc(var(--g) * .8) max(var(--g), env(safe-area-inset-left, 0px));
  color: #fff; transition: background .35s, color .35s;
}
.bar.solid { background: var(--bg); color: var(--ink); }
.bar a:hover { opacity: .6; color: inherit; }
.name { font-weight: 600; letter-spacing: .04em; }
.name span { font-weight: 400; letter-spacing: 0; opacity: .75; margin-left: .45em; }
.bar nav { display: flex; gap: clamp(16px, 2vw, 40px); }

/* Ouverture plein écran (gardée telle quelle) */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--night); color: #fff; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%); }
.hero-text { position: absolute; left: max(var(--g), env(safe-area-inset-left, 0px)); right: var(--g); bottom: clamp(90px, 13vh, 220px); }
.hero-kicker { margin: 0 0 1.2em; font-size: .85em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { margin: 0; font: 500 clamp(42px, 6.4vw, 190px)/.95 var(--font); letter-spacing: -.045em; }
.hero h1 em { font-style: normal; opacity: .72; }
.hero-film { position: absolute; right: max(var(--g), env(safe-area-inset-right, 0px)); bottom: calc(clamp(24px, 3vh, 48px) + env(safe-area-inset-bottom, 0px));
  display: grid; justify-items: end; gap: .25em; text-align: right; background: none; border: 0; color: #fff; cursor: pointer; font: inherit; padding: 0; }
.hf-label { font-size: .85em; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.hf-title { font-weight: 500; }
.hf-play { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid #fff; padding-bottom: 2px; margin-top: .4em; }

/* Intro et grille des films (gardées de la V2) */
.intro, .films { padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 24px var(--g); padding-block: clamp(70px, 9vw, 220px); }
.intro-side { margin: .55em 0 0; font-size: .85em; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.intro-text { margin: 0; font: 400 clamp(24px, 2.5vw, 76px)/1.2 var(--font); letter-spacing: -.025em; max-width: 34ch; text-wrap: pretty; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: clamp(14px, 1.2vw, 26px); margin-bottom: clamp(24px, 2.4vw, 56px); }
.sec-head h2 { margin: 0; font: 500 clamp(28px, 2.8vw, 90px)/1 var(--font); letter-spacing: -.035em; }
.count { font-size: .85em; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 3.4vw, 90px) clamp(10px, 1.1vw, 28px); }
.card { display: grid; gap: clamp(10px, .8vw, 18px); min-width: 0; }
.card:hover { color: inherit; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); }
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.thumb video { opacity: 0; }
.card.playing video { opacity: 1; }
.card:hover .thumb img, .card:hover .thumb video { transform: scale(1.025); }
.thumb .dur { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-size: .85em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.cap { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.cap strong { font-weight: 500; }
.cap span { color: var(--muted); text-align: right; }

/* Info et contact : petite grille de texte */
.info {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px 16px;
  padding: clamp(110px, 16vh, 260px) max(var(--g), env(safe-area-inset-right, 0px)) 0 max(var(--g), env(safe-area-inset-left, 0px));
}
.info h2, .info h3 { margin: 0; font: inherit; font-weight: 600; }
.info h3 { color: var(--muted); font-weight: 400; }
.info p { margin: 0 0 1.2em; max-width: 46ch; }
.info .list p { margin-bottom: 1.6em; }
.info .text a, .info .list a { border-bottom: 1px solid var(--line); }
.muted { color: var(--muted); }
.contact { padding-top: clamp(90px, 14vh, 200px); }
.copy { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.copy:hover { color: var(--ink); }

.foot { display: flex; justify-content: space-between; gap: 16px; padding: clamp(120px, 20vh, 260px) max(var(--g), env(safe-area-inset-right, 0px)) calc(var(--g) + env(safe-area-inset-bottom, 0px)) max(var(--g), env(safe-area-inset-left, 0px)); color: var(--muted); }

/* Visionneuse : blanche aussi, le film au centre */
.viewer { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: grid; grid-template-rows: auto 1fr auto auto; overflow-y: auto;
  padding: calc(var(--g) * .8 + env(safe-area-inset-top, 0px)) max(var(--g), env(safe-area-inset-right, 0px)) calc(var(--g) + env(safe-area-inset-bottom, 0px)) max(var(--g), env(safe-area-inset-left, 0px)); }
.v-top, .v-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: baseline; }
.v-top p { margin: 0; font-weight: 600; grid-column: 1 / 3; }
.v-close { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; justify-self: end; color: var(--ink); }
.v-close:hover { color: var(--muted); }
.v-stage { display: grid; place-items: center; padding-block: 24px; min-height: 0; }
.v-stage video { width: min(100%, 150vh); max-height: 76vh; background: #000; }
.v-meta { margin: 0; color: var(--muted); }
.v-desc { margin: 0; grid-column: 2 / 4; max-width: 60ch; }
.v-stills { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw, 300px), 1fr)); gap: 8px; margin-top: 40px; }
.v-stills:empty { display: none; }
.v-stills img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 760px) {
  .name span { display: none; }
  .hero { height: 88svh; }
  .hero-text { bottom: 150px; }
  .hero-film { left: var(--g); justify-items: start; text-align: left; }
  .intro, .grid { grid-template-columns: minmax(0, 1fr); }
  .info, .v-top, .v-bottom { grid-template-columns: minmax(0, 1fr); }
  .info .col:first-child { margin-bottom: -8px; }
  .v-top p, .v-desc { grid-column: auto; }
  .v-close { justify-self: start; }
  .cap { flex-direction: column; gap: 2px; }
  .cap span { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .thumb img, .thumb video, .bar { transition: none; } }