/* Layout - Hybride (Début Horizontal, Fin Verticale) */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
}

/* --------------------------------------------------------------------------
   Le Grand Wrapper Horizontal (Scroll-jacking)
   -------------------------------------------------------------------------- */
.horizontal-wrapper {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--color-gray);
}

.horizontal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden; /* Cache ce qui dépasse à droite */
}

.horizontal-track {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: max-content; /* S'étire pour contenir toutes les sections */
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Sections Standards dans le Track Horizontal
   -------------------------------------------------------------------------- */
.section {
  flex: 0 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border-right: 1px solid var(--color-gray);
  padding: 60px var(--space-xl) 0 var(--space-xl);
}

/* Retrait de la bordure droite pour la dernière section horizontale */
.horizontal-track .section:last-child {
  border-right: none;
}

/* --------------------------------------------------------------------------
   Largeurs Spécifiques pour l'expérience horizontale
   -------------------------------------------------------------------------- */
.section--hero {
  width: 100vw;
  padding: 0;
}

.section--showreel {
  width: 100vw;
}

.section--portfolio {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  width: max-content; /* S'adapte au nombre de cartes */
}

.section--about {
  width: 100vw;
}

.section--services {
  width: 100vw;
}

/* --------------------------------------------------------------------------
   Section Verticale Finale (Contact)
   -------------------------------------------------------------------------- */
.section--contact {
  width: 100%;
  height: 100vh;
  border-right: none;
  padding: var(--space-xl) var(--space-md);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Mobile Fallback: On empile tout verticalement
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .horizontal-wrapper {
    height: auto !important; /* Désactive la hauteur pour le scroll */
  }
  
  .horizontal-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }
  
  .horizontal-track {
    flex-direction: column;
    height: auto;
    width: 100%;
    transform: none !important; /* Désactive la translation JS */
  }
  
  .section {
    width: 100% !important;
    height: auto;
    min-height: 100vh;
    border-right: none;
    border-bottom: 1px solid var(--color-gray);
    padding: var(--space-xl) var(--space-md);
  }
}