:root
{
    --noir: #000;
    --beige : #f0eee9;
    --beige2 : #ebe7e0;
    --beige3 : #F6F6F6;
    --beige4 : #FAF7F0;
    --blanc : #ffffff;
    --jaune : #fffede;
    --orange : #feae62;
    --taupe : #8e8d8a;
    --vert : #DDFFBB;
    --brun : #e8d5cc;
    --rose : #FCD1D1;
    --rose-gris : #AD9D9D;
    --brunF : #bda18a;
    --Mauve : #F1E3FF;
    --vert : #D8E2DC;
}

/*Nav*/
nav
{
    height: 70px;
    font-size: 1.4em;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px; /* un peu de padding */
    z-index: 1000;
}

.sticky
{
    transition: 2.6s ease; /* transition pour l'animation du bord */
    background-color: #005b7e;
    opacity: 95%;
}

#logo2
{
    height: 4em;
    width: 4em;
    transform: rotate(35deg);
}

.logo-navbar
{
  min-height: 30px;
  width: auto;
}

.perso-navbar
{
    font-family: 'Dastin', sans-serif;
    z-index: 99;
    padding: .5rem 1rem;
}

.perso-navbar .nav-link
{
    border-bottom: 1px solid transparent;
    transition: padding-bottom .4s ease-in-out, border-color .3s ease;
}

.perso-navbar .nav-link:hover
{
    padding-bottom: 20px;
    border-bottom-color: var(--blanc);
}

.navbar-nav .nav-link
{
  font-size: 1.1rem;
  padding: .5rem 1rem;
}

.dropdown-menu
{
    background-color: #222;
    opacity: 97%;
    min-width: 15rem;
    border-radius: 13px;
    text-align: center;
}

.dropdown-item
{
    color: var(--beige);
}

hr
{
    color: var(--beige) !important;
}

/* Centrage vertical pour le logo et le bouton hamburger */
.navbar .container-fluid
{
  align-items: center;
}

/* Empêche le hamburger de descendre */
.navbar-toggler
{
  padding: 0.25rem 0.5rem;
}
/*Nav END*/

/* Media Queries */

/* Masquer le hamburger en desktop */
@media (min-width: 992px)
{
  .navbar-toggler
  {
    display: none !important;
    border: 3px solid red;
  }
}

@media (max-width: 991.98px)
{
  .navbar-nav
  {
    background-color: #222; /* pour que le menu déroulé soit lisible */
    padding: 1rem;
  }

  .navbar-nav .nav-item
  {
    padding-right: 0 !important;
    padding-bottom: 0.5rem;
  }

  .nav-item.d-flex
  {
    flex-direction: column;
  }
}

@media (max-width: 991px)
{
  .navbar-nav .nav-link
  {
    font-size: 1rem;
    padding: 0.5rem;
  }
}

@media (max-width: 768px)
{
  .navbar-nav .nav-link
  {
    font-size: 0.95rem;
    padding: 0.4rem;
  }

  .logo-navbar
  {
    max-height: 45px;
  }
}

@media (max-width: 576px)
{
  .navbar-nav .nav-link
  {
    font-size: 0.9rem;
  }

  .logo-navbar
  {
    max-height: 40px;
  }
}