*, *::before, *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
html, body {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

main {
  scroll-snap-align: start;
}
main,
main * {
    overflow-y: hidden;
}
/*main{
  margin-bottom: 150px;
}*/
html {
  scroll-behavior: smooth;
  text-align: justify;
}
/* Animation pour toutes les sections */
.section-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.section-animate.show {
  opacity: 1;
  transform: translateY(0);
}

html{
    font-size: 16px;
}
body{
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    line-height: 1.625;
    overflow-x: hidden;
    color: rgb(66, 66, 66);
}

h2{
    font-size: 45px;
    line-height: 1.2;
    text-transform: capitalize;
    color: #fff;
}
p{
    margin: 18px 0;
    line-height: 1.7rem;
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* Classe appliquée quand l'élément entre dans le viewport */
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.fade-up.delay-1 { transition-delay: 0.2s; }
.fade-up.delay-2 { transition-delay: 0.4s; }
.fade-up.delay-3 { transition-delay: 0.6s; }
.fade-up.delay-4 { transition-delay: 0.8s; }
.fade-up.delay-5 { transition-delay: 1s; }

.carousel,
.carousel *{
  overflow-x: visible;
}
.carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  margin-bottom: 100px;
}

.carousel-window {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s ease;
}

.carousel-item {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* === EN-TÊTE BLEUE === */
.project-header {
  background-color: #007ca8;
  color: white;
  padding: 20px;
}

.project-header h2 {
  margin: 0;
  font-size: 1.8rem;
}

.project-header h3 {
  margin: 5px 0 0;
  font-weight: 400;
}

/* === CORPS DU PROJET === */
.project-body {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  gap: 20px;
}

/* Missions à gauche */
.missions {
  flex: 1 1 300px;
  border: 1px solid #007ca8;
  padding: 15px;
  background: #f7fafd;
}

.missions h4 {
  color: #007ca8;
  margin-bottom: 10px;
}

.missions ul {
  margin: 0;
  padding-left: 20px;
  color: #154785;
}

/* Images à droite */
.project-images {
  flex: 2 1 600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.project-images img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 4px;
}

/* === BOUTONS === */
button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

button.prev:hover, button.next:hover {
  background: rgba(0,0,0,0.8);
}

button.prev { left: 15px; }
button.next { right: 15px; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .project-body {
    flex-direction: column;
  }

  .project-images {
    grid-template-columns: 1fr;
  }
}

footer{
    width: 100%;
    text-align: center;
    background-color: #007ca8;
    padding: 20px 0;
    font-size: 1rem;
    color: aliceblue;
}
.coll{
    font-weight: 600;
}

footer a{
  color: #fff;
}