/* ==============================================
   RESET & BASE
================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* ==============================================
   HEADER GLOBAL
================================================= */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height:75px;
}

/* -------- PARTIE 1 : INFOS + RESEAUX -------- */
.header_partie1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 3.7rem;
  background-color: orangered;
  color: #fff;
  font-size: 1rem;
}

/* reserve */
.reserve  {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1.1rem;
  cursor: pointer;
}

.reserve a {
  text-decoration:none;
  
}

.reserve a p{
  color: orangered;
  padding:5px;
  border-radius: 10px;
  background: #fff;
  transition: all ease 1s;
}

.reserve a p:hover{
  color: rgb(255, 255, 255);
  background:orangered;
  transition: all ease 1s;
  border: 1px solid #fff;
}


/* Réseaux sociaux */
.reseaux-sociaux {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
}
.reseaux-sociaux li a img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s, filter 0.3s;
}
.reseaux-sociaux li a img:hover {
  transform: scale(1.2);
  filter: brightness(1) invert(0);
}

/* -------- PARTIE 2 : LOGO + MENU -------- */
.header_partie2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;
  padding: 0.7rem 3rem; /* diminué */
}

/* Logo */
.logo {
  margin-bottom: 0.7rem;
  padding-top: 0.6em;
  margin-right: 77%;
}
.logo img {
  width: 87px;
  height: auto;
  display: block;
}

/* ===== Menu centré ===== */
.liens {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.liens ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.liens ul li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  height: 2rem;
}

/* Lien principal */
.liens ul li a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 100;
  font-size: 0.70rem;
  font-family: 'Lucida Sans', 'Lucida Grande', Geneva, Verdana, sans-serif;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  height: 100%;
}
.liens ul li a:hover {
  color: #e34014;
}

/* Flèche à côté du lien */
.liens ul li img {
  width: 10px;
  height: 8px;
  transition: transform 0.4s ease;
}
.liens ul li:hover > img {
  transform: rotate(180deg);
}

/* Sous-menu */
.liens ul li ul.sous-menu {
  display: none;
  position: absolute;
  top: 109%;
  left: 0;
  background-color: #030303;
  border-top: 3px solid orangered;
  list-style: none;
  min-width: 170px;
  z-index: 1000;
}

.liens ul li ul.sous-menu li a {
  padding: 0.7rem 1rem;
  color: #f9f9f9;
  font-weight: 100;
  font-size: 0.70rem;
  transition: background 0.3s, color 0.3s;
  display: block;
}

.liens ul li ul.sous-menu li a:hover {
  color: #a5a3a3;
}

/* Apparition du sous-menu */
.liens ul li:hover > ul.sous-menu {
  display: block;
  animation: fall-rotate 0.6s ease forwards;
}

/* ======== HEADER SCROLL EFFECT (DESKTOP) ======== */
@media (min-width: 951px) {
  header.scrolled .header_partie2 {
    padding: 0.5rem 3rem; /* diminué */
    transition: all 0.4s ease;
  }

  header.scrolled .logo img {
    width: 60px; /* diminué */
    transition: width 0.4s ease;
  }

  header.scrolled .liens ul li a {
    font-size: 0.9rem; /* diminué */
    transition: font-size 0.3s ease;
  }
}

/* Animation sous-menu */
@keyframes fall-rotate {
  0% { opacity: 0; transform: translateY(-30px) rotate(-15deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ======== BURGER MENU ======== */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 37px;
  height: 30px;
  cursor: pointer;
  position: absolute;
  right: 3rem;
  top: 6.8rem;
}

.burger span {
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ======== MENU MOBILE (≤950px) ======== */
@media (max-width: 950px) {

  /* Partie 1 : infos + réseaux */
  .header_partie1 {
    display:flex;
    align-items: center;
    font-size: 0.95rem;
  }

  .reserve {
    font-size: 0.8 rem;
  }

  .reseaux-sociaux li a img {
    width: 20px;
    height: 20px;
  }

  /* Partie 2 : logo + menu */
  .header_partie2 {
    padding: 0.6rem 1rem 2rem 1rem;
    flex-direction: column;
    align-items: center;
    height:100px;
  }
  .banniere h1{
    font-size:20px;
  }
  .logo img {
    width: 60px;
  }

  /* Burger menu visible */
  .burger {
    display: flex;
    right: 1.5rem;
    top: 6rem;
  }

  /* Menu mobile */
  .liens {
    display: none;
    width: 100%;
    background: #000;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
  }

  .liens.active {
    display: flex;
    animation: fadeIn 0.3s ease forwards;
  }

  .liens ul {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .liens ul li {
    width: 100%;
    justify-content: center;
  }

  .liens ul li a {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  /* Sous-menus mobile */
  .liens ul li ul.sous-menu {
    position: static;
    border-top: none;
    background-color: #111;
    width: 100%;
    display: none;
    flex-direction: column;
  }

  .liens ul li:hover > ul.sous-menu,
  .liens ul li.active > ul.sous-menu {
    display: flex;
  }

  .liens ul li ul.sous-menu li a {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
  }

  /* Masquer flèches sur mobile */
  .liens ul li img {
    display: none;
  }

  /* Animation fadeIn simplifiée */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}