*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a1120; font-family:'Poppins',sans-serif; color:#fff}
header{text-align:center; padding:25px 15px; background:linear-gradient(90deg,#008751 33%,#ce1126 33% 66%,#facc15 66%)}
.logo{width:110px; background:#fff; border-radius:15px; padding:6px}
header h1{font-family:'Limelight'; font-size:32px}

/* --- MENU --- */
#main-menu{display:flex; justify-content:center; padding:40px 15px}
#main-menu ul{width:980px; height:500px; display:flex; gap:4px; list-style:none}
#main-menu ul li{
  width:140px; height:500px; overflow:hidden; position:relative; flex-shrink:0; border-radius:12px;
  /* TON IMAGE DE FOND DECORATIVE */
  background-image:url('images/background.jpg'); /* renomme ton image comme ça */
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-color:#d9d9d9;
}

/* --- COHERENCE : les 2 images au même endroit, même taille --- */
.images{
  position:absolute;
  /* On les cale dans la zone grise du milieu de ton décor */
  top:72px; /* hauteur de ta bande étoiles du haut */
  left:0;
  width:140px;
  height:356px; /* 500 - 72 (haut) - 72 (bas) = zone grise */
  overflow:hidden;
}
.bw, .color{
  position:absolute;
  top:0; left:0;
  width:140px; height:356px; /* même taille */
  background-size:700px 356px; /* cohérence totale */
  background-repeat:no-repeat;
  transition:left 0.5s cubic-bezier(0.77,0,0.175,1);
}
.bw{
  background-image:url('images/gris.jpg');
  filter:grayscale(100%);
  left:0; z-index:2;
}
.color{
  background-image:url('images/claire.jpg');
  left:140px; z-index:3; /* cachée */
}

#part1 div{background-position:0 -72px}
#part2 div{background-position:-140px -72px}
#part3 div{background-position:-280px -72px}
#part4 div{background-position:-420px -72px}
#part5 div{background-position:-560px -72px}

/* Description */
.description{
  position:absolute; left:140px; top:72px;
  width:240px; height:356px; padding:15px;
  background:rgba(255,255,255,0.95); color:#111;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  opacity:0; transition:opacity 0.3s;
}
#main-menu ul li:hover .description{opacity:1}
.description h2{font-family:'Limelight'; font-size:22px}
.description h3{margin-top:12px; padding:6px; background:#008751; color:#fff; border-radius:5px; font-size:13px}
.description p{margin-top:10px; font-size:12px; font-weight:700}

#buttons-menu{padding:50px 0; display:flex; justify-content:center}
#buttons-menu ul{display:flex; gap:12px; list-style:none; flex-wrap:wrap}
.button{width:160px; padding:12px 0; background:#1e293b; border:2px solid #ce1126; border-radius:8px; text-align:center; cursor:pointer; font-family:'Lobster'; font-size:17px}
.button.hovered{background:#ce1126; transform:scale(1.08)}