@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/*GLOBAL*/
* {

  --body-font : "Montserrat", sans-serif;
  --color-body-text: "rgb(222, 221, 201)";

  /*Hide scrollbar*/
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background: rgb(04, 14, 02); 

  font-family: var(--body-font);
}

/* ✅ Scroll natif pour mobile */
@media screen and (max-width: 625px) {
  html, body {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

    header {
        display: flex;
        width: 100%;
        margin: 1rem 0;
        padding: 0 1rem;
        justify-content: space-between;

        position: fixed;
        top: 0;
        left: 0;
  
        z-index: 10;
    }
.header-logo{
    display: flex;
    width: auto;
    height: auto;
    margin: 0 1.5rem;

  perspective: 800px; /* plus la valeur est petite, plus le tilt semble prononcé */
  transform-style: preserve-3d;
}



.header-nav {
  width: 100%;
  max-width: 100%;
  list-style: none;
  padding-right: 4.5rem;
  margin-top: .5rem;
  display: flex;
  gap: 20px;
  justify-content: flex-end; 
}


.nav-item {
     text-decoration: none;
     color: rgb(222, 221, 201);
     font-size: 1.2rem;
     letter-spacing: 2px;
     width: 120px;
}

.nav-item.active {
  margin-right: auto; /* pousse celui-ci à gauche */
  font-weight: 700;

}

#intro-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgb(04, 14, 02);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  position: relative;
}

.loader-content svg {
  width: 120px;
  height: 120px;
  animation: loader-spin 2s linear infinite;
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes typewriter {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: rgb(222, 221, 201); }
}

@keyframes fade-in-out {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.loader-name {
  font-size: 2.5rem;
  font-weight: 300;
  font-family: var(--body-font);
  color: rgb(222, 221, 201);
  letter-spacing: 8px;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid rgb(222, 221, 201);
  width: 0;
  animation: typewriter 2s steps(13) forwards, blink-caret 0.75s step-end infinite;
}

.loading-text {
  margin-top: 3rem;
  font-size: 0.9rem;
  font-weight: 300;
  font-family: var(--body-font);
  color: rgb(222, 221, 201);
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: fade-in-out 1.5s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

.loader-content img {
  width: 250px;
  height: 250px;
  margin: 2rem 0;
}

.enter-btn {
  padding: 0.8rem 2.5rem;
  font-size: 1rem;
  font-weight: 300;
  font-family: var(--body-font);
  color: rgb(222, 221, 201);
  background: transparent;
  border: 2px solid rgb(222, 221, 201);
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 4px;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.enter-btn:hover {
  background: rgb(222, 221, 201);
  color: rgb(4, 14, 2);
}

.enter-btn:active {
  transform: scale(0.95);
}

.enter-btn:hover {
  background: rgb(222, 221, 201);
  color: rgb(4, 14, 2);
}

.enter-btn:active {
  transform: scale(0.95);
}


section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.title-section {
  z-index: 10;
  position: absolute;
  top: 8%;
  font-size: 2.5rem;
  color: rgb(243, 247, 231);
  transition: left 0.3s ease-out;
}

.video-production .title-section{
  left: 2%;
}
.documentary.title-section {
  left: 15%;
}
.photomontage.title-section {
  left: 40%;
}

.photography.title-section {
  left: 55%;
}

.swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}

.swiper-slide {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide > video {
  width: 100vw;
  height: 100vh;
  display: block;
}

.swiper-slide > video {
  pointer-events: none;
}

/* ✅ Exception : les vidéos lignes-brandt doivent être interactives */
.lignes-brandt .video-container.video-lignes video {
  pointer-events: auto !important;
  cursor: pointer;
}

/* ✅ Force la suppression des contrôles vidéo sur mobile */
video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-enclosure {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}
video::-webkit-media-controls-play-button {
  display: none !important;
}
video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Optimisation des performances pour les animations GSAP - will-change supprimé pour économiser la mémoire */
.content-title,
.title-section {
  transform: translateZ(0);
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 2px solid rgb(235, 141, 0);
    border-radius: 50%;
    opacity: 1;
    transition: all 0.3s ease;
}
.swiper-pagination-bullet-active{
    border: 2px solid rgb(235, 141, 0);
    background-color: rgb(04, 14, 02) !important;
    border-radius: 5px; 
    opacity: 1;
    transition: all 0.3s ease;
}

.content-title {
  z-index: 10;
  position: absolute;
  bottom: 20%;
  margin: 0rem 1rem;
  display: flex;
  width: 100%;

  color: rgb(243, 247, 231);
  font-size: 3rem;
  font-weight: 800;
}

@media screen and (max-width:625px){

  .loader-name {
    font-size: 1.8rem;
    letter-spacing: 5px;
  }

  .loader-content img {
    width: 200px;
    height: 200px;
    margin: 1.5rem 0;
  }

  .enter-btn {
    font-size: 0.9rem;
    padding: 0.7rem 2rem;
  }

  /* ✅ Titres toujours visibles sur mobile */
  .title-section,
  .content-title {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  header {
    display: flex;
    width: 90%;
    max-width: 100ù;
    margin: 1rem 0;
    padding: 0 0.5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    }

  .header-logo{
    display: flex;
    width: auto;
    height: auto;
    margin: 0 .5rem;
    perspective: 800px; /* plus la valeur est petite, plus le tilt semble prononcé */
    transform-style: preserve-3d;
  }

  .header-nav {
    width: 100%;
    list-style: none;
    display: flex;
    gap: 10px;
    justify-content: flex-end; 
    padding-right: .5rem;
    margin-top: 1rem;
  }
  .header-nav a {
    text-decoration: none;
    color: rgb(222, 221, 201);
    font-size: .9rem;
  }

  .nav-item {
    width: 90px;
  }




  section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
  }

  .title-section {
    z-index: 10;
    position: absolute;
    top: 15%;
    font-size: 1.2rem;
    color: rgb(243, 247, 231);
    transition: left 0.3s ease-out;
  }


  .swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
  }

  .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 2.5s;
  }

  .video-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiper-slide > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .swiper-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .swiper-slide > video {
    pointer-events: none;
  }

  .content-title {
    z-index: 1000;
    position: absolute;
    bottom: 15%;
    margin: 0rem 1rem;
    display: flex;
    width: 100%;

    color: rgb(243, 247, 231);
    font-size: 1.7rem;
    font-weight: 800;
  }
}


/*VIDEO_PRODUCTION*/
.video-production .swiper-slide > video {
  object-fit: cover;
}

.video-production .format-bigo,
.documentary .format-bigo {
  display: none;
}
@media screen and (max-width:625px){
  .video-production .format-ordi,
  .documentary .format-ordi {
    display: none;
  }
 .format-bigo{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    background: #000;
    display: block;
    margin: 0 auto;
  }
}

/*DOCUMENTARY*/

.documentary .swiper-slide > video {
  object-fit: cover;
}
.documentary .title-section h1 {
  left: 20%;
}


/*PHOTO-MONTAGE*/
.first-montage {
  display: flex;
  justify-content: space-around;
  align-items: center;  
  width: 100%;
  height: auto;
 
}

.first-montage video,
.first-montage.desktop-only video {
  display: block;
  width: 30vw;
}

.content-title.first-montage.desktop-only {
  display: flex;
  max-width: 90%;
  justify-content: flex-end;
}
.content-title.mobile-only {
  display: none;
}
.photo-montage .swiper-slide > video{
  object-fit: contain;
}

.lignes-brandt {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
    height: 100%;
    background: transparent;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 0;
  }
  .lignes-brandt .content-title {
    left: 5%;
    bottom: 7%;
  }
  .ordi-part1,
  .ordi-part2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }
  .lignes-brandt .video-container.video-lignes {
    width: 45vw;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
  }
  .lignes-brandt .video-container.video-lignes video {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
  }

 
  @media screen and (max-width:1100px) {

.video-production .format-bigo,
.documentary .format-bigo {
  display: block;
}
    .desktop-only {
      display: none !important;
    }
      .first-montage {
      display: flex;
      justify-content: center;
      align-items: center;  
      width: 100%;
      height: 100%;
      object-fit: cover;
    
    }
    .first-montage video.desktop-only  {
      display: none !important;
    }

    .first-montage video,
    .first-montage.desktop-only video {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
}
    .content-title.first-montage.desktop-only {
      display: none !important;
    }

    .ordi-part2{
      display: none;
    }

    .lignes-brandt{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: transparent;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .ordi-part1 {
    flex-direction: column;
  }
  .lignes-brandt .video-container.video-lignes {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 50%;
    object-fit: cover;
    border-radius: 8px;
    background: #000;
    margin: 0;
    flex-shrink: 0;
  }
  .lignes-brandt .video-container.video-lignes video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  


  }

  /*PHOTOGRAPHY */

  .photo-section {
    margin-top: 5rem;
   
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .photo-group1,
  .photo-group2,
  .photo-group3,
  .photo-group4 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.5rem;
  }
   .photo-group1,
   .photo-group4 {
    justify-content: center;
    gap: 10vh;
   }
   .photo-group2,
   .photo-group3 {
    justify-content: center;
    gap: 3vh;
   }



  
   .photo-album{
    position: relative;
    display: flex;
    border-radius : 5px;
    transition: transform 0.5s ease, box-shadow 0.5s ease, border 0.5s ease, filter 0.6s ease, opacity 0.6s ease;
  }

  .photo-group1 .photo-album,
  .photo-group4 .photo-album{
    width: 25vw;
    height: auto;
    justify-content: center;
    gap: 10vh;
   }

  .photo-group2 .photo-album,
  .photo-group3 .photo-album{
    width: 20vw;
    height: auto;
    justify-content: center;
    gap: 10vh;
   }
   .photo-album > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .photo-album > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .photo-group1 .photo-album:hover,
  .photo-group4 .photo-album:hover {
    transform : scale(0.87);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   
  }
  .photo-group2 .photo-album:hover,
  .photo-group3 .photo-album:hover {
    transform : scale(1.13);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   
  }

    .photo-album-border {
    border: solid transparent 2px;
    transition: border 0.5s ease;
  }


  .photo-group2 .photo-album:first-child,
  .photo-group3 .photo-album:first-child {
    margin-top: 10%;
  }
   .photo-group2 .photo-album:last-child,
   .photo-group3 .photo-album:last-child {
    margin-bottom: 10%;
  }

 

  .photo-album h2 {
    position: absolute;
    bottom: 0;
    left: 5%;
    font-size: 1.2rem;
    color: indianred;
    padding: 5px;
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .photo-album:hover h2 {
    opacity: 1;
    transform: translateX(0);
    background-color: aliceblue;
  }

  @media screen and (max-width: 1300px) {
 
   .photo-group2 .photo-album:first-child,
  .photo-group3 .photo-album:first-child {
    margin-top: 0%;
  }
   .photo-group2 .photo-album:last-child,
   .photo-group3 .photo-album:last-child {
    margin-bottom: 0%;
  }

  }
@media screen and (max-width: 1000px) {
    
 .photo-section {
    margin-top: 7rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .photo-group1,
  .photo-group2,
  .photo-group3,
  .photo-group4 {
    width: fit-content;
    height: fit-content;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    margin-bottom: 0;
    gap: 7vh;
  }
  .photo-group1 .photo-album,
  .photo-group2 .photo-album,
  .photo-group3 .photo-album,
  .photo-group4 .photo-album{
    width: 35vw;
    height: auto;
    justify-content: center;
    margin-bottom: 1vh;
   }

  .photo-album h2 {
    position: absolute;
    bottom: 0;
    right: 5%;
    font-size: .8rem;
    color:  rgb(222, 221, 201);
    padding: 5px;
    opacity: 1;
    transform: none;
    background-color: transparent;
    transition: none;
  }

  .photo-album:hover h2 {
    opacity: 1 !important;
    transform: none !important;
    background-color: transparent !important;
  }

  .photo-alubm h2:last-child{
    position: absolute;
    right: 0;
    top: 25%;
    left: 25%;
  }

  }
@media screen and (max-width: 700px) {
  .photography .title-section {
    top : 8%;
    left: 44%;
  }
  .photo-section {
    margin-top: 5rem;
  }
  .photo-group1,
  .photo-group2,
  .photo-group3,
  .photo-group4 {
    width: fit-content;
    height: fit-content;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    margin-bottom: 0;
    gap: 2vh;
  }
  .photo-group1 .photo-album,
  .photo-group2 .photo-album,
  .photo-group3 .photo-album,
  .photo-group4 .photo-album{
    width: 45vw;
    height: auto;
    justify-content: center;
    margin-bottom: 1vh;
   }
  }

/* ============================
   SUBMENU MOBILE UNIQUEMENT
   ============================ */
.submenu-mobile {
  display: none; /* Caché par défaut sur desktop */
}

@media screen and (max-width: 625px) {
  .submenu-mobile {
    display: block;
    position: absolute;
    top: 19%;
    right: 2%;
    z-index: 100;
    padding: 0.8rem;
  }

  .submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .submenu-element a {
    text-decoration: none;
    color: rgb(222, 221, 201);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.8rem;
    display: block;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .submenu-element:hover a,
  .submenu-element.active a {
    border-color: rgb(228, 185, 120);
    background: rgba(235, 141, 0, 0.15);
    color: rgb(211, 139, 30);
  }
}