/* ============================================================
 * Matthieu Mantovani — Director portfolio
 * Cinematic full-bleed redesign · May 2026
 * ============================================================ */

/* ------- Fonts ------- */
@font-face {
  font-family: 'NB Architekt';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/NBArchitekt-Light.woff2') format('woff2'),
       url('../fonts/NBArchitekt-Light.woff')  format('woff'),
       url('../fonts/NBArchitekt-Light.otf')   format('opentype');
}
@font-face {
  font-family: 'NB Architekt';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/NBArchitekt-Regular.woff2') format('woff2'),
       url('../fonts/NBArchitekt-Regular.woff')  format('woff'),
       url('../fonts/NBArchitekt-Regular.otf')   format('opentype');
}
/* Kept for legacy use */
@font-face {
  font-family: 'VAG';
  font-weight: 700;
  src: url('../fonts/VAGRoundedStd-Bold.woff') format('woff');
  font-display: swap;
}
/* Avenir family — book / roman / medium / heavy, extracted from Avenir.ttc */
@font-face {
  font-family: 'Avenir';
  font-weight: 350;        /* Book — slightly lighter than regular */
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Avenir-Book.woff2') format('woff2'),
       url('../fonts/Avenir-Book.woff')  format('woff');
}
@font-face {
  font-family: 'Avenir';
  font-weight: 400;        /* Roman */
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Avenir-Roman.woff2') format('woff2'),
       url('../fonts/Avenir-Roman.woff')  format('woff');
}
@font-face {
  font-family: 'Avenir';
  font-weight: 500;        /* Medium */
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Avenir-Medium.woff2') format('woff2'),
       url('../fonts/Avenir-Medium.woff')  format('woff');
}
@font-face {
  font-family: 'Avenir';
  font-weight: 800;        /* Heavy */
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Avenir-Heavy.woff2') format('woff2'),
       url('../fonts/Avenir-Heavy.woff')  format('woff');
}

/* ------- Reset + base ------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* Survol — choix validés : menu Couleur A (#487b9c), listes Couleur 2 Ciel (#7eb8da) */
/* Trame fond — Bleu acier 14 %, maille 7 px (motif Quadrillage par défaut) */
:root {
  --color-hover-nav:  #487b9c;
  --color-hover-list: #7eb8da;
  --color-nav-click:  #1e3a4f;   /* bleu foncé au clic (pas le bleu saturé navigateur) */
  --grid-line-color: rgba(232, 126, 203, 0.14);
  --grid-size: 7px;
  /* Bottom grid — 5 cols, header + 10 lines max per column */
  --grid-col-w:         250px;
  --grid-col-gap:       30px;
  --grid-col-lines:     10;
  --grid-header-lh:     18px;
  --grid-item-lh:       18px;
  --grid-header-gap:    12px;
  --grid-list-min-h:    calc(var(--grid-col-lines) * var(--grid-item-lh));
  --grid-edge:          50px;
  --grid-edge-bottom:   40px;
}

body {
  font-family: 'NB Architekt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.25;
  color: #fff;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }

/* ------- Background layer (full bleed cinematic still or video) ------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #000 center center / cover no-repeat;
  background-image: none;
  overflow: hidden;
}
.bg { isolation: isolate; }   /* stacking context */
.bg-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.bg-hover.is-visible { opacity: 1; }

.bg-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 1;
}
.bg-poster.is-visible { opacity: 1; }

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s ease;
  z-index: 1;
}
.bg-video.is-hidden { opacity: 0; }

.bg-vimeo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 1;
}
/* Dark overlay (25 % black) — sits ABOVE the image/video, BELOW the grid */
.bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
  z-index: 2;
}
/* Trame fond — motif 1 Quadrillage (défaut), couleur via --grid-line-color */
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  z-index: 3;
}

/* Motifs alternatifs (testables via representation.html?lab=1) */
body[data-grid-motif="2"] .bg::after {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--grid-line-color) 0,
    var(--grid-line-color) 1px,
    transparent 1px,
    transparent 8px
  );
  background-size: auto;
}
body[data-grid-motif="3"] .bg::after {
  background-image: repeating-linear-gradient(
    45deg,
    var(--grid-line-color) 0,
    var(--grid-line-color) 1px,
    transparent 1px,
    transparent 8px
  );
  background-size: auto;
}
body[data-grid-motif="4"] .bg::after {
  background-image:
    repeating-linear-gradient(-45deg, var(--grid-line-color) 0, var(--grid-line-color) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(45deg,  var(--grid-line-color) 0, var(--grid-line-color) 1px, transparent 1px, transparent 9px);
  background-size: auto;
}
body[data-grid-motif="5"] .bg::after {
  background-image: radial-gradient(circle, var(--grid-line-color) 0.55px, transparent 0.55px);
  background-size: var(--grid-size) var(--grid-size);
}
body[data-grid-motif="6"] .bg::after {
  background-image:
    linear-gradient(to right,  var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: 14px 14px;
}
body[data-grid-motif="7"] .bg::after {
  background-image:
    linear-gradient(to right,  var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: 4px 4px;
}
body[data-grid-motif="8"] .bg::after {
  background-image: linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: 100% var(--grid-size);
}
body[data-grid-motif="9"] .bg::after {
  background-image: linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px);
  background-size: var(--grid-size) 100%;
}
body[data-grid-motif="10"] .bg::after {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--grid-line-color) 0,
    var(--grid-line-color) 1px,
    transparent 1px,
    transparent 5px
  );
  background-size: auto;
}

/* ------- Title + nav stack (top-left, fixed) ------- */
.brand-stack {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Title and nav share the SAME visual weight & size — one tight 4-line block */
.brand-stack .name,
.brand-stack nav a {
  font-family: 'NB Architekt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 3.64vw, 55px);
  line-height: 46px;
  letter-spacing: 0;
  color: transparent;
  white-space: nowrap;
  text-decoration: none;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.brand-stack .name::selection,
.brand-stack nav a::selection,
.brand-stack .nav-label::selection {
  background: transparent;
  color: inherit;
}
.brand-stack .name::-moz-selection,
.brand-stack nav a::-moz-selection,
.brand-stack .nav-label::-moz-selection {
  background: transparent;
  color: inherit;
}
.brand-stack .nav-label {
  color: #fff;
  transition: color .15s ease;
}
.brand-stack nav a {
  display: block;
}
.brand-stack nav a:hover .nav-label,
.brand-stack nav a.is-active .nav-label {
  color: var(--color-hover-nav);
}
.brand-stack .name:active .nav-label,
.brand-stack nav a:active .nav-label {
  color: var(--color-nav-click);
}
.brand-stack .name:focus,
.brand-stack nav a:focus {
  outline: none;
}
.brand-stack .name:-moz-focusring,
.brand-stack nav a:-moz-focusring {
  outline: none;
}
.brand-stack .name:focus-visible,
.brand-stack nav a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.25);
  outline-offset: 3px;
}

.brand-stack .name {
  margin-bottom: 0;
}
.brand-stack nav {
  display: flex;
  flex-direction: column;
}

/* No gap anywhere (kept class but inert) */
.brand-stack nav a.nav-gap { margin-top: 0; }

/* Same colors for films-list and companies */
.films-list .film:hover     { opacity: 1; color: var(--color-hover-list); }
.films-list .film.is-active { opacity: 1; color: var(--color-hover-list); }
.company a:hover .co-link   { color: #487b9c; opacity: 1; }

/* Contact email — fixed at bottom-left, aligned to left: 50px like the brand-stack */
.contact-email-small {
  position: fixed;
  bottom: 50px;
  left: 50px;
  z-index: 100;
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: color .15s ease;
  opacity: 0;
  animation: fadeIn 1.2s ease 0.4s forwards;
}
.contact-email-small:hover { color: #487b9c; }

/* ------- Mobile nav toggle ------- */
.mobile-toggle {
  display: none;
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 200;
  color: #fff;
  font-size: 26px;
  padding: 8px;
  line-height: 1;
}

/* ------- Main layout ------- */
main {
  position: relative;
  min-height: 100vh;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

/* ------- HOME page — pure full-bleed image ------- */
.page-home main { /* nothing — bg does the work */ }

/* ------- FILMS page — 5-column grid, hover changes bg ------- */
.films-section {
  display: contents;  /* .films-grid--cols is the fixed bottom grid */
}
.films-grid {
  display: block;          /* all categories stacked in a single column */
}
.films-cat { margin: 0; }
.films-cat h3 {
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;                /* default: no gap before the list (legacy flat-list mode) */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Default flat-list films layout — 2 sub-columns of 245 px */
.films-list {
  display: block;
  width: 540px;        /* 2 fixed columns of 245 px + 50 px gap */
  column-count: 2;
  column-gap: 50px;
  column-fill: balance;
}

/* ===== films.html v2 — 3-column grid layout (each category = 1 column) =====
   Locked widths/gaps identical to .series-grid and .rep-grid: 5 × 245 px,
   gap 50 px, start-aligned. Categories occupy cols 1, 2, 3 of that template;
   cols 4 and 5 stay empty (right side of the screen). */
.films-grid--cols {
  display: grid;
  grid-template-columns: repeat(5, var(--grid-col-w));
  gap: 0 var(--grid-col-gap);
  justify-content: start;
  align-items: start;
}
.films-grid--cols .films-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.films-grid--cols .films-cat h3 {
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: var(--grid-header-lh);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--grid-header-gap);
  white-space: nowrap;
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}
.films-grid--cols .films-cat .films-cat-head-empty {
  /* Invisible header that still occupies one line-height + 12 px margin,
     so the films list of an unnamed column stays vertically aligned with
     the headed columns (col 1 and col 3). */
  visibility: hidden;
}
.films-grid--cols .films-list {
  display: block;
  width: var(--grid-col-w);
  column-count: 1;
  column-gap: 0;
  overflow: hidden;
  min-height: var(--grid-list-min-h);
}
.films-grid--cols .films-list .film {
  display: block;
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.films-list .film { break-inside: avoid; }
.films-list .film:nth-child(n+11) { display: none; }

.films-list .film {
  font-family: 'NB Architekt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: var(--grid-item-lh);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: block;
  white-space: nowrap;
  text-shadow: none;
  transition: color .15s ease;
  background: transparent;
  border: 0;
}

.films-list .film .company,
.films-list .film .name {
  display: inline;
  font-family: 'NB Architekt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: var(--grid-item-lh);
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}
.films-list .film .agency { display: none; }

/* Vertical separator + single space after, before the film name */
.films-list .film .name::before {
  content: "|";
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.films-list .film:hover .company,
.films-list .film:hover .name { color: var(--color-hover-list); opacity: 1; }
.films-list .film:hover .name::before { color: var(--color-hover-list); opacity: 1; }

/* Featured film label — disabled (was appearing on hover) */
.featured-label { display: none !important; }

/* ------- ABOUT page — block to the right of the brand-stack, right-aligned text ------- */
.about-section {
  position: fixed;
  top: auto;
  bottom: var(--grid-edge-bottom);
  left: 50px;
  right: calc((100vw - 100px) / 3);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: visible;
}
.about-section h3 {
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
  text-align: left;
}
.about-section .about-body {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 350;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  width: 100%;
  column-count: 2;
  column-gap: 50px;
  column-fill: balance;
}
.about-section .about-body p { margin: 0; }
.about-section .about-body a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease; }
.about-section .about-body a:hover { color: #487b9c; }

/* ------- ARTWORK page — Photography + Installations side-by-side ------- */
.series-section {
  display: contents;  /* .series-grid is the fixed bottom grid */
}
.series-grid {
  display: grid;
  grid-template-columns: repeat(5, var(--grid-col-w));
  gap: 0 var(--grid-col-gap);
  align-items: start;
  justify-content: start;
}
.series-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.series-col-head {
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: var(--grid-header-lh);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--grid-header-gap);
  white-space: nowrap;
  text-shadow: none;
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  overflow: hidden;
  text-overflow: ellipsis;
}
.series-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  overflow: hidden;
  min-height: var(--grid-list-min-h);
}
.series-list .series-link:nth-child(n+11) { display: none; }
.series-list .series-link {
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: var(--grid-item-lh);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-shadow: none;
  transition: color .15s ease;
  display: block;
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.series-list .series-link:hover { color: var(--color-hover-list); }

/* Fullscreen photo viewer */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
}
.photo-viewer.is-open { display: flex; }
.photo-viewer-media {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  border: 0;
}
.photo-viewer-media[hidden] { display: none !important; }
.photo-viewer img.photo-viewer-media {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
}
.photo-viewer .photo-nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  cursor: pointer;
  z-index: 1;
}
.photo-viewer .photo-nav-prev { left: 0;  cursor: w-resize; }
.photo-viewer .photo-nav-next { right: 0; cursor: e-resize; }

.photo-viewer .photo-info {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 2;
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}
.photo-viewer .photo-close {
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 2;
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .15s ease;
}
.photo-viewer .photo-close:hover { color: #487b9c; }

/* ------- REPRESENTATION page (4 sections) ------- */
/* Shared bottom grid — rep / films / artwork (5 cols, bottom-anchored) */
.rep-grid,
.films-grid--cols,
.series-grid {
  position: fixed;
  bottom: var(--grid-edge-bottom);
  left:   var(--grid-edge);
  z-index: 50;
  width:  max-content;
  text-shadow: none;
}
.rep-grid {
  display: grid;
  grid-template-columns: repeat(5, var(--grid-col-w));
  gap: 0 var(--grid-col-gap);
  align-items: start;
  justify-content: start;
}
.rep-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.rep-col h3 {
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: var(--grid-header-lh);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  opacity: 1;
  margin: 0 0 var(--grid-header-gap);
  white-space: nowrap;
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-col ul {
  display: block;
  margin: 0;
  padding: 0;
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  min-height: var(--grid-list-min-h);
}
.rep-col li {
  padding: 0;
  margin: 0;
  line-height: var(--grid-item-lh);
  width: var(--grid-col-w);
  max-width: var(--grid-col-w);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rep-col li:nth-child(n+11) { display: none; }
.rep-col li.rep-placeholder a { opacity: 0.35; pointer-events: none; }
/* Sub-header inside a column (white 100%) — used in Agent column */
.rep-col .rep-subheader {
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
}
.rep-col .rep-subheader .sep { color: #fff; margin: 0 3px; }
/* Empty line spacer */
.rep-col .rep-spacer { height: 22px; }
.rep-col a {
  display: block;
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: var(--grid-item-lh);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color .15s ease;
}
.rep-col a:hover,
.rep-col a:hover .region,
.rep-col a:hover .sep,
.rep-col a:hover .name { color: var(--color-hover-list); opacity: 1; }
.rep-col a .sep { color: rgba(255, 255, 255, 0.85); margin: 0 3px; }
.rep-col a .region { color: rgba(255, 255, 255, 0.85); font-weight: 300; }

/* ===== Representation v2 — after the | separator, switch to Avenir Book ===== */
.page-representation-v2 .rep-col a .name {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 350;        /* Avenir Book */
  text-transform: none;     /* lower-casing for cleaner Avenir feel */
  letter-spacing: 0;
  font-size: 14px;
  line-height: 22px;
}

/* ------- (old PRODUCTION COMPANIES — kept for legacy contact.html) ------- */
.contact-section {
  width: 100%;
  min-height: 100vh;
  padding: 32px 32px 48px;
  display: flex;
  align-items: flex-end;     /* anchor content at bottom-left like reference */
  justify-content: flex-start;
}
.contact-inner {
  width: 100%;
  max-width: 1180px;
  padding: 0;
  background: transparent;
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.contact-inner h2 {
  display: none; /* Section title already shown in brand-stack nav */
}

.companies-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 26px 32px;
  max-width: 920px;
}
.company {
  display: block;
  text-align: left;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
}
.company .co-name {
  display: block;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  margin-bottom: 2px;
}
.company .co-region {
  display: block;
  font-weight: 300;
  opacity: 0.75;
  letter-spacing: 0;
  margin-bottom: 2px;
}
.company .co-link {
  display: block;
  font-weight: 300;
  letter-spacing: 0;
  opacity: 0.65;
  text-transform: lowercase;
}
.company a { display: block; }
.company a:hover .co-name,


.contact-email {
  margin-top: 36px;
  padding-top: 0;
  border-top: 0;
  font-family: 'NB Architekt', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #fff;
  opacity: 0.85;
}
.contact-email a { color: #487b9c; margin-left: 8px; }

/* ------- Vimeo lightbox (full-window) ------- */
.lightbox {
  position: fixed; inset: 0;
  background: #000;
  display: none;
  z-index: 2000;
  cursor: default;
}
.lightbox.is-open { display: block; }
.lightbox .frame {
  position: absolute;
  inset: 0;
  background: #000;
}
.lightbox iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox-close {
  position: fixed;
  top: 24px;
  right: 28px;
  color: #fff;
  font-family: 'NB Architekt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2100;
}
.lightbox.show-close .lightbox-close { opacity: 1; }
.lightbox-close:hover { color: #487b9c; }

/* ------- Responsive ------- */
@media (max-width: 1024px) {
  .brand-stack { left: 24px; top: 22px; }
  .films-section { left: 28px; right: 28px; bottom: 90px; }
  .films-list { column-count: 2; column-gap: 40px; }
  .rep-grid { left: 28px; right: 28px; bottom: 50px; grid-template-columns: repeat(3, 1fr); gap: 24px 28px; }
  .contact-section { padding: 100px 28px 60px; }
  .contact-inner { margin-left: 0; padding: 24px; }
  .companies-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .brand-stack { left: 18px; top: 18px; }
  .brand-stack .name,
  .brand-stack nav a { font-size: 28px; line-height: 22px; }
  .brand-stack .name { margin-bottom: 0; }
  .brand-stack nav { display: flex; }

  .mobile-toggle { display: none; }

  .films-section { left: 18px; right: 18px; bottom: 80px; }
  .films-list { column-count: 2; column-gap: 24px; }
  .films-list .film { font-size: 13px; padding: 5px 0; }
  .rep-grid { left: 18px; right: 18px; bottom: 50px; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .rep-col a { font-size: 13px; }

  .featured-label { left: 18px; bottom: 22px; max-width: 245px; font-size: 10px; }

  .contact-section { padding: 70px 18px 40px; }
  .companies-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
}

@media (max-width: 480px) {
  .companies-grid { grid-template-columns: 1fr; gap: 18px; }
  .brand-stack .name,
  .brand-stack nav a { font-size: 22px; line-height: 17px; }
  .films-list { column-count: 1; }
  .films-list .film { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   SITE LAYOUT — Homothetic proportional scaling (Representation reference)
   Pages: home, about, films, photography, representation
   ========================================================================== */

.page-home,
.page-about,
.page-films,
.page-artwork,
.page-representation {
  /* scaled tokens */
  --grid-col-w-s:   calc(var(--grid-col-w)   * var(--scale, 1));
  --grid-col-gap-s: calc(var(--grid-col-gap) * var(--scale, 1));
  --grid-header-lh-s:  calc(var(--grid-header-lh)  * var(--scale, 1));
  --grid-item-lh-s:    calc(var(--grid-item-lh)    * var(--scale, 1));
  --grid-header-gap-s: calc(var(--grid-header-gap) * var(--scale, 1));
  --grid-list-min-h-s: calc(var(--grid-col-lines) * var(--grid-item-lh) * var(--scale, 1));
  --grid-edge-s:        calc(var(--grid-edge) * var(--scale, 1));
  --grid-edge-bottom-s: calc(var(--grid-edge-bottom) * var(--scale, 1));
}

.page-home .brand-stack,
.page-about .brand-stack,
.page-films .brand-stack,
.page-artwork .brand-stack,
.page-representation .brand-stack {
  top:  var(--grid-edge-s);
  left: var(--grid-edge-s);
  text-shadow: none;
}
.page-home .brand-stack .name,
.page-home .brand-stack nav a,
.page-about .brand-stack .name,
.page-about .brand-stack nav a,
.page-films .brand-stack .name,
.page-films .brand-stack nav a,
.page-artwork .brand-stack .name,
.page-artwork .brand-stack nav a,
.page-representation .brand-stack .name,
.page-representation .brand-stack nav a {
  font-size:   calc(56px * var(--scale, 1));
  line-height: calc(46px * var(--scale, 1));
  font-weight: 300;
  color:       transparent;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: none;
}
.page-home .brand-stack .nav-label,
.page-about .brand-stack .nav-label,
.page-films .brand-stack .nav-label,
.page-artwork .brand-stack .nav-label,
.page-representation .brand-stack .nav-label {
  color: #fff;
}
.page-home .brand-stack nav a:hover .nav-label,
.page-home .brand-stack nav a.is-active .nav-label,
.page-about .brand-stack nav a:hover .nav-label,
.page-about .brand-stack nav a.is-active .nav-label,
.page-films .brand-stack nav a:hover .nav-label,
.page-films .brand-stack nav a.is-active .nav-label,
.page-artwork .brand-stack nav a:hover .nav-label,
.page-artwork .brand-stack nav a.is-active .nav-label,
.page-representation .brand-stack nav a:hover .nav-label,
.page-representation .brand-stack nav a.is-active .nav-label {
  color: var(--color-hover-nav);
  text-shadow: none;
}
.page-home .brand-stack .name:active .nav-label,
.page-home .brand-stack nav a:active .nav-label,
.page-about .brand-stack .name:active .nav-label,
.page-about .brand-stack nav a:active .nav-label,
.page-films .brand-stack .name:active .nav-label,
.page-films .brand-stack nav a:active .nav-label,
.page-artwork .brand-stack .name:active .nav-label,
.page-artwork .brand-stack nav a:active .nav-label,
.page-representation .brand-stack .name:active .nav-label,
.page-representation .brand-stack nav a:active .nav-label {
  color: var(--color-nav-click);
  text-shadow: none;
}

/* Bottom grids — same position & column slot height on every page */
.page-films .films-grid--cols,
.page-artwork .series-grid,
.page-representation .rep-grid {
  bottom: var(--grid-edge-bottom-s);
  left:   var(--grid-edge-s);
  grid-template-columns: repeat(5, var(--grid-col-w-s));
  gap: 0 var(--grid-col-gap-s);
  text-shadow: none;
}

.page-representation .rep-col h3,
.page-films .films-grid--cols .films-cat h3,
.page-artwork .series-col-head {
  font-size:      calc(13px  * var(--scale, 1));
  line-height:    var(--grid-header-lh-s);
  letter-spacing: calc(0.3px * var(--scale, 1));
  font-weight:    400;
  margin: 0 0 var(--grid-header-gap-s);
  width:     var(--grid-col-w-s);
  max-width: var(--grid-col-w-s);
  text-shadow: none;
}

.page-representation .rep-col ul,
.page-films .films-grid--cols .films-list,
.page-artwork .series-list {
  width:     var(--grid-col-w-s);
  max-width: var(--grid-col-w-s);
  min-height: var(--grid-list-min-h-s);
}

.page-representation .rep-col li,
.page-films .films-grid--cols .films-list .film,
.page-artwork .series-list .series-link {
  line-height: var(--grid-item-lh-s);
  width:       var(--grid-col-w-s);
  max-width:   var(--grid-col-w-s);
}

.page-representation .rep-col a,
.page-representation .rep-col .rep-subheader,
.page-films .films-list .film,
.page-films .films-list .film .company,
.page-films .films-list .film .name,
.page-artwork .series-list .series-link {
  font-size:      calc(13px  * var(--scale, 1));
  line-height:    var(--grid-item-lh-s);
  letter-spacing: calc(0.3px * var(--scale, 1));
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.85);
  text-shadow:    none;
}

.page-representation .rep-col a .region,
.page-representation .rep-col a .sep,
.page-films .films-list .film .name::before {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: none;
}

.page-representation .rep-col a:hover,
.page-representation .rep-col a:focus-visible,
.page-representation .rep-col a:hover .region,
.page-representation .rep-col a:hover .sep,
.page-representation .rep-col a:hover .name,
.page-representation .rep-col a:focus-visible .region,
.page-representation .rep-col a:focus-visible .sep,
.page-representation .rep-col a:focus-visible .name,
.page-films .films-list .film:hover .company,
.page-films .films-list .film:hover .name,
.page-films .films-list .film:hover .name::before,
.page-artwork .series-list .series-link:hover {
  color: var(--color-hover-list);
  text-shadow: none;
}

.page-representation .rep-col a .sep,
.page-representation .rep-col .rep-subheader .sep {
  margin: 0 calc(3px * var(--scale, 1));
}
.page-representation .rep-col .rep-spacer {
  height: var(--grid-item-lh-s);
}

.page-films .films-grid--cols .films-list .film {
  width:     var(--grid-col-w-s);
  max-width: var(--grid-col-w-s);
}

/* About — scaled typography, no text-shadow */
.page-about .about-section {
  top:    auto;
  bottom: var(--grid-edge-bottom-s);
  left:   calc(50px * var(--scale, 1));
  text-shadow: none;
}
.page-about .about-section h3 {
  font-size:   calc(13px * var(--scale, 1));
  line-height: calc(18px * var(--scale, 1));
  letter-spacing: calc(0.3px * var(--scale, 1));
  color: #fff;
  text-shadow: none;
}
.page-about .about-section .about-body {
  font-size:   calc(14px * var(--scale, 1));
  line-height: calc(18px * var(--scale, 1));
  color: rgba(255, 255, 255, 0.85);
  text-shadow: none;
}
.page-about .about-section .about-body a {
  color: rgba(255, 255, 255, 0.85);
}

/* ===== Hover Lab panel (?lab=1 on representation.html) ===== */
.hover-lab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  width: min(320px, calc(100vw - 32px));
  max-height: min(85vh, 720px);
  overflow-y: auto;
  padding: 14px 14px 12px;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: 'NB Architekt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.hover-lab.is-hidden { display: none; }
.hover-lab__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hover-lab__head strong { font-weight: 400; font-size: 12px; }
.hover-lab__status {
  margin: 0 0 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 10px;
  text-transform: none;
  line-height: 1.4;
  opacity: 0.9;
}
.hover-lab__hint {
  flex: 1 1 100%;
  opacity: 0.65;
  font-size: 10px;
  text-transform: none;
}
.hover-lab__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0.7;
}
.hover-lab__close:hover { opacity: 1; color: #487b9c; }
.hover-lab__section { margin-bottom: 12px; }
.hover-lab__section h4 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.85;
}
.hover-lab__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hover-lab__btn {
  min-width: 28px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.hover-lab__btn:hover,
.hover-lab__btn.is-active {
  background: rgba(72, 123, 156, 0.35);
  border-color: #487b9c;
  color: #fff;
}
.hover-lab__btn--wide {
  flex: 1 1 calc(50% - 6px);
  text-align: left;
  text-transform: none;
  font-size: 10px;
}
.hover-lab__swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform .1s, border-color .12s;
}
.hover-lab__swatch:hover { transform: scale(1.08); }
.hover-lab__swatch.is-active { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.hover-lab__swatch--wide {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}
.hover-lab__nav-color {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 calc(50% - 6px);
  font-size: 9px;
  text-transform: none;
  opacity: 0.9;
}
.hover-lab__grid--grid-colors { gap: 8px; }
.hover-lab__grid--motifs { gap: 6px; }
.hover-lab__btn--motif {
  min-width: 26px;
  padding: 6px 7px;
  font-size: 11px;
}
.hover-lab__swatch--grid {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.hover-lab__grid--nav-colors { gap: 8px 10px; }

/* Lab preview — couleur visible sans survol */
.hover-lab-active .rep-col a.hover-lab-preview,
.hover-lab-active .rep-col a.hover-lab-preview .region,
.hover-lab-active .rep-col a.hover-lab-preview .sep {
  color: var(--hover-list-preview, var(--hover-list, #487b9c)) !important;
}
.hover-lab-active .brand-stack nav a.hover-lab-preview-nav {
  color: var(--hover-nav, #487b9c) !important;
}
.hover-lab__note {
  margin: 8px 0 0;
  opacity: 0.55;
  font-size: 9px;
  text-transform: none;
  line-height: 1.4;
}