:root {
  --bc: #fcffff;
  --bc-dark: rgba(8, 8, 10, 1);
  --primary: rgb(232, 62, 97);
  --white: #ffffff;
  --black: #000000;
  --green: #059700;
  --red: #aa0303;
  /* Vérifications */
  --En_ligne: "En ligne";
  --Hors_ligne: "Hors ligne";
  /* Sizes */
  --heading: 3.4rem;
  --heading-large: 7.5rem;
  --heading-medium: 2rem;
  --paragraph: 1.1rem;
  /* Fonts */
  --font-main: "Poppins";
  --font-title: 'Bodoni Moda', serif;
}


.modal {
  display: none;
  position: fixed;
  z-index: 60; /* Mise à jour du z-index */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #f7f7f7;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #ccc;
  max-width: 400px; /* Ajustez la largeur maximale selon vos besoins */
  position: relative;
  border-radius: 10px; /* Ajout des coins arrondis */
}

.close {
  color: #aaa;
  position: absolute;
  top: 18px;
  right: 25px;
  font-size: 40px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

/* LOGIN */

.popup_login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 60;
  animation: slideIn 0.3s forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

.popup_login.visible {
  display: flex;
  justify-content: flex-end;
}

.popup_login_content {
  position: relative;
  color: white;
  background: rgb(0, 0, 0);
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 20%;
  height: 100%;
  right: 0px;
  overflow: auto;
}

.popup_login_content h2{
  text-align: center;
  margin-top: 30px;
}
.popup_login_content a{
  text-decoration: none;
  color: white;
  text-align: center;
  background-color: var(--primary);
  display: block;
  padding-block: 10px;
  border-radius: 10px;
}
.popup_login_content label{
  padding-bottom: 10px;
  padding-top: 0px;
}
.popup_login_content input{
  width: 100%;
  height: 30px;
  border: none;
  background-color: grey;
  border-radius: 10px;
  padding-left: 10px;
  cursor: pointer;
  position: relative;
  display: block;
}
.popup_login_content input:focus{
    outline: 1px solid rgb(0, 110, 255);
}
.popup_login_content button{
  text-decoration: none;
  width: 100%;
  color: white;
  text-align: center;
  background-color: var(--primary);
  display: block;
  padding-block: 10px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: none;
  font-size: 16px;
}


.popup_login_close {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 40px;
  color: #9c9c9c;
  cursor: pointer;
}

.navbar-right a{
  font-weight: 200;
  color: var(--white);
  text-decoration: none;
}

.navbar-right.invisible a{
  display: none !important;
}