/* *****************************************************************
TOOLS
***************************************************************** */
* {
  box-sizing: border-box; /* On spécifie que la largeur (width) de chaque boîte comprend le padding et la bordure (par défaut, c'est seulement la largeur du contenu) */
}

html {
  font-size: 62.5%; /* 1rem = 10px (la formule est 10/16*100) la taille par défaut étant 16px */
}

body {
  font-size: 1.8rem; /* on remets la taille du texte par défaut pour le body à 16px en utilisant les rem comme unité) */
}

/*******************************************************************************
GENERALITES
*******************************************************************************/

/* Le corps du document */
body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family: "Athiti";
  color: #000000; /* #555555 */
  background-color: #eee;
}

h1 {
  font-size: 4rem;
  color: #dd5735;
  font-size: 3rem;
  text-transform: uppercase;
}

h2 {
  font-size: 3.2rem;
  color: #333;
  font-family: "Merienda";
  text-align: center;
}

h3 {
  font-size: 2.4rem;
  font-family: "Merienda";
  text-align: center;
}

h4 {
  font-size: 2.4rem;
  font-family: "Merienda";
  text-align: center;
}

h5 {
  font-size: 2.4rem;
  font-family: "Merienda";
  text-align: center;
}

/* Les liens */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: black;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  color: #4c4343;
  font-weight: bold;
}

.home {
  color: white;
}

article {
  margin-bottom: 2em;
}

/*******************************************************************************
LAYOUT
*******************************************************************************/

/* Le container permet de limiter la largeur d'un contenu */
.main-container {
  max-width: 780px;
  margin: auto;
}

/* L'entête de la page */
.header {
  padding-top: 2em;
  text-align: center;
  color: #4c4343;
}

.logo-image {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
}

.site-title {
  font-size: 1.8em;
  color: #444;
  letter-spacing: 2px;
  margin: 0 0 40px 0;
  font-weight: bold;
}

.title-star {
  color: #a93226;
  font-size: 0.8em;
  margin: 0 5px;
}

/*******************************************************************************
NAVIGATION
*******************************************************************************/

.main-nav {
  max-width: 100%; /* Limiter la largeur de la colonne du menu */
  margin: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  border-top: 1px solid #ddd;
  padding: 0;
  margin: 0;
  transition: background-color 0.3s;
}

.nav-item:first-child {
  border-top: none;
}

.nav-item a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  color: inherit;
}

.dark-bg {
  background-color: #4c4343;
  color: white;
}

.light-bg {
  background-color: #ebe3db;
  color: #333;
  border-bottom: 1px solid #4c4343;
}

.bottom-border-none {
  border-bottom: none;
}

/* Effet de survol (Hover) */
.nav-item:hover {
  background-color: #950000;
  color: white;
}

/*******************************************************************************
MAIN
*******************************************************************************/

section {
  margin-top: 2em;
}

.single-item img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.main-article img,
.menu img {
  width: 100%;
}

.menu {
  background-color: #ebe3db;
  padding: 0.1em;
  margin-top: 1em;
}

.menu-item {
  position: relative;
  overflow: hidden;
  transition:
    color 0.2s,
    background-color 1s,
    transform 0.5s;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* Pour centrer le contenu */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  transition:
    background-color 0.4s ease,
    opacity 0.4s ease,
    border 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  border: 4px solid white;
}

.menu-item:hover .overlay {
  opacity: 5;
  transform: translateY(0);
  background-color: rgba(0, 0, 0, 0.4);
}

.prix {
  font-size: 2em;
  margin-bottom: 0;
}

.details,
.taxes {
  font-size: 1em;
  margin: 0;
}

.menu ul {
  width: 100%;
}

.menu ul li {
  list-style: none;
  border-bottom: 1px dotted black;
}

.knife {
  height: 30px;
}

.see-more {
  justify-content: center;
  width: 100%;
  background-color: #4c4343;
  color: white;
}

/*******************************************************************************
FOOTER
*******************************************************************************/

.footer {
  background-image: url(../ressources/images/footer-bg.jpg);
  text-align: center;
  padding: 1em;
  color: white;
}

.hours-list {
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.social-links li {
  list-style: none;
}

.social-links li a {
  color: white;
  font-size: 1.5em;
}

.aside {
  text-align: center;
  background-color: #444;
  padding: 2em;
  color: white;
}

/*******************************************************************************
MEDIA QUERIES - RESPONSIVE
*******************************************************************************/

/* Tablette : à partir de 780px */
@media screen and (min-width: 780px) {
  .main-container {
    max-width: 1100px;
  }

  .main {
    margin: 1em;
  }

  .main-nav ul {
    display: flex;
    justify-content: space-around;
    background-color: #ebe3db;
  }

  .main-nav ul li {
    border-bottom: none;
  }

  .footer {
    display: flex;
    justify-content: space-around;
  }

  .special-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
  }

  .special-menu .menu {
    width: calc(50% - 0.5em);
  }
}

/* Desktop : à partir de 1100px */
@media screen and (min-width: 1100px) {
  .main-container {
    max-width: 1400px;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
  }

  .logo-container {
    display: flex;
    align-items: center;
  }

  .site-title {
    font-size: 2rem;
    margin: 0;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .main-article {
    overflow: hidden; /* Contient le float */
  }

  .main-article img {
    float: right;
    object-fit: cover;
    width: 400px;
    margin-left: 1em;
    margin-bottom: 1em;
  }

  .special-menu {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    justify-content: center;
  }

  .special-menu .menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: auto;
  }

  .special-menu .menu ul {
    flex-grow: 1;
  }
}

/* Grand écran : à partir de 1400px */
@media screen and (min-width: 1400px) {
  .main-container {
    max-width: 1600px;
    margin: auto;
  }

  .main-article img {
    width: 500px;
  }
}