/* Full-bleed hero background (first frame only) */
.project-hero-bg {
  position: absolute; /* reste en place pendant le hero */
  top: calc(-1 * var(--space-4));
  left: calc(-1 * var(--space-4));
  width: 100vw;
  height: 100vh; /* fallback desktop */
  z-index: -1; /* derrière */
  pointer-events: none;
}

.project-hero-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: var(--project-bg-opacity, 8%);
  transition: opacity 100ms ease;
}

.project-hero-bg__img {
  opacity: var(--project-bg-opacity, 8%);
  transition: opacity 100ms ease;
}

@media (min-width: 768px) {
  .page-project.is-bg-hover .project-hero-bg__img {
    opacity: var(--project-bg-opacity-hover, 20%);
  }
}

/* Mobile: use svh to avoid browser UI issues */
@media (max-width: 768px) {
  .project-hero-bg {
    height: 100svh;
  }
}





/* -------------------------------------------------- */
/* Project text block (same centering logic as contact) */
/* -------------------------------------------------- */

.project-text {
  position: absolute;
  left: var(--frame-padding-x);
  right: auto;
  top: calc(
    (100svh - var(--frame-padding-y) - var(--frame-top-height) - var(--frame-bottom-height)) / 2
    + var(--frame-top-height)
  );
  transform: translateY(-50%);
  width: min(520px, calc(100vw - (var(--frame-padding-x) * 2)));
}

.project-text > section + section {
  margin-top: var(--space-6);
}


.project-description p {
  margin: 0;
  max-width: 50vw; /* look “bloc” comme sur le visuel */
}

/* -------------------------------------------------- */
/* Link to website (type-p2) */
/* -------------------------------------------------- */


.project-links a.is-clickable {
  display: inline-flex;
  align-items: baseline;
}

/* -------------------------------------------------- */
/* Visuals placeholder (type-p1) */
/* -------------------------------------------------- */



/* -------------------------------------------------- */
/* Meta: year + tags collées */
/* -------------------------------------------------- */

.project-meta {
  margin: 0;
}

.project-meta__list {
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column; /* Year sur une ligne, Tags dessous comme sur ton visuel */
}

.project-meta__item {
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------- */
/* (Optionnel) responsive: sur petits écrans, laisse respirer */
/* -------------------------------------------------- */

@media (max-width: 700px) {
  .project-text {
    width: min(560px, calc(100vw - (var(--frame-padding-x) * 2)));
  }

  .project-description p {
    max-width: 52ch;
  }
}


/* Le "hero" = 100vh (la zone haut de page) */
.page-project {
  min-height: 100%;
}

/* Stack des frames en dessous */
.project-visual-stack {
  position: relative;
  margin-top: var(--hero-vh);/*> frame 1 commence à +100% */
  left: 25%;
  width: 75%;
}

.project-visual-frame {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.project-visual-frame__inner {
  width: 100%;
  height: 100%;
  padding: var(--frame-padding-y) var(--frame-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Media: prend toute la frame (tu ajusteras selon ton rendu) */
.project-visual-media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Caption si media+text */
.project-visual-caption {
  position: absolute;
  left: var(--frame-padding-x);
  bottom: calc(var(--frame-padding-y) + 20px);
  max-width: min(520px, 50vw);
}

.project-visuals__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-visuals__item {
  margin: 0;
}

.project-visual-link {
  text-decoration: none;
}
.project-visual-link.is-clickable {
  text-decoration: none; /* si tu veux pas souligné ici */
}


/* Placeholder garde la place, mais ne doit pas être cliquable */
[data-project-visuals-placeholder] {
  pointer-events: none;
}

/* On va remplacer son contenu par un spacer */
.project-visuals-spacer {
  width: 100%;
}

/* Mount fixed : visible + cliquable */
[data-project-visuals-fixed-mount] {
  position: fixed;
  z-index: 50;
  pointer-events: auto;
}

/* liste */
[data-project-visuals-fixed-mount] .project-visuals__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-visuals-fixed {
  position: fixed;
  z-index: 50;
}

/* Back to top = overlay */
.project-visuals-back {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transform: translateY(-100%);
}

.project-visuals-mobile-hint {
  display: none;
}

.project-visual-text {
    width: 50%;
    text-align: center;
}

/* media + text split (desktop) */
.project-visual-split {
  width: 100%;
  height: 100%;
  display: flex;
  gap: var(--space-6);
}

.project-visual-split__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 100%;
}

.project-visual-split__media {
  width: 60%;
  height: 100%;
}

/* media fills its side */
.project-visual-split__media .project-visual-media {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou cover si tu veux remplir */
  display: block;
}





.project-text.project-not-web {
  max-width: calc(40% - var(--space-4));
}
/* zone droite du hero */
.project-hero__right{
  position: relative;
  width: 60%;
  height: 100%;
}

/* la grid est un bloc qui s’ancre en bas à droite */
.project-hero-grid{
  position: absolute;
  right: 0;
  bottom: 120px;
  /* dimension = fraction de la grille max 3x3 */
  width: calc((var(--grid-cols) / 3) * 60%);
  height: calc((var(--grid-rows) / 3) * 60%);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--space-4); /* adapte */
}

/* cellule */
.project-hero-grid__cell{
  position: relative;
  overflow: hidden;
}

/* média */
.project-hero-grid__media{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right center;
}

.project-hero-grid__cell.is-hover .project-hero-grid__media{
  filter: grayscale(100%) invert(100%);
  cursor: pointer;
}



/* ---------------------------------------------- */
/* Mobile only (project page)                     */
/* ---------------------------------------------- */

@media (max-width: 768px) {

  /* on cache l'UI (liste) */
  [data-project-visuals-placeholder],
  [data-project-visuals-fixed-mount] {
    display: none !important;
  }

  /* on garde le stack pour conserver la hauteur scrollable */
  .project-visual-stack {
    pointer-events: none;
    width: 100%;
    left: 0;
  }
  .project-text > section + section {
  margin-top: var(--space-4);
}

  .project-visuals-mobile-hint {
  display: block;
}

  .project-visuals-mobile-hint__inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
  }

  .project-visuals-mobile-hint__text {
    text-align: left;
    opacity: 0.85;
  }

  .project-visuals-mobile-hint__arrow {
    text-align: right;
  }
  .project-visual-frame {
    height: auto;
    width: auto;
    }
 .project-visual-text {
    width: 90%;
}

  /* split devient colonne */
  .project-visual-frame[data-template="mediaText"] .project-visual-split {
    flex-direction: column;
  }

  /* chaque partie = 1 écran */
  .project-visual-frame[data-template="mediaText"] .project-visual-split__text,
  .project-visual-frame[data-template="mediaText"] .project-visual-split__media {
    width: 100%;
  }

  .project-visual-frame[data-template="mediaText"] .project-visual-media {
    width: 100%;
    object-fit: contain;
  }
  .project-hero-right {
    display: none;
  }
  .project-text.project-not-web {
    max-width: 100%;
}
}


/* ---------------------------------- */
/* Mobile back-to-top frame (in flow) */
/* ---------------------------------- */

.project-back-to-top-frame {
  min-height: calc(100svh - var(--space-6));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-back-to-top-frame .project-back-to-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
}

/* Desktop: pas de frame "back to top" en fin de page */
@media (min-width: 769px) {
  .project-back-to-top-frame {
    display: none;
  }
}