/* Réalisations par projet : complète realisations.css */

/* Introduction et choix du projet */
.project-index-section {
  width: min(1280px, 86%);
  margin: 0 auto;
  padding: 100px 0 20px;
  scroll-margin-top: 30px;
}

/* Menu des projets : reste en haut de l'écran pendant le défilement */
.project-strip {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #101310f2;
}

.project-strip-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  width: min(1280px, 86%);
  margin: 0 auto;
  padding: 4px 0;
  border-top: 1px solid #ffffff24;
  border-bottom: 1px solid #ffffff24;
}

.project-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--portfolio-muted);
  font-size: 11px;
  white-space: nowrap;
  transition: color .3s ease, box-shadow .3s ease;
}

.project-strip a:hover,
.project-strip a:focus-visible {
  color: #fff;
}

.project-strip a.is-active {
  color: var(--gold-light);
  box-shadow: inset 0 -1px var(--gold-light);
}

.project-strip-number {
  margin-right: 6px;
  color: var(--gold-light);
  font: 400 10px "Cinzel", serif;
}

/* Chapitres de projet */
.project-chapters {
  display: grid;
  gap: 140px;
  width: min(1280px, 86%);
  margin: 0 auto;
  padding: 60px 0 120px;
}

.project-chapter {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  align-items: start;
  gap: 60px;
  scroll-margin-top: 140px;
}

.project-chapter.is-reversed {
  grid-template-columns: 2fr minmax(260px, 1fr);
}

.project-chapter.is-reversed .project-chapter-text {
  order: 2;
}

.project-chapter-text {
  position: sticky;
  top: 140px;
}

.project-chapter-number {
  display: block;
  margin-bottom: 18px;
  color: transparent;
  font: 400 clamp(90px, 11vw, 170px) / .9 "Cinzel", serif;
  -webkit-text-stroke: 1px #d7a32690;
}

.project-chapter-text h3 {
  margin: 0 0 20px;
  font: 400 clamp(26px, 3vw, 42px) / 1.25 "Cinzel", serif;
  letter-spacing: -.02em;
}

.project-chapter-text > p:not(.portfolio-kicker) {
  margin: 0 0 18px;
  color: var(--portfolio-muted);
  font-size: 13px;
  line-height: 1.9;
}

.project-chapter-text .project-chapter-tags {
  color: #e0e2d9;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.project-chapter-open {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  min-height: 44px;
  margin-top: 10px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: #fff;
  background: transparent;
  font: 400 11px "Montserrat", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.project-chapter-open span {
  color: var(--gold-light);
  font-size: 22px;
}

.project-chapter-open:hover {
  color: var(--gold-light);
}

/* Colonne photos : mosaïque puis accordéon */
.project-media {
  min-width: 0;
}

/* Accordéon « Détails du projet » */
.project-details {
  margin-top: 18px;
  border-top: 1px solid #ffffff24;
  border-bottom: 1px solid #ffffff24;
}

.project-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: #e0e2d9;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.project-details summary::-webkit-details-marker {
  display: none;
}

.project-details summary::after {
  content: "+";
  color: var(--gold-light);
  font-size: 18px;
  transition: transform .3s ease;
}

.project-details[open] summary::after {
  transform: rotate(45deg);
}

.project-details summary:hover {
  color: var(--gold-light);
}

.project-details-body {
  max-width: 760px;
  padding: 4px 0 18px;
}

.project-details-body p {
  margin: 0 0 14px;
  color: var(--portfolio-muted);
  font-size: 13px;
  line-height: 1.9;
}

.project-details-body h4 {
  margin: 18px 0 8px;
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.project-details-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-details-body li {
  position: relative;
  padding-left: 18px;
  color: var(--portfolio-muted);
  font-size: 13px;
  line-height: 1.9;
}

.project-details-body li::before {
  content: "";
  position: absolute;
  top: .95em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--gold-light);
}

/* Mosaïque de photos d'un projet */
.project-mosaic {
  display: grid;
  grid-auto-rows: clamp(140px, 15vw, 230px);
  gap: 12px;
}

.project-mosaic[data-tiles="5"] {
  grid-template-columns: repeat(4, 1fr);
}

.project-mosaic[data-tiles="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.project-mosaic[data-tiles="5"] .mosaic-tile:first-child,
.project-mosaic[data-tiles="3"] .mosaic-tile:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.project-mosaic[data-tiles="2"] {
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: clamp(240px, 28vw, 420px);
}

.mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #20271e;
  cursor: zoom-in;
}

.mosaic-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.mosaic-tile:hover img,
.mosaic-tile:focus-visible img {
  transform: scale(1.05);
}

.mosaic-tile:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: -2px;
}

.mosaic-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  background: #101310b3;
  font: 400 clamp(26px, 3vw, 40px) "Cinzel", serif;
}

/* Flèche de retour en haut */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #d7a32680;
  color: var(--gold-light);
  background: #101310e6;
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .3s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  background: #293020;
}

/* Apparition au défilement (ajoutée par le JavaScript) */
.has-reveal .project-chapter-text,
.has-reveal .mosaic-tile {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}

.has-reveal .project-chapter.is-visible .project-chapter-text,
.has-reveal .project-chapter.is-visible .mosaic-tile {
  opacity: 1;
  transform: none;
}

.has-reveal .mosaic-tile:nth-child(2) { transition-delay: .1s; }
.has-reveal .mosaic-tile:nth-child(3) { transition-delay: .2s; }
.has-reveal .mosaic-tile:nth-child(4) { transition-delay: .3s; }
.has-reveal .mosaic-tile:nth-child(5) { transition-delay: .4s; }

@media (max-width: 900px) {
  .project-chapters {
    gap: 90px;
  }

  .project-chapter,
  .project-chapter.is-reversed {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .project-chapter.is-reversed .project-chapter-text {
    order: 0;
  }

  .project-chapter-text {
    position: static;
  }

  .project-chapter-number {
    margin-bottom: 8px;
    font-size: 80px;
  }
}

@media (max-width: 768px) {
  /* Téléphone : une seule ligne qui défile au doigt */
  .project-strip-track {
    flex-wrap: nowrap;
    width: 88%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }

  .project-strip-track::-webkit-scrollbar {
    display: none;
  }

  .project-chapter {
    scroll-margin-top: 70px;
  }

  .project-index-section {
    width: 88%;
    padding: 64px 0 10px;
  }

  .project-chapters {
    width: 88%;
  }
}

@media (max-width: 580px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

  .project-mosaic,
  .project-mosaic[data-tiles="5"],
  .project-mosaic[data-tiles="3"],
  .project-mosaic[data-tiles="2"] {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 120px;
    gap: 8px;
  }

  .project-mosaic[data-tiles="5"] .mosaic-tile:first-child,
  .project-mosaic[data-tiles="3"] .mosaic-tile:first-child {
    grid-column: 1 / -1;
  }

  .project-mosaic[data-tiles="2"] .mosaic-tile {
    grid-row: span 2;
  }
}