/* Sections de la page d'accueil */
#home-s1,
#home-s2{
  height: var(--section-height);
  scroll-snap-align: start;
  box-sizing: border-box;
  overflow: hidden;
}

/* Bloc de presentation */
#home-s1{
  display: grid;
  grid-template-columns: minmax(220px, 380px) minmax(280px, 520px);
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: clamp(24px, 4vw, 48px);
  background-color: var(--violet-fonce);
  padding: var(--topbar-offset) var(--section-pad-x) var(--section-safe-bottom);
}

.home-photo{
  width: clamp(220px, 28vw, 380px);
}

.home-text h1,
.home-text h2,
.home-text p{
  color: var(--blanc);
}

.home-text p span{
  font-weight: var(--h-weight);
}

/* Bloc projets et carrousel */
#home-s2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  gap: 32px;
  padding: var(--topbar-offset) 0 var(--section-safe-bottom);
}

#home-s2 h2{
  text-align: left;
  color: var(--vert);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

@keyframes carousel-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.carousel{
  --slide-height: auto;
  --slide-gap: 24px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(var(--sidebar-width) + 24px);
  padding-right: 24px;
}

.carousel-shell{
  position: relative;
}

.carousel-track{
  display: flex;
  gap: var(--slide-gap);
  width: max-content;
  animation: carousel-scroll 60s linear infinite;
}

.carousel.is-js-carousel .carousel-track{
  animation: none;
}

.carousel-slide{
  flex: 0 0 36.36vw;
  max-width: 420px;
  min-width: 220px;
  height: var(--slide-height);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.project-image{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  background: none;
}

.project-image-placeholder{
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(28, 26, 53, 0.72), rgba(28, 26, 53, 0.72)),
    radial-gradient(circle at top left, rgba(203, 210, 122, 0.7), transparent 45%),
    var(--violet-clair);
  color: var(--blanc);
}

.project-image-placeholder span{
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(79,84,135,0.4);
  background: rgba(244,244,244,0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.carousel-btn img{
  width: 22px;
  height: 22px;
}

.carousel-btn-prev{
  left: calc(var(--sidebar-width) + 24px);
}

.carousel-btn-prev img{
  transform: rotate(180deg);
}

.carousel-btn-next{
  right: 24px;
}

/* Ajustements accueil sur tablette */
@media (min-width: 1001px) and (max-width: 1500px){
  #home-s2 h2{
    padding-left: var(--content-pad-left);
    padding-right: 48px;
  }

  .carousel{
    padding-left: var(--content-pad-left);
    padding-right: 48px;
  }

  .carousel-btn-prev{
    left: var(--content-pad-left);
  }

  .carousel-btn-next{
    right: 48px;
  }
}

/* Ajustements accueil sur mobile */
@media (max-width: 1000px){
  #home-s1{
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: 28px;
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
  }

  .home-photo{
    width: clamp(180px, 52vw, 300px);
  }

  .home-text{
    width: min(100%, 420px);
    margin: 0 auto;
    text-align: left;
  }

  .carousel{
    padding-left: 24px;
  }

  .carousel-btn-prev{
    left: 24px;
  }

  .carousel-btn{
    width: 44px;
    height: 44px;
  }

  .carousel-btn img{
    width: 18px;
    height: 18px;
  }
}