/* Nouvelle mise en page en colonnes pour les projets */

.project-cover img {
  opacity: 0;
}

/* Surcharge du style global pour la page projet */
[data-barba-namespace="project"] body {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Conteneur principal du projet */
.project-container {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  opacity: 1; /* Assurer que le conteneur est visible pour les animations */
  transition: opacity 0.3s ease;
  position: relative;
  top: 0;
  left: 0;
  transform: none;
}

/* Structure en colonnes */
.project-layout {
  display: grid;
  grid-template-columns: 5% 60% 5% 25% 5%;
  width: 100%;
  max-width: 100%;
}

/* Colonne des images */
.project-images-column {
  grid-column: 2 / 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* Important pour le positionnement des images */
  padding-bottom: 4rem;
  margin-right: 0; /* Suppression de la marge à droite */
}

/* Ligne noire sous le texte principal du projet */
.project-text-underline {
  border-bottom: 1px solid #000;
  padding-bottom: 20px;
}

/* Image de couverture */
.project-cover {
  width: 100%;
  margin-bottom: 4rem; /* Plus d'espace sous l'image de couverture */
  position: relative; /* Nécessaire pour le positionnement des animations */
}

/* Ajout d'un padding-top sur mobile pour éviter que l'image soit cachée par le header */
@media (max-width: 768px) {
  .project-layout {
    padding-top: 40px; /* Espace supplémentaire pour éviter que le header cache l'image */
  }
}

.project-cover img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transform-origin: center center; /* Point d'origine pour les animations de scale */
  transition: transform 0.5s ease; /* Transition douce pour les animations manuelles */
  max-height: 90vh; /* Augmenter la hauteur maximale */
}

.image-placeholder {
  background-color: #f0f0f0;
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

/* Conteneur de la galerie */
.project-gallery-container {
  width: 100%;
}

/* Galerie d'images */
.project-gallery {
  display: flex;
  flex-direction: column;
  gap: 4rem; /* Augmenter l'espace entre les images */
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  opacity: 0; /* S'assurer que la galerie est visible */
}

.gallery-item {
  width: 100%;
}

.gallery-item figure {
  margin: 0;
  padding: 0;
}

.gallery-item .image-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

/* Colonne de texte (position fixe) */
.project-text-column {
  grid-column: 4 / 5;
  position: fixed;
  top: 60px; /* Aligner avec le haut de la page (après le header) */
  right: 5%; /* Aligner avec l'espacement de droite */
  width: 25%; /* Largeur correspondant à la colonne de la grille */
  height: auto; /* Hauteur automatique basée sur le contenu */
  overflow-y: auto;
}

.project-details {
  width: 100%;
  opacity: 0;
  /* Pas de transition CSS, nous utiliserons GSAP */
}

.project-details h1 {
  font-size: clamp(1rem, 1.6rem + 1.5vw, 1.8rem);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.project-text {
  font-size: clamp(0.6rem, 0.6rem + 1vw, 0.95rem);
  margin-top: 1.5rem;
  line-height: 1.6;
}

.project-info-container {
  margin-bottom: 2rem;
}

/* Styles pour les différents blocs de détails de projet */
.project-details-mobile {
  display: none; /* Caché par défaut sur desktop */
  width: 90%; /* Similaire à la colonne de texte originale */
  margin: 0 auto; /* Centrer */
  padding: 20px 0; /* Espacement */
}

.project-details-desktop {
  display: block; /* Assurer l'affichage et corriger le lint */
  /* Les styles d'opacité sont gérés par JS */
}

/* Styles pour les boutons de navigation entre projets */
.project-navigation {
  display: flex;
  justify-content: space-between;
  width: 60%; /* Correspond à la largeur de la colonne d'images */
  position: fixed;
  bottom: 2rem;
  left: 5%; /* Aligné avec le début de la colonne d'images */
  padding-left: 1%;
  padding-right: 1%;
  z-index: 100;
  transition: all 0.3s ease;
  opacity: 0; /* Caché au début, sera animé par JavaScript */
}

/* Classe ajoutée lorsque les boutons sont pinnés en bas de la dernière image */
.project-navigation.pinned {
  position: absolute;
  bottom: 20px; /* Remonte les boutons de 20px par rapport au bas */
  transform: translateY(0);
  height: auto; /* Empêche l'étirement vertical */
  display: flex; /* Maintient la disposition flex */
  align-items: center; /* Centre verticalement les boutons */
}

.nav-button {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 4px 8px;
  color: #000;
  background-color: #FCFCFC; /* Fond semi-transparent */
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 30px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  pointer-events: none;
}

.nav-button:hover {
  background-color: #000;
  color: #fff;
}

.nav-button:hover .arrow-icon {
  filter: invert(1);
}

.nav-text {
  margin: 0 8px;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.prev-arrow {
  transform: rotate(180deg); /* Rotation pour pointer vers la gauche */
}

/* Styles responsives pour les appareils mobiles */
@media (max-width: 768px) {
  /* Réorganisation de la structure en grille */
  .project-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  /* Cacher la colonne de texte desktop sur mobile */
  .project-text-column {
    display: none !important;
  }

  /* Afficher le bloc de texte mobile et s'assurer qu'il est stylé */
  .project-details-mobile {
    display: block !important;
    opacity: 1 !important; /* S'assurer qu'il est visible */
    visibility: visible !important;
    order: 2; /* Apparaît après la cover dans le flex-column */
    padding-bottom: 2rem; /* Espace avant la galerie */
  }

  .project-details-mobile h1 {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .project-text {
    margin-top: 1rem;
    font-size: 1rem;
  }

  .project-details-mobile p {
    font-size: 0.8rem;
  }

  .project-details-mobile .project-text-underline {
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
  }
  
  /* La colonne d'images (contenant cover, texte mobile, galerie) vient en premier */
  .project-images-column {
    grid-column: auto; /* Inutile en mode flex */
    width: 100%; /* Prend toute la largeur */
    margin: 0 auto;
    order: 1; /* La colonne d'images (avec cover, texte mobile, galerie) est la première */
    display: flex; /* Pour ordonner cover, texte mobile, galerie */
    flex-direction: column;
    gap: 1rem;
  }

  .project-images-column .project-cover {
    order: 1;
    width: 90%;
    margin: 0 auto; /* Centrer la galerie */
  }

  /* .project-details-mobile est déjà positionné par le HTML dans project-images-column */
  /* Mais on peut lui donner un order explicite si besoin au sein de project-images-column */
  .project-images-column .project-details-mobile {
    order: 2; 
  }

  .project-images-column .project-gallery-container {
    order: 3;
    width: 90%; /* Conserver le style de la galerie */
    margin: 0 auto; /* Centrer la galerie */
  }
  
  /* Ajustements de la navigation */
  .project-navigation {
    width: 90%;
    left: 5%;
    bottom: 1rem;
  }
  
  .nav-button {
    font-size: 0.6rem;
    padding: 4px 8px;
  }
  
  .nav-button-circle {
    width: 20px;
    height: 20px;
  }
  
  .arrow-icon {
    width: 10px;
    height: 10px;
  }
  
  .nav-text {
    margin: 0 6px;
  }
  
  /* Réduction de l'espace entre les images de la galerie */
  .project-gallery {
    gap: 2rem;
  }
}