@import"https://fonts.googleapis.com/css?family=Poppins:200,400,500,600,700";
@import"https://fonts.googleapis.com/css2?family=Open+Sans&display=swap";
body{
    overflow:hidden;
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
code{
    font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace
}

body *,:after,:before{
  font-family:var(--font-family),sans-serif;
}

:root{
  --black: rgba(0, 0, 0, 1);
  --black-40: rgba(0, 0, 0, .4);
  --black-60: rgba(0, 0, 0, .6);
  --black2-10: rgba(2, 2, 2, .1);
  --black2-20: rgba(2, 2, 2, .2);
  --black2-30: rgba(2, 2, 2, .3);
  --black2-40: rgba(2, 2, 2, .4);
  --black2-50: rgba(2, 2, 2, .5);
  --black2-60: rgba(2, 2, 2, .6);
  --black2-70: rgba(2, 2, 2, .7);
  --black2-80: rgba(2, 2, 2, .8);
  --black2-90: rgba(2, 2, 2, .9);
  --black14-85: rgba(14, 14, 14, .85);
  --noir-85: rgba(20, 20, 20, .851);
  --grey: rgb(127, 127, 127);
  --global-main-color-dark-50: rgba(32, 4, 51, .5);
  --global-main-color: rgba(83, 18, 127, 1);
  --global-main-color-10: rgba(83, 18, 127, .1);
  --global-main-color-20: rgba(83, 18, 127, .2);
  --global-main-color-30: rgba(83, 18, 127, .3);
  --global-main-color-40: rgba(83, 18, 127, .4);
  --global-main-color-50: rgba(83, 18, 127, .5);
  --global-main-color-60: rgba(83, 18, 127, .6);
  --global-main-color-70: rgba(83, 18, 127, .7);
  --global-main-color-80: rgba(83, 18, 127, .8);
  --global-main-color-90: rgba(83, 18, 127, .9);
  --orange: #c96e06;
  --light-orange: #b27935;
  --green: #358e75;
  --green2: #2bad6e;
  --green-40: rgba(43, 173, 110, .4);
  --red: #c33131;
  --red-40: rgba(195, 49, 49, .4);
  --blue: #3974c8;
  --blue-40: #3975c83f;
  --dark-blue: rgba(61, 112, 184, .6);
  --dark-blue2: rgba(12, 56, 119, .6);
  --white: rgba(255, 255, 255, 1);
  --white-90: rgba(255, 255, 255, .9);
  --white-80: rgba(255, 255, 255, .8);
  --white-70: rgba(255, 255, 255, .7);
  --white-50: rgba(255, 255, 255, .5);
  --white-30: rgba(255, 255, 255, .3);
  --degrade-violet: linear-gradient(360deg, rgba(83, 18, 127, .15) 0%, rgba(2, 2, 2, 0) 100%, rgba(2, 2, 2, 0) 100%);
  --degrade-violet2: linear-gradient( 360deg, rgba(127, 18, 18, .15) 0%, rgba(2, 2, 2, 0) 100%, rgba(2, 2, 2, 0) 100% );
  --degrade-violet-housebuilding: linear-gradient( 90deg, rgba(83, 18, 127, .36) 0%, rgba(2, 2, 2, .36) 0%, rgba(83, 18, 127, .31) 100% );
  --degrade-rouge: linear-gradient(to right, rgba(2, 2, 2, .4), rgba(171, 27, 27, .31));
  --degrade-bleu: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(36, 48, 62, .31) 100%);
  --degrade-orange: linear-gradient(to right, rgba(2, 2, 2, .36) 0%, rgba(171, 96, 27, .31) 100%);
  --degrade-vert: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(26, 102, 65, 031) 100%);
  --degrade-brown: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(80, 49, 21, .31) 100%);
  --degrade-cyan: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(0, 255, 255, .31) 100%);
  --degrade-gray: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(128, 128, 128, .31) 100%);
  --degrade-pink: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(255, 192, 203, .31) 100%);
  --degrade-purple: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(128, 0, 128, .31) 100%);
  --degrade-violet: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(238, 130, 238, .31) 100%);
  --degrade-white: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(255, 255, 255, .31) 100%);
  --degrade-yellow: linear-gradient(to right, rgba(2, 2, 2, .4) 0%, rgba(255, 193, 7, .31) 100%);
  --font-family: "Poppins";
  --font-family-bold: "Poppins-Bold";
  --font-family-medium: "Poppins-Medium";
  --font-family-regular: "Poppins-Regular"
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: Arial, sans-serif;
}

.locker-layout {
  
  position: fixed;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: 30vw;
  display: flex;
  flex-direction: column;
  height: 80vh; 
  gap: 1vw;
}

.locker-upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5vw;
}

.locker-upper .title {
  cursor: default;
  user-select: none;
  font-size: 1.0vw;
  letter-spacing: -1px;
  color: white;
  margin-bottom: -2vh;
  font-family: Poppins, sans-serif;
}

.search-container {
  display: flex;
  align-items: center;
  position: relative; /* Conteneur pour placer la croix à droite */
}

.search-bar {
  width: 12vw;
  height: 2vw;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0 1vw;
  padding-right: 2vw; /* Ajout d'espace pour la croix */
}

.close-icon {
  position: absolute;
  right: 0.5vw;  /* Décalage de la croix vers la gauche */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  transition: none; 
}

.close-icon:hover {
  animation: rotateIcon 0.5s ease forwards;
}

@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); 
  }
}


.search-bar:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid white;
}

.locker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6vw;
  overflow-y: auto;
  max-height: 75vh;
  z-index: 5;
  margin-right: 1.5vh; 
}

::-webkit-scrollbar {
  height: .8vh;
  width: .6vh; 
}

::-webkit-scrollbar-track {
  background-color: var(--black2-40);
}

::-webkit-scrollbar-thumb {
  background-color: var(--global-main-color);
  border-radius: 3vh;
}

.locker {
  width: 7vw; 
  height: 7vw; 
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1vw;
  overflow: hidden;
  position: relative;
}

.add-locker {
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7vw;
  height: 7vw;
  border-radius: 5px;
  cursor: pointer;
}

.add-locker svg {
  fill: rgb(110, 110, 110);
  width: 4vw;
  height: 4vw;
  opacity: 50%;
}

.locker__lock img {
  width: 3vw;
  height: 3vw;
  margin-top: 3px;
}

.locker__title[contenteditable="true"] {
  outline: none; 
}

[contenteditable="true"]:focus {
  outline: none;
  box-shadow: none;
  border: none; 
}


.locker__title {
  cursor: default;
  font-size: 1vw;
  font-family: Poppins, sans-serif;
  color: white;
  margin-bottom: 5.0vh;
}


.locker__buttons {
  display: flex;
  justify-content: center; 
  align-items: center; 
  gap: 0; 
  position: absolute; 
  bottom: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 100%; 
}

.manage-panel {
  display: none;
  flex-direction: column;
  padding: 0 3%; 
  background-color: var(--black2-40);
  border-radius: 1%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18vw;
  height: 18vw;
  overflow: hidden;
}

.manage-panel * {
  margin: .3vw 0; 
  font-size: .8vw;
  color: var(--white);
}

.manage-panel .locker-input {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  margin-top: 0.0vw; 
}

.manage-panel .locker-input label {
  text-align: left;
  font-size: 0.8vw;
  margin-bottom: 0.3vw; 
}

.manage-panel input {
  all: unset;
  width: 100%; 
  height: 18%;
  border-radius: .15vw;
  border: .1vw solid rgba(0, 0, 0, 0);
  background-color: var(--black2-40);
  transition: .25s border-color;
  margin-right: 1vw;
  padding: .5vw;
}

.manage-panel input:focus {
  border-color: var(--white);
}

.manage-panel input.disabled {
  color: var(--grey);
}

.manage-panel .locker-input .logo {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.manage-panel .locker-input .logo svg {
  width: 1.2vw;
  height: 1.2vw;
}

.manage-panel .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
}

.manage-panel .buttons .confirm {
  width: 40%;
  height: 2.2vw;
  background-color: var(--green2);
  border-radius: .15vw;
  gap: .5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1vw;
  cursor: default; 
}

.manage-panel .buttons .card {
  font-size: .55vw;
  width: 24%;
  height: 2.2vw;
  background-color: var(--orange);
  border-radius: .15vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0.3vw;  
  padding-right: 0.3vw; 
  margin-top: 1vw;
  cursor: default; 
}

.manage-panel .buttons .confirm {
  background-color: var(--green2);
  cursor: pointer;
}

.manage-panel .buttons .card {
  background-color: var(--orange);
  cursor: pointer;
}

.manage-panel .buttons svg {
  width: 1vw;
  height: 1vw;
}

.core-button {
  flex: 1;
  padding: 0.5vw;
  font-family: Poppins, sans-serif;
  font-size: 0.8vw;
  border: none;
  cursor: pointer;
}

.core-button.manage {
  background-color: var(--global-main-color);
  color: white;
  border-radius: 0 0 0 5px; 
}

.core-button.open {
  background-color: var(--green2);
  color: white;
  border-radius: 0 0 5px 0;
}