@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../fonts/ABCMonumentGroteskPlusVariable.f7e2bc3d.woff2")
    format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Neue Haas Display Roman";
  src: url("../fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  font-family: "ABC Monument Grotesk", sans-serif;
  letter-spacing: -0.2px;
}

.page-main {
  position: relative;
  flex: 1;
  min-height: 0;
}

#matter-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

#matter-stage canvas {
  display: block;
  touch-action: none;
}

.hanging-gallery {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hanging-piece {
  position: absolute;
  margin: 0;
  width: min(34vw, 260px);
  transform: translateX(-50%);
}

.hanging-piece--center {
  left: 50%;
  top: 0;
  --wire-length: 70px;
}

.hanging-piece--right {
  left: 79%;
  top: 0;
  --wire-length: 96px;
}

.hanging-piece__wire {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: calc(var(--wire-length) + 18px);
  background: rgb(17, 17, 17);
  transform: translateX(-50%);
}

.hanging-piece__knot {
  position: absolute;
  left: 50%;
  top: var(--wire-length);
  width: 18px;
  height: 18px;
  background: rgb(17, 17, 17);
  transform: translate(-50%, -50%);
}

.hanging-piece img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--wire-length) + 24px);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18));
}

h1 {
  font-family: "ABC Monument Grotesk", sans-serif;
  font-weight: 300;
  color: rgb(0, 0, 0);
}

.navbar {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.navbar-name {
  text-align: start;
  line-height: 1;
  letter-spacing: -0.2px;
}

.navbar-name a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: "ABC Monument Grotesk", sans-serif;
  font-weight: 300;
}

.navbar-links a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  letter-spacing: -0.2px;
}

.navbar-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

.projects-page {
  background: rgb(255, 255, 255);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.projects-page::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.projects-ropes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--projects-content-height, 100%);
  z-index: 0;
  pointer-events: none;
}

.projects-ropes-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.projects-rope {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: transparent;
  left: calc(
    var(--rope-edge-pad, 6%) +
      ((100% - (2 * var(--rope-edge-pad, 6%))) / (var(--rope-count, 7) - 1)) *
      var(--rope-i)
  );
}

.projects-wall {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--projects-content-height, 100%);
  z-index: 1;
}

.project-card {
  position: absolute;
  left: calc(
    var(--rope-edge-pad, 6%) +
      ((100% - (2 * var(--rope-edge-pad, 6%))) / (var(--rope-count, 7) - 1)) *
      var(--rope-index)
  );
  top: var(--top);
  transform: translate(calc(-50% + var(--rope-shift, 0px)), -50%)
    rotate(var(--rope-angle, 0deg));
  transform-origin: top center;
  will-change: transform;
  margin: 0;
}

.project-card__clip {
  display: none;
}

.project-card__link {
  display: block;
}

.project-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(0, 0, 0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}

.project-card video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(0, 0, 0);
  background: rgb(0, 0, 0);
  box-sizing: border-box;
}

.project-card--s {
  width: min(
    15.5vw,
    230px,
    calc(
      ((100% - (2 * var(--rope-edge-pad, 12%))) / (var(--rope-count, 4) - 1)) -
        34px
    )
  );
}

.project-card--m {
  width: min(
    18vw,
    280px,
    calc(
      ((100% - (2 * var(--rope-edge-pad, 12%))) / (var(--rope-count, 4) - 1)) -
        40px
    )
  );
}

.project-card--l {
  width: min(
    21vw,
    330px,
    calc(
      ((100% - (2 * var(--rope-edge-pad, 12%))) / (var(--rope-count, 4) - 1)) -
        46px
    )
  );
}

/* Page liste Projets : une seule largeur pour toutes les vignettes (réf. type « puzz » / ex-taille L). */
.projects-page .project-card {
  width: min(
    21vw,
    330px,
    calc(
      ((100% - (2 * var(--rope-edge-pad, 12%))) / (var(--rope-count, 4) - 1)) -
        46px
    )
  );
}

.project-detail-page {
  display: grid;
  /* Un peu plus d’espace pour les images que pour la pancarte (~54 / 46). */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  background: rgb(255, 255, 255);
  align-items: stretch;
  min-height: 0;
  height: calc(100vh - 92px);
  box-sizing: border-box;
  overflow: hidden;
}

.project-detail-page ~ .navbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}

.project-detail-board-wrap {
  position: relative;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*
   * Plus de marge bas que haut : la navbar est fixe en bas, le « milieu » visuel
   * de la page est un peu plus haut que le milieu géométrique de la grille.
   */
  --detail-board-bottom-inset: 72px;
  padding: 28px 0 calc(28px + var(--detail-board-bottom-inset));
  box-sizing: border-box;
  transform: translateX(-50px);
}

.project-detail-board-cords-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.project-detail-board {
  position: relative;
  z-index: 1;
  width: min(88%, 515px);
  min-height: 460px;
  border: 1px solid rgb(0, 0, 0);
  background: rgb(255, 255, 255);
  padding: 26px 20px 66px;
}

/* Grandes attaches centrées sur le bord haut / bas de la pancarte */
.project-detail-board__attach {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(140px, 42%);
  height: 12px;
  background: rgb(0, 0, 0);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.project-detail-board__attach--top {
  top: -6px;
}

.project-detail-board__attach--bottom {
  bottom: -6px;
}

.project-detail-board__title {
  font-family: "ABC Monument Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(38px, 2.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.2px;
  margin: 0 0 12px;
}

.project-detail-board__description {
  font-family: "ABC Monument Grotesk", sans-serif;
  font-weight: 200;
  font-size: 20px;
  line-height: 1.14;
  letter-spacing: -0.2px;
  margin: 0;
}

.project-detail-board__description p {
  margin: 0 0 0.85em;
}

.project-detail-board__description p:last-child {
  margin-bottom: 0;
}

/* Gras depuis le Writer : poids 400 (le corps reste en 200). */
.project-detail-board__description :is(strong, b) {
  font-weight: 400;
}

.project-detail-board__description a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.project-detail-board__meta {
  position: absolute;
  top: 24px;
  right: 20px;
  margin: 0;
  font-family: "ABC Monument Grotesk", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.2px;
  text-align: right;
}

.project-detail-board__tags {
  position: absolute;
  left: 20px;
  bottom: 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: calc(100% - 40px);
}

.project-detail-board__tags span {
  border: 1px solid rgb(0, 0, 0);
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  font-family: "ABC Monument Grotesk", sans-serif;
  font-weight: 200;
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
}

/* Colonne gauche : seul .projects-wall défile (flex + min-height:0 évite l’expansion grille). */
.project-detail-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  /* Marge haut / bas identique pour les images (lu par projects-ropes.js). */
  --detail-wall-vmargin: 28px;
  /* Décale légèrement toute la zone images vers la gauche. */
  --detail-gallery-shift-x: -32px;
}

.project-detail-gallery .projects-wall {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Espace réel sous le contenu quand on scroll en bas (en plus du ::after). */
  padding-bottom: calc(var(--detail-wall-vmargin) + 28px);
  box-sizing: border-box;
}

.project-detail-gallery .projects-wall::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.project-detail-gallery .projects-wall::after {
  content: "";
  display: block;
  width: 1px;
  height: var(--projects-content-height, 1400px);
  visibility: hidden;
  pointer-events: none;
}

/* Cordes dans le mur : elles scrollent avec les images. */
.project-detail-gallery .projects-ropes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--projects-content-height, 100%);
  z-index: 0;
}

/* Sur la page détail, les cordes sont centrées dans la colonne gauche. */
.project-detail-gallery .projects-rope {
  left: calc(
    ((100% / (var(--rope-count, 2) + 1)) * (var(--rope-i) + 1)) +
      var(--detail-gallery-shift-x)
  );
}

.project-detail-gallery .project-card {
  z-index: 1;
  left: calc(
    ((100% / (var(--rope-count, 2) + 1)) * (var(--rope-index) + 1)) +
      var(--detail-gallery-shift-x)
  );
}

/* En mode 2 cordes, on écarte davantage les colonnes pour les grands visuels. */
.project-detail-gallery[data-detail-columns="2"]
  .projects-rope[data-rope-index="0"],
.project-detail-gallery[data-detail-columns="2"]
  .project-card[data-rope-index="0"] {
  left: calc(26% + var(--detail-gallery-shift-x));
}

.project-detail-gallery[data-detail-columns="2"]
  .projects-rope[data-rope-index="1"],
.project-detail-gallery[data-detail-columns="2"]
  .project-card[data-rope-index="1"] {
  left: calc(74% + var(--detail-gallery-shift-x));
}

/* Une seule corde : évite la division par zéro dans le calc() des cordes / cartes. */
.project-detail-gallery[data-detail-columns="1"] .projects-rope,
.project-detail-gallery[data-detail-columns="1"] .project-card {
  left: calc(50% + var(--detail-gallery-shift-x));
}

.project-detail-gallery .project-card--s {
  width: min(23vw, 300px, calc((100% / (var(--rope-count, 2) + 1)) - 95px));
}

.project-detail-gallery .project-card--m {
  width: min(28vw, 355px, calc((100% / (var(--rope-count, 2) + 1)) - 60px));
}

.project-detail-gallery .project-card--l {
  width: min(34vw, 440px, calc((100% / (var(--rope-count, 2) + 1)) - 12px));
}

/* Variante paysage large : occupe visuellement presque 2 cordes. */
.project-detail-gallery .project-detail-card--landscape {
  width: min(46vw, 620px, calc((170% / (var(--rope-count, 2) + 1)) - 16px));
}

/* Corde "retour" en haut a droite de la page projet. */
.project-back-rope {
  --handle-x: 18px;
  --handle-y: 58px;
  position: fixed;
  top: -1px;
  right: 22px;
  width: 36px;
  height: 108px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  z-index: 70;
  cursor: grab;
  touch-action: none;
}

.project-back-rope:active {
  cursor: grabbing;
}

.project-back-rope__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.project-back-rope__path {
  fill: none;
  stroke: rgb(0, 0, 0);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.project-back-rope__handle {
  position: absolute;
  left: var(--handle-x);
  top: var(--handle-y);
  width: 24px;
  height: 24px;
  transform: translate(-50%, -6px);
  display: block;
  pointer-events: none;
}

/* About page */
.about-page {
  position: relative;
  min-height: 0;
  height: calc(100vh - 92px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

.about-ropes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about-ropes-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-rope {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: transparent;
}

.about-rope--top {
  top: 27%;
}

.about-rope--bottom {
  top: 69%;
}

.about-photo-card {
  position: absolute;
  z-index: 1;
  width: min(30vw, 330px);
  margin: 0;
  left: 50%;
  top: 27%;
  transform: translate(-50%, calc(-50% + var(--about-rope-shift-y, 0px)))
    rotate(var(--about-rope-angle, 0deg));
  transform-origin: top center;
  will-change: transform;
}

.about-photo-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(0, 0, 0);
  box-sizing: border-box;
}

.about-info-card {
  --about-title-weight: 420;
  --about-text-weight: 260;
  position: absolute;
  z-index: 1;
  width: min(30vw, 330px);
  min-height: 322px;
  border: 1px solid rgb(0, 0, 0);
  background: rgb(255, 255, 255);
  left: 50%;
  top: 75%;
  transform: translate(-50%, calc(-50% + var(--about-rope-shift-y, 0px)))
    rotate(var(--about-rope-angle, 0deg));
  transform-origin: top center;
  will-change: transform;
  padding: 18px 16px 82px;
  box-sizing: border-box;
  font-family: "ABC Monument Grotesk", sans-serif;
}

.about-info-card h2 {
  font-family: inherit;
  font-weight: var(--about-title-weight);
  font-size: 31px;
  line-height: 1;
  margin-bottom: 18px;
}

.about-info-card p {
  font-family: inherit;
  font-weight: var(--about-text-weight);
  font-size: 16px;
  line-height: 1.28;
}

.about-info-card__icons {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}

.about-info-card__icons a {
  width: 36px;
  height: 36px;
  border: 1px solid rgb(0, 0, 0);
  display: grid;
  place-items: center;
}

.about-info-card__icon {
  width: 19px;
  height: 19px;
  display: block;
  object-fit: contain;
}

.about-info-card__icon--mail {
  width: 18px;
  height: 18px;
  transform: translateY(-0.5px);
}

body:has(.project-detail-page) {
  overflow: hidden;
}

body:has(.about-page) {
  overflow: hidden;
}