/* Font Face Declarations */
@font-face {
  font-family: 'Harmond ExtBd Exp';
  src: url('../assets/fonts/Harmond%20ExtBd%20Exp.woff2') format('woff2'),
       url('../assets/fonts/Harmond%20ExtBd%20Exp.woff') format('woff'),
       url('../assets/fonts/Harmond%20ExtBd%20Exp.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Reset et base --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  font-family: "Harmond ExtBd Exp", sans-serif;
  color: rgba(154, 232, 196, 0.8);
  background: transparent;
}

/* --- Fond vidéo et header (identique à ton index) --- */
.common-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-texture-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/stripped\ glass.jpg");
  background-repeat: repeat;
  opacity: 0.12;
  pointer-events: none;
}

/* --- Header (styles identiques à ton index.html) --- */
.main-header {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 50vw;
  padding: 0.6rem 3rem;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(154, 232, 196, 0.25);
  transition: all 0.4s ease;
}

.header-nav {
  display: flex;
  gap: 2vw;
  justify-content: center;
}

.header-nav a {
  color: rgba(154, 232, 196, 0.75);
  text-decoration: none;
  font-family: "Harmond ExtBd Exp", sans-serif;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.header-nav a:hover {
  color: rgba(154, 232, 196, 1);
}

.main-header.active {
  top: 2vh;
  opacity: 1;
  pointer-events: auto;
}

/* --- NOUVEAU STYLE POUR LE HEADER RÉDUCTIBLE --- */
/* État réduit du header (bouton) */
.main-header.reduced {
  width: 2.5vw !important; /* Largeur réduite */
  padding: 0.6rem 1rem !important; /* Padding réduit */
  left: auto !important; /* Annule le centrage */
  right: 20px !important; /* Position à droite */
  transform: none !important; /* Annule le centrage */
  border-radius: 50px; /* Bordure circulaire */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Animation fluide */
}

/* Bouton du header réduit (icône de menu) */
.main-header.reduced::before {
  content: "☰"; /* Icône de menu */
  font-size: 1.5rem;
  color: rgba(154, 232, 196, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position:absolute;
  top:0;
}

/* Masquage des liens dans l'état réduit */
.main-header.reduced .header-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* État étendu temporaire (au survol du bouton) */
.main-header.extended {
  width: 50vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}

/* Réapparition des liens en état étendu */
.main-header.extended .header-nav {
  opacity: 1;
  pointer-events: auto;
}

/* Timer pour le retour à l'état réduit (après 5s) */
.main-header.extended.timer {
  animation: reduceAfterDelay 5s forwards;
}

@keyframes reduceAfterDelay {
  to {
    width: 60px !important;
    left: auto !important;
    right: 20px !important;
    transform: none !important;
  }
}

/* Survol du header étendu (le maintient visible) */
.main-header.extended:hover {
  animation: none !important;
}

/* --- Titre principal --- */
/* --- Titre principal (aligné à gauche) --- */
/* --- Titre principal (espace réduit en dessous) --- */
.page-title {
  position: relative;
  min-height: 10vh; /* Réduction de la hauteur minimale (50vh → 30vh) */
  padding-top: 15vh;
   /* Ajout d'un padding bas réduit */
  z-index: 20;
  text-align: left;
  padding-left: 8vw;
}

.page-title h1 {
  font-size: 4rem;
  text-transform: lowercase;
  color: rgba(154, 232, 196, 0.8);
  margin-left: 0; /* Supprime toute marge supplémentaire à gauche */
  width: auto; /* Largeur automatique */
  display: block; /* Assure un comportement en bloc */
}



/* --- Carousel 3D (correction boutons + défilement) --- */
.carousel-3d {
  position: relative;
  width: 100%;
  min-height: 80vh; /* Hauteur minimale pour l'image active XXL */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  overflow: visible;
  z-index: 20;
  padding-bottom: 12vh;
}

/* Conteneur pour les boutons (nouveau) */
.carousel-3d-controls {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Conteneur 3D */
.carousel-3d-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 0 auto;
  transform-style: preserve-3d;
}

/* Images (format paysage forcé) */
.carousel-3d-item {
  position: absolute;
  width: 591px;
  height: 315px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.6s ease;
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-3d-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image ACTIVE (XXL) */
.carousel-3d-item.active {
  width: 845px !important;
  height: 450px !important;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Boutons (INTÉGRÉS dans le flux) */
.carousel-3d-prev,
.carousel-3d-next {
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 20;
}

/* Effet glass renforcé au survol pour le 3D */
.carousel-3d-prev:hover,
.carousel-3d-next:hover {
  backdrop-filter: blur(15px) saturate(160%);
}

.carousel-3d-prev {
  left: -17vw;
}

.carousel-3d-next {
  right: -17vw;
}


/* Overlay */
/* Overlay pour les items 3D (centré et cliquable) */
.project-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  color: white;
  padding: 20px;
  text-align: center; /* Texte centré horizontalement */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrage vertical */
  align-items: center; /* Centrage horizontal */
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer; /* Indique que l'overlay est cliquable */
  border-radius: 1px; /* Correspond au border-radius du carousel-3d-item */
}

.carousel-3d-item:hover .project-card-overlay {
  opacity: 1;
}

/* Style pour le texte de l'overlay */
.project-card-overlay h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
  transform: scaleY(1.15);
  color: rgba(154, 232, 196, 1); /* Couleur turquoise pour correspondre à ton thème */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Ombre pour meilleure lisibilité */
}

/* Effet de survol pour indiquer le clic */
.carousel-3d-item:hover {
  cursor: pointer;
}

/* Style pour le lien "voir la catégorie" */
.project-card-overlay p.project-category-link {
  margin: 0px 0 0;
  font-size: 1.2rem;
  color: rgba(154, 232, 196, 1);
  text-transform: lowercase;
  transition: transform 0.2s ease;
}

.project-card-overlay:hover p.project-category-link {
  transform: translateX(5px); /* Animation subtile de la flèche */
}


/* ===== SECTIONS DE PROJETS ===== */
/* Conteneur général pour chaque catégorie de projets */
.project-category {
  position: relative;
  z-index: 25;
  min-height: auto;
  padding: 5vh 0 0; /* Padding vertical seulement (0 horizontal) */
  background: transparent;
  margin-top: 100px;
  border-top: 1px solid rgba(154, 232, 196, 0.2);
  overflow: hidden;
}

/* Conteneur interne pour centrer le contenu (NOUVEAU) */
.project-category-content {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Largeur max pour le contenu centré */
  margin: 0 1.2vw; /* Centrage */
  padding: 0 10vw; /* Padding horizontal uniquement pour le contenu */
  box-sizing: border-box;
}

.project-category h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  text-transform: lowercase;
  color: rgba(154, 232, 196, 0.9);
   text-align: left; /* Aligné à gauche dans le conteneur centré */
  padding-left: 0.5vw;
}

/* --- CAROUSEL PAYSAGE (pleine largeur) --- */
/* Conteneur principal du carousel */
.full-width-carousel-wrapper {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  margin-bottom: 6vh;
  padding: 0;
  box-sizing: border-box;
   border-top:  1px solid rgba(154, 232, 196, 0.2); /* Bordure haute (couleur turquoise, ton thème) */
  border-bottom: 1px solid rgba(154, 232, 196, 0.5); /* Bordure basse */
  
}

/* Carousel lui-même */
.full-width-carousel {
  width: 100vw !important; /* Force la largeur */
  height: 90vh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  padding-bottom: 2vh;
}

/* Conteneur des slides */
.carousel-2d {
  display: flex;
  width: 100vw !important;
  height: 100%;
  transition: transform 0.5s ease;
  
}

/* Slides individuelles */
.carousel-2d-slide {
  min-width: 100vw !important; /* Chaque slide = largeur écran */
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start; /* Alignement précis des slides */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  height: 90vh; /* Hauteur fixe du carousel */
}

/* Images des slides */
.carousel-2d-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Videos des slides */
.carousel-2d-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Pour les images portrait uniquement */
.carousel-2d-slide img[style*="height: 100%"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fond pour les espaces vides (si image portrait) */
.carousel-2d-slide::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15); /* Fond plus sombre (noir à 15% d'opacité) */
  backdrop-filter: blur(4px); /* Flou réduit (8px → 4px) */
  z-index: -1;
  border-top: 1px solid rgba(154, 232, 196, 0.3); /* Bordure turquoise subtile en haut */
  border-bottom: 1px solid rgba(154, 232, 196, 0.3); /* Bordure turquoise subtile en bas */
}

/* Conteneur pour les boutons */
.carousel-2d-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Boutons de navigation */
.carousel-2d-prev,
.carousel-2d-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  pointer-events: auto;
}

.carousel-2d-prev {  left: max(20px, calc((100vw - 100%) / 2)); }
.carousel-2d-next {  right: max(20px, calc((100vw - 100%) / 2)); }


/* --- INFOS PROJET (titre + description) --- */
.project-info {
    margin-top: 20px;
  max-width: 600px;
 
  min-width: 300px;
  position: relative;
  order: 2;
  z-index: 1;
  justify-content: flex-end;
  
}

.project-info h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-transform: none;
  color: rgba(154, 232, 196, 0.95);
}

.project-info p {
  font-family: 'Bodoni Moda', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(154, 232, 196, 0.9);
}

/* --- CAROUSEL PORTRAIT --- */
/* Conteneur flex pour portrait + description */
.portrait-project-container {
  display: flex;
  gap: 20px;
  margin-top: 12vh;
  margin-bottom: 80px;
  align-items: flex-end;
  position: relative;
  min-height: 500px; /* Hauteur minimale pour éviter l'écrasement */
  z-index: 20
}

.portrait-carousel {
  position: relative;
  width: 695px;
  height: 910px; /* Format portrait */
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
  transition: transform 0.5s ease-in-out;
  align-self: flex-start;
  border: 1px solid rgba(154, 232, 196, 0.2); ;
}

/* Conteneur interne pour les slides (NOUVEAU) */
.portrait-carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out; /* Transition fluide */
}

.portrait-carousel .carousel-2d-slide {
  width: 100%;
  height: 100%;
  position: relative;
}
/* Slides individuelles */
.portrait-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Masqué par défaut */
  transition: opacity 0.5s ease-in-out; /* Transition douce */
}

.portrait-carousel-slide.active {
  opacity: 1; /* Slide active visible */
}

.portrait-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.portrait-carousel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Bouton de défilement pour portrait */
.portrait-carousel-next {
  position: relative;
  order: 1; /* Espace après le carousel */
  align-self: center;
  background: rgba(154, 232, 196, 0.5);
  color: white;
  border: none;
  width: 40px;
  flex-shrink: 0;
  top: 60%;
  transform: translateY(-50%);
  margin-right: 20px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 2;
}


.portrait-carousel-next:hover {
  background: rgba(154, 232, 196, 0.8);
}










/* Conteneur principal */
.project-content-wrapper {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  margin-top: 15vh;
  gap: 0;
}

/* Carousel portrait (60%) */
.portrait-carousel-container {
  flex: 1;
  width: 58%;
}


/* Image paysage (50% hauteur) */
.landscape-image-container {
  height: 50%; /* 50% de la hauteur */
  width: 100%;
  border-radius: 1px;
  overflow: hidden;
  border: 1px solid rgba(154, 232, 196, 0.3);
}

.landscape-image-container img,
.landscape-image-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Conteneur pour image + info (40% largeur) */
.landscape-content-wrapper {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Gap entre la vidéo et le project-info */
  height: 910px; /* Même hauteur que le carousel portrait */
  justify-content: space-between; /* Répartition de l'espace */
  align-items: flex-end; /* Alignement à droite */
}

/* Project-info (50% hauteur) */
.landscape-content-wrapper .project-info {
  height: auto; /* Hauteur automatique */
  padding: 20px 0 0 0; /* Padding seulement en haut */
  margin-top: auto; /* Pousse le contenu vers le bas */
  box-sizing: border-box;
  text-align: right;
  align-self: flex-end; /* Alignement à droite */
}




/* Carousel paysage - format 16/9 responsive */
.landscape-carousel-section {
  width: 95%;
  max-width: 1200px;
  margin: 30px auto 0;
}

/* Conteneur du carousel (format 16/9) */
.landscape-carousel-wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16/9 */
  height: 0;
  overflow: hidden;
  border-radius: 1px;
   border: 1px solid rgba(154, 232, 196, 0.2); ;
}

/* Carousel absolu */
.landscape-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Override carousel-2d for landscape */
.landscape-carousel .carousel-2d {
  width: 100% !important;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease;
}

/* Slides du carousel */
.landscape-carousel .carousel-2d-slide {
  min-width: 100% !important;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

/* Médias dans les slides (images et vidéos) */
.landscape-carousel .carousel-2d-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Vidéos 16/9 (ajustement parfait sans bord vide) */
.landscape-carousel .carousel-2d-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
}

/* Conteneur pour masquer les débordements si nécessaire */
.landscape-carousel .carousel-2d-slide::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Boutons du carousel (ajustés pour le format 16/9) */
/* Boutons du carousel paysage - base style */
.landscape-carousel .carousel-2d-buttons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.landscape-carousel .carousel-2d-prev,
.landscape-carousel .carousel-2d-next {
  background: rgba(154, 232, 196, 0.15);
  color: rgba(154, 232, 196, 0.9);
  backdrop-filter: blur(10px);
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
  .landscape-carousel .carousel-2d-buttons {
    left: 0;
    right: 0;
    width: 100%;
  }
  
  .landscape-carousel .carousel-2d-prev {
    left: 10px !important;
  }
  
  .landscape-carousel .carousel-2d-next {
    right: 10px !important;
  }
}

/* Landscape carousel buttons for desktop/laptop (above 1280px) */
@media (min-width: 1281px) {
  .landscape-carousel .carousel-2d-buttons {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }
  
  .landscape-carousel .carousel-2d-prev,
  .landscape-carousel .carousel-2d-next {
    position: absolute !important;
    display: block !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    background: rgba(154, 232, 196, 0.15) !important;
    color: rgba(154, 232, 196, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
  }
  
  .landscape-carousel .carousel-2d-prev:hover,
  .landscape-carousel .carousel-2d-next:hover {
    background: rgba(154, 232, 196, 0.25) !important;
    color: rgba(154, 232, 196, 1) !important;
    transform: translateY(-50%) scale(1.1) !important;
  }
  
  .landscape-carousel .carousel-2d-prev {
    left: 20px !important;
  }
  
  .landscape-carousel .carousel-2d-next {
    right: 20px !important;
  }
}


/* Responsive */
@media (max-width: 768px) {
  .landscape-carousel-wrapper {
    padding-bottom: 56.25%; /* Maintien du ratio 16/9 */
  }


}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .project-media-wrapper {
    gap: 20px;
  }

  .landscape-image-container {
    height: 350px;
    width: 100%;
  }
  
  .landscape-image-container img,
  .landscape-image-container video {
    object-fit: cover;
    object-position: center;
  }

  .project-info-wrapper .project-info {
    margin-top: -30px;
  }
}

@media (max-width: 768px) {
  .project-media-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .portrait-carousel-container,
  .landscape-image-container {
    width: 100%;
  }
  
  .landscape-image-container {
    height: 300px;
  }
  
  .landscape-image-container img,
  .landscape-image-container video {
    object-fit: cover;
    object-position: center;
  }

  .project-info-wrapper {
    justify-content: center;
  }

  .project-info-wrapper .project-info {
    margin-top: 0;
    text-align: left;
  }
}






















/* --- EFFET GLASS POUR TOUS LES BOUTONS DE CAROUSEL --- */
/* Style de base (commun à tous les boutons) */
.carousel-2d-prev,
.carousel-2d-next,
.portrait-carousel-next,
.carousel-3d-prev,
.carousel-3d-next {
  background: rgba(255, 255, 255, 0.05); /* Fond semi-transparent */
  backdrop-filter: blur(12px) saturate(150%); /* Effet flou glass */
  border: 1px solid rgba(154, 232, 196, 0.25); /* Bordure subtile */
  color: rgba(154, 232, 196, 0.75); /* Couleur du texte */
  transition: all 0.3s ease; /* Animation douce */
}
/* Effet au survol (commun) */
.carousel-2d-prev:hover,
.carousel-2d-next:hover,
.portrait-carousel-next:hover,
.carousel-3d-prev:hover,
.carousel-3d-next:hover {
  background: rgba(255, 255, 255, 0.1); /* Fond plus opaque */
  border-color: rgba(154, 232, 196, 0.5);
  color: rgba(154, 232, 196, 1);
}


/* --- SOLUTION DÉFINITIVE POUR ORDRE + ALIGNEMENT DROIT --- */
/* Conteneur pour les catégories alignées à droite */
.portrait-project-container.right-aligned {
  display: flex;
  flex-direction: row-reverse; /* Inverse l'ordre visuel */
  justify-content: flex-start; /* Aligne à gauche du conteneur */
  margin-left: auto; /* Décale à droite */
  margin-right: -35vw; /* Compense les paddings */
  width: calc(100% + 15vw); /* Étend la largeur */
  gap: 15px;
}

/* Réorganisation logique des éléments */
.portrait-project-container.right-aligned .project-info {
  order: 3; /* Infos deviennent le 3ème élément (à gauche) */
  margin-right: 0;
  margin-left: 8vw;
  text-align: right; /* Aligne le texte à droite */
}

.portrait-project-container.right-aligned .project-info h3,
.portrait-project-container.right-aligned .project-info p {
  margin-right: 0; /* Supprime les marges à droite */
  margin-left: auto; /* Décale le texte à droite */
}


.portrait-project-container.right-aligned .portrait-carousel-next {
  order: 2; /* Bouton devient le 2ème élément (au milieu) */
  margin: 0 10px;
}

.portrait-project-container.right-aligned .portrait-carousel {
  order: 1; /* Carousel devient le 1er élément (à droite) */
  margin-right: 0;
}

/* Adaptation pour mobile */
@media (max-width: 768px) {
  .portrait-project-container.right-aligned {
    flex-direction: column;
    margin-right: 0;
    width: 100%;
    align-items: center;
  }
  .portrait-project-container.right-aligned .project-info {
    order: 1;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .portrait-project-container.right-aligned .portrait-carousel-next {
    order: 2;
  }
  .portrait-project-container.right-aligned .portrait-carousel {
    order: 3;
  }
}



/* --- MODALE POUR IMAGES AGRANDIES --- */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent (effet de flou visuel) */
  backdrop-filter: blur(8px); /* Flou réel du contenu en arrière-plan */
  z-index: 1000; /* Au-dessus de tout le reste */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.visible {
  display: flex;
  opacity: 1;
}

.modal-content {
  max-width: 80vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.modal-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain; /* Conserve les proportions */
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-description {
  color: rgba(154, 232, 196, 0.9);
  max-width: 600px;
  text-align: center;
  font-family: 'Bodoni Moda', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  padding: 0 20px;
}

/* Style pour les images cliquables (carousels 2D) */
.landscape-image-container img,
.landscape-image-container video,
.landscape-carousel,
.carousel-2d-slide img,
.portrait-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer; /* Indique que l'image est cliquable */
  transition: transform 0.2s ease;
}

.portrait-carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.landscape-image-container img:hover,
.landscape-image-container video:hover,
.landscape-carousel:hover,
.carousel-2d-slide img:hover,
.portrait-carousel-slide img:hover {
  transform: scale(1.02); /* Légère animation au survol */
}


/* --- BOUTON DE REMONTÉE EN HAUT DE PAGE --- */
/* Style de base (masqué par défaut) */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(154, 232, 196, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(154, 232, 196, 0.5);
  color: rgba(154, 232, 196, 0.8);
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Effet au survol */
.back-to-top:hover {
  background: rgba(154, 232, 196, 0.4);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Bouton visible */
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- HEADER VERTICAL POUR LES PROJETS --- */
/* --- HEADER VERTICAL POUR LES PROJETS --- */
/* Conteneur principal */
/* --- HEADER VERTICAL POUR LES PROJETS (VERSION MODIFIÉE) --- */
/* Conteneur principal - plus large et éloigné du bouton */
.vertical-projects-nav {
  position: fixed;
  top: 7.5vh; /* Éloigné du bouton (60px + 20px de marge) */
  right: 1.1vw; /* Plus éloigné du bord droit */
  width: 5vw; /* Largeur augmentée pour le texte */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 12px; /* Coins légèrement arrondis */
  z-index: 32;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(154, 232, 196, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Liste verticale avec séparateurs */
.vertical-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Étire les éléments sur toute la largeur */
  gap: 0; /* Pas d'écart entre les éléments (remplacé par les bordures) */
  padding: 0;
  margin: 0;
}

/* Éléments de la liste avec bordure inférieure */
.vertical-nav-item {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(154, 232, 196, 0.2); /* Ligne horizontale */
}

/* Dernier élément sans bordure */
.vertical-nav-item:last-child {
  border-bottom: none;
}

/* Liens - ajustés pour la nouvelle largeur */
.vertical-nav-link {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 15px; /* Espacement interne */
  background: transparent; /* Fond transparent */
  color: rgba(154, 232, 196, 0.8);
  font-size: 0.8rem; /* Taille de police ajustée */
  text-decoration: none;
  transition: all 0.3s ease;
  pointer-events: inherit;
  line-height: 1.8;
  letter-spacing: 0.02em;
  transform: scaleY(1.15);
  text-align: right;
  border-radius: 8px; /* Coins arrondis pour les liens */
}

/* Effet au survol des liens */
.vertical-nav-link:hover {
  background: rgba(154, 232, 196, 0.2);
  color: white;
  transform: none; /* Pas de scale pour éviter les débordements */
  box-shadow: inset 0 0 8px rgba(154, 232, 196, 0.3);
}

/* Lien actif */
.vertical-nav-link.active {
  background: rgba(154, 232, 196, 0.3);
  color: white;
  font-weight: 500;
  box-shadow: inset 0 0 12px rgba(154, 232, 196, 0.4);
}

/* État visible */
.vertical-projects-nav.visible {
  opacity: 1;
  pointer-events: auto;
}

/* État masqué */
.vertical-projects-nav.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  overflow: hidden;
}


/* Animation d'apparition/disparition */
.vertical-projects-nav {
  transition: opacity 0.5s ease, height 0.5s ease, padding 0.5s ease;
}

/* Liens actifs (pour la catégorie en cours) */
.vertical-nav-link.active {
  background: rgba(154, 232, 196, 0.4);
  color: white;
  font-weight: 500;
}

/* --- ANIMATION DE SLIDE POUR LES H2 --- */
/* État initial (hors écran à gauche) */
.project-category h2 {
  opacity: 0;
  transform: translateX(-50px); /* Décalage initial à gauche */
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* État visible (quand la section est visible) */
.project-category h2.visible {
  opacity: 1;
  transform: translateX(0); /* Position finale */
}

/* Délai progressif pour chaque h2 (optionnel) */
.project-category:nth-child(1) h2 { transition-delay: 0.1s; }
.project-category:nth-child(2) h2 { transition-delay: 0.2s; }
.project-category:nth-child(3) h2 { transition-delay: 0.3s; }
.project-category:nth-child(4) h2 { transition-delay: 0.4s; }
.project-category:nth-child(5) h2 { transition-delay: 0.5s; }


/* --- RESPONSIVE --- */

/* Large desktop screens */
@media (min-width: 1600px) {
  .project-content-wrapper {
    max-width: 1600px;
    gap: 0;
  }
  
  .portrait-carousel {
    width: 795px;
    height: 1040px;
  }
  
  .landscape-content-wrapper {
    height: 1040px;
  }
  
  .landscape-carousel-section {
    max-width: 1600px;
  }
  
  .project-category-content {
    padding: 0 8vw;
  }
}

@media (min-width: 1441px) and (max-width: 1599px) {
  .project-content-wrapper {
    max-width: 1400px;
    gap: 0;
  }
  
  .portrait-carousel {
    width: 745px;
    height: 980px;
  }
  
  .landscape-content-wrapper {
    height: 980px;
  }
  
  .landscape-carousel-section {
    max-width: 1400px;
  }
  
  .project-category-content {
    padding: 0 9vw;
  }
}

/* Smaller desktop/laptop screens */
@media (max-width: 1366px) and (min-width: 1281px) {
  .vertical-projects-nav {
    width: 6vw;
    right: 1vw;
    top: 8vh;
    border-radius: 10px;
  }
  
  .vertical-nav-link {
    padding: 7px 12px;
    font-size: 0.95rem;
    border-radius: 6px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    transform: scaleY(1.15);
  }
}

/* Tablet landscape and smaller laptops */
@media (max-width: 1280px) and (min-width: 769px) {
  /* Vertical nav */
  .vertical-projects-nav {
    width: 7vw;
    right: 0.8vw;
    top: 8.5vh;
    border-radius: 10px;
  }
  
  .vertical-nav-link {
    padding: 6px 10px;
    font-size: 0.85rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    transform: scaleY(1.15);
    border-radius: 6px;
  }
  
  /* Page title - more space */
  .page-title {
    padding-top: 12vh;
    padding-bottom: 3vh;
  }
  
  /* 3D Carousel - Tablet */
  .carousel-3d {
    min-height: 65vh;
    padding-bottom: 10vh;
    padding-top: 5vh;
  }
  
  .carousel-3d-container {
    max-width: 90%;
    height: 320px;
  }
  
  .carousel-3d-item {
    width: 550px;
    height: 290px;
  }
  
  .carousel-3d-item.active {
    width: 730px !important;
    height: 390px !important;
  }
  
  /* 3D Carousel buttons */
  .carousel-3d-prev,
  .carousel-3d-next {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.4rem !important;
    z-index: 100 !important;
  }
  
  /* Portrait carousel - Tablet */
  .portrait-carousel {
    width: 600px;
    height: 800px;
  }
  
  /* Portrait project container */
  .portrait-project-container {
    gap: 20px;
    margin-top: 10vh;
    margin-bottom: 60px;
    padding: 0 3rem;
  }
  
  /* Right-aligned containers - fix overflow */
  .portrait-project-container.right-aligned {
    margin-right: 0;
    width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  .portrait-project-container.right-aligned .project-info {
    margin-left: 2vw;
  }
  
  /* Project content wrapper with margins */
  .project-content-wrapper {
    padding: 0 3rem;
    margin-top: 12vh;
    max-width: 100%;
    gap: 0;
  }
  
  /* Landscape content wrapper */
  .landscape-content-wrapper {
    height: 800px;
  }
  
  /* Portrait carousel container */
  .portrait-carousel-container {
    width: calc(58% - 4px);
  }
  
  .landscape-image-container {
    height: 50%;
    width: 100%;
  }
  
  .landscape-image-container img,
  .landscape-image-container video {
    object-fit: cover;
    object-position: center;
  }
  
  /* Project info */
  .project-info {
    max-width: 350px;
    min-width: 200px;
  }
  
  .project-info h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  
  .project-info p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  /* Landscape carousel - Tablet */
  .landscape-carousel-section {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 3rem;
    box-sizing: border-box;
  }
  
  /* Landscape carousel wrapper */
  .landscape-carousel-wrapper {
    position: relative;
  }
  
  /* Landscape carousel */
  .landscape-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Landscape carousel buttons - ensure visibility */
  .landscape-carousel .carousel-2d-buttons {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100 !important;
    pointer-events: none !important;
  }
  
  .landscape-carousel .carousel-2d-prev,
  .landscape-carousel .carousel-2d-next {
    position: absolute !important;
    display: block !important;
    pointer-events: auto !important;
    z-index: 100 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 1.4rem !important;
  }
  
  .landscape-carousel .carousel-2d-prev {
    left: 15px !important;
  }
  
  .landscape-carousel .carousel-2d-next {
    right: 15px !important;
  }
  
  /* Full width carousel */
  .full-width-carousel {
    height: 85vh;
  }
  
  /* Project media wrapper */
  .project-media-wrapper {
    gap: 20px;
    padding: 0 3rem;
  }
  
  /* Carousel 2D buttons */
  .carousel-2d-prev,
  .carousel-2d-next {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
    z-index: 10;
  }
  
  /* Project category content */
  .project-category-content {
    padding: 0 3rem;
  }
}

@media (max-width: 768px) {
  .portrait-project-container {
    flex-direction: column;
  }

  .portrait-carousel {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px;
  }

  .portrait-carousel-next {
    right: 10px;
  }

  .full-width-carousel {
    height: 50vh; /* Réduction pour mobile */
  }
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE VERSION
   ============================================ */

@media (max-width: 768px) {
  /* Header */
  .main-header {
    width: 90vw;
    padding: 0.5rem 1.5rem;
  }
  
  .main-header.reduced {
    width: 50px !important;
    padding: 0.5rem !important;
  }
  
  .main-header.reduced::before {
    font-size: 1.3rem;
  }
  
  .header-nav {
    gap: 4vw;
  }
  
  .header-nav a {
    font-size: 1rem;
  }
  
  /* Page title */
  .page-title {
    padding-left: 1.5rem;
    padding-top: 10vh;
    min-height: auto;
  }
  
  .page-title h1 {
    font-size: 2.5rem;
  }
  
  /* 3D Carousel */
  .carousel-3d {
    min-height: 45vh;
    padding-bottom: 8vh;
  }
  
  .carousel-3d-container {
    max-width: 100%;
    height: 180px;
  }
  
  .carousel-3d-item {
    width: 260px;
    height: 140px;
  }
  
  .carousel-3d-item.active {
    width: 300px !important;
    height: 170px !important;
  }
  
  .carousel-3d-prev,
  .carousel-3d-next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    top: 50%;
  }
  
  .carousel-3d-prev {
    left: 5px;
  }
  
  .carousel-3d-next {
    right: 5px;
  }
  
  /* Overlay - visible by default on tablet/mobile */
  .project-card-overlay {
    opacity: 1;
  }
  
  .project-card-overlay h3 {
    font-size: 2rem;
  }
  
  .project-card-overlay p.project-category-link {
    font-size: 1rem;
  }
  
  /* Project category */
  .project-category {
    margin-top: 60px;
    padding: 3vh 0 0;
  }
  
  .project-category-content {
    padding: 0 1.5rem;
    margin: 0;
  }
  
  .project-category h2 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    padding-left: 0;
  }
  
  /* Full width carousel */
  .full-width-carousel-wrapper {
    margin-bottom: 4vh;
  }
  
  .full-width-carousel {
    height: 40vh;
  }
  
  .carousel-2d-slide {
    min-width: 100vw !important;
    height: 40vh;
  }
  
  .carousel-2d-prev,
  .carousel-2d-next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  /* Portrait project */
  .portrait-project-container {
    flex-direction: column;
    align-items: center;
    margin-top: 6vh;
    margin-bottom: 50px;
    min-height: auto;
    gap: 20px;
    padding: 0 0.5rem;
  }
  
  .portrait-carousel {
    width: 100%;
    max-width: 320px;
    height: 420px;
    margin: 0 auto;
  }
  
  .portrait-carousel-next {
    position: relative;
    order: 2;
    top: auto;
    transform: none;
    margin: 15px auto;
    align-self: center;
  }
  
  .project-info {
    order: 3;
    max-width: 100%;
    min-width: auto;
    text-align: left;
    padding: 0 1rem;
  }
  
  .portrait-project-container .project-info {
    max-width: 80%;
  }
  
  .project-info h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  
  .project-info p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  /* Right aligned projects */
  .portrait-project-container.right-aligned {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  
  .portrait-project-container.right-aligned .project-info {
    margin-left: 0;
    text-align: left;
    order: 1;
  }
  
  .portrait-project-container.right-aligned .portrait-carousel-next {
    order: 2;
  }
  
  .portrait-project-container.right-aligned .portrait-carousel {
    order: 3;
  }
  
  /* Content wrapper */
  .project-content-wrapper {
    flex-direction: column;
    margin-top: 5vh;
    gap: 20px;
    padding: 0 1.5rem;
  }
  
  .portrait-carousel-container {
    width: 100%;
  }
  
  .landscape-content-wrapper {
    flex: none;
    width: 100%;
    height: auto;
    gap: 20px;
    align-items: flex-start;
  }
  
  .landscape-image-container {
    height: 200px;
    width: 100%;
  }
  
  .landscape-image-container img,
  .landscape-image-container video {
    object-fit: cover;
    object-position: center;
  }
  
  .landscape-content-wrapper .project-info {
    text-align: left;
    padding: 15px 0;
    margin-top: 0;
  }
  
  /* Landscape carousel */
  .landscape-carousel-section {
    width: 100%;
    margin: 20px auto 0;
  }
  
  /* Vertical nav - converted to horizontal on mobile */
  .vertical-projects-nav {
    position: fixed;
    top: 2vh;
    left: 1rem;
    transform: none;
    right: auto;
    width: calc(100vw - 100px);
    max-width: none;
    opacity: 1;
    pointer-events: auto;
    border-radius: 50px;
    padding: 0.5rem 1rem;
    height: auto;
    transition: opacity 0.3s ease;
  }
  
  .vertical-nav-list {
    flex-direction: row;
    justify-content: space-between;
    overflow-x: auto;
    gap: 0;
  }
  
  .vertical-nav-item {
    border-bottom: none;
    border-right: 1px solid rgba(154, 232, 196, 0.2);
    flex: 1;
    min-width: fit-content;
  }
  
  .vertical-nav-item:last-child {
    border-right: none;
  }
  
  .vertical-nav-link {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
  }
  
  /* Modal */
  .modal-content {
    max-width: 95vw;
    max-height: 90vh;
  }
  
  .modal-image {
    max-height: 50vh;
  }
  
  .modal-description {
    font-size: 1rem;
    padding: 0 10px;
  }
  
  /* Back to top */
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
    font-size: 1.3rem;
  }
}

/* --- SMALL MOBILE (max 480px) --- */
@media (max-width: 480px) {
  /* Header */
  .main-header {
    width: 95vw;
    padding: 0.4rem 1rem;
  }
  
  .header-nav a {
    font-size: 0.75rem;
    line-height: 1.6;
  }
  
  /* Page title */
  .page-title {
    padding-left: 1rem;
    padding-top: 8vh;
  }
  
  .page-title h1 {
    font-size: 2rem;
  }
  
  /* Vertical nav on small mobile */
  .vertical-projects-nav {
    top: 2vh;
    left: 0.5rem;
    width: calc(100vw - 80px);
    padding: 0.4rem 0.8rem;
    transition: opacity 0.3s ease;
  }
  
  .vertical-nav-link {
    padding: 0.25rem 0.6rem;
    font-size: 0.6rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    transform: scaleY(1.15);
  }
  
  /* 3D Carousel */
  .carousel-3d {
    min-height: 38vh;
    padding-bottom: 6vh;
  }
  
  .carousel-3d-container {
    height: 150px;
  }
  
  .carousel-3d-item {
    width: 200px;
    height: 110px;
  }
  
  .carousel-3d-item.active {
    width: 240px !important;
    height: 135px !important;
  }
  
  .carousel-3d-prev,
  .carousel-3d-next {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  
  /* Overlay - visible by default on small mobile */
  .project-card-overlay {
    opacity: 1;
  }
  
  .project-card-overlay h3 {
    font-size: 1rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    transform: scaleY(1.15);
  }
  
  .project-card-overlay p.project-category-link {
    font-size: 0.65rem;
  }
  
  /* Project category */
  .project-category {
    margin-top: 40px;
  }
  
  .project-category-content {
    padding: 0 1rem;
  }
  
  .project-category h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    margin-left: 1rem;
  }
  
  /* Full width carousel */
  .full-width-carousel {
    height: 32vh;
  }
  
  .carousel-2d-slide {
    height: 32vh;
  }
  
  .carousel-2d-prev,
  .carousel-2d-next {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  
  /* Portrait project */
  .portrait-project-container {
    margin-top: 4vh;
    margin-bottom: 40px;
    padding: 0 0.5rem;
  }
  
  .portrait-carousel {
    max-width: 100%;
    height: 360px;
  }
  
  .project-info h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  
  .project-info p {
    font-size: 0.85rem;
  }
  
  .portrait-project-container .project-info {
    padding: 0 0.5rem;
    max-width: 85%;
  }
  
  /* Content wrapper */
  .project-content-wrapper {
    margin-top: 3vh;
    padding: 0 1rem;
  }
  
  .landscape-image-container {
    height: 170px;
  }
  
  /* Modal */
  .modal-image {
    max-height: 45vh;
  }
  
  .modal-description {
    font-size: 0.9rem;
  }
  
  /* Back to top */
  .back-to-top {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
    font-size: 1.1rem;
  }
}