/* STYLES */
:root {
  --ink: #0a0c10;
  --night: #111827;
  --darkblue: #1d2c3b;
  --sand: #f7f3ee;
  --foam: #e9eef4;
  --gold: #e0b066;
  --sea: #0d9488;
  --pop: #f97316;
  --palepink: #f6d1d8;
  --nightgreen: #062b16;
  --lightgreen: #2d3b39;
  --darkgreen: #122223;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Manrope, system-ui;
  background: linear-gradient(180deg, var(--darkgreen), var(--nightgreen));
  /* background: var(--darkgreen); */
  color: #e5e7eb;
  /* overflow-x: hidden; */
}

/* Animation burger → X */
#burger.open .burger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

#burger.open .burger-line:nth-child(2) {
  opacity: 0;
}

#burger.open .burger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.hero {
  /* background-image: url('https://plus.unsplash.com/premium_photo-1697729704609-7ebbc2714df1?q=80&w=857&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); */
  background-image: url("../img/sunset-phare.jpg");
  /* background-image: var(--nightgreen); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: -750px;
  background-position-x: right;
}
@media (min-width: 768px) {
  .hero {
    background-position-y: -500px;
  }
}
@media (min-width: 1023px) {
  .hero {
    background-position-y: -500px;
  }
}
@media (min-width: 1700px) {
  .hero {
    background-position-y: -1000px;
  }
}

.hero::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}

/* Gestion du mode preview */
.menu-item.open .thumb {
  display: none;
}

.menu-item.open .info {
  display: none;
}

.menu-item.open::after {
  content: "";
  display: block;
}

.menu-item {
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* .menu-item .info {
    padding-top: 40%;
    padding-bottom: 40%;
} */

.menu-item.open {
  transform: scale(1.2); /* agrandit tout le card */
  z-index: 20;
  position: relative;
}

.menu-item.open img {
  /* background-position: center; */
  transform: scale(1);
  /* transform: translateY(10%); */
  transition: transform 0.3s ease;
}

/* Ambiance */
#gallery {
  /* background-image: radial-gradient((1200px_400px_at_50%_-10%,rgba(224,176,102,.12),rgba(0,0,0,0))); */
  /* background-image: url("../img/Logo-blanc-fond-transparent-La-Quincaillerie-2048x879.png"); */
}

#book {
  background-image: url("../img/Logo-blanc-fond-transparent-La-Quincaillerie-2048x879.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (min-width: 980px) {
  #book {
    background-size: contain;
  }
}

.brand {
  font-family: "Playfair Display", serif;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 1rem;
  font-weight: 800;
}

.btn-square {
  border-radius: 0;
}

.btn-primary {
  background: var(--gold);
  color: #111;
  box-shadow: 0 10px 20px rgba(224, 176, 102, 0.25);
}

.btn-ghost {
  border: 1px solid var(--gold);
}

.glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.06);
}

.chip {
  border: 1px solid white;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
}

.card {
  border-radius: 1.25rem;
  border: 1px solid #1f2937;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.6),
    rgba(15, 23, 42, 0.2)
  );
}

.section {
  padding: 4rem 0 4rem 0;
  /* min-height: 100vh; */
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
}
.divider-reverse {
  height: 1px;
  background: linear-gradient(90deg, #fff, transparent, #fff);
}

.tagline {
  letter-spacing: 0.08em;
}

.bento {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bento {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .bento .tall {
    grid-row: span 2;
  }
}