@charset "UTF-8";
*,
*::after,
*::before {
  outline: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "comfortaa-bold";
  src: url(../fonts/comfortaa-bold.ttf);
}
@font-face {
  font-family: "comfortaa-light";
  src: url(../fonts/comfortaa-light.ttf);
}
@font-face {
  font-family: "comfortaa-medium";
  src: url(../fonts/comfortaa-medium.ttf);
}
@font-face {
  font-family: "comfortaa-regular";
  src: url(../fonts/comfortaa-regular.ttf);
}
@font-face {
  font-family: "comfortaa-semibold";
  src: url(../fonts/comfortaa-semibold.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../fonts/poppins-semibold.ttf);
}
@font-face {
  font-family: "poppins-bold";
  src: url(../fonts/poppins-bold.ttf);
}
@font-face {
  font-family: "poppins-light";
  src: url(../fonts/poppins-light.ttf);
}
@font-face {
  font-family: "poppins-medium";
  src: url(../fonts/poppins-medium.ttf);
}
@font-face {
  font-family: "poppins-regular";
  src: url(../fonts/poppins-regular.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../fonts/poppins-semibold.ttf);
}
@font-face {
  font-family: "Material Design Icons";
  src: url(../../assets/fonts/materialdesignicons-webfont.ttf);
}
@font-face {
  font-family: "comfortaa-bold";
  src: url(../../assets/fonts/comfortaa-bold.ttf);
}
@font-face {
  font-family: "comfortaa-light";
  src: url(../../assets/fonts/comfortaa-light.ttf);
}
@font-face {
  font-family: "comfortaa-medium";
  src: url(../../assets/fonts/comfortaa-medium.ttf);
}
@font-face {
  font-family: "comfortaa-regular";
  src: url(../../assets/fonts/comfortaa-regular.ttf);
}
@font-face {
  font-family: "comfortaa-semibold";
  src: url(../../assets/fonts/comfortaa-semibold.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../../assets/fonts/poppins-semibold.ttf);
}
@font-face {
  font-family: "poppins-bold";
  src: url(../../assets/fonts/poppins-bold.ttf);
}
@font-face {
  font-family: "poppins-light";
  src: url(../../assets/fonts/poppins-light.ttf);
}
@font-face {
  font-family: "poppins-medium";
  src: url(../../assets/fonts/poppins-medium.ttf);
}
@font-face {
  font-family: "poppins-regular";
  src: url(../../assets/fonts/poppins-regular.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../../assets/fonts/poppins-semibold.ttf);
}
body {
  font-family: "comfortaa-regular", sans-serif;
  color: #222524;
  position: relative;
  min-height: 100vh;
}

h1,
h2 {
  font-family: "poppins-semibold", sans-serif;
}

h3,
h4 {
  font-family: "poppins-medium", sans-serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.25em;
}

h4 {
  font-size: 1.15em;
}

p,
a {
  font-family: "comfortaa-medium", sans-serif;
  color: #222524;
  font-size: 1em;
}

button {
  transition: all 0.5s ease;
  font-family: "comfortaa-regular", sans-serif;
  font-size: 1em;
  background-color: transparent;
  border: unset;
  cursor: pointer;
  border-radius: 100px;
  padding: 1em 2.5em;
}
button.primary:is(.primary, .secondary):not(:disabled):focus, button.secondary:is(.primary, .secondary):not(:disabled):focus {
  box-shadow: 0 0 0 3px #abbdc0;
}
button.primary.primary:disabled, button.primary.secondary:disabled, button.secondary.primary:disabled, button.secondary.secondary:disabled {
  opacity: 60%;
  cursor: unset;
}
button.primary.primary, button.secondary.primary {
  background-color: #1b5734;
  color: white;
}
button.primary.primary:not(:disabled):is(:hover, :focus), button.secondary.primary:not(:disabled):is(:hover, :focus) {
  background-color: #337d51;
}
button.primary.secondary, button.secondary.secondary {
  border: 1px solid #1b5734;
  color: #1b5734;
}
button.primary.secondary:not(:disabled):is(:hover, :focus), button.secondary.secondary:not(:disabled):is(:hover, :focus) {
  background-color: #1b5734;
  color: white;
}
button.backoffice:is(.primary, .secondary):not(:disabled):focus {
  box-shadow: 0 0 0 3px #b6896c;
}
button.backoffice.primary:disabled, button.backoffice.secondary:disabled {
  opacity: 60%;
  cursor: unset;
}
button.backoffice.primary {
  background-color: #804e2e;
  color: white;
}
button.backoffice.primary:not(:disabled):is(:hover, :focus) {
  background-color: #9f6844;
}
button.backoffice.secondary {
  border: 1px solid #804e2e;
  color: #804e2e;
}
button.backoffice.secondary:not(:disabled):is(:hover, :focus) {
  background-color: #804e2e;
  color: white;
}
button.tertiary.backoffice {
  color: #804e2e;
  background-color: #ffd6bb;
}
button.tertiary.backoffice.disabled {
  opacity: 60%;
  cursor: unset;
}
button.tertiary.backoffice:not(:disabled):is(:hover, :focus) {
  background-color: #b6896c;
  color: white;
}

.form-field.error > label {
  color: #ce4b4b;
}
.form-field.error > input, .form-field.error > textarea, .form-field.error > select {
  position: relative;
  border-color: #ce4b4b;
}
.form-field.error > input, .form-field.error > input::placeholder, .form-field.error > textarea, .form-field.error > textarea::placeholder, .form-field.error > select, .form-field.error > select::placeholder {
  color: #ce4b4b;
}
.form-field > label {
  font-size: 0.9em;
  display: block;
  color: #676767;
  margin-bottom: 0.5em;
  text-align: start;
}
.form-field > label.required::after {
  content: " *";
  color: #ce4b4b;
}

input, textarea, select {
  font-family: "comfortaa-regular", sans-serif;
  padding: 0.8em 0.5em;
  border-radius: 7px;
  border: 1px solid #676767;
  width: 100%;
}
input:disabled, textarea:disabled, select:disabled {
  opacity: 60%;
}
input:is(:hover, :focus), textarea:is(:hover, :focus), select:is(:hover, :focus) {
  border-color: #1b5734;
}

textarea {
  resize: vertical;
}

input[type=checkbox] {
  display: none;
}
input[type=checkbox].backoffice:checked + label::after {
  background-color: #804e2e;
}
input[type=checkbox].backoffice:not(:checked):hover + label::before {
  color: #804e2e;
}
input[type=checkbox].backoffice:checked + label::after, input[type=checkbox].backoffice:focus + label::after {
  box-shadow: 0 0 0 2px rgba(128, 78, 46, 0.2);
}
input[type=checkbox].backoffice + label::after {
  border-color: #804e2e;
}
input[type=checkbox]:checked + label::after {
  background-color: #1b5734;
}
input[type=checkbox]:not(:checked):hover + label::before {
  color: #1b5734;
}
input[type=checkbox]:checked + label::after, input[type=checkbox]:focus + label::after {
  box-shadow: 0 0 0 2px rgba(51, 125, 81, 0.2);
}
input[type=checkbox] + label {
  position: relative;
  display: block;
  padding-left: 2em;
  cursor: pointer;
}
input[type=checkbox] + label::before, input[type=checkbox] + label::after {
  transition: 0.2s all ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
input[type=checkbox] + label::after {
  left: 0;
  content: "";
  display: block;
  border: 2px solid #1b5734;
  width: 20px;
  height: 20px;
  border-radius: 7px;
}
input[type=checkbox] + label::before {
  left: 3px;
  color: white;
  z-index: 1;
}

select {
  position: relative;
  cursor: pointer;
  color: #676767;
  appearance: none;
  user-select: none;
}

/* LAYOUT */
header#frontoffice {
  position: sticky;
  top: 0;
  z-index: 998;
  font-family: "comfortaa-regular";
  background-color: white;
  padding: 1em 2.5em 0 2.5em;
}
header#frontoffice .mdi {
  font-size: 1.5em;
}
header#frontoffice img {
  height: 3em;
}
header#frontoffice .fullsize-logo {
  display: block;
}
header#frontoffice .smallsize-logo {
  display: none;
}
header#frontoffice #top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header#frontoffice #top-header ul {
  display: flex;
  align-items: center;
  gap: 1em;
}
header#frontoffice #top-header ul li {
  list-style: none;
  margin-left: 0.5em;
}
header#frontoffice #top-header ul li a {
  color: black;
  text-decoration: none;
}
header#frontoffice #top-header ul li a:hover {
  font-family: "comfortaa-bold";
  color: #1b5734;
}
header#frontoffice #top-header ul li a:visited {
  color: black;
}
header#frontoffice #sign-in-up-container > form {
  border-left: 1px solid #eaeaea;
  padding-left: 1em;
}
header#frontoffice #sign-in-up-container > a {
  display: flex;
  align-items: center;
  gap: 1em;
  text-decoration: none;
  margin-right: 1em;
  padding: 0.5em 0.5em;
  padding-right: 1em;
  border-radius: 100px;
  transition: all 0.3s ease;
  font-size: 0.8em;
}
header#frontoffice #sign-in-up-container > a:hover {
  background-color: #f7f7f7;
}
header#frontoffice #sign-in-up-container > a > img {
  width: 2.5em;
  height: 2.5em;
  object-fit: cover;
  border-radius: 100px;
}
header#frontoffice #sign-in-up-container, header#frontoffice .sign-in-up-buttons {
  display: flex;
  align-items: center;
  color: #1b5734;
}
header#frontoffice #sign-in-up-container button:hover, header#frontoffice .sign-in-up-buttons button:hover {
  background-color: #e0ffee;
}
header#frontoffice #header-bottom-stroke {
  height: 2px;
  background-color: #eaeaea;
  margin: 1em 0 0 0;
}
header#frontoffice #open-burger-menu {
  display: none;
}

@media (min-width: 431px) {
  #open-burger-button, #close-burger-button {
    display: none;
  }
}
@media (max-width: 759px) {
  header#frontoffice {
    padding: 1em 1em 0 1em;
  }
  header#frontoffice .mdi {
    font-size: 2.5em;
  }
  header#frontoffice .fullsize-logo {
    display: none !important;
  }
  header#frontoffice .smallsize-logo {
    display: block !important;
  }
  header#frontoffice #top-header ul {
    display: none !important;
  }
  header#frontoffice .sign-in-up-buttons {
    display: none !important;
  }
  header#frontoffice #sign-in-up-container {
    display: none !important;
  }
  header#frontoffice #open-burger-menu {
    width: 100%;
    height: 100vh;
  }
  header#frontoffice #open-burger-menu ul {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  header#frontoffice #open-burger-menu ul a {
    color: black;
    text-decoration: none;
  }
  header#frontoffice #open-burger-menu ul a span {
    font-size: 2em;
  }
  header#frontoffice #open-burger-menu ul a li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em;
    border-bottom: solid 2px #eaeaea;
    width: 100%;
  }
  header#frontoffice .displayed {
    display: block !important;
  }
  header#frontoffice .hidden {
    display: none;
  }
}
footer#foot-global {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-family: "comfortaa-regular";
  color: white;
  background-color: black;
  padding: 2em 2em;
}
footer#foot-global a, footer#foot-global a:visited {
  color: white;
  text-decoration: none;
}
footer#foot-global nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
footer#foot-global nav a {
  padding-left: 1em;
}

/* VIEWS */
.center {
  text-align: center;
  margin: 1em 0;
}
.center > * {
  font-weight: normal;
}

.modal#authentication-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 999;
}
.modal#authentication-modal > .center {
  background-color: white;
  border-radius: 10px;
  padding: 2em 3em;
  position: absolute;
  top: 45%;
  left: 50%;
  width: 30em;
  animation: modal-open 0.5s forwards;
  transform: translate(-50%, -50%);
}
.modal#authentication-modal > .center > .error-message {
  background-color: #ffd0d0;
  color: #ce4b4b;
  padding: 0.8em 1em;
  border-radius: 10px;
  margin: 0.8em 0;
  font-size: 0.9em;
  display: none;
  position: relative;
  padding-left: 2.3em;
}
.modal#authentication-modal > .center > .error-message::before {
  position: absolute;
  left: 10px;
  font-size: 1.2em;
}
.modal#authentication-modal > .center > h3 {
  text-align: center;
  font-weight: normal;
  font-family: "poppins-regular", sans-serif;
  color: #222524;
}
.modal#authentication-modal > .center > .close {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #f7f7f7;
  color: #222524;
  font-size: 1.1em;
  padding: 0.3em 0.6em;
}
.modal#authentication-modal > .center > img {
  width: 14em;
  margin: 0.5em auto;
  display: block;
}
.modal#authentication-modal > .center > form > .form-field {
  margin: 1em 0;
}
.modal#authentication-modal > .center > form > .forgot-password {
  color: #222524;
  display: block;
  text-align: end;
  font-size: 0.9em;
  margin-bottom: 0.7em;
}
.modal#authentication-modal > .center > form > button {
  width: 100%;
}
.modal#authentication-modal > .center > form > button:first-of-type {
  margin-top: 1em;
}
.modal#authentication-modal > .center > form > .another-choice {
  display: block;
  margin: 1.5em 0;
  color: #676767;
  text-align: center;
  position: relative;
}
.modal#authentication-modal > .center > form > .another-choice > .text {
  display: block;
  background-color: white;
  margin: auto;
  width: fit-content;
  padding: 0 1em;
  position: relative;
  z-index: 99;
}
.modal#authentication-modal > .center > form > .another-choice > .line {
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f7f7f7;
}
.modal#authentication-modal > .center > form > a > button {
  width: 100%;
}
@keyframes modal-open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 490px) {
  .modal#authentication-modal > .center {
    width: 23em;
  }
}
.profile-area {
  margin: 0 2em;
}
.profile-area > header {
  margin: 1em 0;
  display: flex;
  gap: 1em;
  align-items: center;
}
.profile-area > header > h1 {
  font-size: 1.8em;
}
.profile-area > header > a {
  text-decoration: none;
}
.profile-area input,
.profile-area select {
  display: none;
}
.profile-area * {
  font-weight: normal;
}
.profile-area > h1 {
  margin: 1em 0;
}
.profile-area > section {
  display: flex;
  gap: 3em;
  justify-content: center;
  margin-bottom: 2em;
}
.profile-area > section > section {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.profile-area article {
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.21);
  padding: 1em 2em;
  border-radius: 20px;
}
.profile-area section.right {
  width: 35em;
  position: relative;
}
.profile-area section.right > article {
  width: 100%;
}
.profile-area section.right > article > h2 {
  margin-bottom: 0.5em;
}
.profile-area section.right > article > div {
  display: grid;
  row-gap: 1em;
  column-gap: 3em;
  grid-template-columns: repeat(2, 1fr);
}
.profile-area section.right > article > div > div > h5 {
  color: #676767;
}
.profile-area section.right > article.synkronizator > p {
  margin-top: -0.5em;
  margin-bottom: 1em;
  color: #676767;
  padding-bottom: 0.6em;
  border-bottom: 1px solid #eaeaea;
}
.profile-area section.right > article.synkronizator > div {
  display: block;
}
.profile-area section.right > article.synkronizator input {
  display: block;
  cursor: unset;
  opacity: 50%;
}
.profile-area section.right > article.synkronizator .form-field > div {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.profile-area section.right > article.synkronizator .form-field > div > button {
  padding: 0.7em 0.9em;
  border-radius: 10px;
}
.profile-area section.left > article.profile > div#displayname {
  margin-top: 0.5em;
  display: flex;
  gap: 0.5em;
}
.profile-area section.left > article.profile > label#profile-picture {
  display: none;
  cursor: pointer;
  margin: auto;
  width: 10em;
  height: 10em;
  background-color: #eaeaea;
  border-radius: 100px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.profile-area section.left > article.profile > label#profile-picture span.mdi.mdi-image {
  font-size: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.profile-area section.left > article.profile > img {
  width: 10em;
  height: 10em;
  object-fit: cover;
  border-radius: 100px;
  display: block;
  margin: auto;
}
.profile-area section.left > article.profile > h3 {
  color: #1b5734;
  margin-top: 0.5em;
  text-align: center;
  font-weight: normal;
}
.profile-area section.left > article.general > h2 {
  margin-bottom: 0.5em;
}
.profile-area section.left > article.general > div {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.profile-area > div.no-profile-found {
  text-align: center;
  margin: 5em 0;
}
.profile-area button#profile-edition {
  width: fit-content;
  padding: 0.7em 0.9em;
  margin-left: auto;
}

@media screen and (max-width: 951px) {
  .profile-area section.right > article > div {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 826px) {
  .profile-area {
    padding-bottom: 10em;
  }
  .profile-area > section {
    flex-wrap: wrap;
  }
  .profile-area > section > section.left {
    width: 35em;
  }
}
@media screen and (max-width: 691px) {
  .profile-area > header {
    flex-wrap: wrap;
  }
}
#finalize-booking {
  width: 60em;
  margin: auto;
}
#finalize-booking > header {
  text-align: center;
}
#finalize-booking > header > a {
  float: left;
}
#finalize-booking > div[role=main] {
  padding: 1em;
  padding-bottom: 2em;
  border-radius: 20px;
  box-shadow: 0 4px 4px 0 rgba(162, 162, 162, 0.54);
}
#finalize-booking > div[role=main] > h2 {
  position: relative;
  width: 100%;
  font-size: 1.7em;
  margin: 0.5em 0;
}
#finalize-booking > div[role=main] > h2 > span {
  display: block;
}
#finalize-booking > div[role=main] > h2 > span:first-of-type {
  background-color: white;
  width: fit-content;
  padding: 0 0.5em;
  font-family: "poppins-medium", sans-serif;
  font-weight: normal;
  color: #424645;
  position: relative;
  z-index: 2;
}
#finalize-booking > div[role=main] > h2 > span:last-of-type {
  width: 100%;
  height: 1px;
  background-color: #eaeaea;
  position: absolute;
  bottom: 12px;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) {
  display: flex;
  gap: 1em;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > img {
  width: 23em;
  border-radius: 10px;
  max-height: 14em;
  object-fit: cover;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > div {
  padding: 1em;
  border: 1px solid #eaeaea;
  border-radius: 20px;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > div > h3, #finalize-booking > div[role=main] > article:nth-of-type(1) > article > div > h4 {
  font-weight: normal;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > div > h3 {
  font-size: 1.5em;
  color: #424645;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > div > h4 {
  color: #676767;
  margin-bottom: 1em;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > div > p {
  color: #424645;
  font-family: "comfortaa-regular", sans-serif;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > a {
  float: right;
  margin-top: 1em;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > a > button {
  position: relative;
  padding-right: 2.5em;
}
#finalize-booking > div[role=main] > article:nth-of-type(1) > article > a > button > .mdi {
  font-size: 1.5em;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
#finalize-booking > div[role=main] > article:nth-of-type(2) {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  justify-content: space-between;
}
#finalize-booking > div[role=main] > article:nth-of-type(2) > div > div {
  display: flex;
  gap: 1em;
  align-items: center;
  margin: 1em 0;
}
#finalize-booking > div[role=main] > article:nth-of-type(2) > div > div > h4 {
  font-weight: normal;
}
#finalize-booking > div[role=main] > article:nth-of-type(2) > div > div > h4:last-of-type {
  font-family: "poppins-bold", sans-serif;
}
#finalize-booking > div[role=main] > article:nth-of-type(2) > h3 {
  padding: 1em;
  border: 1px solid #eaeaea;
  border-radius: 15px;
  color: #424645;
  font-weight: normal;
}
#finalize-booking > div[role=main] > article:nth-of-type(2) > h3 > span {
  font-family: "poppins-bold", sans-serif;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) {
  display: flex;
  gap: 1em;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div {
  flex-grow: 1;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > input[type=radio] {
  display: none;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > input[type=radio]:checked + label {
  border-color: #1b5734;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > input[type=radio]:checked + label > h4 {
  color: #1b5734;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > label {
  border: 1px solid #eaeaea;
  padding: 0.5em 2em;
  border-radius: 15px;
  display: block;
  height: 100%;
  cursor: pointer;
  transition: all 0.4s ease;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > label:is(:hover, :focus) {
  border-color: #1b5734;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > label:is(:hover, :focus) > h4 {
  color: #1b5734;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > label > h4 {
  font-weight: normal;
  margin-bottom: 1em;
  font-size: 1.4em;
  color: #424645;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div > label > img {
  display: block;
  margin: auto;
  position: relative;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div:first-of-type > label > img {
  width: 20em;
  top: 1em;
}
#finalize-booking > div[role=main] > article:nth-of-type(3) > div:last-of-type > label > img {
  width: 15em;
  top: -1.5em;
}
#finalize-booking > div[role=main] > article:nth-of-type(4) {
  padding: 0 1em;
}
#finalize-booking > div[role=main] > article:nth-of-type(4) > p {
  font-family: "comfortaa-regular", sans-serif;
  margin-bottom: 1em;
}
#finalize-booking > a > button.finalize {
  margin: 1.5em 0;
  position: relative;
  padding-right: 2.5em;
}
#finalize-booking > a > button.finalize > .mdi {
  font-size: 1.5em;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

@media screen and (max-width: 972px) {
  #finalize-booking {
    width: 90%;
  }
  div[role=main] > article:nth-of-type(3) {
    display: block !important;
  }
  div[role=main] > article:nth-of-type(3) > div:first-of-type > label {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  div[role=main] > article:nth-of-type(3) > div:last-of-type > label {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  div[role=main] > article:nth-of-type(3) > div:first-of-type > label > img {
    width: 10em !important;
  }
  div[role=main] > article:nth-of-type(3) > div:last-of-type > label > img {
    width: 6em !important;
    position: relative !important;
    top: -8px !important;
  }
  div[role=main] > article:nth-of-type(3) > div > label {
    border-radius: 10px !important;
    height: 3em !important;
    align-items: center !important;
    display: flex !important;
    justify-content: space-around !important;
  }
  div[role=main] > article:nth-of-type(3) > div > label > h4 {
    font-size: 1em !important;
    margin-bottom: unset !important;
  }
  div[role=main] > article:nth-of-type(3) > div > label > img {
    position: unset !important;
  }
  div[role=main] > article:nth-of-type(2) {
    display: block !important;
    border: 1px solid #eaeaea !important;
    padding: 1em !important;
    border-radius: 15px !important;
  }
  div[role=main] > article:nth-of-type(2) h3 {
    border: unset !important;
    padding-left: unset !important;
    padding-top: unset !important;
    font-size: 1.15em !important;
  }
}
@media screen and (max-width: 788px) {
  div[role=main] > article:nth-of-type(1) {
    flex-wrap: wrap;
  }
  div[role=main] > article:nth-of-type(1) > img {
    width: 100% !important;
  }
}
@media screen and (max-width: 522px) {
  #finalize-booking > header {
    text-align: unset !important;
  }
  #finalize-booking > header > button {
    margin-left: unset !important;
    float: unset !important;
  }
  #finalize-booking > header > h1 {
    text-align: center !important;
  }
}
@media screen and (max-width: 432px) {
  #finalize-booking > header > h1 {
    font-size: 1.5em !important;
  }
}
#finalize-booking {
  margin-top: 30px;
  margin-bottom: 30px;
}
#finalize-booking > div[role=main] .annulation,
#finalize-booking > div[role=main] .logement,
#finalize-booking > div[role=main] .sejour {
  padding-left: 0.8em;
}
#finalize-booking > div[role=main] .description-logement {
  margin-bottom: 20px;
}
@media screen and (max-width: 788px) {
  #finalize-booking > div[role=main] .logement {
    justify-content: center;
  }
}
#finalize-booking > div[role=main] .logement .img-logement-container {
  display: flex;
  width: 205px;
  height: 205px;
  border-radius: 20px;
  overflow: hidden;
}
#finalize-booking > div[role=main] .logement .img-logement-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#finalize-booking > div[role=main] .logement .logement-container {
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
@media screen and (max-width: 788px) {
  #finalize-booking > div[role=main] .logement .logement-container {
    width: 100%;
  }
}
#finalize-booking > div[role=main] .logement .logement-container .information-proprio {
  margin-bottom: 20px;
  width: 100%;
}
#finalize-booking > div[role=main] .logement .logement-container .information-proprio .img-proprio-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
}
#finalize-booking > div[role=main] .logement .logement-container .information-proprio .img-proprio-container .img-container {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#finalize-booking > div[role=main] .logement .logement-container .information-proprio .img-proprio-container .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#finalize-booking > div[role=main] .name-proprietaire {
  display: flex;
  gap: 6px;
}
#finalize-booking > div[role=main] .name-proprietaire :first-child {
  text-transform: uppercase;
}
#finalize-booking > div[role=main] .name-proprietaire :last-child {
  text-transform: capitalize;
}
#finalize-booking > div[role=main] .container-amenagement {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start !important;
}
#finalize-booking > div[role=main] .container-amenagement .list-amenagement {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 25px;
}
#finalize-booking > div[role=main] .container-amenagement .list-amenagement p {
  display: flex;
  align-items: center;
  gap: 7px;
}
#finalize-booking > div[role=main] .container-amenagement .list-amenagement p span {
  font-size: 1.5em;
}

#btn-facture-detail {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  text-decoration: none;
  position: sticky;
  bottom: 25px;
  margin: 25px;
}

/* HOME */
main#home > .hero-header {
  height: 350px;
  position: relative;
  margin: 1em 2.5em;
}
main#home > .hero-header > .image-cover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1em;
}
main#home > .hero-header > .image-cover > div.title {
  position: absolute;
  margin: 2em 3em;
  top: 0;
  z-index: 99;
  color: white;
}
main#home > .hero-header > .image-cover > div.title > h1 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 2.5em;
}
main#home > .hero-header > .image-cover > div.title > h2 {
  font-size: 1.5em;
}
main#home > .hero-header > .image-cover > .image {
  position: absolute;
  top: 0;
  border-radius: 1em;
  background-position-y: 20%;
  background-size: cover;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 255, 0)), url(/assets/images/home-landscape.jpeg);
  width: 100%;
  height: 100%;
}
main#home > .hero-header #search-bar {
  position: absolute;
  top: unset;
  bottom: -3em;
  left: 50%;
  height: fit-content;
  transform: translateX(-50%);
  width: 54em;
}
main#home > .hero-header #search-bar input {
  width: 100%;
}
main#home > .hero-header #search-bar.responsive {
  display: none;
}

main#home .accommodations {
  margin: 0 2.5em;
  margin-bottom: 3em;
}
main#home .accommodations > header {
  margin-top: 9em;
  margin-bottom: 5em;
  position: relative;
}
main#home .accommodations > header > h1 {
  text-align: center;
}
main#home .accommodations > header > a {
  position: absolute;
  top: 50%;
  right: 2.5em;
  transform: translateY(-50%);
}
main#home .accommodations > footer > a > button {
  background-color: transparent;
  color: #222524;
  padding: unset;
  box-shadow: unset;
}

main#home .accommodations section,
#accommodation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, (100% - 40px) / 5), 1fr));
  grid-gap: 10px;
  margin-bottom: 2em;
}
main#home .accommodations section > a,
#accommodation-list > a {
  text-decoration: none;
}
main#home .accommodations section .item:hover > .img-container > img,
#accommodation-list .item:hover > .img-container > img {
  transform: scale(1.1);
}
main#home .accommodations section .item > .img-container,
#accommodation-list .item > .img-container {
  position: relative;
  overflow: hidden;
  border-radius: 1em;
}
main#home .accommodations section .item > .img-container > img,
#accommodation-list .item > .img-container > img {
  width: 100%;
  height: 15em;
  object-fit: cover;
  transition: all 0.5s ease;
}
main#home .accommodations section .item > footer,
#accommodation-list .item > footer {
  font-size: 0.9em;
}
main#home .accommodations section .item > footer > h4.title, main#home .accommodations section .item > footer > h4.localization, main#home .accommodations section .item > footer > h4.price,
#accommodation-list .item > footer > h4.title,
#accommodation-list .item > footer > h4.localization,
#accommodation-list .item > footer > h4.price {
  max-width: 95%;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main#home .accommodations section .item > footer > h4.localization,
#accommodation-list .item > footer > h4.localization {
  margin: 0.2em 0;
  font-family: "comfortaa-regular";
  color: #b6896c;
  font-size: 1em;
}
main#home .accommodations section .item > footer > h4.price,
#accommodation-list .item > footer > h4.price {
  font-family: "comfortaa-bold";
  font-size: 1.1em;
}
main#home .accommodations section .item > footer > h4.price > span:last-of-type,
#accommodation-list .item > footer > h4.price > span:last-of-type {
  font-size: 0.8em;
}

@media screen and (max-width: 1040px) {
  main#home .accommodations > header > h1 {
    text-align: start;
    margin-left: 1.5em;
  }
  main#home #search-bar {
    width: 94% !important;
  }
}
@media screen and (max-width: 766px) {
  main#home .accommodations > header > h1 {
    margin-left: unset;
    text-align: center;
  }
  main#home .accommodations > header > a {
    display: none;
  }
}
@media screen and (max-width: 626px) {
  main#home #search-bar {
    display: none;
  }
  main#home #search-bar.responsive {
    display: flex !important;
  }
}
@media screen and (max-width: 502px) {
  main#home .hero-header .title > h1 {
    font-size: 1.9em !important;
  }
  main#home .hero-header .title > h2 {
    font-size: 1.2em !important;
  }
}
/* HOME */
/** FILTERS */
#filter-accommodation-container {
  position: relative;
}

#filter-container {
  border-right: 2px solid #eaeaea;
  height: 100vh !important;
  position: absolute !important;
  transition: all 0.5s ease;
  left: -20em;
}
#filter-container.extended {
  left: 0;
}

#accommodation-list-container {
  transition: all 0.5s ease;
}

#filter-container.extended ~ #accommodation-list-container {
  margin-left: 20em;
}

#filter-container #clear-filters {
  padding: 0.5em 1em;
}

@media screen and (max-width: 1170px) {
  #accommodation-list-container > header {
    flex-wrap: wrap;
    gap: 1em;
  }
}
@media screen and (max-width: 909px) {
  #filter-container {
    position: fixed !important;
    top: 0;
    left: -50em;
    z-index: 999;
    background-color: white;
  }
  #filter-container.extended {
    left: 0;
  }
  #validation-filter-button-container {
    display: block !important;
  }
  #filter-container.extended ~ #accommodation-list-container {
    margin-left: unset !important;
  }
}
@media screen and (max-width: 584px) {
  #accommodation-list-container {
    padding: unset !important;
    width: unset !important;
  }
  #accommodation-list-container > header {
    margin: 1em;
    justify-content: center !important;
  }
  #filter-sort-buttons-container {
    justify-content: center;
  }
  #travelers-input-compact {
    display: none;
  }
  #date-input-compact {
    border-right: 2px solid #eaeaea;
    border-top-right-radius: 1em !important;
    border-bottom-right-radius: 1em !important;
  }
}
@media screen and (max-width: 470px) {
  #filter-sort-buttons-container {
    flex-wrap: wrap;
  }
  #accommodation-list article.item {
    width: 21em;
  }
}
#filter-container .section {
  margin: 1em 0;
  padding-bottom: 1em;
  border-bottom: 1px solid #676767;
}
#filter-container .section > ul {
  display: none;
}
#filter-container .section > ul.opened {
  display: block;
}
#filter-container .section > h3 {
  position: relative;
  cursor: pointer;
}
#filter-container .section > h3 > .mdi {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#filter-container .section > .data {
  margin-top: 0.5em;
  list-style: none;
}
#filter-container .section > .data.price-range {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
#filter-container .section > .data > li {
  margin: 0.5em 0;
}

#full-search-bar {
  display: none;
}

#no-accommodation-result-area {
  display: none;
}

/* END FILTERS */
#home-page button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.accommodation-container {
  display: flex;
  justify-content: center;
}

#home-page .mdi, #filter-accommodation-container .mdi {
  font-size: 1.5em;
}

#home-page a, #filter-accommodation-container a {
  text-decoration: none;
}
#home-page a:visited, #filter-accommodation-container a:visited {
  color: black;
}

#image-cover {
  height: 350px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 255, 0)), url(/assets/images/home-landscape.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 20%;
  border-radius: 1em;
  margin: 1em 2.5em;
  padding: 2em;
  color: white;
}
#image-cover h1 {
  font-family: "poppins-semibold";
  font-size: 2.5em;
}
#image-cover h2 {
  font-family: "poppins-regular";
  font-size: 1.5em;
}

#search-bar {
  display: flex;
  align-items: center;
  position: relative;
  top: -2.5em;
  gap: 0.5em;
  width: fit-content;
  padding: 0.5em;
  border-bottom: 2px #eaeaea solid;
  box-shadow: 0px 5px 5px #eaeaea;
  background-color: white;
  border-radius: 1em;
  margin: 0 auto;
}
#search-bar input, #search-bar button {
  border: none;
  border-radius: 1em;
}
#search-bar input {
  font-family: "comfortaa-medium";
  background-color: #f7f7f7;
  padding: 1.5em;
  width: auto;
}
#search-bar button {
  background-color: #1b5734 !important;
  padding: 1em;
}
#search-bar .mdi-magnify {
  color: white;
}

#list-title-container {
  text-align: center;
}

.show-more-button-container {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  margin-right: 2.5em;
  padding: 0.25em 0.5em;
}

.show-more-button {
  position: relative;
  top: -4em;
}

#accommodation-list {
  display: grid;
  gap: 2em;
  grid-template-columns: repeat(auto-fit, 250px);
  margin: 0 2.5em 2.5em 2.5em;
  justify-content: center;
}

.accommodation-image-item-container {
  width: 250px;
  height: 250px;
  background-color: #eaeaea;
  border-radius: 1em;
}

.accommodation-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em;
}
.accommodation-item h4, .accommodation-item .accommodation-price-container {
  font-size: 14px;
}
.accommodation-item .accommodation-price {
  font-family: "comfortaa-bold";
}
.accommodation-item:hover {
  cursor: pointer;
}

abbr[title] {
  text-decoration: none;
}

.accommodation-description-container {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 250px;
  margin: 0.5em 0;
}

.accommodation-description {
  font-family: "comfortaa-bold";
  margin: 0 0.5em 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.accommodation-location-container {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #b6896c;
  margin-bottom: 0.5em;
  width: 250px;
}

.mdi-star {
  font-size: 1em;
}

.accommodation-location {
  font-family: "comfortaa-regular";
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.accommodation-price-container {
  display: flex;
  font-family: "comfortaa-regular";
  font-size: small;
  gap: 0.5em;
}

.star-notation-container {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  color: #1b5734;
  border: solid 1px #1b5734;
  border-radius: 1em;
  padding: 0.25em 0.5em;
  background-color: #e0ffee;
}

.show-all-button {
  display: none;
}

/*****************/
/* MEDIA QUERIES */
/*****************/
@media (max-width: 431px) {
  #home-page, #filter-accommodation-container {
    min-width: inherit;
  }
  #search-bar {
    width: 355px;
    justify-content: space-between;
  }
  #search-bar .arrival-date-input, #search-bar .departure-date-input, #search-bar .travelers-number-input {
    display: none;
  }
  #search-bar .mdi-account {
    display: none;
  }
  #search-bar input {
    width: inherit;
  }
  #image-cover {
    height: 250px;
    margin: 1em 0em;
    padding: 1em;
    border-radius: 0;
  }
  #image-cover h1 {
    font-family: "poppins-semibold";
    font-size: 2em;
  }
  #image-cover h2 {
    font-family: "poppins-regular";
    font-size: 1em;
  }
  #accommodation-list-title {
    font-size: 1em;
    margin: 0 auto 1em auto;
  }
  .show-more-button {
    display: none !important;
  }
  #accommodation-list {
    justify-content: center;
    grid-template-columns: 1fr;
  }
  .accommodation-image-item-container {
    width: 355px;
    height: 355px;
    background-color: #eaeaea;
    border-radius: 1em;
  }
  .accommodation-description-container {
    width: 355px;
  }
  #home-page .show-all-button-container {
    display: flex;
    justify-content: center;
  }
  #accommodation-list-container .show-all-button {
    display: none;
  }
  #home-page .show-all-button {
    display: flex;
    align-items: center;
    padding: 0.25em 1em;
    color: white;
    background-color: #1b5734;
    border: solid 1px #1b5734;
    border-radius: 2em;
  }
  .show-all-button .mdi {
    margin-left: 8px;
    font-size: 20px;
  }
}
/***************************************/
/* accommodation-LIST (A DEPLACER PLUS TARD) */
/***************************************/
#filter-accommodation-container {
  display: flex;
}

/* Menu des filtres */
.displayed {
  display: block;
}

.hidden {
  display: none;
}

#filter-container {
  align-self: flex-start;
  padding: 2.5em;
  min-width: 20em;
  height: 100%;
  position: relative;
}
#filter-container > section {
  border-top: solid 1px #676767;
  margin-bottom: 2em;
}
#filter-container > section > :first-child {
  justify-content: space-between;
  margin-bottom: 1em;
}
#filter-container > section > div, #filter-container > section li {
  display: flex;
  gap: 1em;
  margin-bottom: 0.5em;
  list-style: none;
}
#filter-container > section > div > input, #filter-container > section li > input {
  width: auto;
}

#filter-title-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2.5em;
}

#validation-filter-button-container {
  display: none;
}

/**********************/
/* Résultats logement */
/**********************/
.back-button {
  display: flex;
  align-items: center;
  padding: 0;
}

#accommodation-title-search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compact-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background-color: white;
  border-radius: 1em;
}
.compact-search-bar div {
  display: flex;
}
.compact-search-bar input, .compact-search-bar button {
  border: none;
  border-radius: 1em;
}
.compact-search-bar input {
  font-family: "comfortaa-medium";
  background-color: #f7f7f7;
  padding: 1.5em;
}
.compact-search-bar #search-input-compact {
  border-radius: 1em 0 0 1em;
  border: solid 2px #eaeaea;
  width: 150px;
}
.compact-search-bar #date-input-compact {
  border-radius: 0;
  width: 150px;
  border-top: solid 2px #eaeaea;
  border-bottom: solid 2px #eaeaea;
}
.compact-search-bar #travelers-input-compact {
  border-radius: 0 1em 1em 0;
  border: solid 2px #eaeaea;
  width: 150px;
}
.compact-search-bar button {
  background-color: #1b5734 !important;
  padding: 1em !important;
}
.compact-search-bar .mdi-magnify {
  color: white;
}

#filter-sort-buttons-container {
  display: flex;
}

#filter-button {
  border-radius: 1em;
}

#accommodation-list {
  margin: 1em 0 2.5em 0;
}

#accommodation-list a {
  text-decoration: none;
}

#accommodation-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.5em;
}
#accommodation-list-container > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.5em;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.75em;
  font-family: "comfortaa-bold";
  color: #1b5734;
  margin-bottom: 2.5em;
}
.pagination li {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.pagination button {
  width: 1em;
  height: 1em;
  padding: 1.6em;
  position: relative;
}
.pagination button > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*****************/
/* MEDIA QUERIES */
/*****************/
@media (max-width: 431px) {
  .compact-search-bar {
    display: none;
  }
  #filter-container {
    min-width: 100%;
    height: 107vh !important;
  }
  #filter-container #validation-filter-button-container {
    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
  }
  #accommodation-list-container {
    padding: 0.5em;
    align-items: center;
  }
  .show-all-button-container {
    display: none;
  }
}
.secondary.is-disabled {
  cursor: not-allowed;
  background-color: #eaeaea;
  border-color: red;
  color: red;
}

@font-face {
  font-family: "comfortaa-bold";
  src: url(../fonts/comfortaa-bold.ttf);
}
@font-face {
  font-family: "comfortaa-light";
  src: url(../fonts/comfortaa-light.ttf);
}
@font-face {
  font-family: "comfortaa-medium";
  src: url(../fonts/comfortaa-medium.ttf);
}
@font-face {
  font-family: "comfortaa-regular";
  src: url(../fonts/comfortaa-regular.ttf);
}
@font-face {
  font-family: "comfortaa-semibold";
  src: url(../fonts/comfortaa-semibold.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../fonts/poppins-semibold.ttf);
}
@font-face {
  font-family: "poppins-bold";
  src: url(../fonts/poppins-bold.ttf);
}
@font-face {
  font-family: "poppins-light";
  src: url(../fonts/poppins-light.ttf);
}
@font-face {
  font-family: "poppins-medium";
  src: url(../fonts/poppins-medium.ttf);
}
@font-face {
  font-family: "poppins-regular";
  src: url(../fonts/poppins-regular.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../fonts/poppins-semibold.ttf);
}
@font-face {
  font-family: "Material Design Icons";
  src: url(../../assets/fonts/materialdesignicons-webfont.ttf);
}
@font-face {
  font-family: "comfortaa-bold";
  src: url(../../assets/fonts/comfortaa-bold.ttf);
}
@font-face {
  font-family: "comfortaa-light";
  src: url(../../assets/fonts/comfortaa-light.ttf);
}
@font-face {
  font-family: "comfortaa-medium";
  src: url(../../assets/fonts/comfortaa-medium.ttf);
}
@font-face {
  font-family: "comfortaa-regular";
  src: url(../../assets/fonts/comfortaa-regular.ttf);
}
@font-face {
  font-family: "comfortaa-semibold";
  src: url(../../assets/fonts/comfortaa-semibold.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../../assets/fonts/poppins-semibold.ttf);
}
@font-face {
  font-family: "poppins-bold";
  src: url(../../assets/fonts/poppins-bold.ttf);
}
@font-face {
  font-family: "poppins-light";
  src: url(../../assets/fonts/poppins-light.ttf);
}
@font-face {
  font-family: "poppins-medium";
  src: url(../../assets/fonts/poppins-medium.ttf);
}
@font-face {
  font-family: "poppins-regular";
  src: url(../../assets/fonts/poppins-regular.ttf);
}
@font-face {
  font-family: "poppins-semibold";
  src: url(../../assets/fonts/poppins-semibold.ttf);
}
#liste-reservation-proprietaire-main {
  margin: 1em 4em;
}
#liste-reservation-proprietaire-main button {
  padding: 0.8em 1em;
}
#liste-reservation-proprietaire-main h1 {
  margin: 1em 0;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-entete {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-entete #export-reservation {
  box-shadow: 0px 0px 2px #804e2e;
  padding: 0.8em 0.8em;
  border-radius: 100px;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-entete #export-reservation > .mdi.mdi-microsoft-excel {
  font-size: 1.2em;
  padding-left: 0.2em;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-recherche {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-recherche #export-reservation {
  margin-right: 0.5em;
  padding: 1.4em;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-recherche div {
  padding: 0.6em;
  background-color: #f7f7f7;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  margin-right: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-recherche div textarea {
  resize: none;
  font-size: 13px;
  font-family: "comfortaa-bold", sans-serif;
  color: #676767;
  background-color: #f7f7f7;
  margin: 0;
  border: none;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-recherche div #inputRechercher {
  border-right: 2px solid #eaeaea;
  border-radius: 0 0 0 0;
  margin-right: 0.5em;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-recherche .primary.backoffice {
  border-radius: 10px;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-onglet {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-onglet a {
  color: #676767;
  font-family: "poppins-semibold", sans-serif;
  font-size: 14px;
  border-radius: 0;
  text-decoration: none;
  padding: 0.5em 1em;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-onglet a:is(:focus, .active) {
  color: #804e2e;
  border-bottom: 2px solid #804e2e;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-onglet a:hover {
  color: #804e2e;
  border-bottom: 2px solid #804e2e;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-float-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 1em 0em;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire-float-left a {
  text-decoration: none;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  /******************************/
  /* Filtre,Oeil facture ,export*/
  /******************************/
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row .mdi.mdi-filter-variant,
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row .mdi.mdi-eye-outline,
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row .mdi.mdi-export-variant {
  color: white;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row .mdi.mdi-eye-outline,
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row .mdi.mdi-filter-variant,
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row .mdi.mdi-sort-ascending,
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-flex-row .mdi.mdi-sort-descending {
  margin-right: 0.2em;
  font-size: 2em;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-bouton-filtre {
  margin-left: 1em;
  border-radius: 100px;
  padding: 0.8em 1.3em;
  transition: all 0.5s ease;
  font-family: "comfortaa-regular", sans-serif;
}
#liste-reservation-proprietaire-main .liste-reservation-proprietaire-bouton-filtre:hover {
  background-color: #eaeaea;
}
#liste-reservation-proprietaire-main .mdi.mdi-magnify {
  font-size: 2em;
  border-radius: 5px;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire {
  margin: 2em 0;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement {
  margin: 1.5em 0;
  border: solid #804e2e 1px;
  border-radius: 20px;
  box-shadow: 0px 0px 2px #804e2e;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement:hover {
  box-shadow: 0px 0px 5px #804e2e;
  background-color: #f7f7f7;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .lien-page-detail {
  width: 100%;
  padding: 0.7em 0.7em;
  text-decoration: unset;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .lien-facture {
  text-decoration: unset;
  margin-right: 0.7em;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement-detail div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement-detail button {
  padding: 0.55em 0.85em;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1110px) {
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div {
    width: 100%;
    justify-content: flex-start;
  }
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div #img-container {
  display: flex;
  align-items: center;
  justify-items: center;
  width: 7em;
  height: 5em;
  border-radius: 10%;
  margin-right: 1em;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div #img-container img {
  width: 100%;
  height: 100%;
  border-radius: 10%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 431px) {
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div #img-container {
    width: 100%;
    height: unset;
    border-radius: 10px;
    margin-right: 0;
  }
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div #img-container img {
    border-radius: 10px;
  }
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div h4 {
  font-size: 0.95em;
  font-family: "poppins-light";
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div h5 {
  font-size: 0.95em;
  font-family: "poppins-light";
  color: #676767;
}
@media screen and (max-width: 1110px) {
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement {
    flex-direction: column;
    width: 100%;
  }
}
@media screen and (max-width: 431px) {
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement {
    border: none;
    box-shadow: none;
    flex-direction: column;
  }
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement div {
    flex-direction: column;
  }
}
@media screen and (max-width: 431px) {
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement-detail {
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    gap: 0;
  }
  #liste-reservation-proprietaire-main #liste-reservation-proprietaire .container-liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement .liste-reservation-proprietaire-logement-detail div {
    flex-direction: row;
    justify-content: space-between;
    gap: 1em;
    width: 100%;
  }
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .non-souligne {
  all: unset;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .non-souligne .non-souligne {
  all: unset;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .non-souligne .non-souligne:hover article {
  background-color: #f7f7f7;
}
#liste-reservation-proprietaire-main #liste-reservation-proprietaire .liste-reservation-proprietaire-flex-row > .mdi.mdi-eye-outline > p {
  margin-left: 0.2em;
  color: white;
  font-size: 100px;
}
#liste-reservation-proprietaire-main .pagination {
  display: flex;
  justify-content: center;
  gap: 0.75em;
  font-size: 1em;
  font-family: "comfortaa-bold";
  margin-bottom: 2.5em;
}
#liste-reservation-proprietaire-main .pagination button {
  width: 3.3em;
  height: 3.3em;
  border-color: #804e2e;
  color: #804e2e;
}
#liste-reservation-proprietaire-main .pagination button:not(:disabled):hover,
#liste-reservation-proprietaire-main .pagination button .bouton-select, #liste-reservation-proprietaire-main .pagination button:focus {
  background-color: #804e2e;
  color: white !important;
}
#liste-reservation-proprietaire-main .pagination button .mdi {
  font-size: 1.7em;
}
#liste-reservation-proprietaire-main .pagination .bouton-select {
  background-color: #804e2e;
  color: white;
}

#liste-reservation-locataire-main {
  margin: 0 4em;
  margin-top: 2em;
}
@media screen and (max-width: 431px) {
  #liste-reservation-locataire-main {
    margin: 0.5em 1em;
  }
}
#liste-reservation-locataire-main h1 {
  margin: 1em 0;
}
#liste-reservation-locataire-main #liste-reservation-locataire-entete {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 431px) {
  #liste-reservation-locataire-main #liste-reservation-locataire-entete {
    flex-direction: column;
    margin-bottom: 1em;
  }
}
#liste-reservation-locataire-main .liste-reservation-locataire-recherche {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#liste-reservation-locataire-main .liste-reservation-locataire-recherche div {
  padding: 0.6em;
  background-color: #f7f7f7;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  margin-right: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#liste-reservation-locataire-main .liste-reservation-locataire-recherche div textarea {
  resize: none;
  font-size: 13px;
  font-family: "comfortaa-bold", sans-serif;
  color: #676767;
  background-color: #f7f7f7;
  margin: 0;
  border: none;
}
#liste-reservation-locataire-main .liste-reservation-locataire-recherche div #inputRechercher {
  border-right: 2px solid #eaeaea;
  border-radius: 0 0 0 0;
  margin-right: 0.5em;
}
#liste-reservation-locataire-main .liste-reservation-locataire-recherche .primary {
  border-radius: 10px;
}
#liste-reservation-locataire-main #liste-reservation-locataire-onglet {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#liste-reservation-locataire-main #liste-reservation-locataire-onglet a {
  color: #676767;
  font-family: "poppins-semibold", sans-serif;
  font-size: 14px;
  border-radius: 0;
  text-decoration: none;
  padding: 0.5em 1em;
}
#liste-reservation-locataire-main #liste-reservation-locataire-onglet a:is(:focus, .active) {
  color: #1b5734;
  border-bottom: 2px solid #1b5734;
}
#liste-reservation-locataire-main #liste-reservation-locataire-onglet a:hover {
  color: #1b5734;
  border-bottom: 2px solid #1b5734;
}
#liste-reservation-locataire-main #liste-reservation-locataire-float-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 1em 0em;
}
#liste-reservation-locataire-main #liste-reservation-locataire-float-left a {
  text-decoration: none;
}
#liste-reservation-locataire-main .liste-reservation-locataire-flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  /******************************/
  /* Filtre,Oeil facture ,export*/
  /******************************/
}
#liste-reservation-locataire-main .liste-reservation-locataire-flex-row .mdi.mdi-filter-variant, #liste-reservation-locataire-main .liste-reservation-locataire-flex-row .mdi.mdi-eye-outline, #liste-reservation-locataire-main .liste-reservation-locataire-flex-row .mdi.mdi-export-variant {
  color: white;
}
#liste-reservation-locataire-main .liste-reservation-locataire-flex-row .mdi.mdi-eye-outline, #liste-reservation-locataire-main .liste-reservation-locataire-flex-row .mdi.mdi-filter-variant, #liste-reservation-locataire-main .liste-reservation-locataire-flex-row .mdi.mdi-sort-ascending, #liste-reservation-locataire-main .liste-reservation-locataire-flex-row .mdi.mdi-sort-descending {
  margin-right: 0.2em;
  font-size: 2em;
}
@media screen and (max-width: 431px) {
  #liste-reservation-locataire-main .liste-reservation-locataire-flex-row {
    display: none;
  }
}
#liste-reservation-locataire-main .liste-reservation-locataire-bouton-filtre {
  margin-left: 1em;
  border-radius: 100px;
  padding: 0.8em 1.3em;
  transition: all 0.5s ease;
  font-family: "comfortaa-regular", sans-serif;
}
#liste-reservation-locataire-main .liste-reservation-locataire-bouton-filtre:hover {
  background-color: #eaeaea;
}
#liste-reservation-locataire-main .mdi.mdi-magnify {
  font-size: 2em;
  border-radius: 5px;
}
#liste-reservation-locataire-main #liste-reservation-locataire {
  margin: 2em 0;
}
#liste-reservation-locataire-main #liste-reservation-locataire .non-souligne {
  all: unset;
  width: 100%;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement {
  display: flex;
  align-items: center;
  margin: 1.5em 0;
  border: solid #1b5734 1px;
  border-radius: 20px;
  box-shadow: 0px 0px 2px #1b5734;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement:hover {
  background-color: #f7f7f7;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .lien-facture {
  text-decoration: unset;
  margin-right: 20px;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement {
  padding: 0.7em 0.7em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1110px) {
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div {
    width: 100%;
    justify-content: flex-start;
  }
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div #img-container {
  display: flex;
  align-items: center;
  justify-items: center;
  width: 10em;
  height: 7em;
  border-radius: 10%;
  margin-right: 1em;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div #img-container img {
  width: 100%;
  height: 100%;
  border-radius: 10%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 431px) {
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div #img-container {
    width: 100%;
    height: unset;
    border-radius: 10px;
    margin-right: 0;
  }
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div #img-container img {
    border-radius: 10px;
  }
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div h4 {
  font-family: "poppins-light";
  font-size: 0.95em;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div .titreDetail {
  font-family: "poppins-light";
  color: #676767;
  font-size: 0.95em;
}
@media screen and (max-width: 1110px) {
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement {
    flex-direction: column;
    width: 100%;
  }
}
@media screen and (max-width: 431px) {
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement {
    border: none;
    box-shadow: none;
    flex-direction: column;
  }
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement div {
    flex-direction: column;
  }
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement .liste-reservation-locataire-logement-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement .liste-reservation-locataire-logement-detail div {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center !important;
  justify-content: center;
  align-items: flex-start;
  white-space: nowrap;
}
#liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement .liste-reservation-locataire-logement-detail button {
  padding: 0.55em 0.85em;
}
@media screen and (max-width: 1110px) {
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement .liste-reservation-locataire-logement-detail {
    width: 100%;
  }
}
@media screen and (max-width: 431px) {
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement .liste-reservation-locataire-logement-detail {
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    gap: 0.5em;
  }
  #liste-reservation-locataire-main #liste-reservation-locataire .container-liste-reservation-locataire-logement .liste-reservation-locataire-logement .liste-reservation-locataire-logement-detail div {
    flex-direction: row;
    justify-content: space-between;
    gap: 1em;
    width: 100%;
  }
}
#liste-reservation-locataire-main .liste-reservation-locataire-flex-row > .mdi.mdi-eye-outline > p {
  margin-left: 0.2em;
  color: white;
  font-size: 100px;
}
#liste-reservation-locataire-main .pagination {
  display: flex;
  justify-content: center;
  gap: 0.75em;
  font-size: 1em;
  font-family: "comfortaa-bold";
  margin-bottom: 2.5em;
}
#liste-reservation-locataire-main .pagination button {
  width: 3em;
  height: 3em;
}
#liste-reservation-locataire-main .pagination button .mdi {
  font-size: 1.7em;
}
#liste-reservation-locataire-main .pagination .bouton-select {
  background-color: #1b5734;
  color: white;
}

*,
*::after,
*::before {
  outline: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "comfortaa-bold";
  src: url(../../../fonts/comfortaa-bold.ttf);
}
@font-face {
  font-family: "comfortaa-light";
  src: url(../../../fonts/comfortaa-light.ttf);
}
@font-face {
  font-family: "comfortaa-medium";
  src: url(../../../fonts/comfortaa-medium.ttf);
}
@font-face {
  font-family: "comfortaa-regular";
  src: url(../../../fonts/comfortaa-regular.ttf);
}
@font-face {
  font-family: "comfortaa-semibold";
  src: url(../../../fonts/comfortaa-semibold.ttf);
}
@font-face {
  font-family: "poppins-bold";
  src: url(../../../fonts/poppins-bold.ttf);
}
@font-face {
  font-family: "poppins-light";
  src: url(../../../fonts/poppins-light.ttf);
}
@font-face {
  font-family: "poppins-medium";
  src: url(../../../fonts/poppins-medium.ttf);
}
@font-face {
  font-family: "poppins-regular";
  src: url(../../../fonts/poppins-regular.ttf);
}
@font-face {
  font-family: "Material Design Icons";
  src: url(../../../fonts/materialdesignicons-webfont.ttf);
}
body {
  font-family: "comfortaa-regular", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "poppins-regular";
}

#pageDetaillee {
  margin-left: 2em;
}
#pageDetaillee > div {
  display: flex;
}
#pageDetaillee > div button {
  background-color: white;
  border: none;
}
#pageDetaillee > div .mdi.mdi-chevron-right {
  position: relative;
  top: 1px;
  font-size: 1.3em;
}
#pageDetaillee > div #cheminPage {
  display: flex;
  align-items: center;
  margin-top: 2em;
}
#pageDetaillee > div a {
  color: #1b5734;
}
#pageDetaillee > div h4 {
  color: #424645;
  font-weight: normal;
}
#pageDetaillee #page {
  display: flex;
  margin: 1em 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 1327px) {
  #pageDetaillee #page {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
#pageDetaillee #page section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 70%;
  padding-right: 1em;
}
@media screen and (max-width: 1327px) {
  #pageDetaillee #page section {
    width: 100%;
  }
}
#pageDetaillee #imgLogement {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-height: 23em;
  border-radius: 13px;
}
#pageDetaillee #blockIntro {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
#pageDetaillee #blockIntro .img-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 750px) {
  #pageDetaillee #blockIntro .img-container {
    flex-direction: column;
  }
  #pageDetaillee #blockIntro .img-container #caracteristiques-logement {
    width: 100%;
  }
}
@media screen and (max-width: 750px) and (max-width: 1300px) {
  #pageDetaillee #blockIntro .img-container #caracteristiques-logement {
    margin-left: 0;
  }
}
@media screen and (max-width: 750px) {
  #pageDetaillee #blockIntro .img-container #caracteristiques-logement ul {
    width: 100%;
  }
}
#pageDetaillee #blockIntro .img-container > div {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 750px) {
  #pageDetaillee #blockIntro .img-container > div {
    width: 100%;
  }
}
#pageDetaillee #blockIntro .img-container #titreInfos-container {
  display: block;
}
#pageDetaillee #blockIntro div + div {
  margin-left: 1.2em;
}
#pageDetaillee #blockIntro #titre {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pageDetaillee #blockIntro #titre h1 {
  font-size: 1.7em;
  margin: 0;
  color: #424645;
}
#pageDetaillee #blockIntro h2 {
  font-family: "comfortaa-regular";
  margin: 0.6em 0 1em 0;
  color: #676767;
  font-size: 1em;
}
#pageDetaillee #blockIntro #caracteristiques-logement ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: 3fr 1fr;
  place-items: center start;
  margin-top: 1.6em;
  border: solid 1px #eaeaea;
  border-radius: 17px;
  padding: 1em;
}
#pageDetaillee #blockIntro #caracteristiques-logement .bulle-Rose {
  background-color: #ffd6bb;
  border-radius: 14.5px;
  padding: 5px 10px 5px 10px;
  margin: 0.2em 0 0.2em 0.3em;
  text-wrap: nowrap;
}
#pageDetaillee #description h3 {
  color: #676767;
  font-size: 1.2em;
  margin: 1.7em 0 0.5em 0;
}
#pageDetaillee #description div {
  display: flex;
  align-items: center;
  margin-top: 0.7em;
}
#pageDetaillee #description div h3 {
  margin: 0;
}
#pageDetaillee #description div img {
  width: 3.5em;
}
#pageDetaillee #box-Activites-Amenagement {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1327px) {
  #pageDetaillee #box-Activites-Amenagement {
    width: 100%;
  }
  #pageDetaillee #box-Activites-Amenagement > div {
    width: 100%;
  }
}
#pageDetaillee #box-Activites-Amenagement > div {
  display: flex;
  box-shadow: 0 0 4px 2px rgba(173, 173, 173, 0.1333333333);
  border-radius: 15px;
  margin: 1em 0;
  padding: 1em;
}
#pageDetaillee #box-Activites-Amenagement > div div {
  margin: 1em 0 0 1em;
}
#pageDetaillee #box-Activites-Amenagement > div > div:first-child {
  border-right: solid 2px #676767;
}
@media screen and (max-width: 670px) {
  #pageDetaillee #box-Activites-Amenagement > div > div:first-child {
    border: none;
  }
}
#pageDetaillee #box-Activites-Amenagement > div div + div {
  margin-left: 3em;
}
#pageDetaillee #box-Activites-Amenagement > div div + div ul {
  grid-template-columns: 180px 1fr;
}
#pageDetaillee #box-Activites-Amenagement > div .container-amenagement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 40%;
}
#pageDetaillee #box-Activites-Amenagement > div .container-amenagement .list-amenagement {
  width: 100%;
}
#pageDetaillee #box-Activites-Amenagement > div .container-amenagement .list-amenagement li {
  margin-bottom: 8px;
}
#pageDetaillee #box-Activites-Amenagement > div .container-activite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 60%;
  padding-right: 15px;
}
#pageDetaillee #box-Activites-Amenagement > div .container-activite .list-activite {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#pageDetaillee #box-Activites-Amenagement > div .container-activite .list-activite li {
  margin-bottom: 8px;
}
@media screen and (max-width: 670px) {
  #pageDetaillee #box-Activites-Amenagement > div {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #pageDetaillee #box-Activites-Amenagement > div .container-activite,
  #pageDetaillee #box-Activites-Amenagement > div .container-amenagement {
    width: 100%;
  }
  #pageDetaillee #box-Activites-Amenagement > div .container-amenagement {
    margin-left: 0;
  }
}
#pageDetaillee #box-Activites-Amenagement ul {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 3em;
  list-style-type: none;
  margin: 1em 3em 0 0;
}
#pageDetaillee #box-Activites-Amenagement ul li span {
  font-size: 1.8em;
  color: #424645;
}
#pageDetaillee #box-Activites-Amenagement h3 {
  color: #424645;
}
#pageDetaillee #blockDevisSticky {
  position: sticky;
  top: 6em;
  margin: 0 2em;
  width: 25%;
  height: fit-content;
}
@media screen and (max-width: 1327px) {
  #pageDetaillee #blockDevisSticky {
    width: 70%;
    margin: 1em 0;
  }
}
#pageDetaillee #blockDevisSticky #profilPropriétaire {
  display: flex;
  align-items: center;
  border: solid 1px #eaeaea;
  border-radius: 13px;
  height: 5em;
  margin-bottom: 1em;
}
#pageDetaillee #blockDevisSticky #profilPropriétaire > div {
  margin-left: 10px;
}
#pageDetaillee #blockDevisSticky #profilPropriétaire > div h4 {
  font-weight: normal;
  color: #424645;
  margin: 0;
}
#pageDetaillee #blockDevisSticky #profilPropriétaire > div span {
  margin: 0;
  color: #1b5734;
}
#pageDetaillee #blockDevisSticky #profilPropriétaire > div span #nbAvis {
  font-size: 0.8em;
}
#pageDetaillee #blockDevisSticky #profilPropriétaire img {
  object-fit: cover;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  margin-left: 10px;
}
#pageDetaillee #blockDevisSticky #box-reservation {
  border: solid 1px #eaeaea;
  border-radius: 13px;
  padding: 2em;
}
#pageDetaillee #blockDevisSticky #box-reservation h2 {
  color: #424645;
  text-align: center;
}
#pageDetaillee #blockDevisSticky #box-reservation .line {
  border: solid 1px #eaeaea;
  margin: 1em 0;
}
#pageDetaillee #blockDevisSticky #box-reservation > button {
  border: solid 1px #424645;
  border-radius: 10px;
  padding: 0.2em 0;
  width: 100%;
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pageDetaillee #blockDevisSticky #box-reservation > button:hover {
  background-color: #eaeaea;
}
#pageDetaillee #blockDevisSticky #box-reservation > button span {
  color: #424645;
}
#pageDetaillee #blockDevisSticky #box-reservation > button span:first-child {
  margin-right: 0.5em;
}
#pageDetaillee #blockDevisSticky #box-reservation > button .mdi.mdi-calendar-month {
  font-size: 1.6em;
}
#pageDetaillee #blockDevisSticky #box-reservation .error-message {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: red;
  margin-bottom: 1em;
}
#pageDetaillee #blockDevisSticky #box-reservation .error-message span {
  margin-right: 5px;
}
#pageDetaillee #blockDevisSticky #box-reservation .error-message p {
  color: red;
}
#pageDetaillee #blockDevisSticky #box-reservation #date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#pageDetaillee #blockDevisSticky #box-reservation #date div h4 {
  color: #676767;
  text-align: center;
  font-size: 0.8em;
}
#pageDetaillee #blockDevisSticky #box-reservation #date div h3 {
  color: #424645;
  font-size: 0.9em;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbVoyageurs {
  color: #676767;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbVoyageurs span:first-child {
  font-size: 0.9em;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbVoyageurs div {
  display: flex;
  align-items: center;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbVoyageurs div span {
  margin: 0 0.5em;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbVoyageurs button {
  display: flex;
  align-items: center;
  height: 1.5em;
  border: none;
  background-color: #E0FFEE;
  border-radius: 50%;
  padding: 0.5em;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbNuits {
  font-size: 1em;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbNuits div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbNuits div div span:nth-child(2) {
  margin-left: 0.3em;
}
#pageDetaillee #blockDevisSticky #box-reservation #nbNuits span:nth-child(odd) {
  color: #676767;
}
#pageDetaillee #blockDevisSticky #box-reservation #boutonDevis button {
  position: relative;
  color: white;
  background-color: #1b5734;
  height: 3em;
  width: 100%;
  border-radius: 21px;
  font-family: "comfortaa-regular";
}
#pageDetaillee #blockDevisSticky #box-reservation #boutonDevis button:hover {
  background-color: #337d51;
}
#pageDetaillee #blockDevisSticky #box-reservation #boutonDevis button .mdi.mdi-chevron-right {
  color: white;
  position: absolute;
  right: 0.3em;
  top: 0.3em;
  font-size: 2em;
}

/*****************/
/* MEDIA QUERIES */
/*****************/
@media screen and (max-width: 1000px) {
  #pageDetaillee #box-Activites-Amenagement ul {
    display: block !important;
    grid-template-columns: 1fr !important;
    margin: 1em !important;
  }
}
@media screen and (max-width: 431px) {
  #pageDetaillee {
    margin: 0 !important;
  }
  #pageDetaillee div:first-child div {
    margin: 1em;
  }
  #pageDetaillee div:first-child button {
    padding: 0 1em 0 0;
  }
  #pageDetaillee #page {
    flex-wrap: wrap;
    margin-left: 0.8em;
  }
  #pageDetaillee #page section {
    width: 100%;
  }
  #pageDetaillee #blockIntro {
    flex-wrap: wrap;
    margin: 0;
    justify-content: center;
  }
  #pageDetaillee #blockIntro div:first-child #imgLogement {
    width: 90%;
  }
  #pageDetaillee #blockIntro div + div {
    margin: 0 1em;
  }
  #pageDetaillee #blockIntro #caracteristiques-logement li:nth-child(odd) {
    margin-right: 1em;
  }
  #pageDetaillee #description {
    margin: 0 1em;
  }
  #pageDetaillee #box-Activites-Amenagement > div {
    flex-wrap: wrap;
    margin-left: 1em;
  }
  #pageDetaillee #box-Activites-Amenagement > div div {
    border: none !important;
    margin: 1em 0 0 0;
  }
  #pageDetaillee #box-Activites-Amenagement > div div + div {
    margin: 0;
  }
  #pageDetaillee #box-Activites-Amenagement ul {
    display: block !important;
    grid-template-columns: 1fr !important;
    margin: 1em !important;
  }
  #pageDetaillee #blockDevisSticky {
    width: 90%;
  }
  #pageDetaillee #blockDevisSticky #box-reservation {
    margin-bottom: 2em;
  }
  #pageDetaillee #cheminPage h4 {
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
    max-width: 8em;
  }
}
.flatpickr-calendar .selected,
.flatpickr-calendar .endRange {
  background-color: #1b5734 !important;
  border: unset;
}
.flatpickr-calendar .endRange,
.flatpickr-calendar .inRange {
  box-shadow: -10px 0 0 #e0ffee !important;
}
.flatpickr-calendar .inRange {
  border: unset;
  background-color: #e0ffee !important;
}

header#backoffice {
  background-color: #222524;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8em 2em;
  color: white;
}
header#backoffice a {
  color: white;
  text-decoration: none;
}
header#backoffice > a > img {
  width: 10em;
  filter: invert(1);
}
header#backoffice > nav > ul {
  list-style: none;
  display: flex;
  gap: 20px;
}
header#backoffice > nav > ul > li > a {
  transition: 0.5s ease all;
}
header#backoffice > nav > ul > li > a:hover {
  color: #ffd6bb;
}
header#backoffice > aside {
  display: flex;
  align-items: center;
  gap: 1em;
}
header#backoffice > aside > a > button {
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  position: relative;
  padding-right: 2.8em;
}
header#backoffice > aside > a > button > .mdi {
  font-size: 1.8em;
  position: absolute;
  top: 20%;
  right: 10px;
}
header#backoffice > aside > a > button:hover {
  background-color: white;
  color: #222524;
}
header#backoffice > aside > #profile {
  position: relative;
}
header#backoffice > aside > #profile > .infos {
  display: flex;
  gap: 1em;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-right: 2.5em;
}
header#backoffice > aside > #profile > .infos > img {
  width: 2.5em;
  height: 2.5em;
  object-fit: cover;
  border-radius: 100px;
}
header#backoffice > aside > #profile > .infos > .mdi {
  font-size: 1.4em;
  position: absolute;
  right: 10px;
  top: 20%;
}
header#backoffice > aside > #profile > .dropdown {
  position: absolute;
  top: 3em;
  width: 100%;
  display: none;
  background-color: #222524;
  border-radius: 10px;
  padding: 0.4em 0;
  box-shadow: -1px 2px 3px rgba(102, 102, 102, 0.2588235294);
}
header#backoffice > aside > #profile > .dropdown * {
  color: white;
}
header#backoffice > aside > #profile > .dropdown > ul {
  list-style: none;
}
header#backoffice > aside > #profile > .dropdown > ul > li {
  cursor: pointer;
}
header#backoffice > aside > #profile > .dropdown > ul > li a {
  display: block;
  padding: 0.5em 1.5em;
  text-align: center;
  width: 100%;
}
header#backoffice > aside > #profile > .dropdown > ul > li button {
  padding: 0.5em 1.5em;
  width: 100%;
}
header#backoffice > aside > #profile > .dropdown > ul > li:hover {
  background-color: #424645;
  transition: 0.5s all ease;
}
header#backoffice > aside > #profile > .dropdown > ul > li:hover > form > button, header#backoffice > aside > #profile > .dropdown > ul > li:hover a {
  color: #ffd6bb;
}
header#backoffice > aside > span.owner {
  border-radius: 10px;
  color: #804e2e;
  background-color: #ffd6bb;
  font-family: "poppins-medium", sans-serif;
  padding: 0.3em 0.8em;
  font-size: 0.9em;
}

#login {
  background-color: #222524;
  height: 100vh;
}
#login > form {
  width: 30em;
  height: 90%;
  align-content: center;
  margin: 0 auto;
}
#login > form > .error-message {
  background-color: #ffd0d0;
  color: #ce4b4b;
  padding: 0.8em 1em;
  border-radius: 10px;
  margin: 0.8em 0;
  font-size: 0.9em;
  display: none;
  position: relative;
  padding-left: 2.3em;
}
#login > form > .error-message::before {
  position: absolute;
  left: 10px;
  font-size: 1.2em;
}
#login > form > h2 {
  text-align: center;
  font-weight: normal;
  font-family: "poppins-regular", sans-serif;
  color: white;
}
#login > form > img {
  width: 14em;
  margin: 0.5em auto;
  display: block;
  filter: invert(1);
}
#login > form > .form-field {
  margin: 1em 0;
}
#login > form > .form-field > label {
  color: white;
}
#login > form > .form-field > input {
  background-color: #424645;
  color: white;
  transition: 0.5s ease all;
}
#login > form > .form-field > input:is(:hover, :focus) {
  border-color: white;
}
#login > form > .forgot-password {
  color: #222524;
  display: block;
  text-align: end;
  font-size: 0.9em;
  margin-bottom: 0.7em;
  color: white;
}
#login > form > button {
  width: 100%;
}
#login > form > button:first-of-type {
  margin-top: 1em;
}
#login > form > .another-choice {
  display: block;
  margin: 1.5em 0;
  color: #676767;
  text-align: center;
  position: relative;
}
#login > form > .another-choice > .text {
  display: block;
  background-color: #222524;
  margin: auto;
  width: fit-content;
  padding: 0 1em;
  position: relative;
  z-index: 99;
  color: white;
}
#login > form > .another-choice > .line {
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f7f7f7;
}
#login > form > a > button {
  width: 100%;
}

#page-home-backoffice {
  margin: 35px 90px;
}
@media screen and (max-width: 730px) {
  #page-home-backoffice {
    margin: 35px 20px;
  }
}
#page-home-backoffice .accueil-logements-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 22px;
  gap: 15px;
}
@media screen and (max-width: 535px) {
  #page-home-backoffice .accueil-logements-header {
    justify-content: center;
  }
  #page-home-backoffice .accueil-logements-header .link-new-logement {
    margin-top: 20px;
  }
}
#page-home-backoffice .accueil-logements-header .title-container {
  display: flex;
  align-items: center;
}
#page-home-backoffice .accueil-logements-header .link-new-logement {
  text-decoration: none;
}
#page-home-backoffice .accueil-logements-header .link-new-logement .new-logement-container button {
  display: flex;
  align-items: center;
  gap: 7px;
}
#page-home-backoffice .accueil-logements-header .link-new-logement .new-logement-container button .plus-icon {
  width: 20px;
  height: 20px;
  padding: 4px;
  color: #ffd6bb;
  background-color: #804e2e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-home-backoffice .nav-page {
  width: 100%;
}
#page-home-backoffice .nav-page ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 10px;
}
#page-home-backoffice .nav-page ul .link-logement {
  all: unset;
}
#page-home-backoffice .nav-page ul .link-logement:hover {
  cursor: pointer;
}
#page-home-backoffice .nav-page {
  width: 100%;
}
#page-home-backoffice .nav-page ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  list-style: none;
}
#page-home-backoffice .nav-page ul .btn-page {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: 1px solid #804e2e;
  color: #804e2e;
}
#page-home-backoffice .nav-page ul .btn-page:not(.btn-nav) {
  padding: 10px;
}
#page-home-backoffice .nav-page ul .btn-page.btn-nav {
  padding: 0;
  font-size: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-home-backoffice .nav-page ul .btn-page:not(.disabled, .is-active):hover {
  background-color: #804e2e;
  color: white;
}
#page-home-backoffice .nav-page ul .btn-page.btn-nav.disabled {
  opacity: 60%;
  cursor: unset;
}
#page-home-backoffice .nav-page ul .btn-page.is-active {
  background-color: #804e2e;
  color: white;
}

.logements-container.backoffice .row-logement {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logements-container.backoffice .row-logement .link-logement {
  text-decoration: none;
  cursor: pointer;
}
.logements-container.backoffice .row-logement .card-logement {
  flex: 1 1 calc(25% - 10px);
  max-width: 270px;
  height: 350px;
  margin-bottom: 10px;
  padding: 0 10px;
}
.logements-container.backoffice .row-logement .card-logement.disabled {
  opacity: 0.5;
}
@media screen and (max-width: 1010px) {
  .logements-container.backoffice .row-logement .card-logement {
    flex: 1 1 calc(50% - 10px);
  }
}
.logements-container.backoffice .row-logement .card-logement .img-logement-container {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 10px;
}
.logements-container.backoffice .row-logement .card-logement .img-logement-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.logements-container.backoffice .row-logement .card-logement .description-logement-container .title-logement,
.logements-container.backoffice .row-logement .card-logement .description-logement-container .adresse-logement {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logements-container.backoffice .row-logement .card-logement .description-logement-container .title-logement {
  font-size: 1.1em;
  margin-bottom: 15px;
}
.logements-container.backoffice .row-logement .card-logement .description-logement-container .adresse-logement {
  display: flex;
  align-items: center;
  color: #804e2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logements-container.backoffice .row-logement .card-logement .description-logement-container .adresse-logement span {
  font-size: 1.4em;
  color: #804e2e;
  margin-right: 5px;
}

/* HOME */
main#home > .hero-header {
  height: 350px;
  position: relative;
  margin: 1em 2.5em;
}
main#home > .hero-header > .image-cover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1em;
}
main#home > .hero-header > .image-cover > div.title {
  position: absolute;
  margin: 2em 3em;
  top: 0;
  z-index: 99;
  color: white;
}
main#home > .hero-header > .image-cover > div.title > h1 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 2.5em;
}
main#home > .hero-header > .image-cover > div.title > h2 {
  font-size: 1.5em;
}
main#home > .hero-header > .image-cover > .image {
  position: absolute;
  top: 0;
  border-radius: 1em;
  background-position-y: 20%;
  background-size: cover;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 255, 0)), url(/assets/images/home-landscape.jpeg);
  width: 100%;
  height: 100%;
}
main#home > .hero-header #search-bar {
  position: absolute;
  top: unset;
  bottom: -3em;
  left: 50%;
  height: fit-content;
  transform: translateX(-50%);
  width: 54em;
}
main#home > .hero-header #search-bar input {
  width: 100%;
}
main#home > .hero-header #search-bar.responsive {
  display: none;
}

main#home .accommodations {
  margin: 0 2.5em;
  margin-bottom: 3em;
}
main#home .accommodations > header {
  margin-top: 9em;
  margin-bottom: 5em;
  position: relative;
}
main#home .accommodations > header > h1 {
  text-align: center;
}
main#home .accommodations > header > a {
  position: absolute;
  top: 50%;
  right: 2.5em;
  transform: translateY(-50%);
}
main#home .accommodations > footer > a > button {
  background-color: transparent;
  color: #222524;
  padding: unset;
  box-shadow: unset;
}

main#home .accommodations section,
#accommodation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, (100% - 40px) / 5), 1fr));
  grid-gap: 10px;
  margin-bottom: 2em;
}
main#home .accommodations section > a,
#accommodation-list > a {
  text-decoration: none;
}
main#home .accommodations section .item:hover > .img-container > img,
#accommodation-list .item:hover > .img-container > img {
  transform: scale(1.1);
}
main#home .accommodations section .item > .img-container,
#accommodation-list .item > .img-container {
  position: relative;
  overflow: hidden;
  border-radius: 1em;
}
main#home .accommodations section .item > .img-container > img,
#accommodation-list .item > .img-container > img {
  width: 100%;
  height: 15em;
  object-fit: cover;
  transition: all 0.5s ease;
}
main#home .accommodations section .item > footer,
#accommodation-list .item > footer {
  font-size: 0.9em;
}
main#home .accommodations section .item > footer > h4.title, main#home .accommodations section .item > footer > h4.localization, main#home .accommodations section .item > footer > h4.price,
#accommodation-list .item > footer > h4.title,
#accommodation-list .item > footer > h4.localization,
#accommodation-list .item > footer > h4.price {
  max-width: 95%;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main#home .accommodations section .item > footer > h4.localization,
#accommodation-list .item > footer > h4.localization {
  margin: 0.2em 0;
  font-family: "comfortaa-regular";
  color: #b6896c;
  font-size: 1em;
}
main#home .accommodations section .item > footer > h4.price,
#accommodation-list .item > footer > h4.price {
  font-family: "comfortaa-bold";
  font-size: 1.1em;
}
main#home .accommodations section .item > footer > h4.price > span:last-of-type,
#accommodation-list .item > footer > h4.price > span:last-of-type {
  font-size: 0.8em;
}

@media screen and (max-width: 1040px) {
  main#home .accommodations > header > h1 {
    text-align: start;
    margin-left: 1.5em;
  }
  main#home #search-bar {
    width: 94% !important;
  }
}
@media screen and (max-width: 766px) {
  main#home .accommodations > header > h1 {
    margin-left: unset;
    text-align: center;
  }
  main#home .accommodations > header > a {
    display: none;
  }
}
@media screen and (max-width: 626px) {
  main#home #search-bar {
    display: none;
  }
  main#home #search-bar.responsive {
    display: flex !important;
  }
}
@media screen and (max-width: 502px) {
  main#home .hero-header .title > h1 {
    font-size: 1.9em !important;
  }
  main#home .hero-header .title > h2 {
    font-size: 1.2em !important;
  }
}
/* HOME */
/** FILTERS */
#filter-accommodation-container {
  position: relative;
}

#filter-container {
  border-right: 2px solid #eaeaea;
  height: 100vh !important;
  position: absolute !important;
  transition: all 0.5s ease;
  left: -20em;
}
#filter-container.extended {
  left: 0;
}

#accommodation-list-container {
  transition: all 0.5s ease;
}

#filter-container.extended ~ #accommodation-list-container {
  margin-left: 20em;
}

#filter-container #clear-filters {
  padding: 0.5em 1em;
}

@media screen and (max-width: 1170px) {
  #accommodation-list-container > header {
    flex-wrap: wrap;
    gap: 1em;
  }
}
@media screen and (max-width: 909px) {
  #filter-container {
    position: fixed !important;
    top: 0;
    left: -50em;
    z-index: 999;
    background-color: white;
  }
  #filter-container.extended {
    left: 0;
  }
  #validation-filter-button-container {
    display: block !important;
  }
  #filter-container.extended ~ #accommodation-list-container {
    margin-left: unset !important;
  }
}
@media screen and (max-width: 584px) {
  #accommodation-list-container {
    padding: unset !important;
    width: unset !important;
  }
  #accommodation-list-container > header {
    margin: 1em;
    justify-content: center !important;
  }
  #filter-sort-buttons-container {
    justify-content: center;
  }
  #travelers-input-compact {
    display: none;
  }
  #date-input-compact {
    border-right: 2px solid #eaeaea;
    border-top-right-radius: 1em !important;
    border-bottom-right-radius: 1em !important;
  }
}
@media screen and (max-width: 470px) {
  #filter-sort-buttons-container {
    flex-wrap: wrap;
  }
  #accommodation-list article.item {
    width: 21em;
  }
}
#filter-container .section {
  margin: 1em 0;
  padding-bottom: 1em;
  border-bottom: 1px solid #676767;
}
#filter-container .section > ul {
  display: none;
}
#filter-container .section > ul.opened {
  display: block;
}
#filter-container .section > h3 {
  position: relative;
  cursor: pointer;
}
#filter-container .section > h3 > .mdi {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#filter-container .section > .data {
  margin-top: 0.5em;
  list-style: none;
}
#filter-container .section > .data.price-range {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
#filter-container .section > .data > li {
  margin: 0.5em 0;
}

#full-search-bar {
  display: none;
}

#no-accommodation-result-area {
  display: none;
}

/* END FILTERS */
#home-page button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.accommodation-container {
  display: flex;
  justify-content: center;
}

#home-page .mdi, #filter-accommodation-container .mdi {
  font-size: 1.5em;
}

#home-page a, #filter-accommodation-container a {
  text-decoration: none;
}
#home-page a:visited, #filter-accommodation-container a:visited {
  color: black;
}

#image-cover {
  height: 350px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 255, 0)), url(/assets/images/home-landscape.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 20%;
  border-radius: 1em;
  margin: 1em 2.5em;
  padding: 2em;
  color: white;
}
#image-cover h1 {
  font-family: "poppins-semibold";
  font-size: 2.5em;
}
#image-cover h2 {
  font-family: "poppins-regular";
  font-size: 1.5em;
}

#search-bar {
  display: flex;
  align-items: center;
  position: relative;
  top: -2.5em;
  gap: 0.5em;
  width: fit-content;
  padding: 0.5em;
  border-bottom: 2px #eaeaea solid;
  box-shadow: 0px 5px 5px #eaeaea;
  background-color: white;
  border-radius: 1em;
  margin: 0 auto;
}
#search-bar input, #search-bar button {
  border: none;
  border-radius: 1em;
}
#search-bar input {
  font-family: "comfortaa-medium";
  background-color: #f7f7f7;
  padding: 1.5em;
  width: auto;
}
#search-bar button {
  background-color: #1b5734 !important;
  padding: 1em;
}
#search-bar .mdi-magnify {
  color: white;
}

#list-title-container {
  text-align: center;
}

.show-more-button-container {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  margin-right: 2.5em;
  padding: 0.25em 0.5em;
}

.show-more-button {
  position: relative;
  top: -4em;
}

#accommodation-list {
  display: grid;
  gap: 2em;
  grid-template-columns: repeat(auto-fit, 250px);
  margin: 0 2.5em 2.5em 2.5em;
  justify-content: center;
}

.accommodation-image-item-container {
  width: 250px;
  height: 250px;
  background-color: #eaeaea;
  border-radius: 1em;
}

.accommodation-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em;
}
.accommodation-item h4, .accommodation-item .accommodation-price-container {
  font-size: 14px;
}
.accommodation-item .accommodation-price {
  font-family: "comfortaa-bold";
}
.accommodation-item:hover {
  cursor: pointer;
}

abbr[title] {
  text-decoration: none;
}

.accommodation-description-container {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 250px;
  margin: 0.5em 0;
}

.accommodation-description {
  font-family: "comfortaa-bold";
  margin: 0 0.5em 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.accommodation-location-container {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #b6896c;
  margin-bottom: 0.5em;
  width: 250px;
}

.mdi-star {
  font-size: 1em;
}

.accommodation-location {
  font-family: "comfortaa-regular";
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.accommodation-price-container {
  display: flex;
  font-family: "comfortaa-regular";
  font-size: small;
  gap: 0.5em;
}

.star-notation-container {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  color: #1b5734;
  border: solid 1px #1b5734;
  border-radius: 1em;
  padding: 0.25em 0.5em;
  background-color: #e0ffee;
}

.show-all-button {
  display: none;
}

/*****************/
/* MEDIA QUERIES */
/*****************/
@media (max-width: 431px) {
  #home-page, #filter-accommodation-container {
    min-width: inherit;
  }
  #search-bar {
    width: 355px;
    justify-content: space-between;
  }
  #search-bar .arrival-date-input, #search-bar .departure-date-input, #search-bar .travelers-number-input {
    display: none;
  }
  #search-bar .mdi-account {
    display: none;
  }
  #search-bar input {
    width: inherit;
  }
  #image-cover {
    height: 250px;
    margin: 1em 0em;
    padding: 1em;
    border-radius: 0;
  }
  #image-cover h1 {
    font-family: "poppins-semibold";
    font-size: 2em;
  }
  #image-cover h2 {
    font-family: "poppins-regular";
    font-size: 1em;
  }
  #accommodation-list-title {
    font-size: 1em;
    margin: 0 auto 1em auto;
  }
  .show-more-button {
    display: none !important;
  }
  #accommodation-list {
    justify-content: center;
    grid-template-columns: 1fr;
  }
  .accommodation-image-item-container {
    width: 355px;
    height: 355px;
    background-color: #eaeaea;
    border-radius: 1em;
  }
  .accommodation-description-container {
    width: 355px;
  }
  #home-page .show-all-button-container {
    display: flex;
    justify-content: center;
  }
  #accommodation-list-container .show-all-button {
    display: none;
  }
  #home-page .show-all-button {
    display: flex;
    align-items: center;
    padding: 0.25em 1em;
    color: white;
    background-color: #1b5734;
    border: solid 1px #1b5734;
    border-radius: 2em;
  }
  .show-all-button .mdi {
    margin-left: 8px;
    font-size: 20px;
  }
}
/***************************************/
/* accommodation-LIST (A DEPLACER PLUS TARD) */
/***************************************/
#filter-accommodation-container {
  display: flex;
}

/* Menu des filtres */
.displayed {
  display: block;
}

.hidden {
  display: none;
}

#filter-container {
  align-self: flex-start;
  padding: 2.5em;
  min-width: 20em;
  height: 100%;
  position: relative;
}
#filter-container > section {
  border-top: solid 1px #676767;
  margin-bottom: 2em;
}
#filter-container > section > :first-child {
  justify-content: space-between;
  margin-bottom: 1em;
}
#filter-container > section > div, #filter-container > section li {
  display: flex;
  gap: 1em;
  margin-bottom: 0.5em;
  list-style: none;
}
#filter-container > section > div > input, #filter-container > section li > input {
  width: auto;
}

#filter-title-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2.5em;
}

#validation-filter-button-container {
  display: none;
}

/**********************/
/* Résultats logement */
/**********************/
.back-button {
  display: flex;
  align-items: center;
  padding: 0;
}

#accommodation-title-search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compact-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background-color: white;
  border-radius: 1em;
}
.compact-search-bar div {
  display: flex;
}
.compact-search-bar input, .compact-search-bar button {
  border: none;
  border-radius: 1em;
}
.compact-search-bar input {
  font-family: "comfortaa-medium";
  background-color: #f7f7f7;
  padding: 1.5em;
}
.compact-search-bar #search-input-compact {
  border-radius: 1em 0 0 1em;
  border: solid 2px #eaeaea;
  width: 150px;
}
.compact-search-bar #date-input-compact {
  border-radius: 0;
  width: 150px;
  border-top: solid 2px #eaeaea;
  border-bottom: solid 2px #eaeaea;
}
.compact-search-bar #travelers-input-compact {
  border-radius: 0 1em 1em 0;
  border: solid 2px #eaeaea;
  width: 150px;
}
.compact-search-bar button {
  background-color: #1b5734 !important;
  padding: 1em !important;
}
.compact-search-bar .mdi-magnify {
  color: white;
}

#filter-sort-buttons-container {
  display: flex;
}

#filter-button {
  border-radius: 1em;
}

#accommodation-list {
  margin: 1em 0 2.5em 0;
}

#accommodation-list a {
  text-decoration: none;
}

#accommodation-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.5em;
}
#accommodation-list-container > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.5em;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.75em;
  font-family: "comfortaa-bold";
  color: #1b5734;
  margin-bottom: 2.5em;
}
.pagination li {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.pagination button {
  width: 1em;
  height: 1em;
  padding: 1.6em;
  position: relative;
}
.pagination button > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*****************/
/* MEDIA QUERIES */
/*****************/
@media (max-width: 431px) {
  .compact-search-bar {
    display: none;
  }
  #filter-container {
    min-width: 100%;
    height: 107vh !important;
  }
  #filter-container #validation-filter-button-container {
    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
  }
  #accommodation-list-container {
    padding: 0.5em;
    align-items: center;
  }
  .show-all-button-container {
    display: none;
  }
}
.secondary.is-disabled {
  cursor: not-allowed;
  background-color: #eaeaea;
  border-color: red;
  color: red;
}

#new-accommodation {
  width: 58em;
  margin: auto;
}
#new-accommodation > a > button.back {
  font-size: 1em;
  margin-top: 2em;
  margin-bottom: 1em;
  padding: unset;
  color: #424645;
}
#new-accommodation > form > section {
  margin: 2em 0;
  padding: 1em 2em;
  border-radius: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
}
#new-accommodation > form > section:first-of-type {
  margin-top: unset;
}
#new-accommodation > form > section:not(.active) {
  opacity: 50%;
}
#new-accommodation > form > section > h2, #new-accommodation > form > section > h3 {
  font-family: "poppins-medium", sans-serif;
  font-weight: normal;
}
#new-accommodation > form > section > h2 {
  color: #424645;
}
#new-accommodation > form > section > h3 {
  color: #676767;
  margin-bottom: 1em;
}
#new-accommodation > form > section footer {
  display: flex;
  gap: 1em;
  justify-content: flex-end;
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #eaeaea;
}
#new-accommodation > form .error-message {
  background-color: #ffd0d0;
  color: #ce4b4b;
  padding: 0.8em 1em;
  border-radius: 10px;
  margin: 0.8em 0;
  font-size: 0.9em;
  display: none;
  position: relative;
  padding-left: 2.3em;
}
#new-accommodation > form .error-message::before {
  position: absolute;
  left: 10px;
  font-size: 1.2em;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) {
  display: flex;
  gap: 2em;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article {
  margin-top: 1em;
  margin-bottom: 3em;
  width: 50%;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type.error > label {
  background-color: #ffd0d0;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type.error > label > .mdi {
  color: #ce4b4b !important;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
  border-radius: 10px;
  cursor: pointer;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label.uploaded {
  background-color: #e0ffee !important;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label > .mdi.mdi-check {
  color: #1b5734 !important;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label > .mdi {
  font-size: 4em;
  color: #424645;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > .alert {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > .alert > .mdi.mdi-alert {
  color: #ce4b4b;
  font-size: 1.3em;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > input[type=file] {
  display: none;
}
#new-accommodation > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:last-of-type > .form-field {
  margin: 1em 0;
}
#new-accommodation > form > section:nth-of-type(1) > .form-field.description {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
#new-accommodation > form > section:nth-of-type(1) > .form-field.description > textarea {
  min-height: 5em;
}
#new-accommodation > form > section:nth-of-type(1) > .attributes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
#new-accommodation > form > section:nth-of-type(1) > .attributes > .form-field input[type=number] {
  width: 5em;
}
#new-accommodation > form > section:nth-of-type(2) > .form-field > select {
  width: 20%;
}
#new-accommodation > form > section:nth-of-type(2) > .form-field > input {
  width: 41%;
}
#new-accommodation > form > section:nth-of-type(2) .form-field {
  margin: 1em 0;
}
#new-accommodation > form > section:nth-of-type(2) .address-number {
  width: 5em;
}
#new-accommodation > form > section:nth-of-type(2) .address-name {
  width: 16em;
}
#new-accommodation > form > section:nth-of-type(2) .inline {
  margin-top: -1em;
  display: flex;
  gap: 1em;
}
#new-accommodation > form > section:nth-of-type(3) > .layouts {
  display: flex;
  gap: 2em;
}
#new-accommodation > form > section:nth-of-type(3) .form-field {
  margin: 1em 0;
}
#new-accommodation > form > section:nth-of-type(3) .form-field.activities {
  display: flex;
  gap: 1em;
  align-items: center;
}
#new-accommodation > form > section:nth-of-type(3) .form-field.activities > select {
  width: 10em;
  border-radius: 100px;
  border-width: 2px;
  font-size: 0.7em;
  padding: 0.5em 1em;
}
#new-accommodation > form > section:nth-of-type(3) .form-field.activities > .distance {
  display: none;
}
#new-accommodation > form > section:nth-of-type(4) > .form-field {
  margin: 1em 0;
}
#new-accommodation > form > section:nth-of-type(4) > .form-field > input[type=number] {
  width: 10%;
}
#new-accommodation > form > section:nth-of-type(4) > .price-ati {
  margin: 1em 0;
}
#new-accommodation > form > section:nth-of-type(4) > .price-ati > span {
  display: block;
}
#new-accommodation > form > section:nth-of-type(4) > .price-ati > .title {
  font-size: 0.9em;
  color: #676767;
}
#new-accommodation > form > section:nth-of-type(4) > .price-ati > #price-ati {
  margin-top: 0.5em;
  font-size: 1.5em;
  font-family: "poppins-regular", sans-serif;
}

#modification-logement {
  width: 58em;
  margin: auto;
}
#modification-logement > a > button.back {
  font-size: 1em;
  margin-top: 2em;
  margin-bottom: 1em;
  padding: unset;
  color: #424645;
}
#modification-logement > form > section {
  margin: 2em 0;
  padding: 1em 2em;
  border-radius: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
}
#modification-logement > form > section:first-of-type {
  margin-top: unset;
}
#modification-logement > form > section #conteneur_image {
  height: 15em;
  width: 25em;
  display: flex;
  margin: auto;
  border-radius: 15px;
  overflow: hidden;
}
#modification-logement > form > section #conteneur_image:hover {
  cursor: pointer;
}
#modification-logement > form > section #image_logement {
  background-size: cover !important;
  background-position: center !important; /* L'image est centrée */
  background-repeat: no-repeat !important; /* L'image ne se répète pas */
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
#modification-logement > form > section #image_logement .mdi.mdi-plus-circle {
  color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 3em;
}
#modification-logement > form > section > h2, #modification-logement > form > section > h3 {
  font-family: "poppins-medium", sans-serif;
  font-weight: normal;
}
#modification-logement > form > section > h2 {
  color: #424645;
}
#modification-logement > form > section > h3 {
  color: #676767;
  margin-bottom: 1em;
}
#modification-logement > form > section footer {
  display: flex;
  gap: 1em;
  justify-content: flex-end;
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #eaeaea;
}
#modification-logement > form .error-message {
  background-color: #ffd0d0;
  color: #ce4b4b;
  padding: 0.8em 1em;
  border-radius: 10px;
  margin: 0.8em 0;
  font-size: 0.9em;
  display: none;
  position: relative;
  padding-left: 2.3em;
}
#modification-logement > form .error-message::before {
  position: absolute;
  left: 10px;
  font-size: 1.2em;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) {
  display: flex;
  gap: 2em;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article {
  margin-top: 1em;
  margin-bottom: 3em;
  width: 50%;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type.error > label {
  background-color: #ffd0d0;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type.error > label > .mdi {
  color: #ce4b4b !important;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
  border-radius: 10px;
  cursor: pointer;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label.uploaded {
  background-color: #e0ffee !important;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label > .mdi.mdi-check {
  color: #1b5734 !important;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > label > .mdi {
  font-size: 4em;
  color: #424645;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > .alert {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > .alert > .mdi.mdi-alert {
  color: #ce4b4b;
  font-size: 1.3em;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:first-of-type > input[type=file] {
  display: none;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article #bouton_photo_logement {
  display: none;
}
#modification-logement > form > section:nth-of-type(1) > section:nth-last-of-type(1) > article:last-of-type > .form-field {
  margin: 1em 0;
}
#modification-logement > form > section:nth-of-type(1) > .form-field.description {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
#modification-logement > form > section:nth-of-type(1) > .form-field.description > textarea {
  min-height: 5em;
}
#modification-logement > form > section:nth-of-type(1) > .attributes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
#modification-logement > form > section:nth-of-type(1) > .attributes > .form-field input[type=number] {
  width: 5em;
}
#modification-logement > form > section:nth-of-type(2) > .form-field > select {
  width: 20%;
}
#modification-logement > form > section:nth-of-type(2) > .form-field > input {
  width: 41%;
}
#modification-logement > form > section:nth-of-type(2) .form-field {
  margin: 1em 0;
}
#modification-logement > form > section:nth-of-type(2) .address-number {
  width: 5em;
}
#modification-logement > form > section:nth-of-type(2) .address-name {
  width: 16em;
}
#modification-logement > form > section:nth-of-type(2) .inline {
  margin-top: -1em;
  display: flex;
  gap: 1em;
}
#modification-logement > form > section:nth-of-type(3) > .layouts {
  display: flex;
  gap: 2em;
}
#modification-logement > form > section:nth-of-type(3) .form-field {
  margin: 1em 0;
}
#modification-logement > form > section:nth-of-type(3) .form-field.activities {
  display: flex;
  gap: 1em;
  align-items: center;
}
#modification-logement > form > section:nth-of-type(3) .form-field.activities > select {
  width: 10em;
  border-radius: 100px;
  border-width: 2px;
  font-size: 0.7em;
  padding: 0.5em 1em;
}
#modification-logement > form > section:nth-of-type(3) .form-field.activities > .distance {
  display: none;
}
#modification-logement > form > section:nth-of-type(4) > .form-field {
  margin: 1em 0;
}
#modification-logement > form > section:nth-of-type(4) > .form-field > input[type=number] {
  width: 10%;
}
#modification-logement > form > section:nth-of-type(4) > .price-ati {
  margin: 1em 0;
}
#modification-logement > form > section:nth-of-type(4) > .price-ati > span {
  display: block;
}
#modification-logement > form > section:nth-of-type(4) > .price-ati > .title {
  font-size: 0.9em;
  color: #676767;
}
#modification-logement > form > section:nth-of-type(4) > .price-ati > #price-ati {
  margin-top: 0.5em;
  font-size: 1.5em;
  font-family: "poppins-regular", sans-serif;
}

button {
  transition: all 0.5s ease;
  font-family: "comfortaa-regular", sans-serif;
  font-size: 1em;
  background-color: transparent;
  border: unset;
  cursor: pointer;
  border-radius: 100px;
  padding: 1em 2.5em;
}
button.primary:is(.primary, .secondary):not(:disabled):focus, button.secondary:is(.primary, .secondary):not(:disabled):focus {
  box-shadow: 0 0 0 3px #abbdc0;
}
button.primary.primary:disabled, button.primary.secondary:disabled, button.secondary.primary:disabled, button.secondary.secondary:disabled {
  opacity: 60%;
  cursor: unset;
}
button.primary.primary, button.secondary.primary {
  background-color: #1b5734;
  color: white;
}
button.primary.primary:not(:disabled):is(:hover, :focus), button.secondary.primary:not(:disabled):is(:hover, :focus) {
  background-color: #337d51;
}
button.primary.secondary, button.secondary.secondary {
  border: 1px solid #1b5734;
  color: #1b5734;
}
button.primary.secondary:not(:disabled):is(:hover, :focus), button.secondary.secondary:not(:disabled):is(:hover, :focus) {
  background-color: #1b5734;
  color: white;
}
button.backoffice:is(.primary, .secondary):not(:disabled):focus {
  box-shadow: 0 0 0 3px #b6896c;
}
button.backoffice.primary:disabled, button.backoffice.secondary:disabled {
  opacity: 60%;
  cursor: unset;
}
button.backoffice.primary {
  background-color: #804e2e;
  color: white;
}
button.backoffice.primary:not(:disabled):is(:hover, :focus) {
  background-color: #9f6844;
}
button.backoffice.secondary {
  border: 1px solid #804e2e;
  color: #804e2e;
}
button.backoffice.secondary:not(:disabled):is(:hover, :focus) {
  background-color: #804e2e;
  color: white;
}
button.tertiary.backoffice {
  color: #804e2e;
  background-color: #ffd6bb;
}
button.tertiary.backoffice.disabled {
  opacity: 60%;
  cursor: unset;
}
button.tertiary.backoffice:not(:disabled):is(:hover, :focus) {
  background-color: #b6896c;
  color: white;
}

*,
*::after,
*::before {
  outline: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "comfortaa-bold";
  src: url(../../../../fonts/comfortaa-bold.ttf);
}
@font-face {
  font-family: "comfortaa-light";
  src: url(../../../../fonts/comfortaa-light.ttf);
}
@font-face {
  font-family: "comfortaa-medium";
  src: url(../../../../fonts/comfortaa-medium.ttf);
}
@font-face {
  font-family: "comfortaa-regular";
  src: url(../../../../fonts/comfortaa-regular.ttf);
}
@font-face {
  font-family: "comfortaa-semibold";
  src: url(../../../../fonts/comfortaa-semibold.ttf);
}
@font-face {
  font-family: "poppins-bold";
  src: url(../../../../fonts/poppins-bold.ttf);
}
@font-face {
  font-family: "poppins-light";
  src: url(../../../../fonts/poppins-light.ttf);
}
@font-face {
  font-family: "poppins-medium";
  src: url(../../../../fonts/poppins-medium.ttf);
}
@font-face {
  font-family: "poppins-regular";
  src: url(../../../../fonts/poppins-regular.ttf);
}
@font-face {
  font-family: "Material Design Icons";
  src: url(../../../../fonts/materialdesignicons-webfont.ttf);
}
body {
  font-family: "comfortaa-regular", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "poppins-regular";
}

#mainProprietaireLogement {
  display: flex;
  flex-direction: column;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer {
  position: relative;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #menu #cheminPage {
  display: flex;
  margin-left: 2em;
  align-items: center;
  margin-top: 1em;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container {
  position: absolute;
  right: 0;
  top: 1em;
  display: flex;
  align-items: center;
  margin-right: 1em;
  /* Rounded sliders */
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container #logementActuel {
  display: none;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container #etatLogement {
  margin-right: 1em;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D80000;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container input:checked + .slider {
  background-color: #337d51;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container input:checked + .slider:before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container .slider.round {
  border-radius: 34px;
}
#mainProprietaireLogement #blockCheminPage-SwitchContainer #switch-container .slider.round:before {
  border-radius: 50%;
}
#mainProprietaireLogement .mdi.mdi-chevron-right {
  position: relative;
  top: 1px;
  font-size: 1.3em;
}
#mainProprietaireLogement #page {
  margin: auto;
  margin-top: 2em;
  width: 95%;
  display: flex;
  justify-content: center;
}
#mainProprietaireLogement #page h3 {
  color: #424645;
}
#mainProprietaireLogement a {
  color: #804e2e;
}
#mainProprietaireLogement a:hover,
#mainProprietaireLogement a:active {
  color: #9f6844;
}
#mainProprietaireLogement a:visited {
  color: #b6896c;
}
#mainProprietaireLogement h4 {
  color: #424645;
  font-weight: normal;
}
#mainProprietaireLogement h3 {
  color: #424645;
}
#mainProprietaireLogement #image-conteneur {
  width: 50%;
  display: flex;
  align-items: center;
  max-height: 25em;
  max-width: 35em;
  justify-items: center;
}
@media screen and (max-width: 800px) {
  #mainProprietaireLogement #image-conteneur {
    width: 70%;
  }
}
#mainProprietaireLogement #image-conteneur #img-logement {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  object-fit: cover;
  object-position: center;
}
#mainProprietaireLogement #modified-button {
  display: none;
  justify-content: right;
}
#mainProprietaireLogement #block-intro {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media screen and (max-width: 300px) {
  #mainProprietaireLogement #block-intro {
    display: flex;
    flex-wrap: wrap;
  }
}
#mainProprietaireLogement #block-intro #intro {
  width: 45%;
  margin-left: 2.2em;
}
#mainProprietaireLogement #block-intro #titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#mainProprietaireLogement #block-intro #titre h1 {
  font-size: 1.7em;
  margin: 0;
  color: #424645;
}
#mainProprietaireLogement #block-intro p {
  text-align: justify;
}
#mainProprietaireLogement #block-intro h2 {
  font-family: "comfortaa-regular";
  margin: 0.6em 0 1em 0;
  color: #676767;
  font-size: 1em;
}
#mainProprietaireLogement #caracteristiques-logement {
  width: 100%;
}
#mainProprietaireLogement #caracteristiques-logement ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  place-items: center start;
  margin-top: 1.6em;
  border: solid 1px #eaeaea;
  border-radius: 17px;
  padding: 1em;
}
#mainProprietaireLogement #caracteristiques-logement .bulle-Rose {
  background-color: #b6896c;
  border-radius: 14.5px;
  width: fit-content;
  padding: 5px 10px 5px 10px;
  margin: 0.2em 12px;
}
#mainProprietaireLogement #description h3 {
  color: #676767;
  font-size: 1.2em;
  margin: 1.7em 0 0.5em 0;
}
#mainProprietaireLogement #description p {
  text-align: justify;
}
#mainProprietaireLogement #description div {
  display: flex;
  align-items: center;
  margin-top: 0.7em;
}
#mainProprietaireLogement #description div h3 {
  margin: 0;
}
#mainProprietaireLogement #description div img {
  width: 3.5em;
}
#mainProprietaireLogement #box-Activites-Amenagement {
  display: flex;
  justify-content: left;
}
#mainProprietaireLogement #box-Activites-Amenagement > div {
  display: flex;
  box-shadow: 0 0 4px 2px rgba(173, 173, 173, 0.1333333333);
  border-radius: 15px;
  margin: 1em 0;
  padding: 1em 2em 2em;
  width: fit-content;
}
#mainProprietaireLogement #box-Activites-Amenagement > div div {
  margin: 1em 0 0 1em;
}
#mainProprietaireLogement #box-Activites-Amenagement > div > div:first-child {
  border-right: solid 2px #676767;
}
#mainProprietaireLogement #box-Activites-Amenagement > div div + div {
  margin-left: 3em;
}
#mainProprietaireLogement #box-Activites-Amenagement > div div + div ul {
  grid-template-columns: 1.5fr 1fr;
  margin: auto;
  padding-bottom: 1em;
}
#mainProprietaireLogement #box-Activites-Amenagement ul {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  list-style-type: none;
  margin: auto;
  padding-right: 2em;
}
#mainProprietaireLogement #box-Activites-Amenagement ul li {
  margin-top: 1em;
}
#mainProprietaireLogement #box-Activites-Amenagement ul li span {
  font-size: 1.8em;
  color: #424645;
}
#mainProprietaireLogement #modifierLogement {
  text-decoration: none;
  position: sticky;
  float: right;
  bottom: 1em;
  margin-bottom: 1em;
}

#backoffice-registration {
  background-color: #222524;
  color: white;
  padding-top: 1em;
  padding-bottom: 5em;
}
#backoffice-registration > img {
  filter: invert(1);
  display: block;
  margin: auto;
  margin-bottom: 0.5em;
  width: 15em;
}
#backoffice-registration > h2 {
  text-align: center;
}
#backoffice-registration > form {
  width: 35em;
  margin: auto;
  padding-bottom: 2em;
}
#backoffice-registration > form > div.profile-container {
  margin: 2em auto;
  width: fit-content;
}
#backoffice-registration > form > div.profile-container > label {
  display: block;
  cursor: pointer;
  position: relative;
}
#backoffice-registration > form > div.profile-container > label > img {
  border-radius: 200px;
  width: 15em;
  height: 15em;
  object-fit: cover;
}
#backoffice-registration > form > div.profile-container > label > .add-new > span.opacity {
  width: 100%;
  border-radius: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#backoffice-registration > form > div.profile-container > label > .add-new > span.mdi.mdi-plus-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  color: black;
  transform: translate(-50%, -50%);
  font-size: 3em;
}
#backoffice-registration > form > button {
  margin-top: 0.5em;
  width: 100%;
}
#backoffice-registration .form-field {
  margin: 1em 0;
}
#backoffice-registration .form-field:last-of-type {
  border-bottom: 1px solid #676767;
  padding-bottom: 2em;
}
#backoffice-registration .form-field > label {
  color: white;
}
#backoffice-registration .form-field > input, #backoffice-registration .form-field > select {
  background-color: #424645;
  color: white;
  transition: 0.5s ease all;
}
#backoffice-registration .form-field > input:is(:hover, :focus), #backoffice-registration .form-field > select:is(:hover, :focus) {
  border-color: white;
}

@media screen and (max-width: 576px) {
  #backoffice-registration > form {
    width: 23em;
  }
}
.active {
  display: block;
}

#modal {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  z-index: 999;
}
#modal #modal-devis-content {
  width: 50em;
  margin: auto;
  position: sticky;
  top: 2em;
}
#modal #modal-devis-content > div {
  padding: 1em 2em;
  border-radius: 20px;
  background-color: white;
  box-shadow: 0 4px 4px 0 rgba(162, 162, 162, 0.54);
}
#modal #modal-devis-content > div .close {
  position: relative;
  z-index: 5;
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
}
#modal #modal-devis-content > div .close:hover,
#modal #modal-devis-content > div .close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}
#modal #modal-devis-content > div h2 {
  position: relative;
  width: 100%;
  font-size: 1.7em;
}
#modal #modal-devis-content > div h2 > span {
  display: block;
}
#modal #modal-devis-content > div h2 > span:first-of-type {
  background-color: white;
  width: fit-content;
  padding: 0 0.5em 0 0;
  font-family: "poppins-medium", sans-serif;
  font-weight: normal;
  color: #424645;
  position: relative;
  z-index: 2;
}
#modal #modal-devis-content > div h2 > span:last-of-type {
  width: 100%;
  height: 1px;
  background-color: #eaeaea;
  position: absolute;
  bottom: 12px;
}
#modal #modal-devis-content > div > article > div {
  margin: 0 0.5em;
}
#modal #modal-devis-content > div > article > div > div {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  margin: 1em 0;
}
#modal #modal-devis-content > div > article > div > div > div {
  display: flex;
  gap: 1em;
}
#modal #modal-devis-content > div > article > div > div > div > h4 {
  font-weight: normal;
}
#modal #modal-devis-content > div > article > div > div > h4 {
  font-weight: normal;
}
#modal #modal-devis-content > div > article > div > div > h4:last-of-type {
  font-family: "poppins-bold", sans-serif;
}
#modal #modal-devis-content > div > article #PrixTTC {
  display: flex;
  border-top: solid 1px grey;
  padding: 0.8em 0;
  margin: 0;
  background-color: #e0ffee;
  justify-content: space-between;
}
#modal #modal-devis-content > div > article #PrixTTC h4 {
  padding: 0 0.5em;
}
#modal #modal-devis-content > div > article #trait {
  width: 96%;
  height: 1px;
  background-color: #eaeaea;
  position: absolute;
  bottom: 4em;
}
#modal #modal-devis-content button.devis {
  float: right;
  margin: 1em 0;
  position: relative;
  padding-right: 2.5em;
}
#modal #modal-devis-content button.devis > .mdi {
  font-size: 1.5em;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
@media screen and (max-width: 900px) {
  #modal #modal-devis-content {
    width: 90%;
    margin: auto;
  }
}
@media screen and (max-width: 580px) {
  #modal #modal-devis-content {
    margin-top: 2em;
  }
  #modal #modal-devis-content > div {
    max-height: 80vh;
    overflow: auto;
  }
  #modal #modal-devis-content > div > article > div > div > div {
    display: block;
  }
  #modal #modal-devis-content > div > article:first-of-type > div > div:first-child {
    display: block;
  }
}

.notification[role=dialog] {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em;
  border-right: 5px solid #222524;
  background-color: #f7f7f7;
  z-index: 9999;
  animation: open 1s forwards;
}
.notification[role=dialog] > h3 {
  overflow: hidden;
  text-wrap: nowrap;
  max-width: 50em;
  text-overflow: ellipsis;
  font-size: 1.1em;
  font-family: "poppins-regular", sans-serif;
}
.notification[role=dialog].success {
  background-color: #e0ffee;
  border-color: #1b5734;
  color: #1b5734;
}
.notification[role=dialog].error {
  background-color: #ffd0d0;
  border-color: #ce4b4b;
  color: #ce4b4b;
}
.notification[role=dialog].warning {
  background-color: rgb(255, 233, 193);
  color: orange;
  border-color: orange;
}
.notification[role=dialog] > .mdi {
  font-size: 1.8em;
}
@keyframes open {
  from {
    right: -30em;
  }
  to {
    right: 1em;
  }
}

#new-icalator-page {
  margin: auto;
  margin-top: 20px;
  width: fit-content;
  max-width: 1350px;
  width: 100%;
}
#new-icalator-page h1 {
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}
#new-icalator-page .error-message {
  color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  width: fit-content;
  padding: 7px;
  user-select: none;
}
#new-icalator-page .error-message p {
  color: red;
}
#new-icalator-page .error-message span {
  font-size: 1.2em;
}
#new-icalator-page #form-icalator {
  margin: auto;
  max-width: 1250px;
  padding: 40px 20px;
}
#new-icalator-page #form-icalator .date-inputs-container {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 40px;
}
#new-icalator-page #form-icalator .date-inputs-container fieldset {
  width: 100%;
  max-width: 500px;
  border: unset;
}
#new-icalator-page #form-icalator button[type=submit] {
  margin-top: 40px;
  margin-left: auto;
}
#new-icalator-page #form-icalator .logements-container.backoffice {
  padding: 20px;
  border: unset;
  border-radius: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
}
#new-icalator-page #form-icalator .logements-container.backoffice label[for=logements] {
  font-size: 1.2em;
  display: block;
  text-align: center;
  margin-bottom: 15px;
}
#new-icalator-page #form-icalator .logements-container.backoffice .row-logement {
  gap: 20px;
}
#new-icalator-page .input-logement {
  position: relative;
}
#new-icalator-page .input-logement input[type=checkbox] {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}
#new-icalator-page .input-logement input[type=checkbox]:hover {
  cursor: pointer;
}
#new-icalator-page .input-logement input[type=checkbox]:hover + .card-logement {
  background-color: #ffd6bb;
}
#new-icalator-page .input-logement input[type=checkbox]:checked + .card-logement {
  background-color: #b6896c;
}
#new-icalator-page .input-logement input[type=checkbox] + ::after {
  display: none;
}
#new-icalator-page .input-logement .card-logement {
  transition: all 0.3s ease;
  padding: 10px;
  border-radius: 20px;
}

#icalator-success-page {
  margin: auto;
  max-width: 1250px;
  padding: 40px 20px;
}
#icalator-success-page a {
  color: #804e2e;
  text-decoration: none;
  font-weight: bold;
}
#icalator-success-page a:hover {
  text-decoration: underline;
}
#icalator-success-page h1 {
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
}
#icalator-success-page .success-container {
  border-radius: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
  text-align: center;
  padding: 25px;
  width: fit-content;
  margin: auto;
}
#icalator-success-page .success-container .icalator-success-title span {
  margin: auto;
  font-size: 10em;
  border-radius: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ebfff0;
  color: #4bb543;
  width: fit-content;
}
#icalator-success-page .success-container .icalator-success-title h2 {
  text-align: center;
  color: #4bb543;
  font-size: 3em;
}
#icalator-success-page .success-container .success-description {
  line-height: 2em;
}

.chemin-page-backoffice {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  align-items: center;
  font-size: 1.1em;
}
.chemin-page-backoffice a {
  color: #804e2e;
  text-decoration: none;
  font-weight: bold;
}
.chemin-page-backoffice a:hover {
  text-decoration: underline;
}
.chemin-page-backoffice span {
  display: flex;
  align-items: center;
  justify-content: center;
}

#icalator-home-page .icalator-container-home {
  max-width: 1500px;
  margin: auto;
  padding: 20px;
}
#icalator-home-page .icalator-container-home .icalator-title {
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#icalator-home-page .icalator-home-table-container {
  overflow-x: auto;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}
#icalator-home-page .icalator-home-table {
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 10px;
  border: 1px solid #424645;
  overflow: hidden;
}
#icalator-home-page .icalator-home-table th,
#icalator-home-page .icalator-home-table td {
  padding: 10px 20px;
}
#icalator-home-page .icalator-home-table thead {
  background-color: #804e2e;
  color: white;
}
#icalator-home-page .icalator-home-table tbody tr {
  transition: all 0.3s ease;
}
#icalator-home-page .icalator-home-table tbody tr:nth-child(even) {
  background-color: #ffd6bb;
}
#icalator-home-page .icalator-home-table tbody tr td .calendar-link {
  color: #804e2e;
  text-decoration: none;
  font-weight: bold;
}
#icalator-home-page .icalator-home-table tbody tr td .calendar-link:hover {
  text-decoration: underline;
}
#icalator-home-page .icalator-home-table tbody tr .actions-cell {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
#icalator-home-page .icalator-home-table tbody tr .actions-cell a {
  text-decoration: none;
}
#icalator-home-page .icalator-home-table tbody tr .calendar-btn {
  color: white;
  border-radius: 20px;
  padding: 5px 10px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#icalator-home-page .icalator-home-table tbody tr .calendar-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
}
#icalator-home-page .icalator-home-table tbody tr .read-btn {
  background-color: #4bb543;
}
#icalator-home-page .icalator-home-table tbody tr .read-btn:hover {
  background-color: #3a9c3a;
}
#icalator-home-page .icalator-home-table tbody tr .delete-btn {
  background-color: #ff3333;
}
#icalator-home-page .icalator-home-table tbody tr .delete-btn:hover {
  background-color: #de0404;
}
#icalator-home-page .icalator-home-table tbody tr .edit-btn {
  background-color: #ffbb33;
}
#icalator-home-page .icalator-home-table tbody tr .edit-btn:hover {
  background-color: #e6a300;
}

#read-calendar-page {
  max-width: 1250px;
  margin: auto;
  padding: 20px;
}
#read-calendar-page h1 {
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
  margin: 20px 0;
}
#read-calendar-page .calendar-informations {
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}
#read-calendar-page .calendar-informations div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#read-calendar-page .calendar-informations div p {
  font-size: 1.4em;
}
#read-calendar-page .url-informations {
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
#read-calendar-page .url-informations .calendar-link {
  color: #804e2e;
  text-decoration: none;
  font-weight: bold;
}
#read-calendar-page .url-informations .calendar-link:hover {
  text-decoration: underline;
}
#read-calendar-page .url-informations p {
  font-size: 1.1em;
}
#read-calendar-page .logements-container.backoffice {
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
}
#read-calendar-page .logements-container.backoffice h2 {
  text-align: center;
  margin-bottom: 20px;
}

#modal-calendar {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  width: 470px;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
  background-color: white;
}
#modal-calendar h2 {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}
#modal-calendar .modal-btn-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#modal-calendar-background {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  top: 0;
  left: 0;
  z-index: 2;
}

#modalValidation {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  z-index: 999;
}
#modalValidation #modalValidationContent {
  width: 33em;
  margin: auto;
  margin-top: 1em;
  position: sticky;
  top: 1em;
}
#modalValidation #modalValidationContent .close {
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
}
#modalValidation #modalValidationContent .close:hover,
#modalValidation #modalValidationContent .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#modalValidation #modalValidationContent > div {
  padding: 1em;
  border-radius: 20px;
  background-color: white;
  box-shadow: 0 4px 4px 0 rgba(162, 162, 162, 0.54);
}
#modalValidation #modalValidationContent > div h2 {
  text-align: center;
  margin-bottom: 1em;
}
#modalValidation #modalValidationContent > div p {
  text-align: center;
}
#modalValidation #modalValidationContent > div div {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}
#modalValidation #modalValidationContent > div div button {
  padding: 0.8em 1.5em;
  margin: 2em 1em 1em 2em;
}

.inscription {
  width: 35em;
  margin: 1em auto;
  border-radius: 15px;
  padding-bottom: 7em;
}
.inscription section {
  margin: 2em 0;
  padding: 1em 2em;
  border-radius: 20px;
  border: 1px solid #1b5734;
  box-shadow: 0 0 4px 0 rgba(162, 162, 162, 0.54);
}
.inscription input, .inscription select {
  font-size: 1em;
}
.inscription input:focus {
  box-shadow: 0 0 5px 0 #1b5734;
}
.inscription h1 {
  text-align: center;
  margin-bottom: 1em;
  color: #424645;
}
.inscription .form-field {
  margin: 0.5em 0;
}
.inscription div.profile-container {
  margin: 2em auto;
  width: fit-content;
}
.inscription div.profile-container > label {
  display: block;
  cursor: pointer;
  position: relative;
}
.inscription div.profile-container > label > img {
  border-radius: 200px;
  width: 15em;
  height: 15em;
  object-fit: cover;
}
.inscription div.profile-container > label > .add-new > span.opacity {
  width: 100%;
  border-radius: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.inscription div.profile-container > label > .add-new > span.mdi.mdi-plus-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
}
.inscription h2 {
  text-align: center;
  font-weight: normal;
  font-family: "poppins-regular", sans-serif;
}
.inscription > h3 {
  padding: 0.5em 0.8em;
  border: 1px solid #222524;
  border-radius: 15px;
  margin: 0.5em 0;
  font-size: 1em;
}
.inscription > h3 > span {
  font-weight: normal;
  font-family: "poppins-regular", sans-serif;
  color: #424645;
}
.inscription #valide {
  margin-top: 1em;
  margin-left: auto;
  display: block;
}
.inscription .error {
  color: red;
}

@media screen and (max-width: 619px) {
  .inscription {
    width: 24em;
  }
}