/* ================= CUISINE (bento de plats) ================= */

.cuisine__bento {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 250px 250px 210px;
  gap: 14px;
}

.cuisine__case {
  overflow: hidden;
  border-radius: 22px;
}
.cuisine__case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.cuisine__case:hover img { transform: scale(1.05); }

/* placements bento + un coin très arrondi qui varie d'une case à l'autre */
.cuisine__case--1 { grid-column: 1 / 3; grid-row: 1 / 3; border-top-left-radius: 120px; }
.cuisine__case--2 { grid-column: 3 / 4; grid-row: 1 / 2; border-bottom-left-radius: 90px; }
.cuisine__case--3 { grid-column: 3 / 5; grid-row: 2 / 3; border-top-right-radius: 96px; }
.cuisine__case--4 { grid-column: 4 / 5; grid-row: 1 / 2; border-top-right-radius: 110px; }
.cuisine__case--5 { grid-column: 1 / 3; grid-row: 3 / 4; border-bottom-left-radius: 110px; }
.cuisine__case--6 { grid-column: 3 / 5; grid-row: 3 / 4; border-bottom-right-radius: 110px; }

/* sticker qui déborde du haut du bento */
.cuisine__sticker {
  top: -18px;
  left: 41%;
  transform: rotate(-5deg);
}

.cuisine__action {
  text-align: center;
  margin-top: 44px;
}

@media (max-width: 991px) {
  .cuisine__bento { grid-template-rows: 200px 200px 170px; }
}

@media (max-width: 767px) {
  .cuisine__bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 172px;
    gap: 12px;
  }
  .cuisine__case--1,
  .cuisine__case--2,
  .cuisine__case--3,
  .cuisine__case--4,
  .cuisine__case--5,
  .cuisine__case--6 { grid-column: auto; grid-row: auto; }

  .cuisine__case--1 { border-top-left-radius: 64px; }
  .cuisine__case--2 { border-bottom-left-radius: 56px; }
  .cuisine__case--3 { border-top-right-radius: 58px; }
  .cuisine__case--4 { border-top-right-radius: 64px; }
  .cuisine__case--5 { border-bottom-left-radius: 64px; }
  .cuisine__case--6 { border-bottom-right-radius: 64px; }

  .cuisine__sticker { font-size: 20px; top: -14px; left: 8%; }
  .cuisine__action { margin-top: 36px; }
}

@media (max-width: 479px) {
  .cuisine__bento { grid-auto-rows: auto; }
  .cuisine__case { aspect-ratio: 1 / 1; }
}