/* ==========================================================================
   HKCORP — V.EMMA
   Maquette de test. Fond blanc, typo monospace, surlignages noirs.
   Logos : originaux HKCORP / HULK / NOWHERE.
   ========================================================================== */

:root {
  --ink: #000;
  --paper: #fff;
  --grey: #b4b4b4;
  --grey-line: #d8d8d8;
  --mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --grotesk: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --logo-h: 26px;
  --nav-h: 104px;
  --foot-h: 76px;
  --pad: 36px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img, video { display: block; max-width: 100%; }

.u-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;
}

/* --- Surlignage noir : la signature du modèle --------------------------- */

.hl {
  background: var(--ink);
  color: var(--paper);
  padding: .18em .34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  z-index: 60;
  background: var(--paper);
}

.nav .brand { position: relative; display: flex; align-items: center; }

.nav .brand img {
  position: relative;
  z-index: 2;
  height: var(--logo-h);
  width: auto;
}

/* --- Octobre Rose ---------------------------------------------------------
   La boucle du ruban prend la place du O de HKCORP. Le O est retiré du logo par
   un dégradé de masque (bande transparente de 49,6 % à 69,4 % de sa largeur —
   mesuré sur le PNG), et l'image du ruban vient s'y loger, boucle centrée sur
   l'emplacement de la lettre. Posé par script.js pendant le seul mois d'octobre.

   Le ruban est montré ENTIER — boucle, croisement et pans. Sa boucle est posée
   sur l'emplacement du O, un peu plus petite que la lettre (David l'a fait
   réduire le 03/10). Repères mesurés sur assets/ruban-satin.png :
   centre de la boucle à 47,8 % de sa largeur et 25,2 % de sa hauteur ; la boucle
   fait 55,8 % de sa largeur ; le ruban a un ratio de 0,528. D'où les trois
   calculs ci-dessous. */

.nav .brand.is-october img.wordmark {
  -webkit-mask-image: linear-gradient(to right,
      #000 49.6%, transparent 49.6%, transparent 69.4%, #000 69.4%);
          mask-image: linear-gradient(to right,
      #000 49.6%, transparent 49.6%, transparent 69.4%, #000 69.4%);
}

.nav .brand .rbn {
  position: absolute;
  z-index: 3;
  width: calc(var(--logo-h) * 1.30);
  left: calc(var(--logo-h) * 2.574);
  top: calc(var(--logo-h) * -0.121);
  height: auto;
  pointer-events: none;
}

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(28px, 7vw, 108px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.nav-links a { position: relative; padding: 4px 0; }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}

.nav-links a:hover::after { transform: scaleX(1); }

.nav-links a.is-active { font-style: italic; }

/* Filtres de la page Work, posés dans la nav comme sur la maquette */
.filters {
  margin-left: clamp(24px, 5vw, 76px);
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink);
}

.filters button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink);
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.filters button:hover { background: rgba(0, 0, 0, .08); }

.filters button.is-on { background: var(--ink); color: var(--paper); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 34px; height: 26px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink);
  margin: 6px 0; transition: transform .35s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 55;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: var(--pad);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .1em;
}
.mobile-menu.is-open { display: flex; }

/* ==========================================================================
   FOOTER fixe
   ========================================================================== */

.foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--foot-h);
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  z-index: 60;
  pointer-events: none;
  font-size: 12px;
  letter-spacing: .14em;
  background: var(--paper);
}

.foot .center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.foot .brands {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.5;
  pointer-events: auto;
}

.foot .brands a { transition: opacity .25s; }
.foot .brands a:hover { opacity: .45; }

/* ==========================================================================
   HOME — colonnes verticales
   ========================================================================== */

.strip {
  position: absolute;
  top: calc(var(--nav-h) + 4px);
  left: var(--pad);
  width: calc(100vw - var(--pad));
  height: calc(100vh - var(--nav-h) - var(--foot-h) - 36px);
  /* le défilement rognerait les étiquettes : on leur réserve la bande du haut */
  padding-top: 26px;
  display: flex;
  gap: 24px;
  /* Les 23 films défilent : trois tiennent à l'écran, le suivant est coupé. */
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.strip::-webkit-scrollbar { display: none; }

.col {
  position: relative;
  flex: 0 0 calc((100vw - 108px) / 3.25);
  scroll-snap-align: start;
  cursor: pointer;
  transition: flex-basis .7s var(--ease);
}

.strip .col:hover { flex-basis: calc((100vw - 108px) / 2.15); }

.col .media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ececec;
}

.col video,
.col img.poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
}

.col video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
}

.col.is-playing video { opacity: 1; }

/* Catégorie : discrète, et c'est un vrai lien vers le filtre de Work.
   Elle ne doit plus primer sur le titre ni faire croire à un bouton. */
.col .cat {
  position: absolute;
  top: -21px;
  right: 0;
  font-size: 11px;
  letter-spacing: .12em;
  color: #8a8a8a;
  white-space: nowrap;
  transition: color .25s var(--ease);
}

.col .cat:hover,
.col .cat:focus-visible { color: var(--ink); text-decoration: underline; }

/* Le titre du projet, posé en bas du film pour ne pas masquer les visages.
   Le crédit garde sa place même masqué (seule l'opacité change) : le titre ne
   bouge donc jamais au survol. */
.col .tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  pointer-events: none;
}

.col .tag .t {
  display: block;
  width: max-content;
  max-width: 100%;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 8px;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 21px);
  letter-spacing: .01em;
}

/* Le crédit se révèle quand le film s'ouvre, sous le titre */
.col .tag .r {
  display: block;
  width: max-content;
  max-width: 100%;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 8px;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.col:hover .tag .r,
.col:focus-within .tag .r { opacity: 1; transform: none; }

.strip-hint {
  position: fixed;
  left: var(--pad);
  bottom: 28px;
  z-index: 61;
  font-size: 12px;
  letter-spacing: .14em;
  transition: opacity .4s var(--ease);
}


/* ==========================================================================
   HOME — second écran (manifesto + bureaux)
   ========================================================================== */

.home-scroll {
  position: relative;
  padding-top: calc(100vh);
}

.second {
  padding: 0 var(--pad) calc(var(--foot-h) + 60px);
}

.manifesto {
  display: grid;
  grid-template-columns: minmax(280px, 46ch) 1fr auto;
  gap: 60px;
  align-items: start;
}

.manifesto h2 {
  margin: 0 0 4px;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.manifesto h2 span {
  background: var(--ink);
  color: var(--paper);
  padding: .04em .18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.manifesto .kicker {
  display: table;
  width: max-content;
  max-width: 100%;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 6px;
  font-size: 13px;
  margin-bottom: 22px;
}

.manifesto p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.62; }
.manifesto strong { font-weight: 700; }

.offices {
  grid-column: 3;
  display: flex;
  gap: clamp(30px, 5vw, 70px);
  text-align: right;
}

.office .name {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.office .addr { line-height: 1.7; margin-bottom: 18px; white-space: nowrap; }

.office .mailto {
  display: inline-block;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 5px;
}

.office .mailto b { font-weight: 700; }

/* ==========================================================================
   WORK — grille
   ========================================================================== */

.page {
  padding: calc(var(--nav-h) + 56px) var(--pad) calc(var(--foot-h) + 60px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 24px;
}

.card { position: relative; cursor: pointer; }

.card .frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #ececec;
}

.card video,
.card img.poster {
  width: 100%; height: 100%;
  object-fit: cover;
}

.card video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.card.is-playing video { opacity: 1; }

/* Les projets sans image fixe montrent directement la vidéo */
.card .frame.no-poster video { opacity: 1; }

/* Catégorie : discrète, et elle filtre vraiment la grille. Pas de saut. */
.card .cat {
  position: absolute;
  top: -20px; right: 0;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  letter-spacing: .12em;
  color: #8a8a8a;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s var(--ease);
}

.card .cat:hover,
.card .cat:focus-visible { color: var(--ink); text-decoration: underline; }

.card .name {
  position: absolute;
  left: 0; bottom: 22px;
}

.card .name .c {
  display: table;
  background: var(--ink); color: var(--paper);
  padding: 2px 6px;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .03em;
}

.card .name .r {
  display: table;
  background: var(--ink); color: var(--paper);
  padding: 2px 6px;
  margin-top: 2px;
  font-style: italic;
  font-size: 12px;
}

.work-note {
  position: fixed;
  left: var(--pad);
  bottom: 28px;
  font-weight: 700;
  font-size: 12.5px;
  z-index: 61;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-head { text-align: center; margin-bottom: 44px; }

.about-head .t {
  display: inline-block;
  margin: 0;
  background: var(--ink); color: var(--paper);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: .01em;
  padding: 2px 10px;
}

.about-head .s {
  display: block;
  margin: 3px auto 0;
  width: max-content;
  background: var(--ink); color: var(--paper);
  padding: 3px 10px;
  font-size: 14px;
}

.about-body {
  display: grid;
  grid-template-columns: minmax(300px, 44%) 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-left: calc(var(--pad) * -1);
}

.mosaic figure { margin: 0; overflow: hidden; background: #ececec; aspect-ratio: 1 / 1; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mosaic figure:hover img { transform: scale(1.06); }
.mosaic .wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.mosaic .tall { grid-row: span 2; aspect-ratio: 1 / 2; }

.about-text p { margin: 0 0 17px; font-size: 13.5px; line-height: 1.66; }
.about-text strong { font-weight: 700; }

/* Les trois marques */
.brands-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 6vw, 90px);
  margin-top: clamp(60px, 11vh, 130px);
}

.brand-blk { color: var(--grey); transition: color .4s var(--ease); }
.brand-blk:hover { color: var(--ink); }

.brand-blk .line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
}

.brand-blk .kind { font-size: 13px; letter-spacing: .02em; }

.brand-blk .mark {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(24px, 2.7vw, 36px);
  letter-spacing: .01em;
}

.brand-blk p { margin: 12px 0 0; font-size: 13px; line-height: 1.6; max-width: 34ch; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-wrap {
  display: grid;
  grid-template-columns: minmax(260px, 30%) 1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}

.who {
  position: sticky;
  top: calc(100vh - var(--foot-h) - 330px);
}

.who h1 {
  margin: 0;
  display: table;
  background: var(--ink); color: var(--paper);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: .01em;
  padding: 1px 9px;
}

.who .sub {
  display: table;
  background: var(--ink); color: var(--paper);
  padding: 3px 9px;
  margin: 2px 0 20px;
  font-size: 13px;
}

.who p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.62; max-width: 38ch; }
.who strong { font-weight: 700; }

.dept { margin-bottom: clamp(50px, 9vh, 96px); }

.dept > h2 {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .02em;
  margin: 0 0 30px;
  padding: 2px 8px;
}

.dept > h2 + .of {
  font-style: italic;
  color: #6f6f6f;
  margin-left: 12px;
  font-size: 13px;
}

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px clamp(30px, 5vw, 66px);
  max-width: 900px;
}

.person { max-width: 34ch; }

.person .n { font-weight: 700; letter-spacing: .04em; font-size: 13px; }
.person .role { font-style: italic; font-size: 12.5px; margin-bottom: 12px; line-height: 1.4; }
.person .mail a { color: #6f6f6f; transition: color .25s; }
.person .mail a:hover { color: var(--ink); }

.nojs { color: #6f6f6f; font-size: 12.5px; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.lb {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 90;
  display: none;
  padding: calc(var(--nav-h) + 20px) var(--pad) calc(var(--foot-h) + 20px);
}

.lb.is-open { display: flex; gap: 32px; align-items: center; }

.lb .player { flex: 1 1 auto; min-width: 0; max-height: 100%; }
.lb video { width: 100%; max-height: 72vh; background: #000; object-fit: contain; }

.lb .side { flex: 0 0 clamp(200px, 22vw, 300px); align-self: center; }

.lb .side .t {
  display: table;
  background: var(--ink); color: var(--paper);
  padding: 3px 8px;
  font-family: var(--grotesk); font-weight: 700; font-size: 19px;
}
.lb .side .k {
  margin-top: 7px;
  font-size: 11px; letter-spacing: .12em; color: #8a8a8a;
}
.lb .side .c { margin-top: 16px; font-size: 12.5px; line-height: 1.65; }

.lb .x {
  position: absolute;
  top: calc(var(--nav-h) - 34px);
  right: var(--pad);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .12em;
  color: var(--ink);
}

body.lb-open { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .manifesto { grid-template-columns: 1fr; gap: 46px; }
  .offices { grid-column: 1; justify-content: flex-start; text-align: left; }
  .office .addr { white-space: normal; }
}

@media (max-width: 860px) {
  :root { --pad: 20px; --nav-h: 76px; --foot-h: 62px; --logo-h: 24px; }

  /* barre plus basse : le ruban est réduit pour ne pas frôler les vignettes */
  .nav .brand .rbn {
    width: calc(var(--logo-h) * 1.14);
    left: calc(var(--logo-h) * 2.650);
    top: calc(var(--logo-h) * -0.045);
  }

  .nav-links, .filters { display: none; }
  .nav-toggle { display: block; }
  /* les cinq filtres ne tiennent pas sur une ligne : ils passent en pastilles */
  .mobile-menu .filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    border: 0; margin: 10px 0 0; font-size: 13px;
  }
  .mobile-menu .filters button {
    border: 1px solid var(--ink);
    padding: 8px 13px;
    letter-spacing: .06em;
  }

  /* Pas de survol au doigt : titre et crédits restent posés sur le film. */
  .strip { position: static; width: auto; height: 62vh; gap: 12px; padding-top: 0;
           margin: calc(var(--nav-h) + 24px) 0 0 var(--pad);
           scroll-padding-left: var(--pad); }
  .strip .col { flex: 0 0 74vw; }
  .strip .col:hover { flex-basis: 74vw; }
  .strip::after { content: ""; flex: 0 0 var(--pad); }
  .col .cat { display: none; }
  .col .tag { bottom: 12px; left: 12px; right: 12px; }
  .col .tag .t { font-size: 17px; }
  /* pas de survol au doigt : le crédit reste affiché */
  .col .tag .r { opacity: 1; transform: none; }
  .col .tag .t, .col .tag .r { max-width: 100%; white-space: normal; }
  .home-scroll { padding-top: 0; }
  .second { padding-top: 16vh; }

  .about-body, .contact-wrap { grid-template-columns: 1fr; }
  .brands-row { grid-template-columns: 1fr; gap: 40px; }
  .mosaic { margin-left: 0; }
  .who { position: static; }
  .people { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 46px 16px; }

  .foot .center { display: none; }
  .foot .brands { flex-direction: row; gap: 18px; }
  .work-note, .strip-hint { display: none; }

  .lb.is-open { flex-direction: column; align-items: stretch; justify-content: center; }
  .lb .side { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}

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