/* =========================================
   WORKS HUB CSS — Fond noir, tiles texte,
   sub-nav, placeholders
   ========================================= */

/* ── Fond noir sur toutes les pages works ── */
body[data-page="works"],
body[data-page="projects"],
body[data-page="3d"],
body[data-page="lab"],
body[data-page="sketches"],
body[data-page="cinematic"] {
  background: #ffffff;
  color: var(--ink);
}

/* Loader blanc */
body[data-page="works"] .loader,
body[data-page="projects"] .loader,
body[data-page="3d"] .loader,
body[data-page="lab"] .loader,
body[data-page="sketches"] .loader,
body[data-page="cinematic"] .loader {
  background: #ffffff;
}

/* Nav — toujours clair sur fond noir */
body[data-page="works"] .nav,
body[data-page="projects"] .nav,
body[data-page="3d"] .nav,
body[data-page="lab"] .nav,
body[data-page="sketches"] .nav,
body[data-page="cinematic"] .nav {
  color: var(--ink);
  text-shadow: none;
}

body[data-page="works"] .nav .nav__logo svg,
body[data-page="projects"] .nav .nav__logo svg,
body[data-page="3d"] .nav .nav__logo svg,
body[data-page="lab"] .nav .nav__logo svg,
body[data-page="sketches"] .nav .nav__logo svg,
body[data-page="cinematic"] .nav .nav__logo svg {
  fill: var(--ink);
}

/* ═══════════════════════════════════════════
   EN-TÊTE DE SECTION — 3D, Sketches, Cinematic
   Un seul gabarit pour les trois : chaque page
   avait ses propres marges, d'où des titres qui
   ne tombaient pas au même endroit.
   ═══════════════════════════════════════════ */

:root {
  /* Rythme commun aux trois sections du hub */
  --hub-max: 1600px;
  --hub-pad: clamp(2rem, 8vw, 10rem);
}

/* Dégagement haut identique sur les trois conteneurs de page */
.renders-page,
.sketches-page,
.cinematic-page,
.lab-page {
  padding-top: 8rem;
}

.hub-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 2rem;
  row-gap: 2.5rem;
  padding: 4rem var(--hub-pad) 3rem;
  max-width: var(--hub-max);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

/* min-width fige la 1re colonne : sans elle, la chasse légèrement différente
   des chiffres 02/03/04 décalait le titre d'un demi-pixel d'une page à
   l'autre — c'est exactement ce genre d'écart qui se voit en naviguant. */
.hub-header__index {
  grid-column: 1;
  grid-row: 1;
  min-width: 3ch;
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}

.hub-header__title {
  grid-column: 2;
  grid-row: 1;
  /* Sans min-width:0 la piste 1fr refuse de descendre sous la largeur
     min-content du mot et pousse la grille hors de l'écran. */
  min-width: 0;
  font-size: clamp(2.2rem, 8vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: .95;
  color: var(--ink);
}

/* Sur toute la largeur, et non en colonne 1 : sinon son contenu dicterait la
   largeur de cette colonne et comprimerait le titre jusqu'au débordement. */
.hub-header__meta {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

/* Contenu sous l'en-tête : mêmes marges latérales et même largeur max */
.hub-section {
  max-width: var(--hub-max);
  margin: 0 auto;
  padding-left: var(--hub-pad);
  padding-right: var(--hub-pad);
}

@media (max-width: 720px) {
  .hub-header {
    column-gap: 1rem;
    row-gap: 1.75rem;
    padding-bottom: 2rem;
  }
}

/* Works header (projects.html) — texte blanc */
body[data-page="projects"] .works-header__index,
body[data-page="projects"] .works-header__title,
body[data-page="projects"] .works-header__count {
  color: var(--ink);
}

body[data-page="projects"] .works-header__title em {
  color: var(--ink);
}

/* Work cards — info texte blanc */
body[data-page="projects"] .work-card__num,
body[data-page="projects"] .work-card__title,
body[data-page="projects"] .work-card__year,
body[data-page="projects"] .work-card__cat {
  color: var(--ink);
}

body[data-page="projects"] .work-card__num,
body[data-page="projects"] .work-card__year,
body[data-page="projects"] .work-card__cat {
  opacity: .6;
}

/* Indicator + progress blanc */
body[data-page="projects"] .works-indicator,
body[data-page="projects"] .works-progress {
  color: var(--ink-soft);
}

body[data-page="projects"] .works-progress__current {
  color: var(--ink);
}

body[data-page="projects"] .works-indicator__line {
  background: var(--line);
}

body[data-page="projects"] .works-indicator__line::before {
  background: var(--ink);
}

/* ── SUB-NAV — pill sombre ── */
.works-subnav {
  position: fixed;
  top: 4.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .3rem .4rem;
}

.works-subnav__link {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  padding: .35rem .85rem;
  border-radius: 100px;
  transition: color .3s ease, background .3s ease;
  white-space: nowrap;
}

.works-subnav__link:hover {
  color: var(--ink);
}

.works-subnav__link.is-active {
  background: var(--ink);
  color: var(--white);
}

/* ═══════════════════════════════════════════
   HUB — trois colonnes plein écran
   Chaque colonne : un visuel qui déborde par le
   bas, un titre et un sous-titre en bas à gauche.
   ═══════════════════════════════════════════ */

.works-hub-page {
  min-height: 100vh;
  overflow: hidden;
}

.hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
  height: 100svh;
}

.hub__col {
  position: relative;
  /* overflow:hidden confine le visuel à sa colonne : sans lui, la main du
     lab déborderait sur la colonne voisine. */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-left: 1px solid var(--line);
  transition: background .5s var(--ease-out);
}

.hub__col:first-child { border-left: 0; }

.hub__col:hover { background: rgba(10, 10, 10, .025); }

.hub__visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Les visuels sont dimensionnés par leur HAUTEUR, pas par leur largeur.
   Chaque photo porte un bord franc là où le sujet a été coupé au cadrage :
   il ne doit jamais être visible, donc le bras doit toujours dépasser le bas
   de la colonne. Or cette condition ne dépend que de la hauteur de colonne.
   Avec une largeur en %, une fenêtre étroite mais haute donnait un visuel
   trop court et le bord franc réapparaissait au milieu du blanc. */
.hub__img {
  position: absolute;
  width: auto;
  /* base.css applique img{max-width:100%} : sans ce neutralisant, la largeur
     calculée à partir de la hauteur est silencieusement écrêtée dès qu'elle
     dépasse la colonne, et le bras ne peut plus déborder. */
  max-width: none;
  /* Léger zoom au survol, ancré en bas pour que le visuel reste "posé" */
  transition: transform .8s var(--ease-out);
  transform-origin: bottom center;
}

/* Disque dur : cadrage obtenu en superposant la silhouette du PNG à la
   maquette et en cherchant l'échelle et la position qui maximisent le
   recouvrement (IoU 0,87). L'avant-bras dépasse tout juste le bas de la
   colonne, comme sur la référence. */
/* 89% était la valeur exacte du recalage, mais la colonne de la maquette
   n'a pas tout à fait le même rapport que la nôtre : le bras s'arrêtait à
   99% et ne se faisait donc pas couper. 92% garantit le débordement quel
   que soit le rapport de la fenêtre. */
/* Rotation relevée sur l'annotation : le bord de l'avant-bras passe de 17,6°
   par rapport à la verticale à 5,6°, soit 12° dans le sens horaire. Le pivot
   est placé au point où les deux traits se rejoignent, en bas du bras, pour
   que la base reste en place et que seul le haut parte vers la droite. */
.hub__img--project {
  height: 61%;
  width: auto;
  left: 18%;
  top: 43%;
  transform: rotate(12deg);
  transform-origin: 81.5% 78.1%;
}

/* Appareil : cadré comme sur la référence — il occupe 80% de la largeur de
   colonne, son sommet est au tiers de la hauteur et l'avant-bras est coupé
   par le bas. Sa moitié basse-gauche étant transparente, le titre passe
   dessous sans être masqué. */
.hub__img--cine {
  height: 63%;
  width: auto;
  left: 20%;
  top: 38%;
}

/* Bras du lab. Mesuré dans l'image : la fleur est centrée à (6% ; 60,3%),
   le poing occupe 35% de la largeur et l'avant-bras reste opaque jusqu'au
   bord. L'angle est donc bien plus vertical que ce que j'avais estimé, et la
   largeur est calculée pour que le bras dépasse le bas de la colonne et s'y
   fasse couper, comme sur la référence.
   Pivot placé SUR la fleur : changer l'angle ne la déplace pas. */
.hub__img--lab {
  height: 26%;
  width: auto;
  left: 33%;
  top: 21%;
  transform: rotate(74deg);
  transform-origin: 6% 60.3%;
}

/* La rotation doit être répétée dans le transform du survol : redéclarer
   `transform` l'écraserait purement et simplement. */
.hub__col:hover .hub__img--project { transform: rotate(12deg) scale(1.04); }
.hub__col:hover .hub__img--cine { transform: scale(1.04); }
.hub__col:hover .hub__img--lab  { transform: rotate(74deg) scale(1.04); }

/* Fleurs du survol (hub-flowers.js) : bande en bas de la colonne, derriere
   la photo (premier enfant de .hub__visual, la photo passe donc devant). */
/* Place, taille, miroir et rotation propres a chaque colonne : poses par
   hub-flowers.js (reglages COLUMNS). */
.hub__flowers {
  position: absolute;
  pointer-events: none;
}

.hub__label {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 6vh, 5rem);
}

.hub__name {
  /* Volontairement discret : ce sont les mains qui portent la page */
  font-size: clamp(1.25rem, 1.9vw, 1.9rem);
  /* 700 est la graisse la plus lourde livrée (stolzl-700.woff2). Demander 800
     ou 900 ne changerait rien : Stolzl étant une fonte statique, le navigateur
     retomberait sur ce même fichier. */
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: .9;
  color: var(--ink);
}

.hub__desc {
  margin-top: .5rem;
  font-size: .64rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* Sous 860px les trois colonnes deviennent illisibles : on empile. */
@media (max-width: 860px) {
  .hub {
    grid-template-columns: 1fr;
    height: auto;
  }

  .hub__col {
    min-height: 60vh;
    min-height: 60svh;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .hub__col:first-child { border-top: 0; }

  /* Empilée, la colonne est bien plus large : seuls les calages horizontaux
     changent. Les hauteurs, elles, sont conservées — c'est ce qui garantit
     que le bord franc des photos reste hors cadre ici aussi. */
  .hub__img--project { left: 40%; }  /* a droite du sous-titre, qui sinon passe sur le bras */
  .hub__img--cine    { left: 34%; }
  .hub__img--lab     { left: 44%; }
}

/* Telephone : les trois sections tiennent ensemble dans l'ecran, sans
   defiler. Trois rangees egales sous la nav ; les visuels etant dimensionnes
   en % de la hauteur de leur rangee, ils se reduisent d'eux-memes (et le
   bras deborde toujours par le bas). Titres et sous-titres plus petits. */
@media (max-width: 720px) {
  .hub {
    height: 100vh;
    height: 100svh;
    padding-top: 4.75rem;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .hub__col {
    min-height: 0;
  }

  /* Rangees plus basses : les visuels se reduisent et le sous-titre
     arrivait sur les bras. On les pousse vers la droite. */
  /* Plus grands que sur ordinateur (en % de rangee) : les rangees sont
     basses, les visuels restaient petits. Toujours coupes par le bas. */
  .hub__img--project { height: 94%; top: 20%; left: 54%; }
  .hub__img--cine    { height: 96%; top: 13%; left: 49%; }
  .hub__img--lab     { height: 40%; top: 0%; left: 52%; }

  .hub__label {
    padding: 0 var(--gutter) 1rem;
  }

  .hub__name {
    font-size: 1.1rem;
  }

  .hub__desc {
    margin-top: .3rem;
    font-size: .58rem;
  }
}

.works-hub-scroll {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
}

.works-hub-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 calc(50vw - 18rem);
  will-change: transform;
  height: 100%;
}

/* Hub card — tile texte pur */
.hub-card {
  position: relative;
  flex-shrink: 0;
  width: clamp(22rem, 30vw, 36rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  padding: 0 3rem 4rem;
  border-right: 1px solid var(--line);
  transition: background .6s ease;
  cursor: pointer;
  overflow: hidden;
}

.hub-card:first-child { border-left: 1px solid var(--line); }

.hub-card:hover {
  background: rgba(26,20,16,.03);
}

.hub-card--soon {
  cursor: default;
}
.hub-card--soon:hover {
  background: transparent;
}

.hub-card__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hub-card__num {
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}

.hub-card__name {
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: .9;
  color: var(--ink);
}

.hub-card__desc {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: .03em;
  font-weight: 300;
}

.hub-card__count {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .5;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* ── 3D page — fond blanc, texte sombre ── */
body[data-page="3d"] .renders-page,
body[data-page="lab"] .renders-page {
  background: #ffffff;
  color: var(--ink);
}

body[data-page="3d"] .hub-header__index,
body[data-page="lab"] .hub-header__index,
body[data-page="3d"] .hub-header__meta,
body[data-page="lab"] .hub-header__meta,
body[data-page="3d"] .renders-section__num,
body[data-page="lab"] .renders-section__num,
body[data-page="3d"] .renders-section__year,
body[data-page="lab"] .renders-section__year,
body[data-page="3d"] .renders-footer,
body[data-page="lab"] .renders-footer {
  color: var(--ink-soft);
}

body[data-page="3d"] .hub-header__title,
body[data-page="lab"] .hub-header__title,
body[data-page="3d"] .renders-section__name,
body[data-page="lab"] .renders-section__name {
  color: var(--ink);
}

body[data-page="3d"] .hub-header,
body[data-page="lab"] .hub-header {
  border-bottom-color: var(--line);
}

body[data-page="3d"] .renders-section + .renders-section,
body[data-page="lab"] .renders-section + .renders-section {
  border-top-color: var(--line);
}

body[data-page="3d"] .render-item,
body[data-page="lab"] .render-item {
  background: #ffffff;
}

/* ── PLACEHOLDERS — fond noir ── */
.works-placeholder {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-placeholder__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.works-placeholder__num {
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--ink-soft);
}

.works-placeholder__title {
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: .9;
  color: var(--ink);
}

.works-placeholder__sub {
  font-size: .9rem;
  color: var(--ink-soft);
  letter-spacing: .05em;
}

/* ── Lang selector sur fond noir ── */
body[data-page="works"] .lang-btn,
body[data-page="projects"] .lang-btn,
body[data-page="3d"] .lang-btn,
body[data-page="lab"] .lang-btn,
body[data-page="sketches"] .lang-btn,
body[data-page="cinematic"] .lang-btn {
  color: var(--ink-soft);
}


/* ── Lottie dans les hub-cards ── */
.hub-card__lottie {
  width: 100%;
  height: 130px;
  margin-bottom: 2rem;
  pointer-events: none;
  flex-shrink: 0;
  background: transparent;
  position: absolute;
  top: 18rem;
  left: 2rem;
  right: 2rem;
  width: calc(100% - 4rem);
}

.hub-card__lottie-inner {
  width: 100%;
  height: 100%;
  padding: 0 !important;
}

.hub-card__lottie-inner svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .works-hub-track {
    flex-direction: column;
    height: auto;
    padding: 8rem var(--gutter) 4rem;
    gap: 0;
  }

  .works-hub-scroll {
    height: auto;
    overflow: visible;
  }

  .hub-card {
    width: 100%;
    height: auto;
    padding: 3rem 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    justify-content: flex-start;
  }

  .hub-card__lottie {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: 120px;
    margin-bottom: 1.5rem;
  }

  .hub-card:first-child { border-left: none; }

  .works-subnav {
    top: auto;
    bottom: 1.5rem;
    position: fixed;
  }
}

/* Tile Projects — animation plus petite */
a[href="projects.html"] .hub-card__lottie {
  height: 80px;
}