/* ============================================================
   HEKLA — Single Project Page
   ============================================================ */

/* ── Chargement ─────────────────────────────────────────────── */
.projet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-grey-500);
}

/* ── Hero image ─────────────────────────────────────────────── */
.projet-hero {
  position: relative;
  width: calc(100% - 100px);
  margin-inline: 50px;
  height: calc(100vh - var(--header-h));
  min-height: 500px;
  overflow: hidden;
}

.projet-hero__img-wrap {
  position: absolute;
  inset: 0;
}

.projet-hero__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* ── Bouton retour ──────────────────────────────────────────── */
.projet-back {
  position: absolute;
  top: 32px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-white);
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 10;
  opacity: 0.8;
  transition: opacity 0.2s ease, gap 0.3s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.projet-back:hover {
  opacity: 1;
  gap: 14px;
}

.projet-back__label-en { display: none; }

/* ── Infos projet ───────────────────────────────────────────── */
/* ── Pill projet-infos — fixe en haut, même style que float-nav ── */
.projet-infos {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  z-index: 90;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 28px;
  white-space: nowrap;

  /* Glass pill */
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.18);

  color: var(--c-black);
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;

  animation: navFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.projet-infos.is-light {
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── Pill retour — même glass que projet-infos, aligné à gauche ── */
.projet-back {
  position: fixed;
  top: 24px;
  left: 20px;
  z-index: 90;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;

  /* Glass pill */
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.18);

  color: var(--c-black);
  text-decoration: none;
  transition: color 0.4s ease, background 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  animation: navFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.projet-back svg {
  display: block;
  width: 20px;
  height: auto;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .projet-back:hover {
    background: rgba(255, 255, 255, 0.26);
    box-shadow: 0 6px 32px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.28);
    transform: scale(1.08);
  }
  .projet-back:hover svg {
    transform: translateX(-4px);
  }
  /* Variante is-light */
  .projet-back.is-light:hover {
    background: rgba(0, 0, 0, 0.30);
    box-shadow: 0 6px 36px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.16);
  }
}

.projet-back.is-light {
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}

.projet-infos__title {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}

.projet-infos__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.projet-infos__category {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
}

.projet-infos__date {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: inherit;
  opacity: 0.7;
}

/* ── Bouton En détail ───────────────────────────────────────── */
/* display:flex ci-dessous écraserait [hidden] sans cette règle */
.projet-detail-btn[hidden] { display: none !important; }

.projet-detail-btn {
  position: fixed;
  top: 24px;
  right: 20px;
  z-index: 90;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;

  /* Glass pill teinté orange */
  background: rgba(242, 99, 34, 0.20);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(242, 99, 34, 0.30);
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(242, 99, 34, 0.10), inset 0 1px 0 rgba(255,255,255,0.18);

  color: var(--c-orange);
  cursor: pointer;

  transition: background 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  animation: navFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.projet-detail-btn svg {
  display: block;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.projet-detail-btn.is-open svg {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .projet-detail-btn:hover {
    background: rgba(242, 99, 34, 0.32);
    box-shadow: 0 6px 32px rgba(242, 99, 34, 0.13), inset 0 1px 0 rgba(255,255,255,0.28);
    transform: scale(1.08);
    border-color: rgba(242, 99, 34, 0.46);
  }
}

.projet-detail-btn.is-open {
  background: rgba(242, 99, 34, 0.36);
  border-color: rgba(242, 99, 34, 0.50);
}

/* ── Description dépliable — drawer droit ──────────────────── */
.projet-description {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  /* dvh et non vh : sur Safari, la barre d'outils réduit la zone visible sans
     réduire vh. Le bas du panneau passait alors sous le bord de l'écran, et
     avec lui les dernières lignes, hors d'atteinte. vh reste en repli pour
     les navigateurs qui ignorent dvh. */
  height: 100vh;
  height: 100dvh;
  z-index: 89; /* sous les pills (z-index: 90) */
  overflow-y: auto;
  /* Empêche la propagation du scroll au parent (iOS Safari) */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--c-bg);
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  /* animation via GSAP */

  /* Centrage vertical de __inner */
  display: flex;
  flex-direction: column;
}

.projet-description__inner {
  /* margin:auto distribue l'espace restant au-dessus et en-dessous → centrage vertical.
     Quand le contenu dépasse 100vh l'overflow-y:auto prend le relais. */
  margin: auto;
  width: calc(100% / 2);
  padding: 60px 0; /* respiration verticale minimale */
}

/* Dégagement pour la .float-nav. Porté par le panneau et non par le
   contenu : il s'ajoute à la course quand ça défile, et ampute la boîte
   de centrage quand ça ne défile pas. */
@media (min-width: 769px) {
  .projet-description {
    box-sizing: border-box;
    padding-bottom: 120px;
  }
}

/* Dégradé signalant qu'il reste à lire. En position:fixed, sans quoi il
   défilerait avec le texte. Classe .a-defiler posée par projet.js, retirée
   à la fin du défilement. */
.projet-description__degrade {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 50vw;
  height: 140px;
  pointer-events: none;
  z-index: 89;
  background: linear-gradient(to top, var(--c-bg) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.projet-description.a-defiler ~ .projet-description__degrade {
  opacity: 1;
}

@media (max-width: 768px) {
  .projet-description__degrade { width: 100vw; height: 120px; }
}

@media (max-width: 768px) {
  .projet-description { width: 100vw; }
  .projet-description__inner {
    /* Sur mobile : pas de centrage vertical (margin:auto bloque le scroll).
       padding-top élevé pour passer sous .projet-infos (pill fixe ~80px). */
    margin: 0 auto;
    width: 84%;
    /* padding-bottom : 96px de base + hauteur float-nav (~60px) + safe area (iPhone notch) */
    padding: 96px 0 calc(160px + env(safe-area-inset-bottom, 0px));
  }
}

.projet-description__text {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  color: var(--c-black);
  line-height: 1.75;
}

.projet-description__text p { margin-bottom: 1.2em; }
.projet-description__text p:last-child { margin-bottom: 0; }
.projet-description__text strong { font-weight: 600; }
.projet-description__text em { font-style: italic; }

/* ── Crédits dans le panel description ─────────────────────── */
.projet-description__credits {
  margin-top: 32px;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 24px;
}

.projet-description__credits .block-credits__grid {
  justify-content: flex-start;
  gap: 20px 30px;
}

.projet-description__credits .block-credits__item {
  text-align: left;
}

/* ── Corps du projet ────────────────────────────────────────── */
.projet-body {
  padding: 5px 10px 0;
  min-height: 300px;
  width: 100%;
}

/* ── Grille en mode narrow (drawer description ouvert) ────────── */
.projet-blocks.is-narrow .block-photo-grid {
  grid-template-columns: 1fr;
}

.projet-placeholder {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  color: var(--c-grey-500);
  font-style: normal;
}

/* ── Projet suivant ─────────────────────────────────────────── */
.projet-next {
  border-top: 1px solid var(--c-grey-100);
}

.projet-next__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 50px;
  gap: 24px;
  transition: background 0.3s ease;
}

.projet-next__link:hover {
  background: var(--c-grey-100);
}

.projet-next__label {
  font-family: var(--f-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-grey-500);
  flex-shrink: 0;
}

.projet-next__title {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  font-style: normal;
  color: var(--c-black);
  flex: 1;
  text-align: center;
}

.projet-next__arrow {
  color: var(--c-orange);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.projet-next__link:hover .projet-next__arrow {
  transform: translateX(8px);
}

/* ── Projets à découvrir ─────────────────────────────────── */
.projet-related {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 0;
}

.projet-related__header {
  padding: 60px 50px 0;
}

.projet-related__label {
  font-family: var(--f-serif);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-orange);
  margin: 0 0 40px;
}

.projet-related__bands {
  /* Les .project-band utilisent les styles de projects.css */
  padding-bottom: 160px; /* espace pour que le brain footer ne chevauche pas le dernier projet */
}

@media (max-width: 768px) {
  .projet-back { display: none; }

  .projet-related__header {
    padding: 40px 30px 0;
  }
  .projet-related__bands {
    padding-bottom: 120px;
    /* pas de padding latéral : les .project-band ont déjà margin: 0 10px */
  }
  .projet-related__label {
    text-align: center;
  }
}

/* ── 404 ────────────────────────────────────────────────────── */
.projet-404[hidden] { display: none !important; }

.projet-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 60vh;
  font-family: var(--f-sans);
  color: var(--c-grey-500);
}

.projet-404 a {
  color: var(--c-orange);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}