/* Style de base (pour téléphone donc en portrait) */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  flex-direction: column;
  touch-action: pan-x pan-y;
}



/* La partie du haut avec la séléction du site et le profile */

.headerContainer1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.headerContainer2 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto;
  width: 100%;
}

nav {
  width: 13.3690vh;
  height: 6.6845vh;
  background-color: #EEEEEF;
  border-radius: 1.2032vh;
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
nav::-webkit-scrollbar {
  display: none;
}

nav .sites {
  line-height: 6.6845vh;
  font-size: 2.4064vh;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-align: center;
  color: black;
  cursor: pointer;
}
.sites:nth-child(n) {
  width: 13.3690vh;
}

nav .sites-separators {
  width: 0.2vh; /* Épaisseur de la barre */
  height: 50%; /* Hauteur de la barre */
  background-color: #999999; /* Couleur gris foncé */
  display: inline-block;
  position: relative;
  align-self: center;
  z-index: 1;
}


nav .siteSlideAnimation {
  height: 5.8824vh;
  z-index: 0;
  border-radius: 0.9358vh;
  margin-left: 0.4011vh;
  background-color: white;
}


.selectUser {
  width: 6.0160vh;
  height: 6.0160vh;
  border-radius: 50%;
  font-size: 2.9412vh;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #d8d8db;
  cursor: context-menu;
}

.futurButton {
  width: 6.0160vh;
  height: 6.0160vh;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: white;
}





/* La partie centrale avec les semaines (ce qui scroll) */

.weekContainer{
  display:flex;
  overflow:hidden;
  width:100%;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-snap-type:x mandatory
}
.weekContainer::-webkit-scrollbar {
  display: none;
}
.weekContainer>div{
  text-align:center;
  scroll-snap-align:center;
  scroll-snap-stop: always;
  flex:none;
  width:100%;
}


.oneWeekContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: auto;
}


.weekTitle{
  font-family: Arial, sans-serif;
  color: rgb(0, 0, 0);
  font-size: 4.2781vh;
  font-weight: bold;
  margin-bottom: 3.3422vh;
}

.oneWeekEndContainer .weekTitle {
  margin-bottom: 2vh;
  margin-top: 2vh;
}


.days, .small, .top, .bottom, .weekend {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 5.3476vh;
}
.days {
  flex-direction: column;
  gap: 2.6738vh;
}
.top, .bottom, .weekend{
  margin: 0 auto;
  flex-direction: row;
}
.oneWeekEndContainer .days {
  gap: 1.7vh;
}


.big_rectangle, .small_rectangle {
  position: relative;
  margin: 0 auto;
  background-color: #EEEEEF;
  color: white;
  font-size: 3.2086vh;
  font-weight: bold;
  border-radius: 1.7380vh;
  z-index: 0;
  cursor: pointer;
}
.big_rectangle {
  width: 42.7807vh;
  height: 17.3797vh;
}
.small_rectangle {
  width: 20.0535vh;
  height: 17.3797vh;
}

.oneWeekEndContainer .big_rectangle {
  width: 35vh;
  height: 15vh;
}
.oneWeekEndContainer .small_rectangle {
  width: 16.65vh;
  height: 15vh;
}


.dayOfTheWeek{
  position: absolute;
  font-family: Arial, sans-serif;
  color: rgb(0, 0, 0);
  font-size: 2.6738vh;
  font-weight: bold;
  margin-left: 2.0053vh;
  margin-top: 2.0053vh;
  /*margin-left: 2vh;
  margin-top: 2vh;*/
}
@keyframes growDayOfTheWeek {
  0% {
    /*margin-left: 2vh;*/
    margin-left: 2.0053vh;
    font-size: 2.6738vh;
  }
  100% {
    /*margin-left: 3vh;*/
    margin-left: 2.6738vh;
    font-size: 4.2781vh;
  }
}
.oneWeekEndContainer .dayOfTheWeek {
  font-size: 2vh;
  margin-left: 1.5vh;
  margin-top: 1.7vh;
 }


.dayNum{
  position: absolute;
  font-family: Arial, sans-serif;
  color: #7f7f7f;
  font-size: 1.8717vh;
  margin-left: 3.3422vh;
  margin-top: 5.0802vh;
  /*margin-left: 3vh;
  margin-top: 5vh;*/
}
@keyframes growDayNum {
  0% {
    margin-left: 3.3422vh;
    margin-top: 5.0802vh;
    /*margin-left: 3vh;
    margin-top: 5vh;*/
    font-size: 1.8717vh;
  }
  100% {
    margin-left: 4.6791vh;
    margin-top: 6.9519vh;
    /*margin-left: 5vh;
    margin-top: 6.5vh;*/
    font-size: 2.6738vh;
  }
}

.oneWeekEndContainer .dayNum {
  font-size: 1.5vh;
  margin-left: 2.2vh;
  margin-top: 4vh;
}


.circle {
  width: 4.6791vh;
  height: 4.6791vh;
  border-radius: 50%;
  position: absolute;
  bottom: 2.0053vh;
  font-size: 2.4064vh;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  align-items: center;
  transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, right 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  z-index: 0;
}


.self-circle {
  position: absolute;
  top: 1.3369vh;
  right: 1.3369vh;
  width: 3.0749vh;
  height: 3.0749vh;
  background-color: #f1f1f1; /* Light gray background */
  border: 0.4011vh solid #A9A9A9; /* Dark gray border */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.self-circle-active {
  background-color: #88e488; /* Light gray background */
  border: 0.4011vh solid #3ab638; /* Dark gray border */
}
.self-circle-old {
  position: absolute;
  top: 1.3369vh;
  right: 1.3369vh;
  width: 3.0749vh;
  height: 3.0749vh;
  background-color: rgba(89, 88, 88, 0.40);
  border: 0.4011vh solid rgba(89, 88, 88, 0.20);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.self-circle-max-resa {
  position: absolute;
  top: 1.3369vh;
  right: 1.3369vh;
  width: 3.0749vh;
  height: 3.0749vh;
  background-color: rgba(89, 88, 88, 0.40);
  border: 0.4011vh solid rgba(89, 88, 88, 0.20);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emojiContainer {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 10000;
}

.emoji {
  position: absolute;
  font-size: 5vh;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30vh) translateX(var(--emoji-horizontal-shift)) scale(0.7);
  }
}


.nbResa{
  position: absolute;
  color: #606060;
  background-color: #d8d8db;
  font-weight: bold;
  width: 3.3422vh;
  height: 3.3422vh;
  font-size: 2.0053vh;
  right: 1.3369vh;
  z-index: 1;
}





/* Partie du bas avec l'indicateur de scroll */

/* Conteneur des indicateurs */
.scroll-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.6738vh; /* Espace au-dessus */
}


/* Style des points */
.indicator {
  width: 1.3369vh; /* Taille du point */
  height: 1.3369vh; /* Taille du point */
  margin: 0 1.3369vh; /* Espacement entre les points */
  background-color: #ccc; /* Couleur des points inactifs */
  border-radius: 50%; /* Cercle parfait */
  transition: background-color 0.3s ease; /* Animation pour le changement de couleur */
  cursor: pointer;
}

.indicator.left{
  cursor: w-resize;
}

.indicator.right{
  cursor: e-resize;
}

/* Point actif */
.scroll-indicator .indicator.active {
  background-color: #606060; /* Couleur du point actif */
}


/* Style du symbole history */
.history {
  position: absolute;
  left: 50%;
  transform: translate(-600%, 0%);
  width: 3.0749vh; /* Taille du point */
  height: 3.0749vh; /* Taille du point */
  background-color: grey; /* Couleur des points inactifs */
  border-radius: 50%; /* Cercle parfait */
  transition: opacity 0.2s ease; /* Animation pour le changement de couleur */
  justify-content: center;
  align-items: center;
  display: flex;
  opacity: 0;
  cursor: pointer;
}





/* Lookup rectangle (rectangle qui pop quand on appuie sur une date) */

.lookup_rectangle {
  margin: 0 auto;
  background-color: #FFE371;
  color: white;
  font-size: 3.2086vh;
  font-weight: bold;
  border-radius: 1.7380vh;
  box-shadow: 0 0.5348vh 1.0695vh rgba(0, 0, 0, 0.2), 0 0.8021vh 2.6738vh rgba(0, 0, 0, 0.19);
  z-index: 20;
  transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}


.lookup_list {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 77%;
  overflow-y: scroll;
  box-sizing: border-box;
  transition: margin-top 0.3s ease;
  background-color: rgba(255, 227, 113, 0);
  overflow-x: hidden;
}
.lookup_list::-webkit-scrollbar {
  width: 0.8021vh;
}
.lookup_list::-webkit-scrollbar-thumb {
  border-radius: 0.6684vh;
  background-color: #c0c0c0;
}

.lookup_list_element {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  margin-top: 1.3369vh;
}

.lookup_list_name {
  width: 73%;
  position : sticky;
  color: rgb(71, 71, 71, 0);
  font-size: 2.6738vh;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limite à 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden; /* Cache le débordement */
  text-overflow: ellipsis; /* Ajoute des points de suspension si le texte déborde */
  text-align: left; /* Centre le texte à gauche */
  line-height: 1;
}
@keyframes growlookup_list_name {
  0% {
    color: rgba(71, 71, 71, 0);
  }
  100% {
    color: rgb(71, 71, 71);
  }
}





/* Profile rectangle (rectangle qui pop avec les informations du profile) */

.profile_rectangle {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0 auto;
  background-color: #FFA178;
  color: white;
  font-size: 3.2086vh;
  font-weight: bold;
  border-radius: 1.7380vh;
  box-shadow: 0 0.5348vh 1.0695vh rgba(0, 0, 0, 0.2), 0 0.8021vh 2.6738vh rgba(0, 0, 0, 0.19);
  transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: 20;
}


.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.6738vh;
  margin-left: 2.6738vh;
  margin-right: 2.6738vh;
  margin-top: 4.0107vh;
}


.profile-title {
  font-size: 4.2781vh;
  font-weight: bold;
}


.profile-avatar {
  top: 50%;
  left: 50%;
  width: 7.3529vh;
  height: 7.3529vh;
  text-transform: uppercase;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: bold;
  font-size: 3.6096vh;
}


.close-button {
  background: none;
  border: none;
  font-size: 2.6738vh;
  cursor: pointer;
  color: #474747;
  margin-top: -4.6791vh;
  margin-left: 2vh;
}
.close-button:hover {
  color: #000;
}


/* Champs de saisie */
.profile-form {
  margin-bottom: 2.6738vh;
  margin-left: 2.6738vh;
  margin-right: 2.6738vh;
}


.input-group {
  margin-bottom: 3.3422vh;
}
.input-group label {
  display: block;
  font-size: 2.4064vh;
  margin-bottom: 0.6684vh;
  color: #555;
}
.input-group input {
  width: 70%;
  padding: 1.0695vh;
  border: 0.1337vh solid #ccc;
  border-radius: 0.6684vh;
  font-size: 2.4064vh;
  color: #333;
}
.input-group input[readonly] {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
}


#initials {
  width: 30%;
  text-transform: uppercase;
}


#email {
  width: 90%;
}


/* Actions */
.profile-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 2.6738vh;
  margin-right: 2.6738vh;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.logout-button,
.save-button,
.change-password-button {
  padding: 1.0695vh 1.6043vh;
  font-size: 2.4064vh;
  border: none;
  border-radius: 0.6684vh;
  cursor: pointer;
}
.change-password-button {
  background-color: #ffe371;
  color: black;
  margin-bottom: 2vh;
}
.change-password-button:hover {
  background-color: #edd26a;
}
.logout-button {
  background-color: #dc3545;
  color: white;
}
.logout-button:hover {
  background-color: #c82333;
}
.save-button {
  background-color: #ffe371;
  color: black;
}
.save-button:hover {
  background-color: #edd26a;
}


.color-picker-container {
  display: flex;
  align-items: center; /* Centre verticalement les éléments */
  justify-content: space-between; /* Écarte les éléments */
  flex-direction: row; /* Met les éléments sur une ligne horizontale */
  width: 22.7273vh; /* Largeur totale du conteneur */
  margin-right: 1.3369vh;
  margin-bottom: -2.6738vh;
  padding: 0;
}


.color-bar {
  position: relative;
  width: 18.7166vh;
  height: 2.6738vh;
  border-radius: 1.3369vh;
  margin-right: 2.6738vh; /* Ajoute un espace avec la luminosité */
}


input[type="range"] {
  position: absolute;
  width: 100%;
  -webkit-appearance: none;
  background: none;
  pointer-events: none;
  padding: 0;
  border: none;
  margin: 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.6738vh;
  height: 2.6738vh;
  border-radius: 50%;
  background: white;
  border: 0.2674vh solid black;
  cursor: pointer;
  pointer-events: all;
}
input[type="range"]::-moz-range-thumb {
  width: 2.6738vh;
  height: 2.6738vh;
  border-radius: 50%;
  background: white;
  border: 0.2674vh solid black;
  cursor: pointer;
}


.luminosity-bar {
  position: relative;
  width: 2.6738vh; /* Plus petite largeur */
  height: 8.0214vh; /* Hauteur verticale */
  border-radius: 1.3369vh;
}
.luminosity-bar input[type="range"] {
  position: absolute;
  top: 0;
  width: 2.6738vh; /* Largeur de la barre */
  height: 8.0214vh; /* Hauteur correspondant à la barre */
  writing-mode: vertical-lr; /* Vertical (de bas en haut) */
  direction: rtl; /* Curseur partant du bas */
  background: none;
  margin: 0;
  padding: 0;
  border: none;
}

.luminosity-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.6738vh;
  height: 2.6738vh;
  border-radius: 50%;
  background: white;
  border: 0.2674vh solid black;
  transform: translateX(-0.0738vh);
  cursor: pointer;
  pointer-events: all;
}
.luminosity-bar input[type="range"]::-moz-range-thumb {
  width: 2.6738vh;
  height: 2.6738vh;
  border-radius: 50%;
  background: white;
  border: 0.2674vh solid black;
  transform: translateX(-0.0738vh);
  cursor: pointer;
}



/* Style pour les écrans d'ordinateur */

@media screen and (aspect-ratio<=2.2) and (aspect-ratio>1.2) {

  .weekContainer{
    display:flex;
    overflow:hidden;
    width:100%;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type:x mandatory
  }
  .weekContainer::-webkit-scrollbar {
    display: none;
  }
  .weekContainer>div{
    text-align:center;
    scroll-snap-align:center;
    scroll-snap-stop: always;
    flex:none;
    width:100%;
  }


  .oneWeekContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: auto;
  }

  .oneWeekEndContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: auto;
  }


  .weekTitle{
    font-family: Arial, sans-serif;
    color: rgb(0, 0, 0);
    font-size: 7.2000vh;
    font-weight: bold;
    margin-bottom: 4.8128vh;
    margin-top: 4.8128vh;
  }
  .oneWeekEndContainer .weekTitle {
    margin-bottom: 4.8128vh;
    margin-top: 4.8128vh;
  }



  .days, .small, .top, .bottom, .weekend {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 7.7005vh;
  }
  .days {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 auto;
    gap: 5.3310vh;
  }
  .small {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .top, .bottom{
    margin: 0 auto;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
  }

  .oneWeekEndContainer .days {
    gap: 3vh;
  }

  .oneWeekEndContainer .weekend{
    flex-direction: column;
    display: flex;
    margin-left: 6vh;
  }


  .big_rectangle, .small_rectangle {
    position: relative;
    margin: 0 auto;
    background-color: #EEEEEF;
    color: white;
    font-size: 4.6204vh;
    font-weight: bold;
    border-radius: 2.5027vh;
    z-index: 0;
    cursor: pointer;
  }
  .big_rectangle {
    width: 44.3076vh;
    height: 55.3846vh;
  }
  .small_rectangle {
    width: 28.8770vh;
    height: 25.0268vh;
  }

  .oneWeekEndContainer .big_rectangle {
    width: 32vh;
    height: 45vh;
  }
  .oneWeekEndContainer .small_rectangle {
    width: 23vh;
    height: 21vh;
  }


  .dayOfTheWeek{
    position: absolute;
    font-family: Arial, sans-serif;
    color: rgb(0, 0, 0);
    font-size: 3.8503vh;
    font-weight: bold;
    margin-left: 2.8876vh;
    margin-top: 2.8876vh;
    /*margin-left: 2.8800vh;
    margin-top: 2.8800vh;*/
  }
  @keyframes growDayOfTheWeek {
    0% {
      /*margin-left: 2.8800vh;*/
      margin-left: 2.8876vh;
      font-size: 3.8503vh;
    }
    100% {
      /*margin-left: 4.3200vh;*/
      margin-left: 3.8503vh;
      font-size: 6.1605vh;
    }
  }

  .oneWeekEndContainer .dayOfTheWeek {
    font-size: 2.8vh;
    margin-left: 2vh;
    margin-top: 2vh;
  }


  .dayNum{
    position: absolute;
    font-family: Arial, sans-serif;
    color: #7f7f7f;
    font-size: 2.6952vh;
    margin-left: 4.8128vh;
    margin-top: 7.3155vh;
    /*margin-left: 4.3200vh;
    margin-top: 7.2000vh;*/
  }
  @keyframes growDayNum {
    0% {
      margin-left: 4.8128vh;
      margin-top: 7.3155vh;
      /*margin-left: 4.3200vh;
      margin-top: 7.2000vh;*/
      font-size: 2.6952vh;
    }
    100% {
      margin-left: 6.7379vh;
      margin-top: 10.0107vh;
      /*margin-left: 7.2000vh;
      margin-top: 9.3600vh;*/
      font-size: 3.8503vh;
    }
  }

  .oneWeekEndContainer .dayNum {
    font-size: 2.3vh;
    margin-left: 3vh;
    margin-top: 5.5vh;
  }


  .circle {
    width: 6.7379vh;
    height: 6.7379vh;
    border-radius: 50%;
    position: absolute;
    bottom: 2.8876vh;
    font-size: 3.4652vh;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    align-items: center;
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, right 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    z-index: 0;
  }


  .self-circle {
    position: absolute;
    top: 1.9251vh;
    right: 1.9251vh;
    width: 4.4279vh;
    height: 4.4279vh;
    background-color: #f1f1f1; /* Light gray background */
    border: 0.5776vh solid #A9A9A9; /* Dark gray border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .self-circle-active {
    background-color: #88e488; /* Light gray background */
    border: 0.5776vh solid #3ab638; /* Dark gray border */
  }
  .self-circle-old {
    position: absolute;
    top: 1.9251vh;
    right: 1.9251vh;
    width: 4.4279vh;
    height: 4.4279vh;
    background-color: rgba(89, 88, 88, 0.40);
    border: 0.5776vh solid rgba(89, 88, 88, 0.20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .self-circle-max-resa {
     position: absolute;
     top: 1.9251vh;
     right: 1.9251vh;
     width: 4.4279vh;
     height: 4.4279vh;
     background-color: rgba(89, 88, 88, 0.40);
     border: 0.5776vh solid rgba(89, 88, 88, 0.20);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }


  .nbResa{
    position: absolute;
    color: #606060;
    background-color: #d8d8db;
    font-weight: bold;
    width: 4.8128vh;
    height: 4.8128vh;
    font-size: 2.8876vh;
    right: 1.9251vh;
    z-index: 1;
  }

  .lookup_rectangle {
    margin: 0 auto;
    background-color: #FFE371;
    color: white;
    font-size: 3.2086vh;
    font-weight: bold;
    border-radius: 1.7380vh;
    box-shadow: 0 0.5348vh 1.0695vh rgba(0, 0, 0, 0.2), 0 0.8021vh 2.6738vh rgba(0, 0, 0, 0.19);
    z-index: 20;
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  }

  .lookup_list {
    margin-top: 26%;
  }

  .lookup_list_name {
    font-size: 2.9539vh;
  }
  .oneWeekEndContainer .lookup_list_name {
    font-size: 2.2vh;
  }

  .profile-actions {
    justify-content: space-around;
  }

  .change-password-button {
    margin-bottom: 0;
  }

  .input-group input {
    width: 80%;
  }
  #initials {
    width: 4vh;
  }

  input[type="range"] {
    width: 100%;
  }

}



/* Style pour les téléphone en mode paysage */

@media screen and (aspect-ratio>2.2 ) {

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    flex-direction: column;
    touch-action: pan-x pan-y;
  }



  /* La partie du haut avec la séléction du site et le profile */

  .headerContainer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  nav {
    width: 6.9612vw;
    height: 3.4806vw;
    background-color: #EEEEEF;
    border-radius: 0.6265vw;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar {
    display: none;
  }


  nav .sites {
    line-height: 3.4806vw;
    font-size: 1.2530vw;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-align: center;
    color: black;
    cursor: pointer;
  }
  .sites:nth-child(n) {
    width: 6.6845vw;
  }

  nav .sites-separators {
    width: 0.1vw; /* Épaisseur de la barre */
    height: 50%; /* Hauteur de la barre */
    background-color: #999999; /* Couleur gris foncé */
    display: inline-block;
    position: relative;
    align-self: center;
    z-index: 1;
  }


  nav .siteSlideAnimation {
    height: 3.0629vw;
    z-index: 0;
    border-radius: 0.4873vw;
    margin-left: 0.2089vw;
    background-color: white;
  }


  .selectUser {
    width: 3.1325vw;
    height: 3.1325vw;
    border-radius: 50%;
    font-size: 1.5315vw;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #d8d8db;
    cursor: context-menu;
  }

  .futurButton {
    width: 3.1325vw;
    height: 3.1325vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: white;
  }





  /* La partie centrale avec les semaines (ce qui scroll) */

  .weekContainer{
    display:flex;
    overflow:hidden;
    width:100%;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type:x mandatory
  }
  .weekContainer::-webkit-scrollbar {
    display: none;
  }
  .weekContainer>div{
    text-align:center;
    scroll-snap-align:center;
    scroll-snap-stop: always;
    flex:none;
    width:100%;
  }


  .oneWeekContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: auto;
  }

  .oneWeekEndContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: auto;
  }


  .weekTitle{
    font-family: Arial, sans-serif;
    color: rgb(0, 0, 0);
    font-size: 3.3378vw;
    font-weight: bold;
    margin-bottom: 1.7403vw;
    margin-top: 1.3351vw;
  }

  .oneWeekEndContainer .weekTitle {
    margin-bottom: 1.7403vw;
    margin-top: 1.3351vw;
  }


  .days, .small, .top, .bottom, .weekend {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2.7845vw;
  }
  .days {
    flex-direction: row;
    gap: 1.3922vw;
  }
  .top, .bottom, .weekend{
    margin: 0 auto;
    flex-direction: row;
  }

  .days, .small, .top, .bottom, .weekend {
    margin: 0 auto;
    gap : 0;
  }

  .oneWeekEndContainer .days {
    gap: 1.3922vw;
  }


  .big_rectangle, .small_rectangle {
    position: relative;
    margin: 0 auto;
    background-color: #EEEEEF;
    color: white;
    font-size: 1.6707vw;
    font-weight: bold;
    border-radius: 0.9050vw;
    z-index: 0;
    cursor: pointer;
  }
  .big_rectangle, .small_rectangle {
    width: 16.0213vw;
    height: 20.0267vw;
    margin-left: 3.4713vw;
  }
  .big_rectangle{
    margin-left: 0;
  }
  .oneWeekEndContainer .big_rectangle {
    width: 12vw;
    height: 20vw;
   }
  .oneWeekEndContainer .small_rectangle {
    width: 12vw;
    height: 20vw;
    margin-left: 0.5vw;
  }




  .dayOfTheWeek{
    position: absolute;
    font-family: Arial, sans-serif;
    color: rgb(0, 0, 0);
    font-size: 2.0027vw;
    font-weight: bold;
    margin-left: 1.6021vw;
    margin-top: 1.0442vw;
    /*margin-left: 1.0414vw;
    margin-top: 1.0414vw;*/
  }
  .oneWeekEndContainer .dayOfTheWeek {
    font-size: 1.5vw;
    margin-left: 1vw;
    margin-top: 0.8vw;
   }

  .dayNum{
    position: absolute;
    font-family: Arial, sans-serif;
    color: #7f7f7f;
    font-size: 1.3351vw;
    margin-left: 2.6702vw;
    margin-top: 3.2042vw;
    /*margin-left: 1.5621vw;
    margin-top: 2.6035vw;*/
  }
  .oneWeekEndContainer .dayNum {
    font-size: 1.1vw;
    margin-left: 1.5vw;
    margin-top: 2.7vw;
  }


  .circle {
    width: 2.4364vw;
    height: 2.4364vw;
    border-radius: 50%;
    position: absolute;
    bottom: 1.0442vw;
    font-size: 1.2530vw;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    align-items: center;
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, right 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    z-index: 0;
  }


  .self-circle {
    position: absolute;
    top: 0.6961vw;
    right: 0.6961vw;
    width: 2.0027vw;
    height: 2.0027vw;
    background-color: #f1f1f1; /* Light gray background */
    border: 0.2670vw solid #A9A9A9; /* Dark gray border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .self-circle-active {
    background-color: #88e488; /* Light gray background */
    border: 0.2670vw solid #3ab638; /* Dark gray border */
  }
  .self-circle-old {
    position: absolute;
    top: 0.6961vw;
    right: 0.6961vw;
    width: 2.0027vw;
    height: 2.0027vw;
    background-color: rgba(89, 88, 88, 0.40);
    border: 0.2670vw solid rgba(89, 88, 88, 0.20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .self-circle-max-resa {
    position: absolute;
    top: 0.6961vw;
    right: 0.6961vw;
    width: 2.0027vw;
    height: 2.0027vw;
    background-color: rgba(89, 88, 88, 0.40);
    border: 0.2670vw solid rgba(89, 88, 88, 0.20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .nbResa{
    position: absolute;
    color: #606060;
    background-color: #d8d8db;
    font-weight: bold;
    width: 2.4032vw;
    height: 2.4032vw;
    font-size: 1.4686vw;
    right: 0.7846vw;
    bottom: 0.8359vw;
    z-index: 1;
  }





  /* Partie du bas avec l'indicateur de scroll */

  /* Conteneur des indicateurs */
  .scroll-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.3922vw; /* Espace au-dessus */
  }


  /* Style des points */
  .indicator {
    width: 0.6961vw; /* Taille du point */
    height: 0.6961vw; /* Taille du point */
    margin: 0 0.6961vw; /* Espacement entre les points */
    background-color: #ccc; /* Couleur des points inactifs */
    border-radius: 50%; /* Cercle parfait */
    transition: background-color 0.3s ease; /* Animation pour le changement de couleur */
    cursor: pointer;
  }

  .indicator.left{
    cursor: w-resize;
  }

  .indicator.right{
    cursor: e-resize;
  }

  /* Point actif */
  .scroll-indicator .indicator.active {
    background-color: #606060; /* Couleur du point actif */
  }


  /* Style du symbole history */
  .history {
    position: absolute;
    left: 50%;
    transform: translate(-600%, 0%);
    width: 1.6011vw; /* Taille du point */
    height: 1.6011vw; /* Taille du point */
    background-color: grey; /* Couleur des points inactifs */
    border-radius: 50%; /* Cercle parfait */
    transition: opacity 0.2s ease; /* Animation pour le changement de couleur */
    justify-content: center;
    align-items: center;
    display: flex;
    opacity: 0;
    cursor: pointer;
  }





  /* Lookup rectangle (rectangle qui pop quand on appuie sur une date) */

  .lookup_rectangle {
    margin: 0 auto;
    background-color: #FFE371;
    color: white;
    font-size: 1.6707vw;
    font-weight: bold;
    border-radius: 0.9050vw;
    box-shadow: 0 0.2785vw 0.5569vw rgba(0, 0, 0, 0.2), 0 0.4177vw 1.3922vw rgba(0, 0, 0, 0.19);
    z-index: 20;
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  }


  .lookup_list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70%;
    margin-top: 34%;
    overflow-y: scroll;
    box-sizing: border-box;
    transition: margin-top 0.3s ease;
    background-color: rgba(255, 227, 113, 0);
    overflow-x: hidden;
  }
  .lookup_list::-webkit-scrollbar {
    width: 0.4177vw;
  }
  .lookup_list::-webkit-scrollbar-thumb {
    border-radius: 0.3480vw;
    background-color: #c0c0c0;
  }

  .oneWeekEndContainer .lookup_list {
    margin-top: 40%;
  }

  .lookup_list_element {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0.6676vw;
  }

  .lookup_list_name {
    width: 73%;
    position : sticky;
    color: rgb(71, 71, 71, 0);
    font-size: 1.0681vw;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limite à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden; /* Cache le débordement */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte déborde */
    text-align: left; /* Centre le texte à gauche */
    line-height: 1;
  }
  .oneWeekEndContainer .lookup_list_name {
    font-size: 0.8vw;
  }





  /* Profile rectangle (rectangle qui pop avec les informations du profile) */

  .profile_rectangle {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0 auto;
    background-color: #FFA178;
    color: white;
    font-size: 1.6707vw;
    font-weight: bold;
    border-radius: 0.9050vw;
    box-shadow: 0 0.2785vw 0.5569vw rgba(0, 0, 0, 0.2), 0 0.4177vw 1.3922vw rgba(0, 0, 0, 0.19);
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 20;
  }


  .profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.3922vw;
    margin-left: 1.3922vw;
    margin-right: 1.3922vw;
    margin-top: 2.0883vw;
  }


  .profile-title {
    font-size: 2.2276vw;
    font-weight: bold;
    margin-left: 1vw;
  }


  .profile-avatar {
    top: 50%;
    left: 50%;
    width: 3.8286vw;
    height: 3.8286vw;
    text-transform: uppercase;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.8795vw;
  }


  .close-button {
    background: none;
    border: none;
    font-size: 1.3922vw;
    cursor: pointer;
    color: #474747;
    margin-top: -2.4364vw;
    margin-left: 1vw;
  }
  .close-button:hover {
    color: #000;
  }


  /* Champs de saisie */
  .profile-form {
    margin-bottom: 1.3922vw;
    margin-left: 1.3922vw;
    margin-right: 1.3922vw;
  }


  .input-group {
    margin-bottom: 1.7403vw;
  }
  .input-group label {
    display: block;
    font-size: 1.2530vw;
    margin-bottom: 0.3480vw;
    color: #555;
  }
  .input-group input {
    width: 80%;
    padding: 0.5569vw;
    border: 0.0696vw solid #ccc;
    border-radius: 0.3480vw;
    font-size: 1.2530vw;
    color: #333;
  }
  .input-group input[readonly] {
    background-color: #f0f0f0;
    color: #888;
    cursor: not-allowed;
  }


  #initials {
    width: 2vw;
    text-transform: uppercase;
  }


  #email {
    width: 90%;
  }


  /* Actions */
  .profile-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 1.3922vw;
    margin-right: 1.3922vw;
  }


  .logout-button,
  .save-button,
  .change-password-button{
    padding: 0.5569vw 0.8354vw;
    font-size: 1.2530vw;
    border: none;
    border-radius: 0.3480vw;
    cursor: pointer;
  }
  .change-password-button {
    margin-bottom: 0;
  }
  .logout-button {
    background-color: #dc3545;
    color: white;
  }
  .logout-button:hover {
    background-color: #c82333;
  }
  .save-button {
    background-color: #ffe371;
    color: black;
  }
  .save-button:hover {
    background-color: #edd26a;
  }


  .color-picker-container {
    display: flex;
    align-items: center; /* Centre verticalement les éléments */
    justify-content: space-between; /* Écarte les éléments */
    flex-direction: row; /* Met les éléments sur une ligne horizontale */
    width: 11.8340vw; /* Largeur totale du conteneur */
    margin-right: 0.6961vw;
    margin-bottom: -1.3922vw;
    padding: 0;
  }


  .color-bar {
    position: relative;
    width: 9.7456vw;
    height: 1.3922vw;
    border-radius: 0.6961vw;
    margin-right: 1.3922vw; /* Ajoute un espace avec la luminosité */
  }


  input[type="range"] {
    position: absolute;
    width: 100%;
    -webkit-appearance: none;
    background: none;
    pointer-events: none;
    padding: 0;
    border: none;
    margin: 0;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.3922vw;
    height: 1.3922vw;
    border-radius: 50%;
    background: white;
    border: 0.1392vw solid black;
    cursor: pointer;
    pointer-events: all;
  }
  input[type="range"]::-moz-range-thumb {
    width: 1.3922vw;
    height: 1.3922vw;
    border-radius: 50%;
    background: white;
    border: 0.1392vw solid black;
    cursor: pointer;
  }


  .luminosity-bar {
    position: relative;
    width: 1.3922vw; /* Plus petite largeur */
    height: 4.1767vw; /* Hauteur verticale */
    border-radius: 0.6961vw;
  }
  .luminosity-bar input[type="range"] {
    position: absolute;
    top: 0;
    width: 1.3922vw; /* Largeur de la barre */
    height: 4.1767vw; /* Hauteur correspondant à la barre */
    writing-mode: vertical-lr; /* Vertical (de bas en haut) */
    direction: rtl; /* Curseur partant du bas */
    background: none;
    margin: 0;
    padding: 0;
    border: none;
  }
  .luminosity-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.3922vw;
    height: 1.3922vw;
    border-radius: 50%;
    background: white;
    border: 0.1392vw solid black;
    transform: translateX(-0.0348vw);
    cursor: pointer;
    pointer-events: all;
  }
  .luminosity-bar input[type="range"]::-moz-range-thumb {
    width: 1.3922vw;
    height: 1.3922vw;
    border-radius: 50%;
    background: white;
    border: 0.1392vw solid black;
    transform: translateX(-0.0348vw);
    cursor: pointer;
  }


}



/* Style pour les Apple watch */

@media screen and (max-width: 400px) and (max-height: 400px) {

  /* Style de base (pour téléphone donc en portrait) */

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    flex-direction: column;
    touch-action: pan-x pan-y;
  }

  /* La partie du haut avec la séléction du site et le profile */

  .headerContainer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10%;
    position : sticky;
  }

  nav {
    width: 19.2514vw;
    height: 9.6257vw;
    background-color: #EEEEEF;
    border-radius: 1.7326vw;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position : sticky;
    z-index: 3;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar {
    display: none;
  }

  nav .sites {
    line-height: 9.6257vw;
    font-size: 3.4652vw;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-align: center;
    color: black;
    cursor: pointer;
  }
  .sites:nth-child(n) {
    width: 19.2514vw;
  }

  nav .sites-separators {
    width: 0.2vw; /* Épaisseur de la barre */
    height: 50%; /* Hauteur de la barre */
    background-color: #999999; /* Couleur gris foncé */
    display: inline-block;
    position: relative;
    align-self: center;
    z-index: 1;
  }

  nav .siteSlideAnimation {
    height: 8.4707vw;
    z-index: 0;
    border-radius: 1.3476vw;
    margin-left: 0.5776vw;
    background-color: white;
  }


  .selectUser {
    width: 8.6630vw;
    height: 8.6630vw;
    border-radius: 50%;
    font-size: 4.2353vw;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #d8d8db;
    cursor: context-menu;
  }

  .futurButton {
    width: 8.6630vw;
    height: 8.6630vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: white;
  }



  /* La partie centrale avec les semaines (ce qui scroll) */

  .weekContainer{
    display:flex;
    overflow:hidden;
    width:100%;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type:x mandatory
  }
  .weekContainer::-webkit-scrollbar {
    display: none;
  }
  .weekContainer>div{
    text-align:center;
    scroll-snap-align:center;
    scroll-snap-stop: always;
    flex:none;
    width:100%;
  }


  .oneWeekContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: auto;
  }

  .oneWeekEndContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: auto;
  }


  .weekTitle{
    font-family: Arial, sans-serif;
    color: rgb(0, 0, 0);
    font-size: 6.1605vw;
    font-weight: bold;
    margin-bottom: 4.8128vw;
    margin-top: 4.8128vw;
  }
  .oneWeekEndContainer .weekTitle {
    margin-bottom: 4.8128vw;
    margin-top: 4.8128vw;
  }


  .days, .small, .top, .bottom, .weekend {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 7.7005vw;
  }
  .days {
    flex-direction: column;
    gap: 3.8503vw;
  }
  .top, .bottom, .weekend{
    margin: 0 auto;
    flex-direction: column;
  }
  .oneWeekEndContainer .days {
    gap: 3.8503vw;
  }


  .big_rectangle, .small_rectangle {
    position: relative;
    margin: 0 auto;
    background-color: #EEEEEF;
    color: white;
    font-size: 4.6204vw;
    font-weight: bold;
    border-radius: 2.5027vw;
    z-index: 0;
    cursor: pointer;
    width: 61.6042vw;
    height: 25.0268vw;
  }
  .oneWeekEndContainer .big_rectangle {
    width: 61.6042vw;
    height: 25.0268vw;
  }
  .oneWeekEndContainer .small_rectangle {
    width: 61.6042vw;
    height: 25.0268vw;
  }


  .dayOfTheWeek{
    position: absolute;
    font-family: Arial, sans-serif;
    color: rgb(0, 0, 0);
    font-size: 3.8503vw;
    font-weight: bold;
    margin-left: 2.8876vw;
    margin-top: 2.8876vw;
    /*margin-left: 2.8800vw;
    margin-top: 2.8800vw;*/
  }
  .oneWeekEndContainer .dayOfTheWeek {
    font-size: 3.8503vw;
    margin-left: 2.8876vw;
    margin-top: 2.8876vw;
  }


  .dayNum{
    position: absolute;
    font-family: Arial, sans-serif;
    color: #7f7f7f;
    font-size: 2.6952vw;
    margin-left: 4.8128vw;
    margin-top: 7.3155vw;
    /*margin-left: 4.3200vw;
    margin-top: 7.2000vw;*/
  }
  .oneWeekEndContainer .dayNum {
    font-size: 2.6952vw;
    margin-left: 4.8128vw;
    margin-top: 7.3155vw;
  }


  .circle {
    width: 6.7379vw;
    height: 6.7379vw;
    border-radius: 50%;
    position: absolute;
    bottom: 2.8876vw;
    font-size: 3.4652vw;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    align-items: center;
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, right 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    z-index: 0;
  }


  .self-circle {
    position: absolute;
    top: 1.9251vw;
    right: 1.9251vw;
    width: 4.4279vw;
    height: 4.4279vw;
    background-color: #f1f1f1; /* Light gray background */
    border: 0.5776vw solid #A9A9A9; /* Dark gray border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .self-circle-active {
    background-color: #88e488; /* Light gray background */
    border: 0.5776vw solid #3ab638; /* Dark gray border */
  }
  .self-circle-old {
    position: absolute;
    top: 1.9251vw;
    right: 1.9251vw;
    width: 4.4279vw;
    height: 4.4279vw;
    background-color: rgba(89, 88, 88, 0.40);
    border: 0.5776vw solid rgba(89, 88, 88, 0.20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .self-circle-max-resa {
     position: absolute;
     top: 1.9251vw;
     right: 1.9251vw;
     width: 4.4279vw;
     height: 4.4279vw;
     background-color: rgba(89, 88, 88, 0.40);
     border: 0.5776vw solid rgba(89, 88, 88, 0.20);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }


  .nbResa{
    position: absolute;
    color: #606060;
    background-color: #d8d8db;
    font-weight: bold;
    width: 4.8128vw;
    height: 4.8128vw;
    font-size: 2.8876vw;
    right: 1.9251vw;
    z-index: 1;
  }





  /* Partie du bas avec l'indicateur de scroll */

  /* Conteneur des indicateurs */
  .scroll-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.8503vw; /* Espace au-dessus */
  }


  /* Style des points */
  .indicator {
    width: 1.9251vw; /* Taille du point */
    height: 1.9251vw; /* Taille du point */
    margin: 0 1.9251vw; /* Espacement entre les points */
    background-color: #ccc; /* Couleur des points inactifs */
    border-radius: 50%; /* Cercle parfait */
    transition: background-color 0.3s ease; /* Animation pour le changement de couleur */
    cursor: pointer;
  }

  .indicator.left{
    cursor: w-resize;
  }

  .indicator.right{
    cursor: e-resize;
  }

  /* Point actif */
  .scroll-indicator .indicator.active {
    background-color: #606060; /* Couleur du point actif */
  }


  /* Style du symbole history */
  .history {
    position: absolute;
    left: 50%;
    transform: translate(-600%, 0%);
    width: 4.4279vw; /* Taille du point */
    height: 4.4279vw; /* Taille du point */
    background-color: grey; /* Couleur des points inactifs */
    border-radius: 50%; /* Cercle parfait */
    transition: opacity 0.2s ease; /* Animation pour le changement de couleur */
    justify-content: center;
    align-items: center;
    display: flex;
    opacity: 0;
    cursor: pointer;
  }





  /* Lookup rectangle (rectangle qui pop quand on appuie sur une date) */

  .lookup_rectangle {
    margin: 0 auto;
    background-color: #FFE371;
    color: white;
    font-size: 4.6204vw;
    font-weight: bold;
    border-radius: 2.5027vw;
    box-shadow: 0 0.7701vw 1.5401vw rgba(0, 0, 0, 0.2), 0 1.1550vw 3.8503vw rgba(0, 0, 0, 0.19);
    z-index: 20;
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  }


  .lookup_list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 83%;
    overflow-y: scroll;
    box-sizing: border-box;
    transition: margin-top 0.3s ease;
    background-color: rgba(255, 227, 113, 0);
    overflow-x: hidden;
  }
  .lookup_list::-webkit-scrollbar {
    width: 1.1550vw;
  }
  .lookup_list::-webkit-scrollbar-thumb {
    border-radius: 0.9625vw;
    background-color: #c0c0c0;
  }

  .lookup_list_element {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    margin-top: 1.9251vw;
  }

  .lookup_list_name {
    width: 73%;
    position : sticky;
    color: rgb(71, 71, 71, 0);
    font-size: 3.8503vw;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limite à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden; /* Cache le débordement */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte déborde */
    text-align: left; /* Centre le texte à gauche */
    line-height: 1;
  }
  @keyframes growlookup_list_name {
    0% {
      color: rgba(71, 71, 71, 0);
    }
    100% {
      color: rgb(71, 71, 71);
    }
  }




  /* Profile rectangle (rectangle qui pop avec les informations du profile) */

  .profile_rectangle {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0 auto;
    background-color: #FFA178;
    color: white;
    font-size: 4.6204vw;
    font-weight: bold;
    border-radius: 2.5027vw;
    box-shadow: 0 0.7701vw 1.5401vw rgba(0, 0, 0, 0.2), 0 1.1550vw 3.8503vw rgba(0, 0, 0, 0.19);
    transition: width 0.3s ease, height 0.3s ease, left 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 20;
  }


  .profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.8503vw;
    margin-left: 3.8503vw;
    margin-right: 3.8503vw;
    margin-top: 5.7754vw;
  }


  .profile-title {
    font-size: 6.1605vw;
    font-weight: bold;
  }


  .profile-avatar {
    top: 50%;
    left: 50%;
    width: 10.5882vw;
    height: 10.5882vw;
    text-transform: uppercase;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 5.1978vw;
  }


  .close-button {
    background: none;
    border: none;
    font-size: 3.8503vw;
    cursor: pointer;
    color: #474747;
    margin-top: -6.7379vw;
    margin-left: 2vw;
  }
  .close-button:hover {
    color: #000;
  }


  /* Champs de saisie */
  .profile-form {
    margin-bottom: 3.8503vw;
    margin-left: 3.8503vw;
    margin-right: 3.8503vw;
  }


  .input-group {
    margin-bottom: 4.8128vw;
  }
  .input-group label {
    display: block;
    font-size: 3.4652vw;
    margin-bottom: 0.9625vw;
    color: #555;
  }
  .input-group input {
    width: 70%;
    padding: 1.5401vw;
    border: 0.1925vw solid #ccc;
    border-radius: 0.9625vw;
    font-size: 3.4652vw;
    color: #333;
  }
  .input-group input[readonly] {
    background-color: #f0f0f0;
    color: #888;
    cursor: not-allowed;
  }


  #initials {
    width: 6vw;
    text-transform: uppercase;
  }


  #email {
    width: 90%;
  }


  /* Actions */
  .profile-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 3.8503vw;
    margin-right: 3.8503vw;
  }


  .logout-button,
  .save-button,
  .change-password-button{
    padding: 1.5401vw 2.3102vw;
    font-size: 3.4652vw;
    border: none;
    border-radius: 0.9625vw;
    cursor: pointer;
  }
  .change-password-button {
      margin-bottom: 0;
  }
  .logout-button {
    background-color: #dc3545;
    color: white;
  }
  .logout-button:hover {
    background-color: #c82333;
  }
  .save-button {
    background-color: #ffe371;
    color: black;
  }
  .save-button:hover {
    background-color: #edd26a;
  }


  .color-picker-container {
    display: flex;
    align-items: center; /* Centre verticalement les éléments */
    justify-content: space-between; /* Écarte les éléments */
    flex-direction: row; /* Met les éléments sur une ligne horizontale */
    width: 32.7273vw; /* Largeur totale du conteneur */
    margin-right: 1.9251vw;
    margin-bottom: -3.8503vw;
    padding: 0;
  }


  .color-bar {
    position: relative;
    width: 26.9519vw;
    height: 3.8503vw;
    border-radius: 1.9251vw;
    margin-right: 3.8503vw; /* Ajoute un espace avec la luminosité */
  }


  input[type="range"] {
    position: absolute;
    width: 100%;
    -webkit-appearance: none;
    background: none;
    pointer-events: none;
    padding: 0;
    border: none;
    margin: 0;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 3.8503vw;
    height: 3.8503vw;
    border-radius: 50%;
    background: white;
    border: 0.3851vw solid black;
    cursor: pointer;
    pointer-events: all;
  }
  input[type="range"]::-moz-range-thumb {
    width: 3.8503vw;
    height: 3.8503vw;
    border-radius: 50%;
    background: white;
    border: 0.3851vw solid black;
    cursor: pointer;
  }


  .luminosity-bar {
    position: relative;
    width: 3.8503vw; /* Plus petite largeur */
    height: 11.5508vw; /* Hauteur verticale */
    border-radius: 1.9251vw;
  }
  .luminosity-bar input[type="range"] {
    position: absolute;
    top: 0;
    width: 3.8503vw; /* Largeur de la barre */
    height: 11.5508vw; /* Hauteur correspondant à la barre */
    writing-mode: vertical-lr; /* Vertical (de bas en haut) */
    direction: rtl; /* Curseur partant du bas */
    background: none;
    margin: 0;
    padding: 0;
    border: none;
  }
  .luminosity-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 3.8503vw;
    height: 3.8503vw;
    border-radius: 50%;
    background: white;
    border: 0.3851vw solid black;
    transform: translateX(-0.0963vw);
    cursor: pointer;
    pointer-events: all;
  }
  .luminosity-bar input[type="range"]::-moz-range-thumb {
    width: 3.8503vw;
    height: 3.8503vw;
    border-radius: 50%;
    background: white;
    border: 0.3851vw solid black;
    transform: translateX(-0.0963vw);
    cursor: pointer;
  }

}