/* style.css */

.sub-menu {
  position: relative;
  border-bottom: 1px solid rgb(0, 0, 0);
  z-index: 1000;
}
.sub-menu .container {
  display: flex;
  justify-content: right;
}
/* Style du menu */
.menu {
  position: absolute; /* Positionnement initial à 20px du haut */
  top: 50px;
  width: 100%;
  background-color: transparent; /* Menu transparent par défaut */
  z-index: 1000; /* S'assurer qu'il soit au-dessus du contenu */
  transition:
    background-color 0.3s ease,
    top 0.3s ease; /* Transition douce pour la couleur et le top */
}

.menu .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menu .container ul,
.sub-menu .container ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.menu .container ul li,
.sub-menu .container ul li {
  padding: 15px;
}

.menu .container ul li a,
.sub-menu .container ul li a {
  text-decoration: none;
  font-size: 16px;
}

/* Style de contenu, pour permettre le défilement */
.content {
  padding-top: 100px; /* Un peu d'espace pour que le menu ne cache pas le contenu */
}

.btn-primary {
  background-color: var(--primary-500);
}

.btn-primary:hover {
  background-color: var(--primary-600);
}

.link {
  color: var(--gray-700);
}

.link:hover {
  color: var(--primary-500);
}

.link-white {
  color: #ffffff;
}

.white:hover {
  color: #c2c2c2;
}

.container-content {
  top: 0;
  z-index: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.home-search {
  width: 100%;
  height: 75vh;
  background-image: url("../imgs/site/header_home.jpg");
  background-repeat: no-repeat;
  background-attachment: bottom;
  background-position: center;
  background-size: cover;
  background-color: var(--gray-700);
}
.resume {
  height: 25vh;
}
.guest .host {
  height: 100vh;
}

.user-form input,
.user-form select {
  border: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-300);
  margin-bottom: 10px;
}
.user-form textarea {
  border: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-300);
  margin-bottom: 10px;
  padding: 10px;
  resize: none;
}

.user-form input:focus,
.user-form select:focus,
.user-form textarea:focus {
  outline: none;
  box-shadow: none;
}

.user-form label {
  margin: 10px 8px 5px 0;
  padding-left: 8px;
  font-weight: bold;
  color: #adadad;
}

.user-form .form-group half {
  width: 100%;
}

.user-form .form-group full {
  width: 100%;
}

@media screen and (min-width: 480px) {
  .user-form .form-group half {
    width: 50%;
  }
}