@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Helvetica Bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/helvetica-bold.woff2) format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/ebgaramond-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/ebgaramond-italic-latin.woff2) format('woff2');
}

:root {
  --bg: #000;
  --fg: #fff;
  --soft: #c4c4c4;
  --mute: #8f8f8f;
  --line: rgba(255, 255, 255, 0.16);
  --gutter: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Accueil : les films défilent dans un cadre fixe. La page elle-même ne bouge pas, donc la barre
   du navigateur mobile reste en place : chaque film garde exactement la taille de l'écran. */
body.home { overflow: hidden; height: 100%; }
.home .reels {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home .reels::-webkit-scrollbar { display: none; }
.home .reel { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
ol,
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Petites capitales larges (façon 530°) : menus, légendes, libellés */
.nav a,
.cap,
.snd,
.meta,
.label,
.label-k,
.facts dt,
.pager a,
.tab,
.endcard-links a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  font-stretch: 112%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--soft);
}
.label { color: var(--mute); }

/* Titres : la typo du logo */
.wordmark,
.page-title,
.values h3,
.loader-mark {
  font-family: var(--sans);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark { display: block; color: var(--fg); line-height: 0; }
.wordmark svg { display: block; height: 15px; width: auto; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3)); }
.wordmark sup,
.loader-mark sup { font-size: 0.42em; font-weight: 500; margin-left: 0.12em; vertical-align: 0.95em; }
.page-title { font-size: clamp(34px, 6vw, 96px); margin-bottom: 0.45em; }

/* Textes : Garamond, comme division.global */
.lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  max-width: 30ch;
}
.lede + .lede { margin-top: 0.6em; }

/* ---------- En-tête : liens répartis, logo au centre ---------- */
.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding: 18px var(--gutter) 0;
  padding-top: max(18px, env(safe-area-inset-top));
}
/* Pages de texte : le header reste lisible quand le contenu passe dessous */
body:not(.home) .top {
  padding-bottom: 28px;
  background: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0));
}
.nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
}
.nav > :first-child { justify-self: start; }
.nav > :last-child { justify-self: end; }
.nav a { color: var(--fg); transition: opacity 0.3s; text-shadow: 0 0 14px rgba(0, 0, 0, 0.35); }
.nav a:not(.wordmark):hover { opacity: 0.6; }
/* Façon Division : sur une page, l'onglet en cours reste blanc, les autres s'atténuent */
.nav:has([aria-current]) a:not(.wordmark):not([aria-current]) { opacity: 0.45; }
.nav:has([aria-current]) a:not(.wordmark):not([aria-current]):hover { opacity: 0.8; }
.nav a:hover,
.nav a[aria-current] { color: var(--fg); }

/* ---------- Écran de chargement ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: #000;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.loader-mark { display: block; color: var(--fg); line-height: 0; animation: reveal 1.1s var(--ease) both; }
.loader-mark svg { display: block; width: clamp(220px, 38vw, 560px); height: auto; }
.loader-bar { width: clamp(120px, 14vw, 200px); height: 1px; background: var(--line); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: var(--fg); transform-origin: left; animation: bar 1.6s cubic-bezier(0.65, 0, 0.35, 1) both; }
.is-ready .loader { opacity: 0; visibility: hidden; }
.skip-intro .loader { display: none; }

/* ---------- Films plein écran au scroll ---------- */
.reel {
  position: relative;
  height: 100vh;
  height: 100svh;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  scroll-snap-align: start;
}
.reel video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.25;
  transition: opacity 1s var(--ease);
}
.reel.in-view video { opacity: 1; }
/* Film vertical sur écran large : entier, l'espace autour reprend ses couleurs (fond flou) */
@media (orientation: landscape) {
  .reel.is-portrait video { object-fit: contain; }
}
/* voile léger en haut et en bas : header et légende lisibles sur les images claires */
.reel::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 150px),
    linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 180px);
}
.reel .cap,
.reel .snd {
  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s var(--ease) 0.2s, transform 0.8s var(--ease) 0.2s, color 0.3s;
}
.reel.in-view .cap,
.reel.in-view .snd { opacity: 1; transform: none; }
/* Titre du film façon division.global : au milieu à gauche, grand, nom en blanc, détail en gris */
.reel .cap {
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
}
.reel .cap .l1,
.reel .cap .l2 { display: block; width: fit-content; }
.reel .cap .l2 { color: rgba(255, 255, 255, 0.55); }
.reel .cap:hover { opacity: 0.85; }
/* Le titre est toujours là ; ce sont ses lignes qui apparaissent à chaque film. */
.reel .cap,
.reel.in-view .cap { opacity: 1; transform: none; transition: opacity 0.3s; }

/* Titres : chaque ligne monte légèrement en sortant d'un flou, la grise juste après */
.reel .cap .l1,
.reel .cap .l2 {
  display: block;
  width: fit-content;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.reel.in-view .cap .l1,
.reel.in-view .cap .l2 {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: 1.1s;
  transition-delay: 0.25s;
}
.reel.in-view .cap .l2 { transition-delay: 0.45s; }

.reel .snd { right: var(--gutter); bottom: max(18px, env(safe-area-inset-bottom)); }
.snd span { color: var(--mute); }
.snd[aria-pressed='true'],
.snd[aria-pressed='true'] span { color: var(--fg); }

/* Légendes des films : la typo des paragraphes (Garamond), en casse normale */
.reel .cap,
.player .cap,
.meta {
  font-family: var(--serif);
  font-weight: 400;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  line-height: 1.2;
}
.reel .cap { font-size: clamp(30px, 3.6vw, 60px); line-height: 1.05; max-width: 18em; }
.player .cap { font-size: clamp(20px, 1.7vw, 26px); }
.meta { font-size: clamp(17px, 1.4vw, 21px); }
.page-projects .intro { margin-bottom: clamp(36px, 5vw, 64px); color: var(--soft); }

/* Fond flou : canvas de 64 px, flou calculé petit puis agrandi par main.js (transform) */
.ambient {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform-origin: 0 0;
  filter: blur(2px) brightness(0.5) saturate(1.2);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}
.ambient.is-live { opacity: 1; }

/* Carton de fin de l'accueil : qui est ANGRAMM (texte lisible par Google et les IA) */
.endcard {
  min-height: 70vh;
  min-height: 70svh;
  display: grid;
  align-content: center;
  gap: 40px;
  padding: 120px var(--gutter);
  scroll-snap-align: start;
}
.endcard-links { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.endcard-links a:hover { color: var(--fg); }

/* ---------- Projets : mosaïque, 2 films par ligne ---------- */
.mosaic-wrap { padding: 120px var(--gutter) 96px; }
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px) clamp(12px, 2vw, 28px);
}
.mosaic li { animation: rise 0.9s var(--ease) both; }
.mosaic li:nth-child(2n) { animation-delay: 0.08s; }
.tile { display: block; }
.frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.frame img,
.frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.6s var(--ease), transform 1.4s var(--ease);
}
.frame video { opacity: 0; }
.tile.is-playing .frame video { opacity: 1; }
.tile:hover .frame img,
.tile:hover .frame video { transform: scale(1.025); }
.meta { display: block; margin-top: 12px; }

/* ---------- Team ---------- */
.team { padding: 120px var(--gutter) 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(72px, 10vw, 140px); }
.team > *,
.bts { min-width: 0; }
.team-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px clamp(32px, 6vw, 120px);
  align-items: end;

}
.team-film { display: grid; gap: 12px; justify-items: start; }
.team-film video {
  display: block;
  width: auto;
  height: min(68svh, 700px);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #111;
  cursor: pointer;
}
.values ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px var(--gutter);
  margin-top: 28px;
}
.values li { border-top: 1px solid var(--line); padding-top: 18px; }
.values h3 { font-size: clamp(18px, 1.6vw, 24px); margin-bottom: 0.7em; }
.values p { font-family: var(--serif); font-size: clamp(18px, 1.4vw, 22px); line-height: 1.35; color: var(--soft); max-width: 34ch; }

.members ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px var(--gutter); margin-top: 28px; }
.members .role { display: block; font-stretch: 112%; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.members .who { font-family: var(--serif); font-size: 24px; }

.bts .tabs {
  display: flex;
  gap: 8px 28px;
  margin: 28px 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.bts .tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; padding: 6px 0; color: var(--mute); transition: color 0.3s; }
.tab span { color: inherit; }
.tab:hover,
.tab[aria-selected='true'] { color: var(--fg); }
.tab[aria-selected='true'] { box-shadow: 0 1px 0 var(--fg); }
.panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); animation: fade 0.6s var(--ease) both; }
.panel[hidden] { display: none; }
.panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; display: block; }
.panel.is-portrait img { aspect-ratio: 9 / 16; }

.clients p { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 34px); line-height: 1.3; margin-top: 20px; max-width: 46ch; }

/* ---------- Contact (façon division.global) ---------- */
.contact {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(48px, 8vh, 96px);
  padding: 130px var(--gutter) 72px;
}
.contact-text .lede { max-width: 34ch; }
.lede.cta { margin-top: 1em; }
.inquiries { display: grid; gap: 0; max-width: 860px; }
.inquiries li > a,
.inquiries li:not(:has(a)) {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.inquiries li:last-child > a,
.inquiries li:last-child:not(:has(a)) { border-bottom: 1px solid var(--line); }
.inquiries svg,
.inquiries .ico { color: var(--soft); align-self: center; }
.inquiries .v { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); }
.inquiries a { transition: color 0.3s; }
.inquiries a:hover .v,
.inquiries a:hover .label-k { color: var(--fg); }

/* ---------- Page projet ---------- */
.player {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}
.film { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.player .cap,
.player .snd { position: absolute; z-index: 1; bottom: max(18px, env(safe-area-inset-bottom)); }
.player .cap { left: var(--gutter); right: 150px; margin: 0; color: var(--fg); }
.player .snd { right: var(--gutter); }

.sheet {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px var(--gutter);
  padding: clamp(64px, 10vw, 140px) var(--gutter) 64px;
}
.facts { margin: 0; display: grid; gap: 14px; align-content: start; }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.pager {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pager a:hover { color: var(--fg); }

/* ---------- Animations ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }

/* Changement de page : fondu léger, le header reste en place (View Transitions) */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
::view-transition-old(root) { animation: page-out 0.32s var(--ease) both; }
::view-transition-new(root) { animation: page-in 0.7s var(--ease) both; }
.no-vt main { animation: page-in 0.7s var(--ease) both; }
.no-vt body.is-leaving main { opacity: 0; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }

.team-text > *,
.team-film,
.values li,
.contact-text > *,
.inquiries li,
.sheet > *,
.player .cap,
.player .snd { animation: rise 0.9s var(--ease) both; }
.team-text > :nth-child(2),
.contact-text > :nth-child(2) { animation-delay: 0.08s; }
.team-text > :nth-child(3),
.contact-text > :nth-child(3) { animation-delay: 0.16s; }
.team-film { animation-delay: 0.15s; }
.values li:nth-child(2),
.inquiries li:nth-child(2) { animation-delay: 0.1s; }
.values li:nth-child(3),
.inquiries li:nth-child(3) { animation-delay: 0.2s; }
.inquiries li:nth-child(4) { animation-delay: 0.3s; }
.player .cap,
.player .snd { animation-delay: 0.4s; }
.film { animation: fade 1.2s var(--ease) both; }

/* ---------- Curseur : le A du logo ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor,
  .has-cursor * { cursor: none !important; }
  .has-cursor .cursor {
    display: block;
    position: fixed;
    left: 0; top: 0;
    z-index: 100;
    color: #fff;
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.2s;
  }
  .cursor span {
    display: block;
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 600;
    font-stretch: 112%;
    line-height: 1;
    transform: translate(-50%, -14%);
    transform-origin: 50% 14%;
    transition: transform 0.25s var(--ease);
  }
  .cursor.is-link span { transform: translate(-50%, -14%) scale(1.35); }
  .cursor.is-off { opacity: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  /* En-tête façon division.global : logo, fine ligne, menu sur une ligne */
  .nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 14px; }
  .nav .wordmark {
    flex: 0 0 calc(100% + 2 * var(--gutter));
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .nav .wordmark svg { height: 18px; }
  .nav a,
  .cap,
  .snd,
  .meta,
  .label,
  .label-k,
  .facts dt,
  .pager a,
  .tab,
  .endcard-links a { font-size: 12px; }
  .nav a { font-size: 11px; }

  /* Légende façon Division : client en blanc, titre en gris dessous */
  .reel .snd { bottom: max(28px, env(safe-area-inset-bottom)); }
  .reel .cap { font-size: 30px; line-height: 1.08; }
  .reel .cap .l2 { display: block; }
  .player .cap { right: 104px; bottom: max(28px, env(safe-area-inset-bottom)); }
  .player .snd { bottom: max(28px, env(safe-area-inset-bottom)); }

  .mosaic-wrap,
  .team { padding-top: 132px; }
  .contact { padding-top: 140px; }
  .mosaic { gap: 28px 10px; }
  .meta { font-size: 17px; }

  .team-hero,
  .sheet { grid-template-columns: 1fr; min-height: 0; }
  .team-film video { height: auto; width: min(100%, 360px); }
  .values ol { grid-template-columns: 1fr; }
  .panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inquiries li > a,
  .inquiries li:not(:has(a)) { grid-template-columns: 1fr; gap: 4px; }
  .facts div { grid-template-columns: 96px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .home .reels { scroll-snap-type: none; }
  *,
  *::before,
  *::after,
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; transition: none !important; }
  .reel video { opacity: 1; }
}

/* Titres sur deux lignes hors de l'accueil : mosaïque, page film, onglets Team */
.meta .l1,
.meta .l2,
.player .cap .l1,
.player .cap .l2 { display: block; }
.meta .l2,
.player .cap .l2 { color: rgba(255, 255, 255, 0.55); }
.tab .l1 { color: inherit; }
.tab .l2 { color: inherit; opacity: 0.6; text-transform: none; font-stretch: normal; }

/* Accueil sur ordinateur : uniquement les films 16:9.
   Page Films : tous les films, en vignettes 4:5 qui conviennent aux deux formats
   (seul le doublon de format d'un même film est masqué : 9:16 sur ordinateur, 16:9 sur téléphone). */
@media (min-width: 721px) {
  .reel.is-portrait,
  .mosaic li.alt-desktop { display: none; }
}
.frame { aspect-ratio: 4 / 5; }

/* ---------- Team : deux blocs de texte ---------- */
.team { gap: clamp(64px, 9vw, 120px); align-content: center; min-height: 100svh; }
.team-block { display: grid; gap: 22px; max-width: 760px; animation: rise 0.9s var(--ease) both; }
.team-block + .team-block { animation-delay: 0.12s; }
.team-title {
  font-family: var(--sans);
  font-weight: 600;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.1;
}

/* ---------- Contact : mail, Instagram et le film ANGRAMM ---------- */
.contact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px clamp(32px, 6vw, 120px); }
.contact-film { margin: 0; display: grid; gap: 12px; justify-items: start; animation: rise 0.9s var(--ease) 0.15s both; }
.contact-film video { display: block; width: auto; height: min(70svh, 720px); aspect-ratio: 9 / 16; object-fit: cover; background: #111; cursor: pointer; }
@media (max-width: 720px) {
  .contact { grid-template-columns: 1fr; align-content: start; }
  .contact-film video { height: auto; width: min(100%, 360px); }
  .team { min-height: 0; align-content: start; }
}

/* ================= Retours client (novembre) ================= */
:root { --helv: 'Helvetica Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* Menu (FILMS, TEAM, CONTACT), grands titres de page et titres de Team : Helvetica Bold */
.nav a:not(.wordmark),
.page-title,
.team-title {
  font-family: var(--helv);
  font-weight: 700;
  font-stretch: normal;
  letter-spacing: 0;
}

/* Ordinateur : uniquement le 16:9 ; téléphone : uniquement le vertical */
@media (max-width: 720px) {
  .reel:not(.is-portrait),
  .mosaic li.alt-phone { display: none; }
}

/* « OLYMPIQUE DE MARSEILLE » et autres noms toujours sur une seule ligne */
.reel .cap .l1 { white-space: nowrap; }
@media (max-width: 720px) {
  .reel .cap { font-size: min(30px, 6.6vw); }
}

/* Contact : sans traits */
.inquiries li > a,
.inquiries li:not(:has(a)),
.inquiries li:last-child > a,
.inquiries li:last-child:not(:has(a)) { border: 0; padding: 10px 0; }

/* Team sur un seul écran */
.team {
  min-height: 100svh;
  padding-top: clamp(96px, 14vh, 140px);
  padding-bottom: clamp(32px, 6vh, 64px);
  gap: clamp(28px, 6vh, 64px);
  align-content: center;
}
.team .lede { font-size: clamp(19px, min(2.2vw, 3.4vh), 34px); }
.bts-link { display: inline-flex; align-items: baseline; gap: 14px; width: fit-content; transition: opacity 0.3s; animation: rise 0.9s var(--ease) 0.24s both; }
.bts-link:hover { opacity: 0.6; }
.bts-link .arr { font-family: var(--helv); font-size: clamp(20px, 2vw, 30px); }
@media (max-width: 720px) {
  .team { padding-top: 120px; min-height: 100svh; gap: 28px; align-content: start; }
  .team .lede { font-size: 19px; }
  .team-block { gap: 12px; }
}

/* Page film : flèches précédent / suivant */
.player .arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 34vw;
  color: var(--fg);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.player .arrow.prev { left: var(--gutter); }
.player .arrow.next { right: var(--gutter); text-align: right; }
.player .arrow .a { font-family: var(--helv); font-size: clamp(26px, 2.6vw, 40px); line-height: 1; }
.player .arrow .t { font-family: var(--serif); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.2; opacity: 0; transition: opacity 0.3s; }
.player .arrow .k { display: block; font-family: var(--sans); font-size: 11px; text-transform: uppercase; font-stretch: 112%; color: var(--soft); margin-bottom: 4px; }
.player .arrow:hover .t,
.player .arrow:focus-visible .t { opacity: 1; }
.player .arrow.prev:hover { transform: translateX(-4px); }
.player .arrow.next:hover { transform: translateX(4px); }
@media (max-width: 720px) {
  .player .arrow .t { display: none; }
  .player .arrow { top: auto; bottom: 72px; translate: none; }
}

/* Behind the scenes : grande mosaïque */
.bts-wrap { padding: 120px var(--gutter) 96px; }
.masonry { columns: 3 320px; column-gap: clamp(8px, 1.2vw, 16px); }
.masonry .shot { display: block; margin-bottom: clamp(8px, 1.2vw, 16px); break-inside: avoid; overflow: hidden; background: #111; }
.masonry img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease), opacity 0.4s; }
.masonry .shot:hover img { transform: scale(1.03); }
@media (max-width: 720px) {
  .bts-wrap { padding-top: 132px; }
  .masonry { columns: 2; }
}

/* Page film : plus de texte, la fiche seule à gauche */
.sheet { grid-template-columns: minmax(0, 1fr); }
.sheet .facts { max-width: 560px; }

/* Team : aperçu de trois photos de tournage sous « Behind the scenes » */
.bts-link { display: grid; gap: 16px; width: 100%; max-width: 760px; }
.bts-head { display: inline-flex; align-items: baseline; gap: 14px; }
.bts-peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bts-peek img { display: block; width: 100%; height: clamp(110px, 20vh, 220px); object-fit: cover; background: #111; transition: transform 1.2s var(--ease); }
.bts-link:hover { opacity: 1; }
.bts-link:hover .bts-head { opacity: 0.6; }
.bts-link:hover .bts-peek img { transform: scale(1.03); }
.bts-peek { overflow: hidden; }
@media (max-width: 720px) {
  .bts-peek img { height: 120px; }
}

@media (min-width: 721px) {
  .team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); }
  .team-block { grid-column: 1; }
  .bts-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .bts-peek img { height: clamp(160px, 30vh, 320px); }
}

/* Film masqué sur ordinateur (PUMA) */
@media (min-width: 721px) {
  .reel.hide-desktop { display: none; }
}
/* Team = mosaïque Behind the scenes, sans titre */
.page-team .bts-wrap { padding-top: 96px; }
@media (max-width: 720px) { .page-team .bts-wrap { padding-top: 112px; } }
/* Contact : textes + mail / Instagram dans une colonne, film à côté */
.contact-col { display: grid; gap: clamp(28px, 5vh, 56px); align-content: center; }
.contact .team-block { max-width: 640px; }
.contact .team-block .lede { font-size: clamp(19px, min(2vw, 3.2vh), 30px); }

/* Mosaïque en rangées : l'ordre se lit de gauche à droite, ligne par ligne (les 3 photos choisies en premier) */
.masonry { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.masonry .shot { margin: 0; }
.masonry img { aspect-ratio: 2 / 3; height: auto; object-fit: cover; }
@media (max-width: 720px) {
  .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Team : « BEHIND THE SCENES » + les 3 photos choisies, sur un seul écran ; clic → mosaïque */
.team-bts { height: 100vh; height: 100svh; padding: 84px var(--gutter) clamp(24px, 4vh, 48px); display: grid; }
.team-bts-link { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 3vh, 32px); min-height: 0; }
.team-bts .page-title { margin: 0; font-size: clamp(40px, 7vw, 120px); line-height: 0.9; transition: opacity 0.3s; }
.team-bts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); min-height: 0; }
.team-bts-row img { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; transition: transform 1.2s var(--ease); animation: rise 0.9s var(--ease) both; }
.team-bts-row img:nth-child(2) { animation-delay: 0.08s; }
.team-bts-row img:nth-child(3) { animation-delay: 0.16s; }
.team-bts-link:hover .page-title { opacity: 0.6; }
.team-bts-link:hover img { transform: scale(1.02); }
@media (max-width: 720px) {
  .team-bts { padding-top: 112px; }
  .team-bts .page-title { font-size: clamp(34px, 11vw, 56px); }
}

/* Contact sur un seul écran */
.contact { height: 100vh; height: 100svh; min-height: 0; padding-top: 84px; padding-bottom: clamp(20px, 4vh, 40px); overflow: hidden; }
.contact-col { gap: clamp(14px, 3vh, 36px); }
.contact .team-block { gap: clamp(6px, 1.4vh, 16px); }
.contact .team-title { font-size: clamp(16px, min(1.6vw, 2.6vh), 26px); }
.contact .team-block .lede { font-size: clamp(14px, min(1.6vw, 2.4vh), 26px); }
.contact .inquiries li > a { padding: clamp(4px, 1vh, 10px) 0; }
.contact .inquiries .v { font-size: clamp(16px, min(1.6vw, 2.6vh), 24px); }
.contact-film video { height: min(calc(100svh - 160px), 720px); }
@media (max-width: 720px) {
  .contact { grid-template-columns: minmax(0, 1fr) 34%; align-items: end; gap: 14px; padding-top: 112px; }
  .contact-col { align-content: start; align-self: start; }
  .contact .team-block .lede { font-size: clamp(13px, 3.6vw, 16px); line-height: 1.25; }
  .contact .team-title { font-size: 15px; }
  .contact-film { align-self: end; }
  .contact-film video { width: 100%; height: auto; }
}

/* Helvetica aussi pour SOUND OFF/ON, PREVIOUS/NEXT, MAIL/INSTAGRAM et la page 404 */
.snd,
.snd span,
.arrow .k,
.label-k,
.lb-close,
body.page-404 *:not(.wordmark):not(svg):not(path) {
  font-family: var(--helv);
  font-weight: 700;
  font-stretch: normal;
  letter-spacing: 0;
}

/* Visionneuse Behind the scenes : photo en grand + précédent / suivant */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.94);
  padding: 72px var(--gutter);
  animation: fade 0.3s var(--ease) both;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 144px); object-fit: contain; display: block; }
.lightbox .lb-close { position: absolute; top: 24px; right: var(--gutter); color: var(--fg); font-size: 13px; text-transform: uppercase; }
.lightbox .arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  display: flex; align-items: center; gap: 12px;
  color: var(--fg); background: none; border: 0; cursor: pointer;
}
.lightbox .arrow.prev { left: var(--gutter); }
.lightbox .arrow.next { right: var(--gutter); }
.lightbox .arrow .a { font-family: var(--helv); font-size: clamp(26px, 2.6vw, 40px); line-height: 1; }
.lightbox .arrow .k { font-size: 12px; text-transform: uppercase; color: var(--soft); }
@media (max-width: 720px) {
  .lightbox { padding: 64px 12px 96px; }
  .lightbox .arrow { top: auto; bottom: 28px; translate: none; }
}

/* Ordinateur : menu groupé à droite, logo à gauche */
@media (min-width: 721px) {
  .nav { display: flex; align-items: center; gap: clamp(28px, 3vw, 48px); }
  .nav .wordmark { margin-right: auto; }
  .nav > :last-child { justify-self: auto; }
}
/* Films : grille plus dense sur ordinateur (4 par ligne), sans grand titre */
.mosaic-wrap { padding-top: 96px; }
@media (min-width: 721px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px) clamp(10px, 1.2vw, 18px); }
}
@media (max-width: 720px) { .mosaic-wrap { padding-top: 112px; } }

/* Team : texte « One crew » + Behind the scenes + 3 photos, sur un écran */
.team-bts { grid-template-rows: auto minmax(0, 1fr); gap: clamp(18px, 3.5vh, 40px); }
.team-bts .team-block { max-width: 720px; gap: clamp(6px, 1.2vh, 14px); }
.team-bts .team-title { font-size: clamp(16px, min(1.6vw, 2.6vh), 26px); }
.team-bts .team-block .lede { font-size: clamp(15px, min(1.6vw, 2.5vh), 26px); line-height: 1.25; }
.team-bts .page-title { font-size: clamp(32px, min(5.5vw, 8vh), 96px); }
@media (max-width: 720px) {
  .team-bts .team-block .lede { font-size: clamp(14px, 3.8vw, 16px); }
}
/* Contact : « Our mark », mail / Instagram et le film, centrés verticalement */
.contact-col { align-self: center; }
.team-bts { overflow: hidden; }
.team-bts-link { min-height: 0; height: 100%; }
.team-bts-row { min-height: 0; height: 100%; overflow: hidden; }
.team-bts-row img { min-height: 0; }
@media (max-width: 720px) {
  .contact { align-content: center; align-items: center; }
  .contact-col, .contact-film { align-self: center; }
}

.contact .team-block .lede + .lede { margin-top: 0.4em; }

/* Contact (ordinateur) : textes alignés sur la hauteur de la vidéo, en plus grand pour remplir la page */
@media (min-width: 721px) {
  .contact { align-items: stretch; align-content: center; }
  .contact-col { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; height: min(calc(100svh - 160px), 720px); }
  .contact .team-block { max-width: 760px; }
  .contact .team-block .lede { font-size: clamp(22px, min(2.3vw, 3.6vh), 38px); line-height: 1.2; max-width: 32ch; }
  .contact .inquiries .v { font-size: clamp(20px, min(1.8vw, 2.8vh), 30px); }
  .contact-film { align-self: start; }
}

/* ===== Contact, mise en page finale ===== */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "intro film" "col film";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: 0;
  align-items: start;
  align-content: center;
}
.contact .c-intro { grid-area: intro; margin: 0; }
.contact .contact-col { grid-area: col; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; height: 100%; }
.contact .contact-film { grid-area: film; align-self: center; }
.contact .lede { max-width: none; }
@media (min-width: 721px) {
  .contact { padding-left: var(--gutter); }
  .contact .lede { font-size: clamp(26px, min(3.1vw, 4.4vh), 52px); line-height: 1.15; }
  .contact .c-more { margin-top: 0.6em; }
  .contact-col { height: auto !important; }
  .contact .contact-film video { height: min(calc(100svh - 170px), 760px); }
}
@media (max-width: 720px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) 40%;
    grid-template-areas: "intro intro" "col film";
    grid-template-rows: auto auto;
    row-gap: 22px; column-gap: 14px;
    align-content: start; align-items: stretch;
    padding-top: 120px;
  }
  .contact .lede { font-size: clamp(15px, 4.4vw, 19px); line-height: 1.25; }
  .contact .c-intro { font-size: clamp(19px, 5.6vw, 24px); }
  .contact .contact-film { align-self: start; }
  .contact .contact-film video { width: 100%; height: auto; }
  .contact-col { justify-content: space-between; }
}
@media (min-width: 721px) {
  .contact .inquiries .v { font-size: clamp(26px, min(2.6vw, 4vh), 44px); }
  .contact .inquiries .label-k { font-size: clamp(14px, 1.1vw, 18px); }
  .contact .inquiries li > a { grid-template-columns: minmax(140px, 220px) 1fr; align-items: baseline; }
}
/* Ordinateur : les trois blocs (texte 1, texte 2, contact) répartis à égalité sur la hauteur de la vidéo */
@media (min-width: 721px) {
  .contact { grid-template-rows: auto minmax(0, 1fr); }
  .contact .contact-film { align-self: start; }
  .contact .contact-col { height: 100% !important; justify-content: space-between; }
  .contact .c-more { margin: auto 0 !important; }
}
/* Ordinateur : la colonne de texte a exactement la hauteur de la vidéo (SOUND OFF en dessous ne compte pas) */
@media (min-width: 721px) {
  .contact { grid-template-areas: "intro film" "col film"; align-items: start; }
  .contact .contact-film { position: relative; align-self: start; }
  .contact .contact-film figcaption { position: absolute; top: 100%; left: 0; margin-top: 10px; }
  .contact .inquiries li:last-child > a { padding-bottom: 0; }
  .contact .inquiries .v { line-height: 1; }
}
@media (min-width: 721px) {
  .contact { --vh: min(calc(100svh - 170px), 760px); grid-template-rows: auto calc(var(--vh) - var(--introh, 0px)); }
  .contact .contact-film video { height: var(--vh); }
  .contact .contact-col { height: auto !important; min-height: 0; overflow: visible; }
}
@media (min-width: 721px) {
  .contact { grid-template-rows: auto auto; align-content: center; }
  .contact .contact-col { justify-content: space-between; }
}
/* Ordinateur : le second bloc remonte légèrement (plus proche du premier) */
@media (min-width: 721px) {
  .contact .c-more { margin: clamp(28px, 7vh, 72px) 0 auto !important; }
}
/* Téléphone : colonne de gauche à la hauteur exacte de la vidéo (haut et bas alignés) */
@media (max-width: 720px) {
  .contact .contact-col { display: flex; flex-direction: column; justify-content: space-between; }
  .contact .contact-film figcaption { margin-top: 10px; }
}
@media (max-width: 720px) {
  .contact .c-more { margin: 0 !important; }
  .contact .contact-film video { object-fit: cover; }
}
@media (max-width: 720px) {
  .contact .contact-col { justify-content: flex-start; gap: 22px; height: auto !important; }
  .contact .inquiries li:last-child > a { padding-bottom: 0; }
}
@media (min-width: 721px) {
  .contact .c-more { margin: clamp(16px, 3.5vh, 36px) 0 auto !important; }
}
@media (min-width: 721px) {
  .contact .c-more { position: relative; top: -0.9em; }
}
/* La définition tient sur une ligne */
.contact .c-intro .def { white-space: nowrap; }
@media (max-width: 720px) { .contact .c-intro { font-size: min(4.55vw, 22px); } }
/* Curseur « A » retiré : souris normale du système */
.cursor { display: none !important; }
.has-cursor, .has-cursor * { cursor: auto !important; }
.has-cursor a, .has-cursor button, .has-cursor video, .has-cursor [role="button"] { cursor: pointer !important; }
/* Téléphone : pas de vidéo sur About, textes sur une colonne */
@media (max-width: 720px) {
  .contact .contact-film { display: none; }
  .contact { grid-template-columns: 1fr; grid-template-areas: "intro" "col"; row-gap: 28px; align-content: center; padding-top: 112px; }
  .contact .contact-col { gap: 28px; }
  .contact .c-more { font-size: min(4.55vw, 22px); line-height: 1.25; }
}
/* Téléphone : texte qui démarre sous le menu, espacements resserrés */
@media (max-width: 720px) {
  .contact { align-content: start; padding-top: 104px; row-gap: 18px; height: auto; min-height: 100svh; }
  .contact .contact-col { gap: 18px; }
  .contact .inquiries { gap: 10px; }
  .contact .inquiries li > a { padding: 0; gap: 2px; }
}
/* About : titres BEHIND THE NAME / CONTACT en Helvetica gras */
.contact .c-title { margin: 0 0 clamp(10px, 1.6vh, 18px); font-size: clamp(16px, min(1.5vw, 2.4vh), 24px); }
.contact .c-def { margin: 0; }
@media (max-width: 720px) {
  .contact .c-title { font-size: 15px; margin-bottom: 10px; }
  .contact .c-def { font-size: min(4.55vw, 22px); }
  .contact .c-contact { margin-top: 10px; }
}