/* ==========================================================================
   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 {
  /* Resserre depuis l'ajout du sixieme filtre (Event) : la barre reprend
     l'encombrement qu'elle avait a cinq, sans toucher a la navigation. */
  margin-left: clamp(24px, 3.75vw, 48px);
  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);
  /* 10px et non 16 : « LIVE & EVENT » est bien plus large que « LIVE », et la
     barre arrivait au contact de HOME — le bouton actif, en noir plein, se
     lisait comme s'il mordait sur la navigation. A 1280 px l'ecart est de
     38 px, contre 33 px avant ce round. */
  padding: 9px 10px;
  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;
}

/* Le bandeau surligne. Il tenait sur une ligne tant que la phrase etait
   courte ; la ligne approuvee (« …alongside the artists and brands that
   define it. ») la depasse, et « width: max-content » poussait la page a
   760 px de large sur un telephone. Le surlignage porte desormais sur le
   texte lui-meme : il suit les lignes au lieu de forcer une seule. */
.manifesto .kicker {
  display: block;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.95;
  margin-bottom: 22px;
}
.manifesto .kicker span {
  background: var(--ink);
  color: var(--paper);
  padding: 3px 6px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.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; justify-content: center; }

/* Le cadre prend le format du film. Avant, le lecteur s'ouvrait toujours a la
   meme taille et presque tous les films jouaient entre deux bandes noires.
   La video est un element remplace : avec width/height en auto et deux
   plafonds, elle se reduit en gardant son ratio, comme une image le ferait. */
.lb .player { flex: 0 1 auto; min-width: 0; display: flex; justify-content: center; }

/* Lecteur Google Drive. Un iframe n'a pas de taille propre : on lui impose le
   format du film, pris sur sa vignette, pour qu'il ne flotte pas au milieu de
   bandes noires comme le ferait un cadre 16/9 par defaut. */
.lb .player.is-drive { flex: 0 0 auto; }   /* taille posee en pixels par le script */
.lb .player iframe.drive { width: 100%; height: 100%; border: 0; background: #000; }
.lb video[hidden], .lb iframe[hidden] { display: none; }
.lb video {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 80vh;
  background: #000;
}

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

/* Recompenses : celles du film, puis celles de l'artiste, sous deux
   intitules distincts — une tuile ne doit pas sembler avoir gagne ce que
   l'artiste a gagne ailleurs. */
.lb .side .aw { margin-top: 20px; font-size: 12px; line-height: 1.6; color: #4a4a4a; }
.lb .side .aw > div + .h { margin-top: 14px; }
.lb .side .aw .h {
  margin-bottom: 4px;
  font-size: 10px; letter-spacing: .14em; color: #8a8a8a;
}

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

/* ==========================================================================
   WORK — selection et catalogue complet
   ========================================================================== */

.work-more { margin: 64px 0 8px; text-align: center; }

.work-more button {
  appearance: none;
  background: none;
  border: 1px solid var(--ink);
  font: inherit;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  padding: 11px 26px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.work-more button:hover { background: var(--ink); color: var(--paper); }

.work-more .moins { display: none; }
body.voit-tout .work-more .plus { display: none; }
body.voit-tout .work-more .moins { display: inline; }

.work-more .compte {
  margin-top: 12px;
  font-size: 11px; letter-spacing: .1em; color: #8a8a8a;
}

/* ==========================================================================
   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: center; justify-content: center; }
  .lb .player { width: 100%; }
  .lb video { max-height: 54vh; }       /* le panneau passe dessous */
  .lb .side { flex: 0 0 auto; align-self: stretch; }
}

@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; }
}