/* menu nav */

.menu-toggle {
    /* ceci est le css du menu deroulant */
  
    display: flex; /* ceci est le css du menu deroulant */
  
    flex-direction: column; /* ceci est le css du menu deroulant */
  
    justify-content: space-between; /* ceci est le css du menu deroulant */
  
    align-items: center; /* ceci est le css du menu deroulant */
  
    width: 30px; /* ceci est le css du menu deroulant */
  
    height: 25px; /* ceci est le css du menu deroulant */
  
    cursor: pointer; /* ceci est le css du menu deroulant */
  
    padding: 5px; /* ceci est le css du menu deroulant */
  
    position: fixed; /* ceci est le css du menu deroulant */
  
    top: 10px; /* ceci est le css du menu deroulant */
  
    right: 10px; /* ceci est le css du menu deroulant */
  
    z-index: 9999; /* ceci est le css du menu deroulant */
  } /* ceci est le css du menu deroulant */
  
  /* ceci est le css du menu deroulant */
  
  .menu-toggle span {
    /* ceci est le css du menu deroulant */
  
    display: block; /* ceci est le css du menu deroulant */
  
    width: 100%; /* ceci est le css du menu deroulant */
  
    height: 3px; /* ceci est le css du menu deroulant */
  
    background-color: 5px solid rgb(228, 195, 255); /* ceci est le css du menu deroulant */
  
    transition: background-color 0.5s ease; /* ceci est le css du menu deroulant */
  } /* ceci est le css du menu deroulant */
  
  /* ceci est le css du menu deroulant */
  
  .menu-toggle.active span {
    background-color: #2a2424 !important;
  }
  
  .menu {
    /* ceci est le css du menu deroulant */
  
    position: fixed; /* ceci est le css du menu deroulant */
  
    top: 0; /* ceci est le css du menu deroulant */
  
    right: 0; /* ceci est le css du menu deroulant */
  
    width: 400px; /* ceci est le css du menu deroulant */
  
    height: 100%; /* ceci est le css du menu deroulant */
  
    background-color: #efe8d5; /* ceci est le css du menu deroulant */
  
    transform: translateX(100%); /* ceci est le css du menu deroulant */
  
    transition: transform 0.3s ease; /* ceci est le css du menu deroulant */
  
    z-index: 9998; /* ceci est le css du menu deroulant */
  } /* ceci est le css du menu deroulant */
  
  /* ceci est le css du menu deroulant */
  
  @media only screen and (max-width: 600px) {
    .menu {
      width: 100%;
    }
  }
  
  .menu ul {
    /* ceci est le css du menu deroulant */
  
    list-style: none; /* ceci est le css du menu deroulant */
  
    padding: 0; /* ceci est le css du menu deroulant */
  
    margin-top: 50px; /* ceci est le css du menu deroulant */
  
    text-align: left; /* ceci est le css du menu deroulant */
  } /* ceci est le css du menu deroulant */
  
  /* ceci est le css du menu deroulant */
  
  /* ceci est le css du menu deroulant */
  
  .menu ul li a {
    /* ceci est le css du menu deroulant */
  
    display: inline-block; /* ceci est le css du menu deroulant */
  
    font-size: 20px; /* ceci est le css du menu deroulant */
  
    color: rgb(41, 41, 41); /* ceci est le css du menu deroulant */
  
    text-decoration: none; /* ceci est le css du menu deroulant */
  
    transition: color 0.3s ease; /* ceci est le css du menu deroulant */
  
    width: 100%; /* ceci est le css du menu deroulant */
  
    padding: 10px; /* ceci est le css du menu deroulant */
  } /* ceci est le css du menu deroulant */
  
  /* ceci est le css du menu deroulant */
  
  .menu ul li a:hover {
    /* ceci est le css du menu deroulant */
  
    background-color: #cdc2a4; /* ceci est le css du menu deroulant */
  } /* ceci est le css du menu deroulant */
  
  /* ceci est le css du menu deroulant */
  
  .menu.active {
    /* ceci est le css du menu deroulant */
  
    transform: translateX(0%); /* ceci est le css du menu deroulant */
  } /* ceci est le css du menu deroulant */
  
  /* menu nav */
  
  /* HEADER DEBUT */
  
  header {
    position: fixed;
  
    width: 100%;
  
    height: 60px;
  
    border-bottom: 5px solid #cdc2a4;
  
    background-color: #efe8d5;
  
    z-index: 9999;
  
    top: 0;
  }
  
  header h2 {
    font-family: "Tropical County";
  
    font-size: 32px;
  
    position: absolute;
  
    left: 10px;
  
    top: 50%;
  
    transform: translateY(-50%);
  
    z-index: 99999;
  }
  
  #header-button {
    position: relative;
  
    display: flex;
  
    justify-content: right;
  
    align-items: center;
  
    flex-direction: row;
  
    list-style-type: none;
  
    height: 100%;
  }
  
  #header-button div {
    display: flex;
  
    align-items: center;
  
    padding: 0 10px;
  
    height: 100%;
  
    transition: all 0.3s ease-in-out;
  
    cursor: pointer;
  }
  
  #header-button div:hover {
    background-color: #cdc2a4;
  }
  
  .menu-deroulant {
    position: absolute;
  
    top: 60px;
  
    transform: translateX(-10px);
  
    background-color: rgb(228, 195, 255);
  
    opacity: 0;
  
    visibility: hidden;
  
    border-radius: 0 0 10px 10px;
  
    list-style-type: none;
  
    display: flex;
  
    justify-content: left;
  
    flex-direction: column;
  
    cursor: default;
  
    z-index: 1;
  
    transition: all 0.3s ease-in-out;
  }
  
  #header-button div:hover .menu-deroulant {
    visibility: visible;
  
    opacity: 1;
  }
  
  .menu-deroulant li {
    cursor: pointer;
  
    padding: 5px;
  
    transition: all 0.3s ease-in-out;
  }
  
  .menu-deroulant li:hover {
    cursor: pointer;
  
    padding: 5px;
  
    background-color: rgb(222 183 253);
  }
  
  #prendre-rdv {
    text-decoration: none;
  
    position: relative;
  
    padding: 10px 40px;
  
    background-color: #e7dcbe;
  
    border-radius: 100px;
  
    transition: all 0.2s;
  
    -webkit-transition: all 0.2s;
  
    border: 2px solid #cdc2a4;
  
    margin-bottom: 10px;
  }
  
  #prendre-rdv:hover {
    background-color: #cdc2a4;
  }
  
  #menu-petit {
    visibility: hidden;
  }
  
  #header-button {
    visibility: visible;
  }
  
  @media only screen and (max-width: 950px) {
    #menu-petit {
      visibility: visible !important;
    }
  
    #header-button {
      visibility: hidden !important;
    }
  
    .menu ul li a {
      width: auto !important;
    }
  
    #prendre-rdv {
      margin-right: 0;
  
      margin-left: 10px;
    }
    #presentation p {
      font-size: 2em !important;
    }
  
    #presentation {
      top: 200px !important;
    }
  }
  /* HEADER FIN */