/* ============================================================================
   project-page.css — Page projet
   Structure :
     1. Bandeau pleine largeur bord à bord
     2. Intro centrée (titre + description)
     3. Galerie : médias seuls, par 2 ou par 3, avec petites marges latérales
     4. Navigation précédent / timeline / suivant
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   VARIABLES
───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Marge latérale de la galerie */
  --proj-side: clamp(20px, 4vw, 60px);

  /* Espace vertical entre les blocs de la galerie */
  --proj-gap: clamp(32px, 5vw, 72px);
}


/* ─────────────────────────────────────────────────────────────────────────────
   BODY — scroll vertical activé
───────────────────────────────────────────────────────────────────────────── */
body.project-page {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Logo plus petit sur les pages projet */
body.project-page .logo-svg {
  height: 100px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CONTENEUR PRINCIPAL
───────────────────────────────────────────────────────────────────────────── */
.proj-main {
  /* Espace sous le header fixe */
  padding-top:     0;   /* Le bandeau commence tout en haut, sous le header transparent */
  /* Espace en bas avant les contacts fixes */
  padding-bottom: 100px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   1. BANDEAU — image pleine largeur, bord à bord
   Pas de marges, pas de padding. L'image couvre toute la largeur.
───────────────────────────────────────────────────────────────────────────── */
.proj-bandeau {
  width: 100%;
  overflow: hidden;
}

.proj-bandeau-img {
  display: block;
  width: 100%;
  /* Hauteur fixe : entre 420px et 70vh selon la fenêtre */
  height: clamp(320px, 60vh, 680px);
  object-fit: cover;
  object-position: center;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. INTRO — titre + description, centré sous le bandeau
───────────────────────────────────────────────────────────────────────────── */
.proj-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* Colonnes centrées, max 680px de large pour la lisibilité */
  max-width: 780px;
  margin: 0;

  padding-top:    clamp(36px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 72px);
  padding-left:   var(--proj-side);
  padding-right:  var(--proj-side);

  /* Séparateur bas avant la galerie */
  border-bottom: 1px solid var(--color-ruler-line);
  margin-bottom: var(--proj-gap);
  transition: border-color var(--transition-med);
}

/* Lien retour discret "← projets" */
.proj-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--color-text-muted);
  text-decoration: none;
  width: fit-content;
  transition: color var(--transition-fast);
}

.proj-back:hover { color: var(--color-text); }
.proj-back svg { transition: transform var(--transition-fast); }
.proj-back:hover svg { transform: translateX(-3px); }

/* Métadonnées : 2026 — Installation — DA */
.proj-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  transition: color var(--transition-med);
}

.proj-meta-sep { opacity: 0.4; }

/* Titre du projet */
.proj-title {
  font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
  font-size:   clamp(34px, 6vw, 64px);
  font-weight: 300;
  font-style:  italic;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-text);
  transition: color var(--transition-med);
}

/* Description courte */
.proj-description p {
  font-family: var(--font-mono);
  font-size:   12.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-text);
  transition: color var(--transition-med);
}

/* Liens externes */
.proj-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.proj-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ruler-line);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.proj-ext-link:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.proj-ext-link svg { transition: transform var(--transition-fast); }
.proj-ext-link:hover svg { transform: translate(2px, -2px); }


/* ─────────────────────────────────────────────────────────────────────────────
   3. GALERIE
   Chaque bloc = une "ligne" (.proj-row).
   Une ligne peut contenir 1, 2 ou 3 médias.
   Petites marges latérales sur tous les blocs (--proj-side).
───────────────────────────────────────────────────────────────────────────── */
.proj-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--proj-gap);

  padding-left:  var(--proj-side);
  padding-right: var(--proj-side);
}

/* ── Ligne de base : 1 média pleine largeur ── */
.proj-row {
  display: flex;
  gap: clamp(10px, 1.5vw, 20px);
}

/* ── Deux médias côte à côte ── */
.proj-row--duo {
  /* Les deux items se partagent la largeur à parts égales */
}

/* ── Trois médias sur la même ligne ── */
.proj-row--trio {
  /* Les trois items se partagent la largeur à parts égales */
}

/* Chaque item dans une ligne */
.proj-item {
  flex: 1;          /* Prend une part égale de la ligne */
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;     /* Empêche le débordement */
}

/* Image */
.proj-img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 0; /* Pas de radius — bords nets */
  transition: transform var(--transition-med) cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hauteur des images selon le nombre par ligne */
.proj-row .proj-img {
  /* Seule : plus haute */
  height: clamp(280px, 52vw, 680px);
}

.proj-row--duo .proj-img {
  /* Deux : hauteur moyenne */
  height: clamp(200px, 36vw, 480px);
}

.proj-row--trio .proj-img {
  /* Trois : plus petites */
  height: clamp(140px, 24vw, 320px);
}

.proj-img:hover {
  transform: scale(1.006);
}

/* Légende */
.proj-caption {
  font-family: var(--font-mono);
  font-size:   9px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1.5;
  transition: color var(--transition-med);
}


/* ── Wrapper vidéo 16:9 ── */
.proj-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* ratio 16:9 */
  background-color: var(--color-clip-light);
  overflow: hidden;
  transition: background-color var(--transition-med);
}

.proj-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. NAVIGATION ENTRE PROJETS
───────────────────────────────────────────────────────────────────────────── */
.proj-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;

  margin-top: var(--proj-gap);
  padding:
    clamp(28px, 4vw, 48px)
    var(--proj-side);

  border-top: 1px solid var(--color-ruler-line);
  transition: border-color var(--transition-med);
}

.proj-nav-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  padding: 10px 0;
  transition: opacity var(--transition-fast);
}

.proj-nav-link:hover { opacity: 0.5; }

.proj-nav-prev { align-items: flex-start; }
.proj-nav-next { align-items: flex-end; }

.proj-nav-dir {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-med);
}

.proj-nav-name {
  font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
  font-size: clamp(15px, 2.2vw, 20px);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.2;
  transition: color var(--transition-med);
}

.proj-nav-year {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--color-text-muted);
  transition: color var(--transition-med);
}

/* Bouton central — retour à la timeline */
.proj-nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 50%;
  border: 1px solid var(--color-ruler-line);
  transition:
    color        var(--transition-fast),
    border-color var(--transition-fast),
    transform    var(--transition-fast);
}

.proj-nav-home:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  transform: rotate(45deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARROUSEL
───────────────────────────────────────────────────────────────────────────── */

/* ── Carousel inline dans la galerie projet ── */
.proj-carousel {
  position: relative;
  width: 100%;
  background-color: var(--color-clip-light);
  transition: background-color var(--transition-med);
  overflow: hidden;
}

/* Zone qui contient toutes les images — seule .is-active est visible */
.proj-carousel-stage {
  width: 100%;
}

.proj-carousel-img {
  display: none;
  width: 100%;
  height: clamp(320px, 55vw, 720px);
  object-fit: cover;
  object-position: center;
  /* Fondu entre les images */
  animation: carouselFadeIn 0.4s ease both;
}

.proj-carousel-img.is-active {
  display: block;
}

@keyframes carouselFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Flèches gauche / droite */
.proj-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: var(--color-bg);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  opacity: 0;
  pointer-events: auto !important; /* Force les clics même avec cursor:none global */
  transition:
    opacity       var(--transition-fast),
    background    var(--transition-fast),
    color         var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Les flèches apparaissent au survol du carousel */
.proj-carousel:hover .proj-carousel-btn { opacity: 1; }
.proj-carousel-btn:hover { background: var(--color-playhead); color: #fff; }

.proj-carousel-prev { left: 16px; }
.proj-carousel-next { right: 16px; }

/* Compteur "1 / 6" en bas à droite */
.proj-carousel-count {
  position: absolute;
  bottom: 14px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {

  /* Duo et trio passent en colonne unique sur mobile */
  .proj-row--duo,
  .proj-row--trio {
    flex-direction: column;
  }

  /* Toutes les images ont la même hauteur sur mobile */
  .proj-row--duo .proj-img,
  .proj-row--trio .proj-img {
    height: clamp(200px, 52vw, 400px);
  }

  /* Nav : bouton home en bas au centre */
  .proj-nav {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .proj-nav-home {
    grid-column: 1 / -1;
    width: fit-content;
    margin: 0 auto;
    order: 3;
  }
}


/* ── Liens vidéo avec vignettes ── */
.proj-video-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.proj-video-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  width: clamp(140px, 20vw, 220px);
  flex-shrink: 0;
}

/* Vignette */
.proj-video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--color-clip-light);
}

.proj-video-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.proj-video-link:hover .proj-video-thumb-img {
  transform: scale(1.05);
}

/* Bouton play centré sur la vignette */
.proj-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.proj-video-link:hover .proj-video-play {
  opacity: 0.8;
}

/* Label sous la vignette */
.proj-video-link-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.proj-video-link:hover .proj-video-link-label {
  color: var(--color-text);
}



/* ── Lien externe avec vignette optionnelle ── */
.proj-ext-link-thumb {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  width: clamp(160px, 22vw, 260px);
}

.proj-ext-thumb-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
}

.proj-ext-thumb-img {
  display: block;
  width: 100%;
  height: clamp(90px, 13vw, 160px);
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.proj-ext-link-thumb:hover .proj-ext-thumb-img {
  transform: scale(1.04);
}

.proj-ext-thumb-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.proj-ext-link-thumb:hover .proj-ext-thumb-label {
  color: var(--color-text);
}



/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — identique à home.css, présent ici pour les pages projet
───────────────────────────────────────────────────────────────────────────── */
.home-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px clamp(24px, 4vw, 60px);
  margin-top: clamp(32px, 5vw, 60px);
  border-top: 1px solid var(--color-ruler-line);
  transition: border-color var(--transition-med);
}

.home-footer-contacts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-footer-link {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.home-footer-link:hover { color: var(--color-text); }

.home-footer-copy {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: color var(--transition-med);
}

.home-footer-sep {
  font-size: 9px;
  color: var(--color-text-faint);
  user-select: none;
}

/* Petit soleil rouge dans le header */
.header-sun {
  color: var(--color-playhead);
  display: flex;
  align-items: center;
}

/* ── Vidéo portrait + carousel côte à côte ── */
.proj-row--video-carousel {
  display: grid;
  grid-template-columns: auto 1fr; /* Vidéo prend sa largeur naturelle, carousel prend le reste */
  gap: clamp(12px, 2vw, 24px);
  align-items: stretch;
}

/* Colonne vidéo portrait — largeur calculée depuis la hauteur du carousel */
.proj-item--portrait-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  /* Largeur = ratio 9/16 de la hauteur du carousel */
  width: calc(clamp(320px, 55vw, 720px) * 9 / 16);
}

.proj-portrait-video {
  display: block;
  width: 100%;
  height: auto;        /* La vidéo garde ses proportions naturelles */
  object-fit: contain; /* Pas de crop — tout est visible */
  border-radius: 2px;
}

/* Colonne carousel — prend tout l'espace restant */
.proj-item--carousel {
  min-width: 0;
}

/* Responsive — vidéo au-dessus du carousel sur mobile */
@media (max-width: 700px) {
  .proj-row--video-carousel {
    grid-template-columns: 1fr;
  }

  .proj-item--portrait-video {
    width: 100%;
  }

  .proj-portrait-video {
    width: 100%;
    height: clamp(240px, 56vw, 400px);
    object-fit: cover;
  }
}


/* ── Bouton son sur la vidéo portrait ── */
.proj-portrait-video-wrap {
  position: relative;
  width: 100%;
}

.proj-video-sound-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  transition: background var(--transition-fast);
  z-index: 10;
}

.proj-video-sound-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER AFFICHES — identique à leisure.html
   Scroll horizontal avec snap, images en format portrait
───────────────────────────────────────────────────────────────────────────── */
.affiche-slider-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-muted) var(--color-ruler-line);
  padding: clamp(16px, 3vw, 32px) clamp(24px, 4vw, 60px);
}

.affiche-slider-container::-webkit-scrollbar {
  height: 3px;        /* Fine barre horizontale */
}

.affiche-slider-container::-webkit-scrollbar-track {
  background: var(--color-ruler-line);
  border-radius: 2px;
}

.affiche-slider-container::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border-radius: 2px;
}

.affiche-slider-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-text);
}

.affiche-slider {
  display: flex;
  gap: 16px;
  white-space: nowrap;
}

.affiche-slider img {
  display: inline-block;
  flex-shrink: 0;
  width: auto;
  max-width: clamp(220px, 30vw, 420px);
  height: clamp(300px, 55vw, 620px);
  object-fit: contain; /* Pas de crop sur les affiches portrait */
  scroll-snap-align: start;
  border-radius: 2px;
  white-space: normal;
}

@media (max-width: 600px) {
  .affiche-slider img {
    max-width: 80vw;
    height: auto;
  }
}

/* ── Carousel pleine largeur hors galerie ── */
.proj-carousel-fullwidth {
  width: 100%;
  margin-bottom: var(--proj-gap);
}

.proj-carousel-fullwidth .proj-carousel {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE PAGES PROJET — mobile
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Logo encore plus petit sur les pages projet mobile */
  body.project-page .logo-svg {
    height: 36px;
  }

  /* Bandeau */
  .proj-bandeau-img {
    height: clamp(200px, 55vw, 340px);
  }

  /* Intro */
  .proj-intro {
    padding-left:  16px;
    padding-right: 16px;
    padding-top:   24px;
  }

  .proj-title {
    font-size: clamp(26px, 8vw, 42px);
  }

  /* Galerie : marges réduites */
  .proj-gallery {
    padding-left:  16px;
    padding-right: 16px;
    gap: clamp(24px, 6vw, 48px);
  }

  /* Images seules */
  .proj-row .proj-img {
    height: clamp(200px, 65vw, 380px);
  }

  /* Duo → colonne unique */
  .proj-row--duo {
    flex-direction: column;
  }

  .proj-row--duo .proj-img {
    height: clamp(180px, 58vw, 320px);
  }

  /* Trio → deux colonnes */
  .proj-row--trio {
    flex-wrap: wrap;
  }

  .proj-row--trio .proj-item {
    flex: 0 0 calc(50% - 8px);
  }

  .proj-row--trio .proj-img {
    height: clamp(120px, 40vw, 220px);
  }

  /* Vidéo portrait + carousel : empilé */
  .proj-row--video-carousel {
    grid-template-columns: 1fr;
  }

  .proj-item--portrait-video {
    width: 100%;
  }

  /* Navigation entre projets */
  .proj-nav {
    grid-template-columns: 1fr 1fr;
    padding: 20px 16px;
  }

  .proj-nav-home {
    grid-column: 1 / -1;
    margin: 0 auto;
    order: 3;
  }

  .proj-nav-name {
    font-size: 13px;
  }

  /* Slider affiches */
  .affiche-slider-container {
    padding: 12px 16px 24px;
  }

  /* Liens vidéo avec vignettes */
  .proj-video-links {
    gap: 12px;
  }

  .proj-video-link {
    width: clamp(120px, 42vw, 180px);
  }
}